/* Thornbury Digital v5 — css/layout.css
   Obsidian, chrome, one ember. Glass lives in exactly two places:
   the bar, and the work-item metadata cards.
   Each glass is a blur(16px) layer blended with `overlay` against the liquid
   behind it, under an unblended skin that carries the edge and the text. */
@layer reset, base, layout, components, states;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
  h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, svg, canvas { display: block; max-width: 100%; }
  img { height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    --bg: #080808;
    --bg-2: #0e0e0e;
    --chrome: #e1e1e1;
    --chrome-70: rgba(225, 225, 225, .7);
    --chrome-45: rgba(225, 225, 225, .56);   /* 5.1:1 on #080808 — .45 was 3.7:1 */
    --hair-2: rgba(225, 225, 225, .18);
    --hair-1: rgba(225, 225, 225, .1);
    --hair-0: rgba(225, 225, 225, .045);
    --ember: #ff2a00;
    --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --gutter: clamp(1rem, 3.5vw, 3.5rem);
    --col: min(100% - 2 * var(--gutter), 96rem);
    --bar: 4rem;
    --ease: cubic-bezier(.2, .7, .2, 1);
  }

  html {
    color-scheme: dark;
    background: var(--bg);
    color: var(--chrome);
    font-family: var(--display);
    font-size: 100%;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
  }
  html.rm { scroll-behavior: auto; }
  body { min-height: 100dvh; background: var(--bg); }

  ::selection { background: var(--ember); color: var(--bg); }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

  .skip {
    position: absolute;
    inset-inline-start: .8rem;
    top: .8rem;
    z-index: 80;
    padding: .45rem .7rem;
    background: var(--chrome);
    color: var(--bg);
    font-family: var(--mono);
    font-size: .7rem;
    transform: translateY(-160%);
  }
  .skip:focus { transform: none; }

  .field {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: var(--bg);
    pointer-events: none;
  }
  html.no-field .field { display: none; }
  html[data-field="still"] .field { opacity: .72; }
  /* No z-index and no isolation here: the glass layers below must be able
     to blend with the canvas, which only works inside the root stacking context. */
  .site {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  main { flex: 1 0 auto; }
  main:focus { outline: none; }

  /* type roles */
  .meta {
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--chrome-45);
  }
  .meta b { font-weight: 500; color: var(--chrome); }
  .meta .em { color: var(--ember); }
  .q::before { content: "\201C"; }
  .q::after { content: "\201D"; }
  .display {
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .9;
    font-variation-settings: "wdth" 92;
    text-wrap: balance;
  }
  .statement {
    font-weight: 700;
    font-size: clamp(2rem, 5.2vw, 5.6rem);
    letter-spacing: -.035em;
    line-height: .96;
    max-width: 16ch;
    margin-top: 1.2rem;
    text-wrap: balance;
  }
  .sub {
    font-size: clamp(.95rem, 1.1vw, 1.1rem);
    line-height: 1.5;
    color: var(--chrome-70);
    max-width: 40ch;
    margin-top: 1.6rem;
    text-wrap: pretty;
  }
  .more {
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--chrome);
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    white-space: nowrap;
  }
  .more::after {
    content: "";
    width: 1.6rem;
    height: 1px;
    background: currentColor;
    transition: width .35s var(--ease), background .35s;
  }
  .more:hover::after { width: 2.8rem; background: var(--ember); }
}

@layer layout {
  .wrap { width: var(--col); margin-inline: auto; }
  .sec { padding-block: clamp(4rem, 12vh, 9rem); }
  .sec--solid { background: rgba(8, 8, 8, .9); border-top: 1px solid var(--hair-1); }
  /* Where the field runs behind reading text it goes behind glass: the Team
     band's treatment, on every band that is not solid. The field is still there
     and still moving, but it is background now — depth of field, not a scrim.
     isolation gives the filter its own context so it composites against the
     fixed canvas rather than the section's own paint. The only glass panels
     inside one of these bands are the work plates' metadata cards, which carry
     their own dark base and now blend with the band's paint — the blurred field
     — instead of the sharp one; a known ground either way. */
  .sec--rule {
    border-top: 1px solid var(--hair-1);
    background: rgba(8, 8, 8, .62);
    -webkit-backdrop-filter: blur(26px) saturate(1.15) brightness(.72);
    backdrop-filter: blur(26px) saturate(1.15) brightness(.72);
    isolation: isolate;
  }
  .sec-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: clamp(2rem, 6vh, 4rem);
  }
  .teaser {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1.5rem var(--gutter);
  }

  .page-head {
    padding: calc(var(--bar) + clamp(3rem, 10vh, 6rem)) 0 clamp(2rem, 6vh, 4rem);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    row-gap: 1.5rem;
    align-items: end;
  }
  .page-head .meta { grid-column: 1 / -1; }
  .page-head h1 {
    grid-column: 1 / span 8;
    font-size: clamp(3.4rem, 10vw, 11rem);
    margin-left: -.04em;
  }
  .page-head .sub { grid-column: 9 / -1; padding-bottom: .8rem; margin: 0; }
  /* Work is an index of pictures, so its head is tighter than the reading
     pages': the first plate has to clear the fold on an ordinary laptop, and
     at the old spacing the only thing under the title on the first screen was
     the outlined numeral, floating in the gap above the picture it belongs to. */
  html[data-page="work"] .page-head {
    padding-top: calc(var(--bar) + clamp(2.2rem, 7vh, 4.4rem));
    padding-bottom: clamp(1.4rem, 4vh, 2.6rem);
  }
  @media (max-width: 760px) {
    .page-head h1, .page-head .sub { grid-column: 1 / -1; }
    .teaser { grid-template-columns: 1fr; align-items: start; }
  }
}

@layer components {
  /* ---- glass ---- */
  .gpanel { position: relative; }
  .gpanel::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: linear-gradient(160deg, rgba(225, 225, 225, .28), rgba(225, 225, 225, .06) 65%);
    mix-blend-mode: overlay;
  }
  .gpanel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid var(--hair-2);
    background: rgba(225, 225, 225, .035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .5);
  }
  .gpanel > * { position: relative; }

  /* ---- bar: a blended glass pane, then the chrome on top ---- */
  .bar-glass {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--bar);
    z-index: 30;
    pointer-events: none;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: linear-gradient(180deg, rgba(225, 225, 225, .22), rgba(225, 225, 225, .05));
    mix-blend-mode: overlay;
  }
  .bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--bar);
    z-index: 31;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    background: rgba(8, 8, 8, .28);
    border-bottom: 1px solid var(--hair-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  .mark {
    padding-block: .7rem;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -.03em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: .55rem;
  }
  .mark small {
    font-family: var(--mono);
    font-weight: 400;
    font-size: .58rem;
    letter-spacing: .16em;
    color: var(--chrome-45);
  }
  /* scoped to the bar: the same two classes appear inside the menu panel, in a
     flex row that would ignore these anyway */
  .bar .mark { grid-column: 1; grid-row: 1; justify-self: start; }
  .bar .nav { grid-column: 2; grid-row: 1; justify-self: center; }
  .bar .menu-btn { grid-column: 3; grid-row: 1; justify-self: end; }
  .nav { display: flex; gap: clamp(1.2rem, 2.8vw, 2.4rem); }
  .nav a {
    position: relative;
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--chrome-70);
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    transition: color .25s;
  }
  .nav a:hover, .nav a[aria-current] { color: var(--chrome); }
  .nav a[aria-current]::before {
    content: "";
    position: absolute;
    left: -.85rem;
    top: 50%;
    width: 5px;
    height: 5px;
    background: var(--ember);
    transform: translateY(-50%);
  }
  @media (max-width: 480px) {
    .bar { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
    .mark small { display: none; }
    .nav { gap: 1.1rem; }
    .nav a { font-size: .6rem; letter-spacing: .1em; }
    .nav a[aria-current]::before { left: -.7rem; }
  }

  /* ---- hero: the field is the plate. Type is furniture on it. ----
     svh, not dvh: mobile chrome collapsing must not re-frame the object. */
  .hero {
    position: relative;
    height: calc(100svh - var(--bar));
    min-height: 32rem;
    margin-top: var(--bar);
    padding: 0;
    overflow: visible;
    border-bottom: 1px solid var(--hair-2);
  }
  /* Light rest only — the field is the picture, pulled back in the plate. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(to bottom,
        rgba(8, 8, 8, .28) 0%,
        rgba(8, 8, 8, .08) 22%,
        rgba(8, 8, 8, 0) 42%,
        rgba(8, 8, 8, .1) 78%,
        rgba(8, 8, 8, .4) 100%);
  }
  main > .sec, main > section, main > .mq-wrap { position: relative; z-index: 1; }

  .hero-copy {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: clamp(1.6rem, 5.5vh, 3.6rem);
    z-index: 2;
    max-width: none;
    pointer-events: none;
    display: grid;
    justify-items: start;
    text-align: left;
  }
  .wordmark {
    font-weight: 800;
    font-size: clamp(3.4rem, 10.8vw, 11.8rem);
    letter-spacing: -.05em;
    line-height: .86;
    text-transform: uppercase;
    /* fixed width: the studio's name is the one still thing on the page
       while everything around it moves */
    font-variation-settings: "wdth" 92;
    margin: .55rem 0 .7rem -.04em;
    max-width: 100%;
    min-height: .86em;
    white-space: nowrap;
  }
  .hero-line {
    font-size: clamp(1.05rem, 1.55vw, 1.5rem);
    color: var(--chrome-70);
    text-wrap: balance;
    max-width: 22ch;
    letter-spacing: -.015em;
    line-height: 1.3;
  }
  /* the rhythm: the process on one clock, the facts on another, lower right */
  .hero-rhythm {
    position: absolute;
    left: 56%;
    right: var(--gutter);
    bottom: clamp(5.2rem, 14vh, 8.4rem);
    z-index: 2;
    pointer-events: none;
  }
  .hero-rhythm-key { margin-bottom: .75rem; }
  /* A step below the wordmark in every axis — size, weight, colour — so the
     first screen has one headline. The line still cycles and still decodes;
     it just no longer argues with the name for the first look. */
  .hero-step {
    font-weight: 600;
    font-size: clamp(1.2rem, 1.9vw, 1.9rem);
    letter-spacing: -.03em;
    line-height: 1.08;
    min-height: 2.16em;
    max-width: 16ch;
    color: var(--chrome-70);
    font-variation-settings: "wdth" var(--wd2, 96);
  }
  .hero-facts {
    margin: 1.8rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hair-1);
  }
  .hero-facts li {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--chrome-70);
    padding: .6rem 0;
    border-bottom: 1px solid var(--hair-1);
    min-height: 2.05rem;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .hero-facts li.is-on { opacity: 1; transform: none; }
  /* the band: the offer, on a loop that never stops. A ruled strip in the flow
     of the Services page, between the head and the ledger, so every figure it
     carries is printed in full directly under it. It ran along the home
     hero's foot until 8 Sep 2026, a third clock on a screen that had two. */
  .offer-band {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--hair-1);
    padding: .85rem 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  .offer-band-track { display: flex; width: max-content; animation: mq 60s linear infinite; }
  .offer-band-row { display: flex; align-items: center; gap: 3rem; padding-right: 3rem; white-space: nowrap; }
  .offer-band-row span {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--chrome-45);
  }
  .offer-band-row span b { color: var(--chrome); font-weight: 500; }
  .offer-band-row span em { font-style: normal; color: var(--ember); }
  .offer-band-row i { width: 7px; height: 7px; background: var(--ember); flex-shrink: 0; }
  html.rm .offer-band-track { animation: none; }
  html.rm .hero-facts li { opacity: 1; transform: none; }
  /* one call to action. The second was a second button of equal weight,
     which is two voices; the work is a plain link beside it now. */
  .hero-act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem 1.6rem;
    margin-top: clamp(1.6rem, 4vh, 2.6rem);
    pointer-events: auto;
  }
  .hero-act .btn { justify-content: center; min-width: 10.5rem; padding: .8rem 1.1rem; }
  .hero-act .more { color: var(--chrome-70); }
  .hero-act .more:hover { color: var(--chrome); }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.1rem;
    background: var(--chrome);
    color: var(--bg);
    border: 0;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .3s var(--ease);
  }
  .btn:hover { background: var(--ember); }
  .btn:disabled { opacity: .5; cursor: default; }
  .btn svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* ---- blueprint plates ---- */
  .plate {
    position: relative;
    border: 1px solid var(--hair-2);
    color: var(--chrome-45);
    background-image:
      linear-gradient(to right, var(--hair-1) 1px, transparent 1px),
      linear-gradient(to bottom, var(--hair-1) 1px, transparent 1px),
      linear-gradient(to right, var(--hair-0) 1px, transparent 1px),
      linear-gradient(to bottom, var(--hair-0) 1px, transparent 1px);
    background-size: 10% 10%, 10% 10%, 2.5% 2.5%, 2.5% 2.5%;
    transition: border-color .4s var(--ease), color .4s var(--ease);
  }

  /* media inside a plate: film or a live site, under the technical overlays */
  .plate-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--op, 50% 0%);
  }
  .op-c { --op: 50% 50%; }
  /* blueprint ruling, redrawn over the media so the frame reads as a plate */
  .plate > .grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .55;
    background-image:
      linear-gradient(to right, var(--hair-1) 1px, transparent 1px),
      linear-gradient(to bottom, var(--hair-1) 1px, transparent 1px),
      linear-gradient(to right, var(--hair-0) 1px, transparent 1px),
      linear-gradient(to bottom, var(--hair-0) 1px, transparent 1px);
    background-size: 10% 10%, 10% 10%, 2.5% 2.5%, 2.5% 2.5%;
  }
  /* keeps chrome labels legible over a light screenshot as well as a dark one */
  .plate > .scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(8, 8, 8, .92), rgba(8, 8, 8, .5) 9%, rgba(8, 8, 8, 0) 20%),
      linear-gradient(to top, rgba(8, 8, 8, .88), rgba(8, 8, 8, .2) 24%, rgba(8, 8, 8, 0) 44%);
  }
  .plate::before, .plate::after, .corners, .pc, .card { z-index: 2; }
  .plate::before, .plate::after,
  .corners::before, .corners::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 0 solid var(--chrome);
    pointer-events: none;
  }
  .plate::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
  .plate::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
  .corners::before { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
  .corners::after { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
  .pc {
    position: absolute;
    font-family: var(--mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--chrome-45);
    white-space: nowrap;
  }
  .pc b { font-weight: 500; color: var(--chrome); }
  .pc-tl { top: .7rem; left: .8rem; }
  .pc-tr { top: .7rem; right: .8rem; }
  @media (max-width: 560px) { .pc-tl { font-size: .54rem; } }

  /* ---- home index: the plates are figures, the names carry the page ---- */
  .index { display: grid; }
  .entry { border-top: 1px solid var(--hair-1); }
  .entry:last-child { border-bottom: 1px solid var(--hair-1); }
  .entry-link {
    --fig: clamp(148px, 19vw, 260px);
    display: grid;
    grid-template-columns: var(--fig) minmax(0, 1fr);
    gap: clamp(1.1rem, 3vw, 3rem);
    align-items: center;
    padding: clamp(1.3rem, 4vh, 2.4rem) 0;
    text-decoration: none;
    color: inherit;
  }
  .entry:nth-child(even) .entry-link { grid-template-columns: minmax(0, 1fr) var(--fig); }
  .entry:nth-child(even) .fig-plate { grid-area: 1 / 2; }
  .entry:nth-child(even) .entry-body { grid-area: 1 / 1; text-align: right; }
  .entry:nth-child(even) .entry-body .line { margin-left: auto; }
  .fig-plate { aspect-ratio: 16 / 10; }
  .fig-plate > .grid { opacity: .32; }
  /* the figures sit inside the monolith until you reach for one */
  .fig-plate .plate-media {
    filter: grayscale(.55) brightness(.7) contrast(1.08);
    transition: filter .55s var(--ease);
  }
  .entry-link:hover .plate-media { filter: none; }
  .entry-link:hover .fig-plate { border-color: var(--chrome-70); }
  .entry-body h2 {
    font-weight: 800;
    font-size: clamp(1.9rem, 4.4vw, 3.8rem);
    letter-spacing: -.04em;
    line-height: .95;
    text-transform: uppercase;
    margin: .5rem 0 .45rem;
  }
  .entry-body .line {
    display: block;
    color: var(--chrome-70);
    font-size: clamp(.9rem, 1vw, 1.05rem);
    max-width: 46ch;
  }
  @media (max-width: 760px) {
    .entry-link, .entry:nth-child(even) .entry-link {
      grid-template-columns: minmax(0, 1fr);
      gap: .9rem;
    }
    .entry .fig-plate, .entry:nth-child(even) .fig-plate { grid-area: auto; width: var(--fig); }
    .entry .entry-body, .entry:nth-child(even) .entry-body { grid-area: auto; text-align: left; }
    .entry:nth-child(even) .entry-body .line { margin-left: 0; }
  }

  /* ---- cases (work page) ---- */
  .case {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    min-width: 0;
  }
  .case .plate { aspect-ratio: var(--ar, 16 / 10); }
  .case:hover .plate { border-color: var(--chrome-70); color: var(--chrome-70); }
  .plate--std { --ar: 16 / 10; }
  /* the numeral straddles the plate's top edge, more of it on the picture than
     off: an outline over a light screenshot disappears, so it keeps a foot in
     the dark, but it no longer floats in the gap above the plate */
  .idx {
    position: absolute;
    top: -.36em;
    left: -.03em;
    font-weight: 900;
    font-size: clamp(3rem, 5.5vw, 5.5rem);
    line-height: 1;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1px var(--hair-2);
    pointer-events: none;
    user-select: none;
  }
  /* the metadata card sits over screenshots that may be light or dark; its own
     dark base keeps the overlay blend operating over a known ground either way */
  .card {
    position: absolute;
    background: rgba(8, 8, 8, .5);
    left: .8rem;
    bottom: .8rem;
    padding: .8rem .95rem .85rem;
    display: grid;
    gap: .28rem;
    min-width: 0;
    max-width: calc(100% - 1.6rem);
  }
  .card .meta { display: flex; justify-content: space-between; gap: 1.2rem; }
  .card .price { color: var(--ember); }
  .cap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem 1.5rem;
    align-items: baseline;
    margin-top: 1rem;
  }
  .cap h2 {
    grid-column: 1;
    grid-row: 1;
    font-weight: 800;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    letter-spacing: -.035em;
    line-height: 1;
    text-transform: uppercase;
  }
  .cap p {
    grid-column: 1;
    color: var(--chrome-70);
    font-size: .95rem;
    max-width: 44ch;
  }
  .cap .meta { grid-column: 2; grid-row: 1 / span 2; text-align: right; }

  /* ---- who we are: four answers, not four biographies ---- */
  .whowe {
    margin-top: clamp(2.4rem, 7vh, 4rem);
    border-top: 1px solid var(--hair-2);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(1.8rem, 4.5vw, 4rem);
  }
  .whowe > div {
    padding: clamp(1.3rem, 3.5vh, 2rem) 0;
    border-bottom: 1px solid var(--hair-1);
  }
  .whowe dt,
  .whowe summary {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--chrome);
  }
  .whowe dd,
  .whowe .fold > p {
    margin: .7rem 0 0;
    color: var(--chrome-70);
    font-size: 1rem;
    line-height: 1.6;
  }
  .whowe em { color: var(--ember); font-style: normal; }
  .whowe a { color: var(--chrome); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
  .whowe a:hover { border-color: var(--ember); }

  /* ---- the comparison ----
     A real table, because it is one: three columns, six rows, and a row header
     on every row so a screen reader announces what is being compared before it
     reads either answer. The studio column is the one that carries the hairline
     and the brighter text — the page is allowed to have a position. */
  .vs {
    width: 100%;
    margin-top: 1.8rem;
    border-collapse: collapse;
    text-align: left;
  }
  .vsr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .vs th, .vs td {
    padding: 1.05rem 1.2rem 1.1rem 0;
    border-bottom: 1px solid var(--hair-1);
    vertical-align: top;
    font-weight: 400;
  }
  .vs thead th {
    border-top: 1px solid var(--hair-2);
    border-bottom-color: var(--hair-2);
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--chrome-45);
    padding-bottom: .8rem;
  }
  .vs thead th b { color: var(--chrome); font-weight: 400; }
  .vs tbody th {
    width: 26%;
    color: var(--chrome);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.01em;
    line-height: 1.35;
  }
  .vs td { width: 37%; color: var(--chrome-45); font-size: .97rem; line-height: 1.55; }
  .vs td:last-child {
    color: var(--chrome-70);
    padding-left: 1.2rem;
    border-left: 1px solid var(--hair-1);
  }
  .vs thead th:last-child { padding-left: 1.2rem; border-left: 1px solid var(--hair-1); }
  .vs a { color: var(--chrome); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
  .vs a:hover { border-color: var(--ember); }
  .vs em { color: var(--ember); font-style: normal; }

  /* ---- the four things handed over ---- */
  .handover {
    margin-top: 1.1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.4rem;
    border-top: 1px solid var(--hair-1);
  }
  .handover li {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 0 .5rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--hair-1);
    color: var(--chrome-70);
    font-size: .95rem;
  }
  .handover b {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--mono);
    font-weight: 400;
    font-size: .66rem;
    letter-spacing: .14em;
    color: var(--chrome-45);
    padding-top: .2rem;
  }
  .handover span { grid-column: 2; grid-row: 1; }

  /* ---- the developer's drawer ---- */
  .bonnet { margin-top: clamp(2rem, 6vh, 3.2rem); border-top: 1px solid var(--hair-1); }
  .bonnet summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 0;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--chrome-45);
    transition: color .25s;
  }
  .bonnet summary::-webkit-details-marker { display: none; }
  .bonnet summary::before {
    content: "+";
    color: var(--ember);
    font-size: .9rem;
    line-height: 1;
  }
  .bonnet[open] summary::before { content: "\2212"; }
  .bonnet summary:hover { color: var(--chrome); }
  .bonnet-in { padding-bottom: 1.4rem; }
  .bonnet-in .check { margin-top: 1.2rem; }

  /* ---- the rig ----
     Four marks, the readout, four marks. The readout is the middle of the band
     in the literal sense the brief asked for, and it is the only place any
     description is printed — eight of them stacked would be the wall this
     section was built to stop being. */
  .rig {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 0 clamp(1.4rem, 3.5vw, 3rem);
    align-items: stretch;
    border-top: 1px solid var(--hair-2);
    border-bottom: 1px solid var(--hair-2);
  }
  .rig-rail { display: grid; align-content: start; }
  .rig-rail--a { grid-column: 1; grid-row: 1; }
  .rig-rail--b { grid-column: 3; grid-row: 1; }
  .rig-rail li { display: grid; }
  .rig-tile {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hair-1);
    cursor: pointer;
    padding: 1.5rem .4rem;
    min-height: 4.6rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    transition: border-color .35s var(--ease);
  }
  .rig-rail--b .rig-tile { justify-content: flex-end; }
  .rig-rail li:last-child .rig-tile { border-bottom: 0; }
  /* the mark is stood down until it is asked about, and the ember rule is what
     says which one the readout is currently showing */
  /* brightness as well as opacity: three of these marks are pure white and three
     are strongly coloured, and opacity alone leaves the white ones reading as
     lit while the coloured ones go grey */
  /* Stood down, not hidden. At .34 the second rail read as four smudges, and a
     phone has no hover to bring a mark up before it is tapped: every mark has
     to be legible at rest, in grey, with the chosen one the only one in colour. */
  .rig-tile .vmark {
    opacity: .6;
    filter: grayscale(1) brightness(.9);
    transition: opacity .35s var(--ease), filter .35s var(--ease);
  }
  .rig-tile:hover .vmark,
  .rig-tile:focus-visible .vmark { opacity: .92; filter: grayscale(.3) brightness(.96); }
  .rig-tile[aria-pressed="true"] .vmark { opacity: 1; filter: none; }
  .rig-tile::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--ember);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s var(--ease);
  }
  .rig-rail--b .rig-tile::after { transform-origin: right center; }
  .rig-tile[aria-pressed="true"]::after { transform: scaleX(1); }
  .rig-tile:focus-visible { outline: 1px solid var(--ember); outline-offset: -2px; }

  .rig-out {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    padding: clamp(1.8rem, 5vh, 3rem) clamp(1rem, 2.5vw, 2rem);
    border-left: 1px solid var(--hair-1);
    border-right: 1px solid var(--hair-1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 18.4rem;
  }
  /* the word is drawn as points on this canvas; .rig-name carries the same text
     for anything that reads the page rather than looks at it */
  .rig-canvas {
    display: block;
    width: 100%;
    height: clamp(3.2rem, 7vw, 5rem);
  }
  .rig-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .rig-line {
    margin-top: 1.3rem;
    min-height: 3.1em;
    color: var(--chrome-70);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.5;
    font-variant-ligatures: none;
  }
  .rig-out .rig-when {
    margin-top: 1rem;
    min-height: 1.6em;
    color: var(--chrome-45);
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  /* the no-JS list keeps its own shape; the run-time note only reads as a label
     once the console has taken it over */
  .stack .rig-when { display: block; margin-top: .3rem; font-size: .82em; color: var(--chrome-45); }

  @media (max-width: 900px) {
    .whowe { grid-template-columns: minmax(0, 1fr); }
    .handover { grid-template-columns: minmax(0, 1fr); }
    .rig { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 0; }
    .rig-rail--a { grid-column: 1 / span 4; grid-row: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rig-rail--b { grid-column: 1 / span 4; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rig-rail li { border-right: 1px solid var(--hair-1); }
    .rig-rail li:last-child { border-right: 0; }
    .rig-rail--a .rig-tile,
    .rig-rail--b .rig-tile { justify-content: center; padding: 1.1rem .5rem; min-height: 4rem; }
    .rig-rail--a li:last-child .rig-tile { border-bottom: 1px solid var(--hair-1); }
    .rig-out {
      grid-column: 1 / span 4;
      grid-row: 3;
      border-left: 0;
      border-right: 0;
      border-top: 1px solid var(--hair-2);
      min-height: 0;
      padding-inline: 0;
    }
  }

  /* ---- work grid ----
     Eighteen plates on a uniform three-up would read as a tile wall, so the
     grid runs on twelve tracks and a nine-item unit that repeats exactly twice:
     7/5, then 4/4/4, then 5/7, then 6/6. Four different row rhythms, no plate
     ever sitting directly under one the same width. */
  .wgrid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(3rem, 8vh, 5rem) var(--gutter);
  }
  .wgrid > * { grid-column: span 4; }
  .wgrid > :nth-child(9n + 1) { grid-column: span 7; }
  .wgrid > :nth-child(9n + 2) { grid-column: span 5; }
  .wgrid > :nth-child(9n + 6) { grid-column: span 5; }
  .wgrid > :nth-child(9n + 7) { grid-column: span 7; }
  .wgrid > :nth-child(9n + 8),
  .wgrid > :nth-child(9n + 9) { grid-column: span 6; }
  @media (max-width: 1000px) {
    .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wgrid > *, .wgrid > :nth-child(9n + 1), .wgrid > :nth-child(9n + 2),
    .wgrid > :nth-child(9n + 6), .wgrid > :nth-child(9n + 7),
    .wgrid > :nth-child(9n + 8), .wgrid > :nth-child(9n + 9) { grid-column: span 1; }
  }
  @media (max-width: 620px) {
    .wgrid { grid-template-columns: minmax(0, 1fr); }
  }
  /* the plate says it is the real site, and the whole card is the link */
  .pc.live { color: var(--chrome-45); transition: color .35s var(--ease); }
  .case:hover .pc.live, .case:focus-visible .pc.live { color: var(--ember); }
  .case:focus-visible { outline: 2px solid var(--ember); outline-offset: 6px; }
  .case .plate-media { transition: filter .5s var(--ease); filter: saturate(.82); }
  .case:hover .plate-media { filter: saturate(1); }
  .work-end {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  /* ---- marquee ---- */
  .mq-wrap {
    overflow: hidden;
    border-block: 1px solid var(--hair-1);
    padding-block: 1.2rem;
  }
  .marquee {
    display: flex;
    width: max-content;
    animation: mq 22s linear infinite;
  }
  .mq-row {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 3rem;
    padding-right: 3rem;
  }
  .mq-row span {
    font-weight: 900;
    font-size: clamp(3rem, 7vw, 7.5rem);
    letter-spacing: -.05em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px var(--chrome-45);
  }
  .mq-row span.solid { color: var(--chrome); -webkit-text-stroke: 0; }
  .mq-row i { width: 9px; height: 9px; background: var(--ember); flex-shrink: 0; }
  @keyframes mq { to { transform: translateX(-50%); } }

  /* ---- studio ---- */
  /* two named principals, in the same hairline index the work uses */
  .people { border-top: 1px solid var(--hair-2); margin-top: 1.8rem; }
  .people li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .4rem 1.5rem;
    padding: clamp(1.3rem, 3.5vh, 2.2rem) 0;
    border-bottom: 1px solid var(--hair-1);
  }
  .people h2 {
    grid-column: 1;
    grid-row: 1;
    font-weight: 800;
    font-size: clamp(1.9rem, 4.6vw, 3.6rem);
    letter-spacing: -.04em;
    line-height: .95;
    text-transform: uppercase;
  }
  .people .meta { grid-column: 2; grid-row: 1; text-align: right; }
  /* names on the left, the sentence about everyone else on the right: the
     section used to run down one column with the other half of the page blank */
  .team-band {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 0 clamp(1.8rem, 4.5vw, 4rem);
    align-items: start;
  }
  .team-band .people { grid-column: 1; grid-row: 1; margin-top: 1.8rem; }
  .team-band .people h2 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
  .team-band .team { grid-column: 2; grid-row: 1; }
  .team { margin-top: 1.8rem; padding-top: clamp(1.3rem, 3.5vh, 2.2rem); }
  .team .sub { margin-top: 1.1rem; max-width: 52ch; }

  /* a claim, and under it the thing you can go and do to check the claim */
  .pillars { border-top: 1px solid var(--hair-2); margin-top: 1.8rem; }
  .pillars li {
    display: grid;
    grid-template-columns: minmax(0, .34fr) minmax(0, 1fr);
    gap: .2rem clamp(1.2rem, 3vw, 3rem);
    padding: clamp(1.5rem, 4vh, 2.4rem) 0;
    border-bottom: 1px solid var(--hair-1);
    align-items: start;
  }
  .pillars h2 {
    grid-column: 1;
    grid-row: 1 / span 3;
    font-weight: 800;
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    letter-spacing: -.035em;
    line-height: 1;
    text-transform: uppercase;
  }
  .pillars p { grid-column: 2; grid-row: 1; color: var(--chrome-70); font-size: 1.02rem; max-width: 58ch; }
  .pillars .check {
    grid-column: 2;
    grid-row: 2;
    margin-top: .9rem;
    font-family: var(--mono);
    font-size: .78rem;
    line-height: 1.6;
    color: var(--chrome-45);
    max-width: 62ch;
  }
  .pillars .check b {
    color: var(--ember);
    font-weight: 500;
    font-size: .82em;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-right: .7rem;
  }
  .pillars code { font-family: var(--mono); font-size: .95em; color: var(--chrome-70); }

  /* ---- the charter, on one plate ----
     Five claims composed together on the site's own blueprint plate, in the
     outlined-and-solid type the footer marquee and the work numerals use:
     every claim is on the plate at once, outlined, and the one chosen fills
     solid while its article — the argument, then the practice note — is read
     in the panel beside it. A set, chosen, not a sequence played: the stage
     under it runs four steps in order with a figure; this one holds still
     and waits for a hand. The script builds the claims from the articles'
     own headings, so without it the plate holds the document form — five
     articles, ruled apart, claim then argument then note — and nothing is
     lost; that form is what the first block of rules below describes. */
  .charter { margin-top: 1.6rem; }
  .charter-in {
    position: relative;
    z-index: 1;
    padding: clamp(2rem, 4.5vw, 3.4rem) clamp(1.2rem, 3vw, 3rem) clamp(1.8rem, 4vh, 3rem);
  }
  .charter-claims { display: none; }
  .article {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    align-items: start;
    padding: clamp(1.4rem, 3.4vh, 2.2rem) 0 clamp(1.6rem, 3.8vh, 2.4rem);
  }
  .article + .article { border-top: 1px solid var(--hair-1); }
  .article-text {
    grid-column: 1 / span 8;
    grid-row: 1;
    color: var(--chrome-70);
    text-wrap: pretty;
  }
  .article-text .meta { margin-bottom: .9rem; }
  .article-text h2 {
    display: block;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.6vw, 2.4rem);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: var(--chrome);
    max-width: 22ch;
    text-wrap: balance;
    font-variation-settings: "wdth" 92;
  }
  .article-text p:not(.meta) {
    display: block;
    margin-top: .8rem;
    font-weight: 500;
    font-size: clamp(1.02rem, 1.25vw, 1.2rem);
    line-height: 1.55;
    letter-spacing: -.01em;
    max-width: 58ch;
  }
  .article-note {
    grid-column: 10 / -1;
    grid-row: 1;
    padding-top: .75rem;
    border-top: 1px solid var(--hair-1);
  }
  .article-note .meta { margin-bottom: .55rem; }
  .article-note p:not(.meta) {
    font-family: var(--mono);
    font-size: .76rem;
    line-height: 1.6;
    color: var(--chrome-45);
  }

  /* the plate form, once the script has built the claims */
  .charter.is-plate .charter-in {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
  }
  .charter.is-plate .charter-claims { display: block; grid-column: 1; grid-row: 1; }
  .charter.is-plate .charter-articles {
    grid-column: 2;
    grid-row: 1;
    border-left: 1px solid var(--hair-1);
    padding-left: clamp(1.2rem, 3vw, 2.6rem);
    min-height: 100%;
  }
  .charter-claims button {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 0 .6rem;
    align-items: baseline;
    width: 100%;
    margin: 0;
    padding: .45rem 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.7vw, 2.6rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    font-variation-settings: "wdth" 92;
    text-wrap: balance;
    color: transparent;
    -webkit-text-stroke: 1px var(--chrome-45);
    transition: color .45s var(--ease), -webkit-text-stroke-color .45s var(--ease);
  }
  .charter-claims button + button { margin-top: clamp(.4rem, 1vh, .8rem); }
  .charter-claims button .meta {
    -webkit-text-stroke: 0;
    color: var(--chrome-45);
    font-weight: 400;
    transition: color .45s var(--ease);
  }
  .charter-claims button b { font-weight: inherit; }
  .charter-claims button:hover { -webkit-text-stroke-color: var(--chrome-70); }
  .charter-claims button[aria-selected="true"] { color: var(--chrome); -webkit-text-stroke-color: var(--chrome); cursor: default; }
  .charter-claims button[aria-selected="true"] .meta { color: var(--ember); }
  .charter-claims button:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
  .charter.is-plate .article { display: block; padding: 0; opacity: 0; transform: translateY(8px); }
  .charter.is-plate .article + .article { border-top: 0; }
  .charter.is-plate .article.is-on { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
  /* the claim is on the plate; the heading stays for the reader who is listening */
  .charter.is-plate .article-text h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .charter.is-plate .article-text p:not(.meta) { margin-top: 0; max-width: 46ch; font-size: clamp(1rem, 1.15vw, 1.1rem); }
  .charter.is-plate .article-note { margin-top: 1.3rem; max-width: 46ch; }
  html.rm .charter-claims button,
  html.rm .charter-claims button .meta,
  html.rm .charter.is-plate .article.is-on { transition: none; }

  /* Desktop: folds are invisible wrappers so the existing grids still hold.
     The phone restyles them into a tap-to-open index. */
  .pillars .fold,
  .pillars .fold > summary,
  .pillars .fold-body,
  .mods .fold,
  .mods .fold > summary,
  .who-team .fold,
  .whowe .fold { display: contents; }
  .nots .fold { display: contents; }
  .nots .fold > summary,
  .nots .fold > p { display: inline; }
  .nots .fold > p { margin: 0; }
  .nots .fold > p::before { content: " "; }
  .pillars .fold > summary,
  .mods .fold > summary,
  .who-team .fold > summary,
  .whowe .fold > summary,
  .nots .fold > summary {
    cursor: default;
    pointer-events: none;
    list-style: none;
  }
  .fx-row .fold > summary {
    cursor: default;
    pointer-events: none;
    list-style: none;
  }
  .fold--prose > summary,
  .fold--block > summary { display: none; }
  .fold > summary::-webkit-details-marker,
  .fold > summary::marker { display: none; content: none; }

  /* the stack reads as a key: short mono names, plain-language descriptions */
  .stack { border-top: 1px solid var(--hair-2); margin-top: 1.6rem; }
  .stack > div {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr);
    gap: .3rem clamp(1.2rem, 3vw, 2.4rem);
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--hair-1);
    align-items: baseline;
  }
  .vmark-note {
    margin-top: .7rem;
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .05em;
    text-transform: none;
    color: var(--chrome-45);
  }
  .vmark {
    display: block;
    height: 21px;
    width: auto;
    max-width: 100%;
    opacity: .82;
    transition: opacity .35s var(--ease);
  }
  /* Two of the five are icon-plus-wordmark lockups whose type is roughly half
     their box height. Matched on the height of the lettering rather than the
     height of the file, so all five read at one size. Uniform scale only —
     nothing here is redrawn, cropped or tinted. */
  .vmark--lockup { height: 34px; }
  .stack > div:hover .vmark { opacity: 1; }
  .stack dt {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--chrome);
  }
  .stack dd {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: var(--chrome-70);
    font-size: .98rem;
    max-width: 62ch;
  }

  /* ---- contact ---- */
  .contact {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    row-gap: 3rem;
  }
  /* Every child is placed. An auto-placed one next to placed siblings is how
     the note ended up 277px wide the last time this page was touched. */
  .brief-say { grid-column: 1 / span 4; grid-row: 1; }
  .form { grid-column: 6 / -1; grid-row: 1; }
  .note { grid-column: 6 / -1; grid-row: 2; }
  @media (max-width: 900px) {
    .brief-say { grid-column: 1 / -1; grid-row: 1; }
    .form { grid-column: 1 / -1; grid-row: 2; }
    .note { grid-column: 1 / -1; grid-row: 3; }
  }
  /* a statement, not a display line: it shares its row with a form */
  .brief-say .statement { font-size: clamp(1.25rem, 2vw, 1.75rem); max-width: 18ch; }
  .brief-list { margin-top: 1.6rem; border-top: 1px solid var(--hair-1); }
  .brief-list li {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0 .6rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--hair-1);
    color: var(--chrome-70);
    font-size: .97rem;
    line-height: 1.55;
  }
  .brief-list b {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--mono);
    font-weight: 400;
    font-size: .68rem;
    letter-spacing: .14em;
    color: var(--chrome-45);
    padding-top: .22rem;
  }
  .brief-list span { grid-column: 2; grid-row: 1; }
  .brief-rate {
    margin-top: 1.5rem;
    font-family: var(--mono);
    font-size: .76rem;
    line-height: 1.68;
    color: var(--chrome-45);
  }
  .brief-rate b { color: var(--chrome); font-weight: 500; }
  .brief-rate a { color: var(--chrome-70); border-bottom: 1px solid var(--hair-2); text-decoration: none; }
  .brief-rate a:hover { color: var(--chrome); border-color: var(--ember); }

  /* The three ways in, across the whole measure rather than stacked in a
     right-hand rail nobody reads first. */
  .reach {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--gutter);
    margin-top: 1.8rem;
    border-top: 1px solid var(--hair-2);
  }
  .reach li { padding: clamp(1.4rem, 3.5vh, 2.2rem) 0 0; }
  .reach-big {
    display: block;
    margin-top: .7rem;
    font-weight: 700;
    font-size: clamp(1.05rem, 1.85vw, 1.5rem);
    letter-spacing: -.02em;
    line-height: 1.15;
    text-decoration: none;
    overflow-wrap: anywhere;
    border-bottom: 1px solid transparent;
    transition: border-color .35s var(--ease);
  }
  .reach-big:hover { border-bottom-color: var(--ember); }
  .reach-sub { margin-top: .6rem; color: var(--chrome-45); font-size: .93rem; }
  @media (max-width: 760px) {
    .reach { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .reach li { border-bottom: 1px solid var(--hair-1); padding-bottom: 1.2rem; }
  }
  .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gutter); }
  @media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } }
  .f { display: grid; gap: .3rem; padding-top: 1.3rem; }
  .f label { transition: color .25s; }
  .f input, .f select, .f textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--hair-2);
    border-radius: 0;
    background: transparent;
    padding: .75rem 0;
    font-size: 1rem;
    color: var(--chrome);
    transition: border-color .25s;
  }
  .f textarea { min-height: 7rem; resize: vertical; }
  .f select {
    appearance: none;
    padding-right: 1.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23e1e1e1' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .2rem center;
    background-size: 12px;
  }
  .f select option { background: var(--bg-2); color: var(--chrome); }
  .f :is(input, select, textarea):focus { outline: none; border-bottom-color: var(--ember); }
  .f:focus-within label { color: var(--ember); }
  .f-foot { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 2rem; }
  .note { padding-top: 1.3rem; }
  .note:focus { outline: none; }

  /* ---- footer ---- */
  .foot {
    border-top: 1px solid var(--hair-1);
    margin-top: auto;
    padding: 1.6rem 0 calc(2.2rem + env(safe-area-inset-bottom));
    background: rgba(8, 8, 8, .9);
  }
  .foot .wrap { display: grid; gap: 1.3rem; }
  .foot-nav { display: flex; flex-wrap: wrap; gap: 0 clamp(1.4rem, 4vw, 2.6rem); }
  .foot-nav a {
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--chrome-70);
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    transition: color .25s;
  }
  .foot-nav a[aria-current] { color: var(--chrome); }
  .foot-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 2rem;
    border-top: 1px solid var(--hair-1);
    padding-top: .3rem;
  }
  .foot-meta > * {
    margin: 0;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
  .foot-meta a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .foot a { text-decoration: none; }
  .foot a:hover { color: var(--chrome); }
}

@layer states {
  html.rm *, html.rm *::before, html.rm *::after {
    transition-duration: 0s !important;
    animation: none !important;
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .gpanel::before, .bar-glass { background: rgba(14, 14, 14, .88); mix-blend-mode: normal; }
    .sec--rule { background: rgba(8, 8, 8, .88); }
  }
}

/* ============================================================================
   Background transitions between pages — see js/bg.js.
   ========================================================================== */

@layer base {
  /* <main> is swapped in place, so it fades out and back in around the swap.
     The opacity lives on a class and never on the element at rest: an element
     with opacity < 1 is a stacking context, and the glass inside <main> can only
     blend with the canvas from the root one. */
  main { transition: opacity .3s var(--ease), transform .3s var(--ease); }
  html.bg-out main { opacity: 0; transform: translateY(-14px); }
  /* once GSAP drives the plate, the CSS transition must not fight it */
  html.js-nav main { transition: none; }

  /* the still/live dim is a page property, so it has to cross-fade too */
  .field { transition: opacity .6s var(--ease); }

  /* the frozen copy of the previous page's field, dissolved or torn away */
  .field--ghost { background: transparent; }
}

@layer components {
  /* ---- D · FILM: a looping plate instead of the field ---- */
  .bg-film {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg);
  }
  .bg-film-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease), filter 900ms var(--ease),
                object-position 900ms var(--ease);
  }
  .bg-film-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 8, 8, .74), rgba(8, 8, 8, .52) 45%, rgba(8, 8, 8, .88));
  }
  html.has-bg-film .field { display: none; }
}

@layer states {
  html.rm main { transition: none; }
  html.rm .bg-film-media { transition: none; }
}

@layer components {
  /* transition-only clips: present so they decode, never seen */
  .bg-clip {
    position: fixed;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
}

/* ============================================================================
   Services — a ledger, not a bento of plan cards. Every engagement is one ruled
   row: index, name, what it is, what it carries, and the number, set in the same
   hairline index the home page uses for the work.
   ========================================================================== */

@layer components {
  .ledger { border-top: 1px solid var(--hair-2); margin-top: 1.8rem; }
  .rate {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 0 clamp(1.2rem, 3vw, 3rem);
    padding: clamp(1.8rem, 4.5vh, 3rem) 0;
    border-bottom: 1px solid var(--hair-1);
    align-items: start;
  }
  .rate > .n { grid-column: 1; grid-row: 1 / span 2; padding-top: 1.1rem; }
  /* The figure is the display type on this page. Two small real numbers set
     large read better than three invented large ones did, and the row does not
     care how many of them there are or how many digits each one has. */
  .rate-fig {
    grid-column: 2;
    grid-row: 1;
    font-weight: 800;
    font-size: clamp(3.2rem, 7.4vw, 8rem);
    letter-spacing: -.045em;
    line-height: .88;
    white-space: nowrap;
    font-variation-settings: "wdth" 92;
  }
  .rate-fig .cur {
    color: var(--ember);
    font-size: .38em;
    letter-spacing: 0;
    vertical-align: .95em;
    margin-right: .05em;
  }
  .rate h2 {
    grid-column: 2;
    grid-row: 2;
    margin-top: .9rem;
    font-family: var(--mono);
    font-weight: 500;
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--chrome-70);
  }
  .rate--promo h2::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--ember);
    margin-right: .6rem;
    vertical-align: .12em;
  }
  /* auto-fit: one term, two or four all lay out without a rule change */
  .terms {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1.5rem var(--gutter);
    align-content: start;
    padding-top: 1rem;
  }
  .terms dd { margin-top: .55rem; font-size: 1.05rem; letter-spacing: -.01em; }
  .rates-note,
  .stack-note,
  .policy-note {
    margin-top: 1.7rem;
    color: var(--chrome-70);
    font-size: 1rem;
    line-height: 1.5;
    max-width: 60ch;
    text-wrap: pretty;
  }

  /* Two services that are being built. The status is a bordered ember chip
     rather than a word in the copy, because article 04 of the charter promises
     they are marked wherever they appear and a promise like that has to be
     visible before it is read. */
  .devs { border-top: 1px solid var(--hair-2); margin-top: 1.8rem; }
  .devs > li {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 1.2rem clamp(1.2rem, 3vw, 3rem);
    padding: clamp(1.8rem, 4.5vh, 2.8rem) 0;
    border-bottom: 1px solid var(--hair-1);
    align-items: start;
  }
  .dev-tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .32rem .6rem;
    border: 1px solid rgba(255, 42, 0, .45);
    color: var(--ember);
    font-family: var(--mono);
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .dev-tag::before { content: ""; width: 5px; height: 5px; background: var(--ember); flex-shrink: 0; }
  /* Ember is reserved for the exception the charter promises is marked, so a
     live service gets the same chip in chrome and the eye still finds the one
     that is not published. */
  .dev-tag--live { border-color: var(--hair-2); color: var(--chrome-70); }
  .dev-tag--live::before { background: var(--chrome-45); }

  .devs h2 {
    margin-top: 1rem;
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    letter-spacing: -.04em;
    line-height: 1;
    text-transform: uppercase;
  }
  .dev-line {
    font-weight: 800;
    font-size: clamp(1.3rem, 2.2vw, 1.9rem);
    letter-spacing: -.03em;
    line-height: 1.08;
    max-width: 22ch;
    text-wrap: balance;
  }
  .dev-focus { margin-top: .85rem; color: var(--chrome-70); font-size: 1.02rem; max-width: 54ch; }
  .dev-caps { margin-top: 1.25rem; display: grid; gap: .5rem; }
  .dev-caps li {
    display: grid;
    grid-template-columns: 5px minmax(0, 1fr);
    gap: .6rem;
    align-items: baseline;
    font-size: .88rem;
    color: var(--chrome-70);
  }
  .dev-caps li::before { content: ""; width: 5px; height: 5px; background: var(--hair-2); transform: translateY(-.15em); }
  .dev-note {
    margin-top: 1.15rem;
    font-family: var(--mono);
    font-size: .74rem;
    line-height: 1.6;
    color: var(--chrome-45);
    max-width: 52ch;
  }

  /* what moves the number — a ruled table, read down the left. The right-hand
     figure column is the slot the service-charge chart drops into, and it only
     exists on a row that carries a figure: six rows that all read "Quoted" were
     a column of decoration, so the word is said once in the lead line instead. */
  .mods { border-top: 1px solid var(--hair-2); margin-top: 1.6rem; }
  .mods li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .3rem 1.5rem;
    align-items: baseline;
    padding: .95rem 0;
    border-bottom: 1px solid var(--hair-1);
  }
  .mods li:has(.fig) { grid-template-columns: minmax(0, 1fr) auto; }
  .mods h2 { grid-column: 1; font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; }
  .mods p { grid-column: 1; color: var(--chrome-70); font-size: .92rem; max-width: 52ch; }
  .mods .fig {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--chrome-45);
    white-space: nowrap;
  }

  /* what is always in the number */
  .carries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); margin-top: 1.6rem; }
  .carries li {
    padding: .85rem 0;
    border-top: 1px solid var(--hair-1);
    display: grid;
    grid-template-columns: 5px minmax(0, 1fr);
    gap: .7rem;
    align-items: baseline;
  }
  .carries li::before { content: ""; width: 5px; height: 5px; background: var(--ember); transform: translateY(-.15em); }
  .carries span { font-size: .95rem; color: var(--chrome-70); }

  .nots { margin-top: 1.4rem; }
  .nots li { padding: 1rem 0; border-bottom: 1px solid var(--hair-1); font-size: 1rem; color: var(--chrome-70); }
  .nots li:first-child { border-top: 1px solid var(--hair-1); }
  .nots b { font-weight: 700; color: var(--chrome); }
}

/* ============================================================================
   The mobile composition (<= 760px).
   Not the desktop layout narrowed. The bar gives its links up to a menu that is
   a page in its own right; the hero goes left and bottom-weighted with a ruled
   stat rail; the home index gives each case the whole column and lets the name
   run big under its own plate; the work plates hand their metadata to a solid
   bar across the foot instead of five backdrop-filtered cards.
   ========================================================================== */

@layer components {
  .menu-btn {
    display: none;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding-left: .2rem;
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--chrome);
    background: none;
    border: 0;
    cursor: pointer;
  }
  .menu-btn i { width: 9px; height: 9px; background: var(--ember); flex-shrink: 0; }

  .menu {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(8, 8, 8, .93);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    color: var(--chrome);
    /* six pages and a foot outgrow a short phone: the menu scrolls rather
       than clipping Privacy or the effects switch off the bottom */
    overflow: hidden auto;
  }
  .menu::backdrop { background: rgba(8, 8, 8, .8); }
  .menu-in {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0 var(--gutter) calc(1.4rem + env(safe-area-inset-bottom));
  }
  /* the top row stands exactly where the bar was, so Close lands under the thumb
     that opened it */
  .menu-top {
    flex: 0 0 auto;
    height: var(--bar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .menu[open] .menu-in { animation: menu-in .32s var(--ease) both; }
  @keyframes menu-in { from { transform: translateY(16px); } }
  .menu-nav { margin-top: auto; border-top: 1px solid var(--hair-1); }
  .menu-nav a {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    align-items: baseline;
    padding: .95rem 0 1.05rem;
    border-bottom: 1px solid var(--hair-1);
    text-decoration: none;
    color: inherit;
  }
  .menu-nav b {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--mono);
    font-weight: 400;
    font-size: .6rem;
    letter-spacing: .14em;
    color: var(--chrome-45);
  }
  .menu-nav span {
    grid-column: 2;
    grid-row: 1;
    font-weight: 800;
    font-size: clamp(2.1rem, 11.5vw, 3.3rem);
    letter-spacing: -.045em;
    line-height: .92;
    text-transform: uppercase;
  }
  .menu-nav small {
    grid-column: 2;
    grid-row: 2;
    margin-top: .4rem;
    font-family: var(--mono);
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--chrome-45);
  }
  .menu-nav a[aria-current] b { color: var(--ember); }
  .menu-nav a[aria-current] small::before { content: "\25A0\00a0\00a0"; color: var(--ember); }
  .menu-say { padding-top: clamp(1.2rem, 5vh, 2.6rem); }
  .menu-say .statement { margin-top: .9rem; }
  .menu-foot { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding-top: 1.4rem; }
  .menu-foot .fx-btn { margin-top: .5rem; }
  .menu-foot a { text-decoration: none; }
  html.rm .menu[open] .menu-in { animation: none; }
}

/* Between the two: the charter's margin column needs room to be worth having,
   and the team band needs both of its columns to stay readable. */
@media (max-width: 1080px) {
  .article-text { grid-column: 1 / -1; max-width: 62ch; }
  .article-note { grid-column: 1 / -1; grid-row: 2; margin-top: 1rem; max-width: 62ch; }
  .charter.is-plate .charter-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .charter-claims button { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
  .team-band { grid-template-columns: minmax(0, 1fr); }
  .team-band .people, .team-band .team { grid-column: 1; }
  .team-band .people { grid-row: 1; }
  .team-band .team { grid-row: 2; }
}

@media (max-width: 760px) {
  /* ---- chrome ---- */
  .bar .nav { display: none; }
  html.no-dialog .bar .nav { display: flex; }
  .menu-btn { display: inline-flex; }
  html.no-dialog .menu-btn { display: none; }

  .sec { padding-block: clamp(1.8rem, 6vh, 3.4rem); }
  .page-head { padding: calc(var(--bar) + 1.6rem) 0 1.2rem; row-gap: .7rem; }
  .page-head h1 { font-size: clamp(2.5rem, 13vw, 3.6rem); }
  .page-head .sub { font-size: .98rem; }

  /* ---- folds: a claim, then the rest on tap ---- */
  .fold > summary {
    list-style: none;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    padding-right: 1.6rem;
    min-height: 2.75rem;
  }
  .fold > summary::-webkit-details-marker,
  .fold > summary::marker { display: none; content: none; }
  .fold > summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0.15em;
    color: var(--ember);
    font-family: var(--mono);
    font-size: .9rem;
    line-height: 1;
  }
  .fold[open] > summary::after { content: "\2212"; }
  .fold > summary:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
  .fold--prose { margin-top: 1.1rem; }
  .fold--prose > summary {
    display: block;
    color: var(--chrome-70);
    font-size: 1rem;
    line-height: 1.5;
    padding: .4rem 1.6rem .4rem 0;
  }
  /* Opened: the body already has the first sentence, so the summary
     collapses to the minus control instead of repeating it. */
  .fold--prose[open] > summary {
    color: transparent;
    font-size: 0;
    min-height: 1.4rem;
    padding: .15rem 1.6rem .15rem 0;
  }
  .fold--block { margin-top: 1rem; border-top: 1px solid var(--hair-1); }
  .fold--block > summary {
    display: block;
    padding: 1rem 1.6rem 1rem 0;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--chrome-45);
  }
  .who-team .fold > summary,
  .whowe .fold > summary,
  .fx-row .fold > summary {
    display: block;
    padding: .85rem 1.6rem .85rem 0;
  }
  .who-team .fold > p,
  .whowe .fold > p,
  .fx-row .fold > .fx-say { padding-bottom: .4rem; }
  .pillars .fold,
  .mods .fold { display: block; }
  .pillars .fold > summary,
  .mods .fold > summary { display: block; padding: 0 1.6rem 0 0; }
  .pillars .fold-body { padding-top: .7rem; }
  .mods .fold > p { padding: .45rem 0 .2rem; }
  .who-beat .who-line { display: none; }
  .who-beat.is-on .who-line { display: block; }
  .nots .fold { display: block; }
  .nots .fold > summary { display: block; padding: .15rem 1.6rem .15rem 0; min-height: 2.4rem; }
  .nots .fold > p { display: block; padding: .35rem 0 .15rem; }
  .nots .fold > p::before { content: none; }
  .fold--block .sub { margin-top: .85rem; }

  /* ---- hero: type sits in the remaining dark; the field owns the crop ---- */
  .hero {
    height: calc(100svh - var(--bar));
    min-height: 28rem;
    justify-items: stretch;
    text-align: left;
    padding: 0;
  }
  .hero-copy {
    top: clamp(1.1rem, 3.5vh, 2rem);
    bottom: auto;
    left: var(--gutter);
    right: var(--gutter);
    max-width: none;
    margin-top: 0;
    justify-items: start;
  }
  .wordmark { font-size: clamp(2.5rem, 14.6vw, 3.9rem); margin: .4rem 0 .6rem; white-space: normal; }
  .hero-line { font-size: 1rem; max-width: 20ch; }
  .hero-rhythm { left: var(--gutter); right: var(--gutter); bottom: 4.4rem; }
  .hero-step { font-size: clamp(1.1rem, 5vw, 1.45rem); max-width: 16ch; }
  .hero-facts { display: none; }
  .hero-act { width: 100%; gap: .55rem 1.2rem; margin-top: 1.4rem; }
  .hero-act .btn { flex: 0 1 auto; min-width: 0; padding: .7rem .95rem; font-size: .6rem; letter-spacing: .1em; }
  .hero-act .more { font-size: .6rem; letter-spacing: .1em; }

  /* ---- home index: the plate takes the column, the name runs under it ---- */
  .entry-link, .entry:nth-child(even) .entry-link {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 1.3rem 0 1.7rem;
  }
  .entry-body, .entry:nth-child(even) .entry-body { display: contents; }
  .entry .fig-plate, .entry:nth-child(even) .fig-plate {
    grid-area: auto;
    width: 100%;
    order: 2;
    margin-bottom: .95rem;
  }
  .entry-body .meta { order: 1; margin-bottom: .75rem; text-align: left; }
  .entry-body h2 { order: 3; font-size: clamp(2.1rem, 9.6vw, 3rem); margin: 0 0 .45rem; text-align: left; }
  .entry-body .line, .entry:nth-child(even) .entry-body .line {
    order: 4;
    margin-left: 0;
    text-align: left;
    max-width: none;
  }

  /* ---- studio: the charter on a phone. The five claims listed, solid rather
     than outlined (a one-pixel outline at this size is fuzz), the chosen one
     lit; the article under the list with a rule between. Without the script
     the document form stacks with its own spacing, not the desktop's. ---- */
  .charter { margin-top: 1.2rem; }
  .charter-in { padding: 1.7rem 1rem 1.5rem; }
  .article { display: block; padding: 1.4rem 0 1.5rem; }
  .article-text { max-width: none; }
  .article-text h2 { font-size: clamp(1.3rem, 5.6vw, 1.6rem); line-height: 1.1; max-width: none; }
  .article-text p:not(.meta) { margin-top: .6rem; font-size: .98rem; line-height: 1.5; max-width: none; }
  .article-note { margin-top: .95rem; max-width: none; padding-top: .65rem; }
  .charter.is-plate .charter-in { display: block; }
  .charter.is-plate .charter-articles {
    border-left: 0;
    padding-left: 0;
    min-height: 0;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--hair-1);
  }
  .charter-claims button {
    grid-template-columns: 1.9rem minmax(0, 1fr);
    min-height: 2.75rem;
    padding: .55rem 0;
    font-size: clamp(1.15rem, 5vw, 1.4rem);
    color: var(--chrome-45);
    -webkit-text-stroke: 0;
  }
  .charter-claims button + button { margin-top: 0; border-top: 1px solid var(--hair-0); }
  .charter-claims button:hover { color: var(--chrome-70); }
  .charter-claims button[aria-selected="true"] { color: var(--chrome); }
  .charter.is-plate .article-text p:not(.meta) { max-width: none; font-size: .98rem; }
  .charter.is-plate .article-note { max-width: none; margin-top: 1rem; }

  .people li { grid-template-columns: minmax(0, 1fr); }
  .people h2 { grid-column: 1; grid-row: 1; }
  .people .meta { grid-column: 1; grid-row: 2; margin-top: .45rem; text-align: left; }

  .pillars li { grid-template-columns: minmax(0, 1fr); }
  .pillars h2 { grid-column: 1; grid-row: 1; margin-bottom: .7rem; }
  .pillars p { grid-column: 1; grid-row: 2; max-width: none; }
  .pillars .check { grid-column: 1; grid-row: 3; max-width: none; }
  .csp, .src { grid-column: 1; grid-row: 4; }

  .stack > div { grid-template-columns: minmax(0, 1fr); padding: 1rem 0 1.1rem; }
  /* Three columns will not fit a phone, so each row becomes its own stacked
     card: the thing being compared, then the two answers, each labelled. */
  .vs, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: auto; }
  .vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vs tbody tr { padding: 1.2rem 0 1.1rem; border-bottom: 1px solid var(--hair-1); }
  .vs tbody tr:first-child { border-top: 1px solid var(--hair-2); }
  .vs th, .vs td { border-bottom: 0; padding: 0; }
  .vs tbody th { font-size: 1.05rem; }
  .vs td { margin-top: .8rem; padding-left: 0; }
  .vs td::before {
    display: block;
    margin-bottom: .25rem;
    font-family: var(--mono);
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--chrome-45);
  }
  .vs td:nth-of-type(1)::before { content: "One freelancer"; }
  .vs td:nth-of-type(2)::before { content: "Thornbury"; color: var(--ember); }
  .vs td:last-child { border-left: 0; padding-left: 0; }
  .vmark { height: 19px; }
  .vmark--lockup { height: 31px; }
  .stack dt { grid-column: 1; grid-row: 1; }
  .stack dd { grid-column: 1; grid-row: 2; margin-top: .45rem; max-width: none; }

  /* ---- services ---- */
  .rate {
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0 .9rem;
    padding: 1.6rem 0 1.8rem;
  }
  .rate > .n { grid-column: 1; grid-row: 1; padding-top: .7rem; }
  .rate-fig { grid-column: 2; grid-row: 1; font-size: clamp(4rem, 22vw, 6rem); }
  .rate h2 { grid-column: 2; grid-row: 2; margin-top: .7rem; }
  /* on a phone the terms stop being columns and become a ruled table */
  .terms {
    grid-column: 2;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 1.2rem;
    padding-top: 0;
    border-top: 1px solid var(--hair-1);
  }
  .terms > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .62rem 0;
    border-bottom: 1px solid var(--hair-1);
  }
  .terms dd { margin-top: 0; font-size: .98rem; text-align: right; }
  .rates-note,
  .stack-note,
  .policy-note { font-size: .98rem; max-width: none; }
  .carries { grid-template-columns: 1fr; }
  .devs > li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .devs h2 { margin-top: .85rem; font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .dev-body { margin-top: 1.3rem; }
  .dev-line { max-width: none; font-size: clamp(1.25rem, 6vw, 1.6rem); }
  .dev-focus, .dev-note { max-width: none; }
  .more { min-height: 2.75rem; }
  .menu-foot a { padding-block: .35rem; }
}

@media (max-width: 620px) {
  /* ---- work: the metadata leaves the glass card for a bar across the plate ---- */
  .case .card {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    gap: .34rem;
    padding: .7rem .85rem .78rem;
    background: rgba(8, 8, 8, .74);
    border-top: 1px solid var(--hair-1);
  }
  .case .card::before { display: none; }
  .case .card::after { border: 0; background: none; box-shadow: none; }
  .case .card .meta { gap: 1rem; }
  .idx { font-size: 3.4rem; top: -.32em; }
}

@media (max-width: 560px) {
  .f-foot .btn { width: 100%; }
  .mods li { grid-template-columns: minmax(0, 1fr); }
  .mods .fig { grid-column: 1; grid-row: auto; margin-top: .35rem; }
}

/* ============================================================================
   Showing rather than stating. Three of this site's own claims are checkable,
   so they are performed on the page instead of described: a switch that throws,
   the live policy, and the stylesheet read out of itself. Plus the hover and
   scroll states that make the rest of it answer back.
   ========================================================================== */

@layer components {
  /* ---- the effects switch ---- */
  .fx-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.75rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--chrome-70);
    transition: color .25s;
  }
  .fx-btn:hover { color: var(--chrome); }
  /* the track is the switch: it moves, and when the switch is off it stops
     moving like everything else, which is the point being made */
  .fx-btn i {
    position: relative;
    width: 30px;
    height: 14px;
    border: 1px solid var(--hair-2);
    flex-shrink: 0;
    transition: border-color .3s var(--ease), background .3s var(--ease);
  }
  .fx-btn i::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 10px;
    height: 10px;
    background: var(--ember);
    transition: transform .32s var(--ease), background .32s var(--ease);
  }
  .fx-btn[aria-pressed="true"] i { border-color: rgba(255, 42, 0, .5); }
  .fx-btn[aria-pressed="true"] i::after { transform: translateX(14px); }
  .fx-btn[aria-pressed="false"] i::after { background: var(--chrome-45); }
  .fx-state { color: var(--chrome); min-width: 2.2em; }

  /* ---- the switch as its own row ----
     It used to sit inside article 03's paragraph, where a control in the middle
     of a sentence read as a developer's leftover. It is a row of the same index
     now, after the last article: a label, one sentence, and a switch big enough
     to be the point of the row. */
  .fx-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    padding: clamp(1.5rem, 4vh, 2.2rem) 0;
    border-bottom: 1px solid var(--hair-1);
  }
  .fx-row > div { grid-column: 1; grid-row: 1; }
  .fx-row .fx-btn { grid-column: 2; grid-row: 1; }
  .fx-say {
    margin-top: .7rem;
    color: var(--chrome-70);
    font-size: 1.02rem;
    line-height: 1.5;
    max-width: 52ch;
    text-wrap: pretty;
  }
  .fx-btn--big { gap: .9rem; font-size: .72rem; }
  .fx-btn--big i { width: 46px; height: 22px; }
  .fx-btn--big i::after { width: 16px; height: 16px; top: 2px; left: 2px; }
  .fx-btn--big[aria-pressed="true"] i::after { transform: translateX(24px); }
  @media (max-width: 760px) {
    .fx-row { grid-template-columns: minmax(0, 1fr); }
    .fx-row > div { grid-column: 1; grid-row: 1; }
    .fx-row .fx-btn { grid-column: 1; grid-row: 2; }
  }

  /* ---- the live policy ---- */
  .csp {
    grid-column: 2;
    grid-row: 3;
    margin-top: 1.1rem;
    border-top: 1px solid var(--hair-1);
    font-family: var(--mono);
    font-size: .72rem;
    line-height: 1.5;
  }
  .csp > div {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr);
    gap: .2rem 1.2rem;
    padding: .42rem 0;
    border-bottom: 1px solid var(--hair-0);
  }
  .csp dt { grid-column: 1; grid-row: 1; color: var(--chrome); }
  .csp dd { grid-column: 2; grid-row: 1; margin: 0; color: var(--chrome-45); overflow-wrap: anywhere; }

  /* ---- the stylesheet, read out of itself ---- */
  .src { grid-column: 2; grid-row: 3; margin-top: 1.1rem; }
  .src pre {
    margin: 0;
    padding: .95rem 1.1rem;
    border: 1px solid var(--hair-1);
    background: rgba(8, 8, 8, .55);
    font-family: var(--mono);
    font-size: .7rem;
    line-height: 1.62;
    color: var(--chrome-45);
    overflow-x: auto;
    white-space: pre;
    tab-size: 2;
  }
  .src-stat {
    margin-top: .65rem;
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--chrome-45);
  }

  /* ---- a line that was doing paragraph work ---- */
  .pull { margin-top: clamp(1.8rem, 5vh, 3rem); }
  .pull-line {
    font-weight: 700;
    font-size: clamp(1.5rem, 3.4vw, 2.9rem);
    letter-spacing: -.03em;
    line-height: 1.06;
    max-width: 24ch;
    text-wrap: balance;
  }
  .pull-sub {
    margin-top: 1.1rem;
    color: var(--chrome-70);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 52ch;
    text-wrap: pretty;
  }

  /* ---- hover states that move rather than recolour ---- */
  /* a rule drawn under the link, not a colour swap */
  .nav a::after,
  .foot-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .6rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .38s var(--ease);
  }
  .foot-nav a { position: relative; }
  .nav a:hover::after,
  .foot-nav a:hover::after { transform: scaleX(1); }

  /* the home figures lift out of the index. No transform on the work plates:
     the glass card lives inside one, and a transformed ancestor would take its
     blend away — see the stacking-context rule above. */
  .fig-plate { transition: border-color .4s var(--ease), color .4s var(--ease), transform .55s var(--ease); }
  .entry-link:hover .fig-plate,
  .entry-link:focus-visible .fig-plate { transform: translateY(-7px); }

  /* the corner ticks open on approach, on every plate */
  .plate::before, .plate::after,
  .corners::before, .corners::after { transition: width .45s var(--ease), height .45s var(--ease); }
  .entry-link:hover .plate::before, .entry-link:hover .plate::after,
  .entry-link:hover .corners::before, .entry-link:hover .corners::after,
  .case:hover .plate::before, .case:hover .plate::after,
  .case:hover .corners::before, .case:hover .corners::after { width: 26px; height: 26px; }

  /* the outlined index numeral is outside the plate, so it can move */
  .idx { transition: transform .5s var(--ease), -webkit-text-stroke-color .5s var(--ease); }
  .case:hover .idx { transform: translateY(-5px); -webkit-text-stroke-color: var(--chrome-45); }

  .btn svg { transition: transform .35s var(--ease); }
  .btn:hover svg { transform: translateX(4px); }

  /* touch feedback for the one nav that has no hover */
  .menu-nav a { transition: padding-left .3s var(--ease); }
  .menu-nav a:active { padding-left: .45rem; }
}

@media (max-width: 760px) {
  .csp > div { grid-template-columns: minmax(0, 1fr); }
  .csp dt { grid-column: 1; grid-row: 1; }
  .csp dd { grid-column: 1; grid-row: 2; }
  .src pre { font-size: .64rem; padding: .8rem .85rem; }
  .pull-sub, .pull-line { max-width: none; }
}

/* ============================================================================
   The traced figure (js/figure.js). A full-bleed band between the people and
   what we build on: the point cloud has no ground of its own, so the liquid
   field stays visible through it and the figure reads as something the field
   gathered rather than a picture laid on top of it.
   ========================================================================== */

@layer components {
  .fig3d { position: relative; }
  .fig3d-stage {
    position: relative;
    /* Glass, not a scrim. The band sits on the site's persistent canvas, and two
       line drawings at the same brightness fight wherever they cross. Blurring
       what is behind separates them the way depth of field separates a subject
       from a room — the field is still there and still moving, but it is now
       background. The tint is the fallback for browsers without the filter, so
       the band is never transparent by accident. */
    background: rgba(8, 8, 8, .62);
    -webkit-backdrop-filter: blur(26px) saturate(1.15) brightness(.72);
    backdrop-filter: blur(26px) saturate(1.15) brightness(.72);
    height: clamp(23rem, 64vh, 40rem);
    border-top: 1px solid var(--hair-1);
    border-bottom: 1px solid var(--hair-1);
    overflow: hidden;
    /* a backdrop-filter needs its own stacking context to composite against the
       fixed canvas rather than against the section's own paint */
    isolation: isolate;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fig3d-stage { background: rgba(8, 8, 8, .88); }
  }
  .fig3d-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s var(--ease);
    /* the cloud dissolves into the band's edges instead of being cut by them */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 94%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 94%, transparent);
  }
  .fig3d.is-on .fig3d-canvas { opacity: 1; }
  .fig3d-note {
    position: absolute;
    left: var(--gutter);
    /* top, not bottom: the flow layer occupies the foot of the band */
    top: 1.4rem;
    z-index: 1;
    max-width: 32ch;
    /* a sentence, so it drops the caps the mono labels use elsewhere */
    text-transform: none;
    letter-spacing: .03em;
    font-size: .72rem;
    line-height: 1.65;
    color: var(--chrome-45);
  }
  .fig3d-note b { color: var(--chrome-70); font-weight: 500; }
  html.rm .fig3d { display: none; }
}

@media (max-width: 760px) {
  .fig3d-stage { height: clamp(20rem, 54vh, 28rem); }
  /* under the stage rather than over the cloud: at this width there is no
     corner of the frame the figure is not already standing in */
  .fig3d-note {
    position: static;
    max-width: none;
    margin: .95rem var(--gutter) 0;
    font-size: .68rem;
  }
}

/* ============================================================================
   The second look (js/reveal.js). Two renders of one composition: the surface
   is the picture; the structure sits over it and is masked to a round window
   that follows the pointer, so it only exists where you are looking. Inside
   the window the structure assembles — each leader line draws itself (a dash
   the length of the line, offset to nothing, then to zero) and each label is
   resolved by the rig's decoder. The stage keeps the image's own aspect, so
   every position here is a percentage of the image.
   ========================================================================== */

@layer components {
  .reveal {
    position: relative;
    background: var(--bg);
    border-top: 1px solid var(--hair-1);
    border-bottom: 1px solid var(--hair-1);
    overflow: hidden;
  }
  .reveal-stage {
    position: relative;
    width: min(100%, 140vh);
    aspect-ratio: 4096 / 2288;
    margin-inline: auto;
    overflow: hidden;
    cursor: crosshair;
  }
  .reveal-stage:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
  .reveal-surface, .reveal-wire {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .reveal-under {
    position: absolute;
    inset: 0;
    visibility: hidden;
    --rx: 50%;
    --ry: 50%;
    --rr: 0px;
    -webkit-mask-image: radial-gradient(circle var(--rr) at var(--rx) var(--ry), #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: radial-gradient(circle var(--rr) at var(--rx) var(--ry), #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  .reveal-stage.is-live .reveal-under { visibility: visible; }
  .reveal-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .reveal-lines path {
    fill: none;
    stroke: var(--chrome);
    stroke-opacity: .82;
    stroke-width: 1;
    stroke-dasharray: var(--len, 1000);
    stroke-dashoffset: var(--len, 1000);
    transition: stroke-dashoffset .62s var(--ease);
    transition-delay: calc(var(--i) * 150ms);
  }
  .reveal-lines path.em { stroke: var(--ember); }
  .reveal-stage.is-looking .reveal-lines path { stroke-dashoffset: 0; }
  .reveal-dot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    background: var(--chrome);
    transform: scale(0);
    transition: transform .3s var(--ease);
    transition-delay: calc(var(--i) * 150ms);
  }
  .reveal-dot.em { background: var(--ember); }
  .reveal-stage.is-looking .reveal-dot { transform: scale(1); }
  .reveal-label {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translateY(calc(-100% - .45rem));
    min-height: 1em;
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--chrome);
    white-space: nowrap;
    font-variant-ligatures: none;
  }
  .reveal-label.em { color: var(--ember); }
  .reveal-note {
    position: absolute;
    left: var(--gutter);
    top: 1.4rem;
    z-index: 1;
    max-width: 34ch;
    text-transform: none;
    letter-spacing: .03em;
    font-size: .72rem;
    line-height: 1.65;
    color: var(--chrome-45);
    pointer-events: none;
  }
  html.rm .reveal-under { display: none; }
}

@media (max-width: 760px) {
  /* wider than the phone so the object is not a postage stamp; the edges of
     the image are black, so the crop costs nothing */
  .reveal-stage { width: 120%; margin-left: -10%; }
  .reveal-label { font-size: .5rem; }
  .reveal-note {
    position: static;
    max-width: none;
    margin: .95rem var(--gutter) 0;
    font-size: .68rem;
  }
}

/* ============================================================================
   Case pages. One plate, then the build's own decisions as a ruled index in
   the charter's shape, then what was measured, then the next case.
   ========================================================================== */

@layer components {
  .case-plate { aspect-ratio: 16 / 10; }
  .case-plate .plate-media { object-position: var(--op, 50% 0%); }
  .case-open {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    margin-top: 1.4rem;
  }
  .case-open .more { min-height: 2.75rem; }
  /* the decisions borrow the charter's three tracks; the "practice" line is the receipt */
  .decisions .n { -webkit-text-stroke-color: var(--hair-2); }
  .measured { margin-top: 1.8rem; }
  .measured > div { align-items: start; }
  .measured dd b { color: var(--chrome); font-weight: 700; font-size: 1.6rem; letter-spacing: -.03em; line-height: 1; display: block; margin-bottom: .4rem; }
  .case-next .statement { max-width: 20ch; }
}
/* ============================================================================
   Who we are. One stage. The claim opens in the flow; then the stage holds
   for three screens of scroll while four beats arrive over the figures, each
   tied to its form by a leader line — the second look's device — and the
   form being read about is lit. Without motion, or on a phone, the beats are
   a plain list under the figures.
   ========================================================================== */

@layer components {
  .sec--who { position: relative; z-index: 1; border-top: 1px solid var(--hair-1); background: var(--bg); }
  .who-head { padding: clamp(4rem, 12vh, 9rem) 0 clamp(3rem, 8vh, 5rem); }
  .who-claim {
    margin-top: 1.3rem;
    font-weight: 700;
    font-size: clamp(2rem, 5.2vw, 5.6rem);
    letter-spacing: -.035em;
    line-height: .96;
    max-width: 14ch;
    text-wrap: balance;
  }
  .fold--prose { margin-top: clamp(1.6rem, 4vh, 2.6rem); }
  .fold--prose .who-open { margin-top: 0; }
  .who-open {
    margin-top: clamp(1.6rem, 4vh, 2.6rem);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    row-gap: 1rem;
  }
  .who-open p { color: var(--chrome-70); font-size: 1.02rem; line-height: 1.6; text-wrap: pretty; }
  .who-open p:first-child { grid-column: 1 / span 5; grid-row: 1; }
  .who-open p:last-child { grid-column: 7 / span 5; grid-row: 1; }
  .who-lead { padding: 0 0 1.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.6rem; }
  .who-lead-line { font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -.02em; }

  /* the stage: one screen, in the flow; the sequence runs while it is on screen */
  .who-track { position: relative; }
  .who-stage {
    position: relative;
    height: calc(100dvh - var(--bar));
    min-height: 36rem;
    max-height: 56rem;
    border-top: 1px solid var(--hair-1);
    border-bottom: 1px solid var(--hair-1);
    overflow: hidden;
  }
  .who-canvas { position: absolute; inset: 0; height: auto; border: 0; }
  .who-leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .who-leads path {
    fill: none;
    stroke: var(--chrome);
    stroke-opacity: .55;
    stroke-width: 1;
    stroke-dasharray: var(--len, 2000);
    stroke-dashoffset: var(--len, 2000);
    transition: stroke-dashoffset 1.1s var(--ease);
  }
  .who-leads path.is-in { stroke-dashoffset: 0; }
  /* the row: four steps across the top of the stage; the one on stage opens */
  .who-beats {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: 1.6rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--gutter);
    pointer-events: none;
  }
  .who-beat { position: relative; padding-top: .9rem; border-top: 1px solid var(--hair-1); pointer-events: auto; }
  .who-beat::before {
    /* the hold hairline: fills over the hold, then the scene changes */
    content: "";
    position: absolute;
    left: 0; top: -1px;
    height: 1px;
    width: 0;
    background: var(--chrome);
    opacity: .8;
  }
  .who-beat.is-holding::before { width: 100%; transition: width var(--hold, 4.8s) linear; }
  .who-beat button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    color: var(--chrome-50);
    cursor: pointer;
    font: inherit;
    transition: color .5s var(--ease);
  }
  .who-beat button .meta { display: block; margin-bottom: .35rem; color: inherit; }
  .who-beat button b { display: block; font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; }
  .who-beat button:hover, .who-beat button:focus-visible { color: var(--chrome-70); outline: none; }
  .who-beat.is-on button { color: var(--chrome); }
  .who-line {
    margin-top: .55rem;
    color: var(--chrome-70);
    font-size: .95rem;
    line-height: 1.5;
    text-wrap: pretty;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  .who-beat.is-on .who-line { opacity: 1; transform: none; }
  .who-stage .fig3d-note { left: var(--gutter); right: var(--gutter); top: auto; bottom: .7rem; max-width: none; text-align: center; text-wrap: balance; }
  .who-beat .who-line b { color: var(--chrome); }
  .who-tail { padding: clamp(3rem, 8vh, 5rem) 0 clamp(2rem, 6vh, 4rem); }
  .who-team { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 2rem; margin-bottom: clamp(2.4rem, 7vh, 4rem); }
  .who-team-col { grid-column: span 5; }
  .who-team-col + .who-team-col { grid-column: 7 / span 5; }
  .who-team-col p { color: var(--chrome-70); font-size: 1.02rem; line-height: 1.6; text-wrap: pretty; }
  .who-team-col p.meta { color: var(--chrome-50); font-size: inherit; line-height: inherit; }
  .who-team-col .who-sub { margin-top: 1.4rem; }
  .who-team-col p + p:not(.meta) { margin-top: .6rem; }
  .who-team-col b { color: var(--chrome); }
  .who-people { margin: .5rem 0 0; }
  .who-tail .whowe { margin-top: 0; }

  /* no motion: everything present, nothing held */
  html.rm .who-stage { position: relative; height: auto; min-height: 0; max-height: none; }
  html.rm .who-canvas { display: none; }
  html.rm .who-leads { display: none; }
  html.rm .who-beats { position: static; display: block; padding: 1rem var(--gutter) 3rem; }
  html.rm .who-beat { padding: 1.1rem 0; border-top: 0; border-bottom: 1px solid var(--hair-1); }
  html.rm .who-beat::before { display: none; }
  html.rm .who-beat button { color: var(--chrome); cursor: default; }
  html.rm .who-line { opacity: 1; transform: none; }
}

@media (max-width: 1080px) {
  .who-open p:first-child { grid-column: 1 / span 6; }
  .who-open p:last-child { grid-column: 7 / span 6; }
  .who-team-col { grid-column: span 6; }
  .who-team-col + .who-team-col { grid-column: 7 / span 6; }
  .who-beat button b { font-size: 1.02rem; }
}

@media (max-width: 760px) {
  /* the figures, then the beats as a ruled list; nothing overlaid on a phone */
  .who-open p:first-child, .who-open p:last-child { grid-column: 1 / -1; grid-row: auto; }
  .who-team-col, .who-team-col + .who-team-col { grid-column: 1 / -1; }
  .who-stage { position: relative; top: auto; height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; }
  .who-canvas { position: relative; height: 26rem; order: 0; }
  .who-stage .fig3d-note { order: 1; }
  .who-beats { order: 2; position: static; display: block; padding: .6rem var(--gutter) 1.6rem; }
  .who-leads { display: none; }
  .who-beat { padding: .7rem 0 .75rem; border-top: 0; border-bottom: 1px solid var(--hair-1); }
  .who-beat::before { top: auto; bottom: -1px; }
  .who-beat .who-line { display: none; opacity: 1; transform: none; }
  .who-beat.is-on .who-line { display: block; margin-top: .45rem; }
  .who-claim { font-size: clamp(1.45rem, 7.2vw, 2.05rem); max-width: none; }
  .who-stage .fig3d-note { position: static; transform: none; padding: .8rem var(--gutter) 0; max-width: none; text-align: left; }
}

/* ==========================================================================
   PHONE LAYOUTS FOR THE WORK: the shelf and the sheet.

   The home index on a phone used to stack five plates a column wide with the
   name run big under each — about 1,900 px of page, five screens of scrolling
   for five figures. It is now a shelf: the five plates side by side, each about
   three-quarters of the screen so the next one shows its edge, snapping as
   you swipe. The one in front is lit; the others stay in the grey the desktop
   index holds them in until you reach for one. A count and a rail under the
   shelf say where you are. No JavaScript is needed for the shelf itself —
   scroll-snap is the browser's own — the script only reads the position.

   The work page on a phone used to run eighteen plates one under another,
   over 7,000 px. It is now a sheet: three across, six down, sized to the
   screen that is left under the head, so all eighteen are on the glass at
   once — a contact sheet, which is what an index of pictures has always been.
   Each tile carries its number and name in a strip across its foot. Touch and
   draw across the sheet and the tile under your finger lights and its name,
   sector and kind print in the readout above; tap and it opens. The page
   still scrolls vertically over the sheet (touch-action: pan-y), so the
   scrub is the horizontal gesture and the scroll is the vertical one.
   ========================================================================== */
@layer components {
  .shelf-n, .sheet-out { display: none; }
  .sec--sheet { padding-top: clamp(2rem, 5vh, 3rem); }
}
/* Unlayered on purpose: the phone block above (760 px) is unlayered too, and
   an unlayered rule beats every layered one, so these have to sit beside it. */
@media (max-width: 760px) {
    /* ---- the shelf ---- */
    .index {
      display: flex;
      gap: .7rem;
      margin-inline: calc(-1 * var(--gutter));
      margin-top: calc(1rem - clamp(2rem, 6vh, 4rem)); /* closes the desktop head gap */
      padding: 1.1rem var(--gutter) .2rem;
      border-top: 1px solid var(--hair-1);
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--gutter);
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .index::-webkit-scrollbar { display: none; }
    .entry, .entry:last-child {
      flex: 0 0 72vw;
      max-width: 22rem;
      border: 0;
      scroll-snap-align: start;
    }
    .entry-link, .entry:nth-child(even) .entry-link { display: block; padding: 0 0 .3rem; }
    .entry-body, .entry:nth-child(even) .entry-body { display: block; text-align: left; }
    .entry .fig-plate, .entry:nth-child(even) .fig-plate { width: 100%; margin: 0 0 .7rem; }
    .entry-body .meta { margin: 0 0 .3rem; font-size: .58rem; text-align: left; }
    .entry-body h2 { font-size: 1.35rem; margin: 0 0 .22rem; text-align: left; }
    .entry-body .line, .entry:nth-child(even) .entry-body .line {
      font-size: .84rem;
      line-height: 1.4;
      margin-left: 0;
      text-align: left;
      max-width: none;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .entry.is-front .plate-media { filter: none; }
    .entry.is-front .fig-plate { border-color: var(--chrome-70); }
    .shelf-n { display: flex; align-items: center; gap: .8rem; margin-top: .9rem; font-size: .6rem; }
    .shelf-n > b { color: var(--chrome); font-weight: 500; }
    .shelf-rail { position: relative; flex: 1; height: 1px; margin-left: .4rem; background: var(--hair-2); }
    .shelf-rail b {
      position: absolute;
      left: 0;
      top: -1px;
      width: 20%;
      height: 3px;
      background: var(--ember);
      transition: transform .3s var(--ease);
    }

    /* ---- the sheet ---- */
    .sec--sheet { padding-top: .9rem; padding-bottom: 1.2rem; }
    .sheet-out {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 0 .75rem;
      align-items: baseline;
      margin: 0 0 .6rem;
      min-height: 2.1rem;
    }
    .sheet-out b {
      grid-row: 1 / span 2;
      font-family: var(--display);
      font-weight: 800;
      font-size: 1.6rem;
      letter-spacing: -.04em;
      line-height: 1;
      color: var(--chrome);
    }
    .sheet-out span {
      font-family: var(--display);
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: -.02em;
      text-transform: none;
      color: var(--chrome);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sheet-out em { font-style: normal; font-size: .58rem; color: var(--chrome-45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wgrid, .wgrid > *, .wgrid > :nth-child(9n + 1), .wgrid > :nth-child(9n + 2),
    .wgrid > :nth-child(9n + 6), .wgrid > :nth-child(9n + 7),
    .wgrid > :nth-child(9n + 8), .wgrid > :nth-child(9n + 9) { grid-column: auto; }
    .wgrid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: minmax(3.2rem, 1fr);
      gap: 6px;
      height: calc(100svh - 21rem);
      min-height: 20rem;
      max-height: 40rem;
      touch-action: pan-y;
      counter-reset: sheet;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }
    .case { counter-increment: sheet; min-height: 0; }
    .case .plate { aspect-ratio: auto; height: 100%; }
    .case .plate-media { filter: saturate(.8) brightness(.86); transition: filter .35s var(--ease); }
    .case .pc, .case .card, .case .idx, .case .cap p, .case .cap .meta,
    .case .plate > .scrim, .case .plate > .grid { display: none; }
    .case .plate::before, .case .plate::after,
    .case .corners::before, .case .corners::after { width: 8px; height: 8px; }
    .case .cap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      display: block;
      margin: 0;
      padding: .55rem .38rem .3rem;
      background: linear-gradient(to top, rgba(8, 8, 8, .92), rgba(8, 8, 8, .6) 55%, rgba(8, 8, 8, 0));
      pointer-events: none;
    }
    .case .cap h2 {
      font-family: var(--mono);
      font-weight: 500;
      font-size: .54rem;
      letter-spacing: .08em;
      line-height: 1.2;
      color: var(--chrome-70);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: color .3s var(--ease);
    }
    .case .cap h2::before { content: counter(sheet, decimal-leading-zero) " "; color: var(--ember); }
    .case.is-lit .plate { border-color: var(--chrome); }
    .case.is-lit .plate-media { filter: none; }
    .case.is-lit .cap h2 { color: var(--chrome); }
    .case.is-lit .plate::before, .case.is-lit .plate::after,
    .case.is-lit .corners::before, .case.is-lit .corners::after { width: 14px; height: 14px; }
}

/* ============================================================================
   Questions — the first conversation, written down.
   Twelve questions in the order people ask them, answered open on the page
   (nothing behind a tap on a desktop) beside an index that stays put and marks
   the one being read. The rate is stated once, as a sentence — the answer to
   the first question — with what both rates carry on one ruled strip; the
   comparison is the Studio page's former table with a third column, and the
   only one on the site now. Every number on the page is the published one.
   ========================================================================== */
@layer components {
  /* the short answer: the rate as a sentence, the two figures inside it.
     Services sets the figures as display type in a ledger; this is the same
     two numbers in running prose, so the two pages read as two things. */
  .answer {
    margin-top: 1.4rem;
    font-weight: 600;
    font-size: clamp(1.45rem, 2.6vw, 2.7rem);
    line-height: 1.18;
    letter-spacing: -.03em;
    max-width: 30ch;
    text-wrap: pretty;
    font-variation-settings: "wdth" 96;
  }
  .answer b {
    font-weight: 800;
    color: var(--ember);
    white-space: nowrap;
    font-variation-settings: "wdth" 92;
  }
  .answer-sub {
    margin-top: 1.2rem;
    color: var(--chrome-70);
    font-size: clamp(.98rem, 1.15vw, 1.15rem);
    line-height: 1.5;
    max-width: 48ch;
    text-wrap: pretty;
  }
  /* what both carry: one ruled strip, four cells across, hairlines between */
  .strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 2.2rem;
    border-top: 1px solid var(--hair-2);
    border-bottom: 1px solid var(--hair-1);
  }
  .strip li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0 .6rem;
    align-items: start;
    padding: 1.05rem 1.3rem 1.15rem 0;
  }
  .strip li + li { border-left: 1px solid var(--hair-1); padding-left: 1.3rem; }
  .strip b {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--mono);
    font-weight: 400;
    font-size: .66rem;
    letter-spacing: .14em;
    color: var(--chrome-45);
    padding-top: .25rem;
  }
  .strip span { grid-column: 2; grid-row: 1; color: var(--chrome-70); font-size: .95rem; line-height: 1.5; }
  @media (max-width: 1080px) {
    .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .strip li:nth-child(-n + 2) { border-bottom: 1px solid var(--hair-1); }
    .strip li:nth-child(3) { border-left: 0; padding-left: 0; }
  }
  .answer-foot {
    margin-top: 1.2rem;
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .05em;
    color: var(--chrome-45);
  }
  .answer-foot a { color: var(--chrome-70); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
  .answer-foot a:hover { color: var(--chrome); border-color: var(--ember); }
  #compare { scroll-margin-top: var(--bar); }

  /* the comparison, with the agency between the freelancer and us */
  .vs--three tbody th { width: 22%; }
  .vs--three td { width: 26%; }

  /* the twelve: an index that stays, and a ledger that scrolls past it */
  .qa {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--gutter);
    margin-top: 1.8rem;
    align-items: start;
  }
  .qa-rail {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--bar) + 1.4rem);
  }
  .qa-rail ol { border-top: 1px solid var(--hair-2); }
  .qa-rail a {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0 .6rem;
    align-items: baseline;
    padding: .58rem 0 .62rem;
    border-bottom: 1px solid var(--hair-1);
    text-decoration: none;
    color: var(--chrome-45);
    font-size: .9rem;
    line-height: 1.35;
    letter-spacing: -.005em;
    transition: color .35s var(--ease);
  }
  .qa-rail a b {
    grid-column: 1;
    font-family: var(--mono);
    font-weight: 400;
    font-size: .62rem;
    letter-spacing: .14em;
    color: inherit;
  }
  .qa-rail a span { grid-column: 2; }
  .qa-rail a:hover { color: var(--chrome-70); }
  .qa-rail a[aria-current] { color: var(--chrome); }
  .qa-rail a[aria-current] b { color: var(--ember); }
  /* the mark the bar puts beside the page you are on, here on the line you are reading */
  .qa-rail a::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 1.05em;
    width: 5px;
    height: 5px;
    background: var(--ember);
    opacity: 0;
    transition: opacity .35s var(--ease);
  }
  .qa-rail a[aria-current]::before { opacity: 1; }

  .qa-list { grid-column: 2; grid-row: 1; border-top: 1px solid var(--hair-2); }
  .qa-item { border-bottom: 1px solid var(--hair-1); scroll-margin-top: calc(var(--bar) + 1.2rem); }
  .qa-item .fold {
    display: grid;
    grid-template-columns: clamp(3rem, 5.2vw, 4.8rem) minmax(0, 1fr);
    gap: 0 clamp(1.2rem, 3vw, 2.8rem);
    padding: clamp(1.7rem, 4.2vh, 2.6rem) 0;
    align-items: start;
  }
  .qa-item .fold > summary,
  .qa-item .fold-body { display: contents; }
  .qa-item .fold > summary { cursor: default; pointer-events: none; list-style: none; }
  .qa-item .n {
    grid-column: 1;
    grid-row: 1 / span 3;
    font-weight: 900;
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    line-height: .95;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1px var(--hair-2);
    user-select: none;
  }
  .qa-item h2 {
    grid-column: 2;
    grid-row: 1;
    font-weight: 800;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    letter-spacing: -.035em;
    line-height: 1.06;
    max-width: 24ch;
    text-wrap: balance;
  }
  .qa-item .fold-body > p:not(.practice) {
    grid-column: 2;
    grid-row: 2;
    margin-top: 1rem;
    color: var(--chrome-70);
    font-size: 1.02rem;
    line-height: 1.62;
    max-width: 60ch;
  }
  .qa-item .fold-body a { color: var(--chrome); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
  .qa-item .fold-body a:hover { border-color: var(--ember); }
  .qa-item .practice {
    grid-column: 2;
    grid-row: 3;
    margin-top: .9rem;
    font-family: var(--mono);
    font-size: .78rem;
    line-height: 1.6;
    color: var(--chrome-45);
    max-width: 62ch;
  }
  .qa-item .practice b {
    color: var(--ember);
    font-weight: 500;
    font-size: .82em;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-right: .7rem;
  }

  /* the close: two ways in, stacked against the statement */
  .ask { display: grid; gap: 1rem; justify-items: end; }
}

/* Unlayered, beside the phone block: an unlayered rule beats every layered one. */
@media (max-width: 760px) {
  .answer { font-size: clamp(1.3rem, 6vw, 1.6rem); max-width: none; }
  .answer-sub { max-width: none; }
  .strip { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .strip li, .strip li:nth-child(-n + 2) { padding: .85rem 0 .9rem; border-bottom: 1px solid var(--hair-1); }
  .strip li + li { border-left: 0; padding-left: 0; }
  .vs--three td:nth-of-type(1)::before { content: "One freelancer"; color: var(--chrome-45); }
  .vs--three td:nth-of-type(2)::before { content: "An agency"; color: var(--chrome-45); }
  .vs--three td:nth-of-type(3)::before { content: "Thornbury"; color: var(--ember); }
  .qa { grid-template-columns: minmax(0, 1fr); margin-top: 1.2rem; }
  .qa-rail { display: none; }
  .qa-list { grid-column: 1; }
  .qa-item .fold { display: block; padding: .85rem 0 1rem; }
  .qa-item .fold > summary {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 0 .75rem;
    align-items: baseline;
    cursor: pointer;
    pointer-events: auto;
    list-style: none;
  }
  .qa-item .n { grid-column: 1; grid-row: 1; font-size: 1.05rem; line-height: 1.2; }
  .qa-item h2 { grid-column: 2; grid-row: 1; max-width: none; font-size: clamp(1.15rem, 5vw, 1.4rem); line-height: 1.15; }
  .qa-item .fold-body { display: block; padding: .85rem 0 0 2.95rem; }
  .qa-item .fold-body > p:not(.practice) { margin-top: 0; max-width: none; font-size: .98rem; }
  .qa-item .practice { margin-top: .85rem; max-width: none; }
  .ask { justify-items: start; }
}