/* UI shell: the CS-max direction. Generated from directions/common/base.css, directions/c-exhibit/exhibit.css and directions/cs-max/max.css.
   Edit those and run tools/build_shell.sh. */
@import url("type.css");
@import url("organic/organic.css");
/* Shared base for the three direction prototypes: faces, motion tokens, access.
   Faces: Hanken Grotesk (OFL) and Conso, the two the live site ships.
   Motion tokens are generated by substrate/lib/motion.mjs tokensCss(). */
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Conso";src:url("fonts/conso-regular.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --ease-standard:cubic-bezier(0.2,0,0,1);
  --ease-enter:cubic-bezier(0,0,0.2,1);
  --ease-exit:cubic-bezier(0.4,0,1,1);
  --ease-film:cubic-bezier(0.65,0,0.35,1);
  /* measured from reference clips (feed-test-20), via motion.mjs curveFromSamples */
  --ease-engrave:linear(0 0%,0 16.67%,0.1 27.78%,0.5 42.22%,0.9 68.89%,1 100%);
  --ease-spring:linear(0,0.1132,0.3184,0.5137,0.6686,0.7812,0.8588,0.9104,0.944,0.9654,0.9788,0.9871,0.9922,0.9953,0.9972,0.9983,1);
  --dur-quick:120ms;--dur-base:200ms;--dur-slow:320ms;--dur-scene:900ms;
  /* the site's verdict colours, light */
  --verified:#0a6b61;--drift:#8f3a19;--unverifiable:#4e4d85;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--verified:#63d4ce;--drift:#e29472;--unverifiable:#b3b1e6}}
:root[data-theme="dark"]{--verified:#63d4ce;--drift:#e29472;--unverifiable:#b3b1e6}
@media (prefers-reduced-motion:reduce){:root{--dur-quick:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-scene:0ms}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 14px;background:var(--ink);color:var(--wall,var(--paper,#fff));font:600 15px var(--sans);text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
code,pre,kbd,samp{font-family:var(--mono)}
[data-verdict]{font:600 15px/1.3 var(--sans)}
[data-verdict]::before{content:"";display:inline-block;width:.8em;height:.8em;margin-right:.45em;vertical-align:-.05em;background:currentColor}
[data-verdict="verified"]{color:var(--verified)}
[data-verdict="verified"]::before{border-radius:50%}
[data-verdict="drift"]{color:var(--drift)}
[data-verdict="drift"]::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
[data-verdict="unverifiable"]{color:var(--unverifiable)}
[data-verdict="unverifiable"]::before{background:none;border:2px solid currentColor}

/* Without JS every demo state shows; with JS one at a time. */
html:not(.js) [data-choices]{display:none}
html.js [data-state][hidden]{display:none}

/* Plain view: the art layer goes, the text stays. */
html.plain [data-art]{display:none!important}
html.plain *{animation:none!important;transition:none!important}

/* halftone canvas sits over its photograph and takes the container's colour */
canvas.ht{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ht-on > img[data-halftone]{visibility:hidden}

/* Lettering from non-type material (lettering.js). The text stays real; the material draws it. */
[data-letter]{position:relative;isolation:isolate}
.lettered-on{color:transparent}
.lettered-on::selection{color:var(--ink);background:color-mix(in srgb,var(--ink) 18%,transparent)}
canvas.letter-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.scrap{display:inline-block;color:transparent;background:var(--plate) var(--px,50%) var(--py,50%)/420% auto;-webkit-background-clip:text;background-clip:text;transform:rotate(var(--tilt,0deg));filter:contrast(1.5) brightness(.82) drop-shadow(0 0 .6px rgba(0,0,0,.9)) drop-shadow(0 1px 0 rgba(0,0,0,.5))}
.scrap-word{white-space:nowrap}
html.plain .lettered-on,html.plain .scrap{color:var(--ink);background:none;transform:none;filter:none}
@media (forced-colors:active){.lettered-on,.scrap{color:CanvasText!important;background:none!important}canvas.letter-art{display:none}}
@media print{.lettered-on,.scrap{color:#000!important;background:none!important}canvas.letter-art{display:none}}
:root[data-theme="dark"] .scrap{filter:contrast(1.4) brightness(1.15) drop-shadow(0 0 1px rgba(236,229,214,.6))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .scrap{filter:contrast(1.4) brightness(1.15) drop-shadow(0 0 1px rgba(236,229,214,.6))}}

/* display slots (shell/slots.js): an external lettering drawing laid over the real text */
[data-display]{position:relative;isolation:isolate}
.slot-on{color:transparent}
.slot-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.slot-art > *{width:100%;height:100%}
html.plain .slot-on{color:var(--ink)}
@media (forced-colors:active){.slot-on{color:CanvasText!important}.slot-art{display:none}}

/* living plates (the alive layer, alive): until alive.js adopts a [data-alive] element it
   shows its still; under reduced motion and in plain view it stays a still. */
[data-alive]{position:relative}
html.plain [data-alive] canvas,html.plain [data-alive] video{display:none}
/* Direction C: Second tour. The site as a surreal exhibit.
   Rooms with wall text, objects hung salon-style at the wrong scale, museum labels for every
   route, and a second tour ("Show me") that opens the plain, sourced answer behind each piece. */
:root{
  color-scheme:light;
  --wall:#e8e3d9;--wall-2:#ddd6c9;--ink:#16130f;--soft:#4a443b;--line:#c4baa6;--on-ink:#e8e3d9;
  --shadow:rgba(22,19,15,.26);--lamp:rgba(255,250,238,.0);--mat:#f3efe6;--card:#f6f1e3;--rake:rgba(22,19,15,.10);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--wall:#0a0a0c;--wall-2:#141418;--ink:#ece5d6;--soft:#b8b0a0;--line:#2e2c31;--on-ink:#0a0a0c;--shadow:rgba(0,0,0,.75);--lamp:rgba(236,229,214,.075);--mat:#111114;--card:#d9d1bf;--rake:rgba(0,0,0,.55)}}
:root[data-theme="dark"]{color-scheme:dark;--wall:#0a0a0c;--wall-2:#141418;--ink:#ece5d6;--soft:#b8b0a0;--line:#2e2c31;--on-ink:#0a0a0c;--shadow:rgba(0,0,0,.75);--lamp:rgba(236,229,214,.075);--mat:#111114;--card:#d9d1bf;--rake:rgba(0,0,0,.55)}

body{background:var(--wall);color:var(--ink);font:400 18px/1.55 var(--sans)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}

/* ---------- chrome: a thin rail, the controls as a small console ---------- */
.rail{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding:14px 16px;border-bottom:1px solid var(--line)}
.rail .home{font:700 17px/1 var(--sans);text-decoration:none}
.rail ul{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0;padding:0;list-style:none;font:500 15px var(--sans)}
.rail ul a{text-decoration:none}
.rail ul a:hover,.rail ul a[aria-current]{text-decoration:underline}
.console{display:flex;gap:6px}
.console button{font:500 14px/1 var(--sans);color:var(--ink);background:var(--wall);border:1px solid var(--ink);border-radius:0;padding:9px 14px;min-height:40px;cursor:pointer;transition:background-color var(--dur-quick) var(--ease-standard)}
.console button:hover{background:var(--wall-2)}
.console button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.console [data-sound]::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;border:1.5px solid currentColor;vertical-align:0}
.console [data-sound][aria-pressed="true"]::before{background:currentColor}

/* ---------- a room: wall text left, objects free ---------- */
.room{position:relative;overflow-x:clip;padding:clamp(48px,8vw,120px) 16px;border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 60% 70% at 70% 0,var(--lamp),transparent 70%)}
.room-in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 20px;align-items:start}
.walltext{grid-column:1 / span 5}
.walltext h1,.walltext h2{margin:0 0 20px;font-weight:800;letter-spacing:-.035em;line-height:.95}
.walltext h1{font-size:clamp(52px,8.6vw,150px)}
.walltext h2{font-size:clamp(36px,4.6vw,72px)}
.walltext p{max-width:38ch;margin:0 0 14px}
.walltext .an{font:600 clamp(21px,1.9vw,28px)/1.25 var(--sans);letter-spacing:-.01em;max-width:24ch}

/* ---------- objects: framed, hung, lit; the shadow does not match the frame ---------- */
.object{position:relative;margin:0}
.frame{position:relative;background:var(--wall-2);padding:clamp(10px,1.4vw,22px);box-shadow:0 1px 0 var(--line),0 24px 40px -24px var(--shadow)}
.frame img{width:100%;height:auto}
.frame::after{content:"";position:absolute;z-index:-1;left:18%;top:30%;width:120%;height:130%;background:var(--shadow);filter:blur(18px);
  transform:skewX(-28deg) scaleY(1.06);transform-origin:0 0;opacity:.55;pointer-events:none}
.label{font-size:14px;line-height:1.4;color:var(--soft);margin-top:12px}
.label b{color:var(--ink);font-weight:700}
html.ready .reveal{animation:engrave var(--dur-scene) var(--ease-engrave) both}
@keyframes engrave{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}

/* the frieze: a plate enlarged past the wall, moving against the scroll */
.frieze{position:relative;height:clamp(140px,18vw,280px);overflow:hidden;border-bottom:1px solid var(--line)}
.frieze img{position:absolute;left:-6%;top:50%;width:112%;max-width:none;transform:translateY(-50%);filter:grayscale(1) contrast(1.2);mix-blend-mode:multiply;opacity:.8}
:root[data-theme="dark"] .frieze img{filter:grayscale(1) invert(1) contrast(1.1);mix-blend-mode:screen;opacity:.55}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .frieze img{filter:grayscale(1) invert(1) contrast(1.1);mix-blend-mode:screen;opacity:.55}}

/* ---------- the salon hang: the work's own output, framed and hung ---------- */
.salon{list-style:none;margin:0;padding:0;grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px 24px;align-items:start}
.salon > li{grid-column:span var(--w,4);margin-top:var(--drop,0)}
.specimen{position:relative;display:grid;place-items:center;min-height:var(--h,220px);padding:clamp(18px,2.4vw,36px);background:var(--mat);
  box-shadow:inset 0 0 0 clamp(8px,1vw,14px) var(--wall-2),inset 0 0 0 calc(clamp(8px,1vw,14px) + 1px) var(--line),0 26px 40px -26px var(--shadow);text-align:center;overflow:hidden}
.specimen .big{font:900 clamp(64px,9vw,150px)/.85 var(--sans);letter-spacing:-.06em}
.specimen .mid{font:800 clamp(28px,3vw,46px)/1 var(--sans);letter-spacing:-.03em}
.specimen .tt{font:400 clamp(15px,1.2vw,18px)/1.5 var(--mono);text-align:left;white-space:pre-wrap;overflow-wrap:anywhere}
.specimen .prose{font:400 clamp(20px,1.9vw,28px)/1.35 var(--sans);text-align:left;max-width:26ch}
.specimen .prose [data-sev]{font-variation-settings:"wght" var(--wg);font-weight:var(--wg);text-decoration:underline wavy;text-decoration-thickness:1px;text-underline-offset:6px}
.specimen .prose [data-sev="high"]{--wg:900}.specimen .prose [data-sev="medium"]{--wg:620}
.specimen .prose .clean{font-weight:250}
.over{position:absolute;inset:auto auto 14% 50%;translate:-50% 0;rotate:-8deg}
.label h3{margin:0;font:800 clamp(22px,2vw,30px)/1.05 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.label h3 a{text-decoration:none}
.label h3 a:hover,.label h3 a:focus-visible{text-decoration:underline}
.label .medium{display:block;margin:4px 0 6px;font:400 13px/1.4 var(--mono);color:var(--soft)}
.label p{margin:0 0 4px;font-size:16px;color:var(--ink)}

/* ---------- type as material ---------- */
/* the stamp: misregistered, overprinted, rotated */
.stamp{display:inline-block;white-space:nowrap;padding:.18em .45em .12em;border:3px double currentColor;font:800 clamp(18px,1.7vw,26px)/1 var(--sans);letter-spacing:.01em;
  color:var(--stamp,var(--drift));text-shadow:2px 1px 0 color-mix(in srgb,currentColor 35%,transparent);mix-blend-mode:multiply;opacity:.92}
:root[data-theme="dark"] .stamp{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stamp{mix-blend-mode:screen}}
/* the index card: typewritten credit on a ruled card, pinned slightly off true */
.card{position:relative;max-width:400px;padding:18px 18px 14px 26px;background:var(--card);color:#2a2620;rotate:var(--r,-1.2deg);
  background-image:linear-gradient(#c96a5a 0 0),repeating-linear-gradient(transparent 0 23px,rgba(70,110,150,.28) 23px 24px);background-size:1px 100%,100% 100%;background-position:16px 0,0 6px;background-repeat:no-repeat,repeat;
  font:400 14px/24px var(--mono);box-shadow:0 10px 20px -12px var(--shadow)}
.card b{font-weight:400;text-decoration:underline}
/* misregistered second ink: the line is printed twice, the second pass slipped down and right */
.raked{text-shadow:.045em .03em 0 color-mix(in srgb,var(--drift) 42%,transparent)}
html.plain .raked{text-shadow:none}
/* the tag: a specimen tag with a punched hole, tied to the frame by a thread */
.tag{position:relative;display:inline-block;margin-top:14px;padding:6px 14px 6px 30px;background:var(--card);color:#2a2620;font:600 14px var(--sans);
  clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%);border:0}
.tag::before{content:"";position:absolute;left:12px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--wall);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
/* a running head in the margin */
.runhead{grid-column:1 / -1;display:flex;justify-content:space-between;gap:16px;font:400 13px/1.3 var(--mono);color:var(--soft);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px}

/* ---------- the second tour: show me ---------- */
.tour{margin-top:8px}
.tour summary{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:600 14px var(--sans);list-style:none;padding:8px 14px 8px 30px;min-height:36px;background:var(--card);color:#2a2620;clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%)}
.tour summary::-webkit-details-marker{display:none}
.tour summary::before{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--wall);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);transition:background-color var(--dur-quick) var(--ease-standard)}
.tour[open] summary::before{background:#2a2620}
.tour summary:focus-visible{outline-offset:4px}
.tour .answer{margin-top:10px;border-left:2px solid var(--ink);padding:4px 0 4px 14px;font-size:15px}
.tour[open] .answer{animation:open var(--dur-base) var(--ease-enter) both}
@keyframes open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.answer pre,.answer code{font-size:14px}
.answer pre{margin:6px 0;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- reading wall: text with margin notes ---------- */
.reading{grid-column:1 / span 7;font-size:clamp(19px,1.5vw,21px);line-height:1.6}
.reading p{max-width:60ch;margin:0 0 18px}
.notes{grid-column:9 / span 4;list-style:none;margin:0;padding:0;font-size:14px;color:var(--soft);border-top:1px solid var(--line)}
.notes li{padding:12px 0;border-bottom:1px solid var(--line)}
sup a{font:600 .7em var(--mono);text-decoration:none;padding:0 2px}

/* ---------- vitrine: a demo case ---------- */
.vitrine{grid-column:7 / -1;border:1px solid var(--ink);background:var(--wall-2);padding:clamp(16px,2vw,28px);box-shadow:inset 0 0 0 6px var(--wall-2),inset 0 0 0 7px var(--line)}
.picks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.picks button{font:600 15px/1.2 var(--sans);color:var(--ink);background:var(--wall);border:1px solid var(--ink);border-radius:0;padding:10px 16px;min-height:44px;cursor:pointer;transition:background-color var(--dur-quick) var(--ease-standard)}
.picks button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.vitrine .io{font:400 17px/1.45 var(--mono);margin:0 0 10px;overflow-wrap:anywhere}
.vitrine [data-verdict]{font-size:clamp(26px,3.2vw,44px);font-weight:800;letter-spacing:-.03em;margin:4px 0 10px;line-height:1}
.vitrine [data-state]:not([hidden]){animation:open var(--dur-base) var(--ease-enter) both}
.note{font-size:14px;color:var(--soft)}

/* ---------- a sequence shown as a plate of frames ---------- */
.plate-seq{grid-column:1 / -1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--ink);counter-reset:f}
.plate-seq li{counter-increment:f;padding:16px;border-right:1px solid var(--ink);min-height:200px;display:flex;flex-direction:column;gap:6px}
.plate-seq li:last-child{border-right:0}
.plate-seq li::before{content:counter(f);font:400 14px var(--mono);color:var(--soft)}
.plate-seq li.key{background:var(--ink);color:var(--on-ink)}
.plate-seq li.key::before{color:inherit}
.plate-seq b{font-size:20px;letter-spacing:-.01em}
.plate-seq span{font-size:15px;line-height:1.4}

.pair{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pair > div{border-top:2px solid var(--ink);padding-top:12px}
.pair h3{margin:0 0 6px;font:800 28px/1 var(--sans);letter-spacing:-.02em}
.pair .hold{grid-column:1 / -1;border-top:1px solid var(--line)}

.instruction{grid-column:7 / -1;font:400 clamp(20px,2.2vw,30px)/1.45 var(--mono);background:var(--ink);color:var(--on-ink);padding:22px 24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.instruction pre{margin:0;font:inherit;white-space:pre-wrap}
.instruction button{font:600 14px var(--sans);background:var(--wall);color:var(--ink);border:0;border-radius:0;padding:10px 16px;min-height:44px;cursor:pointer}

.foot{padding:28px 16px 48px;display:flex;flex-wrap:wrap;gap:12px 24px;font-size:15px;max-width:1352px;margin:0 auto}
.foot details{flex-basis:100%}
.foot summary{cursor:pointer;font-weight:600}
.foot ul{margin:8px 0 0;padding-left:18px;font-size:14px;color:var(--soft);max-width:90ch}

@media (max-width:860px){
  body{font-size:17px}
  .walltext,.reading,.notes,.vitrine,.instruction{grid-column:1 / -1}
  .salon > li{grid-column:1 / -1;margin-top:0}
  .plate-seq{grid-template-columns:1fr}
  .plate-seq li{border-right:0;border-bottom:1px solid var(--ink);min-height:0}
  .plate-seq li:last-child{border-bottom:0}
  .pair{grid-template-columns:1fr}
  .frame::after{left:10%;width:100%}
}
@media (prefers-reduced-motion:reduce){html.ready .reveal{animation:none}}
@media print{.rail .console,.frieze,[data-art]{display:none!important}.room{background:none}}

/* the plate behind the sequence: each frame shows one cell of a Muybridge plate (set --seq-plate) */
.plate-seq[style*="--seq-plate"] li{position:relative;isolation:isolate}
.plate-seq[style*="--seq-plate"] li::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--seq-plate) no-repeat;background-size:800% 300%;opacity:.22;filter:grayscale(1)}
.plate-seq[style*="--seq-plate"] li:nth-child(1)::after{background-position:14.3% 50%}
.plate-seq[style*="--seq-plate"] li:nth-child(2)::after{background-position:28.6% 50%;opacity:.35}
.plate-seq[style*="--seq-plate"] li:nth-child(3)::after{background-position:42.9% 50%}
.plate-seq[style*="--seq-plate"] li:nth-child(4)::after{background-position:57.1% 50%}
.plate-seq[style*="--seq-plate"] li:nth-child(5)::after{background-position:71.4% 50%}
html.plain .plate-seq li::after{display:none}

/* ---------- surface: grain on every wall, fibre on every card ----------
   A fixed-seed turbulence tile, 160 px, laid over the wall at low opacity. It also dithers the lamp
   gradient so it does not band. Plain view and print drop it. */
.room::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:var(--grain,.07);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 -.1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .room::before{--grain:.05}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .room::before{--grain:.05}}
.room-in{position:relative;z-index:1}
.card,.tag,.tour summary{background-blend-mode:multiply}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.02 .9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E")}
html.plain .room::before,html.plain .card::after{display:none}
@media print{.room::before,.card::after{display:none}}
/* CS-max: Second tour with Slab's layering, both taken further.
   Layers, back to front: wall (grain, lamp) / exposed grid and cell grid / halftone slabs cut on a
   diagonal / supergraphic dot-screen words / framed objects with crop marks / text, which inverts
   where it crosses a slab / controls made of media. Text always stays on top and readable. */

/* ---------- the room is one blend group on a solid wall ---------- */
.room{isolation:isolate;background-color:var(--wall);overflow:clip}
/* frames hang on a keyline; the old blurred, skewed cast shadow is gone */
.cropped .frame::after{display:none}
.cropped .frame{box-shadow:0 0 0 1px var(--line)}
.specimen.cropped{box-shadow:inset 0 0 0 clamp(8px,1vw,14px) var(--wall-2),inset 0 0 0 calc(clamp(8px,1vw,14px) + 1px) var(--line),0 0 0 1px var(--line)}
.room-in{z-index:auto}

/* ---------- exposed grid: twelve columns, an 8 px cell grid, registration marks ---------- */
.gridded > .room-in::before{content:"";position:absolute;inset:-24px 0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,var(--grid-col) 0 1px,transparent 1px calc((100% + 20px) / 12))}
.reg{position:absolute;width:22px;height:22px;pointer-events:none;z-index:2;
  background:linear-gradient(var(--ink),var(--ink)) 50% 0/1px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) 0 50%/100% 1px no-repeat}
.reg::after{content:"";position:absolute;inset:5px;border:1px solid var(--ink);border-radius:50%}
.reg.tl{left:-11px;top:-35px}.reg.tr{right:-11px;top:-35px}.reg.bl{left:-11px;bottom:-35px}.reg.br{right:-11px;bottom:-35px}

/* ---------- the slab: an ink field cut on a diagonal, a plate re-screened inside it ---------- */
.cut{position:absolute;z-index:0;background:var(--slab-ink);overflow:hidden;pointer-events:none;
  top:var(--cut-top,8%);left:var(--cut-left,38%);width:var(--cut-w,70%);height:var(--cut-h,78%);
  clip-path:var(--cut-poly,polygon(18% 0,100% 0,100% 100%,0 100%))}
.cut img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.35}
.cut canvas.ht{color:var(--slab-dot);opacity:.18}
.cut.second{background:none}
.cut.second canvas.ht{color:var(--ink);opacity:.09}
html.ready .cut.pour{animation:pour var(--dur-scene) var(--ease-engrave) both}
@keyframes pour{from{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}to{clip-path:var(--cut-poly,polygon(18% 0,100% 0,100% 100%,0 100%))}}

/* the name inverts where it crosses a slab: near-white under a difference blend reads as ink on the
   wall and as wall on the slab, in both themes. Plain view and forced colours set it as ink. */
.inverts{color:#f9f6ef;--letter-ink:#f9f6ef;mix-blend-mode:difference;position:relative;z-index:1}
html.plain .inverts{color:var(--ink);mix-blend-mode:normal}
/* lettered type is opaque material: no blend on the text, the negative layer does the inversion */
.inverts.slot-on,.inverts.lt-host{mix-blend-mode:normal}
.negative{position:absolute;z-index:2;background:#fff;mix-blend-mode:difference;pointer-events:none}
html.plain .negative{display:none}
@media (forced-colors:active){.negative{display:none}}
@media (forced-colors:active){.inverts{mix-blend-mode:normal;color:CanvasText}}

/* running heads ride above slabs on a wall-coloured strip */
.gridded .runhead{position:relative;z-index:2}
.gridded .runhead span{background:var(--wall);padding:0 4px}

/* body copy never sits on a slab: a wall-coloured ground behind any reading block that could meet one */
.gridded .wall,.gridded .lede,.gridded .walltext p{position:relative;z-index:1}

/* ---------- supergraphic: a room-scale word set in a dot screen ---------- */
.super{position:absolute;z-index:0;margin:0;pointer-events:none;user-select:none;white-space:nowrap;
  font:900 var(--super-size,min(34vw,560px))/.78 var(--face-display);letter-spacing:-.07em;color:transparent;
  background:radial-gradient(circle,var(--super-ink) 36%,transparent 39%) 0 0/var(--super-dot,7px) var(--super-dot,7px);-webkit-background-clip:text;background-clip:text}
.super.carved{font-family:var(--face-carved);font-weight:400;letter-spacing:-.02em}
html.plain .super{display:none}

/* ---------- crop marks on every frame and specimen ---------- */
.cropped{position:relative}
.cropped::before{content:"";position:absolute;inset:-14px;pointer-events:none;z-index:2;
  --m:linear-gradient(var(--ink),var(--ink));
  background:var(--m) 0 13px/9px 1px no-repeat,var(--m) 13px 0/1px 9px no-repeat,
    var(--m) 100% 13px/9px 1px no-repeat,var(--m) calc(100% - 13px) 0/1px 9px no-repeat,
    var(--m) 0 calc(100% - 13px)/9px 1px no-repeat,var(--m) 13px 100%/1px 9px no-repeat,
    var(--m) 100% calc(100% - 13px)/9px 1px no-repeat,var(--m) calc(100% - 13px) 100%/1px 9px no-repeat}

/* ---------- controls made of media ---------- */
/* navigation as index cards, tabs up, the current one pulled from the drawer */
.cards-nav ul{display:flex;flex-wrap:wrap;gap:6px 4px;margin:0;padding:0;list-style:none}
.cards-nav a{position:relative;display:block;padding:9px 12px 7px 16px;min-height:40px;background:var(--card);color:#2a2620;text-decoration:none;
  font:400 14px/1.6 var(--face-utility);rotate:var(--r,-.8deg);box-shadow:0 6px 10px -8px var(--shadow);
  background-image:linear-gradient(#c96a5a 0 0),repeating-linear-gradient(transparent 0 11px,rgba(70,110,150,.24) 11px 12px);background-size:1px 100%,100% 100%;background-position:9px 0,0 4px;background-repeat:no-repeat,repeat;
  transition:translate var(--dur-base) var(--ease-standard)}
.cards-nav li:nth-child(2n) a{--r:.9deg}
.cards-nav a:hover,.cards-nav a:focus-visible{translate:0 -3px}
.cards-nav a[aria-current="page"]{translate:0 -6px;box-shadow:0 12px 16px -10px var(--shadow);text-decoration:underline}

/* stamps that are buttons: un-inked outline at rest, inked and off-register when pressed */
.stamp-btn{font:800 14px/1 var(--face-display);color:var(--ink);background:transparent;border:3px double var(--ink);padding:9px 12px;min-height:40px;cursor:pointer;
  rotate:var(--r,-2deg);transition:rotate var(--dur-quick) var(--ease-standard),background-color var(--dur-quick) var(--ease-standard)}
.stamp-btn:hover{rotate:0deg}
.stamp-btn[aria-pressed="true"],.stamp-btn.inked{background:var(--ink);color:var(--wall);box-shadow:2px 1px 0 color-mix(in srgb,var(--ink) 40%,transparent)}
.stamp-btn:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* the lamp: a halftone disc that prints positive in light and negative in dark */
.lamp-btn{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--face-text);color:var(--ink);background:none;border:0;padding:4px;min-height:40px;cursor:pointer}
.lamp-btn::before{content:"";width:28px;height:28px;border-radius:50%;border:1px solid var(--ink);
  background:radial-gradient(circle,var(--ink) 34%,transparent 37%) 0 0/4px 4px,linear-gradient(90deg,var(--wall) 50%,transparent 50%)}

/* the record: the sound control turns only while sound plays */
.disc-btn{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--face-text);color:var(--ink);background:none;border:0;padding:4px;min-height:40px;cursor:pointer}
.disc-btn img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--ink)}
.sound-on .disc-btn img{animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* a halftone slab is the hover state: a diagonal dot band sweeps under the link */
.slabhover{position:relative;isolation:isolate;text-decoration:none}
.slabhover::after{content:"";position:absolute;z-index:-1;inset:-4px -10px;background:radial-gradient(circle,var(--ink) 38%,transparent 41%) 0 0/4px 4px;opacity:.35;
  clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path var(--dur-slow) var(--ease-standard)}
.slabhover:hover::after,.slabhover:focus-visible::after{clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}

/* receipts as tooltips: perforated till roll, typed */
.receipt-tip{position:fixed;z-index:60;display:flex;flex-direction:column;gap:2px;padding:12px 14px 18px;background:#f4f0e6;color:#1d1a15;
  font:400 12px/1.5 var(--face-utility);box-shadow:0 14px 26px -14px rgba(0,0,0,.6);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),95% 100%,90% calc(100% - 6px),85% 100%,80% calc(100% - 6px),75% 100%,70% calc(100% - 6px),65% 100%,60% calc(100% - 6px),55% 100%,50% calc(100% - 6px),45% 100%,40% calc(100% - 6px),35% 100%,30% calc(100% - 6px),25% 100%,20% calc(100% - 6px),15% 100%,10% calc(100% - 6px),5% 100%,0 calc(100% - 6px))}
.receipt-tip b{font-weight:400;text-transform:none;opacity:.6;margin-right:6px}
.receipt-tip[hidden]{display:none}
[data-receipt]{text-decoration-style:dotted}

/* media controls inside the console drop the console's default box */
.console .lamp-btn,.console .disc-btn{border:0;background:none;padding:4px}
.console .disc-btn::before{content:none}
.console .stamp-btn{border:3px double var(--ink);background:transparent}
.console .stamp-btn[aria-pressed="true"]{background:var(--ink);color:var(--wall)}

/* ---------- tokens for this direction ---------- */
:root{--grid-col:rgba(22,19,15,.10);--grid-cell:rgba(22,19,15,.035);--slab-ink:#16130f;--slab-dot:#e8e3d9;--super-ink:rgba(22,19,15,.16)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--grid-col:rgba(236,229,214,.08);--grid-cell:rgba(236,229,214,.03);--slab-ink:#ece5d6;--slab-dot:#0a0a0c;--super-ink:rgba(236,229,214,.13)}}
:root[data-theme="dark"]{--grid-col:rgba(236,229,214,.08);--grid-cell:rgba(236,229,214,.03);--slab-ink:#ece5d6;--slab-dot:#0a0a0c;--super-ink:rgba(236,229,214,.13)}

@media (prefers-reduced-motion:reduce){html.ready .cut.pour{animation:none}.sound-on .disc-btn img{animation:none}.slabhover::after{transition:none}}
html.plain .cut,html.plain .reg,html.plain .gridded > .room-in::before,html.plain .cropped::before{display:none}
@media print{.cut,.super,.reg,.receipt-tip{display:none!important}}

/* narrow screens: a slab placed for desktop can reach the reading column; reading blocks then
   sit on their own wall-coloured ground so text never prints over the screen */
@media (max-width:860px){
  .gridded .walltext,.gridded .wall,.gridded .lede,.gridded .reading,.gridded .deck{position:relative;z-index:1;background:var(--wall);box-shadow:0 0 0 8px var(--wall)}
}


/* ---------- the type scale, applied (QUALITY-SPEC T1 to T8) ----------
   Every text role maps to one step of --fs-1 .. --fs-hero; leading and tracking follow the size band. */
html{font-synthesis:none;font-kerning:normal;font-optical-sizing:auto}
p,li,figcaption,dd{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
body{font-size:var(--fs-3);line-height:1.55}
.skip{font-size:var(--fs-2)}
.rail .home{font-size:var(--fs-3)}
.cards-nav a,.console button,.stamp-btn,.lamp-btn,.disc-btn,.picks button,.instruction button,.btn{font-size:var(--fs-2)}
.runhead,.label .medium,.receipt-tip,.plate-seq li::before{font-size:var(--fs-1)}
.card,.tag,.tour summary,.notes,.notes li,.how p,.answer,.answer pre,.answer code,.note,.foot,.foot ul,.plaque,.plate-seq span,.label p{font-size:var(--fs-2);line-height:1.5}
.label p{font-size:var(--fs-3)}
.card i,.card cite,.card em{font-style:normal;text-decoration:underline dotted}
.walltext p,.wall p,.lede,.reading p,.rooms-intro,.pair p,.hold,.vitrine p,.edges p{font-size:var(--fs-3);line-height:1.6;max-width:27em}
.reading p{font-size:var(--fs-4);line-height:1.55;max-width:24em}
.notes li{max-width:28em}
.an,.deck{font-size:var(--fs-5)!important;line-height:1.12!important;letter-spacing:-.02em!important;font-weight:700}
.walltext .an{max-width:22ch}
.tt,.specimen .tt,.io,.vitrine .io{font-size:var(--fs-3);line-height:1.5}
.instruction,.instruction pre{font-size:var(--fs-4);line-height:1.45}
.specimen .prose{font-size:var(--fs-4);line-height:1.4}
.plate-seq b,.label h3,.pair h3,.edges h3{font-size:var(--fs-5);line-height:1.05;letter-spacing:-.02em}
.plate-seq b{font-size:var(--fs-4);line-height:1.15}
.walltext h1,.walltext h2,[data-h="room"],.specimen .mid,.vitrine [data-verdict],.state [data-verdict]{font-size:var(--fs-6);line-height:1;letter-spacing:-.035em;font-weight:900}
[data-verdict]{font-size:var(--fs-3)}
.vitrine [data-verdict]{font-weight:800}
.specimen .big,[data-fs="96"]{font-size:var(--fs-7)!important;line-height:.9;letter-spacing:-.05em}
[data-fs="48"]{font-size:var(--fs-6)!important;line-height:1;letter-spacing:-.04em}
.stamp{font-size:var(--fs-4);letter-spacing:-.01em}
.stamp.over{font-size:var(--fs-4)}
.super.carved{letter-spacing:.04em}
/* lettered type keeps an ink colour for the reader and the audit; the fill is what goes transparent */
.lt-host.lt-on,.lettered-on,.slot-on{color:var(--ink)!important;-webkit-text-fill-color:transparent}
html.plain .lt-host.lt-on,html.plain .lettered-on,html.plain .slot-on{-webkit-text-fill-color:currentColor}


/* ---------- supergraphic ultramodern crossover: one strong move per page ----------
   After the condensed display titles with footage knocked into the letters (video-craft study,
   section 3) and 1960s environmental supergraphics: a title at room scale in Kilon with an archival
   plate printed inside its letters, and one set of parallel bands that turns a corner between rooms.
   The text stays real; plain view, forced colours and print show it as ink. */
.knock{font-family:var(--face-super);font-weight:700;letter-spacing:-.01em;line-height:.82;color:var(--ink);
  background:var(--plate) var(--plate-pos,50% 40%)/cover;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:contrast(1.25) grayscale(.35);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill}
:root[data-theme="dark"] .knock{filter:contrast(1.1) grayscale(.35) brightness(1.25)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .knock{filter:contrast(1.1) grayscale(.35) brightness(1.25)}}
html.plain .knock{background:none;-webkit-text-fill-color:currentColor;filter:none}
@media (forced-colors:active){.knock{background:none;-webkit-text-fill-color:CanvasText;filter:none}}
@media print{.knock{background:none;-webkit-text-fill-color:#000}}

.bands{display:block;width:100%;height:auto;margin:0;color:var(--ink)}
.bands path{fill:none;stroke-linecap:butt}
html.plain .bands{display:none}

/* the claim span: an ink rule sweeps under the phrase the proof is about, once, on the measured reveal curve */
.claim{background:linear-gradient(currentColor,currentColor) 0 100%/0 .14em no-repeat;padding-bottom:.06em}
html.ready .claim{animation:sweep var(--dur-scene) var(--ease-engrave) .4s both}
@keyframes sweep{to{background-size:100% .14em}}
@media (prefers-reduced-motion:reduce){html.ready .claim{animation:none;background-size:100% .14em}}
html.plain .claim{background-size:100% .14em;animation:none}

/* ---------- depth and motion instead of clutter ----------
   Moving between pages: cross-document View Transitions. Shared elements carry the same
   view-transition-name on both pages (a project's title in the salon and its page masthead), so the
   focused item travels and the rest recedes. Browsers without the API just navigate. Durations and
   curves are the substrate tokens; under reduced motion it is a plain crossfade. */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:var(--dur-scene);animation-timing-function:cubic-bezier(0.65,0,0.35,1)}
::view-transition-old(root){animation:vt-recede var(--dur-slow) cubic-bezier(0.4,0,1,1) both}
::view-transition-new(root){animation:vt-arrive var(--dur-scene) cubic-bezier(0,0,0.2,1) both}
@keyframes vt-recede{to{opacity:0;transform:scale(.97);filter:blur(2px)}}
@keyframes vt-arrive{from{opacity:0;transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*){animation-duration:200ms}
  ::view-transition-old(root){animation:vt-fade-out 200ms linear both}
  ::view-transition-new(root){animation:vt-fade-in 200ms linear both}
}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}
[data-vt="flywheel"]{view-transition-name:flywheel}
[data-vt="baron"]{view-transition-name:baron}

/* focus forward, the rest recedes: in the salon, the frame under the pointer or keyboard comes forward */
.salon:has(> li:hover, > li:focus-within) > li:not(:hover):not(:focus-within){opacity:.42;transform:scale(.985);filter:grayscale(.6)}
.salon > li{transition:opacity var(--dur-slow) var(--ease-standard),transform var(--dur-slow) var(--ease-standard),filter var(--dur-slow) var(--ease-standard)}
.salon > li:focus-within{opacity:1}

/* secondary content in depth: notes sit back until their reference or the note itself is focused */
.notes li{opacity:.55;transition:opacity var(--dur-base) var(--ease-standard)}
.notes li:target,.notes li:hover,.notes li:focus-within,.reading:has(sup a:hover, sup a:focus) + .notes li{opacity:1}
@media (prefers-reduced-motion:reduce){.salon > li,.notes li{transition:none}}
html.plain .salon > li,html.plain .notes li{opacity:1!important;transform:none!important;filter:none!important}
@media (max-width:860px){.room-in > [style*="grid-column"],.room-in > .reading,.room-in > .notes{grid-column:1 / -1 !important}}