/* ============================================================
   CityScape™ Vancouver — Press page
   ============================================================
   Deliberately NOT importing css/styles.css. That file is a
   ~5,000-line game-UI stylesheet (board, modals, GSAP animation
   state); pulling it in to inherit four colours would drag all of
   that onto a static page. This page inherits the visual LANGUAGE
   — same Google Fonts link, same palette values lifted from
   css/dashboard-target.css — not the game's CSS.

   Palette source: dashboard-target.css
     cream #f3eee3 · paper #fffefb · blue #1B6FC8 · gold #C8A24D

   Two deviations, both for contrast on the cream ground (measured,
   4.5:1 floor):
     - body/caption text uses #6F675A, not the site's #9a9181,
       which measures 2.72:1 here and fails.
     - small blue links use #155BA6 (5.95:1); the brand #1B6FC8
       is 4.41:1 and is kept for the large hero accent only, where
       the 3:1 large-text floor applies.
   Gold is a hairline colour only (2.1:1) and never carries text.
   ============================================================ */

:root {
  --cream:      #F4EFE4;
  --paper:      #FFFCF5;
  --ink:        #1c2836;
  --muted:      #6F675A;
  --blue:       #1B6FC8;
  --blue-deep:  #155BA6;
  --gold:       #C8A24D;
  --hairline:   rgba(200, 162, 77, 0.55);
  --measure:    68ch;
  --max:        1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.65 'Barlow', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ── Type ───────────────────────────────────────────────── */
h1, h2, h3, .eyebrow, .btn, dt {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
}

.eyebrow {
  font-weight: 600; font-size: 13px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}

h1 {
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.03;
  letter-spacing: -.005em;
  margin: 0 0 26px;
  text-wrap: balance;
  max-width: 20ch;
}
h1 .accent { color: var(--blue); }

h2 {
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: .01em;
  margin: 0 0 6px;
  text-wrap: balance;
}

p { max-width: var(--measure); text-wrap: pretty; }

a { color: var(--blue-deep); }
a:focus-visible, .btn:focus-visible, .card a:focus-visible {
  outline: 2px solid var(--blue-deep); outline-offset: 3px; border-radius: 2px;
}

/* ── Gold hairline: the page's one repeated motif ────────── */
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* ── Header ─────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--hairline);
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 20px; flex-wrap: wrap;
}
.masthead img { display: block; width: 210px; max-width: 52vw; height: auto; }
.masthead .eyebrow { text-align: right; }

/* ── Hero ───────────────────────────────────────────────── */
.hero { padding-block: clamp(44px, 7vw, 76px) clamp(36px, 5vw, 56px); }
.hero p { margin: 0 0 18px; font-size: 18px; }
.hero p:last-of-type { margin-bottom: 0; }

/* Hero art.
   Mobile default (single column): the whole image sits inside the frame under
   the buttons, width-capped so it does not tower over a phone. The desktop
   two-column treatment and the bleed are added in the media query below. */
.hero-art { margin-top: 40px; }
.hero-art picture { display: block; }
.hero-art img {
  display: block; width: 100%; height: auto;
  max-width: 380px; margin-inline: auto;
}

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.btn {
  display: inline-block; font-weight: 600; font-size: 17px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 13px 26px; border-radius: 3px; text-decoration: none;
  border: 1.5px solid var(--blue); transition: background-color .15s, color .15s;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn-secondary { background: transparent; color: var(--blue-deep); border-color: var(--hairline); }
.btn-secondary:hover { border-color: var(--blue); }

/* ── Sections ───────────────────────────────────────────── */
section { padding-block: clamp(40px, 5.5vw, 64px); }
section > .wrap > .eyebrow { margin-bottom: 8px; }
.section-intro { color: var(--muted); margin: 0 0 30px; }

/* ── Card grid ──────────────────────────────────────────── */
.cards {
  display: grid; gap: 30px 26px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
}
.card figure { margin: 0; }
.card a {
  display: block;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  /* Each tile's background is set inline to that image's OWN cream. The
     mockups were shot on slightly different creams, so a shared tile colour
     would show a seam around every card. Matching per tile hides it. */
}
.card img {
  width: 100%; height: 100%; display: block;
  object-fit: contain;               /* never crop the artwork */
  transition: transform .25s ease;
}
.card a:hover img { transform: scale(1.02); }
.card a { cursor: zoom-in; }

.card figcaption { margin-top: 12px; font-size: 15px; line-height: 1.45; }
.card .name { font-weight: 600; color: var(--ink); }
.card .meta { color: var(--muted); }

/* ── Fast facts ─────────────────────────────────────────── */
.facts {
  margin: 0; display: grid; gap: 0;
  grid-template-columns: minmax(150px, 15em) 1fr;
}
.facts div {
  display: contents;
}
.facts dt, .facts dd {
  padding: 12px 0; border-top: 1px solid var(--hairline); margin: 0;
}
.facts dt {
  font-weight: 600; font-size: 15px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); padding-right: 20px;
}
.facts dd { font-weight: 500; }

/* ── Assets ─────────────────────────────────────────────── */
.assets-note { border-left: 2px solid var(--gold); padding-left: 18px; }

/* ── Contact ────────────────────────────────────────────── */
.contact-details { margin-top: 26px; font-size: 18px; line-height: 1.9; }
.contact-details .label {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 14px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); display: inline-block; min-width: 8.5em;
}

/* ── Footer ─────────────────────────────────────────────── */
.pagefoot {
  border-top: 1px solid var(--hairline);
  padding-block: 26px 44px;
  font-size: 14.5px; color: var(--muted);
}
.pagefoot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── Hero: two columns ───────────────────────────────────── */
/* Breakpoint is 1100px. Two measurements drove that number, not taste:
   at 880px the artwork ended 134px ABOVE the section edge (a band of cream
   where the bleed should be), and at 1000px the art column box was TALLER than
   the artwork's natural height (771 vs 735), which makes object-fit:cover crop
   the SIDES of the illustration instead of its bottom. Both come from the same
   cause — the section is sized by the text column, which grows as the viewport
   narrows, while the art column shrinks. Below 1100 the single-column layout is
   used instead, which has neither problem. */
@media (min-width: 1100px) {
  .hero { overflow: hidden; }

  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 56px;
    align-items: stretch;
  }

  .hero-art {
    position: relative;
    overflow: hidden;          /* this box does the cropping */
    margin-top: 0;
    /* Stretch down through the section's own bottom padding so the cut lands on
       the gold hairline rather than leaving a strip of cream under the cards.
       Mirrors the end value of .hero's padding-block. */
    margin-bottom: calc(-1 * clamp(36px, 5vw, 56px));
  }

  /* Scaled to the column WIDTH and anchored to the top, so the wordmark is
     always whole and the overflow is always at the bottom — the card fan.
     Deliberately not object-fit:cover: cover switches to cropping the sides as
     soon as the box is more portrait than the artwork, which is exactly what
     happens at narrower desktop widths. */
  .hero-art img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: auto;
    max-width: none; margin-inline: 0;
  }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px 16px; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; border-top: 1px solid var(--hairline); }
  .facts dd { padding-top: 2px; border-top: 0; padding-bottom: 14px; }
  .masthead .eyebrow { text-align: left; }
  .actions .btn { flex: 1 1 100%; text-align: center; }
  .contact-details .label { min-width: 0; display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .card img, .btn { transition: none; }
  .card a:hover img { transform: none; }
}

/* ── Lightbox ────────────────────────────────────────────────
   Clicking a card used to navigate to the raw PNG, which threw the reader out
   of the page onto a black browser image view. This keeps them here.

   Progressive enhancement: the markup stays a plain <a href="…png">, so with
   JavaScript off (or if press.js fails) every card still opens its
   full-resolution image the old way. The script only intercepts the click.

   The scrim is ink at 80%, not black — the press page stays legible behind it,
   which is the point. */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(28, 40, 54, 0.80);
  opacity: 0;
  transition: opacity .18s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lb-figure {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  gap: 14px; max-height: 100%;
  transform: scale(.985);
  transition: transform .18s ease;
}
.lightbox.is-open .lb-figure { transform: scale(1); }

.lb-img {
  display: block;
  max-width: min(560px, 100%);
  max-height: 78vh;
  width: auto; height: auto;
  border-radius: 3px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.lb-cap {
  text-align: center; line-height: 1.45; max-width: 46ch;
  font-size: 15px; color: #F4EFE4;
  /* The scrim is deliberately translucent so the page shows through, which
     means the caption can land over bright card art. A soft shadow keeps it
     readable without needing a heavier scrim. */
  text-shadow: 0 1px 3px rgba(12, 18, 26, .75);
}
.lb-cap .lb-name { font-weight: 600; display: block; }
.lb-cap .lb-meta { color: #C6BFB2; }

/* Controls. Deliberately quiet: outlined, not filled, so they never compete
   with the card they frame. */
.lb-btn {
  position: absolute; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244, 239, 228, .10);
  color: #F4EFE4;
  border: 1px solid rgba(244, 239, 228, .35);
  border-radius: 50%;
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
  line-height: 1;
  transition: background-color .15s, border-color .15s;
}
.lb-btn:hover { background: rgba(244, 239, 228, .20); border-color: rgba(244,239,228,.6); }
.lb-btn:focus-visible { outline: 2px solid #F4EFE4; outline-offset: 3px; }

.lb-close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); width: 44px; height: 44px; font-size: 26px; }
.lb-nav   { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 30px; padding-bottom: 4px; }
.lb-prev  { left: clamp(8px, 2vw, 28px); }
.lb-next  { right: clamp(8px, 2vw, 28px); }

.lb-counter {
  position: absolute; bottom: clamp(12px, 3vw, 26px); left: 50%;
  transform: translateX(-50%);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: #C6BFB2;
  text-shadow: 0 1px 3px rgba(12, 18, 26, .75);
}

body.lb-open { overflow: hidden; }

@media (max-width: 620px) {
  /* On a phone the side arrows would sit on top of the card, so move them to
     the bottom corners where the thumb already is. */
  .lb-nav { top: auto; bottom: clamp(12px, 3vw, 26px); transform: none; }
  .lb-img { max-height: 62vh; }
  .lb-counter { bottom: calc(clamp(12px, 3vw, 26px) + 14px); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lb-figure { transition: none; }
  .lightbox.is-open .lb-figure { transform: none; }
}