/* ══ v4 — every change from the review, in one place, loaded last ══════ */

/* ── heading face: Bricolage Grotesque ─────────────────────────────────── */
:root{--font-display:'Bricolage Grotesque','Manrope',ui-sans-serif,system-ui,sans-serif}
.u-compressed{font-family:var(--font-display);font-variation-settings:'wdth' 75,'wght' 800;letter-spacing:-.012em;line-height:.9}
.u-narrow{font-family:var(--font-display);font-variation-settings:'wdth' 82,'wght' 700;letter-spacing:-.01em;line-height:.95}
.u-wide{font-family:var(--font-display);font-variation-settings:'wdth' 100,'wght' 600;letter-spacing:.12em}
.counters b{font-family:var(--font-display);font-variation-settings:'wdth' 82,'wght' 700}

/* ── header: one red button, no duplicate tab ──────────────────────────── */
.head-cta .btn{padding:.7rem 1.25rem;font-size:.8125rem}

/* ── images: paint immediately over their LQIP, no fade ─────────────────
   The previous build faded every image in on decode. That fade was what
   read as lag — the file had arrived, and the page was still hiding it. */
img[data-lqip]{background-size:cover;background-position:center;background-repeat:no-repeat}
/* width/height attributes stop reflow but also set a presentational height
   that overrides aspect-ratio. :where() has zero specificity, so this beats
   the attribute hint and loses to every component rule that sets a height. */
:where(img[width][height]){height:auto}
.ld>img{opacity:1!important}.ld::before{display:none}

/* ── section backgrounds: never bleed, soft edges ──────────────────────
   The mesh and texture layers scale up as they drift; without a clip they
   painted over the bottom of the section above — that was the cut-off
   department cards on Team. clip (not hidden) keeps sticky children working. */
[data-bg]{overflow:clip}
[data-bg="mesh"]::before,[data-bg="texture"]::before{
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}

/* ── page heroes: the full screen, video covering it ───────────────────── */
.page-hero{min-height:100svh;height:100svh}
.page-hero>video{object-fit:cover;width:100%;height:100%}

/* ═════ HOME ══════════════════════════════════════════════════════════ */
.h-hero .name{bottom:clamp(5rem,11vh,7rem)}
.h-hero .name h1{font-size:clamp(3rem,9.5vw,9rem);line-height:.88}
.h-hero .name h1 .lift:nth-child(2)>*{padding-left:clamp(1.5rem,7vw,8rem)}
.message{grid-template-columns:1fr!important}
.message p{max-width:30ch}

/* the rail quotes lost their mark; the italic carries them alone */
.rq p{font-family:var(--font-accent);font-style:italic;font-weight:400;font-size:clamp(1.6rem,3vw,2.8rem);line-height:1.12}

/* from Nine Departments on, the page lifts into a warmer, lighter ground */
.warm{position:relative;background:linear-gradient(180deg,#0B090A 0%,#1B1416 5%,#241A1D 32%,#2B1F22 62%,#221A1C 88%,#171113 100%)}
.warm [data-bg="flat"]::before,.warm [data-bg="flat-raised"]::before{background:transparent}
.warm .hf .pic{background:#1E1618}
.warm .logo-grid{background:rgba(244,240,235,.08)}
.warm .logo-grid div{background:#231A1C}
.warm .logo-grid div:hover{background:#2E2225}
.logo-grid img{opacity:.78}

/* Work with LES — gradient, no photograph */
.work{background:
  radial-gradient(70% 85% at 12% 18%,rgba(181,31,50,.42),transparent 62%),
  radial-gradient(60% 70% at 92% 92%,rgba(142,20,31,.34),transparent 60%),
  linear-gradient(180deg,#2B1F22,#1A1315)}
.work .route{background:rgba(11,9,10,.38)}
.work .route:hover{background:rgba(11,9,10,.55)}

/* the reel autoplays; no overlay */
.reel video{display:block}

/* ── footer (recovered from v1, without the rotating mark) ─────────────── */
.site-foot{background:var(--ink)}
.foot-sig{display:block;margin-top:1rem;font-family:var(--font-accent);font-style:italic;font-size:var(--t-accent);color:var(--crimson-live)}
.foot-cols{grid-template-columns:1fr}
@media(min-width:800px){.foot-cols{grid-template-columns:1.6fr repeat(4,1fr)}}

/* ═════ ABOUT ═════════════════════════════════════════════════════════ */
/* counters — centred, odometer digits */
.counters div{text-align:center}
.odo{display:inline-flex;justify-content:center;overflow:hidden;height:1em;line-height:1}
.odo-d{display:inline-block;height:1em;overflow:hidden;transition:width .42s cubic-bezier(.16,1,.3,1),opacity .18s ease-out;width:.62em}
.odo-d.lz{width:0;opacity:0}
.odo-d i{display:flex;flex-direction:column;font-style:normal;transition:transform .42s cubic-bezier(.16,1,.3,1)}
.odo-d i span{height:1em;line-height:1;display:block;text-align:center}
.odo-s{display:inline-block}

/* What We Set Out To Do — a 3×2 grid, no sticky stacking */
.flipdeck--grid{display:grid;grid-template-columns:1fr;gap:clamp(.9rem,1.8vw,1.4rem)}
@media(min-width:760px){.flipdeck--grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.flipdeck--grid{grid-template-columns:repeat(3,1fr)}}
.flipdeck--grid .flipcard{position:relative;top:auto;z-index:auto}
.flipdeck--grid .flip-inner{min-height:clamp(260px,30vh,330px)}
.flipdeck--grid .flip-face h3{font-size:clamp(1.3rem,2.2vw,1.8rem)}
.flipdeck--grid .flip-back p{font-size:.975rem}

/* The Values — a hairline grid that fades in cell by cell */
.vgrid{display:grid;grid-template-columns:1fr;border-top:1px solid var(--hairline-2)}
@media(min-width:760px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.vgrid{grid-template-columns:repeat(4,1fr)}}
.vgrid article{padding:clamp(1.5rem,2.6vw,2.2rem) clamp(1rem,2vw,1.6rem) clamp(1.5rem,2.6vw,2.2rem) 0;
  border-bottom:1px solid var(--hairline);display:grid;gap:.7rem;align-content:start;
  opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
@media(min-width:760px){.vgrid article{padding-left:clamp(1rem,2vw,1.6rem);border-left:1px solid var(--hairline)}}
.vgrid article.is-in{opacity:1;transform:none}
.vgrid .n{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;color:var(--crimson-live)}
.vgrid h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.vgrid p{color:var(--muted);font-size:.9375rem}

/* ═════ TEAM ══════════════════════════════════════════════════════════ */
/* department cards show their photograph at rest; hover brightens it */
.dept>img,.dept>.ld{opacity:1;transform:none;filter:grayscale(.3) brightness(.42) contrast(1.08)}
.dept>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .6s var(--ease),transform 1.2s var(--ease)}
.dept:hover>img{filter:grayscale(0) brightness(.6) contrast(1.05);transform:scale(1.04)}
.dept .ds{opacity:.85;transform:none}
.dept .code{color:rgba(244,240,235,.55)}

/* Project Board sits closer to the grid above it */
#projects.section{padding-top:clamp(2.5rem,5vh,3.5rem)}
.board-intro{margin:0 0 2rem;max-width:var(--measure);color:var(--muted)}
.vcards{display:grid;gap:clamp(.9rem,1.8vw,1.4rem);margin-bottom:clamp(2.5rem,5vh,4rem)}

/* ═════ DEPARTMENT PAGES ══════════════════════════════════════════════ */
.dhero{padding:clamp(7.5rem,15vh,10rem) var(--gutter) clamp(2rem,5vh,3rem);display:grid;gap:1.2rem}
.dhero h1{font-size:clamp(2.4rem,6.5vw,5.6rem);line-height:.92;max-width:16ch}
.dhero .lede{max-width:56ch}
.dhero-photo{margin-top:clamp(1.5rem,4vh,2.5rem)}
.dhero-photo img{display:block;width:100%;height:auto;border-radius:14px}
.dhero-photo figcaption{margin-top:.8rem}

/* gallery — a horizontal strip like the Home rail: native ratios, captions above */
.strip-rail{display:flex;gap:clamp(.9rem,2vw,1.6rem);overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:1.2rem;scrollbar-width:thin;scrollbar-color:var(--crimson) transparent;-webkit-overflow-scrolling:touch}
.strip-rail figure{flex:none;display:grid;gap:.6rem;scroll-snap-align:start;cursor:zoom-in}
.strip-rail figure .mono{order:-1}
.strip-rail img{display:block;height:clamp(200px,28vw,340px);width:auto;max-width:none;border-radius:8px}

/* ═════ EVENTS ════════════════════════════════════════════════════════ */
.event .meta,.filters{display:none!important}

@media(prefers-reduced-motion:reduce){.vgrid article{opacity:1;transform:none}}

/* the digit columns are spans inside .counters, which styles its spans as
   labels — reset them back to the number's own type */
.counters .odo{font-variant-numeric:tabular-nums}
.counters .odo span{display:inline-block;margin:0;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit;line-height:1}
.counters .odo .odo-d i span{display:block;height:1em;text-align:center}
.counters .odo .odo-d{width:.54em}
.counters .odo .odo-d.lz{width:0}

/* on the warm ground, section edges fade to the ground, not to ink */
.warm [data-bg="texture"]::after{display:none}
.work{background:
  linear-gradient(180deg,#221A1C 0%,rgba(34,26,28,0) 20%,rgba(11,9,10,0) 72%,#0B090A 100%),
  radial-gradient(70% 85% at 12% 30%,rgba(181,31,50,.40),transparent 62%),
  radial-gradient(60% 70% at 92% 80%,rgba(142,20,31,.32),transparent 60%),
  #221A1C}

/* grid texture fades out at both edges, so it never ends on a hard line */
[data-bg="grid"]::before{
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent)}

/* department cards: a scrim under the text so it holds on any photograph */
.dept::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,9,10,.25) 0%,rgba(11,9,10,.05) 38%,rgba(11,9,10,.88) 100%)}
.dept-in{z-index:1}