/* ================================================================
   ALEX COANDA — PORTFOLIO 2026
   CASE PAGES — spine + modules layout system.
   Loads after style.css (tokens) and plates.css (media language).
   ================================================================ */

:root {
  --sec: clamp(4.5rem, 11vh, 9rem); /* vertical rhythm between modules */
}

/* ----------------------------------------------------------------
   Module scaffolding
---------------------------------------------------------------- */
.mod { padding: var(--sec) var(--pad) 0; }
.mod--flush { padding-left: 0; padding-right: 0; }

.m-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.6rem, 4vh, 2.8rem);
}
.mod--flush .m-head { padding: 0 var(--pad); }
.m-head__label { color: var(--muted); }
.m-head__note { color: var(--muted); text-align: right; }

/* ----------------------------------------------------------------
   TOPBAR — case-page override
   style.css hides the home link on phones because the homepage's five
   nav items don't fit. Case pages carry no ABOUT link, so that slot is
   free — spend it on HOME, since the small AC logo is not an obvious
   way back. This file only loads on case pages, so the homepage keeps
   its own behaviour untouched.
---------------------------------------------------------------- */
@media (max-width: 700px) {
  .topbar__home { display: inline; }
  /* the word is the affordance — the arrow is desktop polish and its
     width is what the fourth item needs on a narrow phone */
  .topbar__back { display: none; }
}

/* ----------------------------------------------------------------
   S1 — CASE HERO
---------------------------------------------------------------- */
.chero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--pad) * 1.5) var(--pad) var(--pad);
  position: relative;
  overflow: hidden;
}
.chero__ghost {
  position: absolute;
  top: 44%;
  right: -2vw;
  transform: translateY(-50%);
  font-size: clamp(18rem, 46vw, 46rem);
  font-weight: 800;
  font-variation-settings: "wdth" 115;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(234, 232, 227, 0.14);
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
.chero__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.9rem;
  margin-bottom: auto;
  margin-top: 3.2rem;
  position: relative;
  z-index: 1;
}
.chero__title {
  font-size: clamp(3rem, min(13vw, 17vh), 13.5rem);
  font-weight: 800;
  font-variation-settings: "wdth" 115;
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 1.4rem 0 1.8rem;
  position: relative;
  z-index: 1;
}
/* a name that runs on one line needs to clamp against width, not height */
.chero__title--single {
  font-size: clamp(1.8rem, min(11.2vw, 30vh), 12rem);
  white-space: nowrap;
}
/* headroom above (Â À É) and below (Q tail) the 0.88-leading clip —
   padding cancelled by margins; hidden lines sit at yPercent 140 */
.chero__title .line { display: block; overflow: hidden; padding: 0.2em 0 0.12em; margin: -0.2em 0 -0.12em; }
.chero__title .line__inner { display: inline-block; will-change: transform; }
.chero__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  position: relative;
  z-index: 1;
}
.chero__kicker { max-width: 38ch; font-size: 1rem; color: var(--muted); }
.chero__kicker em { color: var(--ink); font-style: normal; }

/* ----------------------------------------------------------------
   S2 / M01 — full-bleed plates
---------------------------------------------------------------- */
.lead { padding: var(--sec) 0 0; }
.lead .plate,
.bleed .plate { border-left: none; border-right: none; }

/* future imgs in parallax plates: overscale so vertical drift
   never exposes the plate edge */
.parallax img {
  will-change: transform;
  transform: scale(1.12);
}

/* ----------------------------------------------------------------
   S3 — BRIEF + DATA
---------------------------------------------------------------- */
/* every text-bearing track is minmax(0,…) — a bare fr is minmax(auto,fr)
   and one unbreakable string inflates the whole page sideways on phones */
.brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 2rem;
}
.brief__rail { color: var(--muted); position: sticky; top: 5.5rem; align-self: start; }
.brief__text {
  font-size: clamp(1.45rem, 2.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  max-width: 34ch;
}
.brief__text em { color: var(--accent); font-style: normal; }
.facts {
  margin-top: clamp(2.2rem, 6vh, 4rem);
  border-top: 1px solid var(--line);
}
.facts__row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(0, 3fr);
  gap: 1.2rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.facts__row dt { color: var(--muted); }
.facts__row dd { font-size: 0.98rem; }
@media (max-width: 900px) {
  .brief { grid-template-columns: minmax(0, 1fr); }
  .brief__rail { position: static; }
}

/* ----------------------------------------------------------------
   S4 — OUTCOMES
---------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: clamp(1.6rem, 4vh, 2.8rem) 1.2rem;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: none; }
.stat__num {
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  font-weight: 800;
  font-variation-settings: "wdth" 115;
  line-height: 1;
  letter-spacing: -0.01em;
}
.stat__num em { color: var(--accent); font-style: normal; }
.stat__label { color: var(--muted); margin-top: 0.7rem; display: block; }
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 500px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: none !important; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: none; }
}

/* ----------------------------------------------------------------
   M03 — STATEMENT (word-scrub pull quote)
---------------------------------------------------------------- */
.statement {
  font-size: clamp(1.6rem, 3.6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  max-width: min(92vw, 28ch);
}
.statement .w { opacity: 0.14; }

/* interstitial beats between modules — mandate's reveal, brief's scale */
.statement--mid {
  font-size: clamp(1.45rem, 2.6vw, 2.4rem);
  line-height: 1.28;
  max-width: min(92vw, 42ch);
}

/* ----------------------------------------------------------------
   M02 — GRIDS
---------------------------------------------------------------- */
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); }
.gasym { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem); }
/* four-up for sets of small artefacts (logo marks) — a tighter gutter than the
   other grids so sixteen tiles read as one field rather than sixteen pictures */
.g4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.5vw, 1.4rem);
}
@media (max-width: 900px) { .g4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Single-colour marks driven as masks. The artwork supplies only its shape via
   the alpha channel — the colour comes from a token, so the whole set recolours
   from one line and can never drift from the palette. Set --mark per tile. */
.markmask {
  position: absolute;
  inset: 0;
  background-color: var(--ink);
  -webkit-mask-image: var(--mark);
          mask-image: var(--mark);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
@media (max-width: 900px) {
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gasym { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .g2, .g3 { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   MOSAIC — one full-height feature plate beside a cluster of three.
   The cluster's own plates measure the row; the feature carries no
   aspect of its own and stretches to whatever that comes out to, so
   the two halves always end flush. Put the feature first in the
   markup for a left feature, last for a right one.
---------------------------------------------------------------- */
.mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}
.mosaic__cluster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-content: start;
}
.mosaic__wide { grid-column: 1 / -1; }
/* the feature's image must not lay out in flow — in flow it takes its own
   natural height, which is taller than the cluster and leaves the two
   halves ending short of each other. Out of flow the plate measures zero,
   so the cluster sets the row and the feature stretches flush to it. */
.mosaic__feature img { position: absolute; inset: 0; }
@media (max-width: 700px) {
  .mosaic { grid-template-columns: 1fr; }
  /* stacked, the feature has nothing to match — give it back a shape */
  .mosaic__feature { aspect-ratio: 1; }
}

/* ----------------------------------------------------------------
   M04 — BEFORE / AFTER
---------------------------------------------------------------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); }
.duo__cell { display: flex; flex-direction: column; gap: 0.8rem; }
.duo__label { color: var(--muted); display: flex; align-items: center; gap: 0.6rem; }
.duo__label--after { color: var(--ink); }
.duo__label--after::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
}
@media (max-width: 700px) { .duo { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------
   M05 — IDENTITY
---------------------------------------------------------------- */
.idrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); }
.idcap {
  color: var(--muted);
  padding-top: 0.7rem;
  display: block;
}
@media (max-width: 700px) { .idrow { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------
   M06 — SPECIMEN
---------------------------------------------------------------- */
.specimen { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.specimen__type { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.specimen__font { color: var(--muted); margin-bottom: 1.4rem; display: block; }
.glyph {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  font-variation-settings: "wdth" 115;
  line-height: 1;
}
.glyph em { font-style: normal; color: var(--accent); }
.specimen__glyphline {
  margin-top: 1.2rem;
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.3;
  /* the alphabet runs are one unbreakable "word" — let them break
     mid-run on narrow phones instead of painting past the page edge */
  overflow-wrap: anywhere;
}
.specimen__glyphline + .specimen__glyphline { margin-top: 0.5rem; }

/* color strips — filled swatches, guide-style */
.swatches { display: flex; flex-direction: column; }
.swatch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: clamp(0.7rem, 1.4vw, 1.1rem) clamp(0.9rem, 1.8vw, 1.4rem);
}
.swatch__name {
  font-weight: 800;
  font-variation-settings: "wdth" 115;
  text-transform: uppercase;
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
}
.swatch__vals {
  font-size: 0.6rem;
  text-align: right;
  line-height: 1.6;
  opacity: 0.85;
}
/* colour-only variant — for identities whose lettering is drawn rather than
   set, where naming a typeface would be a fiction */
.specimen--colour { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .specimen { grid-template-columns: minmax(0, 1fr); } }

/* ----------------------------------------------------------------
   M07 — GUIDE SPREADS (pinned horizontal ≥1024, stack below)
---------------------------------------------------------------- */
.guide { overflow: hidden; }
.guide__track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: 0 var(--pad);
  will-change: transform;
}
.guide__item { flex: 0 0 min(72vw, 900px); }
.guide__cap { color: var(--muted); padding-top: 0.7rem; display: block; }
@media (max-width: 1023px) {
  .guide__track { flex-direction: column; padding: 0 var(--pad); }
  .guide__item { flex: initial; width: 100%; }
}
/* no pinned horizontal scrub under ?static — stack the spreads */
html.static .guide__track { flex-direction: column; }
html.static .guide__item { flex: initial; width: 100%; }

/* ----------------------------------------------------------------
   M08 — WEB
---------------------------------------------------------------- */
.webcta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
}
.web__center { display: flex; justify-content: center; }

/* mockup rows — columns track the artwork's native widths (1383 : 900)
   so a long and a short plate always render at identical heights */
.webrow {
  display: grid;
  grid-template-columns: 1383fr 900fr;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  margin-top: clamp(1rem, 2.5vw, 2.5rem);
}
.webrow--flip { grid-template-columns: 900fr 1383fr; }
@media (max-width: 700px) {
  .webrow, .webrow--flip { grid-template-columns: 1fr; }
}

/* proportional two-up — set --c1/--c2 to the plates' aspect ratios and both
   render at the same height, uncropped, whatever their native shapes */
.prow {
  display: grid;
  grid-template-columns: var(--c1, 1fr) var(--c2, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  margin-top: clamp(1rem, 2.5vw, 2.5rem);
}
@media (max-width: 700px) { .prow { grid-template-columns: 1fr; } }

/* A wide plate beside two stacked ones. The wide plate's aspect sets the row
   height; the stack carries no aspect of its own and simply halves that height,
   so the two columns always finish flush whatever the gap resolves to. The
   column ratio is tuned so the stacked cells land square at the widths this
   runs at (wide plate ~1.70:1). */
.duostack {
  display: grid;
  grid-template-columns: 3.53fr 1fr;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}
.duostack__stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  min-height: 0;
}
.duostack__stack .plate { min-height: 0; }
@media (max-width: 700px) {
  .duostack { grid-template-columns: 1fr; }
  /* stacked, there is no row height to divide — give the cells a shape back */
  .duostack__stack { grid-template-rows: auto auto; }
  .duostack__stack .plate { aspect-ratio: 1; }
}

/* long full-page mockup — the frame is 95% of the artwork's height, so the
   image can only travel that last 5% across the whole scroll */
.longrow {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
}
.longrow__side { position: sticky; top: clamp(5rem, 16vh, 11rem); }
.longplate img { width: 100%; height: auto; object-fit: fill; will-change: transform; }
@media (max-width: 900px) {
  .longrow { grid-template-columns: 1fr; }
  .longrow__side { position: static; }
}

/* M10 — film: a row of four portrait cuts */
.filmrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  margin-top: clamp(1rem, 2.5vw, 2.5rem);
}
@media (max-width: 900px) { .filmrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .filmrow { grid-template-columns: 1fr; } }

/* video plates keep the browser's own controls once playing; before that
   a square orange-tick play button sits over the poster */
.plate video { background: #000; }
.filmcap {
  color: var(--muted);
  padding-top: 0.7rem;
  display: block;
  text-wrap: balance;
}

.vplay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(54px, 5.5vw, 78px);
  height: clamp(54px, 5.5vw, 78px);
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(20, 20, 20, 0.62);
  border: 1px solid var(--ink);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease),
    opacity 0.35s var(--ease), border-color 0.4s var(--ease);
}
.vplay::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 4px;
  border-left: 0.9em solid currentColor;
  border-top: 0.58em solid transparent;
  border-bottom: 0.58em solid transparent;
  transition: border-left-color 0.4s var(--ease);
}
.plate:hover .vplay,
.vplay:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.07);
  color: var(--bg);
}
/* once the cut is running, hand over to the native controls */
.plate.is-playing .vplay {
  opacity: 0;
  pointer-events: none;
}

/* ----------------------------------------------------------------
   M09 — FEED
---------------------------------------------------------------- */
.stories {
  display: flex;
  gap: clamp(0.8rem, 1.6vw, 1.5rem);
  will-change: transform;
}
.stories .plate { width: clamp(120px, 14vw, 180px); flex-shrink: 0; }
.feedgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.5rem);
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}
@media (max-width: 900px) { .feedgrid { grid-template-columns: repeat(2, 1fr); } }

/* ----------------------------------------------------------------
   M14 — CREDITS
---------------------------------------------------------------- */
.creditsrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .creditsrow { grid-template-columns: 1fr; } }
.credits { border-top: 1px solid var(--line); max-width: 40rem; }
.credits__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.2rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.credits__row dt { color: var(--muted); }
.credits__row dd { font-size: 0.95rem; }

/* ----------------------------------------------------------------
   S5 — NEXT
---------------------------------------------------------------- */
.next {
  margin-top: var(--sec);
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sec) var(--pad) var(--pad);
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.next__ghost {
  position: absolute;
  top: 50%;
  right: -2vw;
  transform: translateY(-50%);
  font-size: clamp(16rem, 42vw, 42rem);
  font-weight: 800;
  font-variation-settings: "wdth" 115;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(234, 232, 227, 0.12);
  user-select: none;
  pointer-events: none;
}
.next__label { color: var(--muted); margin-bottom: 1.6rem; }
.next__name {
  font-size: clamp(3rem, min(12vw, 16vh), 12rem);
  font-weight: 800;
  font-variation-settings: "wdth" 115;
  line-height: 0.9;
  text-transform: uppercase;
  transition: color 0.35s;
  position: relative;
  z-index: 1;
}
.next__name .line { display: block; overflow: hidden; padding: 0.2em 0 0.12em; margin: -0.2em 0 -0.12em; }
.next__name .line__inner { display: inline-block; }
.next__name .accent { transition: transform 0.45s var(--ease); display: inline-block; }
.next:hover .next__name { color: var(--accent); }
.next:hover .next__name .accent { transform: translateX(0.6rem); }
.next__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-top: auto;
  padding-top: clamp(3rem, 8vh, 5rem);
  position: relative;
  z-index: 1;
}
.next__foot .mono { color: var(--muted); }
/* phones: the nbsp-glued coords line is wider than the viewport in a
   row — stack the footer, same move as the homepage footer */
@media (max-width: 700px) {
  .next__foot { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}

/* last module before footer gets breathing room */
main > .mod:last-of-type { padding-bottom: 0; }