/* v3. Layout borrowed in spirit from the reference set: Clearleft's single big
 * statement, Browserbase's split sections with a sparse right column, Baseten's
 * tight grotesk display and mono labels, Vercel's one bold shape. Palette and
 * hand are ours. */
:root {
  --paper:#FFFBF2; --ink:#161514; --red:#E03131; --blue:#1971C2;
  --grey:#6F695E; --rule:#E2DACA; --wash:#F3EBDA;
  --display:'Inter Tight',Inter,system-ui,sans-serif;
  --body:Inter,system-ui,sans-serif;
  --mono:'Chivo Mono',ui-monospace,Menlo,monospace;
  --hand:Caveat,cursive;
  --gutter:clamp(22px,4.4vw,64px);
}
* { box-sizing:border-box; }
html,body { margin:0; }
body { background:var(--paper); color:var(--ink); font:400 18px/1.55 var(--body); }
a { color:inherit; }
img { display:block; max-width:100%; height:auto; }
/* Sections that also carry .frame must set padding-block, never the shorthand,
 * or they cancel the frame's side padding. */
.frame { max-width:1320px; margin:0 auto; padding-inline:var(--gutter); }
.label { font:500 12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--grey); }

/* ---------- top ---------- */
.top { position:absolute; inset:0 0 auto 0; z-index:5; display:flex; justify-content:space-between;
       align-items:center; padding:26px var(--gutter); font:500 12px/1 var(--mono);
       letter-spacing:.08em; text-transform:uppercase; }
.top a { text-decoration:none; }
.top nav { display:flex; gap:28px; }
.top nav a { opacity:.7; } .top nav a:hover { opacity:1; }

/* ---------- hero ---------- */
.hero { position:relative; min-height:100vh; display:grid; grid-template-columns:7fr 5fr;
        align-items:center; gap:24px; padding:120px var(--gutter) 150px;
        overflow:hidden; isolation:isolate; }
.hero .kicker { font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
                opacity:.6; margin:0 0 26px; }
.hero .rot { font:600 clamp(48px,8.2vw,124px)/.9 var(--display); letter-spacing:-.045em; margin:0; }
.hero .sub { font-size:clamp(17px,1.5vw,20px); line-height:1.45; max-width:34ch; margin:28px 0 0; opacity:.82; }
.fade { transition:opacity .28s ease; } .fade[data-out="1"] { opacity:0; }
.cta { display:flex; gap:12px; margin-top:40px; flex-wrap:wrap; }
.btn { font:500 15px/1 var(--body); text-decoration:none; padding:15px 22px; border:1.5px solid;
       transition:opacity .2s, background-color .45s, color .45s, border-color .45s; }
.btn:hover { opacity:.8; }
.hero-art { display:grid; place-items:center; }
.art-box { position:relative; width:min(58vh,100%); aspect-ratio:1; }
.hero-art svg { width:100%; height:auto; overflow:visible; }
/* the four words sit at the corners of the drawing, clockwise from top left */
/* pinned to the drawing's own box, so the words hug the circle at any width */
.dots { position:absolute; inset:-2%; pointer-events:none; }
.dots button { position:absolute; pointer-events:auto; font:500 13px/1 var(--mono);
               letter-spacing:.08em; text-transform:uppercase; background:none; border:0;
               padding:0 0 8px; color:inherit; cursor:pointer; opacity:.35;
               border-bottom:1.5px solid transparent; transition:opacity .3s, border-color .3s; }
.dots button:nth-child(1) { top:0; left:0; }
.dots button:nth-child(2) { top:0; right:0; }
.dots button:nth-child(3) { bottom:0; right:0; }
.dots button:nth-child(4) { bottom:0; left:0; }
.dots button[data-on="1"] { opacity:1; border-bottom-color:currentColor; }
.dots button:hover { opacity:.8; }

/* ---------- statement (Clearleft) ---------- */
.statement { padding-block:150px 110px; }
.statement p.big { font:500 clamp(30px,3.9vw,56px)/1.08 var(--display); letter-spacing:-.03em;
                   max-width:20ch; margin:0 0 40px; }
.statement .aside { display:grid; grid-template-columns:5fr 7fr; gap:24px; }
.statement .aside p { max-width:46ch; margin:0; color:#3F3B35; }

/* ---------- splits (Browserbase) ---------- */
.split { display:grid; grid-template-columns:5fr 7fr; gap:24px; border-top:1px solid var(--rule);
         padding:44px 0 120px; }
.split h2 { font:600 clamp(32px,3.6vw,54px)/.98 var(--display); letter-spacing:-.035em; margin:0; max-width:11ch; }
.split .right { padding-top:34px; }
.split .right p { max-width:44ch; margin:0 0 22px; }
.split .right p.quiet { color:var(--grey); font-size:16px; }
.split.short { padding-bottom:70px; }
.split figure { margin:40px 0 0; }
.split figure img { border:1px solid var(--rule); padding:8px; box-sizing:border-box; background:var(--paper); }
.split figcaption { font:400 14px/1.5 var(--body); color:var(--grey); margin:14px 0 0; max-width:48ch; }
.split figure img { width:100%; margin:0 auto; }
pre.tools { font:400 14px/1.9 var(--mono); background:var(--ink); color:#E9E3D6; padding:26px 28px;
            margin:36px 0 0; overflow:auto; max-width:520px; }
pre.tools .ok { color:#8FC98F; } pre.tools .ask { color:#F1B84B; } pre.tools .no { color:#F08A8A; }

/* ---------- band ---------- */
.band { background:var(--ink); color:var(--paper); padding:140px 0; }
.band .pond { font:600 clamp(36px,5vw,68px)/1.04 var(--hand); margin:0 0 40px; max-width:18ch; color:var(--paper); text-wrap:balance; }
.band .pond::before { content:''; display:block; width:56px; height:5px; background:var(--red); margin-bottom:34px; }
.band p { max-width:40ch; color:#C7C0B2; margin:0; }
.band .label { color:#8E877A; display:block; margin-bottom:30px; }

/* ---------- hire list: an accordion, no numbers ---------- */
.hire { padding-block:130px 90px; }
.hire h2 { font:600 clamp(32px,3.6vw,54px)/.98 var(--display); letter-spacing:-.035em; margin:0 0 50px; }
.acc { list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); }
.acc li { border-bottom:1px solid var(--rule); }
.acc button { all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:flex;
              justify-content:space-between; align-items:center; gap:24px; padding:22px 0;
              font:500 clamp(19px,1.8vw,25px)/1.3 var(--display); letter-spacing:-.015em; }
.acc button:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.acc button i { position:relative; flex:none; width:18px; height:18px; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.acc button i::before, .acc button i::after { content:''; position:absolute; inset:8px 0 auto; height:2px; background:currentColor; }
.acc button i::after { transform:rotate(90deg); }
.acc li.open button i { transform:rotate(135deg); }
.acc li.open button { color:var(--red); }
.acc .panel { overflow:hidden; }
.acc .panel p { max-width:56ch; margin:0; padding:0 0 26px; color:#3F3B35; }

/* ---------- stats ---------- */
.stat { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:baseline; margin:40px 0 0; max-width:560px; }
.stat b { font:600 56px/.9 var(--display); letter-spacing:-.04em; color:var(--red); }
.stat p { margin:0; font-size:16px; color:#3F3B35; }
.stat cite { display:block; margin-top:8px; font:500 11px/1.4 var(--mono); letter-spacing:.06em;
             text-transform:uppercase; font-style:normal; color:var(--grey); }
.stat.big { max-width:none; grid-template-columns:5fr 7fr; gap:24px; margin-top:110px;
            padding-top:40px; border-top:1px solid var(--ink); }
.stat.big b { font-size:clamp(96px,13vw,190px); }
.stat.big p { font-size:20px; max-width:34ch; }

/* ---------- pond ---------- */
.pond-row { display:grid; grid-template-columns:7fr 5fr; gap:40px; align-items:center; }
.pond-art { width:100%; max-width:560px; justify-self:end; }

/* ---------- record ---------- */
.record { padding-block:40px 130px; }
.record .split { padding-bottom:0; }
.record .evidence { margin:0; padding:0; list-style:none; }
.record .evidence li { padding:16px 0; border-bottom:1px solid var(--rule); max-width:52ch; }
.record .evidence li:last-child { border-bottom:0; }

/* ---------- close ---------- */
.close { background:var(--red); color:var(--paper); padding:130px 0 120px; }
.close h2 { font:600 clamp(48px,7.6vw,116px)/.9 var(--display); letter-spacing:-.045em; margin:0 0 34px; }
.close p { max-width:42ch; font-size:20px; margin:0 0 40px; }
.close .btn { border-color:var(--paper); background:var(--paper); color:var(--red); }
.close .btn.ghost { background:transparent; color:var(--paper); }

.foot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
        padding:30px var(--gutter); font:500 12px/1.6 var(--mono); letter-spacing:.06em;
        text-transform:uppercase; color:var(--grey); }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; padding-top:110px; }
  .hero-art { order:-1; } .art-box { width:min(34vh,62%); }
  .split, .statement .aside { grid-template-columns:1fr; }
  .split .right { padding-top:8px; }
  .pond-row, .stat.big { grid-template-columns:1fr; }
  .pond-art { justify-self:start; max-width:300px; }
  .top nav a:not(:last-child) { display:none; }
}
@media (prefers-reduced-motion:reduce) { .hero, .fade, .btn { transition:none; } }

/* ---------- tagline: a line in its own right, sized to be read first ---------- */
.hero .tagline { font:500 clamp(20px,2.1vw,30px)/1.2 var(--display); letter-spacing:-.02em;
                 margin:0 0 30px; max-width:32ch; text-wrap:balance; }

/* ---------- booking dialog ---------- */
body.booking .hero, body.booking main, body.booking section, body.booking footer { filter:blur(6px); transition:filter .3s; }
.book { --book-bg:#E03131; border:0; padding:0; margin:auto; width:min(560px, calc(100vw - 32px));
        background:var(--book-bg); color:#fff; }
.book::backdrop { background:rgba(12,11,10,.42); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.book[open] { animation:book-in .42s cubic-bezier(.34,1.4,.64,1); }
@keyframes book-in { from { opacity:0; transform:translateY(18px) scale(.97); } }
.book form { position:relative; padding:44px 40px 34px; display:grid; gap:16px; }
.book h2 { font:600 clamp(34px,4vw,50px)/.95 var(--display); letter-spacing:-.04em; margin:0; }
.book p { margin:0; font-size:16px; line-height:1.5; opacity:.9; }
.book label { display:grid; gap:7px; font:500 12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.book input, .book textarea { font:400 17px/1.4 var(--body); color:#161514; background:#fff;
        border:0; padding:13px 14px; border-radius:0; resize:vertical; }
.book input:focus, .book textarea:focus { outline:3px solid rgba(255,255,255,.55); outline-offset:2px; }
.book .book-go { justify-self:start; font:600 15px/1 var(--body); background:#fff; color:var(--book-bg);
        border:0; padding:16px 26px; cursor:pointer; margin-top:6px; }
.book .book-go:hover { opacity:.88; }
.book .book-x { position:absolute; top:12px; right:16px; background:none; border:0; color:#fff;
        font:300 34px/1 var(--body); cursor:pointer; opacity:.8; }
.book .book-note { font-size:13px; opacity:.72; }
@media (prefers-reduced-motion:reduce) { .book[open] { animation:none; } body.booking * { transition:none; } }

/* ---------- wordmark: the two words stacked, ink then paper, touching ---------- */
.mark { display:inline-flex; flex-direction:column; align-items:flex-start; text-decoration:none; }
.mark span { font:600 22.5px/1 var(--display); letter-spacing:-.01em; text-transform:none; padding:7.5px 12px 9px; }
.mark span:first-child { background:#161514; color:#FFFBF2; }
.mark span:last-child  { background:#FFFBF2; color:#161514; box-shadow:inset 0 0 0 2px #161514; }

/* ---------- emphasis: light, and only where a phrase carries the point ---------- */
strong { font-weight:600; padding:0 .08em; background:linear-gradient(transparent 56%, #F5D38C 56%, #F5D38C 92%, transparent 92%); }
.band strong { background:linear-gradient(transparent 56%, rgba(245,211,140,.35) 56%, rgba(245,211,140,.35) 92%, transparent 92%); }
em { font-style:italic; }

/* ---------- footnote references and sources ---------- */
sup { font:500 .62em/0 var(--mono); vertical-align:super; margin-left:.12em; }
sup a { color:var(--blue); text-decoration:none; }
sup a:hover { text-decoration:underline; }
.sources { padding-block:90px 70px; border-top:1px solid var(--rule); }
.sources h2 { font:600 clamp(26px,2.6vw,36px)/1 var(--display); letter-spacing:-.03em; margin:0 0 28px; }
.sources ol { margin:0; padding-left:1.6em; max-width:78ch; }
.sources li { font-size:15px; line-height:1.5; margin-bottom:12px; color:#3F3B35; }
.sources li::marker { font:500 13px var(--mono); color:var(--blue); }
.sources li a { color:var(--ink); }
.sources li a.back { text-decoration:none; color:var(--blue); margin-left:.3em; }
:target { scroll-margin-top:90px; }
.sources li:target { background:#FBF1D9; }

/* ---------- small screens ---------- */
/* Phones get a separate drawing for each diagram: numbered markers and a key, in
 * place of leaders, served through <picture>. */
@media (max-width:780px) {
  /* capped so the key stays between about 14 and 19px from a small phone to a small tablet */
  .split figure img { width:100%; max-width:460px; }
  sup { font-size:.78em; line-height:1; }
  sup a { display:inline-block; padding:6px 5px; margin:-6px -3px; }
}
h1, h2, .hero .rot, .statement p.big { text-wrap:balance; }
/* grid items default to min-width:auto, which lets a wide figure stretch the column
 * and the page; zero lets the figure scroll inside its own frame */
.split > div, .stat.big > *, .pond-row > * { min-width:0; }

/* On wide screens a diagram spans both columns of its section, under the text, so its
 * labels stay near their drawn size. The right column is 7 of 12 parts plus a 24px gap. */
@media (min-width:901px) {
  /* only the first diagram takes the full width; the rest stay in the right column */
  /* left edge on the heading, right edge on the right of the paragraph above (44ch) */
  #work .split:first-child .right figure { width:calc(71.43% + 24px + 44ch); margin-left:calc(-71.43% - 24px); }
  .split figure img { max-height:none; width:100%; }
}

/* The hero drawing is two layers of plain HTML, animated only through transform and
 * opacity, so the browser runs it on the compositor. The first version rewrote an SVG
 * attribute every frame, which cost 157 style recalcs and layouts per spin and stuttered
 * on phones. */
.art-box { container-type:inline-size; }
.rings, .spinner { position:absolute; inset:0; }
.rings i { position:absolute; left:50%; top:50%; border-radius:50%; border-style:solid;
           border-color:currentColor; box-sizing:border-box; will-change:transform, opacity;
           transform:translate(-50%,-50%); }
.spinner { cursor:pointer; outline:none; will-change:transform; }
.spinner svg { display:block; width:100%; height:100%; overflow:visible; }
.spinner:focus-visible #shape { stroke:currentColor; stroke-width:3; stroke-dasharray:4 5; }

/* the wordmark goes back to its original size on phones */
@media (max-width:780px) {
  .mark span { font-size:15px; padding:5px 8px 6px; }
  .mark span:last-child { box-shadow:inset 0 0 0 1.5px #161514; }
}

/* The hero's colour changes by cross-fading stacked layers on opacity, which the
 * compositor handles. Transitioning background-color repainted the whole hero on
 * every frame. */
.hero-bg { position:absolute; inset:0; z-index:-1; will-change:opacity; }
.hero .btn, .hero .dots button, .hero .sub, .hero .rot { transition:opacity .28s ease; }

/* ---------- interactive diagrams ---------- */
figure[data-play] svg.iso-play { display:block; width:100%; height:auto; border:1px solid var(--rule);
                                 padding:8px; box-sizing:border-box; background:var(--paper); }
.iso-play .lead { stroke-dasharray:1 1; stroke-dashoffset:1; opacity:.6; }
.iso-play .lbl.past .lead, .iso-play .lbl.on .lead { stroke-dashoffset:0; }
.iso-play .lbl { transition:opacity .3s; }
.iso-play .lbl.future .words, .iso-play .lbl.future .dot { opacity:.18; }
.iso-play .lbl .words, .iso-play .lbl .dot { transition:opacity .35s; }
.iso-play .num { cursor:pointer; outline:none; }
.iso-play .num circle { fill:#FFFBF2; stroke:#161514; stroke-width:1.6; transition:fill .25s, stroke .25s; }
.iso-play .num text { fill:#161514; transition:fill .25s; }
.iso-play .lbl.past .num circle { fill:#161514; }
.iso-play .lbl.past .num text { fill:#FFFBF2; }
.iso-play .lbl.on .num circle, .iso-play .pick.on circle { fill:#E03131; stroke:#E03131; }
.iso-play .lbl.on .num text, .iso-play .pick.on text { fill:#FFFBF2; }
.iso-play .num:hover circle { stroke:#E03131; }
.iso-play .num:focus-visible circle { stroke:#1971C2; stroke-width:4; }
/* phone: one caption and one trace at a time */
.iso-play.mobile .cap, .iso-play.mobile .lead { visibility:hidden; }
.iso-play.mobile .cap.on, .iso-play.mobile .lead.on { visibility:visible; stroke-dashoffset:0; }
.iso-play.mobile .dot { opacity:.35; transition:opacity .3s; }
.iso-play.mobile .dot.on { opacity:1; fill:#E03131; }
@media (max-width:780px) { figure[data-play] svg.iso-play { max-width:460px; } }
@media (prefers-reduced-motion:reduce) { .iso-play * { transition:none !important; } }