/* ============================================================
   Sibul — THE site stylesheet (every page: landing, archive,
   case detail, studio). One file so nav / footer / cards /
   spacing can never drift apart.
   ============================================================ */
@font-face {
  font-family: "GT America";
  src: url("../fonts/GT-America-LC-Standard-Regular.woff2") format("woff2"),
       url("../fonts/GT-America-LC-Standard-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT America";
  src: url("../fonts/GT-America-LC-Standard-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT America";
  src: url("../fonts/GT-America-LC-Standard-Bold.woff2") format("woff2"),
       url("../fonts/GT-America-LC-Standard-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --bg: #fff; --fg: #000; --muted: #808080;
  --pad: 16px; --gutter: 0px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  /* identical viewport scroll state on EVERY page (landing matches).
     overflow-x lives HERE, not on body — overflow on body would make it
     the sticky containing block and break the nav's position: sticky. */
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "GT America", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: opacity 0.2s var(--ease), color 0.2s var(--ease); }

/* during a page transition, in-flight content ignores the pointer (mouthwash pattern) */
body.is-page-transitioning main { pointer-events: none; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }

.grid12 {
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter); padding-left: var(--pad); padding-right: var(--pad);
}

.state { padding: 120px var(--pad); font-size: 14px; color: var(--muted); }

/* =========================================================
   Header / nav
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 50;
  align-items: center; padding-top: var(--pad); padding-bottom: var(--pad);
  background: var(--bg);               /* solid — content disappears under it on scroll */
}
.nav__logo { grid-column: 1 / span 2; width: max-content; }   /* clickable area = the mark, not the cell */
.nav__logo img { height: 18px; width: auto; filter: invert(1); }

.nav__links { display: contents; }
.nav__link {
  transition: opacity 0.2s var(--ease);
  font-weight: 700; font-size: 14px; letter-spacing: 0.01em;
  text-transform: uppercase; line-height: 1.25; width: max-content;
}
.nav__links a:nth-of-type(1) { grid-column: 3 / span 2; }
.nav__links a:nth-of-type(2) { grid-column: 5 / span 2; }
.nav__links a:nth-of-type(3) { grid-column: 7 / span 1; }
.nav__links a:nth-of-type(4) { grid-column: 8 / -1; justify-self: end; }   /* Lab, right-aligned */
.nav__link:hover { opacity: 0.6; }
.nav__link__t { display: inline-block; }
.nav__meta { display: none; }

/* =========================================================
   Project detail
   ========================================================= */
main { display: block; }
section { margin-top: clamp(64px, 8vw, 130px); }
/* case hero: the cover owns the first viewport — it ends 16px above the
   fold and the intro starts below it (mobile keeps the 3:4 aspect) */
.case-hero { margin-top: 0; }
.case-hero__frame {
  grid-column: 1 / -1; margin: 0; position: relative; overflow: hidden;
  height: calc(100vh - 66px);          /* 50px header + 16px to the fold */
  height: calc(100dvh - 66px);
  background: #eeeeee;
}
.case-hero__frame img, .case-hero__frame video,
.case-gallery figure img, .case-gallery figure video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.case-hero__frame video, .case-gallery figure video { pointer-events: none; }   /* no hover UI, no interaction */
/* iOS Low Power Mode blocks autoplay and paints a big center play glyph
   on every ambient video — hide it; playback starts on first touch (js) */
video::-webkit-media-controls-start-playback-button { display: none !important; }
video::-webkit-media-controls { display: none !important; }

/* images fade in fully formed once loaded (js adds .is-loaded) */
.case-hero__frame img, .case-gallery figure img {
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.case-hero__frame img.is-loaded, .case-gallery figure img.is-loaded { opacity: 1; }

.case-desc { grid-column: 1 / span 6; margin-top: 16px; }

/* meta table: label + value rows over hairlines, on the block's own
   4 columns (they line up with page columns 1-4 exactly) */
.case-meta {
  grid-column: 1 / span 4; margin-top: 16px; padding-top: 32px;
  display: grid; row-gap: 8px; font-size: 14px; line-height: 1.25;
}
.cmrow {
  border-top: 1px solid #eeeeee; padding-top: 8px;
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 16px;
}
.cmrow > :first-child { grid-column: 1 / span 2; }
.cmrow > :last-child { grid-column: 3 / span 2; }
#meta-roles span { display: block; }

/* gallery: fulls 3:2 across the grid, halves 3:4 pairing left + right
   through auto-placement; 16px gaps everywhere */
.case-gallery { margin-top: clamp(80px, 13.9vw, 200px); row-gap: 16px; }
.case-gallery figure {
  grid-column: 1 / -1; margin: 0; position: relative; overflow: hidden;
  aspect-ratio: 3 / 2; background: #eeeeee;
}
.case-gallery figure.gfig--half { grid-column: span 4; aspect-ratio: 3 / 4; }

.rule { grid-column: 1 / -1; border: 0; border-top: 1.5px solid #eeeeee; margin: 0; }
.rcard { display: block; color: inherit; }
.rcard__media { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: #eeeeee; }
.rcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s var(--ease); }
@media (hover: hover) { a.rcard:hover .rcard__media img { transform: scale(1.04); } }
.rcard__cap { font-size: 14px; line-height: 1.25; padding-top: 16px; text-wrap: balance; }
.rcard__name { display: block; color: var(--fg); }
.rcard__desc { display: block; color: var(--muted); max-width: 50%; }   /* wraps within half the card */

/* card images fade in fully formed once loaded (js adds .is-loaded) */
.rcard__media img { opacity: 0; transition: opacity 0.6s var(--ease), transform 0.4s var(--ease); }
.rcard__media img.is-loaded { opacity: 1; }

/* =========================================================
   Studio page (/studio) — Figma 1156-733 rev 2 / 1181-55:
   Overview label + two display paragraphs, signature + 3:4
   portrait on cols 3-6, Process as four grid-true text columns,
   small-type clients — all on the DARK theme below.
   ========================================================= */
/* dark theme (body.theme-dark, studio only): a flat inversion of the
   four-color system — the token flip recolors the shared chrome too,
   instantly (page transitions are instant, nothing morphs behind them) */
body.theme-dark { --bg: #000; --fg: #fff; }
html:has(body.theme-dark) { background: #000; }      /* body vars can't reach html */
body.theme-dark .nav__logo img { filter: none; }     /* the wordmark asset is already white */
body.theme-dark .nav__toggle img { filter: invert(1); }   /* ink dot → white */
body.theme-dark .studio-photo34 { background: #1a1a1a; }  /* placeholder, un-blinding */
body.theme-dark .foot__mark { filter: invert(1); }        /* black oval → white */
/* overview: label + the studio statement in two display paragraphs */
.studio-overview { grid-column: 1 / span 6; margin-top: 16px; }
.studio-overview .disp + .disp { margin-top: 1em; }   /* one display line between paragraphs */

/* about: signature left, 3:4 portrait on columns 3-6 */
.studio-sig { grid-column: 1 / span 2; font-size: 14px; line-height: 1.25; }
.studio-photo34 {
  grid-column: 3 / span 4; margin: 0; position: relative; overflow: hidden;
  aspect-ratio: 3 / 4; background: #eeeeee;
}
.studio-photo34 img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.studio-photo34 img.is-loaded { opacity: 1; }

.studio-section { margin-top: clamp(80px, 13.9vw, 200px); }
.studio-label { grid-column: 1 / -1; margin-top: 16px; font-size: 14px; line-height: 1.25; letter-spacing: normal; text-transform: uppercase; }
.sec-title { grid-column: 1 / -1; }

/* process: four grid-true text columns — the phase name, a blank line,
   then its deliverables. No bars, no week scale. */
.studio-timeline { grid-column: 1 / -1; margin-top: 16px; }
.tl-desc {
  display: grid; grid-template-columns: repeat(8, 1fr); column-gap: 16px;
  padding-top: 40px; font-size: 14px; line-height: 1.25;
}
.tl-desc span { display: block; }
.tl-phase--p1 { grid-column: 1 / span 2; }
.tl-phase--p2 { grid-column: 3 / span 2; }
.tl-phase--p3 { grid-column: 5 / span 2; }
.tl-phase--p4 { grid-column: 7 / span 2; }
.tl-phase__name { margin-bottom: 1.25em; }


/* clients: small type in three columns that land exactly on the page
   grid (the list spans columns 1-6, so each CSS column = 2 grid cols) */
.studio-clients {
  grid-column: 1 / span 6; margin-top: 16px;
  columns: 3; column-gap: 16px;
  list-style: none; font-size: 14px; line-height: 1.25;
}

/* =========================================================
   Projects archive (/projects) — 4-up cards (Figma 1137-410)
   184px to the header box = 200 from the logo (the header's
   own 16px bottom padding completes the beat); 104 = 120 mobile
   ========================================================= */
.archive-top { margin-top: 184px; }

/* =========================================================
   Lab (/lab) — Figma 1152-635: small single-column cards,
   each keeping its image's own aspect, numbered Fig.001+
   ========================================================= */
.labgrid {
  grid-column: 1 / -1; margin-top: 16px;
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 64px 16px; align-items: start;
}
.lcard { margin: 0; }
.lcard__media { position: relative; overflow: hidden; background: #eeeeee; }
.lcard__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.lcard__media img.is-loaded { opacity: 1; }
/* no stored dimensions — the image sizes its own box in normal flow */
.lcard__media--auto img { position: static; height: auto; }
.lcard__cap { font-size: 14px; line-height: 1.25; padding-top: 16px; color: var(--muted); }

/* =========================================================
   Mobile (≤ 768px) — matches the landing's mobile system
   ========================================================= */
@media (max-width: 768px) {
  .nav {
    position: fixed; inset: 0 0 auto 0; height: 50px;
    padding-top: 0; padding-bottom: 0;               /* the 50px bar centers its grid items */
  }

  /* the logo fades its color in step with the 0.35s overlay fade */
  .nav__logo img { transition: filter 0.35s var(--ease); }

  /* menu overlay is ONE solid panel covering the header too — the logo
     and toggle float above it, so nothing can visually split or drift */
  .nav__logo, .nav__toggle { position: relative; z-index: 56; }
  body.menu-open .nav__logo img { filter: none; }      /* logo is already white */

  /* dark overlay menu, same as landing for consistency */
  .nav__links {
    /* top overdraw: at scroll 0, iOS Safari paints the DOCUMENT behind the
       translucent status bar while fixed elements stop at the viewport top —
       without the -100px the hero video peeks out above the open menu */
    position: fixed; inset: -100px 0 0 0; z-index: 55;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
    background: #000; color: #fff; padding: 124px 16px 28px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
  }
  body.menu-open .nav__links { opacity: 1; visibility: visible; transition: opacity 0.35s var(--ease), visibility 0s linear 0s; }
  .nav__link, .nav__link--end {
    grid-column: auto; justify-self: start; width: max-content; color: #fff;
    overflow: hidden; font-size: clamp(36px, 10.5vw, 44px);
    line-height: 1.1; letter-spacing: -0.03em; text-transform: uppercase;
  }
  .nav__link__t { display: block; }
  .nav__meta {
    display: flex; flex-direction: column; gap: 16px;
    position: absolute; left: 16px; right: 16px; bottom: 28px; font-size: 14px; line-height: 1.25; color: #fff;
  }
  .nav__meta__row { display: flex; flex-direction: column; }
  .nav__meta__row .muted { color: var(--muted); }

  main { padding-top: 50px; }
  section { margin-top: 28px; }

  /* case detail: cover 3:4, everything full width, gallery stacks */
  .case-hero { margin-top: 0; }
  .case-hero__frame { height: auto; aspect-ratio: 3 / 4; }
  .case-desc, .case-meta { grid-column: 1 / -1; }
  .case-gallery { margin-top: 120px; }
  .case-gallery figure.gfig--half { grid-column: 1 / -1; }

  .rcard__desc { max-width: 70%; }                    /* mobile: description spans 70% of the card */

  .studio-section { margin-top: 120px; }
  .archive-top { margin-top: 104px; }   /* 104 + the header's 16 = the 120 beat */
  .labgrid { grid-template-columns: repeat(2, 1fr); gap: 48px 16px; }

  /* studio: 3:4 portrait, statement + signature stack, clients in halves */
  .studio-overview, .studio-sig, .studio-photo34 { grid-column: 1 / -1; }
  .studio-photo34 { margin-top: 16px; }
  .studio-clients { grid-column: 1 / -1; columns: 2; }

  /* timeline: same bar geometry, short labels, stacked deliverables */
  .tl-desc { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .rcard__media img { transition: none; }
}

/* =========================================================
   8-COLUMN CHROME (Figma 907-9 rev 1135) — the site grid:
   8 columns, 16px gutters, 16px page padding. The header and
   footer live on it on every page; the landing is built on it.
   ========================================================= */
.grid8 {
  display: grid; grid-template-columns: repeat(8, 1fr);
  column-gap: 16px; padding-left: var(--pad); padding-right: var(--pad);
}

.nav__toggle { display: none; padding: 0; border: 0; background: none; cursor: pointer; }
.nav__toggle img { display: block; width: 100%; height: auto; }

/* landing display type (Figma's 48px @1440 = 3.33vw, taken down 0.5vw
   at Pavel's request → ~40.8px @1440) */
.disp {
  font-size: 2.83vw; letter-spacing: -0.04em; line-height: 1;
  font-weight: 700; text-wrap: balance;
}

/* hero: media + statement together fill the first viewport (100dvh
   incl. the 50px header) — the statement is always in frame, only the
   media frame gives up height. The video covers whatever the frame gets. */
.home-hero {
  margin-top: 0; display: flex; flex-direction: column;
  height: calc(100vh - 50px); height: calc(100dvh - 50px);
}
.home-hero__media {
  flex: 1 1 auto; min-height: 160px;
  grid-template-rows: minmax(0, 1fr);
}
#hero[hidden] { display: none; }                     /* .grid8's display would beat [hidden] */
.home-hero:has(#hero[hidden]) { height: auto; }      /* no video → collapse to the statement */
.home-hero__frame {
  grid-column: 1 / -1; position: relative; overflow: hidden;
  background: #eeeeee;
}
/* every frame dissolves in softly — the incoming image fades in ON TOP
   of the previous one (js raises its z-index), so nothing ever dips */
.home-hero__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; opacity: 0; transition: opacity 1s var(--ease);
}
.home-hero__frame img.is-active { opacity: 1; }

.home-statement { margin-top: 16px; padding-bottom: 16px; }
.home-statement .disp { grid-column: 1 / span 6; }

/* rule-less sections: the label sits right at the section top */
.studio-section > .studio-label:first-child { margin-top: 0; }

/* recent projects: 4-up cards, 16px columns / 64px rows */
.cases4 {
  grid-column: 1 / -1; margin-top: 16px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 64px 16px;
}
.cases4 .rcard__desc { max-width: 300px; }

/* what we do: statement + underlined display link to the studio */
.wedo { grid-column: 1 / span 6; margin-top: 16px; }
.wedo__link {
  display: inline-block; margin-top: 1em;
  text-decoration: underline; text-underline-position: from-font;
}
.wedo__link:hover { opacity: 0.6; }

/* footer: display title, small pitch, bottom row with the oval mark */
.foot { margin-top: clamp(80px, 13.9vw, 200px); padding-bottom: var(--pad); row-gap: 16px; }
.foot__title { grid-column: 1 / -1; }
.foot__pitch { grid-column: 1 / span 4; font-size: 14px; line-height: 1.25; }
.foot__pitch p + p { margin-top: 1.25em; }
.foot__pitch a:hover { opacity: 0.6; }
.foot__bottom {
  grid-column: 1 / -1; margin-top: 184px;
  display: grid; grid-template-columns: repeat(8, 1fr); column-gap: 16px;
  font-size: 14px; line-height: 1.25;
}
.fb2 { display: flex; flex-direction: column; }
.fb2 a { width: max-content; }
.fb2 a:hover { opacity: 0.6; }
.fb2:nth-child(1) { grid-column: 1 / span 2; }
.fb2:nth-child(2) { grid-column: 3 / span 2; }
.fb2:nth-child(3) { grid-column: 5 / span 2; }
.foot__mark { grid-column: 7 / span 2; width: 100%; height: auto; align-self: start; }

@media (min-width: 769px) and (max-width: 1024px) {
  .cases4 { grid-template-columns: repeat(2, 1fr); }
  .labgrid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .grid8 { grid-template-columns: repeat(4, 1fr); }
  /* right half of the 4-col header grid is the tap zone; the dot inside
     is a FIXED 20px, pinned right — it never scales with the viewport */
  .nav__toggle {
    display: flex; justify-content: flex-end; align-items: center;
    grid-column: 3 / span 2; grid-row: 1; width: 100%; align-self: stretch;
  }
  .nav__toggle img { width: 20px; height: auto; }
  body.menu-open .nav__toggle img { filter: invert(1); }
  .disp { font-size: 8.2vw; line-height: 1.0; }
  /* mobile hero: sized by the renders' own aspect, not the viewport */
  .home-hero { height: auto; }
  .home-hero__media { flex: none; }
  .home-hero__frame { aspect-ratio: 680 / 907; }
  .home-statement { padding-bottom: 0; }           /* the 120 section rhythm owns the gap */
  .home-statement .disp, .wedo { grid-column: 1 / -1; }
  .cases4 { grid-template-columns: 1fr; gap: 48px 16px; }
  .foot { margin-top: 120px; }
  .foot__pitch { grid-column: 1 / -1; }
  /* bottom stack: two full rows, then the year and the squeezed mark side by side
     (104 + the footer's own 16px row-gap = the design's 120) */
  .foot__bottom { margin-top: 104px; grid-template-columns: repeat(4, 1fr); row-gap: 16px; }
  .fb2:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  .fb2:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .fb2:nth-child(3) { grid-column: 1 / span 2; grid-row: 3; }
  .foot__mark { grid-column: 3 / span 2; grid-row: 3; height: 35.71px; align-self: start; }
}