/* Variant B. Minimal Collective system applied.
   Obsidian canvas, Ghost White text, Ash structure. One face, one weight.
   Hierarchy by size and negative tracking only. 0 radius except pills at 4.5px.
   Pinned hero with a scroll-driven card train, then a four column hairline sheet. */

:root {
  --obsidian: #000000;
  --ash: #5a5a5a;
  --ash-text: #a8a8a8;
  --ash-bg: #5a5a5a;      /* Graphite, the reference's second band */
  --line: rgba(0, 0, 0, .5);  /* half black: a grid under the work, not boxes */
  --ink-soft: rgba(0, 0, 0, 0.66);
  --ghost: #ffffff;
  --font: "Satoshi", "Inter", ui-sans-serif, system-ui, sans-serif;
  --gutter: clamp(14px, 2.2vw, 32px);
  --bar: 58px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--obsidian);
  color: var(--ghost);
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
p, h1, h2, ol, figure, blockquote { margin: 0; }
ol { list-style: none; padding: 0; }
img { display: block; }

.caption { font-size: 16px; line-height: 1.25; letter-spacing: normal; }
.body { font-size: 20px; line-height: 1.2; letter-spacing: normal; }
.heading-sm { font-weight: 500; font-size: 23px; line-height: 1.2; letter-spacing: -1px; }
.heading { font-weight: 500; font-size: 27px; line-height: 1; letter-spacing: -1px; }
.heading-lg { font-weight: 500; font-size: 32px; line-height: 1; letter-spacing: -1px; }
.display { font-weight: 500; font-size: 50px; line-height: 0.9; letter-spacing: -1px; }
.display-xl { font-weight: 500; font-size: 77px; line-height: 1; letter-spacing: -2.25px; }

.pill {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 4.5px;
  padding: 4.5px 6.3px;
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: uppercase;
  white-space: nowrap;
}
.date { font-size: 13.5px; text-transform: uppercase; letter-spacing: normal; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.ghost {
  display: block;
  border: 1px solid var(--ghost);
  border-radius: 0;
  padding: 9px 14px;
  text-align: center;
  font-size: 23px;
  line-height: 1;
  letter-spacing: -0.029em;
}
.ghost:hover { background: var(--ghost); color: var(--obsidian); }

/* Bars */
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--gutter);
}
.bar--top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--obsidian);
  height: var(--bar);
  transition: background .25s ease, border-color .25s ease;
}
/* clear while the loop is behind it, solid once the sheets are */
.bar--top.is-solid { background: var(--ash-bg); border-bottom-color: var(--line); }
.bar__name { font-weight: 500; font-size: 30px; letter-spacing: -1px; line-height: 1; }
/* Slow color cycle on the name, the one detail kept from the old site */
@keyframes name-cycle {
  0%    { color: #b8dfee; }
  12.5% { color: #3340e0; }
  25%   { color: #e8a8e6; }
  37.5% { color: #e04acf; }
  50%   { color: #54d869; }
  62.5% { color: #e25a26; }
  75%   { color: #c33a48; }
  87.5% { color: #9c4ba3; }
  100%  { color: #b8dfee; }
}
.name { color: inherit; }   /* the cycle lives on the project pages, see project.css */
.name--offset { }
@media (prefers-reduced-motion: reduce) { .name { animation: none; } }
.bar__nav { display: flex; gap: 28px; font-weight: 500; font-size: 30px; letter-spacing: -1px; }
.bar__nav a:hover { color: var(--ghost); }
.bar--corner {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-top: 1px solid var(--ghost);
  font-size: 27px; letter-spacing: -0.032em; line-height: 1;
  padding: 18px var(--gutter);
  background: var(--obsidian);
  z-index: 6;
}

/* Hero: 320vh runway, pinned viewport, card train */
.hero { height: 300vh; position: relative; --band: 200px; }
.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.hero__mesh { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: 1; transform: scale(1.06); mix-blend-mode: lighten; }
.hero__arcs { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__hed {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(76vw, 1120px);
  text-align: center;
  font-weight: 500;
  font-size: clamp(40px, 5.35vw, 77px);
  line-height: 1;
  letter-spacing: -0.056em;
  color: var(--ghost);
  mix-blend-mode: difference;
  z-index: 2;
}
.hero__scroll { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); font-size: 16px; z-index: 2; }

.train {
  position: absolute;
  top: 0; left: 100vw;
  height: 100%;
  width: 3499px;
  z-index: 4;
  will-change: transform;
}
.card {
  position: absolute;
  overflow: hidden;
  background: var(--obsidian);
}
.card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.card__title {
  font-weight: 500;
  position: absolute; left: 14px; top: 14px;
  font-size: 27px; line-height: 1; letter-spacing: -0.032em;
}
.card__pills { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }

.card__pills--top { top: 14px; bottom: auto; }
/* Train cards. Widths fixed, heights follow the source aspect, none overlap, all sit below the hed */
.card--2  { left: 0;      top: 12%; width: 480px; aspect-ratio: 1; --speed: 1.14; --drift: 14px; z-index: 3; }                /* Rebellions cover */
.card--0  { left: 827px;  top: 61%; width: 520px; aspect-ratio: 1800 / 1131; --speed: 1.14; --drift: -26px; z-index: 3; }      /* Harvard Bass */
.card--1  { left: 1773px;  top: 10%; width: 720px; aspect-ratio: 16 / 9; --speed: 1.14; --drift: -18px; z-index: 3; }           /* Nudge */
.card--3  { left: 0; top: 55%; width: 540px; aspect-ratio: 16 / 10; --speed: 1.0; --drift: -20px; z-index: 2; }          /* Prevoty */
.card--4  { left: 1470px; top: 39%; width: 680px; aspect-ratio: 16 / 9; --speed: 1.28; --drift: 18px; z-index: 2; }           /* Imperva wheel */
.card--5  { left: 2340px; top: 59%; width: 550px; aspect-ratio: 3208 / 2008; --speed: 1.14; --drift: -16px; z-index: 3; }      /* Leadership University */
.card--6  { left: 0; top: 5%; width: 600px; aspect-ratio: 3212 / 2012; --speed: 0.86; --drift: 24px; z-index: 1; }      /* C-QNC */
.card--7  { left: 2080px; top: 16%; width: 500px; aspect-ratio: 670 / 372; --speed: 0.86; --drift: -22px; z-index: 1; }        /* BBC */
.card--9  { left: 2420px; top: 40%; width: 580px; aspect-ratio: 16 / 9; --speed: 1.0; --drift: -18px; z-index: 2; }      /* Shader lab */

/* Left-set hero. The hed sits flush left over the full bleed mesh and blends on
   difference, so it inverts to dark across the bright passages and stays white
   over black. Jamie's call over the critic: it is character, and it reads. */
.hero, .hero__pin { background-color: var(--ash-bg); }
.hero__pin { display: flex; flex-direction: column; }
.hero__stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background-color: var(--ash-bg); }

.hero__caption { position: absolute; right: var(--gutter); bottom: 18px; font-size: 16px; color: var(--ghost); z-index: 6; }
.hero__caption:hover { color: var(--ghost); }

/* Featured two-up, built on the reference's editorial block: image, a tag row,
   a large title, and a second column that sits lower and lags as it scrolls in. */
.cell--feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  align-items: start;
}
.feature {
  display: flex;
  flex-direction: column;
  padding: var(--gutter) var(--gutter) 40px;
  will-change: transform;
}
.feature img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.feature:hover img { opacity: .88; }
.feature__meta { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.feature__title {
  font-weight: 500;
  font-size: 50px;
  line-height: 0.95;
  letter-spacing: -1px;
  margin-top: 16px;
}
.feature .body { margin-top: 12px; color: var(--ink-soft); max-width: 30em; }


/* Hover turns the whole block white, borders included, as the reference does */
.cell--card,
.feature { transition: color .2s ease; }
.cell--card:hover,
.feature:hover { color: var(--ghost); }
.cell--card:hover .meta-line,
.cell--card:hover .body,
.feature:hover .body { color: var(--ghost); }

/* Work rows: continuous horizontal rules */
#work .cell { border-bottom: 1px solid var(--line); }
#work .cell--feature { border-bottom: 1px solid var(--line); }

/* Sheet: four columns, hairline seams, sections stacked */
.sheet,
.menu,
.hero__stage,
.loader__sheet {
  background-image: linear-gradient(to right,
    transparent calc(25% - 1px), var(--line) calc(25% - 1px), var(--line) 25%,
    transparent 25%, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) 50%,
    transparent 50%, transparent calc(75% - 1px), var(--line) calc(75% - 1px), var(--line) 75%,
    transparent 75%);
}

.sheet {
  overflow: hidden;
  background-color: var(--ash-bg);
  color: var(--obsidian);
  border-color: var(--line);
  scroll-margin-top: var(--bar);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 0;
  position: relative;
  z-index: 5;
}

.cell {
  min-width: 0;
  padding: 0;
  min-height: 200px;
}
/* Work sat on three columns; four puts its seams on the page grid. */
.sheet--full { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cell--head {
  grid-column: 1 / -1;
  padding: 45px var(--gutter) 40px;
}
.cell--head .body { margin-top: 14px; max-width: 30em; color: var(--ink-soft); }
.sheet::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: var(--ash-bg); }
.cell--label { padding: 45px var(--gutter) 54px; }
.cell--label .display-xl {
  margin-left: -2px;
  font-size: clamp(38px, calc((25vw - 2 * var(--gutter)) / 4.8), 77px);
}
.cell--label .body { margin-top: 14px; max-width: 22em; font-size: 20px; color: var(--ink-soft); }
.textlink { display: inline-block; margin-top: 28px; font-size: 20px; border-bottom: 1px solid var(--obsidian); padding-bottom: 2px; }
.textlink:hover { color: var(--ghost); border-color: var(--ghost); }
.textlink--foot { margin-top: 0; font-size: 15px; }
.cell--links { display: flex; flex-direction: column; gap: 4px; padding: 22px var(--gutter) 45px; }
.cell--links .textlink { margin-top: 0; align-self: flex-start; }
.cell--card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--gutter) var(--gutter) 40px;
  overflow: hidden;
}
.cell--card .heading-lg,
.cell--card .meta-line,
.cell--card .body { padding: 0; }
.cell--card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 16px; }
.cell--card-wide img { aspect-ratio: 8 / 3; object-position: left center; }
.cell--card:hover img { opacity: .82; }
.cell--card .heading-lg { order: 1; }
.cell--card .meta-line { order: 2; font-size: 17px; color: var(--ink-soft); letter-spacing: -0.01em; }
.cell--card .body { order: 3; margin-top: 8px; color: var(--ink-soft); max-width: 30em; font-size: 19px; line-height: 1.2; }
.cell--card .body { order: 3; }
.cell--card img { order: 0; }

.cell--card-wide { grid-column: span 2; }

.cell--card img[src*="app-dubrovnik"] { transform: scale(1.02); object-position: left center; }
.cell--card img[src*="hb-poster-yellow"] { object-position: center top; }
.cell--card img[src*="web-hero"] { object-position: left center; }
.cell--card img[src*="overview-wheel"] { object-position: right center; }

.cell--card-full { grid-column: 2 / -1; }
.cell--card-full img { aspect-ratio: 21 / 9; object-position: center 62%; }

.cell--action { display: flex; align-items: flex-start; justify-content: stretch; padding: 18px var(--gutter) 45px; }
.cell--action .ghost { width: 100%; }
.cell--stack { flex-direction: column; gap: 9px; }
.cell--wide { grid-column: span 2; padding: 45px var(--gutter) 72px; }
.cell--wide .display { max-width: 20em; margin-top: -0.06em; }
.cell--wide .body { margin-top: 28px; max-width: 40em; font-size: 19px; }
.cell--span2 { grid-column: span 2; }
.cell--span3 { grid-column: span 3; }
.cell--blank { min-height: 0; }

.roles { padding: 0; }
.role {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.role > span { padding: 0 var(--gutter); }
.role__title, .role__date { font-size: 17px; color: var(--ink-soft); }
.role__date { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.role:last-child { border-bottom: 0; }


.quotes { padding: 0; }
.quote { padding: 36px var(--gutter) 54px; border-bottom: 1px solid var(--line); margin: 0; }
.quote:last-child { border-bottom: 0; }
.quote__text { font-size: 31.5px; line-height: 1.1; letter-spacing: -1px; max-width: 22em; text-indent: -0.38em; }
.quote__by { margin-top: 18px; font-size: 17px; color: var(--ink-soft); }

/* Footer: one ruled row */
.foot .cell { min-height: 0; padding: 18px var(--gutter) 22px; display: flex; align-items: baseline; }
.foot .caption { font-size: 15px; color: var(--ink-soft); padding: 0; }
.foot a.caption:hover { color: var(--ghost); }
.sheet a.textlink { color: var(--obsidian); }

/* Work cells draw a bottom border on every row, including the last, which would
   sit directly above the next sheet's top border. Pull the sheet up by that one
   pixel so the two land on the same line instead of stacking into a 2px rule. */
.sheet + .sheet,
.foot { margin-top: -1px; }

@media (max-width: 900px) {
  .sheet .cell--blank { display: none; }
  .hero { height: auto; }
  .hero__pin { position: relative; top: 0; display: block; height: auto; min-height: 0; padding-bottom: 40px; }
  .hero__stage { position: static; overflow: visible; }
  .hero__hed { position: relative; left: 0; top: 0; transform: none; width: auto; margin: 80px var(--gutter) 40px; text-align: left; }
  .hero__scroll { display: none; }
  .hero { height: auto; }
  .hero__pin { height: auto; }
  .hero__hed { position: relative; top: auto; left: auto; transform: none; width: auto; margin: 56px var(--gutter) 32px; text-align: left; font-size: clamp(38px, 10vw, 56px); }
  .hero__caption { display: none; }
  /* A full screen of the loop, then the cards flow beneath it */
  .hero__stage { position: relative; padding-top: 100vh; }
  .hero__mesh { display: block; height: 100vh; bottom: auto; }
  .hero__hed {
    position: absolute; top: 124px; left: var(--gutter); right: var(--gutter);
    width: auto; margin: 0; transform: none;
    mix-blend-mode: normal; color: var(--obsidian);
  }
  /* the desktop rule pins bottom too; leaving both stretched it down the whole stage */
  .hero__caption { display: block; position: absolute; top: calc(100vh - 40px); bottom: auto; right: var(--gutter); }
  .card { background: transparent; color: var(--obsidian); }
  .train { position: relative; left: 0; width: auto; height: auto; display: flex; flex-direction: column; gap: 14px; padding: 0 var(--gutter) 80px; transform: none !important; }
  .card { position: relative; left: auto !important; top: auto !important; width: auto !important; height: auto !important; aspect-ratio: auto !important; display: flex; flex-direction: column; }
  .card img { aspect-ratio: auto; height: auto; order: 2; }
  .card__title { position: static; order: 1; padding: 0 0 12px; font-size: 27px; letter-spacing: -0.032em; }
  .card .pill { font-size: 14px; padding: 5px 6px; }
  .card__title br { display: none; }
  .card__pills { position: static; order: 3; padding: 12px 0 0; }
  /* Mobile train: one Imperva, no BBC or Gravity, and Jamie's running order */
  .card--7 { display: none; }   /* BBC, desktop only */
  .card--2 { order: 1; }   /* Rebellions */
  .card--1 { order: 2; }   /* Nudge */
  .card--0 { order: 3; }   /* Music */
  .card--4 { order: 4; }   /* Imperva */
  .card--3 { order: 5; }   /* Prevoty */
  .card--5 { order: 6; }   /* Leadership University */
  .card--9 { order: 7; }   /* Shader lab */
  .card--6 { order: 8; }   /* C-QNC Synth */
  .train { gap: 36px; }
  .display { font-size: 32px; line-height: 0.95; }
  .display-xl { font-size: 38px; }
  .bar--corner { position: relative; }
  .sheet, .sheet--full { grid-template-columns: 1fr 1fr; }
  .cell--head { grid-column: span 2; }
  .cell--label { grid-column: span 2; min-height: 0; }
  .cell--wide, .cell--span3, .cell--span2 { grid-column: span 2; }
  .cell--feature { grid-column: span 2; grid-template-columns: 1fr; }

  .feature + .feature { margin-top: 0; transform: none !important; }
  .feature__title { font-size: 32px; }
  .role { grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .role .heading-sm { grid-column: 1 / -1; }
  .role__date { text-align: left; }
}
@media (max-width: 560px) {
  .sheet, .sheet--full { grid-template-columns: 1fr; }
  .cell--head { grid-column: span 1; }
  .cell { border-bottom: 1px solid var(--line); }
  .cell--label, .cell--wide, .cell--span3, .cell--span2, .cell--card-wide, .cell--card-full, .cell--feature { grid-column: span 1; }
  .bar__nav { gap: 16px; font-size: 16px; }
  .bar__name { font-size: 24px; }
  /* body copy runs 8px larger on the phone, at the reference's 1.2 leading */
  .body,
  .cell--label .body { font-size: 26px; line-height: 1.2; }
  .cell--card .body,
  .cell--wide .body { font-size: 25px; line-height: 1.2; }
  .textlink { font-size: 22px; }
  .caption { font-size: 18px; line-height: 1.25; }
}

/* ─────────────────────────────────────────────────────────
   Loader and overlay menu, built on the reference's pattern:
   the wordmark held against a column rule with a word rolling
   beside it, then a full sheet of links on the same grid.
   ───────────────────────────────────────────────────────── */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: transparent;
  display: grid;
  place-items: center stretch;
  transition: opacity .5s ease, visibility .5s ease;
}
/* What the holes look onto. Black under the mesh, so the letters read even
   before the video has a frame to give. */
.loader__back { position: absolute; inset: 0; background: #000; overflow: hidden; }
.loader__vid { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The sheet is the page cover. The mask cuts the lockup out of it. */
.loader__sheet {
  position: absolute;
  inset: 0;
  background-color: var(--ash-bg);
}
/* Pinned to the loader's top-left so its user units are viewport pixels. */
.loader__cut { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: visible; pointer-events: none; }
.loader .bl { display: inline-block; width: 0; height: 0; }
/* Only once the mask is known to work does the lockup stop drawing as ink. */
.loader.is-cut .loader__sheet {
  -webkit-mask-image: url(#loader-cut);
  mask-image: url(#loader-cut);
}
.loader.is-cut .loader__inner { visibility: hidden; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__inner {
  position: relative;
  /* Straddles the centre rule: the grid is the separator, so there is no pipe. */
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  font-weight: 500;
  font-size: 50px;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--obsidian);
}
.loader__name { justify-self: end; padding-right: var(--gutter); line-height: 1.25; }
.loader__roll {
  display: block;
  overflow: hidden;
  /* Room for the descender on "synths": a 1em box clips it. */
  height: 1.25em;
  padding-left: var(--gutter);
}
.loader__word { display: block; line-height: 1.25; transition: transform .56s cubic-bezier(.4,0,.2,1), opacity .56s ease; }
.loader__word.is-out { transform: translateY(-100%); opacity: 0; }
.loader__word.is-in { transform: translateY(100%); opacity: 0; transition: none; }

/* Toggle, two rules that cross when the sheet is open */
.bar__toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  width: 34px;
  height: 22px;
  position: relative;
  cursor: pointer;
  color: inherit;
}
.bar__toggle span {
  position: absolute;
  left: 0;
  width: 34px;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s ease, opacity .3s ease;
}
.bar__toggle span:first-child { top: 6px; }
.bar__toggle span:last-child { top: 14px; }
.bar__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.bar__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: var(--bar) 0 0 0;
  z-index: 90;
  background-color: var(--ash-bg);
  color: var(--obsidian);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  padding-top: 45px;
  overflow-y: auto;
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform .62s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .62s;
}
.menu.is-open {
  visibility: visible;
  transform: translateY(0);
  transition: transform .62s cubic-bezier(.65, 0, .35, 1), visibility 0s;
}
/* the rows arrive after the sheet lands, one behind the next */
.menu__primary a,
.menu__secondary a {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .42s ease, transform .42s cubic-bezier(.2, .7, .2, 1);
}
.menu.is-open .menu__primary a,
.menu.is-open .menu__secondary a { opacity: 1; transform: none; }
.menu.is-open .menu__primary a:nth-child(1) { transition-delay: .34s; }
.menu.is-open .menu__primary a:nth-child(2) { transition-delay: .40s; }
.menu.is-open .menu__primary a:nth-child(3) { transition-delay: .46s; }
.menu.is-open .menu__primary a:nth-child(4) { transition-delay: .52s; }
.menu.is-open .menu__secondary a:nth-child(1) { transition-delay: .46s; }
.menu.is-open .menu__secondary a:nth-child(2) { transition-delay: .52s; }
.menu.is-open .menu__secondary a:nth-child(3) { transition-delay: .58s; }
@media (prefers-reduced-motion: reduce) {
  .menu, .menu__primary a, .menu__secondary a { transition: none; }
}
.menu__primary {
  grid-column: 3 / -1;
  display: flex;
  flex-direction: column;
}
.menu__primary a {
  font-weight: 500;
  font-size: 77px;
  line-height: 1;
  letter-spacing: -2.25px;
  padding: 0 var(--gutter) 6px;
}
.menu__secondary {
  grid-column: 3 / -1;
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu__secondary a {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -1px;
  padding: 0 var(--gutter);
}
.menu a:hover { color: var(--ghost); }

@media (max-width: 900px) {
  /* the lockup is wider than a phone: it starts at the gutter, not the rule */
  /* half a phone is 181px of room: the name only fits at 28 */
  .loader__inner { font-size: 28px; }
  .menu {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 0;
  }
  .menu__primary, .menu__secondary { grid-column: 1; }
  .menu__primary a { font-size: 44px; letter-spacing: -1px; }
  .menu__secondary a { font-size: 20px; }
}