/* ============================================================
   MIRRORLESS CREATIVES — Our Work
   Recreated 1:1 from https://linen-gif-25583146.figma.site/workshowcase

   Every number below was measured off the live preview with headless
   Chrome rather than eyeballed. The source is a Figma Sites build with
   three fixed breakpoint frames, so type sizes STEP rather than scale:

       Mobile  <  800   (Figma frame 375)
       Tablet  >= 800   (Figma frame 800)
       Desktop >= 1280  (Figma frame 1280)

   Layout inside each band is fluid; type is not.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&family=Instrument+Serif:ital@0;1&family=Geist:wght@400;600&display=swap');

:root {
  /* palette — same tokens as assets/site.css so the two can be merged later */
  --ink:    #0F0E0E;
  --paper:  #F6F8FB;
  --dim:    #D1D2D8;
  --red:    #D32F3C;   /* rgb(211,47,60) */
  --yellow: #FFDD15;   /* rgb(255,221,21) */
  --teal:   #09CDA7;   /* rgb(9,205,167) */

  --display: 'Tilt Warp', system-ui, sans-serif;
  --serif:   'Instrument Serif', 'Times New Roman', Times, serif;
  --sans:    'Geist', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Figma easings, converted */
  --in-cubic:  cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --smart:     cubic-bezier(0, 0, 0.58, 1);   /* card / pill SMART_ANIMATE */

  /* Marquee runs at a constant 25px/s at every breakpoint; work.js
     measures the row and writes the matching duration here. */
  --marquee-dur: 60s;
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--yellow); color: var(--ink); }

.w-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  overflow: clip;
  /* solid ink + the tiled grain plate, drawn at 1280x600 like the source */
  background-color: var(--ink);
  /* the grain plate is opaque, so the footer's light ramp (work.js, --lit
     0..1) lays the light ground over it instead of changing it */
  background-image:
    linear-gradient(rgba(244, 242, 237, var(--lit, 0)), rgba(244, 242, 237, var(--lit, 0))),
    url('work/grain.webp');
  background-size: 1280px 600px;
  background-repeat: repeat;
}

/* ============================================================
   Pointer. It was the preview's two film-roll images (100x115, hotspot
   0,0). 2026-09-26 (Aurobind): the site's glove instead, fingertip on the
   pointer; over anything clickable it tips forward a little.
   ============================================================ */
.w-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 62px; height: 70px;
  margin: -3px 0 0 -21px;                   /* the fingertip */
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
  visibility: hidden;
}
.w-cursor::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('cursor-glove.svg') no-repeat center / contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  transform-origin: 33.6% 4.9%;
  transition: transform 0.42s var(--ease, ease);
}
.w-cursor.is-live { visibility: visible; }
.w-cursor.is-link::before { transform: scale(0.9) rotate(-10deg); }

@media (hover: hover) and (pointer: fine) {
  .w-page, .w-page a, .w-card { cursor: none; }
}
@media (pointer: coarse) {
  .w-cursor { display: none; }
}

/* ============================================================
   Nav
   The preview insets a full-height absolute box 20px from each side,
   32px from the top, then sticks the bar to its top edge. Reproduced
   exactly so the bar starts 32px down but pins flush to the viewport.
   ============================================================ */
.w-navwrap {
  position: absolute;
  top: 25px;
  left: 20px;
  right: 20px;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
}
.w-nav {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  height: 51px;
  pointer-events: auto;
}

.w-brand {
  display: none;          /* mobile frame drops the mark */
  position: relative;
  flex: 0 0 auto;
  width: 62.14px;
  height: 45px;
  overflow: hidden;
}
.w-brand img {
  position: absolute;
  top: -25.7px;
  left: -17.14px;
  width: 94.27px;
  height: 94.28px;
  max-width: none;        /* the mark is a crop, it must overflow its window */
}

.w-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.w-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  letter-spacing: -0.0648px;
  white-space: nowrap;
  transition: background-color 0.3s var(--smart);
}
.w-pill--red    { background: var(--red); }
.w-pill--yellow { background: var(--yellow); }
.w-pill--teal   { background: var(--teal); }
.w-pill:hover, .w-pill:focus-visible { background: #FFFFFF; }

.w-navspacer { display: none; width: 44px; height: 44px; flex: 0 0 auto; }

/* ============================================================
   Body container
   ============================================================ */
.w-main {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 1800px;
}
.w-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}

/* 2026-09-19 (Aurobind): too much air between the nav and the first card.
   The source's 140px (180px from 800) top and bottom is cut to 48/40
   (64/56 from 800), so the grid starts about 200px higher. */
.w-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 48px 0 40px;
  border-radius: 8px;
}
.w-title {
  width: 100%;
  font-family: var(--display);
  font-weight: 400;
  font-size: 64px;
  line-height: 51.2px;
  letter-spacing: -8px;       /* NOTE: flat -8px at every breakpoint in the source */
  text-align: center;
  color: var(--paper);
}
/* 2026-09-18: a line under the title saying what the grid is (Aurobind).
   Not in the Figma source — set like the page's own body copy (the ticket
   paragraph: Geist 400, -0.4px), in the footer's dim. 2026-09-19: a step
   bigger at his ask, 20 then 24 (was 18 then 20). */
.w-sub {
  max-width: 30em;
  margin-top: 28px;
  padding: 0 10px;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.4px;
  text-align: center;
  text-wrap: balance;
  color: var(--dim);
}

/* ============================================================
   Card grid
   ============================================================ */
/* 2026-09-24 (Aurobind): seven blocks — the six case studies as squares,
   two to a row, then Production as one wide block across both. More room
   at the sides and between the blocks than the template's 10px. One
   column of squares on a phone. */
.w-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 40px);
  width: 100%;
  max-width: 1560px;
  padding: 0 clamp(10px, 5vw, 96px);
}

.w-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
}
.w-card--wide {
  grid-column: 1 / -1;
  aspect-ratio: 2.1 / 1;
}
@media (max-width: 700px) {
  .w-grid { grid-template-columns: minmax(0, 1fr); padding: 0 6px; }
  .w-card--wide { aspect-ratio: 4 / 3; }
}
/* Route link. The Figma source's cards navigate to CMS detail pages; the
   ones that now have a case study behind them carry this. It covers the whole
   card so the caption plate stays a plate rather than becoming a link, and it
   sits under nothing — z-index 4 puts it over the scrim and the bar. */
.w-card-hit {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  border-radius: 8px;
  text-indent: -9999px;
  overflow: hidden;
}
.w-card-hit:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: -4px;
}

.w-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;        /* the hover zoom has to outgrow the card */
  object-fit: cover;
  transition:
    top 0.3s var(--smart), left 0.3s var(--smart),
    width 0.3s var(--smart), height 0.3s var(--smart);
}
/* hover pushes the image 20px past every edge of the clipped card.
   width/height have to move with top/left — an absolutely positioned
   replaced element won't size itself off insets alone. */
.w-card:hover .w-card-img {
  top: -20px;
  left: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
}

.w-card-scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.w-card-bar {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 69px;
  padding: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}
/* (.w-card-bar--light, the source's heavier 0.5 plate for card 1, was
   dropped 2026-09-18 — it washed out Nati Republic's caption) */

.w-card-bar h2 {
  width: 100%;
  font-weight: 600;
  font-size: 18px;
  line-height: 19.8px;
  letter-spacing: -0.0648px;
  color: var(--paper);
}
.w-card-cat {
  display: flex;
  gap: 4px;
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  letter-spacing: -0.0648px;
  color: var(--paper);
}

/* ============================================================
   Marquee — "End of reel · Fin ·", 25px/s, leftwards, forever
   ============================================================ */
.w-marquee-section {
  width: 100%;
  padding: 64px 0;
}
.w-marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
}
.w-marquee-row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  animation: w-marquee var(--marquee-dur) linear infinite;
}
.w-marquee-row span {
  flex: 0 0 auto;
  white-space: pre;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  line-height: 36px;
  letter-spacing: -0.32px;
  color: var(--paper);
}
@keyframes w-marquee { to { transform: translate3d(-100%, 0, 0); } }

/* ============================================================
   Subscribe ticket
   ============================================================ */
.w-subscribe {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 180px 40px 40px;
}
/* the <picture> wrappers must not occupy a flex slot (they'd eat a gap) */
.w-subscribe > picture,
.w-ticket > picture { position: absolute; inset: 0; display: block; }

.w-subscribe-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.w-ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 64px;
  width: 100%;
  color: var(--ink);
}
.w-ticket-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* perforation rails: dashed rule + three punched dots */
.w-rail {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex: 0 0 auto;
  padding: 16px 20px;
  height: 52px;
}
.w-rail::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 0 dashed var(--ink);
}
.w-rail--start::after { border-bottom-width: 1px; }
.w-rail--end::after   { border-top-width: 1px; }
.w-rail i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
}

.w-ticket-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex: 1 1 auto;
  padding: 0 40px;
}
.w-ticket-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.w-ticket-copy h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  line-height: 36px;
  letter-spacing: -1.28px;
  text-align: center;
  color: var(--paper);
}
.w-ticket-copy p {
  font-weight: 400;
  font-size: 18px;
  line-height: 25.2px;
  letter-spacing: -0.4px;
  text-align: center;
  color: var(--paper);
}

.w-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 56px;
  padding: 0 16px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  letter-spacing: -0.0648px;
  white-space: nowrap;
  transition: opacity 0.3s var(--out-cubic);
}
.w-btn:hover { opacity: 0.85; }

/* ============================================================
   Footer
   ============================================================ */
.w-foot { width: 100%; }
.w-foot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 80px;
  padding: 40px 20px 20px;
}

/* tablet + mobile keep the wordmark's slot but drop the wordmark itself,
   exactly as the Figma breakpoint frames do */
.w-foot-mark {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 47px;
}
.w-foot-mark h2 { display: none; }

.w-foot-side {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
}
.w-foot-cols {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.w-foot-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1 1 0;
}

.w-tag {
  padding: 2px 5px;
  box-shadow: inset 0 0 0 1px var(--dim);   /* inset so the box stays 40x18 */
  border-radius: 999px;
  color: var(--dim);
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.w-foot-col ul { display: flex; flex-direction: column; align-items: inherit; }
.w-foot-col a {
  display: block;
  color: var(--dim);
  font-weight: 400;
  font-size: 18px;
  line-height: 25.2px;
  letter-spacing: -0.0648px;
  text-decoration: underline;
  white-space: nowrap;
  transition: opacity 0.3s var(--out-cubic);
}
.w-foot-col a:hover, .w-foot-col a:focus-visible { opacity: 0.25; }

.w-foot-meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.w-foot-meta p {
  color: var(--dim);
  font-weight: 400;
  font-size: 14px;
  line-height: 19.6px;
  letter-spacing: -0.0392px;
  text-align: left;
}

/* ============================================================
   Appear animations
   header : PAGE_LOAD          opacity 0>1, 600ms, 100ms delay, IN_CUBIC
   ticket : THIS_LAYER_IN_VIEW opacity 0>1, 600ms, 300ms delay, OUT_CUBIC, once
   ============================================================ */
[data-appear] { opacity: 0; }
[data-appear="load"] {
  transition: opacity 0.6s var(--in-cubic) 0.1s;
}
[data-appear="view"] {
  transition: opacity 0.6s var(--out-cubic) 0.3s;
}
[data-appear].is-in { opacity: 1; }

/* ============================================================
   TABLET  >= 800
   ============================================================ */
@media (min-width: 800px) {
  .w-navwrap { top: 30px; }
  .w-nav { height: 62px; justify-content: space-between; }
  .w-brand { display: block; }
  .w-navspacer { display: block; }
  .w-pill {
    padding: 12px;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.08px;
  }

  /* The tablet frame fixes the body container at 2512px. It matches the
     content exactly at 2-up, and shows as trailing dark once the grid goes
     3-up above ~1160px — same fixed-frame artefact as the desktop block. */
  /* (the tablet frame's fixed 2512px body height was dropped 2026-09-24 with
     the seven-block grid: it only left trailing dark under fewer cards) */

  .w-head { padding: 64px 0 56px; }
  .w-title { font-size: 140px; line-height: 112px; }
  .w-sub { margin-top: 36px; font-size: 24px; line-height: 32px; }

  /* min-width is what decides the column count: 2-up to ~1160px, 3-up above */
  /* (cards size from the grid now: squares, 2026-09-24) */
  .w-card-bar { height: 74px; }
  .w-card-bar h2 { font-size: 20px; line-height: 22px; letter-spacing: -0.08px; }
  .w-card-cat   { font-size: 20px; line-height: 28px; letter-spacing: -0.08px; }

  .w-marquee-section { padding: 80px 0; }
  .w-marquee-row span { font-size: 64px; line-height: 57.6px; letter-spacing: -0.8192px; }

  .w-subscribe { padding: 180px 40px 80px; }
  .w-ticket { flex-direction: row; align-items: center; gap: 40px; height: 360px; }
  .w-rail {
    flex-direction: column;
    width: 64px;
    height: 100%;
    padding: 50px 20px;
  }
  .w-rail--start::after { border-bottom-width: 0; border-right-width: 1px; }
  .w-rail--end::after   { border-top-width: 0;    border-left-width: 1px; }
  .w-rail i { width: 24px; height: 24px; }
  .w-ticket-body { padding: 0; }
  .w-ticket-copy h2 { font-size: 64px; line-height: 57.6px; }

  .w-btn { height: 68px; padding: 0 24px; font-size: 20px; line-height: 28px; letter-spacing: -0.08px; }

  .w-foot-mark { height: 130px; }
  .w-foot-side { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 40px; }
  .w-foot-cols { gap: 80px; }
  .w-foot-col { flex: 0 0 140px; }
  .w-foot-meta p {
    font-size: 16px;
    line-height: 22.4px;
    letter-spacing: -0.0512px;
    text-align: right;
  }
}

/* ============================================================
   DESKTOP  >= 1280
   ============================================================ */
@media (min-width: 1280px) {
  .w-navwrap { top: 32px; }

  /* The Figma desktop frame fixes the body container at 4140px while its
     content measures 3328px — that trailing 812px of dark is reproduced
     here. Delete this line to close the gap. */
  /* (the fixed 4140px body height went 2026-09-24 with the seven-block grid) */

  .w-title { font-size: 160px; line-height: 128px; }

  /* (cards size from the grid now: squares, 2026-09-24) */
  .w-card-bar { height: 80px; }
  .w-card-bar h2 { line-height: 28px; }

  .w-marquee-section { padding: 120px 0; }
  .w-marquee-row span { font-size: 80px; line-height: 72px; letter-spacing: -1.28px; }

  .w-ticket { height: 464px; }
  .w-ticket-copy h2 { font-size: 80px; line-height: 72px; }
  .w-ticket-copy p  { font-size: 20px; line-height: 28px; }

  .w-foot-inner { flex-direction: row; align-items: flex-end; justify-content: center; gap: 40px; padding: 120px 20px 20px; }
  .w-foot-mark {
    flex: 1 0 0;
    max-width: 1000px;
    height: 340px;
  }
  .w-foot-mark h2 {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: 200px;
    line-height: 170px;
    letter-spacing: -16px;
    color: var(--paper);
  }
  .w-foot-side { flex: 0 0 360px; flex-direction: column; align-items: flex-end; gap: 100px; }
  .w-foot-cols { align-items: flex-start; }
  .w-foot-col { align-items: flex-end; }
  .w-foot-col a { font-size: 20px; line-height: 28px; letter-spacing: -0.08px; }
  .w-foot-meta { width: 360px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .w-marquee-row { animation: none; }
  .w-card-img { transition: none; }
  [data-appear] { opacity: 1; transition: none; }
}


/* ============================================================
   Shared nav — ported from assets/site.css on 2026-09-08 so the
   buttons are identical on every page. This page's own .w-nav
   pill bar was removed. Tokens this stylesheet does not define
   (--violet, --smoke, --hairline, --ease, --gutter) are written
   out literally rather than imported.
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 300;
  padding: 18px 0;
  pointer-events: none;
  /* .w-page is a centring flex column, so without this the header shrinks to
     its content and the whole bar sits mid-screen instead of tracking the
     gutter like it does on every other page */
  align-self: stretch;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav a, .nav .nav-meta { pointer-events: auto; }
.nav.is-away { transform: translateY(-130%); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .nav.is-away { transform: none; opacity: 1; } }
.nav .wrap {
  width: 100%;
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}
.nav-inner {
  /* logo at the gutter, pill track dead centre, coordinates on the far side —
     the composition the nav has always had. pillnav.css lays the component out
     across the row to hit it. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
/* .nav-mark / .pills / .pill lived here until 2026-09-08. The nav is now the
   PillNav component — everything that paints it is in assets/pillnav.css,
   which this page links too. */
.nav-meta {
  grid-column: -2 / -1;
  grid-row: 1;
  justify-self: end;
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  line-height: 1.55;
  text-transform: uppercase;
  color: rgba(246, 248, 251, 0.52);
  text-align: right;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav.is-stuck .nav-meta { opacity: 0; pointer-events: none; }
@media (max-width: 860px) {
  .nav-inner { grid-template-columns: 1fr; }
  .nav-meta { display: none; }
}


/* ============================================================
   Site footer — 2026-09-24
   Aurobind asked for one footer on every page, so the template footer
   (.w-foot, "Grain Archive") is gone and this page carries the site's
   .foot. These rules are copied from site.css (this page does not load
   it); change one, change the other. The light ramp that goes with it
   is in work.js (initLightFooter), also copied from site.js.
   ============================================================ */
.foot {
  --smoke: rgba(246, 248, 251, 0.52);
  --hairline: rgba(246, 248, 251, 0.14);
  --accent: var(--yellow);
  --mark: var(--paper);
  --fast: 0.32s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1520px;
  position: relative;
  z-index: 1;
  width: 100%;
  border-top: 1px solid var(--hairline);
  padding: clamp(44px, 7vh, 90px) 0 clamp(26px, 4vh, 44px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
}
.foot .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
}
.foot-mark {
  font-family: var(--display);
  font-size: clamp(34px, 6vw, 84px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--mark);
}
.foot-mark span { display: block; color: var(--mark); opacity: 0.62; }
.foot h4 {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
}
.foot li + li { margin-top: 9px; }
@media (pointer: coarse) {
  .foot li a { display: inline-block; padding: 8px 0; }
  .foot li + li { margin-top: -7px; }
}
/* 2026-09-26 (Aurobind): every footer, dark or light, on every page: the
   link turns brand red on hover and that is all. It used to take the page's
   accent (yellow, green or red depending on the page and the scroll) and
   slide right behind a → that sat too close to the word. */
.foot li a {
  position: relative;
  transition: color var(--fast) var(--ease);
}
.foot li a:hover { color: var(--red); }
.foot-base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(40px, 6vw, 80px);
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smoke);
}
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-mark { grid-column: 1 / -1; } }