@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-display.woff2) format("woff2");font-weight:340 460;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Serif Fallback";src:local("Georgia"),local("DejaVu Serif");size-adjust:96%;ascent-override:94%;descent-override:28%;line-gap-override:0%}
@font-face{font-family:"Sans Fallback";src:local("Arial"),local("Liberation Sans"),local("DejaVu Sans");size-adjust:97%;ascent-override:98%;descent-override:26%;line-gap-override:0%}
:root{
  --ground:#EDECE8; --paper:#F5F5F2; --stone:#E2E0DA; --ink:#1C1F22; --soft:#585C5E; --foil:#B3311C;
  --basalt:#1C1F22; --on-basalt:#ECEAE5; --soft-basalt:#ADABA5;
  --stone-25:#FBFAF8; --stone-300:#CFCCC4; --stone-400:#B9B8B3; --slate-500:#80868A; --slate-550:#5B6064; --slate-700:#3A4044; --slate-800:#2A2F32; --slate-950:#0B0E10; /* palette-pass: neutral ramp tokens (stone = warm lights, slate = cool darks) */
  --serif:"Source Serif 4","Serif Fallback",Georgia,serif;
  --sans:"Hanken Grotesk","Sans Fallback",ui-sans-serif,system-ui,sans-serif;
  --m:clamp(20px,5vw,72px); --gap:24px;
  --t-xl:clamp(2.25rem,.9rem + 3.6vw,4.25rem);
  --t-st:clamp(1.375rem,1.05rem + .9vw,1.875rem);
  --t-lead:clamp(1.125rem,1.02rem + .3vw,1.3125rem);
  --t-body:1.0625rem;
  --t-small:.875rem;
  --ease:cubic-bezier(.2,.7,.1,1);
  /* spacing: one modular scale (ratio 1.5) on the body line, L = 17px x 1.55 = 26.35px */
  --L:1.647rem;
  --s-2:calc(var(--L) * .444); --s-1:calc(var(--L) * .667); --s0:var(--L); --s1:calc(var(--L) * 1.5);
  --s2:calc(var(--L) * 2.25); --s3:calc(var(--L) * 3.375); --s4:calc(var(--L) * 5.0625);
  /* section padding grows with width but is capped by height (~13% of the screen), from s3 to s4 */
  --sec:clamp(var(--s3),min(8vw,13.3svh),var(--s4));
  /* heading to its content, and rows inside a section */
  --hg:clamp(var(--s1),calc(var(--sec) * .66),var(--s3));
  --row:var(--s2);
  /* content never wider than 1440px; the side margin grows past that, colour bands stay full-bleed */
  --max:1440px; --pad:max(var(--m),calc((100vw - var(--max)) / 2));
  --bar:96px; --hero-pb:clamp(var(--s1),7svh,var(--s3));
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px;background:var(--ground)}
body{margin:0;background:var(--ground) url(img/grain.webp) 0 0/160px 160px;color:var(--ink);font-family:var(--sans);font-size:var(--t-body);line-height:1.55;font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
img,video{width:100%;height:100%;object-fit:cover}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
::selection{background:var(--ink);color:var(--ground)}
:focus-visible{outline:2px solid var(--foil);outline-offset:3px}
.skip{position:absolute;left:var(--m);top:-60px;background:var(--ink);color:var(--ground);padding:10px 16px;z-index:10}
.skip:focus{top:12px}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--pad)}

/* type: a display serif for what is said large, the grotesk for everything read or used */
h1,.h-xl{font-family:var(--serif);font-size:var(--t-xl);font-weight:400;letter-spacing:-.022em;line-height:1.04;text-wrap:balance}
h3{font-size:var(--t-lead);font-weight:500;letter-spacing:-.012em;line-height:1.25}
.statement{font-family:var(--serif);font-size:var(--t-st);font-weight:400;letter-spacing:-.012em;line-height:1.25;max-width:24ch;text-wrap:pretty}
.lead{font-size:var(--t-lead);line-height:1.5;max-width:42ch;text-wrap:pretty}
.small,figcaption{font-size:var(--t-small);line-height:1.45;color:var(--soft)}
figcaption{margin-top:var(--s-2);max-width:46ch}
p{text-wrap:pretty}

/* controls */
.btn{display:inline-flex;align-items:center;min-height:56px;padding:0 30px;background:var(--ink);color:var(--ground);text-decoration:none;font-weight:500;font-size:var(--t-body);transition:background-color .35s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--slate-950)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-light{background:var(--on-basalt);color:var(--basalt)}
.btn-light:hover{background:var(--stone-25)}
.tlink{font-weight:500;text-decoration:underline;text-underline-offset:.32em;transition:text-underline-offset .3s var(--ease)}
.tlink:hover{text-underline-offset:.5em}

/* bar */
.bar{align-items:center;height:var(--bar)}
.lockup{grid-column:1/5;display:flex;align-items:center;gap:14px;text-decoration:none;width:max-content}
.lockup svg.mark-sm{height:26px;width:auto}
.lockup svg.word-sm{height:12px;width:auto}
.mark-sm .wm-solid,.word-sm .wm-solid{stroke:var(--ink)}
.word-sm .wm-solid{stroke-width:11}
.bar-nav{grid-column:5/13;justify-self:end;display:flex;gap:36px;font-size:var(--t-small)}
.bar-nav a{text-decoration:none;padding:10px 0}
.bar-nav a:hover{text-decoration:underline;text-underline-offset:.4em}
.bar-cta{font-weight:500;text-decoration:underline!important;text-underline-offset:.4em}
.bar-menu{display:none}

/* marks */
.wm{width:100%;height:auto;overflow:visible}
.wm-solid{fill:none;stroke:var(--ink);stroke-width:10.5;stroke-linecap:butt;stroke-linejoin:miter}
.wm-ghost{fill:none;stroke:var(--soft);stroke-width:10.5}
.wm-ghost-in{fill:none;stroke:var(--paper);stroke-width:8.6}
.lens-disc{fill:var(--paper)}
.wm-skel{fill:none;stroke:var(--ink);stroke-width:1.25;vector-effect:non-scaling-stroke}
.wm-nodes circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.25;vector-effect:non-scaling-stroke}
.wm-cons circle{fill:none;stroke:var(--soft);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 4}
.wm-cons circle.c{fill:var(--soft);stroke:none}
.wm-intro{opacity:0}
.member .mem-l{fill:none;stroke:var(--foil);stroke-width:.62;stroke-linecap:butt}
.member .pins circle{fill:var(--foil);stroke:var(--ground);stroke-width:.45}
.mark-sm .member .mem-l{stroke-width:1.6px;vector-effect:non-scaling-stroke}
.mark-sm .pins{display:none}
.wm-stack{display:none}

/* hero: one symbol, alone */
/* the hero fills the fold exactly: the copy and the mark both stand on the same base line */
.hero{min-height:clamp(560px,calc(100svh - var(--bar)),1040px);align-items:end;padding-block:var(--s2) var(--hero-pb);row-gap:var(--s2)}
.hero-copy{grid-column:1/8;grid-row:1}
.hero-copy h1{font-size:clamp(2.25rem,min(.9rem + 3.95vw,1rem + 7svh),5rem)}
.hero-copy h1{max-width:14.5em}
.hero-copy .lead{margin-top:var(--s1)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s1);margin-top:var(--s1)}
.note{margin-top:var(--s0);color:var(--soft);font-size:var(--t-small)}
.hero-mark{grid-column:8/13;grid-row:1;align-self:end;justify-self:end;width:min(100%,calc((100svh - var(--bar) - var(--s2) - var(--hero-pb)) * .768));touch-action:pan-y}
.hero-mark .emblem{cursor:crosshair}

/* sections */
.sec{padding-top:var(--sec)}
.problem-head{grid-column:1/10}
.problem-head .statement{max-width:none;color:var(--soft)}
.problem-head .h-xl{margin-top:var(--s-1);max-width:13em}
.problems{grid-column:1/13;margin-top:var(--hg);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
.problems li:nth-child(2){grid-column:auto}
.problems h3{font-family:var(--serif);font-weight:400;font-size:var(--t-st);letter-spacing:-.015em;line-height:1.15}
.problems p{margin-top:var(--s-1);max-width:30ch;font-size:var(--t-lead);line-height:1.5}

.frame-fig{grid-column:1/9;margin-left:calc(-1 * var(--pad))}
.frame-fig figcaption{padding-left:var(--pad)}
.frame-line{grid-column:9/13;align-self:center;max-width:20ch}
.frame{overflow:hidden;background:var(--stone)}
.r43{aspect-ratio:4/3}.r34{aspect-ratio:3/4}

.how-h{grid-column:1/9}
.steps{grid-column:1/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);margin-top:var(--hg)}
.steps li{padding-top:calc(var(--k) * var(--s2))}
.steps li:nth-child(1){--k:0}.steps li:nth-child(2){--k:1}.steps li:nth-child(3){--k:2}.steps li:nth-child(4){--k:3}
.steps h3{font-family:var(--serif);font-weight:400;font-size:var(--t-st);letter-spacing:-.015em}
.steps p{margin-top:var(--s-1);max-width:28ch}

.band{padding-top:var(--sec)}
.band-img{aspect-ratio:21/9;overflow:hidden;background:var(--stone)}
.band-line{grid-column:8/13;margin-top:var(--s1)}

/* instrument */
.instrument{background:var(--basalt);color:var(--on-basalt);margin-top:var(--sec);padding-bottom:var(--sec)}
.instrument ::selection{background:var(--on-basalt);color:var(--basalt)}
.inst{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:var(--gap)}
.inst-h{grid-column:1/7;grid-row:1}
.inst-intro{grid-column:1/6;grid-row:2;margin-top:var(--s0);font-size:var(--t-lead);max-width:42ch}
.inst-controls{grid-column:1/6;grid-row:3;margin-top:var(--hg);display:grid;gap:var(--s2);align-content:start}
.tasks{border:0;margin:0;padding:0;min-width:0}
legend,.dial-head label{font-size:var(--t-body);font-weight:500;padding:0;margin-bottom:18px;color:var(--on-basalt)}
.task-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap)}
.task-grid label{position:relative;display:flex;align-items:center;gap:14px;min-height:52px;cursor:pointer;color:var(--soft-basalt);font-size:var(--t-lead);letter-spacing:-.01em;transition:color .3s var(--ease)}
.task-grid label::before{content:"";flex:0 0 10px;height:10px;border:1.5px solid var(--slate-500);background:transparent;transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)} /* batch 3: slate-500 outline, 4.49:1 on basalt (was a slate-700 fill, 1.57:1) */
.task-grid input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.task-grid label:hover,.task-grid label:has(input:checked){color:var(--on-basalt)}
.task-grid label:has(input:checked)::before{background:var(--on-basalt);border-color:var(--on-basalt);transform:rotate(45deg)}
.task-grid label:has(input:focus-visible){outline:2px solid var(--foil);outline-offset:2px}
.dial-head{display:flex;justify-content:space-between;align-items:baseline}
.dial-head label{margin:0}
.dial output{font-size:var(--t-st);font-weight:350;font-variant-numeric:tabular-nums;letter-spacing:-.02em;min-width:3ch;text-align:right}
.dial input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:8px 0 0;cursor:ew-resize;display:block}
.dial input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--slate-500)}
.dial input[type=range]::-moz-range-track{height:2px;background:var(--slate-500)}
.dial input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:content-box;width:5px;height:36px;margin-top:-17px;background:linear-gradient(90deg,var(--on-basalt) 0 1px,var(--foil) 1px calc(100% - 1px),var(--on-basalt) calc(100% - 1px));background-clip:content-box;border:0 solid var(--basalt);border-width:0 5px;border-radius:0;transition:transform .2s var(--ease)}
.dial input[type=range]::-moz-range-thumb{width:5px;height:36px;background:linear-gradient(90deg,var(--on-basalt) 0 1px,var(--foil) 1px calc(100% - 1px),var(--on-basalt) calc(100% - 1px));box-sizing:content-box;background-clip:content-box;border:0 solid var(--basalt);border-width:0 5px;border-radius:0}
.dial input[type=range]:active::-webkit-slider-thumb{transform:scaleY(1.15)}
.dial input[type=range]:focus-visible{outline:2px solid var(--foil);outline-offset:4px}
.scale{width:calc(100% - 3px);margin:2px 1.5px 0;height:14px}
.scale line{stroke:var(--slate-500);stroke-width:1;vector-effect:non-scaling-stroke}
.scale line.mj{stroke:var(--on-basalt)}
.scale-n{display:flex;justify-content:space-between;margin:6px 0 0;font-size:var(--t-small);color:var(--soft-basalt);font-variant-numeric:tabular-nums}
.inst-read{grid-column:7/13;grid-row:1/4;align-self:start;margin-top:-.08em}
.read-n{font-size:clamp(5.5rem,2rem + 10vw,11.5rem);font-weight:200;letter-spacing:-.055em;line-height:.86;font-variant-numeric:tabular-nums;margin-left:-.06em;white-space:nowrap}
.read-u{font-family:var(--serif);font-size:var(--t-st);margin-top:16px;letter-spacing:-.012em}
.read-s{font-size:var(--t-lead);margin-top:var(--s1);max-width:36ch;min-height:3em}
.years{margin-top:var(--s1);height:150px;overflow:hidden}
.years-row{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:6px;height:100%;max-width:560px}
.yr{height:100%;background:var(--slate-800);position:relative;overflow:hidden}
.yr i{position:absolute;inset:auto 0 0 0;height:100%;background:var(--on-basalt);transform-origin:bottom;transform:scaleY(var(--f,0));transition:transform .7s var(--ease)}
.read-f{margin-top:16px;font-size:var(--t-small);color:var(--soft-basalt);max-width:52ch;font-variant-numeric:tabular-nums}
.read-promise{margin-top:var(--s0);font-size:var(--t-body);max-width:44ch}
.inst-read .btn{margin-top:var(--s0)}

/* work */
.work{margin-top:var(--sec);padding-bottom:var(--sec)}
.work-h{grid-column:1/10;grid-row:1;max-width:14em}
.menu{grid-column:5/13;grid-row:2;margin-top:var(--hg);display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s2);row-gap:var(--row)}
.menu-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.menu-row h3{font-family:var(--serif);font-weight:400;font-size:var(--t-st);letter-spacing:-.015em}
.menu-row span{font-size:var(--t-small);color:var(--soft);white-space:nowrap;font-weight:500}
.menu p{margin-top:var(--s-1);max-width:40ch;font-size:var(--t-lead);line-height:1.5}
/* the direct route sits in the left column beside the menu, so the four options never float in an empty field */
.work-foot{grid-column:1/5;grid-row:2;align-self:start;margin-top:var(--hg);padding-right:var(--s0);display:grid;gap:var(--s0);justify-items:start}
.work-foot .small{max-width:52ch}

/* measure */
.measure-h{grid-column:1/10;max-width:13em}
.measure-fig{grid-column:1/5;margin-top:var(--hg)}
.measure-body{grid-column:7/13;margin-top:var(--hg)}
.kinds{display:grid;gap:var(--s1)}
.kinds p{margin-top:var(--s-2);max-width:40ch}
.kpi-lead{margin-top:var(--s2);font-weight:500}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1) var(--gap);margin-top:var(--s0)}
.kpis dt{font-family:var(--serif);font-size:var(--t-st);letter-spacing:-.015em;line-height:1.1}
.kpis dd{margin-top:6px}
.measure-body .statement{margin-top:var(--s2);max-width:28ch}
.measure-body strong{font-weight:500}

/* faq */
.faq-h{grid-column:1/5;align-self:start;max-width:7em}
.qs{grid-column:6/13}
.qs details{padding:12px 0}
.qs summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:48px;cursor:pointer;font-size:var(--t-lead);font-weight:460;letter-spacing:-.01em}
.qs summary::-webkit-details-marker{display:none}
.qs summary:hover{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
.chev{flex:0 0 16px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .35s var(--ease)}
.qs details[open] .chev{transform:rotate(180deg)}
.qs details p{margin-top:10px;max-width:56ch;padding-bottom:8px}

/* cta */
.cta{margin-top:var(--sec)}
.cta-film{height:56svh;min-height:320px;background:var(--stone-400) center/cover;overflow:hidden}
.cta-film.seen{background-image:url(img/salish-poster.webp)}
.cta-body{padding-block:var(--hg) var(--sec)}
.cta-h{grid-column:1/9}
.cta-h .statement{color:var(--soft);max-width:none}
.cta-h .h-xl{margin-top:var(--s-1);max-width:12em}
.cta-text{grid-column:8/13;margin-top:var(--s1)}
.cta-text .actions{margin-top:var(--s1)}
.cta-text .small{margin-top:var(--s-1)}
.cta-text .small a{color:var(--ink)}

/* footer: the name returns, quiet, at full width */
.foot{background:var(--basalt);color:var(--on-basalt);padding-top:var(--s3);padding-bottom:var(--s1)}
.foot .wm-solid{stroke:var(--on-basalt)}
.foot .lens-disc{fill:var(--slate-800)}
.foot .wm-ghost{stroke:var(--soft-basalt)}
.foot .wm-ghost-in{stroke:var(--slate-800)}
.foot .wm-skel{stroke:var(--on-basalt)}
.foot .wm-nodes circle{fill:var(--slate-800);stroke:var(--on-basalt)}
.foot .wm-cons circle{stroke:var(--soft-basalt)}.foot .wm-cons circle.c{fill:var(--soft-basalt)}
.foot-mark{padding:0 var(--pad);touch-action:pan-y}
.foot-mark .wm{cursor:crosshair}
.foot-row{margin-top:var(--s3);row-gap:var(--s1)}
.foot-line{grid-column:1/6;font-family:var(--serif);font-size:var(--t-st);line-height:1.25;max-width:18ch}
.foot-links{grid-column:7/10;display:grid;gap:10px;align-content:start}
.foot-links a{text-decoration:none}
.foot-links a:hover{text-decoration:underline;text-underline-offset:.3em}
.credits{grid-column:10/13;font-size:var(--t-small);line-height:1.5;color:var(--soft-basalt)}
.foot-legal{grid-column:1/7;color:var(--soft-basalt);margin-top:var(--s1)}
.foot-top{grid-column:7/13;justify-self:end;margin-top:var(--s1);color:var(--soft-basalt)}
.foot-top a{color:var(--on-basalt)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js [data-rise]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--d,0) * 80ms)}
  html.js [data-rise].in{opacity:1;transform:none}
  /* the construction: the frame is drawn, the red member is set, then the legs are cast around it */
  html.js .emblem-hero .wm-intro{opacity:1;animation:wm-out .9s var(--ease) 2.9s forwards}
  html.js .emblem-hero .wm-intro .wm-skel path{stroke-dasharray:1;stroke-dashoffset:1;animation:wm-draw 1.1s cubic-bezier(.6,0,.2,1) .25s forwards}
  html.js .emblem-hero .wm-intro .wm-nodes circle{opacity:0;animation:wm-node .5s var(--ease) 1s forwards}
  html.js .emblem-hero .member .mem-l{stroke-dasharray:1;stroke-dashoffset:1;animation:wm-draw .8s cubic-bezier(.6,0,.2,1) 1.05s forwards}
  html.js .emblem-hero .member .pins circle{opacity:0;animation:wm-node .4s var(--ease) 1.7s forwards}
  html.js .emblem-hero .wm-solid path{animation:wm-cast 1.4s cubic-bezier(.6,0,.1,1) 1.75s both}
  html.js .shutter{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.15,1)}
  html.js .shutter img{transform:scale(1.1);transition:transform 2s var(--ease)}
  html.js .in .shutter{clip-path:inset(0 0 0 0)}
  html.js .in .shutter img{transform:none}
  .drift.in img{animation:drift 4.6s var(--ease) both}
}
html.done .emblem-hero *{animation:none!important}
html.done .emblem-hero .wm-intro{opacity:0}
html.done .emblem-hero .member .mem-l{stroke-dashoffset:0}html.done .emblem-hero .member .pins circle{opacity:1}
@keyframes wm-draw{to{stroke-dashoffset:0}}
@keyframes wm-node{from{opacity:0}to{opacity:1}}
@keyframes wm-cast{from{stroke-width:0}}
@keyframes wm-out{to{opacity:0}}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.06) translateX(-1.2%)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}

/* ---------- tablet ---------- */
@media (max-width:1099px){
  .bar-nav{gap:24px;font-size:var(--t-small)}
  .hero{min-height:0;align-items:start;padding-block:var(--s0) 0;row-gap:var(--s2)}
  .hero-copy{grid-column:1/13;grid-row:2}
  .hero-mark{grid-column:4/10;grid-row:1;justify-self:center;align-self:start;width:100%;max-width:min(300px,30svh)}
  .problem-head{grid-column:1/13}
  .problems{grid-template-columns:1fr 1fr;row-gap:var(--row)}
  .frame-fig{grid-column:1/12}
  .frame-line{grid-column:2/12;margin-top:var(--s2)}
  .steps{grid-template-columns:1fr 1fr;row-gap:var(--row)}
  .steps li:nth-child(odd){--k:0}.steps li:nth-child(even){--k:1}
  .band-line{grid-column:4/13}
  .inst-h{grid-column:1/13}.inst-intro{grid-column:1/10}
  .inst-controls{grid-column:1/13;margin-top:var(--hg)}
  .inst-read{grid-column:1/13;grid-row:4;margin-top:var(--s2)}
  .work-h{grid-column:1/13;padding-right:0}
  .menu{grid-row:2;margin-top:var(--hg)}
  .menu,.work-foot{grid-column:1/13}
  .work-foot{grid-row:3;margin-top:var(--row);padding-right:0}
  .measure-h{grid-column:1/13}
  .measure-fig{grid-column:1/6}
  .measure-body{grid-column:7/13}
  .faq-h{grid-column:1/13;max-width:none}
  .qs{grid-column:1/13;margin-top:var(--hg)}
  .cta-h{grid-column:1/13}.cta-text{grid-column:4/13}
  .foot-line{grid-column:1/13}.foot-links{grid-column:1/7}.credits{grid-column:7/13}
}
@media (max-width:899px){
  .bar-nav{display:none}
  .bar-menu{display:block;grid-column:9/13;justify-self:end;position:relative}
  .bar-menu summary{list-style:none;min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:500;font-size:var(--t-body)}
  .bar-menu summary::-webkit-details-marker{display:none}
  .bar-menu nav{position:absolute;right:0;top:52px;z-index:5;background:var(--paper);padding:12px 20px;display:grid;min-width:240px}
  .bar-menu nav a{padding:12px 0;text-decoration:none;font-size:var(--t-body)}
  .measure-fig{grid-column:1/8}
  .measure-body{grid-column:1/13}
  .menu{grid-template-columns:1fr}
}
/* ---------- phone ---------- */
@media (max-width:599px){
  :root{--gap:12px;--bar:76px;--row:var(--s1)}
  .lockup{grid-column:1/9}
  /* phone hero: the mark gives way so headline, lead and the button all sit inside the first screen */
  .hero{padding-top:var(--s-1);row-gap:var(--s1)}
  .hero-mark{grid-column:1/13;width:auto;max-width:none}
  .hero-mark svg{height:clamp(120px,calc(100svh - 500px),240px);width:auto;aspect-ratio:86/112}
  .hero-copy .lead{margin-top:var(--s0)}
  .w-wide{display:none}
  .hero-copy h1{font-size:2.375rem}
  .actions{margin-top:var(--s0);gap:var(--s-1) var(--s0)}
  .actions .btn{width:100%;justify-content:center}
  .problems{grid-template-columns:1fr}
  .frame-fig{grid-column:1/13;margin-right:0}
  .frame-line{grid-column:1/12;margin-top:var(--s1)}
  .steps{grid-template-columns:1fr}
  .steps li{--k:0!important;padding-top:0}
  .steps li:nth-child(even){padding-left:16%}
  .band-img{aspect-ratio:4/3}
  .band-line{grid-column:1/13}
  .task-grid label{font-size:var(--t-body);min-height:48px;gap:10px}
  .read-n{font-size:clamp(4.5rem,24vw,6.5rem)}
  .years{height:96px}
  .years-row{gap:4px}
  .work-foot{margin-top:var(--s2)}
  .work-foot .btn{width:100%;justify-content:center}
  .measure-fig{grid-column:3/13}
  .measure-body{margin-top:var(--s2)}
  .kpis{grid-template-columns:1fr;gap:var(--s-1)}
  .qs summary{font-size:var(--t-body)}
  .cta-film{height:44svh;min-height:240px}
  .cta-text{grid-column:1/13}
  .cta-text .btn{width:100%;justify-content:center}
  .wm-foot.wm-wide{display:none}.wm-foot.wm-stack{display:block}
  .foot{padding-top:var(--s2)}
  .foot-row{margin-top:var(--s2)}
  .foot-links{gap:0}.foot-links a{display:inline-block;padding:var(--s-2) 0}
  .foot-links,.credits,.foot-legal,.foot-top{grid-column:1/13}
  .foot-top{justify-self:start;margin-top:0}
}

.statement.wide{max-width:30ch}
.work{background:var(--stone)}

a,button,summary,label,input{touch-action:manipulation;-webkit-tap-highlight-color:rgba(28,31,34,.12)}
.bar-menu summary:hover{text-decoration:underline;text-underline-offset:.4em}
.cta-film{position:relative}
.film-toggle{position:absolute;right:var(--m);bottom:20px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:0;background:var(--ground);color:var(--ink);cursor:pointer;transition:background-color .2s var(--ease)}
.film-toggle:hover{background:var(--stone-25)}
.film-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.film-toggle .ic-play{display:none;fill:currentColor;stroke:none}
.film-toggle[aria-pressed="true"] .ic-pause{display:none}.film-toggle[aria-pressed="true"] .ic-play{display:block}

/* ---------- composition (desktop, 1100px and up): no small element alone in a field ----------
   1. a statement paired with a picture is set at the section-headline scale and tied to the picture's edges
   2. grids fill the content width directly under their heading
   3. two-column rows share a top and a bottom edge */
@media (min-width:1100px){
  .problem-head{grid-column:1/13}
  .problem-head .h-xl{max-width:none}
  /* the horse plate: the engraving left (columns 1-8, bled off the page edge); the statement and its caption form
     one label in the column beside it, centred on the engraving (equal margins above and below, like a plate label). The statement holds to two lines: its
     longer line ("work, not with a tool.") is 8.1em, so it is sized to the four-column width / 8.3 (57px at 1728,
     51px at 1440), never above the headline scale */
  .frame-sec .g{grid-template-rows:1fr auto auto 1fr}
  .frame-fig{grid-column:1/13;grid-row:1/5;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;margin-left:0}
  .frame-fig .frame{grid-column:1/9;grid-row:1/5;margin-left:calc(-1 * var(--pad))}
  .frame-fig figcaption{grid-column:9/13;grid-row:3;align-self:start;margin-top:var(--s-1);padding-left:0;font-size:var(--t-body);max-width:none}
  .frame-line{grid-column:9/13;grid-row:2;align-self:end;max-width:none}
  .frame-line,.band-line{font-size:var(--t-xl);line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
  .frame-line{font-size:min(var(--t-xl),calc(((100vw - 2 * var(--pad)) / 3 - 16px) / 8.3))}
  /* the Grand Coulee line: a full-width pull line on the grid, not a small note in the corner */
  .band-line{grid-column:1/13;max-width:none;margin-top:var(--s1)}
  /* ways to work together: one full-width row of four under the heading, the direct route as the closing row */
  .work-h{grid-column:1/13;max-width:none}
  /* measure: heading on one line, the two kinds of value side by side so the column is filled across */
  .measure-h{grid-column:1/13;max-width:none}
  .measure-body{grid-column:6/13}
  .kinds{grid-template-columns:1fr 1fr;column-gap:var(--gap)}
  .menu{grid-column:1/13;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)}
  .menu-row{flex-wrap:wrap;column-gap:12px;row-gap:2px}
  .menu p{font-size:var(--t-body);max-width:none}
  .work-foot{grid-column:1/13;grid-row:3;margin-top:var(--row);padding-right:0;display:grid;grid-template-columns:subgrid;align-items:start;row-gap:var(--s-1)}
  .work-foot .statement{grid-column:1/7;grid-row:1/3;max-width:none}
  .work-foot p:nth-child(2){grid-column:7/13;grid-row:1}
  .work-foot .small{grid-column:7/13;grid-row:2}
  /* questions: heading over the full width, the eight questions in two columns of four that fill it,
     set in the display serif so the list carries weight; the first answer starts open */
  .faq-h{grid-column:1/13;max-width:none}
  .qs{grid-column:1/13;margin-top:var(--hg);display:grid;grid-template-columns:subgrid;align-items:start}
  .qs-col:first-child{grid-column:1/7}.qs-col:last-child{grid-column:7/13}
  .qs summary{font-family:var(--serif);font-weight:400;font-size:var(--t-st);letter-spacing:-.012em;line-height:1.25}
  /* closing call: one composition. The headline runs the content width at the hero's scale; under it the lead
     takes the left half and the action the right half, on a shared top edge (the same split as the work row) */
  .cta-h{grid-column:1/13}
  .cta-h .h-xl{max-width:none;font-size:clamp(var(--t-xl),min(.9rem + 3.95vw,1rem + 7svh),5rem)}
  .cta-text{grid-column:1/13;margin-top:var(--s1);display:grid;grid-template-columns:subgrid;align-items:start;row-gap:var(--s-1)}
  .cta-text .lead{grid-column:1/7;grid-row:1/3}
  .cta-text .actions{grid-column:7/13;grid-row:1;margin-top:0}
  .cta-text .small{grid-column:7/13;grid-row:2;margin-top:0}
  .nw{white-space:nowrap}
}

/* batch 3 (2026-10-30): the red needle gets 1px on-basalt keylines so the thumb's edge is 13.8:1 on basalt (red alone was 2.66:1) */
/* no italics in the sans (Hanken Grotesk has no italic file): the audit sizes are set upright, medium weight */
.menu em{font-style:normal;font-weight:500}
/* a light pointer to the workshop page under the offers */
.work-aside{font-size:var(--t-body);max-width:52ch}
.work-aside .tlink{white-space:nowrap}
@media (min-width:1100px){.work-foot .work-aside{grid-column:7/13;grid-row:3}}