/* Noon, 09.2026 — the drawing-set system. Desk, sheet, hairline, title block. */
:root{
  --paper:#EAE6DC;--sheet:#F7F5EE;--card:#FFFFFF;
  --ink:#15160F;--ink-2:#4A4B41;--muted:#6A6A5C;
  --hair:#C4BDA9;--hair-2:#E2DDD0;--bronze:#725F36;--tint:#EFEAD9;
  --display:'Jost','Avenir Next','Futura',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --serif:'Fraunces',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 14.5px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
/* paper: a faint grain over the desk, so the ground reads as material rather than a colour */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img,video{max-width:100%}
a{color:inherit}
:focus-visible{outline:1.5px solid var(--bronze);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--sheet);padding:8px 12px}
.skip:focus{left:12px;z-index:100}

/* ---- type: the whole voice is in the small labels ---- */
.lb{font:500 10px/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.lb--bz{color:var(--bronze)}
.h{font:300 clamp(28px,3.6vw,50px)/1.04 var(--display);letter-spacing:.14em;text-transform:uppercase;margin:10px 0 0;text-wrap:balance}
.h--sm{font-size:clamp(22px,2.7vw,37px);letter-spacing:.16em}
.said{font:400 clamp(16px,1.6vw,20px)/1.5 var(--serif);font-style:italic;color:var(--bronze);margin:14px 0 0;max-width:52ch}
.plain{font:400 15px/1.7 var(--sans);color:var(--ink-2);max-width:56ch;margin:16px 0 0}
.plain strong{color:var(--ink);font-weight:600}

/* ---- register bar ---- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;height:54px;padding:0 22px;
  background:var(--sheet);border-bottom:1px solid var(--hair)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 15px/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
.brand{gap:8.2px}.brand__mark{width:24px;height:24px;flex:none}.brand__wm{height:19.7px;width:auto;flex:none;display:block;color:var(--bronze)}
.nav__links{display:flex;gap:2px;list-style:none;margin:0 0 0 auto;padding:0}
.nav__links a{display:block;padding:8px 12px;text-decoration:none;color:var(--muted);
  font:500 10.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border:1px solid var(--ink);background:var(--ink);color:var(--sheet);
  border-radius:2px;text-decoration:none;cursor:pointer;font:500 10.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.btn:hover{background:#000}
.btn--line{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn--line:hover{background:var(--card);border-color:var(--ink)}

/* ---- the set ---- */
.set{max-width:1280px;margin:0 auto;padding:0 24px 96px;display:flex;flex-direction:column;gap:88px;position:relative;z-index:1}
.sheet{background:var(--sheet);border:1px solid var(--hair);padding:56px 60px 0;display:flex;flex-direction:column;min-height:0;position:relative}
/* drawing frame: the inner rule every architectural sheet carries */
.sheet::before{content:'';position:absolute;inset:12px;border:1px solid var(--hair-2);pointer-events:none}
.sheet__tag{position:absolute;top:26px;right:30px;font:500 10px/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.sheet__in{display:flex;flex-direction:column;flex:1;min-height:0}
.sheet__body{flex:1;padding-bottom:44px}
.sheet__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sheet__head .open{font:500 10.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);text-decoration:none;
  border-bottom:1px solid var(--hair);padding-bottom:6px}
.sheet__head .open:hover{color:var(--ink);border-color:var(--ink)}

/* title block, pinned to the foot of every sheet */
.tb{display:grid;grid-template-columns:2fr 1.1fr 1fr 1.2fr .6fr;gap:18px;align-items:end;border-top:1px solid var(--ink);padding:20px 0 22px;margin-top:auto}
.tb__n{font:400 clamp(15px,1.7vw,21px)/1 var(--display);letter-spacing:.2em;text-transform:uppercase}
.tb__s{font:400 12px/1.3 var(--serif);font-style:italic;color:var(--muted);margin-top:4px}
.tb dl{margin:0}
.tb dd{margin:2px 0 0;font:400 13.5px/1.35 var(--sans);color:var(--ink-2)}
.tb dd i{font:400 11px/1.3 var(--serif);color:var(--muted);display:block}
.tb__f{grid-column:1/-1;border-top:1px solid var(--hair-2);padding-top:9px;font:500 10px/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

/* ---- 00 cover: the reel is the figure ---- */
.cover{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:40px}
.cover .toc{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:6px}
.cover__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.entrance{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:end;margin-top:44px}
.entrance h1{margin:12px 0 0;font:400 clamp(24px,2.9vw,40px)/1.22 var(--serif);font-style:italic;color:var(--ink);letter-spacing:0;text-transform:none;text-wrap:balance}
.entrance .said{max-width:none}
.sheet__head .said{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:10px;letter-spacing:.01em}
.toc.toc--line{display:flex;flex-wrap:wrap;gap:12px 34px;border-top:1px solid var(--hair);padding-top:18px;margin:0}
.toc.toc--line a{font:500 10.5px/1.4 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.toc.toc--line a:hover{color:var(--bronze)}
.toc.toc--line a b{display:inline;font:inherit;color:var(--bronze);margin-right:6px}
.hero{position:relative;height:min(82vh,56.25vw);overflow:clip;background:#1a1a16;border:0}
.reel{position:absolute;inset:0;z-index:1}
.reel__clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;opacity:0;transition:opacity 2s ease;pointer-events:none;background:#1a1a16}
.reel__clip.is-on{opacity:1}
/* film treatment: a slow push into the live clip, a warm grade, moving grain, a soft vignette, registration marks */
.reel__clip{will-change:opacity}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.075)}}
.hero::after,.plate--film::after{content:'';position:absolute;inset:-6%;z-index:4;pointer-events:none;opacity:.11;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:220px 220px;animation:grain .7s steps(1) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-1.4%,.9%)}40%{transform:translate(1.1%,-1.3%)}60%{transform:translate(-.8%,-1%)}80%{transform:translate(1.3%,1.2%)}100%{transform:translate(.2%,.6%)}}
.reel__plan{position:absolute;inset:0;z-index:5;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .5s ease;pointer-events:none;background:#1a1a16}
.reel__clip,.reel__plan{object-position:50% 58%}
.reel__plan.is-gone{opacity:0}
.rm{position:absolute;z-index:6;width:12px;height:12px;pointer-events:none;border:0 solid rgba(247,245,238,.85)}
.rm--tl{top:10px;left:10px;border-top-width:1px;border-left-width:1px}.rm--tr{top:10px;right:10px;border-top-width:1px;border-right-width:1px}
.rm--bl{bottom:10px;left:10px;border-bottom-width:1px;border-left-width:1px}.rm--br{bottom:10px;right:10px;border-bottom-width:1px;border-right-width:1px}
.reel__bar{position:relative;height:1px;background:var(--hair-2)}
.reel__bar i{position:absolute;left:0;top:0;height:1px;width:0;background:var(--bronze)}
.reel__meta .lb{transition:opacity .45s ease,transform .45s ease}
.reel__meta .lb.is-swap{opacity:0;transform:translateY(5px)}
.reel__ctl{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.reel__idx{font:500 10.5px/1 var(--display);letter-spacing:.2em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* ---- the cover's type: set by the page over the film, on cue, in the plates' own voice ---- */
.hero::before{background:linear-gradient(to top,rgba(10,9,6,.36) 0%,rgba(10,9,6,0) 38%),linear-gradient(to bottom,rgba(10,9,6,.5) 0%,rgba(10,9,6,0) 24%),radial-gradient(115% 90% at 50% 42%,rgba(10,9,6,0) 56%,rgba(10,9,6,.4) 100%)}
.hero__shade{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .8s ease;background:linear-gradient(to top,rgba(10,9,6,.86) 0%,rgba(10,9,6,.5) 30%,rgba(10,9,6,0) 58%)}
.hero.has-type .hero__shade{opacity:1}
.hero__title,.hero__key,.hero__end{position:absolute;left:clamp(24px,5vw,72px);bottom:clamp(30px,5vw,66px);z-index:5;margin:0;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.2,1);pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.3),0 3px 22px rgba(0,0,0,.4)}
.hero__title.is-on,.hero__key.is-on,.hero__end.is-on{opacity:1;transform:none}
.hero__title.is-on a,.hero__end.is-on a{pointer-events:auto}
.hero__title .lb{color:rgba(255,255,255,.8)}
.hero__title h2{margin:12px 0 0;font:300 clamp(34px,5.4vw,84px)/1 var(--display);letter-spacing:.09em;text-transform:uppercase;color:#fff}
.hero__title h2 a{color:inherit;text-decoration:none}
.hero__data{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0 clamp(18px,2.4vw,38px);margin:22px 0 0;border-top:1px solid rgba(255,255,255,.32);padding-top:14px}
.hero__data dt{font:500 9.5px/1.2 var(--display);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.hero__data dd{margin:7px 0 0;font:300 clamp(17px,1.5vw,22px)/1.1 var(--display);letter-spacing:.04em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
/* the end card: the last chapter runs out over empty ground at the foot of the frame (Dorian, Oct 10), so the funnel is set there, on cue, over the shade */
.hero__end .lb{color:rgba(255,255,255,.8)}
.hero__end h2{margin:12px 0 0;font:300 clamp(30px,4.4vw,66px)/1 var(--display);letter-spacing:.09em;text-transform:uppercase;color:#fff}
.hero__end .btn{display:inline-block;margin-top:20px;background:#F7F5EE;color:#15160F;border:1px solid #F7F5EE;text-shadow:none}
.hero__end .btn:hover{background:#fff;color:#15160F}
.hero__key{list-style:none;padding:0;display:grid;gap:14px}
.hero__key li{display:flex;gap:14px;align-items:flex-start;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.hero__key.is-on li{opacity:1;transform:none}.hero__key.is-on li:nth-child(2){transition-delay:.35s}.hero__key.is-on li:nth-child(3){transition-delay:.7s}
.hero__key b{flex:none;width:24px;height:24px;border-radius:50%;background:#15160F;border:1px solid rgba(255,255,255,.9);color:#fff;font:500 11px/22px var(--display);text-align:center;text-shadow:none}
.hero__key u{display:block;text-decoration:none;font:500 10.5px/1.3 var(--display);letter-spacing:.22em;text-transform:uppercase;color:#fff}
.hero__key i{display:block;margin-top:3px;font:400 15px/1.35 var(--serif);font-style:italic;color:rgba(255,255,255,.9)}
.hero__read{position:absolute;top:46px;right:30px;z-index:5;margin:0;text-align:right;font:500 10px/1.75 var(--display);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums;pointer-events:none}
.hero__read span{display:block}
/* the airy grade is brighter under the readouts: the type carries its own soft halo instead of a darker picture */
.hero__read,.reel__meta .lb,.reel__idx{text-shadow:0 1px 12px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.4)}
.hero__read{color:rgba(255,255,255,.8)}
.hero .reel__toggle{color:#fff;border-color:rgba(255,255,255,.6)}.hero .reel__toggle:hover{border-color:#fff}
.hero__play,.film__play{position:absolute;left:50%;top:50%;z-index:7;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:1px solid rgba(255,255,255,.9);background:rgba(10,9,6,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.hero__play[hidden],.film__play[hidden]{display:none}.hero__play svg,.film__play svg{width:24px;height:24px;margin-left:3px}
.hero.is-idle{cursor:pointer}
.reel__clip::-webkit-media-controls-start-playback-button,.reel__clip::-webkit-media-controls{display:none!important;-webkit-appearance:none}
/* the booklet's picture treatment: every picture fades softly into the paper at its edges, colour held back a touch */
.sheet__head h2 a{color:inherit;text-decoration:none}.sheet__head h2 a:hover{color:var(--bronze)}
a.plate-link{display:block;color:inherit;text-decoration:none}
/* ---- entrance: full-bleed film plates, the type set into the picture, the desk showing between ---- */
.film{margin:0 calc(50% - 50vw);width:100vw;position:relative}
.film:not(.film--cover){content-visibility:auto;contain-intrinsic-size:auto 900px}
.film__plate{position:relative;display:block;height:min(84vh,940px);overflow:hidden;background:#1a1a16;color:#fff;text-decoration:none}
.film__plate img,.film__plate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.06) sepia(.1)}
.film__plate video[data-graded]{filter:none;object-position:50% 50%}
.film__plate--contain img{object-fit:contain;padding:6vh 6vw 22vh;box-sizing:border-box}
.film__plate::before,.hero::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(10,9,6,.86) 0%,rgba(10,9,6,.38) 34%,rgba(10,9,6,0) 60%),linear-gradient(to bottom,rgba(10,9,6,.42) 0%,rgba(10,9,6,0) 26%),radial-gradient(115% 90% at 50% 42%,rgba(10,9,6,0) 48%,rgba(10,9,6,.6) 100%)}
.film__grid{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.55;background-image:linear-gradient(to right,rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.07) 1px,transparent 1px);background-size:calc(100% / 12) calc(100% / 6);mix-blend-mode:overlay}
.film__plate::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.3;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:200px 200px}
.film__tag{position:absolute;top:26px;right:30px;z-index:4;font:500 10px/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.film__no{position:absolute;top:clamp(14px,2.4vw,30px);left:clamp(24px,5vw,72px);z-index:4;font:300 clamp(56px,7.5vw,116px)/1 var(--display);letter-spacing:.02em;color:rgba(255,255,255,.34);mix-blend-mode:soft-light;text-shadow:0 0 24px rgba(10,9,6,.35)}
.film__cap{position:absolute;left:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px);bottom:clamp(28px,5vw,64px);z-index:4;max-width:72ch}
.film__cap .lb{color:rgba(255,255,255,.72)}
.film__cap h2{margin:12px 0 0;font:300 clamp(30px,4.6vw,66px)/1.02 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#fff;text-wrap:balance}
.film__cap h1{margin:12px 0 0;font:400 clamp(26px,3.6vw,52px)/1.16 var(--serif);font-style:italic;color:#fff;letter-spacing:0;text-transform:none;text-wrap:balance;max-width:none}
.film__cap.film__cap--cover{max-width:min(66vw,760px)}
.film__said{margin:16px 0 0;font:500 10.5px/1.6 var(--display);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.film__data{position:absolute;right:clamp(24px,5vw,72px);bottom:clamp(30px,5vw,66px);z-index:4;display:grid;grid-template-columns:repeat(4,auto);gap:0 clamp(18px,2.4vw,38px);margin:0;border-top:1px solid rgba(255,255,255,.3);padding-top:14px}
.film__data div{min-width:0}.film__data dt{font:500 9.5px/1.2 var(--display);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.film__data dd{margin:7px 0 0;font:300 clamp(17px,1.5vw,22px)/1.1 var(--display);letter-spacing:.04em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.film__cap{max-width:min(52vw,40ch)}
.film--open .film__plate{height:min(66vh,720px);cursor:default}
.film--open .film__cap{max-width:min(70vw,68ch)}
.film__cap h1.film__h2{font:300 clamp(30px,4.6vw,66px)/1.02 var(--display);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:#fff;max-width:none;text-wrap:balance}
.film__more{max-width:1280px;margin:0 auto;padding:0 24px}
.film .strip{margin-top:26px}
.film .rm{border-color:rgba(247,245,238,.7)}
.cover__lede{max-width:1280px;margin:0 auto;padding:36px 24px 0}
.cover__lede h1{margin:10px 0 0;font:400 clamp(24px,2.9vw,40px)/1.22 var(--serif);font-style:italic;color:var(--ink);letter-spacing:0;text-transform:none;text-wrap:balance;max-width:28ch}
.cover__lede .film__said{color:var(--muted);margin-top:14px}
.cover__row{max-width:1280px;margin:0 auto;padding:22px 24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap}
.cover__row .toc.toc--line{border-top:0;padding-top:0;flex:1 1 auto}
.begin{max-width:1280px;margin:0 auto;padding:0 24px;width:100%}
.begin__in{border-top:1px solid var(--ink);padding-top:30px}
.begin .tb{margin-top:44px}
/* pictures everywhere carry a dark vignette and the film grade, so they sit as one body of work */
.frame{position:relative;display:block;overflow:hidden;background:var(--hair-2)}
.frame img,.frame video{display:block;width:100%;filter:saturate(.9) contrast(1.05) sepia(.08)}
.frame::after,.plate:not(.plate--film)::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 100% at 50% 45%,rgba(10,9,6,0) 52%,rgba(10,9,6,.45) 100%);box-shadow:inset 0 0 0 1px rgba(10,9,6,.08)}
.plate img,.plate video{filter:saturate(.9) contrast(1.05) sepia(.08)}
.kn{z-index:2}
/* ---- drawn plates: a drawing sits on paper at true scale, never in a dark void ---- */
.film__plate--drawn{background:var(--sheet);color:var(--ink);display:flex;flex-direction:column;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.film__plate--drawn::before{background:radial-gradient(120% 100% at 50% 40%,rgba(21,22,15,0) 60%,rgba(21,22,15,.14) 100%)}
.film__plate--drawn::after{opacity:.14;mix-blend-mode:multiply}
.film__plate--drawn .film__grid{opacity:1;mix-blend-mode:normal;background-image:linear-gradient(to right,rgba(21,22,15,.032) 1px,transparent 1px),linear-gradient(to bottom,rgba(21,22,15,.032) 1px,transparent 1px);background-size:24px 24px}
.film__sheet{position:relative;z-index:1;display:flex;flex:1 1 0;min-height:0;padding:clamp(60px,9vh,92px) clamp(24px,5vw,72px) 10px}
.film__plate--drawn img{position:static;inset:auto;flex:1 1 0;min-height:0;min-width:0;width:100%;height:auto;object-fit:contain;object-position:50% 50%;padding:0;filter:none;mix-blend-mode:multiply;transition:transform 1.6s ease}
.film__plate--drawn:hover img{transform:scale(1.015)}
.film__band{position:relative;z-index:4;flex:0 0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;margin:0 clamp(24px,5vw,72px);padding:18px 0 clamp(26px,4.5vw,48px);border-top:1px solid var(--hair)}
.film__plate--drawn .film__cap,.film__plate--drawn .film__data{position:static;max-width:none}
.film__plate--drawn .film__cap{max-width:52ch}.film__plate--drawn .film__cap .lb{color:var(--bronze)}
.film__plate--drawn .film__cap h2{color:var(--ink);font-size:clamp(26px,3.6vw,52px)}
.film__plate--drawn .film__data{border-top:0;padding-top:0}.film__plate--drawn .film__data dt{color:var(--muted)}.film__plate--drawn .film__data dd{color:var(--ink)}
.film__plate--drawn .film__no{color:rgba(21,22,15,.09);mix-blend-mode:normal;text-shadow:none}
.film__plate--drawn .film__tag{color:var(--muted)}
.film--drawn .rm{border-color:rgba(21,22,15,.45)}
/* ---- register: a gallery of plates, then the index ---- */
.rg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px;margin-top:32px}
.rc{position:relative;display:block;text-decoration:none;color:var(--ink);min-width:0}
.rc--wide{grid-column:1/-1}
.rc__im{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:#1a1a16}
.rc--wide .rc__im{aspect-ratio:21/9}
.rc__im img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.06) sepia(.1);transition:transform 1.4s ease}
a.rc:hover .rc__im img{transform:scale(1.035)}
.rc__im::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(10,9,6,.82) 0%,rgba(10,9,6,.28) 38%,rgba(10,9,6,0) 62%),radial-gradient(115% 90% at 50% 42%,rgba(10,9,6,0) 50%,rgba(10,9,6,.5) 100%)}
.rc__im::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.28;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:200px 200px}
.rc__no{position:absolute;top:12px;left:18px;z-index:4;font:300 clamp(34px,4vw,54px)/1 var(--display);letter-spacing:.02em;color:rgba(255,255,255,.34);mix-blend-mode:soft-light}
.rc__tag{position:absolute;top:16px;right:16px;z-index:4;font:500 9.5px/1.2 var(--display);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.rc__cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:4;color:#fff}
.rc__cap .lb{display:block;color:rgba(255,255,255,.72)}
.rc__h{display:block;margin-top:8px;font:300 clamp(22px,2.3vw,32px)/1.05 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#fff;text-wrap:balance}
.rc--wide .rc__h{font-size:clamp(28px,3.4vw,48px)}
.rc__meta{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding-top:14px}
.rc__ds{font:400 14.5px/1.55 var(--serif);font-style:italic;color:var(--ink-2);max-width:56ch}
.rc__yr{font:500 10.5px/1.6 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rc--drawn .rc__im{background:var(--sheet);border:1px solid var(--hair);background-image:linear-gradient(to right,rgba(21,22,15,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(21,22,15,.055) 1px,transparent 1px);background-size:8.333% 16.666%}
.rc--drawn .rc__im img{object-fit:contain;padding:7% 6% 22%;box-sizing:border-box;mix-blend-mode:multiply;filter:none}
.rc--drawn .rc__im::before{background:radial-gradient(120% 100% at 50% 40%,rgba(21,22,15,0) 62%,rgba(21,22,15,.12) 100%)}
.rc--drawn .rc__im::after{opacity:.4;mix-blend-mode:multiply}
.rc--drawn .rc__no{color:rgba(21,22,15,.09);mix-blend-mode:normal}.rc--drawn .rc__tag{color:var(--muted)}
.rc--drawn .rc__cap,.rc--drawn .rc__h{color:var(--ink)}.rc--drawn .rc__cap .lb{color:var(--bronze)}
.reg--index{margin-top:44px}.reg--index td{padding:12px 14px 12px 0}.reg--index .no{width:48px}
/* ---- services: a specification, every line with its picture ---- */
.svc{margin-top:6px}
.svc__zone{border-top:1px solid var(--ink);padding:26px 0 6px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.svc__zone .lb{color:var(--bronze)}.svc__zone p{margin:0;font:400 15px/1.5 var(--serif);font-style:italic;color:var(--muted)}
.svc__row{display:grid;grid-template-columns:52px 300px minmax(0,1fr);gap:0 28px;align-items:center;padding:22px 0;border-top:1px solid var(--hair-2);text-decoration:none;color:inherit}
.svc__zone+.svc__row{border-top:0}
.svc__no{font:300 26px/1 var(--display);letter-spacing:.04em;color:var(--bronze);font-variant-numeric:tabular-nums}
.svc__im{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--hair-2)}
.svc__im img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.05) sepia(.08);transition:transform 1.3s ease}
.svc__im::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 100% at 50% 45%,rgba(10,9,6,0) 55%,rgba(10,9,6,.42) 100%);box-shadow:inset 0 0 0 1px rgba(10,9,6,.08)}
a.svc__row:hover .svc__im img{transform:scale(1.04)}a.svc__row:hover .svc__h{color:var(--bronze)}
.svc__h{display:block;font:400 17px/1.25 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:color .3s}
.svc__d{display:block;margin-top:8px;font:400 14.5px/1.6 var(--serif);font-style:italic;color:var(--ink-2);max-width:56ch}
.svc__see{display:block;margin-top:12px;color:var(--bronze)}
/* ---- reveal: visible at rest; only what sits below the fold at load eases in ---- */
.rv--wait{opacity:0;transform:translateY(22px)}
.rv--in{opacity:1;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.plate--film{overflow:hidden}
.plate--film::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(110% 85% at 50% 45%,rgba(0,0,0,0) 60%,rgba(18,16,10,.26) 100%)}
.plate--film::after{opacity:.13}
.plate--film video{filter:saturate(.9) contrast(1.04) sepia(.1);will-change:transform}
.plate--film video[data-graded]{filter:none}
.plate--film.is-playing video[data-graded]{animation:none}
.plate--film.is-playing video{animation:push 18s linear forwards}
.reel__yt{width:100%;height:100%}
.reel__meta{position:absolute;right:clamp(20px,3vw,30px);bottom:clamp(20px,3vw,28px);z-index:6;display:flex;align-items:center;gap:16px;padding:0}
.reel__meta .lb{color:rgba(255,255,255,.72)}.reel__idx{color:rgba(255,255,255,.7)}.reel__toggle{border-color:rgba(255,255,255,.45);color:#fff}.reel__toggle:hover{border-color:#fff;color:#fff}
.reel__toggle{background:none;border:1px solid var(--hair);padding:7px 11px;cursor:pointer;color:var(--ink-2);
  font:500 9.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;border-radius:2px}
.reel__toggle:hover{border-color:var(--ink);color:var(--ink)}
.toc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px;border-top:1px solid var(--hair);padding-top:18px;margin-top:40px}
.toc a{display:block;text-decoration:none;min-width:0}
.toc b{display:block;font:400 12px/1.3 var(--display);letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.toc span{display:block;margin-top:2px;font:400 11.5px/1.35 var(--serif);font-style:italic;color:var(--muted)}
.toc a:hover b{color:var(--bronze)}

/* ---- L sheets: one keynoted plate, a key, three more frames ---- */
.plate{position:relative;margin:28px auto 0;max-width:100%}
.plate img,.plate video{display:block;width:100%;height:auto;background:var(--hair-2)}
.plate video{object-fit:cover}
.kn{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--ink);color:var(--sheet);
  font:500 10.5px/22px var(--sans);text-align:center;box-shadow:0 0 0 2px var(--sheet),0 1px 4px rgba(0,0,0,.35)}
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 28px;border-top:1px solid var(--hair);margin-top:24px;padding-top:16px}
.key{display:flex;gap:8px;align-items:flex-start;min-width:0}
.key b{flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:var(--ink);color:var(--sheet);font:500 9.5px/16px var(--sans);text-align:center}
.key u{text-decoration:none;font:500 11.5px/1.35 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.key i{display:block;font:400 13px/1.4 var(--serif);color:var(--muted)}
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:34px}
.strip--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.strip a,.strip figure{display:block;margin:0;text-decoration:none;min-width:0}
.strip img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--hair-2)}
.strip .lb{display:block;margin-top:10px}
.strip a:hover .lb{color:var(--bronze)}
.seq{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:28px}
.seq figure{margin:0}
.seq img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--hair-2)}
.seq figcaption{margin-top:8px;font:500 11.5px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.seq figcaption span{color:var(--bronze);margin-right:8px}
.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px}
.figs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.figs figure{margin:0}
.figs img,.figs video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--hair-2)}
.figs figcaption{margin-top:7px}

/* ---- A sheets: narrative in three dense columns ---- */
.narr3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;align-items:start;margin-top:30px}
.nfig{margin:0 0 18px}.nfig img{width:100%;height:auto;display:block;background:var(--hair-2)}
.nfig figcaption{margin-top:8px}
.nfig video{width:100%;height:auto;display:block;background:var(--hair-2)}
.nlede{margin:0 0 26px;font:400 19px/1.45 var(--sans);color:var(--ink)}
.nlede em{font-family:var(--serif);font-style:italic;color:var(--bronze)}
.nb{border-top:1px solid var(--hair);padding-top:14px;margin-bottom:30px}
.nb--box{background:var(--tint);border-top:0;border-left:2px solid var(--bronze);padding:18px 20px;margin-bottom:30px}
.nb__h{display:flex;gap:10px;align-items:baseline;margin-bottom:12px}
.nb__n{font:500 10px/1.2 var(--display);letter-spacing:.2em;color:var(--bronze)}
.nb__t{font:500 13px/1.3 var(--display);letter-spacing:.17em;text-transform:uppercase;color:var(--ink)}
.nb p{margin:0 0 13px;font:400 15px/1.7 var(--sans);color:var(--ink-2)}
.nb p strong{color:var(--ink);font-weight:600}
.nb ul{margin:0;padding:0 0 0 14px}.nb li{font:400 15px/1.6 var(--sans);color:var(--ink-2);margin-bottom:8px}
.rows{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px}
.rows dt,.rows dd{padding:11px 0;border-top:1px solid var(--hair-2)}
.rows dt{margin:0;font:500 11px/1.6 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.rows dd{margin:0;font:400 14.5px/1.6 var(--sans);color:var(--ink-2)}
.rows dt:first-of-type,.rows dd:first-of-type{border-top:0}
.nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;margin-top:8px}
.nums div{border-top:1px solid var(--hair-2);padding-top:8px}
.nums b{display:block;margin-top:4px;font:300 34px/1.05 var(--display);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.nums b small{font-size:12px;letter-spacing:.1em;margin-left:4px;color:var(--muted)}

/* ---- B sheet / register tables ---- */
.reg{width:100%;border-collapse:collapse}
.reg td{padding:17px 14px 17px 0;border-top:1px solid var(--hair-2);vertical-align:middle}
.reg tr.zn td{border-top:1px solid var(--ink);padding:28px 0 6px}
.reg tr.zn span{font:500 10px/1.2 var(--display);letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)}
.reg .no{width:56px;font:500 11px/1.3 var(--display);letter-spacing:.14em;color:var(--bronze);white-space:nowrap}
.reg .nm{font:400 13px/1.3 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.reg .nm a{text-decoration:none}
.reg .nm a:hover{color:var(--bronze)}
.reg .ds{display:block;margin-top:4px;font:400 12.5px/1.5 var(--serif);font-style:italic;color:var(--muted);max-width:60ch}
.reg .th{width:150px;padding-right:18px}
.reg .th img{display:block;width:150px;aspect-ratio:3/2;object-fit:cover;background:var(--hair-2)}
.reg .r{text-align:right;white-space:nowrap;font:400 12px/1.4 var(--sans);color:var(--ink-2);padding-right:0}
.reg .r .lb{display:block}
.excl{border-top:1px solid var(--hair);margin-top:14px;padding-top:10px;font:400 13.5px/1.55 var(--serif);font-style:italic;color:var(--muted)}
.reg .pr{display:block;margin-top:6px;font:400 14px/1.3 var(--display);letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.reg .pr .lb{margin-right:8px}

/* ---- C sheet: begin ---- */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:30px}
.way{border-top:1px solid var(--hair);padding-top:16px;text-decoration:none;display:block}
.way .lb{display:block;margin-bottom:6px}
.way b{display:block;font:400 20px/1.2 var(--display);letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.way i{display:block;margin-top:5px;font:400 14px/1.5 var(--serif);color:var(--muted)}
.way:hover b{color:var(--bronze)}
.intake{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;margin-top:20px;max-width:820px}
.intake__field{display:flex;flex-direction:column;gap:5px;min-width:0}
.intake__field--wide{grid-column:1/-1}
.intake label{font:500 10.5px/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--bronze)}
.intake input,.intake select,.intake textarea{width:100%;padding:11px 12px;border:1px solid var(--hair);border-radius:2px;background:var(--card);color:var(--ink);font:400 15.5px/1.45 var(--sans)}
.intake textarea{min-height:120px;resize:vertical}
.intake input:focus,.intake select:focus,.intake textarea:focus{outline:1.5px solid var(--bronze);outline-offset:1px;border-color:transparent}
.intake .btn{justify-self:start;margin-top:4px}
.sent{background:var(--tint);border-left:2px solid var(--bronze);padding:12px 14px;margin-top:16px;font-size:13.5px}

/* ---- foot ---- */
.foot{max-width:1280px;margin:0 auto;padding:0 24px 64px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;position:relative;z-index:1;
  font:400 11.5px/1.5 var(--sans);color:var(--muted)}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .lb{margin-right:auto}

/* ---- the project as one mass: opener, then pictures and the film in one column on one ground */
.pf{margin:0 calc(50% - 50vw);width:100vw;background:var(--sheet);position:relative}
.pf .film--open{margin:0;width:auto}
.pf__body{max-width:1160px;margin:0 auto;padding:clamp(34px,5vw,64px) clamp(16px,5vw,60px) clamp(56px,7vw,96px)}
.pf__body>*+*{margin-top:clamp(40px,5.4vw,72px)}
.pf__text{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.pf__lede{margin:0;font:400 clamp(24px,2.7vw,36px)/1.28 var(--serif);font-style:italic;color:var(--ink);text-wrap:balance;max-width:24ch}
.pf__lede em{font-style:italic;color:var(--bronze)}
.pf__copy{margin:0;max-width:58ch;font:400 clamp(15.5px,1.25vw,17.5px)/1.68 var(--sans);color:var(--ink-2)}
.pf__copy p{margin:0}.pf__copy p+p{margin-top:14px}
.pf__fig{margin:0}.pf__fig .frame img{width:100%;height:auto;display:block}
.pf__fig figcaption,.pf__film figcaption{margin-top:11px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pf__fig figcaption i,.pf__film figcaption i{font:400 13px/1.5 var(--serif);font-style:italic;color:var(--muted);letter-spacing:0;text-transform:none}
.pf__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2.4vw,28px)}
.pf__pair .frame{aspect-ratio:4/5}.pf__pair .frame img{height:100%;object-fit:cover}
.pf__film{margin:0}.pf__film .plate{margin:0;width:100%!important}
.pf__keyed .plate{margin:0;width:100%!important}
.pf__next{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:18px}
.pf__next a{font:500 10.5px/1.6 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);text-decoration:none}
.pf__next a:hover{color:var(--ink)}.pf__next a b{font-weight:500;color:var(--ink);margin-right:8px}
@media screen and (max-width:860px){
  .pf__text{grid-template-columns:minmax(0,1fr);gap:18px}.pf__body{padding-left:16px;padding-right:16px}.pf__pair{gap:10px}.pf__next{flex-direction:column;gap:10px}
  .nav{gap:8px;padding:0 18px;height:50px}.brand{font-size:13px;letter-spacing:.22em;gap:8px}
  .nav__links{gap:0}.nav__links a{padding:8px 7px;font-size:9.5px;letter-spacing:.14em}.nav__links li:nth-child(2){display:none}
  .nav .btn{padding:9px 10px;font-size:9.5px;letter-spacing:.14em}
  .hero{height:min(72vh,640px)}.reel__yt{display:none}.cover__lede{padding:26px 22px 0}.cover__lede h1{font-size:clamp(22px,6.2vw,30px)}.cover__lede .film__said{white-space:normal;overflow-wrap:anywhere;line-height:1.7}
  .film__plate{height:min(78vh,680px)}.film--open .film__plate{height:min(60vh,540px)}.film--open .film__cap h1.film__h2{font-size:clamp(26px,8vw,40px)}.film--open .film__cap{bottom:150px}.film--open .film__data{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}.film__data dd{overflow-wrap:anywhere}
  .film__plate--drawn{height:auto}.film__sheet{display:block;flex:none;padding:58px 18px 6px}.film__plate--drawn img{height:auto;flex:none}.film__band{flex-direction:column;align-items:flex-start;gap:16px;margin:0 20px;padding:14px 0 26px}.film__plate--drawn .film__data{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;width:100%}.film__plate--drawn .film__cap h2{font-size:clamp(24px,7vw,36px)}
  .rg{grid-template-columns:minmax(0,1fr);gap:26px}.rc--wide .rc__im{aspect-ratio:3/2}.rc__meta{flex-direction:column;gap:6px}
  .svc__row{grid-template-columns:36px minmax(0,1fr);grid-template-areas:"im im" "no t";gap:12px 14px;padding:18px 0;align-items:start}.svc__no{grid-area:no;font-size:20px;padding-top:2px}.svc__im{grid-area:im}.svc__t{grid-area:t}.svc__h{font-size:15px}.svc__d{font-size:14px}
 .film__cap{left:20px;right:20px;bottom:118px;max-width:none}.film__cap h2{font-size:clamp(26px,8vw,40px)}.film__no{left:20px;top:10px;font-size:52px}.film__tag{right:16px;top:16px;font-size:9px}
  .film__data{left:20px;right:20px;bottom:24px;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 10px;padding-top:10px}.film__data dd{font-size:15px;white-space:normal}.hero .film__cap{bottom:28px}
  .reel__meta{top:18px;left:20px;right:20px;bottom:auto;justify-content:space-between;gap:10px}.reel__meta .lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.reel__ctl{flex:0 0 auto}.hero .film__no,.hero .film__tag{display:none}.film__cap h2{text-wrap:wrap;font-size:clamp(24px,7vw,40px)}.film__more{padding:0 22px}.cover__row{padding:18px 22px 0}.begin{padding:0 22px}
  .strip{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;margin:26px -22px 0;padding:0 22px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .strip::-webkit-scrollbar{display:none}
  .strip a,.strip figure{flex:0 0 74vw;scroll-snap-align:start}
  .set{padding:16px 12px 60px;gap:44px}.sheet{padding:34px 22px 0}.sheet::before{inset:7px}.sheet__tag{top:14px;right:16px;font-size:9px}
  .h{font-size:clamp(26px,7.5vw,34px)}
  .cover{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:26px}
  .entrance{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:26px}
  .toc.toc--line{gap:8px 16px}
  .toc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .keys{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
  .strip .lb{font-size:10px;letter-spacing:.14em}
  .seq{grid-template-columns:repeat(3,minmax(0,1fr))}
  .figs{grid-template-columns:minmax(0,1fr)}
  .narr3{grid-template-columns:minmax(0,1fr);gap:16px}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reg .th{display:none}.reg .r{display:none}
  .ways,.intake{grid-template-columns:minmax(0,1fr)}
  .tb{grid-template-columns:1fr 1fr;gap:12px}.tb>div:first-child{grid-column:1/-1}.tb__n{font-size:15px}.tb dd{font-size:12px}
}
@media screen and (max-width:480px){.btn__long{display:none}}
@media screen and (max-width:360px){.nav__links li:nth-child(3){display:none}}
@media (min-width:601px) and (max-width:860px){.hero{height:auto;aspect-ratio:16/9}.reel__clip,.reel__plan{object-position:50% 50%}.hero__title h2{font-size:clamp(30px,6vw,48px)}}
@media screen and (max-width:600px){
  .hero{height:auto;aspect-ratio:4/5}.reel__clip,.reel__plan{object-position:50% 50%}
  .hero__title,.hero__key{left:20px;right:20px;bottom:22px}
  .hero__title h2{margin-top:8px;font-size:clamp(34px,11.5vw,50px)}
  .hero__data{gap:0 16px;margin-top:14px;padding-top:10px}.hero__data dt{font-size:8.5px;letter-spacing:.2em}.hero__data dd{font-size:15px}
  .hero__key{gap:11px}.hero__key i{font-size:14.5px}
  .hero__read{top:48px;left:20px;right:auto;text-align:left;font-size:8.5px;letter-spacing:.2em;line-height:1.4}
  .hero__read span{display:inline}.hero__read span+span::before{content:'\00a0\00b7\00a0'}
  .hero__play,.film__play{width:68px;height:68px}
  @supports not (aspect-ratio:1/1){.hero{height:125vw}}
}
@supports not (aspect-ratio:1/1){@media (min-width:601px) and (max-width:860px){.hero{height:56.25vw}}}

/* ---- what we build (10.2026): every line a plate; the symbol and the survey as travelling seams, drawn meeting built ---- */
.sv{margin-top:6px}
.sv__zone{border-top:1px solid var(--ink);padding:26px 0 8px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.sv__zone .lb{color:var(--bronze)}.sv__zone p{margin:0;font:400 15px/1.5 var(--serif);font-style:italic;color:var(--muted)}
.sv__row{display:block;padding:18px 0 28px;border-top:1px solid var(--hair-2);text-decoration:none;color:inherit}
.sv__zone+.sv__row{border-top:0}
.sv__plate.plate{position:relative;display:block;margin:0;max-width:none;aspect-ratio:16/9;overflow:hidden;background:#1a1a16;color:#fff}
.sv__plate--54.plate{aspect-ratio:5/4}
.sv__plate--sheet.plate{background:var(--sheet);color:var(--ink);border:1px solid var(--hair)}
.sv__plate.plate img,.sv__plate.plate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#1a1a16;filter:saturate(.86) contrast(1.06) sepia(.1);transition:transform 1.6s ease}
.sv__plate--54.plate img,.sv__plate--sheet.plate img{filter:none;background:transparent}
.sv__plate--tall.plate{aspect-ratio:5/4}
.sv__plate::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(10,9,6,.82) 0%,rgba(10,9,6,.5) 26%,rgba(10,9,6,.18) 48%,rgba(10,9,6,0) 68%)}
.sv__plate:not(.sv__plate--sheet) .sv__h,.sv__plate:not(.sv__plate--sheet) .sv__cap .lb{text-shadow:0 1px 2px rgba(0,0,0,.45),0 3px 24px rgba(0,0,0,.5)}
.sv__plate--sheet::after{background:none}
a.sv__row:hover .sv__plate img,a.sv__row:hover .sv__plate video{transform:scale(1.025)}
.sv__no{position:absolute;top:clamp(10px,2vw,22px);left:clamp(16px,3.2vw,38px);z-index:4;font:300 clamp(40px,6vw,84px)/1 var(--display);letter-spacing:.02em;color:rgba(255,255,255,.38);mix-blend-mode:soft-light;text-shadow:0 0 24px rgba(10,9,6,.35)}
.sv__plate--sheet .sv__no{color:rgba(21,22,15,.12);mix-blend-mode:normal;text-shadow:none}
.sv__tag{position:absolute;top:22px;right:24px;z-index:4;color:rgba(255,255,255,.7);text-align:right}
.sv__plate--sheet .sv__tag{color:var(--muted)}
.sv__cap{position:absolute;left:clamp(16px,3.2vw,38px);right:clamp(16px,3.2vw,38px);bottom:clamp(14px,2.8vw,32px);z-index:4}
.sv__cap .lb{color:rgba(255,255,255,.72)}
.sv__plate--sheet .sv__cap .lb{color:var(--bronze)}
.sv__h{display:block;margin-top:8px;font:300 clamp(22px,3.3vw,40px)/1.08 var(--display);letter-spacing:.1em;text-transform:uppercase;color:#fff;text-wrap:balance;transition:color .3s}
.sv__plate--sheet .sv__h{color:var(--ink)}
a.sv__row:hover .sv__h{color:#E6D4A3}a.sv__row:hover .sv__plate--sheet .sv__h{color:var(--bronze)}
.sv__t{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 28px;align-items:baseline;padding-top:14px}
.sv__d{font:400 15px/1.6 var(--serif);font-style:italic;color:var(--ink-2);max-width:64ch}
.sv__see{color:var(--bronze);white-space:nowrap}
.sv__seam{position:absolute;inset:0;display:block}
.sv__drawn{clip-path:inset(0 50% 0 0);animation:svseam 16s cubic-bezier(.65,0,.35,1) infinite}
.sv__line{position:absolute;top:0;bottom:0;left:50%;width:1px;z-index:3;background:rgba(184,153,104,.9);animation:svline 16s cubic-bezier(.65,0,.35,1) infinite;pointer-events:none}
.sv__plate--sheet .sv__line{background:rgba(114,95,54,.7)}
@keyframes svseam{0%,14%{clip-path:inset(0 50% 0 0)}40%,52%{clip-path:inset(0 0 0 0)}78%,90%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 50% 0 0)}}
@keyframes svline{0%,14%{left:50%}40%,52%{left:100%}78%,90%{left:0}100%{left:50%}}
/* the survey as layers: nine readings of one yard, stacked; each shows for two seconds in turn (18 s), the key at the left follows */
.sv__stack{position:absolute;inset:0;display:block}
.sv__stack img{opacity:0;animation:svlayer 18s linear infinite}
.sv__stack img:first-child{opacity:1;animation:none}
.sv__stack img:nth-child(2){animation-delay:2s}.sv__stack img:nth-child(3){animation-delay:4s}.sv__stack img:nth-child(4){animation-delay:6s}.sv__stack img:nth-child(5){animation-delay:8s}.sv__stack img:nth-child(6){animation-delay:10s}.sv__stack img:nth-child(7){animation-delay:12s}.sv__stack img:nth-child(8){animation-delay:14s}.sv__stack img:nth-child(9){animation-delay:16s}
@keyframes svlayer{0%{opacity:0}2.8%{opacity:1}11.1%{opacity:1}13.9%{opacity:0}100%{opacity:0}}
.sv__key{position:absolute;left:clamp(16px,3.2vw,38px);top:50%;transform:translateY(-50%);z-index:4;list-style:none;margin:0;padding:0;display:grid;gap:clamp(4px,.9vw,10px)}
.sv__key li{font:500 clamp(8.5px,1.05vw,11px)/1.2 var(--display);letter-spacing:.22em;text-transform:uppercase;color:rgba(21,22,15,.34);display:flex;gap:.9em;align-items:baseline;animation:svkey 18s linear infinite}
.sv__key li i{font-style:normal;font-variant-numeric:tabular-nums;color:rgba(114,95,54,.55)}
.sv__key li:nth-child(2){animation-delay:2s}.sv__key li:nth-child(3){animation-delay:4s}.sv__key li:nth-child(4){animation-delay:6s}.sv__key li:nth-child(5){animation-delay:8s}.sv__key li:nth-child(6){animation-delay:10s}.sv__key li:nth-child(7){animation-delay:12s}.sv__key li:nth-child(8){animation-delay:14s}.sv__key li:nth-child(9){animation-delay:16s}
@keyframes svkey{0%{color:rgba(21,22,15,.34)}2.8%{color:var(--ink)}11.1%{color:var(--ink)}13.9%{color:rgba(21,22,15,.34)}100%{color:rgba(21,22,15,.34)}}
.sv__plate--stack.plate img{object-fit:contain}
/* ---- homepage: Read. Draw. Pour. — three travelling seams, drawn meeting built (10.2026) ---- */
.method{max-width:1280px;width:100%;flex:0 0 100%;box-sizing:border-box;margin:0 auto;padding:40px 24px 8px}   /* main.set is a flex column: without a basis the strip shrinks to its content */
.method__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;border-top:1px solid var(--ink);padding-top:22px}
.method__head .lb{color:var(--bronze)}.method__head p{margin:0;font:400 15px/1.5 var(--serif);font-style:italic;color:var(--muted)}
.method__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.method__row .sv__plate.plate{aspect-ratio:5/4}
.method__row .sv__plate img{filter:none;background:transparent}
.method__row .sv__cap .lb{color:rgba(255,255,255,.72)}
.method__row .sv__h{font-size:clamp(16px,1.6vw,22px);letter-spacing:.14em}
.method__row .sv__no{font-size:clamp(34px,4vw,56px)}
.method__row .sv__tag{font-size:9px}
.method__row .sv__drawn{animation-delay:0s}.method__row .sv__line{animation-delay:0s}
.method__row .seam-2 .sv__drawn,.method__row .seam-2 .sv__line{animation-delay:-5.3s}
.method__row .seam-3 .sv__drawn,.method__row .seam-3 .sv__line{animation-delay:-10.6s}
@media (max-width:860px){.method{padding:28px 22px 4px}.method__row{grid-template-columns:1fr;gap:14px}.method__row .sv__plate.plate{aspect-ratio:5/4}}
/* the water's path (10.2026): a measured line drawn in over a locked shot when its row comes into view; ticks along it; a point of
   light travels the rill at the water's pace. The grammar of the posted rill Reel ("A rill, laid block by block"), on the site. */
.sv__wp{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;overflow:visible}
.wp__draw{fill:none;stroke:#fff;stroke-width:14;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.wp__line{fill:none;stroke:#fff;stroke-width:2.6;stroke-dasharray:14 9;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(10,9,6,.95))}
.wp__tick{stroke:#fff;stroke-width:2.4;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 3px rgba(10,9,6,.95))}
.wp__dot{fill:#fff;stroke:rgba(21,22,15,.85);stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(255,255,255,.95))}
.wp__tagbox{fill:rgba(21,22,15,.86)}
.wp__tag{font:500 13px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;fill:#F7F5EE;opacity:0}
.sv__row:not(.rv--wait) .wp__draw{animation:wpdraw 2.6s cubic-bezier(.4,0,.2,1) .4s forwards}
.sv__row:not(.rv--wait) .wp__tick{animation:wpin .5s ease forwards}
.sv__row:not(.rv--wait) .wp__tag{animation:wpin .6s ease 2.4s forwards}
@keyframes wpdraw{to{stroke-dashoffset:0}}
@keyframes wpin{to{opacity:1}}
.cover__h1--three span{display:block}
.cover__h1--three span:first-child{font:400 clamp(26px,3.4vw,46px)/1.05 var(--display);letter-spacing:.14em;text-transform:uppercase;font-style:normal;margin-bottom:6px}
.cover__h1--three span+span{padding-left:.04em}
/* ---- About (10.2026): the purpose, then the eight trades as a carousel of moving plates ---- */
.purpose{max-width:72ch;margin-top:22px}
.purpose .nlede{font-size:20px;line-height:1.5;margin-bottom:16px}
.why{margin:0;font:400 15.5px/1.6 var(--serif);font-style:italic;color:var(--ink-2);display:flex;gap:12px;align-items:flex-start}
.why__mark{flex:none;font-style:normal;color:var(--bronze);font-size:20px;line-height:1.2}
.disc{margin-top:14px}
.disc__strip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.disc__strip::-webkit-scrollbar{display:none}
.disc__strip:focus-visible{outline:1px solid var(--bronze);outline-offset:6px}
.disc__item{flex:0 0 min(78%,840px);scroll-snap-align:start}
.disc__item .plate.sv__plate{aspect-ratio:16/9}
.disc__cap{margin:10px 0 0;font:400 14.5px/1.55 var(--serif);font-style:italic;color:var(--ink-2);max-width:62ch}
.disc__bar{position:relative;height:1px;background:var(--hair-2);margin-top:16px}
.disc__bar i{position:absolute;top:0;height:1px;background:var(--bronze);width:12.5%;left:0;transition:left .4s ease}
.disc__ctl{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:16px}
.disc__idx{font-variant-numeric:tabular-nums}
.disc__btns{display:flex;gap:8px}
.disc__btn{font:400 15px/1 var(--display);width:36px;height:30px;border:1px solid var(--hair);background:transparent;color:var(--ink);cursor:pointer;border-radius:1px}
.disc__btn:hover{border-color:var(--ink)}
.about2{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:40px}
@media (max-width:860px){.disc__item{flex-basis:88%}.disc__item .plate.sv__plate{aspect-ratio:4/3}.about2{grid-template-columns:1fr;gap:10px}.purpose .nlede{font-size:17px}}
/* ---- homepage, short (10.2026): no readouts on the cover, the header over the film, the sets by type of work ---- */
/* the sheet's notes stay on the film (Dorian, Oct 10: "I love the architectural old notes on top of it"); the header floats above them, so the top row steps down by its height */
.film--cover .film__no{top:calc(54px + clamp(6px,1.4vw,16px))}
.film--cover .film__tag{top:72px}
.film--cover .hero__read{top:92px}
/* the reel strip (Fig. label, counter, Pause, the bar) stays off the cover (Dorian, Oct 10: "why is it still showing this little bar on the very top? ... It still says pause"); the film pauses on a click instead */
.film--cover .reel__meta,.reel__bar{display:none}
/* with the strip gone the type comes down to the foot of the frame ("the text and all that could come down at the very bottom") */
.film--cover .hero__title,.film--cover .hero__key,.film--cover .hero__end{bottom:clamp(22px,3vw,40px)}
/* the header carries the trade line; under the film only the sentence and the index remain */
/* "Systems" after the drawn word, on its baseline, in the page's ink (ivory over the film); the tag after it names what the systems does */
.brand__co{align-self:flex-end;margin:0 0 1px 1px;font:500 10.5px/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:inherit;white-space:nowrap}
.brand__tag{margin-left:7.8px;padding-left:14px;border-left:1px solid var(--hair);font:500 9.5px/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.nav--over .brand__tag{color:rgba(247,245,238,.8);border-color:rgba(247,245,238,.38)}
.nav--over.is-solid .brand__tag{color:var(--muted);border-color:var(--hair)}
@media (max-width:860px){.brand__tag{display:none}}
.cover__lede{padding-top:30px}
.cover__area{margin:16px 0 0;color:var(--muted)}
/* the sentence and the index sit centred under the ornament (Oct 11: "centerized"); the close is built the same way; the footer signs with the lockup */
.cover__lede{text-align:center}.cover__lede .cover__h1--three{margin-left:auto;margin-right:auto}.cover__row{justify-content:center}.cover__row .toc--line{justify-content:center;flex:0 1 auto}
.begin__in--c{border-top:0;padding-top:0;text-align:center}.begin__in--c .orn{margin:0 auto 30px}.begin__in--c .said{margin-left:auto;margin-right:auto}.begin__in--c .ways{margin-top:44px;text-align:left}.begin__in--c .tb{text-align:left}
.tb__n{text-wrap:balance}
.brand--foot{display:inline-flex;align-items:center;gap:8px;margin-right:26px}.brand--foot .brand__mark{width:20px;height:20px}.brand--foot .brand__wm{height:15px}
@media (max-width:600px){.brand--foot{margin-right:0;width:100%}}
/* a sheet without a film: the films' look on its still: lifted blacks, a white mist, slight grain (Dorian, Oct 11: "that same kind of white mist that gives everything that high-end architectural look. Slight grain") */
.film--still .film__plate img{filter:saturate(.84) contrast(.94) brightness(1.06) sepia(.08)}
.film--still .film__plate::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(247,245,238,.12) 0%,rgba(247,245,238,.05) 45%,rgba(247,245,238,.08) 100%)}
.film--still .film__plate::after{content:"";position:absolute;inset:-6%;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:220px 220px;animation:grain .7s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.film--still .film__plate::after{animation:none}}
/* a film on a drawn (paper) plate sits inside the sheet's margins like the still, whole, never cropped (the fly-around, Oct 11) */
.film__plate--drawn video{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;padding:clamp(60px,9vh,92px) clamp(24px,5vw,72px) 10px;object-fit:contain;object-position:50% 50%;filter:none;mix-blend-mode:darken}
@media (max-width:600px){.film__plate--drawn video{padding:58px 18px 6px}}
/* the live viewer in a drawn plate: the frame fills the sheet's box; the request link in the data row */
.film__sheet--live{display:block;position:relative;flex:1 1 0;min-height:0;padding:clamp(16px,2vw,26px) clamp(24px,5vw,72px) 0}
.film--live .film__plate--drawn{height:min(78vh,860px)}
.film__tiny{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 clamp(24px,5vw,72px);padding:11px 0 14px}
.film__tiny .lb{color:var(--bronze)}
.film__tiny .film__ask{font:500 10px/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase;border-bottom:0}
/* the home page closes up (Dorian, Oct 11: "way too much empty space"): 48px between sheets, the ornament sitting in that space */
.set--cover{gap:48px}main.set--cover > .orn{margin:-24px auto}
.film--short{contain-intrinsic-size:auto 600px}
.film__live{display:block;width:100%;height:100%;border:0;background:transparent}
.film__ask{color:var(--bronze);text-decoration:none;border-bottom:1px solid var(--hair)}.film__ask:hover{color:var(--ink)}
@media (max-width:600px){.film--drawn .film__plate--drawn{height:auto;min-height:0}.film__sheet--live{padding:14px 14px 0;flex:none}.film__plate--drawn .film__sheet--live .film__live{height:54vh}.film__tiny{margin:0 14px;padding:10px 0 12px}.set--cover{gap:34px}main.set--cover > .orn{margin:-14px auto}}
/* the ground story: four stills in a two-by-two on paper */
.gs{max-width:1280px;margin:0 auto;padding:0 24px;width:100%}.gs__in{border-top:1px solid var(--hair);padding-top:26px}
.gs__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px;margin-top:22px}.gs__fig{margin:0}.gs__fig img{display:block;width:100%;height:auto;border:1px solid var(--hair);background:var(--sheet)}
.gs__fig figcaption{margin-top:12px}.gs__fig figcaption p{margin:6px 0 0;font:400 14.5px/1.5 var(--serif);color:var(--muted)}
@media (max-width:600px){.gs{padding:0 22px}.gs__grid{grid-template-columns:minmax(0,1fr);gap:26px}}
/* the ornament between the film and the sentence, and between the sheets */
.orn{display:block;width:min(640px,86%);height:auto;margin:0 auto;color:#B89968}
.orn--cover{margin:4px auto 26px}
.set > .orn{margin:-44px auto;width:min(460px,72%)}
@media (max-width:600px){.set > .orn{margin:-20px auto}.orn--cover{margin:0 auto 20px}}
/* on the cover the frame marks go out to the very corners and the header steps in, so nothing touches the ring ("it's literally touching the circumpunct") */
.film--cover .rm{width:9px;height:9px}.film--cover .rm--tl{top:6px;left:6px}.film--cover .rm--tr{top:6px;right:6px}.film--cover .rm--bl{bottom:6px;left:6px}.film--cover .rm--br{bottom:6px;right:6px}
/* the word top centre, the ring left (Oct 11); on the home page it lands there from beside the ring */
.nav{--wm-from:54.2px}
.nav__wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;line-height:0;z-index:1}
.nav__wm .brand__wm{height:19.7px}
@keyframes wm-land{from{left:var(--wm-from);transform:translate(0,-50%)}to{left:50%;transform:translate(-50%,-50%)}}
/* THE OPENING (home, once a session; Dorian, Oct 11: "having noon appear ... nice and big ... starts with the downward n and then the infinity and then the n ... and shows San Antonio through Austin"):
   the header's own word is held large over the still Lotus while it is drawn, the place line comes up beneath it, then the word settles into the header and the film starts */
:root{--wm-s:6;--wm-y:min(35vh,24vw);--wm-hh:60px}
@media (max-width:860px){:root{--wm-s:4.4;--wm-y:22vw;--wm-hh:44px}}
@media (max-width:600px){:root{--wm-s:3.1;--wm-y:50vw;--wm-hh:31px}}
.nav--over .nav__wm{transition:transform 1.25s cubic-bezier(.6,0,.2,1)}
html.intro .nav--over .nav__wm{transform:translate(-50%,-50%) translateY(var(--wm-y)) scale(var(--wm-s));pointer-events:none}
.hero__veil{position:absolute;inset:0;z-index:4;pointer-events:none;background:rgba(10,9,6,.5);opacity:0;transition:opacity 1.2s ease}
html.intro .hero__veil{opacity:1}
.hero__place{position:absolute;left:0;right:0;top:calc(27px + var(--wm-y) + var(--wm-hh) + 30px);z-index:6;margin:0;padding:0 20px;text-align:center;pointer-events:none;font:500 clamp(10px,1.05vw,13px)/1.5 var(--display);letter-spacing:.34em;text-transform:uppercase;color:rgba(247,245,238,.92);text-shadow:0 1px 10px rgba(0,0,0,.5);opacity:0;transform:translateY(8px);transition:opacity .9s ease,transform .9s ease}
html.intro-place .hero__place{opacity:1;transform:none}
@media (max-width:600px){.hero__place{letter-spacing:.2em;font-size:10px;top:calc(25px + var(--wm-y) + var(--wm-hh) + 22px)}}
/* four ways to begin, the first of them a call (the home page offered text, email and a form but no call link) */
.ways--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
@media (max-width:980px){.ways--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ways--4{grid-template-columns:minmax(0,1fr)}}
.film__tiny a.lb{text-decoration:none}
.foot__tel{color:var(--ink)!important;font-variant-numeric:tabular-nums}
.foot__nav{flex:0 0 100%;display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:8px;padding-top:12px;border-top:1px solid var(--hair-2)}
.faq{margin-top:44px;border-top:1px solid var(--hair);padding-top:22px}
.faq h3{margin:0 0 16px;font:500 10px/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--bronze)}
.faq dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px}
.faq dt{font:400 16.5px/1.3 var(--display);letter-spacing:.03em;color:var(--ink)}
.faq dd{margin:7px 0 0;font:400 14.5px/1.62 var(--serif);color:var(--muted)}
@media (max-width:700px){.faq dl{grid-template-columns:minmax(0,1fr)}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pl-sep{font-style:normal}.pl-b{white-space:nowrap}
@media (max-width:600px){.pl-sep{display:none}.pl-b{display:block}}
.cover__lede .cover__h1--one{margin:6px auto 0;max-width:none;font:400 clamp(16px,1.9vw,26px)/1.3 var(--display);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.cover__es{margin:12px 0 0;color:var(--muted);letter-spacing:.2em}
@media (max-width:600px){.cover__lede .cover__h1--one{font-size:14.5px;letter-spacing:.16em}.cover__es{letter-spacing:.12em;font-size:9.5px}}
/* the word is drawn on along its own centre lines, n then the ribbon then n (Dorian, Oct 11: "actually get drawn on there instead of just slide over") */
.wd{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:wm-draw .8s cubic-bezier(.6,.05,.3,1) forwards}
.wd1{animation-delay:.35s}.wd2{animation-delay:.95s;animation-duration:1.3s}.wd3{animation-delay:2.05s}
@keyframes wm-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.wd{animation:none;stroke-dashoffset:0}}
@media (max-width:1010px){.nav__links li:nth-child(2){display:none}}
@media (max-width:600px){.nav{--wm-from:50.2px}.nav__links{display:none}.nav .btn{margin-left:auto}}
@media (max-width:600px){html.is-film .set--cover,html.is-film .set--cover ~ .foot,html.is-film .film--cover{background:var(--paper)}}
.cover__h1--three span:first-child{font-size:clamp(19px,2.1vw,28px);letter-spacing:.2em;margin-bottom:8px}
.cover__h1--three span+span{font-size:clamp(22px,2.5vw,34px)}
.cover__row{padding-top:16px}
@media (max-width:600px){.set--cover{padding-top:0}.cover__h1--three span:first-child{letter-spacing:.16em}.film--cover .hero__title,.film--cover .hero__key,.film--cover .hero__end{bottom:22px}.film--cover .hero__read,.film--cover .film__no{display:none}.film--cover .hero::before{background:linear-gradient(to top,rgba(10,9,6,.36) 0%,rgba(10,9,6,0) 38%),linear-gradient(to bottom,rgba(10,9,6,.34) 0%,rgba(10,9,6,0) 12%),radial-gradient(115% 90% at 50% 42%,rgba(10,9,6,0) 56%,rgba(10,9,6,.3) 100%)}.hero__end h2{font-size:clamp(30px,9vw,42px)}.cover__lede{padding-top:24px}.cover__h1--three span:first-child{font-size:16.5px}.cover__h1--three span+span{font-size:clamp(20px,5.6vw,26px)}}
.film--short .film__plate{height:min(64vh,680px)}
.film--short .film__cap{max-width:min(70vw,60ch)}
.film__line{margin:12px 0 0;font:400 15px/1.55 var(--serif);font-style:italic;color:rgba(255,255,255,.86);max-width:52ch}
.film__open{display:block;margin-top:10px;font:500 10.5px/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase;font-style:normal;color:#E6D4A3}
/* the header stays fixed through the film instead of scrolling away and jumping back in once past it */
.nav--over{position:fixed;top:0;left:0;right:0;z-index:30;background:transparent;border-bottom:0;box-shadow:none;backdrop-filter:none;transition:background-color .3s ease,border-color .3s ease}
.nav--over .nav__links a,.nav--over .brand{color:#F7F5EE;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.nav--over .nav__links a:hover,.nav--over .nav__links a[aria-current="page"]{color:#fff}
.nav--over .brand__wm{color:#F7F5EE}
/* over the film the lockup gets a small lift so it is not hidden on bright ground (Dorian, Oct 10: "so it's not just so hidden") */
.nav--over:not(.is-solid) .brand__mark,.nav--over:not(.is-solid) .brand__wm{filter:drop-shadow(0 1px 1.5px rgba(0,0,6,.55))}
.nav--over .btn{background:transparent;color:#F7F5EE;border:1px solid rgba(247,245,238,.7)}
.nav--over.is-solid{background:var(--paper);border-bottom:1px solid var(--hair)}
.nav--over.is-solid .nav__links a,.nav--over.is-solid .brand{color:var(--muted);text-shadow:none}
.nav--over.is-solid .nav__links a:hover,.nav--over.is-solid .nav__links a[aria-current="page"],.nav--over.is-solid .brand{color:var(--ink)}
.nav--over.is-solid .brand__wm{color:var(--bronze)}
.nav--over.is-solid .btn{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:860px){.film--short .film__plate{height:min(60vh,520px)}.film--short .film__cap{max-width:none}}
.sv__more{margin-top:16px}
.sv__more .figs{margin-top:0}
.sv__note{margin:10px 0 0;font:400 13.5px/1.55 var(--serif);font-style:italic;color:var(--muted);max-width:70ch}
.sv__list{list-style:none;margin:0;padding:0}
.sv__list li{border-top:1px solid var(--hair-2)}
.sv__list a{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:0 28px;align-items:baseline;padding:16px 0;text-decoration:none;color:inherit}
.sv__ln{font:300 22px/1 var(--display);letter-spacing:.04em;color:var(--bronze);font-variant-numeric:tabular-nums}
.sv__lh{display:block;font:400 15px/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:color .3s}
.sv__ld{display:block;margin-top:4px;font:400 14px/1.6 var(--serif);font-style:italic;color:var(--ink-2);max-width:56ch}
.sv__ls{color:var(--bronze);white-space:nowrap}
@media (hover:hover){.sv__list a:hover .sv__lh{color:var(--bronze)}}
@media (max-width:860px){.sv__plate.plate{aspect-ratio:4/5}.sv__plate--54.plate{aspect-ratio:1/1}.sv__plate--tall.plate{aspect-ratio:4/5}.sv__plate--stack.plate{aspect-ratio:5/4}.sv__key{gap:3px}.sv__t{grid-template-columns:1fr;gap:8px}.sv__see{white-space:normal}.sv__list a{grid-template-columns:36px minmax(0,1fr);gap:4px 14px}.sv__ls{grid-column:2;white-space:normal}.sv__tag{top:14px;right:14px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reel__clip{transition:none}.rv--wait{opacity:1;transform:none}.rc__im img,.svc__im img,.film__plate--drawn img,.sv__plate img,.sv__plate video{transition:none}.sv__drawn,.sv__line,.sv__stack img,.sv__key li,.wp__draw,.wp__tick,.wp__tag{animation:none}.wp__draw{stroke-dashoffset:0}.wp__tick,.wp__tag{opacity:1}.wp__dot{display:none}.sv__stack img:last-child{opacity:1}.sv__key li:last-child{color:var(--ink)}.plate--film.is-playing video,.hero::after,.plate--film::after{animation:none}.reel__plan{transition:none}}
@media print{
  .nav,.reel__toggle,.skip{display:none}
  body{background:#fff}.set{max-width:none;padding:0;gap:0}
  .sheet{border:0;break-inside:avoid;page-break-inside:avoid;margin-bottom:24px}
  @page{size:letter landscape;margin:.4in}
}