/* ═══════════════════════════════════════════════════════
   thegregslist.com — Y2K glossy dot-com design system
   White ground · Coolvetica display · Aqua gloss · Chrome
   ═══════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Coolvetica';
  src: url('/fonts/coolvetica.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #ffffff;
  --ink: #1a1c20;
  --body-ink: #3c414a;
  --aqua-hi: #8fd0ff;
  --aqua: #3d9be6;
  --aqua-mid: #1470c4;
  --aqua-deep: #0d5288;
  --chrome-hi: #fdfdfd;
  --chrome-mid: #e8e9ec;
  --chrome-lo: #d7d9dd;
  --link: #0033cc;
  --orange: #ff9900;
}

* { box-sizing: border-box; }

html { background: var(--white); }
body {
  margin: 0;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }
a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
img { max-width: 100%; }

/* ── Chrome header ─────────────────────────────────── */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 28px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 4px),
    linear-gradient(var(--chrome-hi), var(--chrome-mid) 60%, var(--chrome-lo));
  border-bottom: 1px solid #b9bdc3;
}
.wordmark {
  font-family: 'Coolvetica', 'Arial Narrow', sans-serif;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .5px;
  text-shadow: 0 1px 0 #fff;
}
.wordmark .dotcom { color: var(--orange); }

.pill-nav { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Glossy pill buttons ───────────────────────────── */
.pill {
  position: relative;
  display: inline-block;
  font-family: 'Coolvetica', 'Arial Narrow', sans-serif;
  font-size: 16px;
  letter-spacing: .5px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px 1px rgba(0, 40, 80, .55);
  padding: 7px 22px 8px;
  border-radius: 999px;
  border: 1px solid var(--aqua-deep);
  background: linear-gradient(var(--aqua-hi) 0%, var(--aqua) 45%, var(--aqua-mid) 50%, #4aa8f0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 1px 3px rgba(0, 40, 80, .35);
}
.pill::before {
  content: "";
  position: absolute;
  left: 7%; right: 7%; top: 2px; height: 46%;
  border-radius: 999px;
  background: linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.1));
  pointer-events: none;
}
.pill:hover { filter: brightness(1.08); }
.pill.big { font-size: 21px; padding: 10px 34px 12px; }
.pill[aria-current="page"] {
  background: linear-gradient(#ffd88f 0%, #f0a53d 45%, #d4820e 50%, #f0b04a 100%);
  border-color: #8a5200;
  text-shadow: 0 -1px 1px rgba(90, 50, 0, .55);
}

/* ── Ticker ────────────────────────────────────────── */
.ticker {
  display: flex;
  overflow: hidden;
  background: #0b1526;
  border-top: 1px solid #29406b;
  border-bottom: 1px solid #29406b;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 11px;
  color: #cfe3ff;
  white-space: nowrap;
}
.ticker-inner {
  display: inline-flex;
  gap: 34px;
  padding: 6px 0;
  animation: tick 22s linear infinite;
}
.ticker b { color: #fff; }
.ticker .up { color: #57e389; }
.ticker .up::before { content: "▲ "; }
.ticker .flat { color: var(--orange); }
/* marquee: enter from right viewport edge, exit fully left, repeat */
@keyframes tick {
  from { transform: translateX(100vw); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-inner { animation: none; }
}

/* ── Homepage hero ─────────────────────────────────── */
.hero {
  text-align: center;
  padding: 58px 24px 30px;
  background:
    radial-gradient(ellipse 90% 70% at 50% -20%, #dff0ff, transparent 70%),
    var(--white);
}
.hero h1 {
  font-family: 'Coolvetica', 'Arial Narrow', sans-serif;
  font-weight: normal;
  font-size: clamp(40px, 7.4vw, 76px);
  line-height: .98;
  margin: 0 0 14px;
  color: var(--ink);
  text-wrap: balance;
}
.hero h1 .blue { color: var(--aqua-mid); }
.hero p {
  font-size: 13.5px;
  max-width: 58ch;
  margin: 0 auto 26px;
  color: var(--body-ink);
}
.hero .hint {
  display: block;
  margin-top: 14px;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 10.5px;
  color: #8a8f97;
}

/* ── Doorway cards (homepage) ──────────────────────── */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  padding: 26px 28px 46px;
  max-width: 1100px;
  margin: 0 auto;
}
.door {
  border: 1px solid #9aa8b8;
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(30, 50, 80, .14);
  display: flex;
  flex-direction: column;
}
.door-bar {
  position: relative;
  font-family: 'Coolvetica', 'Arial Narrow', sans-serif;
  font-size: 19px;
  letter-spacing: .5px;
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0, 40, 80, .5);
  padding: 8px 14px 9px;
  background: linear-gradient(var(--aqua-hi) 0%, var(--aqua) 45%, var(--aqua-mid) 50%, #4aa8f0 100%);
  border-bottom: 1px solid var(--aqua-deep);
}
.door-bar::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.08));
  pointer-events: none;
}
.door-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.door-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease, filter .4s ease;
}
.door:hover .door-img img { transform: scale(1.05); filter: brightness(1.08); }
.door-body { padding: 12px 14px 14px; }
.door-body p { margin: 0 0 10px; font-size: 12px; color: var(--body-ink); }
.door-body a { font-size: 12px; font-weight: bold; }

/* ── Inside pages ──────────────────────────────────── */
.page-wrap { max-width: 1100px; margin: 0 auto; }
.inside-hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 34px 28px 6px;
}
.inside-hero h1 {
  font-family: 'Coolvetica', 'Arial Narrow', sans-serif;
  font-weight: normal;
  font-size: clamp(38px, 6vw, 64px);
  margin: 0;
  line-height: 1;
  color: var(--ink);
}
.inside-hero h1 .blue { color: var(--aqua-mid); }
.crumbs {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 11px;
  color: #6b7078;
}
.crumbs a { color: #6b7078; }
.inside-copy {
  padding: 10px 28px 6px;
  max-width: 72ch;
  color: var(--body-ink);
}
.section-bar {
  font-family: 'Coolvetica', 'Arial Narrow', sans-serif;
  font-weight: normal;
  font-size: clamp(26px, 4vw, 38px);
  margin: 26px 28px 4px;
  color: var(--ink);
}
.section-bar .blue { color: var(--aqua-mid); }

/* ── Tile grids (inside pages) ─────────────────────── */
.tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  padding: 20px 28px 40px;
}
.tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid #9aa8b8;
  box-shadow: 0 2px 6px rgba(30, 50, 80, .14);
  overflow: hidden;
}
.tile img, .tile video, .tile iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  transition: transform .4s ease, filter .4s ease;
}
.tile.tall { aspect-ratio: 9 / 16; }
.tile:hover img { transform: scale(1.05); filter: brightness(1.08); }
.tile-cap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  text-align: center;
  padding: 10px;
  background: rgba(8, 16, 30, .55);
  color: #fff;
  opacity: 0;
  transition: opacity .3s ease;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 11px;
}
.tile-cap b {
  font-family: 'Coolvetica', 'Arial Narrow', sans-serif;
  font-weight: normal;
  font-size: 19px;
  letter-spacing: .5px;
}
.tile:hover .tile-cap, .tile:focus-visible .tile-cap { opacity: 1; }
@media (hover: none) {
  .tile-cap {
    opacity: 1;
    background: linear-gradient(transparent 45%, rgba(8, 16, 30, .8));
    justify-content: flex-end;
  }
}

/* ── Chrome footer ─────────────────────────────────── */
.site-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 28px;
  background: linear-gradient(var(--chrome-hi), var(--chrome-mid) 60%, var(--chrome-lo));
  border-top: 1px solid #b9bdc3;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 10.5px;
  color: #5b6069;
}