/* Wolf Wright. One fixed stage of paintings, the page scrolling over it, paper tearing across to change the scene.
   Structure taken from how the Renaissance Edition really works: the REA read and a live probe showed a pinned stage
   with ordinary scrolling on top. Without the .film class this file lays out a plain, complete page. */
@font-face{font-family:Switzer;src:url(fonts/switzer-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Switzer;src:url(fonts/switzer-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Switzer;src:url(fonts/switzer-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-italic.woff2) format("woff2");font-style:italic;font-display:swap}

:root{
  --bg:#0a0d14;--ink:#f6f0e2;--muted:#b4b2a9;--gold:#e6b450;--gold-ink:#0a0d14;
  --paper:#e6e1d4;--paper-ink:#14151c;--paper-soft:#55534d;--red:#c8171b;
  --m:clamp(16px,2.2vw,32px);
  --small:clamp(.875rem,.85rem + .1vw,.9375rem);
  --body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --mon:clamp(5.25rem,15.2vw,20rem);
  --word:clamp(4.75rem,19vw,27rem);
  --out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--body)/1.5 Switzer,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure,table{margin:0;padding:0}
ul,ol{list-style:none}
img,video,svg,canvas{display:block}
img,video{max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
button,input{font:inherit;color:inherit}
h2{font-size:var(--head);font-weight:600;line-height:.98;letter-spacing:-.04em}
h3{font-size:var(--lead);font-weight:600;line-height:1.1;letter-spacing:-.025em}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--gold-ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:var(--m);top:-80px;z-index:50;padding:10px 16px;background:var(--gold);color:var(--gold-ink)}
.skip:focus{top:12px}

.wall{font-size:var(--small);line-height:1.35;color:var(--paper-soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border:0;background:var(--gold);color:var(--gold-ink);font-weight:500;font-size:var(--body);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:transform .14s var(--out),background-color .16s ease}
.btn:hover{background:#f1c96e}
.btn:active{transform:scale(.97)}
.paper .btn{background:var(--paper-ink);color:var(--paper)}
.paper .btn:hover{background:#2b2d38}
.link{display:inline-block;margin-top:8px;padding:6px 0;font-weight:500;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.link:hover{color:var(--red)}
.textbtn{padding:8px 0;border:0;background:none;font-size:var(--small);text-decoration:underline;text-underline-offset:.22em;cursor:pointer}
.fine{font-size:var(--small);line-height:1.4;color:var(--paper-soft)}

/* The bar and the chapters stay on top of everything, reading right on paper or paint. */
.bar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);padding:14px var(--m);font-size:15px;line-height:1.2;color:#fff;mix-blend-mode:difference}
.bar a{padding:6px 0;text-decoration:none}
.bar__mark{font-weight:600;letter-spacing:-.03em;font-size:17px;margin-right:auto}
.bar__nav{display:flex;gap:clamp(14px,2vw,28px)}
.bar__call{font-weight:500;font-variant-numeric:tabular-nums}
.bar__sound{display:none;align-items:center;gap:7px;padding:6px 0;border:0;background:none;color:inherit;font:inherit;font-weight:500;cursor:pointer}
.film .bar__sound{display:inline-flex}
.wave{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.wave i{display:block;width:2px;height:4px;background:currentColor;transition:height .3s var(--out)}
.bar__sound[aria-pressed=true] .wave i{animation:wave 1.1s ease-in-out infinite alternate}
.bar__sound[aria-pressed=true] .wave i:nth-child(2){animation-delay:-.4s}
.bar__sound[aria-pressed=true] .wave i:nth-child(3){animation-delay:-.75s}
@keyframes wave{from{height:3px}to{height:12px}}
.rail{display:none}

/* Plain page first: no script, reduced motion, or the taste switched off. */
.stage,#ink{display:none}
.still img{width:100%}
.ch{position:relative}
.hero__name{padding:72px var(--m) 0;font-size:var(--mon);font-weight:600;letter-spacing:-.055em;line-height:.86}
.hero__name .l1,.hero__name .l2{display:block}
.hero__copy{padding:20px var(--m) 28px;max-width:34rem}
.hero__lede{margin-bottom:16px}
.word{padding:48px var(--m) 8px;font-size:clamp(3.5rem,12vw,14rem);font-weight:600;line-height:.9;letter-spacing:-.055em;color:var(--ink)}
.sub{padding:0 var(--m) 24px;font:italic 400 clamp(1.75rem,3.6vw,4.25rem)/1.05 "Instrument Serif",Georgia,serif;color:var(--ink)}

/* Paper: the sheets that tear across the stage. */
.paper{position:relative;background:var(--paper);color:var(--paper-ink);padding:clamp(40px,6vw,96px) var(--m)}
.tear{position:absolute;left:0;width:100%;height:auto;max-width:none;pointer-events:none;display:none}
.paper>.wall{margin-top:24px}

.list3{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px}
.list3 article:nth-child(1){grid-column:1/6}
.list3 article:nth-child(2){grid-column:6/10;margin-top:clamp(40px,7vw,110px)}
.list3 article:nth-child(3){grid-column:10/13;margin-top:clamp(20px,3vw,48px)}
.thumb{display:block;overflow:hidden;margin-bottom:14px;background:#cfc9ba}
.thumb img{width:100%;aspect-ratio:8/5;object-fit:cover;transition:transform .5s var(--out)}
.thumb:hover img{transform:scale(1.03)}
.list3 p{margin-top:8px}
.own{margin-top:clamp(28px,4vw,56px);font-size:var(--lead);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.own .textbtn{margin-left:10px;font-weight:400;letter-spacing:0}

.finds li+li{margin-top:clamp(12px,1.4vw,18px)}
.tile{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit}
.tile .note-l{display:block;font-size:var(--small);color:var(--paper-soft)}
.tile .found{display:block;font-size:clamp(1.5rem,1rem + 1.9vw,2.625rem);font-weight:600;line-height:1.04;letter-spacing:-.035em}
.tile:hover .found{color:var(--red)}
.tile:active{transform:scale(.99)}
.tile.fixed{cursor:default}
.tile.fixed .found,.tile.fixed .note-l{color:#14652f}

.say{font-size:clamp(2.25rem,6.4vw,8rem);font-weight:600;line-height:.98;letter-spacing:-.045em;max-width:15em}

.lede{font-size:var(--lead);font-weight:500;line-height:1.2;letter-spacing:-.02em;max-width:26em}
.ck{margin-top:20px}
.ck label{display:block;margin-bottom:6px;font-weight:500}
.ck__row{display:flex;gap:0}
.ck input{flex:1;width:100%;min-width:0;min-height:clamp(64px,8vw,104px);padding:0 clamp(14px,2vw,28px);border:0;border-radius:0;background:#fffdf6;color:var(--paper-ink);font-size:clamp(1.375rem,3.6vw,3rem);font-weight:500;letter-spacing:-.03em}
.ck input::placeholder{color:#7d7869}
.ck .btn{min-height:clamp(64px,8vw,104px);padding:0 clamp(18px,3vw,44px);font-size:clamp(1.0625rem,1.6vw,1.5rem)}
.check__sum{margin-top:20px;font-size:var(--lead);font-weight:600;letter-spacing:-.02em}
#rep-host{color:var(--red)}
.report{margin-top:10px;display:grid;grid-template-columns:repeat(2,1fr);column-gap:32px}
.report li{display:grid;grid-template-columns:2.6em 1fr;padding:5px 0;line-height:1.3;color:var(--paper-soft)}
.report .mk{font-size:var(--small);font-weight:600;padding-top:.12em}
.report .tx b{font-weight:400}
.report .why{display:block;font-size:var(--small);color:var(--paper-ink)}
.report li.ok,.report li.bad{color:var(--paper-ink)}
.report li.ok .mk{color:#14652f}
.report li.bad b{font-weight:600}
.report li.bad .mk{color:var(--red)}
.busy{opacity:.55}
.paper--check .fine{margin-top:14px}

.word--price b{display:inline-block;padding:0 .12em;background:var(--gold);color:var(--gold-ink);font-weight:600;line-height:1}
.price__line{display:block}
.price__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.proof{--bar:#3a2a1c;display:grid;gap:clamp(56px,7vw,104px);margin-top:clamp(64px,9vw,136px)}
.proof__intro h2{font-size:var(--head);font-weight:600;line-height:1;letter-spacing:-.04em;max-width:15em}
.proof__lead{margin-top:clamp(18px,2vw,28px);max-width:34em;font-size:var(--lead);line-height:1.28;letter-spacing:-.012em}
.proof__lead::first-letter{float:left;margin:.05em .09em 0 0;font:italic 400 3.5em/.8 "Instrument Serif",Georgia,serif;color:var(--red)}
.entry{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;align-items:start;padding-top:clamp(16px,1.8vw,24px);border-top:1px solid #bdb7a8}
.entry__text{grid-column:1/6;padding-right:clamp(0px,2vw,32px)}
.entry__text p+p{margin-top:12px;max-width:27em}
.entry__say{font:italic 400 clamp(1.9rem,3.2vw,3.1rem)/1.03 "Instrument Serif",Georgia,serif;letter-spacing:-.01em}
.entry__fig{grid-column:6/13;margin:0}
.entry__fig>p+p{margin-top:12px}
.chart__title{font-weight:600;letter-spacing:-.012em;margin-bottom:12px}
.bars{width:100%;border-collapse:collapse}
.bars th{width:42%;padding:7px 14px 7px 0;font-weight:400;line-height:1.14;text-align:left;vertical-align:middle}
.bars th small{display:block;font-size:var(--small);color:var(--paper-soft)}
.bars td{padding:7px 0;vertical-align:middle}
.bars--tight th,.bars--tight td{padding-top:4px;padding-bottom:4px}
.bars .track{display:flex;align-items:center;gap:9px}
.bars .inkbar{display:block;flex:0 1 auto;width:calc(var(--v)*.84%);height:17px;background:var(--bar);border-radius:0 4px 4px 0;filter:url(#ink);transition:clip-path 1.1s var(--out) calc(var(--i,0)*70ms)}
.bars--tight .inkbar{height:13px}
.bars .inkbar--thin{opacity:.55}
.bars b{font-weight:600;font-variant-numeric:tabular-nums}
.bars .hit th{font-weight:600}
.bars .hit .inkbar{background:var(--red)}
.bars tr:hover th,.bars tr:hover b{color:var(--red)}
.film .chart:not(.on) .inkbar{clip-path:inset(-20% 100% -20% 0)}
.film .chart.on .inkbar{clip-path:inset(-20% -2% -20% 0)}
.proof__end{max-width:24em;padding-top:clamp(18px,2vw,28px);border-top:1px solid #bdb7a8}
.source{margin-top:12px;font-size:var(--small);line-height:1.36;color:var(--paper-soft);max-width:46em}
.source a{color:inherit;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.source a:hover{color:var(--red)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:20px clamp(20px,3vw,44px)}
.stat b{display:block;font-size:clamp(3.5rem,7.2vw,6.6rem);font-weight:600;line-height:.9;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.stat>p{margin-top:8px}
.left-out{margin-top:clamp(20px,2.4vw,32px);border-top:1px solid #bdb7a8}
.left-out summary{padding:12px 0;font-weight:600;cursor:pointer}
.left-out summary:hover{color:var(--red)}
.left-out dl{margin-top:12px}
.left-out dt{margin-top:14px;font:italic 400 1.35em/1.1 "Instrument Serif",Georgia,serif}
.left-out dd{margin:3px 0 0;max-width:40em}
.calc{grid-column:1/6}
.calc__say{font-size:clamp(1.75rem,3.4vw,3.5rem);font-weight:600;line-height:1.02;letter-spacing:-.035em;min-height:2.1em}
.calc__label{display:block;margin-top:14px}
.calc output{font-weight:600}
.calc input[type=range]{width:100%;height:44px;margin-top:4px;accent-color:var(--paper-ink);cursor:pointer}
.spec{grid-column:7/13;border-collapse:collapse;width:100%}
.spec caption{text-align:left;padding-bottom:10px;color:var(--paper-soft)}
.spec th{font-weight:400;text-align:left;padding:9px 16px 9px 0;border-top:1px solid #bdb7a8}
.spec td{font-weight:500;text-align:right;padding:9px 0;border-top:1px solid #bdb7a8;white-space:nowrap}

.who__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px}
.who__say{grid-column:1/6}
.who__say h2,.faq h2{margin-bottom:20px}
.who__say p+p{margin-top:14px}
.facts{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:20px;font-weight:600}
.who__say .wall{margin-top:16px}
.faq{grid-column:7/13}
details{padding:10px 14px;margin:0 -14px;transition:background-color .16s ease}
details[open]{background:#f2eee3}
summary{list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:center;min-height:44px;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.2;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .18s ease}
details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
summary:hover{color:var(--red)}
details p{padding:6px 28px 6px 0;max-width:36em}

.call__stick{padding:32px var(--m)}
.call__h{font-size:var(--lead);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.call__num{display:block;margin:.06em 0 0 -.03em;font-size:clamp(2.75rem,10.6vw,15rem);font-weight:600;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;text-decoration:none;white-space:nowrap}
.call__num:hover{color:var(--gold)}
.call__clock{margin-top:8px}

.foot{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(40px,6vw,80px);min-height:100svh;padding-bottom:16px}
.foot__top{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;row-gap:32px}
.note-form,.sent{grid-column:1/8}
.foot__facts{grid-column:9/13}
.note__say{font-size:var(--lead);font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
.note__fields{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
.field{margin-bottom:10px}
.field label{display:block;margin-bottom:4px;font-size:var(--small)}
.field input{width:100%;min-height:48px;padding:0 12px;border:0;border-radius:0;background:#fffdf6;color:var(--paper-ink);font-size:var(--body)}
.note__msg{font-size:var(--small);color:#a81418}
.note__msg:not(:empty){margin-bottom:8px}
.note-form .fine{margin-top:8px}
.sent__head{font-size:var(--head);font-weight:600;letter-spacing:-.04em;line-height:1;margin-bottom:12px}
.sent{outline:0}
.foot__facts a{text-decoration:none;display:inline-block;padding:3px 0}
.foot__facts a:hover{text-decoration:underline;text-underline-offset:.2em}
.foot__credit{margin-top:16px;font-size:var(--small);line-height:1.4}
.foot__updated{margin-top:12px;font-size:var(--small)}
.foot__mark{width:100%;height:auto;overflow:visible}
.foot__mark text{font-family:Switzer,Arial,sans-serif;font-weight:600;font-size:150px;fill:var(--paper-ink);letter-spacing:-8px}

.taste{position:fixed;right:var(--m);bottom:14px;z-index:31;padding:9px 13px;border:0;background:var(--bg);color:var(--ink);font-size:var(--small);line-height:1.1;cursor:pointer;transition:transform .14s var(--out)}
.taste:active{transform:scale(.97)}
.t-short{display:none}

/* ---------- The film. Everything below needs the script. ---------- */
.poster{display:none}
.film .still{display:none}
/* The poster is the canvas's own first frame, captured by art/hero_poster.mjs: tall screens start further along the painting, so they have their own. Same box, centred, so the two lie exactly on top of each other. */
.film .poster{display:block;position:fixed;inset:0;height:100%;height:100lvh;z-index:0;background:var(--bg) url(art/w/hero-poster.webp) 50% 50%/cover no-repeat}
@media not all and (min-aspect-ratio:1/1){.film .poster{background-image:url(art/w/hero-poster-tall.webp)}}
#world,#stage,#fx,#notes,#pup,.pup-say,.talk,.hint,.found{display:none}
.film #stage{display:block;position:fixed;inset:0;width:100%;height:100%;height:100lvh;z-index:0;pointer-events:none;visibility:hidden}
.film .talk:not([hidden]){display:block;position:fixed;left:0;top:0;z-index:6;width:max-content;max-width:min(270px,calc(100vw - 16px));padding:9px 13px 10px;background:#f1e7d0;color:#2a1c10;border:1.5px solid #3a2a1c;border-radius:16px;box-shadow:2px 3px 0 rgba(58,42,28,.55)}
.film .talk::after{content:"";position:absolute;left:var(--tail,40px);bottom:-11px;width:16px;height:16px;margin-left:-8px;background:#f1e7d0;border-right:1.5px solid #3a2a1c;border-bottom:1.5px solid #3a2a1c;transform:rotate(45deg) skew(10deg,10deg)}
.film .talk--under::after{bottom:auto;top:-11px;transform:rotate(225deg) skew(10deg,10deg)}
.film .talk--box:not([hidden]){width:min(310px,calc(100vw - 16px));max-width:none;padding:11px 32px 12px 15px;border-radius:6px}
.talk__who{font:600 12px/1.2 Switzer,Arial,sans-serif;letter-spacing:.02em;color:#8a4a16;margin-bottom:2px}
.talk__line{font:italic 400 22px/1.1 "Instrument Serif",Georgia,serif;min-height:1.1em}
.talk__x{position:absolute;right:1px;top:1px;width:30px;height:30px;padding:0;border:0;background:none;font-size:19px;line-height:1;cursor:pointer;display:none}
.talk--box .talk__x{display:block}
.talk__opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.talk__opts:empty{display:none}
.talk__opt{min-height:36px;padding:0 11px;display:inline-flex;align-items:center;border:0;background:var(--paper-ink);color:var(--paper);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:transform .14s var(--out)}
.talk__opt:active{transform:scale(.97)}
.film .found:not([hidden]){display:block;margin-top:10px;font:italic 400 15px/1.1 "Instrument Serif",Georgia,serif}
.film .hint{display:block;position:sticky;top:calc(100svh - 96px);z-index:1;margin-top:40svh;margin-left:max(190px,14vw);max-width:27em;padding:6px 10px;background:var(--paper);width:fit-content;font:italic 400 clamp(1.25rem,1.9vw,1.75rem)/1.12 "Instrument Serif",Georgia,serif;color:#14151c}
.over-actor,.over-actor *{cursor:pointer!important}
.more{display:none}
.film .more{display:block;position:fixed;left:50%;bottom:18px;z-index:7;margin:0;padding:7px 12px;background:var(--paper);color:var(--paper-ink);font:italic 400 19px/1 "Instrument Serif",Georgia,serif;transform:translate(-50%,10px);opacity:0;transition:opacity .3s ease,transform .3s var(--out);pointer-events:none}
.film .more.on{opacity:1;transform:translate(-50%,0)}
.more i{display:inline-block;width:8px;height:8px;margin-left:6px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-2px) rotate(45deg)}
.steps{margin-top:clamp(40px,6vw,88px);max-width:44em}
.steps ol{margin-top:14px;list-style:decimal inside}
.steps li{padding:6px 0;border-top:1px solid #bdb7a8}
.hint b{display:block;font:600 14px/1.3 Switzer,Arial,sans-serif}
.film #fx{display:block;position:fixed;inset:0;width:100%;height:100%;height:100lvh;z-index:0;pointer-events:none}
.film .lt{display:inline-block}
.film .word.live .lt{will-change:transform}
.film .lt--stone{position:relative;color:transparent}
.film .lt--stone .sh{position:absolute;left:0;top:0;font-style:normal;color:#fff8ea}
.film .word.live .lt--stone .sh:not(.sh--ghost){will-change:transform}
.film .lt--stone .sh--ghost{position:static;background:none;-webkit-text-stroke:0;color:transparent}
.notaste .lt{transform:none!important}
.film .hint--check,.film .hint--price{margin-top:60svh}
.film .hint--call{position:static;margin:14px 0 0;color:var(--paper-ink)}
.film #world{display:block;position:fixed;inset:0;width:100%;height:100%;height:100lvh;z-index:0;opacity:0;transition:opacity .5s ease}
.world-ready #world{opacity:1}
.film .ch--hero .hero__pin{z-index:1}
.film #notes{display:block;position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.film #pup{display:block;position:fixed;left:0;top:0;z-index:35;pointer-events:none;will-change:transform}
.pup-grip{display:none}
.film .pup-grip:not([hidden]){display:block;position:fixed;left:0;top:0;z-index:35;touch-action:none}
.film .pup-say:not([hidden]){display:block;position:fixed;left:0;top:0;z-index:36;max-width:210px;padding:7px 12px;background:#f1e7d0;color:#2a1c10;border:1.5px solid #3a2a1c;border-radius:14px;box-shadow:2px 3px 0 rgba(58,42,28,.55);font:italic 400 21px/1.05 "Instrument Serif",Georgia,serif;pointer-events:none}
.over-wolf,.over-wolf *{cursor:grab!important}
.grabbing,.grabbing *{cursor:grabbing!important;user-select:none}
.film .paper{z-index:4}
.film .paper--work .tear,.film .paper--bench .tear{display:block}
.film .tear--top{bottom:calc(100% - 2px)}
.film .tear--bot{top:calc(100% - 2px);transform:scale(-1,-1)}
.interlude{padding:clamp(40px,6vw,96px) var(--m)}
.film .interlude{position:relative;z-index:2;display:flex;align-items:center;min-height:120svh;color:#fff8ea}
.film .paper--work,.film .paper--ruins,.film .paper--check,.film .paper--price{min-height:112svh;padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(56px,8vw,120px)}
.film .paper--work{padding-bottom:40px}
.film .paper--bench{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(48px,6vw,88px)}
.paper--bench .steps{margin-top:0}
.film .paper--bench{padding-top:40px;padding-bottom:clamp(56px,8vw,120px);min-height:100svh}

/* First screen. The painting does the talking: the name in the open sky, the offer on a slip of paper. */
.film .ch--hero{height:360svh}
.film .hero__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.film .hero__name{position:absolute;left:36vw;top:calc(14px + 2.4svh);z-index:1;margin:0;padding:0;font-size:clamp(2.75rem,5.2vw,7rem);font-weight:600;letter-spacing:-.055em;line-height:1;color:#14151c;white-space:nowrap}
.hero__slip{padding:0 var(--m) 24px;max-width:34rem}
.film .hero__slip{position:absolute;z-index:1;right:var(--m);bottom:clamp(16px,3svh,32px);width:min(25rem,calc(100vw - 2 * var(--m)));max-width:none;padding:16px 18px 18px;background:var(--paper);color:var(--paper-ink)}
.hero__lede{margin-bottom:12px}
.film .hero__slip .btn{background:var(--paper-ink);color:var(--paper)}
.note{position:absolute;left:0;top:0;width:clamp(170px,21vw,320px);height:auto;max-width:none;opacity:0;transition:opacity .25s ease;will-change:transform}
.note.on{opacity:1}

/* Each chapter is one painted shot: the painting first, then the word rising through it in ordinary scroll, then the paper. */
.film .ch--work{height:220svh}
.film .ch--square{height:170svh;padding-top:0!important}
.film .ch--ruins{height:150svh}
.film .ch--check{height:450svh;padding-top:230svh!important}
.film .ch--price{height:330svh}
.film .ch--who{height:190svh}
.film .ch--call{height:200svh}
.film .ch:not(.ch--hero){padding-top:128svh}
.film .word{position:relative;z-index:1;padding:0 var(--m);font-size:clamp(4rem,13.4vw,19rem);line-height:.88;color:#fff8ea}
.film .sub{position:relative;z-index:1;margin-top:.28em;padding:0 var(--m);font-size:clamp(2rem,4.2vw,5.5rem);line-height:1.02;color:#fff8ea;max-width:15em}
.film .sub::first-letter{font-size:2.05em;line-height:.8}
.film .word--price{font-size:clamp(3rem,9.6vw,14rem)}
.film .call__stick{position:sticky;top:12svh;z-index:1;margin-top:30svh;padding:0 var(--m);color:#fff8ea}
.film .ch--call{padding-top:88svh!important}

.trail{display:none}
html.film,html.film body{overflow-x:clip}
.film .trail{display:block;position:absolute;left:0;right:0;bottom:100%;height:0;z-index:5;pointer-events:none;overflow:visible}
.wolf{position:absolute;left:0;bottom:-2px;width:clamp(170px,20vw,320px);overflow:hidden;will-change:transform}
.wolf i{display:block;background-size:100% 100%;background-repeat:no-repeat;will-change:transform}

/* Paint-to-reveal: the old page on a canvas, the new page under it. */
.case__film{width:100%;aspect-ratio:8/5;object-fit:cover;background:#cfc9ba}

.ruins__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px}
.ruins__head{grid-column:1/6}
.ruins__head h2{margin-bottom:14px}
.finds{grid-column:6/13}
.say--after{margin-top:clamp(56px,9vw,140px)}

/* The workbench: real pieces, one blank page, then the paint. */
.bench__lead{margin-top:10px;font-size:var(--lead);line-height:1.2;max-width:28em}
.bench__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;margin-top:24px}
.tray{grid-column:1/5;display:flex;flex-direction:column;gap:10px}
.piece{padding:16px 18px;border:0;background:var(--paper-ink);color:var(--paper);font-size:var(--lead);font-weight:600;letter-spacing:-.02em;text-align:left;cursor:grab;touch-action:none;transition:transform .14s var(--out),opacity .2s ease}
.piece:hover{transform:translate(4px,-2px) rotate(-.6deg)}
.piece:active{cursor:grabbing}
.piece.used{opacity:.22;cursor:default;transform:none}
.piece.ghosting{position:fixed;left:0;top:0;z-index:60;width:auto;pointer-events:none}
.sheet{grid-column:5/13;position:relative;aspect-ratio:8/5;background:#f7f3e9;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:14% 1fr 16%;gap:10px;padding:14px;overflow:hidden}
.slot{position:relative;display:flex;align-items:center;justify-content:center;background:#ece6d6;color:#6f6a5c;font-size:var(--small);overflow:hidden;outline:2px dashed #cfc7b2;outline-offset:-4px}
.slot.want{outline-color:var(--red)}
.slot--name{grid-column:1/-1}
.slot--pic{grid-column:1/3;grid-row:2}
.slot--words{grid-column:3;grid-row:2}
.slot--call{grid-column:1;grid-row:3}
.slot--google{grid-column:2/4;grid-row:3}
.got{position:absolute;inset:0;display:flex;align-items:center;background:#fffdf6;color:var(--paper-ink);padding:8px 14px;clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--out)}
.slot.in .got{clip-path:inset(0);transition:none}
.slot--name .got{justify-content:space-between;font-weight:600}
.slot--pic .got{padding:0}
.slot--pic img{width:100%;height:100%;object-fit:cover}
.slot--words .got p{font-size:clamp(1.0625rem,1.9vw,1.875rem);font-weight:600;line-height:1.05;letter-spacing:-.03em}
.slot--call .got{justify-content:center;background:#e6b450}
.fakebtn{font-weight:600}
.slot--google .got{font-size:var(--body);color:#1a0dab}
.slot__wet{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:pan-y;transition:opacity .6s ease;z-index:1}
.slot__wet.gone{opacity:0;pointer-events:none}
.doors{margin-top:6px}
.doors[hidden]{display:none}
.bench__say{margin-top:14px;font:italic 400 clamp(1.5rem,3vw,3rem)/1.08 "Instrument Serif",Georgia,serif;min-height:2.2em;max-width:26em}

@media (max-width:900px){
  .bar__nav{display:none}
  .list3 article:nth-child(n){grid-column:1/-1;margin-top:0;margin-bottom:28px}
  .report{grid-template-columns:1fr}
  .calc,.spec{grid-column:1/-1}
  .entry__text,.entry__fig{grid-column:1/-1}
  .entry__fig{margin-top:18px}
  .bars th{width:46%}
  .spec{margin-top:32px}
  .who__say,.faq{grid-column:1/-1}
  .faq{margin-top:40px}
  details{margin:0 calc(-1*var(--m));padding:10px var(--m)}
  .note-form,.sent,.foot__facts{grid-column:1/-1}
  .note__fields{grid-template-columns:1fr}
  .t-long{display:none}
  .t-short{display:inline}
  .ruins__head,.finds{grid-column:1/-1}
  .finds{margin-top:24px}
  .film .ch:not(.ch--hero){padding-top:118svh}
  .film .hint{position:sticky;top:64px;margin-left:var(--m);max-width:calc(100vw - 2*var(--m));font-size:1.125rem}
  .film .more{bottom:64px}
  .tray,.sheet{grid-column:1/-1}
  .sheet{margin-top:20px}
  .tray{flex-direction:row;flex-wrap:wrap}
  .piece{padding:11px 13px;font-size:1.0625rem}
  .film .hero__name{left:var(--m);top:60px;font-size:13.4vw}
  .film .call__stick{margin-top:30svh}
}
@media (min-width:901px){
  .film .paper:not(.paper--work):not(.paper--bench):not(.foot):not(.rs):not(.paper--check):not(.wp){margin-left:20%}
  .film .paper--work,.film .paper--bench{padding-left:max(var(--m),calc(10.5em + 2 * var(--m)))}
  .film .rail{display:block;position:fixed;left:var(--m);bottom:18px;z-index:30;color:#fff;mix-blend-mode:difference;font-size:14px;line-height:1.3;visibility:hidden}
  .film .rail.on{visibility:visible}
  .rail a{display:flex;justify-content:space-between;width:8.6em;padding:1px 0;text-decoration:none}
  .rail a i{font:italic 400 15px/1 "Instrument Serif",Georgia,serif}
  .rail a[aria-current]{font-weight:600}
  .film .bar__nav.off{visibility:hidden}
}
/* The taste switch. Off, this same page falls back to what most small-business websites look like. */
.notaste,.notaste body{background:#dadada!important;color:#333!important;font:16px/1.5 Arial,Helvetica,sans-serif!important;letter-spacing:0}
.notaste #notes,.notaste #pup,.notaste .pup-say,.notaste .poster,.notaste #world,.notaste #stage,.notaste #fx,.notaste .more,.notaste .talk,.notaste .hint{display:none!important}
.notaste .wall,.notaste .fine,.notaste .facts,.notaste .sub,.notaste .own,.notaste .pass{display:none!important}
.notaste main,.notaste .foot{display:block;width:min(980px,100%);min-height:0;margin:0 auto;background:#fff!important;color:#333!important}
.notaste .bar{position:sticky;mix-blend-mode:normal;background:linear-gradient(#5b8fd6,#2d5fa8)!important;color:#fff!important}
.notaste .bar a{color:#fff!important;font:bold 15px Arial,sans-serif}
.notaste .bar__call{color:#ffe27a!important}
.notaste .hero__name{padding:24px 0 0;text-align:center;font:bold 30px/1.2 'Times New Roman',Times,serif;color:#2d5fa8;letter-spacing:0}
.notaste .hero__name::before{content:"Welcome to "}
.notaste .hero__slip{padding:0 24px 24px;text-align:center;max-width:none}
.notaste h2,.notaste .word,.notaste .say{padding:0;font:bold 26px/1.2 'Times New Roman',Times,serif!important;color:#2d5fa8!important;letter-spacing:0;text-align:center}
.notaste .word--price b{background:none;color:inherit;padding:0}
.notaste .btn{min-height:0;padding:9px 22px;border:1px solid #1b4a8c;border-radius:6px;background:linear-gradient(#6fa5ea,#2d5fa8);color:#fff;font:bold 15px Arial,sans-serif}
.notaste .paper,.notaste section{padding:24px;background:#fff!important;color:#333!important;border-bottom:1px solid #ccc;min-height:0}
.notaste .list3,.notaste .price__grid,.notaste .who__grid,.notaste .foot__top{display:block}
.notaste .list3 article{margin:0 0 12px!important;padding:8px;border:1px solid #bbb;background:#f4f4f4;box-shadow:2px 2px 5px #999;text-align:center}
.notaste h3{font:bold 15px Arial,sans-serif;color:#2d5fa8}
.notaste .tile .found{font:bold 16px Arial,sans-serif;color:#2d5fa8}
.notaste .ck input,.notaste .field input{background:#fff;border:1px solid #999;color:#333;min-height:32px;font:16px Arial,sans-serif}
.notaste .ck .btn{min-height:32px}
.notaste .call__num{font:bold 24px Arial,sans-serif;color:#2d5fa8}
.notaste .spec th,.notaste .spec td{border-top:1px solid #ccc}
.notaste .foot{padding:12px 24px;background:#333!important;color:#ddd!important}
.notaste .foot__mark{display:none}
.notaste .taste{background:#ffe27a;color:#333;font:bold 14px Arial,sans-serif}

/* The work: the first sheet. A hang on the painted wall, not a page. Paste at the end of build/style.css. */

/* --u is one pixel of the 1440 x 890 layout, so a stop keeps its composition at any laptop size. */
:root{--wk-ink:#20140c;--wk-soft:#4a3626;--wk-hand:#a01017;--wk-gold:#e6b450}
.wk{--u:min(calc(100vw / 1440),calc(100svh / 890));position:relative;color:var(--wk-ink)}

/* the painting and everything registered to it */
#wk-world,#wk-exit{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;visibility:hidden}
#wk-world{z-index:1;display:block}
#wk-exit{z-index:2}
.wk-on #wk-world,.wk-on #wk-exit{visibility:visible}

/* the last stop is one held screen */
.wk-stop{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.wk-pin{grid-area:1/1;align-self:start;position:sticky;top:0;height:100svh;pointer-events:none}
.wk-pin--front{z-index:5}
.wk-stop--open{height:125svh;margin-top:-20svh}
.wk-tail{height:125svh}

.wk-pin>*{position:absolute;left:calc(50% + (var(--x) - 720) * var(--u));top:calc(50% + (var(--y) - 445) * var(--u));width:calc(var(--w) * var(--u))}

/* the slips */
.wk-card{pointer-events:auto;background:center/100% 100% no-repeat;line-height:1.36}
.wk-card h3{margin:0;font-weight:600;font-size:calc(var(--u)*33);letter-spacing:-.03em;line-height:1.02}
.wk-card p{font-size:max(15px,calc(var(--u)*17.5));margin:calc(var(--u)*10) 0 0}
.wk-card--last{--x:60;--y:150;--w:400;background-image:url(art/wk/c-last.webp);padding:calc(var(--u)*44) calc(var(--u)*46) calc(var(--u)*50) calc(var(--u)*50)}
.wk-go{display:inline-flex;align-items:center;min-height:44px;margin-top:calc(var(--u)*12);padding:0 calc(var(--u)*18);background:var(--wk-ink);color:#fbf1dc;font-weight:500;font-size:max(15px,calc(var(--u)*17));text-decoration:none;transition:translate .14s var(--out)}
.wk-go:hover{translate:0 -3px}
.wk-go:active{scale:.97}

/* the bar and the rail, site-wide: labels with their own backing, so they read on anything. This replaces mix-blend-mode:difference. */
.bar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);padding:12px var(--m);font-size:15px;line-height:1.2;color:#fff6e6;pointer-events:none}
.bar a,.bar button{pointer-events:auto;padding:6px 10px;border:0;background:rgba(20,15,11,.78);color:inherit;font:inherit;font-weight:500;text-decoration:none;cursor:pointer}
.bar__mark{font-weight:600!important;letter-spacing:-.03em;font-size:17px;margin-right:auto}
.bar__call{font-variant-numeric:tabular-nums}
.bar__sound{display:inline-flex;align-items:center;gap:7px}
.bar .bar__menu{display:none;position:relative;background:var(--paper);color:var(--paper-ink);font-weight:600;box-shadow:0 0 0 1px rgba(20,15,11,.6)}
.js .bar .bar__menu{display:inline-flex}
.bar .bar__menu:hover{background:#f4eedf}
.bar .bar__menu::after{content:"";position:absolute;inset:-9px -6px}   /* a thumb gets 44 pixels without the label growing */
.wave{display:inline-flex;align-items:flex-end;gap:2px;height:12px}.wave i{display:block;width:2px;height:4px;background:currentColor}
.rail{position:fixed;left:var(--m);bottom:18px;z-index:30;padding:7px 10px;background:rgba(20,15,11,.78);color:#fff6e6;font-size:14px;line-height:1.3}
.bar,.film .rail{mix-blend-mode:normal}
.film .rail{color:#fff6e6;background:rgba(20,15,11,.78);padding:7px 10px}
.rail ol{list-style:none;margin:0;padding:0}
.rail a{display:flex;justify-content:space-between;width:8.6em;padding:1px 0;text-decoration:none;color:inherit}
.rail a i{font:italic 400 15px/1 "Instrument Serif",Georgia,serif}
.rail a[aria-current]{font-weight:600}
@media (max-width:1023px){.rail{display:none}}

.wk-watch{margin-top:calc(var(--u)*9);padding:7px 14px;border:0;background:var(--wk-ink);color:#fbf1dc;font-weight:500;font-size:max(14.5px,calc(var(--u)*16));cursor:pointer}
.wk-watch:hover{background:#5a2f1c}
.wk-film{padding:0;border:0;background:#0a0d14;width:min(960px,calc(100vw - 24px));box-shadow:0 30px 90px rgba(0,0,0,.6)}
.wk-film::backdrop{background:rgba(8,6,4,.82)}
.wk-film video{display:block;width:100%;height:auto}
.wk-film__x{position:absolute;right:8px;top:8px;padding:6px 12px;border:0;background:rgba(20,15,11,.82);color:#fff6e6;font-weight:500;cursor:pointer}

/* the sites on the wall: real pages in the squares, in front of the wall and behind the people.
   Two layers grade a page to the wall: its whites go to the plaster, cracks and all, and its blacks to warm brown. A hand on it lifts them and the page shows its true colours. */
.ch--square{pointer-events:none}
#wall-sites{display:none}
.wf{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;pointer-events:none;will-change:transform}
.hint{transition:opacity .6s}
.hint--gone{opacity:0}
.ws-on #wall-sites{display:block;position:fixed;left:0;top:0;width:0;height:0;z-index:0}
.ws{position:absolute;left:0;top:0;transform-origin:0 0;display:block;isolation:isolate;container-type:size;background:#3a2a1c;color:#54301c;text-decoration:none;pointer-events:auto;box-shadow:0 0 0 1px rgba(70,44,24,.6),0 0 0 3px #d9c19b,0 0 0 4px rgba(70,44,24,.45),1px 3px 7px rgba(40,24,12,.4);transition:box-shadow .25s;will-change:transform}
.ws video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:saturate(.8) sepia(.14);transition:filter .3s,transform .35s var(--out);z-index:0}
.ws::before,.ws::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .3s}
.ws::before{background:url(art/wk/ws-plaster.webp) center/cover;mix-blend-mode:multiply}
.ws::after{background:#33241a;mix-blend-mode:screen}
.ws:hover::before,.ws:hover::after,.ws:focus-visible::before,.ws:focus-visible::after{opacity:0}
.ws:hover video,.ws:focus-visible video{filter:none;transform:scale(1.04)}
.ws:hover,.ws:focus-visible{box-shadow:0 0 0 1px rgba(70,44,24,.6),0 0 0 3px var(--gold),0 0 0 4px rgba(70,44,24,.45),0 8px 20px rgba(20,10,4,.5)}
.ws__tag{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.14em .5em .2em;background:url(art/wk/ws-plaster.webp) center/cover;font:italic 400 max(14px,13cqh)/1.08 "Instrument Serif",Georgia,serif;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws__before{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;transition:opacity .5s}
.ws.done .ws__before{opacity:0}
.ws--yours{background:url(art/wk/ws-plaster.webp) center/cover}
.ws--yours::before,.ws--yours::after{display:none}
.ws__blank{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;height:100%;padding:6px;text-align:center;font-size:max(13px,12cqh)}
.ws__blank i{font:italic 400 max(19px,20cqh)/1.02 "Instrument Serif",Georgia,serif}
.ws__blank b{padding:.18em .7em;background:linear-gradient(#e9bd5a,#d5a243);box-shadow:0 0 0 1px rgba(90,56,20,.65),inset 0 1px 0 rgba(255,240,200,.5);color:#3a2412;font:italic 400 1em/1.2 "Instrument Serif",Georgia,serif}

/* phones: one line of plain labels */
@media (max-width:700px){
  .bar{gap:6px;padding:10px var(--m)}
  .bar a,.bar button{padding:5px 8px;font-size:14px;white-space:nowrap}
  .bar__mark{font-size:15px!important}
  #sound-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media (max-width:349px){.bar__sound{display:none}}

/* the hang on a tall screen: the same stops, laid out for a phone (one unit is one pixel of a 390 x 844 screen) */
@media (max-width:1023px){
  .wk{--u:min(calc(100vw / 390),calc(100svh / 844),1.42px)}
  .wk-pin>*{left:calc(50% + (var(--x) - 195) * var(--u));top:calc(50% + (var(--y) - 422) * var(--u))}
  .wk-card h3{font-size:calc(var(--u)*23)}
  .wk-card p{font-size:max(14.5px,calc(var(--u)*15))}
  .wk-card{padding:calc(var(--u)*22) calc(var(--u)*34) calc(var(--u)*24)!important}
  .wk-card--last{--x:14;--y:80;--w:300}
}

/* The job, in order. The sheet tears open and the wall is behind it: five jobs on one wall, each with its own tool, and a phone in the sheet's own ink proving each one in real type.
   Without .jobs--live (no script) this is the plain list: every job open, nothing to press. */

.jobs{--ink:#2e2116;--chalk:#ad4f2c;--chalk-text:#96401f;--pen-red:#bb1317;--bezel:#efeadf;--rule:#bdb7a8;--site:#fbf7ea;--plaster:#ecd9c6;--bar:50px;
  --bh:clamp(226px,50svh,560px);--over:calc(var(--bh)*.6);--ph:calc(100svh - var(--bar) - var(--bh) + var(--over) - 60px);--pw:calc(var(--ph)*.4828);--bl:0px;--br:0px;
  position:relative;-webkit-tap-highlight-color:transparent}

/* ---------- The plain page: this much is true with no script. ---------- */
.jobs__lead{margin-top:12px;max-width:31em;line-height:1.32}
.jobs__if,.bench,.ph,.job__hand,.jobs__clear{display:none}
.jobs__long{margin-top:14px;max-width:38em;font-size:1.0625rem;line-height:1.34}
.jobs__list{margin-top:18px!important;list-style:none!important}
.steps .job{position:relative;padding:14px 0;border-top:1px solid var(--rule)}
.job__h{display:flex;gap:.34em;align-items:baseline;font:italic 400 clamp(1.875rem,1.2rem + 1.1vw,2.375rem)/1.02 "Instrument Serif",Georgia,serif;letter-spacing:-.005em}
.job__n{color:var(--red)}
.job__s{font-size:var(--small);line-height:1.3;color:var(--paper-soft)}
.job__two{margin-top:8px}
.job__two h4{font-size:var(--small);font-weight:600;line-height:1.3;letter-spacing:-.005em;margin:0 0 2px}
.job__two p{font-size:1rem;line-height:1.36}
.job__two div+div{margin-top:8px}
.jobs__end{margin-top:clamp(18px,2.2vw,32px);font:italic 400 clamp(1.5rem,1.15rem + .6vw,1.8125rem)/1.14 "Instrument Serif",Georgia,serif}
.jobs__end a{display:inline-flex;align-items:center;min-height:44px;font-style:italic;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.16em;transition:color .14s ease,transform .14s var(--out)}
.jobs__end a[href^=tel]{font:600 .86em/1 Switzer,Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.jobs__end a:hover{color:var(--red)}
.jobs__end a:active{transform:scale(.97)}

/* ---------- Live: the wall, on a torn strip, stuck to the top of the screen. The text slides under it. ---------- */
.jobs--live{max-width:none}
.jobs--live .jobs__if{display:inline}
.jobs--live .jobs__plain{display:none}
.jobs--live .jobs__head{position:relative}
.jobs--live .bench{display:block;position:sticky;top:0;z-index:3;margin:clamp(6px,1vw,14px) calc(-1*var(--br)) 0 calc(-1*var(--bl));padding-top:var(--bar);pointer-events:none}
.bench::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--bar) + 56px);background:var(--paper)}
.bench__view{position:relative;height:var(--bh);pointer-events:auto}
.bench__wall{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.bench__tear{display:none}
.bench.is-low .bench__wall{touch-action:auto}

/* what a hand takes hold of. It travels with the thing, so a finger that lands on it takes it and a finger anywhere else scrolls. */
.grip{position:absolute;left:0;top:0;z-index:2;touch-action:none;cursor:grab;pointer-events:none}
.grip--cradle{touch-action:pan-y}
.grip.on{pointer-events:auto}
.grip.is-held{cursor:grabbing}
.grip:hover,.grip.is-held{outline:0}

/* a scrap of the sheet tucked into the wall, saying what to do there */
.chip{position:absolute;left:0;top:0;z-index:2;margin:0;padding:6px 11px 7px;max-width:15em;background:var(--paper);color:var(--paper-ink);font:italic 400 clamp(1.125rem,1rem + .3vw,1.3125rem)/1.08 "Instrument Serif",Georgia,serif;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s;pointer-events:none;will-change:transform;clip-path:polygon(0 3%,8% 0,27% 4%,52% 0,78% 3%,100% 0,99% 52%,100% 100%,74% 97%,49% 100%,22% 96%,1% 100%)}
.chip.on{opacity:1;visibility:visible;transition:opacity .22s ease}
.chip__touch{display:none}
@media (hover:none),(pointer:coarse){.chip__fine{display:none}.chip__touch{display:inline}}

.bench__flip{display:none}

/* ---------- The jobs. ---------- */
.jobs__body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--pw);column-gap:clamp(40px,5vw,84px);align-items:start;padding-right:clamp(0px,calc((100vw - 1320px)*.2),60px)}
.jobs--live .jobs__list{display:block;margin:0!important;min-width:0}
.jobs--live.steps .job{padding:clamp(16px,2.4svh,26px) 0 clamp(20px,3.4svh,40px);border-top:0;min-height:calc((100svh - var(--bar) - var(--bh))*1.02)}
.job__rule{position:absolute;left:0;top:-3px;width:100%;height:6px;overflow:visible;pointer-events:none}
.job__rule path{fill:none;stroke:var(--ink);stroke-width:1.35;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.8}
.jobs--live .job__n{font-size:1em}
.jobs--live .job__two{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(18px,2.2vw,32px);margin-top:12px;max-width:43em}
.jobs--live .job__two div+div{margin-top:0}
.jobs--live .job__hand{display:block;margin-top:12px;max-width:43em}
.job__fine{font-size:var(--small);line-height:1.3;color:var(--paper-soft)}

/* the one thing to do on paper. It answers like the rest of the sheet's links. */
.job__do{display:inline-flex;align-items:center;min-height:44px;margin-right:18px;padding:0;border:0;background:none;color:var(--paper-ink);font:italic 400 clamp(1.375rem,1.1rem + .6vw,1.625rem)/1.1 "Instrument Serif",Georgia,serif;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.16em;cursor:pointer;touch-action:manipulation;transition:color .14s ease,transform .14s var(--out)}
.job__do:hover{color:var(--red)}
.job__do:active{transform:scale(.97)}
.job__do:focus-visible,.jobs__end a:focus-visible,.ringer__yes:focus-visible,.jobs__clear:focus-visible{outline:0;color:var(--red);text-decoration-thickness:3px}
.job__do--quiet{font-size:1.1875rem}
.job__do[hidden]{display:none}
.job__touchonly{display:none}
@media (hover:none),(pointer:coarse){.job__fineonly{display:none}.job__touchonly{display:inline}}
#j-pic:focus-visible+.job__do{color:var(--red);text-decoration-thickness:3px}
.is-over .job__do[for="j-pic"]{color:var(--red)}

/* fields live on the plaques: the words go straight into the wall. The inputs are there for the keyboard and the screen reader, and sit over the plaques. */
.plqs{margin:0}
.plq{position:fixed;left:0;top:0;z-index:2;width:120px;height:44px;margin:0;padding:0 8px;border:0;border-radius:0;background:none;color:transparent;caret-color:transparent;font-size:16px;outline:0;cursor:text;opacity:0;-webkit-appearance:none;appearance:none}
.plq.off{pointer-events:none}
.plq::selection{background:transparent;color:transparent}

/* trades: words in a line, circled in red pencil */
.trades{margin:0;padding:0;border:0}
.trades legend{padding:0;margin-bottom:0;font-size:var(--small);line-height:1.2;color:var(--paper-soft)}
.trades__row{display:flex;flex-wrap:wrap;gap:0 2px;margin-left:-8px}
.trade{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font:italic 400 clamp(1.375rem,1.15rem + .4vw,1.5rem)/1 "Instrument Serif",Georgia,serif;cursor:pointer;transition:color .14s ease,transform .14s var(--out)}
.trade:hover{color:var(--red)}
.trade:active{transform:scale(.97)}
.trade svg{position:absolute;left:0;top:4px;width:100%;height:calc(100% - 8px);overflow:visible;pointer-events:none}
.trade svg path{fill:none;stroke:var(--red);stroke-width:1.9;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .12s ease,opacity 0s .12s}
.trade input:checked~svg path{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset .34s var(--out),opacity 0s}
.trade input:focus-visible~span{color:var(--red);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em}

/* the proof: my first try, typed out, and a red pencil for anything that doesn't sound right */
.steps ol.proof{display:block;list-style:none;margin:6px 0 4px;padding:0}
.steps .proof li{padding:0;border:0}
.proofline{position:relative;display:block;width:100%;min-height:44px;padding:9px 0 8px;border:0;background:none;color:var(--paper-ink);font:500 1.0625rem/1.25 Switzer,Arial,sans-serif;letter-spacing:-.01em;text-align:left;cursor:crosshair;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.proofline+.proofline{margin-top:0}
.proofline__t{position:relative;display:inline}
.proofline__was{display:block;height:0;overflow:hidden;color:var(--paper-soft);font-weight:400;font-size:.875rem;transition:height .22s var(--out)}
.proofline.is-struck .proofline__was{height:1.3em}
.proofline svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.proofline svg path{fill:none;stroke:var(--pen-red);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:url(#pencil)}
.proofline:hover .proofline__t{color:#3b1512}
.proofline:focus-visible{outline:0}
.proofline:focus-visible .proofline__t{text-decoration:underline wavy var(--pen-red) 1.5px;text-underline-offset:.22em}

/* ---------- The phone: ink on the sheet, lying half over the strip. ---------- */
.jobs--live .ph{display:block;position:sticky;top:calc(var(--bar) + var(--bh) - var(--over));z-index:4;margin:calc(-1*var(--over)) 0 0;width:var(--pw);height:var(--ph);pointer-events:none}
.ph__in{position:relative;width:100%;height:100%}
/* a pencil note beside the phone, once there's a button worth pressing */
.ph__press{position:absolute;left:-104px;bottom:8%;z-index:5;margin:0;display:flex;align-items:center;gap:0;color:var(--pen-red);font:italic 400 1.5rem/1 "Instrument Serif",Georgia,serif;opacity:0;transform:translateX(-8px);transition:opacity .24s ease,transform .3s var(--out);pointer-events:none}
.ph__press svg{width:54px;height:30px;margin-left:-2px;margin-top:20px;overflow:visible}
.ph__press path{fill:none;stroke:var(--pen-red);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:url(#pencil)}
.is-press .ph__press{opacity:1;transform:none}
.ph__body{position:relative;width:100%;height:100%;border-radius:calc(var(--pw)*.143);background:var(--bezel);pointer-events:auto;will-change:transform}
.ph__ink{position:absolute;left:-1.19%;top:-.575%;width:113.7%;height:106.9%;max-width:none;pointer-events:none;z-index:3}
.ph__top{position:absolute;left:9%;right:9%;top:0;height:1px;pointer-events:none}
.ph__rings{position:absolute;left:-20.83%;top:0;width:143.5%;height:92%;max-width:none;z-index:0;opacity:0;pointer-events:none}
.ph__screen{position:absolute;left:2.98%;top:3.45%;width:94.05%;height:93.1%;z-index:2;overflow:hidden;border-radius:9.6%/4.66%;container-type:inline-size;background:var(--plaster)}
.is-ringing .ph__rings{animation:jobs-ring .36s steps(1) infinite}
.is-ringing .ph__rings--b{animation-delay:-.18s}
@keyframes jobs-ring{0%,49%{opacity:1}50%,100%{opacity:0}}

/* The site on it starts as the same red under-drawing as the wall, and each job inks its own part. It's a real page in real type either way. */
.site{position:absolute;inset:0;overflow:hidden;font-size:4.2cqw;line-height:1.3;color:var(--chalk-text);letter-spacing:-.005em;background:var(--plaster);outline:0}
.site p,.site h4,.site ul{margin:0;padding:0}
.site__page{position:absolute;left:0;right:0;top:0;transition:transform .7s var(--out)}
.site.no-glide .site__page{transition:none}
.site__head{display:flex;align-items:center;justify-content:space-between;gap:3cqw;height:19cqw;padding:0 5cqw 0 5.4cqw;transition:background-color .5s ease,color .5s ease}
.site__name{min-width:0;font-weight:600;font-size:5.9cqw;line-height:1.02;letter-spacing:-.03em;overflow-wrap:anywhere}
.site__name.is-long{font-size:4.5cqw}
.site__name.is-longer{font-size:3.8cqw}
.site__tel{flex:none;font-weight:500;font-size:max(10px,3.9cqw);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.site__pic{position:relative;height:74cqw;overflow:hidden;background:#d9c4ae}
.site__img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:opacity .36s ease}
.site__wet{position:absolute;inset:0;width:100%;height:100%}
.site__wet[hidden]{display:none}
.site__words{padding:5cqw 5.4cqw 5cqw;transition:background-color .5s ease,color .5s ease}
.site__h{font-weight:600;font-size:9.4cqw;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.site__a{margin-top:3cqw!important;font-size:max(10px,4.25cqw);line-height:1.32;letter-spacing:.02em}
.site__a+.site__a{margin-top:1.2cqw!important}
.site__more{padding:1cqw 5.4cqw 34cqw;font-size:max(10px,4.25cqw);line-height:1.32;letter-spacing:.02em;transition:background-color .5s ease,color .5s ease}
.site__more h4{margin-top:6cqw!important;margin-bottom:1.6cqw!important;font-weight:600;font-size:5.2cqw;letter-spacing:-.02em;line-height:1.1}
.site__list{list-style:none}
.site__list li{padding:1.5cqw 0;border-top:1px solid rgba(46,33,22,.2)}
.site__thumbs{display:grid;grid-template-columns:1fr 1fr;gap:2cqw}
.site__thumbs img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#d9c4ae}
.site__foot{margin-top:6cqw!important;font-size:max(10px,3.7cqw);opacity:.72}
.site__call{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:2cqw;height:calc(12.5cqw + var(--drop,0)*15.5cqw);padding:0 5.4cqw;border:0;border-top:1px solid rgba(46,33,22,.18);background:#f0dcb0;color:#6b4716;text-align:left;font:inherit;cursor:pointer;touch-action:manipulation;transition:background-color .14s ease}
.site__call:focus-visible{outline:2px solid var(--pen-red);outline-offset:-5px}
.site__who{min-width:0;font-weight:600;font-size:max(10px,3.9cqw);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.site__num{flex:none;font-weight:500;font-size:calc(max(10px,3.9cqw) + var(--drop,0)*4cqw);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.site__w{display:none}
.site.is-1 .site__head{background:var(--site);color:#14151c}
.site.is-1 .site__call{background:var(--gold);color:var(--gold-ink);border-top-color:transparent}
.site.is-1 .site__call:hover{background:#f1c96e}
.site.is-3 .site__words,.site.is-3 .site__more{background:var(--site);color:#14151c}
.site.is-4 .site__call{flex-direction:column;align-items:flex-start;justify-content:center;gap:.6cqw}
.site.is-4 .site__who{order:2;font-weight:500;font-size:max(10px,3.8cqw)}
.site.is-4 .site__num{order:1;font-weight:600;font-size:7.9cqw;letter-spacing:-.03em}
.site.is-4 .site__w{display:inline}

/* a phone ringing: the other end of the call */
.ringer{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4cqw;padding:7cqw 7cqw 18cqw;background:#14151c;color:#fff8ea;text-align:center}
.ringer[hidden]{display:none}
.ringer p{margin:0}
.ringer__state{font-size:max(11px,4.4cqw);letter-spacing:.02em;color:#c9c6bb}
.ringer__who{font-weight:600;font-size:9.4cqw;line-height:1.04;letter-spacing:-.035em;overflow-wrap:anywhere}
.ringer__what{font:italic 400 max(14px,6.4cqw)/1.14 "Instrument Serif",Georgia,serif;color:#fff8ea}
.ringer__yes{position:absolute;left:7cqw;right:7cqw;bottom:9cqw;min-height:44px;height:19cqw;border:0;background:var(--gold);color:var(--gold-ink);font:600 max(14px,6.6cqw)/1 Switzer,Arial,sans-serif;letter-spacing:-.02em;cursor:pointer;touch-action:manipulation;transition:transform .14s var(--out),background-color .14s ease}
.ringer__yes:hover{background:#f1c96e}
.ringer__yes:active{transform:scale(.97)}
.ringer__yes[hidden]{display:none}

/* ---------- The listing, on a slip that comes out from under the phone. ---------- */
.slipbox{position:relative;margin:4px calc(-1*clamp(40px,5vw,84px) - 10px) 8px 0;overflow:hidden;height:136px}
.slip{position:absolute;inset:0 0 3px 2px;padding:9px 118px 8px 14px;transform:translateX(104%);transition:transform .56s var(--out);box-sizing:border-box}
.slip::before{content:"";position:absolute;inset:2px;z-index:-1;background:#f4f0e6;pointer-events:none}
.slipbox.on .slip{transform:none}
.slip__edge{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.slip__edge path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.slip p{margin:0}
.slip__url{font-size:.8125rem;line-height:1.2;letter-spacing:.005em;color:var(--paper-soft)}
.slip__title{margin-top:1px!important;font-size:clamp(1.0625rem,.95rem + .35vw,1.25rem);font-weight:600;line-height:1.12;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slip__desc{margin-top:2px!important;font-size:.875rem;line-height:1.26;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slip__note{position:absolute;left:14px;bottom:8px;font:italic 400 1.0625rem/1 "Instrument Serif",Georgia,serif;color:var(--paper-ink)}
.slip__press{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;background:none;cursor:pointer;touch-action:manipulation}
.slip__press:focus-visible{outline:0}
.slip__press:focus-visible~.slip__marks::after{content:"";position:absolute;right:30px;top:14px;width:84px;height:84px;border:1.5px dashed var(--pen-red);border-radius:50%}
.slip__marks{position:absolute;inset:0;z-index:1;pointer-events:none}
.mark{position:absolute;width:96px;height:96px;margin:-48px 0 0 -48px;overflow:visible;mix-blend-mode:multiply}
.mark circle{fill:none;stroke:var(--red);stroke-width:2.4}
.mark circle.thin{stroke-width:1.2}
.stamp__ring{font:600 10.5px Switzer,Arial,sans-serif;fill:var(--red)}
.stamp__mid{font:italic 400 32px "Instrument Serif",Georgia,serif;fill:var(--red)}
/* the die itself, seen coming down */
.die{position:absolute;z-index:3;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:#8a2a22;box-shadow:inset 0 0 0 3px rgba(46,33,22,.5);opacity:.0;pointer-events:none}

.jobs--live .jobs__long{margin-top:clamp(14px,2vw,24px)}
.jobs__clear{display:inline-block;margin-left:8px;padding:8px 0;border:0;background:none;font:400 var(--small)/1 Switzer,Arial,sans-serif;color:var(--paper-soft);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.jobs__clear:hover{color:var(--pen-red)}
.jobs__clear[hidden]{display:none}

/* Narrow laptops and tablets: the phone keeps its place, the text column narrows. */
@media (max-width:1140px){
  .jobs{--bh:clamp(220px,44svh,430px);--over:calc(var(--bh)*.5)}
  .jobs__body{column-gap:28px}
  .jobs--live .job__two{grid-template-columns:1fr;row-gap:8px}
  .slipbox{margin-right:-36px;height:154px}
  .slip{padding:8px 11px 8px 11px}
  .slip__title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1rem}
  .slip__note{display:none}
}

/* A phone: the wall on top. The ink phone slides over it when there's something to prove, and a word flips between them. */
@media (max-width:700px){
  .jobs{--bar:46px;--bh:calc(63svh - var(--bar));--over:0px;--ph:calc(var(--bh) - 30px);--pw:calc(var(--ph)*.4828)}
  .jobs--live .bench{margin-top:10px}
  .jobs__body{display:flex;flex-direction:column;padding-right:0}
  /* the phone lies on the left of the stage, so the wall and the hand stay in view beside it */
  .jobs--live .ph{order:-1;align-self:flex-start;position:sticky;top:0;z-index:6;width:0;height:0;margin:calc(-1*(var(--bar) + var(--bh))) 0 calc(var(--bar) + var(--bh)) calc(10px - var(--bl))}
  .ph__press{display:none}
  .ph__in{position:absolute;left:0;top:calc(var(--bar) + 8px);width:var(--pw);height:var(--ph);transform:translateX(calc(-100% - 34px));visibility:hidden;transition:transform .42s var(--out),visibility 0s .42s}
  .is-phone .ph__in{transform:none;visibility:visible;transition:transform .42s var(--out),visibility 0s}
  .ph__body{width:100%;height:100%}
  .bench__flip{position:absolute;right:10px;bottom:34px;z-index:5;display:none;min-height:44px;padding:0 11px;border:0;background:var(--paper);color:var(--paper-ink);font:italic 400 1.125rem/1 "Instrument Serif",Georgia,serif;pointer-events:auto;touch-action:manipulation}
  .bench__flip:not([hidden]){display:inline-flex;align-items:center}
  .bench__flip:active{transform:scale(.97)}
  .jobs--live.steps .job{min-height:calc((100svh - var(--bar) - var(--bh))*1.2);padding-top:18px}
  .jobs--live .job__two{grid-template-columns:1fr;row-gap:8px}
  .slipbox{margin-right:0;height:150px}
  .slip{padding:8px 74px 8px 11px}
  .slip__note{display:flex;left:11px;bottom:6px;font-size:1rem}
  .trades__row{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between}
  .chip{font-size:1.0625rem}
}

/* Too short to pin anything: the wall scrolls with the page and the phone sits beside the text. */
@media (max-height:520px){
  .jobs{--bh:clamp(190px,60svh,300px);--over:0px;--ph:min(90svh,520px)}
  .jobs--live .bench{position:relative}
  .jobs--live .ph{top:12px}
}

/* Reduced motion: the finished wall, calm, and nothing pinned. The hand still works, and the ring is words. */
.reduce .jobs--live .bench{position:relative}
@media (max-width:700px){
  .reduce .jobs--live .ph{position:relative;order:-1;align-self:center;width:var(--pw);height:var(--ph);margin:14px auto 6px}
  .reduce .ph__in{position:relative;left:auto;top:auto;transform:none;visibility:visible}
}
.reduce .jobs *,.reduce .jobs *::before,.reduce .jobs *::after{transition-duration:.01ms!important;transition-delay:0s!important}
.reduce .is-ringing .ph__rings{animation:none;opacity:1}
.reduce .is-ringing .ph__rings--b{opacity:0}
@media (prefers-reduced-motion:reduce){
  .jobs--live .bench{position:relative}
  .jobs *,.jobs *::before,.jobs *::after{transition-duration:.01ms!important;transition-delay:0s!important}
}

.no-anim,.no-anim *{transition:none!important}

/* The taste switch. Off, this falls back to a plain list like the rest of the page. */
.notaste .jobs,.notaste .jobs--live{display:block}
.notaste .bench,.notaste .ph,.notaste .job__hand,.notaste .jobs__if,.notaste .job__n,.notaste .job__rule,.notaste .jobs__long{display:none!important}
.notaste .jobs--live .jobs__plain{display:inline}
.notaste .jobs__body{display:block;padding:0}
.notaste .jobs--live.steps .job{min-height:0;padding:8px 0}
.notaste .job__h{display:block;font:bold 15px Arial,sans-serif;color:#2d5fa8}
.notaste .job__s{color:#333}
.notaste .jobs--live .job__two{display:block}
.notaste .job__two h4{font:bold 13px Arial,sans-serif}
.notaste .jobs__end{color:inherit;font:15px Arial,sans-serif}

/* ---------------- The Ruins sheet. Everything here needs the film; without it the same markup is the plain page. ---------------- */
@font-face{font-family:"RF Hand";src:url(art/rs/hand.woff2) format("woff2");font-display:swap}
@property --rf-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.rs-frames,.rf,.rs-cut,.rs-last{display:none}
.rs-read:empty{display:none}
.rs-ledger{list-style:none;margin:16px 0 0;padding:0}
.rs-ledger li{display:flex;gap:.5em;padding:3px 0}
.rs-ledger b{font-weight:600}
.rs-land h2{margin-bottom:14px}
.rs-after .rs-strip{display:block}
.rs-fix .finds{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0}

.film:not(.notaste) .paper.rs{background:none;color:#f3e8d6;padding:0;margin-left:0;min-height:0;z-index:4}
.film:not(.notaste) .finds,.film:not(.notaste) .rs-pick{display:none}
.film:not(.notaste) .rs-land{height:170svh}
.film:not(.notaste) .rs-land__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.film:not(.notaste) .rs-cut{display:block;position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.film:not(.notaste) .rs-land__print{position:absolute;inset:0;transform-origin:0 0;pointer-events:none;will-change:transform}
.film:not(.notaste) .rs-land__copy{position:absolute;left:var(--tx,60vw);top:var(--ty,14vh);width:var(--tw,30vw);pointer-events:auto}
.film:not(.notaste) .rs-land__copy h2{margin:0;font-size:54px;font-weight:600;line-height:.98;letter-spacing:-.045em;color:#fff3df;text-wrap:balance}
.film:not(.notaste) .rs-land__copy p{margin:16px 0 0;font-size:19px;line-height:1.42;color:#f3e8d6;max-width:24em}

/* the wall: the same sheet carries on. The left fifth stays painting. */
.film:not(.notaste) .paper.rs-wall{margin-left:19.8vw;background:#3a1a14 url(art/rs/stock.webp) -110px 0;padding-bottom:64px}
.film:not(.notaste) .rs-wall::before{content:"";position:absolute;top:0;bottom:-34px;left:-110px;width:110px;background:url(art/rs/edge-l.webp) repeat-y 0 0;clip-path:polygon(0 0,100% 0,100% 100%,94% calc(100% - 7px),88% calc(100% - 3px),81% calc(100% - 13px),74% calc(100% - 10px),66% calc(100% - 24px),58% calc(100% - 22px),50% calc(100% - 38px),40% calc(100% - 44px),0 calc(100% - 60px));pointer-events:none}
.film:not(.notaste) .rs-wall::after{content:"";position:absolute;left:0;right:0;bottom:-120px;height:150px;background:url(art/rs/edge-b.webp) 0 0 repeat-x;-webkit-mask-image:linear-gradient(transparent,#000 22px);mask-image:linear-gradient(transparent,#000 22px);pointer-events:none}
.film:not(.notaste) .rs-hang{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:0 26px;padding:clamp(20px,3vw,44px) 40px 0 18px;align-items:start}
.film:not(.notaste) .rs-frames{--k:calc((100vw*.802 - 370px)/830);display:block;position:relative;height:calc(var(--k)*930)}
.fr{position:absolute;left:calc(var(--k)*var(--x));top:calc(var(--k)*var(--y));width:calc(var(--k)*var(--w));padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;transition:opacity .24s ease}
.fr__sw{display:block;position:relative;transform-origin:50% 1%;will-change:transform;transition:translate .22s cubic-bezier(.2,.7,.2,1)}
.fr:hover .fr__sw,.fr:focus-visible .fr__sw{translate:0 -4px}
.fr--a .fr__sw{aspect-ratio:448/640}
.fr__pr{position:absolute;display:block;background:#e6dcc4 url(art/rs/prints.webp) var(--px) var(--py)/400% 400% no-repeat}
.fr__fr{position:absolute;inset:0;display:block;pointer-events:none}
.fr--a .fr__pr{left:23.8%;top:16.95%;width:50.7%;height:66.3%}
.fr--a .fr__fr{background:url(art/rs/frame-a.webp) 0 0/100% 100% no-repeat}
.fr--b,.fr--c{--b:calc(var(--k)*20)}
.fr--b .fr__sw,.fr--c .fr__sw{aspect-ratio:.6}
.fr--b .fr__pr,.fr--c .fr__pr{inset:var(--b);background-size:400% 400%}
.fr--b .fr__fr{border:var(--b) solid transparent;border-image:url(art/rs/frame-b.webp) 52 stretch}
.fr--c .fr__fr{border:var(--b) solid transparent;border-image:url(art/rs/frame-c.webp) 56 stretch}
.rs-frames.is-q .fr:not(.is-on){opacity:.3}
.fr:focus-visible{outline-offset:-6px}

.film:not(.notaste) .rs-side{position:sticky;top:64px;padding-top:6px}
.film:not(.notaste) .rs-side h3{margin:0;font-size:30px;font-weight:600;letter-spacing:-.035em;line-height:1;color:#fff3df}
.film:not(.notaste) .rs-read{min-height:1.3em;margin:4px 0 0;font:italic 400 24px/1.2 "Instrument Serif",Georgia,serif;color:#e6b450}
.film:not(.notaste) .rs-read:empty{display:block}
.film:not(.notaste) .rs-ledger{margin-top:8px}
.rs-ledger li:has(.ln){display:block;padding:0}
.rs-ledger .ln{display:flex;gap:.5em;width:100%;padding:3px 0;border:0;background:none;color:inherit;font:inherit;text-align:left}
.film:not(.notaste) .rs-ledger .ln{display:grid;grid-template-columns:40px 1fr;gap:0 8px;align-items:baseline;min-height:27px;padding:3px 0 4px;border-top:1px solid rgba(243,232,214,.16);font-size:14px;line-height:1.2;color:#eadbc4;cursor:pointer;transition:color .12s}
.film:not(.notaste) .rs-ledger .ln b{font:italic 400 var(--n,22px)/1 "Instrument Serif",Georgia,serif;color:#fff3df;text-align:right;padding-right:4px}
.film:not(.notaste) .rs-ledger li:nth-child(1) .ln b{--n:46px}
.film:not(.notaste) .rs-ledger li:nth-child(2) .ln b{--n:36px}
.film:not(.notaste) .rs-ledger li:nth-child(3) .ln b{--n:32px}
.film:not(.notaste) .rs-ledger li:nth-child(4) .ln b{--n:28px}
.film:not(.notaste) .rs-ledger li:nth-child(5) .ln b{--n:26px}
.film:not(.notaste) .rs-ledger .ln:hover,.film:not(.notaste) .rs-ledger .ln.is-on,.film:not(.notaste) .rs-ledger .ln:hover b,.film:not(.notaste) .rs-ledger .ln.is-on b{color:#e6b450}
.film:not(.notaste) .rs-ledger .ln.is-off,.film:not(.notaste) .rs-ledger .ln.is-off b{color:#b9a58c}

/* the five, on loose leaves on the live painting. --u is one pixel of the 1440 x 890 layout, so the whole plate fits one screen at any laptop size. */
.film:not(.notaste) .rf{--u:min(calc(100vw / 1440),calc(100svh / 890));--hand:#a81018;--ink:#14151c;display:block;position:relative;color:var(--ink);padding-top:30svh}
.rf__plate{position:relative;width:calc(var(--u)*1440);height:calc(var(--u)*900);margin:0 auto}
.rf-leaf{position:absolute;display:block;height:auto;max-width:none;pointer-events:none}
.rf-leaf--a{left:calc(var(--u)*116);top:calc(var(--u)*36);width:calc(var(--u)*672);transform:rotate(-1.3deg)}
.rf-leaf--b{left:calc(var(--u)*660);top:calc(var(--u)*62);width:calc(var(--u)*802);transform:rotate(1.2deg)}
.rf-leaf--c{left:calc(var(--u)*704);top:calc(var(--u)*598);width:calc(var(--u)*762);transform:rotate(-1.9deg)}
.rf__head{position:absolute;left:calc(var(--u)*214);top:calc(var(--u)*352);width:calc(var(--u)*476)}
.rf__head h3{margin:0;font-size:calc(var(--u)*48);font-weight:600;line-height:.98;letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.rf__head p{margin:calc(var(--u)*12) 0 0;font-size:max(16px,calc(var(--u)*19));line-height:1.42;max-width:calc(var(--u)*440);color:var(--ink);text-wrap:balance}
.rf__finds{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.rf-find{display:contents}
.rf-find button{pointer-events:auto;-webkit-tap-highlight-color:transparent;font:inherit;color:inherit}

/* red pencil on a torn scrap */
.rf-hand{position:absolute;z-index:4;margin:0;padding:.42em .95em .34em;font:400 calc(var(--u)*28)/1 "RF Hand","Instrument Serif",Georgia,serif;letter-spacing:.012em;color:var(--hand);white-space:nowrap;background:url(art/rs/scrap.webp) center/100% 100% no-repeat;pointer-events:auto;cursor:pointer}
.rf-hand__t{display:inline-block}
.rf-hand--years::after,.rf-hand--name::after{content:"";position:absolute;width:calc(var(--u)*46);height:calc(var(--u)*70);background:url(art/rs/arrow-a.webp) center/contain no-repeat;transition:opacity .25s;pointer-events:none}
.rf-hand--years::after{left:calc(var(--u)*-8);top:calc(var(--u)*-58);transform:rotate(168deg)}
.rf-hand--name::after{left:calc(var(--u)*-4);top:calc(var(--u)*-52);transform:rotate(150deg)}
.rf-hand.done::after{opacity:0}
.rf-hand.done{cursor:default}
.rf-hand.wrote .rf-hand__t{animation:rf-wipe .6s cubic-bezier(.3,.6,.2,1) both}
@keyframes rf-wipe{from{clip-path:inset(-10% 100% -10% -4%)}to{clip-path:inset(-10% -4% -10% -4%)}}
.rf-hand--open{left:calc(var(--u)*476);top:calc(var(--u)*742);transform:rotate(-3deg)}
.rf-hand--name{left:calc(var(--u)*1184);top:calc(var(--u)*262);transform:rotate(3deg)}
.rf-hand--years{left:calc(var(--u)*572);top:calc(var(--u)*276);transform:rotate(-2.5deg)}
.rf-hand--year{left:calc(var(--u)*1086);top:calc(var(--u)*600);transform:rotate(1.5deg);font-size:calc(var(--u)*24)}
.rf-hand--link{left:calc(var(--u)*786);top:calc(var(--u)*772);transform:rotate(-2.4deg);font-size:calc(var(--u)*25)}

/* red pencil rings, drawn once by hand as the plate arrives */
.rf-ring{position:absolute;display:block;max-width:none;pointer-events:none;--rf-a:0deg;mask-image:conic-gradient(from -80deg,#000 var(--rf-a),transparent 0);-webkit-mask-image:conic-gradient(from -80deg,#000 var(--rf-a),transparent 0)}
.rf.seen .rf-ring{transition:--rf-a .9s cubic-bezier(.4,.1,.3,1);--rf-a:361deg}
.rf.seen .rf-ring--years{transition-delay:.35s}
[data-fix][data-done] .rf-ring{transition:--rf-a .3s linear!important;--rf-a:0deg!important}
.rf-ring--name{left:18%;top:9%;width:74%;transform:rotate(9deg)}
.rf-ring--years{left:47%;top:30%;width:22%;transform:rotate(-10deg)}

/* stones */
.rf-stone{position:absolute;z-index:3;display:block;padding:0;border:0;background:none;cursor:pointer;transform-origin:0 0;will-change:transform}
.rf-stone__in{position:relative;display:block}
.rf-stone img{display:block;max-width:none}
.rf-stone__img{position:relative;width:100%;height:auto}
.rf-stone__sh{position:absolute;opacity:0;will-change:opacity}
.rf-stone__clean,.rf-stone__gold{position:absolute;opacity:0}
.rf-stone--site{left:calc(var(--u)*838);top:calc(var(--u)*66);width:calc(var(--u)*478)}
.rf-stone--site .rf-stone__sh{left:-6.4%;top:-12.4%;width:112.8%}
.rf-stone--site .rf-stone__clean,.rf-stone--site .rf-stone__gold{left:24%;top:15.5%;width:64%}
.rf-stone--years{left:calc(var(--u)*196);top:calc(var(--u)*46);width:calc(var(--u)*660)}
.rf-stone--years .rf-stone__sh{left:-4.6%;top:-10.17%;width:109.2%}
.rf-stone--years .rf-stone__clean,.rf-stone--years .rf-stone__gold{left:47.94%;top:31.78%;width:19.18%}
.rf-stone__chalk{position:absolute;left:49.5%;top:32%;width:15.5%;transform:rotate(-10deg);overflow:visible;pointer-events:none}
.rf-stone__chalk path{fill:none;stroke:#fbf1dc;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}

/* the notice */
.rf-notice{position:absolute;z-index:2;left:calc(var(--u)*226);top:calc(var(--u)*536);width:calc(var(--u)*342);aspect-ratio:420/290;padding:0;border:0;background:none;cursor:pointer;transform:rotate(-2deg);display:block}
.rf-notice__tile{position:absolute;inset:0;display:block;box-shadow:0 calc(var(--u)*5) calc(var(--u)*14) rgba(26,14,6,.45)}
.rf-notice__tile img{display:block;width:100%;height:100%;object-fit:cover}
.rf-notice__slip{position:absolute;left:-4%;top:-4%;width:108%;height:108%;display:flex;align-items:center;padding:0 9%;background:url(art/rs/slip-white.webp) center/100% 100% no-repeat;font:700 calc(var(--u)*31)/1.14 Arial,"Helvetica Neue",sans-serif;letter-spacing:-.01em;text-align:left;color:#111;transform-origin:92% 8%}
.rf-pin{position:absolute;display:block;width:calc(var(--u)*36);height:calc(var(--u)*36);background:url(art/rs/pin.webp) center/contain no-repeat;pointer-events:none}
.rf-pin--l{left:2%;top:0}.rf-pin--r{right:2%;top:0}

/* the year wheel */
.rf-vol{position:absolute;z-index:2;left:calc(var(--u)*1112);top:calc(var(--u)*328);width:calc(var(--u)*272);height:calc(var(--u)*272);padding:0;border:0;background:none;cursor:grab;touch-action:pan-y;display:block}
.rf-vol:active{cursor:grabbing}
.rf-vol__shadow{position:absolute;inset:0;width:100%;height:100%}
.rf-vol__disc{position:absolute;inset:0;display:block;will-change:transform}
.rf-vol__disc img{display:block;width:100%;height:100%}
.rf-vol__y{position:absolute;left:50%;top:50%;width:0;height:0;display:block}
.rf-vol__y i{position:absolute;left:0;top:0;font:italic 400 calc(var(--u)*25)/1 "Instrument Serif",Georgia,serif;color:#2a170c;transform-origin:0 0;transform:rotate(var(--a)) translateY(calc(var(--u)*-101)) translate(-50%,-50%);white-space:nowrap}
.rf-vol__tab{position:absolute;left:calc(var(--u)*50);top:calc(var(--u)*-4);width:calc(var(--u)*140);height:auto;pointer-events:none}
.rf-vol__c{position:absolute;left:calc(var(--u)*81);top:calc(var(--u)*22);font:400 calc(var(--u)*23)/1 Switzer,Arial,sans-serif;color:var(--ink)}
.rf-pin--c{left:calc(50% - var(--u)*18);top:calc(50% - var(--u)*18)}
.rf-vol.turned .rf-vol__y i.now{color:#6b4205}

/* the snap line */
.rf-snap{position:absolute;z-index:2;left:calc(var(--u)*764);top:calc(var(--u)*660);width:calc(var(--u)*640);height:calc(var(--u)*196);padding:0;border:0;background:none;cursor:pointer;display:block;transform:rotate(-1.9deg)}
.rf-snap__wolf{position:absolute;left:calc(var(--u)*244);top:calc(var(--u)*14);width:calc(var(--u)*214);height:auto;pointer-events:none}
.rf-snap__c{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rf-tag{position:absolute;display:block;padding:.34em .72em;background:#fbfbf7;box-shadow:0 calc(var(--u)*3) calc(var(--u)*7) rgba(26,14,6,.35);font:400 calc(var(--u)*22)/1.1 Arial,"Helvetica Neue",sans-serif;white-space:nowrap;color:#111}
.rf-tag--from{left:calc(var(--u)*16);top:calc(var(--u)*34);color:#1a4fb0;text-decoration:underline;text-underline-offset:.14em}
.rf-tag--wrong{left:calc(var(--u)*456);top:calc(var(--u)*128);transform:rotate(4deg);color:#333}
.rf-tag--right{right:calc(var(--u)*-6);top:calc(var(--u)*96);opacity:0;font-size:calc(var(--u)*20)}

/* every piece answers the same way: it lifts off the page */
.rf-stone__in{transition:translate .22s cubic-bezier(.2,.7,.2,1)}
.rf-notice__lift,.rf-vol__lift{display:block;position:absolute;inset:0;transition:translate .22s cubic-bezier(.2,.7,.2,1)}
.rf-stone:hover .rf-stone__in,.rf-stone:focus-visible .rf-stone__in,.rf-notice:hover .rf-notice__lift,.rf-notice:focus-visible .rf-notice__lift,.rf-vol:hover .rf-vol__lift,.rf-vol:focus-visible .rf-vol__lift{translate:0 calc(var(--u)*-4)}
[data-fix][data-done],[data-fix][data-done] *{cursor:default}
.rf-stone[data-done]:hover .rf-stone__in,.rf-notice[data-done]:hover .rf-notice__lift,.rf-vol[data-done]:hover .rf-vol__lift{translate:none}
.rf-stone:active .rf-stone__in,.rf-notice:active .rf-notice__lift{scale:.985}
@media (hover:none){.rf-stone:hover .rf-stone__in,.rf-notice:hover .rf-notice__lift,.rf-vol:hover .rf-vol__lift{translate:none}}
#rs-fx{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:6;pointer-events:none}

/* after the plate: one line on the painting, on the road the customer left by */
.film:not(.notaste) .rs-after{position:relative;height:72svh;color:var(--paper-ink)}
.film:not(.notaste) .rs-after .say--after{position:absolute;left:clamp(16px,14vw,240px);top:12svh;margin:0;max-width:none}
.film:not(.notaste) .rs-after .rs-strip{display:block;width:fit-content;padding:.42em .78em .4em;background:url(art/rs/strip.webp) center/100% 100% no-repeat;color:#14151c;font-size:clamp(34px,4.9vw,86px);font-weight:600;letter-spacing:-.04em;line-height:1.02;transform:rotate(-1.2deg)}
.film:not(.notaste) .rs-after .rs-rest{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.film:not(.notaste) .rs-after .wall{position:absolute;left:clamp(16px,14vw,240px);top:36svh;width:min(520px,calc(100vw - 8px));margin:0 0 0 -22px;padding:1.5em 3.5em 1.4em 3.7em;box-sizing:border-box;font-size:15px;line-height:1.36;color:#33302a;background:url(art/rs/scrap.webp) center/100% 100% no-repeat}

/* the last word: paper with the next room's painting showing through it */
.film:not(.notaste) .rs-last{display:block;position:absolute;left:0;right:0;top:0;height:230svh;z-index:2;pointer-events:none}
.film:not(.notaste) .rs-last__stage{position:sticky;top:0;height:100svh;overflow:hidden;color:#14151c;transform-origin:0 0;will-change:transform}
.rs-last p{position:absolute;margin:0;font-weight:600;line-height:1;letter-spacing:-.04em;white-space:nowrap}

/* the taste switch: this sheet goes as plain as the rest of the page */
.notaste .rs-frames,.notaste .rf,.notaste .rs-cut,.notaste .rs-last{display:none!important}
.notaste .rs-land{height:auto!important}
.notaste .rs-ledger .ln{cursor:default}
.notaste .rs-strip{font:inherit}

/* --------- the phone: one piece at a time, with the painting showing between them --------- */
@media (max-width:900px){
  .film:not(.notaste) .rs-land{height:150svh}
  .film:not(.notaste) .rs-land__copy h2{font-size:40px}
  .film:not(.notaste) .rs-land__copy p{font-size:17px}
  .film:not(.notaste) .paper.rs-wall{margin-left:0;background-position:0 0;padding-bottom:40px}
  .film:not(.notaste) .rs-wall::before{display:none}
  .film:not(.notaste) .rs-wall::after{left:0}
  .film:not(.notaste) .rs-hang{display:block;padding:12px 16px 0}
  .film:not(.notaste) .rs-frames{--k:calc((100vw - 32px)/358);position:sticky;top:46px;z-index:2;height:calc(var(--k)*384);margin:0 -16px;padding:0;background:#3a1a14 url(art/rs/stock.webp) 0 0;box-shadow:0 10px 12px -6px rgba(26,8,4,.75)}
  .film:not(.notaste) .rs-frames::before{content:"";position:absolute;left:0;right:0;top:-46px;height:46px;background:inherit}
  .fr{left:calc(var(--k)*(var(--tx) + 0) + 16px);top:calc(var(--k)*var(--ty) + 8px);width:calc(var(--k)*var(--tw))}
  .fr--b,.fr--c{--b:calc(var(--k)*9)}
  .film:not(.notaste) .rs-side{position:static;padding-top:18px}
  .film:not(.notaste) .rs-side h3{font-size:30px}
  .film:not(.notaste) .rs-ledger .ln{min-height:44px;align-items:center;font-size:16px;padding:6px 0}

  .film:not(.notaste) .rf{--u:min(calc(100vw / 390),1.42px);padding-top:24svh}
  .rf__plate{width:calc(var(--u)*390);height:auto;display:flex;flex-direction:column;padding-bottom:calc(var(--u)*30)}
  .rf-leaf{display:none}
  .rf__finds{display:contents}
  .rf-find{display:block;position:relative}
  .rf-find--years{order:1;z-index:3}.rf__head{order:2}.rf-find--name{order:3;z-index:3}.rf-find--open{order:4}.rf-find--year{order:5}.rf-find--link{order:6}
  .rf__head{position:relative;left:auto;top:auto;width:auto;margin:calc(var(--u)*-150) calc(var(--u)*-12) 0;padding:calc(var(--u)*196) calc(var(--u)*44) calc(var(--u)*52);background:url(art/rs/leaf-a.webp) center/100% 100% no-repeat}
  .rf__head h3{font-size:calc(var(--u)*38)}
  .rf__head p{font-size:calc(var(--u)*17);max-width:none}
  .rf-stone{position:relative;left:auto;top:auto}
  .rf-stone--years{width:calc(var(--u)*430);margin-left:calc(var(--u)*-22)}
  .rf-stone--site{width:calc(var(--u)*352);margin:calc(var(--u)*18) 0 0 calc(var(--u)*24)}
  .rf-hand{font-size:calc(var(--u)*26)}
  .rf-hand--years{left:auto;right:calc(var(--u)*14);top:auto;bottom:calc(var(--u)*-2);z-index:5}
  .rf-hand--name{left:auto;right:calc(var(--u)*10);top:calc(var(--u)*6)}
  .rf-hand--name::after{left:calc(var(--u)*-2);top:calc(var(--u)*36);transform:rotate(24deg)}
  .rf-find--open{margin:calc(var(--u)*-124) calc(var(--u)*-10) 0;padding:calc(var(--u)*176) 0 calc(var(--u)*46);background:url(art/rs/leaf-b.webp) center/118% 100% no-repeat}
  .rf-hand--open{left:calc(var(--u)*30);top:calc(var(--u)*134);bottom:auto}
  .rf-notice{position:relative;left:auto;top:auto;width:calc(var(--u)*306);margin:calc(var(--u)*26) auto 0}
  .rf-notice__slip{font-size:calc(var(--u)*27)}
  .rf-find--year{margin:calc(var(--u)*18) calc(var(--u)*-8) 0;padding:calc(var(--u)*34) 0 calc(var(--u)*62);background:url(art/rs/leaf-a.webp) center/100% 100% no-repeat}
  .rf-vol{--u:min(calc(100vw / 470),1.2px);position:relative;left:auto;top:auto;margin:0 auto}
  .rf-hand--year{left:50%;top:auto;bottom:calc(var(--u)*12);font-size:calc(var(--u)*23);transform:translateX(-50%) rotate(1.5deg)}
  .rf-find--link{margin:calc(var(--u)*14) calc(var(--u)*-34) 0;padding:calc(var(--u)*44) 0;background:url(art/rs/leaf-c.webp) center/100% 100% no-repeat}
  .rf-snap{position:relative;left:auto;top:auto;width:calc(var(--u)*342);height:calc(var(--u)*212);margin:0 auto;transform:none}
  .rf-snap__wolf{left:calc(var(--u)*100);top:calc(var(--u)*34);width:calc(var(--u)*196)}
  .rf-tag{font-size:calc(var(--u)*19)}
  .rf-tag--from{left:calc(var(--u)*4);top:calc(var(--u)*36)}
  .rf-tag--wrong{left:auto;right:0;top:calc(var(--u)*150)}
  .rf-tag--right{right:0;top:calc(var(--u)*150);font-size:calc(var(--u)*18)}
  .rf-hand--link{left:calc(var(--u)*50);top:calc(var(--u)*22);font-size:calc(var(--u)*24)}
  .film:not(.notaste) .rs-after{height:56svh}
  .film:not(.notaste) .rs-after .say--after{left:16px;right:16px;top:10svh}
  .film:not(.notaste) .rs-after .wall{left:4px;margin-left:0;top:30svh}
}

/* ------ Check-up */
@font-face{font-family:"Meyer Hand";src:url(art/chart/hand.woff2) format("woff2");font-display:swap}
@font-face{font-family:Garamond;src:url(fonts/garamond-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Source Serif";src:url(fonts/serif-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Serif";src:url(fonts/serif-600.woff2) format("woff2");font-weight:600;font-display:swap}

.paper--check{
  --leaf:#e9c796;--paper:var(--leaf);--paper-ink:#20120a;--paper-soft:#452c17;
  --bistre:#5c2c08;--chalk:#86341a;--chalk-ink:#6f2710;--lead:#6a4f3c;
  --hand:"Meyer Hand",Georgia,serif;
  --hang:clamp(70px,8vw,110px);
  background:var(--leaf);color:var(--paper-ink);
  font-family:"Source Serif",Georgia,serif;letter-spacing:0;-webkit-font-smoothing:auto;text-shadow:0 0 .6px rgb(62 30 10/.5);
}
.paper--check .lede,.check__sum,.paper--check .btn{font-family:Garamond,"Source Serif",Georgia,serif;font-weight:600;letter-spacing:-.006em}
.paper--check .btn{text-shadow:none}
.folio{display:none}
.film:not(.notaste) .folio{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;--th:calc((100cqw + 2*var(--m) + var(--hang))*.10273)}
.folio__paper{position:absolute;left:calc(-1*var(--hang));right:0;top:calc(-1*var(--th));bottom:calc(-1*var(--th));
  -webkit-mask:url(art/chart/leaf-mask-l.webp) 0 -1210px/126px 2160px repeat-y,linear-gradient(#000 0 0) 120px 0/100% 100% no-repeat;
  mask:url(art/chart/leaf-mask-l.webp) 0 -1210px/126px 2160px repeat-y,linear-gradient(#000 0 0) 120px 0/100% 100% no-repeat}
.folio__paper::before{content:"";position:absolute;inset:0;
  background:url(art/chart/leaf-stain.webp) 0 0/100% 100% no-repeat,url(art/chart/leaf-fox.webp) 0 0/1200px 1500px,url(art/chart/leaf-tile.webp) 0 0/800px 800px;
  -webkit-mask:url(art/chart/leaf-mask-t.webp) 0 0/100% auto no-repeat,url(art/chart/leaf-mask-b.webp) 0 100%/100% auto no-repeat,linear-gradient(#000 0 0) 0 50%/100% calc(100% - var(--th)*1.4) no-repeat;
  mask:url(art/chart/leaf-mask-t.webp) 0 0/100% auto no-repeat,url(art/chart/leaf-mask-b.webp) 0 100%/100% auto no-repeat,linear-gradient(#000 0 0) 0 50%/100% calc(100% - var(--th)*1.4) no-repeat}
.folio__lip{position:absolute;display:block}
.folio__lip--t{left:0;right:0;top:0;height:var(--th);background:url(art/chart/leaf-lip-t.webp) 0 0/100% auto no-repeat}
.folio__lip--b{left:0;right:0;bottom:0;height:var(--th);background:url(art/chart/leaf-lip-b.webp) 0 100%/100% auto no-repeat}
.folio__lip--l{left:calc(-1*var(--hang));top:calc(-1*var(--th)*.3);bottom:calc(-1*var(--th)*.3);width:126px;background:url(art/chart/leaf-lip-l.webp) 0 -1210px/126px 2160px repeat-y;-webkit-mask:linear-gradient(transparent,#000 calc(var(--th)*.7),#000 calc(100% - var(--th)*.7),transparent);mask:linear-gradient(transparent,#000 calc(var(--th)*.7),#000 calc(100% - var(--th)*.7),transparent)}



/* ------ The layout. The form runs the width of the sheet and its input is back to full size. Under it the key sits beside the plate, and the plate runs off the sheet's edge with the doctor's arm. */
.ward{display:grid;grid-template-columns:minmax(0,31fr) minmax(0,69fr);grid-template-areas:"key plate";column-gap:clamp(18px,2.2cqw,32px);align-items:start}
.ward__key{grid-area:key;padding-top:clamp(10px,1.6cqw,20px)}
.ward__plate{grid-area:plate;margin-right:calc(-1*var(--m));min-width:0}

/* The form is filled in the way the rest of the sheet was written: on a ruled line, in the hand. */
.ck input{padding:0 4px 3px;background:url(art/chart/leaf-rule.webp) 0 100%/100% 8px no-repeat;color:var(--paper-ink);font-family:var(--hand);font-weight:400;letter-spacing:0}
.ck input::placeholder{color:#7a5836;opacity:1}
.paper--check :focus-visible{outline-color:var(--chalk)}
.ck input:focus-visible{outline:0;background-image:linear-gradient(var(--chalk),var(--chalk));background-size:100% 2px}
.paper--check .btn{margin-bottom:3px;background:var(--paper-ink);color:#f0d6a8;white-space:nowrap;-webkit-mask:url(art/chart/leaf-block.webp) 0 0/100% 100%;mask:url(art/chart/leaf-block.webp) 0 0/100% 100%}
.paper--check .btn:hover{background:#3a2212}
.paper--check .btn:focus-visible{-webkit-mask:none;mask:none;outline:3px solid var(--chalk);outline-offset:2px}   /* a mask would cut the ring off */

/* The key. Letters, ticks and crosses are the doctor's. The questions stay in the site's voice. */
.report{display:block;margin:0}
.report li{position:relative;display:grid;grid-template-columns:1.5em 1fr auto;column-gap:.35em;padding:8px 0 7px;line-height:1.22;color:var(--paper-soft);background:url(art/chart/leaf-rule.webp) 0 0/100% 7px no-repeat}
.report li:last-child{background:url(art/chart/leaf-rule.webp) 0 0/100% 7px no-repeat,url(art/chart/leaf-rule.webp) 40% 100%/100% 7px no-repeat}
.report .ltr{font:400 1.56em/.86 var(--hand);color:var(--bistre)}
.report .tx{min-width:0}
.report .tx b{font-weight:400}
.report .why{display:block;font-size:var(--small);color:var(--paper-ink)}
.report .mk{font:400 1.5em/.84 var(--hand);text-align:right;color:var(--bistre)}
.report li.ok,.report li.bad{color:var(--paper-ink)}
.paper--check .report li.ok .mk{color:var(--bistre)}
.report li.bad b{font-weight:600}
.report li.bad .mk,.report li.bad .ltr{color:var(--chalk-ink)}
.report li.hot{background:url(art/chart/leaf-rule.webp) 0 0/100% 7px no-repeat,url(art/chart/leaf-wash.webp) 0 0/100% 100% no-repeat}
.report li.hot:last-child{background:url(art/chart/leaf-rule.webp) 0 0/100% 7px no-repeat,url(art/chart/leaf-rule.webp) 40% 100%/100% 7px no-repeat,url(art/chart/leaf-wash.webp) 0 0/100% 100% no-repeat}
.check__sum{margin-top:12px;line-height:1.16}
#rep-host{display:block;font:400 1.3em/1.1 var(--hand);color:var(--paper-ink);letter-spacing:0;overflow-wrap:anywhere}
.ward__plate .wall{position:relative;margin:-16px 0 0 3.5%;font:400 clamp(1.25rem,1.9cqw,1.5rem)/1.1 var(--hand);color:var(--bistre)}

/* ------ The plate. A cut of the study, the page in pencil, one image of ink for each check, and red chalk over those. */
.ck-plate{position:relative;container-type:inline-size;width:100%;aspect-ratio:780/530;margin:0}
.ck-plate img{position:absolute;max-width:none;height:auto}
.chart__lid,.chart__base,.chart__sketch{left:0;top:0;width:100%}
.chart__lid{transition:opacity .9s ease .1s}
.ck-plate.is-read .chart__lid{opacity:.12}
.chart__sketch{transition:opacity .6s ease}
.ck-plate.is-read .chart__sketch{opacity:.42}
.ck-plate.is-peeled .chart__sketch--c{opacity:0}
.chart__ink{opacity:0;-webkit-mask:url(art/chart/plate-sweep.webp) 75% 25%/300% 300% no-repeat;mask:url(art/chart/plate-sweep.webp) 75% 25%/300% 300% no-repeat;transition:opacity .1s linear,-webkit-mask-position .56s cubic-bezier(.35,.15,.25,1),mask-position .56s cubic-bezier(.35,.15,.25,1)}
.chart__ink--body{transition-duration:.1s,.95s,.95s}
.chart__ink.on{opacity:1;-webkit-mask-position:0 100%;mask-position:0 100%}
.chart__mark,.chart__lead{position:absolute;display:block;pointer-events:none;background:var(--c,var(--chalk));-webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat;opacity:0;transition:opacity .34s ease}
.chart__mark.on{opacity:.94}
.chart__mark.hot{opacity:.5;--c:var(--bistre)}
.chart__mark.on.hot{opacity:1;--c:var(--chalk)}
.chart__lead.ok{opacity:.8;--c:var(--bistre)}
.chart__lead.bad{opacity:1;--c:var(--chalk)}
.chart__lead.hot{opacity:1}
.chart__type{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sheet-type{font-family:var(--hand);fill:var(--bistre);white-space:pre}
.sheet-type tspan{fill-opacity:0;transition:fill-opacity .12s linear}
.sheet-type.on tspan{fill-opacity:.94}
#pl-head{fill:#4a2308}
.yours{font:400 40px var(--hand);fill:var(--lead);text-anchor:middle;transition:opacity .3s ease}
.ck-plate:not(.is-empty) .yours{opacity:0}
.key{position:absolute;display:grid;place-items:center;width:30px;height:30px;margin:-15px 0 0 -15px;font:400 clamp(1.5rem,4cqw,1.9rem)/1 var(--hand);color:var(--lead);cursor:pointer;transition:color .2s ease}
.key.ok{color:var(--bistre)}
.key.bad{color:var(--chalk-ink)}
.chart__note{position:absolute;margin:0;font:400 clamp(1.0625rem,3.2cqw,1.5625rem)/1.08 var(--hand);color:var(--chalk-ink);pointer-events:none}
.chart__note span{opacity:0;transition:opacity .12s linear}
.chart__note.on span{opacity:1}

/* The slip: the note from the painting, held out in the doctor's other hand. The forearm runs behind the paper, and the thumb comes over the front. */
.rx{position:relative;margin:clamp(-58px,-4cqw,-30px) 14px 0 auto;padding-top:58px;width:min(calc(100% - 14px),46rem);clip-path:inset(-40px -14px -40px -40px);opacity:0;translate:0 10px;transition:opacity .22s ease,translate .36s var(--out)}
.rx.on{opacity:1;translate:0 0}
.rx[hidden]{display:none}
.rx__paper{position:relative;z-index:1;border:30px solid transparent;border-image:url(art/chart/slip-paper.webp) 62 fill/31px stretch;padding:0 6px 0 4px;margin:0;color:#2a160a;font-family:var(--hand);filter:drop-shadow(1px 3px 3px rgb(46 22 8/.5))}
.rx__head{font-size:1.125rem;line-height:1.1;padding-bottom:6px;background:url(art/chart/leaf-rule.webp) 0 100%/100% 7px no-repeat}
.rx__body{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(16px,2.6cqw,34px);align-items:start}
.rx__for{margin-top:5px;font-size:1.75rem;line-height:1.08;overflow-wrap:anywhere}
.rx__list{margin-top:4px;font-size:1.3125rem;line-height:1.14}
.rx__list li{display:grid;grid-template-columns:1.05em 1fr;padding:1px 0}
.rx__list i{font-style:normal;color:var(--chalk-ink)}
.rx__foot{display:flex;flex-direction:column;align-items:flex-end;align-self:end;width:13.5rem}
.rx__say{font-size:1.1875rem;line-height:1.14;text-align:right}
.rx__say a{display:inline-block;padding:2px 0;font-size:1.3125rem;white-space:nowrap;text-decoration-thickness:1px;text-underline-offset:3px}
.rx__say a:hover{color:var(--chalk-ink)}
.rx__sign{flex:none;width:132px;height:auto;margin:-2px -4px -8px 0}
.rx__hand{position:absolute;z-index:0;right:-44px;top:12px;width:319px;height:auto;max-width:none;pointer-events:none}
.rx__hand--thumb{z-index:2;clip-path:inset(62% 58% 0 0)}

/* A narrower sheet, on a small laptop or if the sheets come in from the sides: the plate takes the full width and the key goes under it in two columns. */
@container (min-width:641px) and (max-width:1000px){
  .ward{grid-template-columns:minmax(0,1fr);grid-template-areas:"plate" "key"}
  .ward__plate{margin-right:calc(-1*var(--m));margin-top:6px}
  .ward__key{padding-top:6px}
  .report{columns:2;column-gap:clamp(16px,3cqw,32px)}
  .report li{break-inside:avoid}
  .rx{margin-top:6px}
}

/* ------ Two widths. On a laptop the finding is written on the plate, so the row keeps it for screen readers only. */
@media (min-width:901px){.report li.bad .why{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* Phone: the sheet runs edge to edge, torn top and bottom, with the tear at the size it is on a desk. The drawing is cut to the patient and the probe, and the findings live in the rows. */
@media (max-width:900px){
  .paper--check{--hang:0px}
  .film:not(.notaste) .folio{--th:calc((100cqw + 2*var(--m))*.24655)}
  .folio__paper{-webkit-mask:none;mask:none}
  .folio__paper::before{-webkit-mask-size:240% auto,240% auto,100% calc(100% - var(--th)*1.4);mask-size:240% auto,240% auto,100% calc(100% - var(--th)*1.4);-webkit-mask-position:42% 0,62% 100%,0 50%;mask-position:42% 0,62% 100%,0 50%;background-image:url(art/chart/leaf-stain-m.webp),url(art/chart/leaf-fox.webp),url(art/chart/leaf-tile.webp);background-size:100% 100%,800px 1000px,533px 533px}
  .folio__lip--l{display:none}
  .folio__lip--t{background-size:240% auto;background-position:42% 0}
  .folio__lip--b{background-size:240% auto;background-position:62% 100%}
  .ward{display:flex;flex-direction:column;align-items:stretch}
  .ward__key,.ward__plate{display:contents}
    .chart-crop{order:2;overflow:hidden;margin:clamp(8px,3cqw,18px) calc(-1*var(--m)) 0}
  .ck-plate{width:calc(100%*780/622);margin-left:calc(-100%*6/622)}
  .report{order:3;margin-top:2px}
  .check__sum{order:4}
  .ck-again{order:6;margin-top:6px}
  .wall{order:7}
  .rx{order:5;width:auto;margin:6px 0 0;padding-top:50px;clip-path:inset(-40px calc(-1*var(--m)) -40px -40px)}
  .ward__plate .wall{margin:10px 0 0}
  .chart__note{display:none}
  .key{width:34px;height:34px;margin:-17px 0 0 -17px;font-size:1.625rem}
  .key[data-part=phone]{margin-left:-26px}          /* the plate is cut just past it */
  .rx__hand{right:-42px;top:6px;width:260px}
  .rx__body{display:block}
  .rx__foot{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:10px;width:auto;margin-top:6px}
  .rx__say{text-align:left}
}
@media (prefers-reduced-motion:reduce){.chart__ink{-webkit-mask:none;mask:none}.chart__ink,.chart__lid,.chart__sketch,.chart__mark,.chart__lead,.chart__note span,.rx,.sheet-type tspan,.yours{transition:none}.chart__note span{transition-delay:0s!important}}

/* Taste off: the plain page. The form, the list and the slip's words stay, the findings go back in the rows, and nothing here pretends to be old. */
.notaste .paper--check{--hand:Arial,sans-serif;font-family:inherit;text-shadow:none}
.notaste .paper--check .lede,.notaste .check__sum,.notaste .paper--check .btn{font-family:Arial,sans-serif}
.notaste .paper--check .fine{display:block!important}
.notaste .ck__row{align-items:stretch}
.notaste .folio,.notaste .chart-crop,.notaste .rx__hand,.notaste .rx__sign,.notaste .wall{display:none}
.notaste .ckB{padding:0}
.notaste .ward{display:block}
.notaste .ward__plate{margin:0}
.notaste .report{columns:auto}
.notaste .report li,.notaste .report li:last-child{background:none}
.notaste .report li.bad .why{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
.notaste .ck input{background:#fff;border:1px solid #767676}
.notaste .rx{width:auto;margin:12px 0 0;padding:0;clip-path:none}
.notaste .rx__paper{border:0;padding:0;filter:none}
.notaste .rx__head{background:none}
.notaste .rx__body{display:block}
.notaste .rx__foot{width:auto;align-items:flex-start}
.notaste .rx__say{text-align:left}
.notaste .paper--check .btn{-webkit-mask:none;mask:none}

/* ------ The Check-up sheet, first leaf: the doctors' parchment on the live painting, the seven cut through it, and the form. The chart below it stays hidden until a check comes back.
   --u is one pixel of a 1440 x 890 layout, so the leaf fits one screen at any laptop size. */
.ckA__art,.ckA__num{display:inline}
.ckA__seven{margin:0 0 8px;font-size:var(--lead);font-weight:600}
.ckA__list{margin:12px 0;padding:0;list-style:none}
.ckA__list i{display:inline-block;width:1.4em;font-style:normal}
.ckA__art img{display:none}
.ckA__say:empty{display:none}
.ckA__say{margin-top:8px;font-weight:600}
.ck-again{display:block;margin-top:8px;padding:10px 0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.paper--check{overflow-x:clip}
.ckB{position:relative;container-type:inline-size;outline:0}
.ckB[hidden]{display:none}

.film:not(.notaste) .paper--check{--u:min(calc(100vw / 1440),calc(100svh / 890))}
.film:not(.notaste) .paper.paper--check{margin:0;padding:0;min-height:0;background:none;pointer-events:none;overflow-x:clip}
.film:not(.notaste) .ckA{position:relative;height:135svh}
.film:not(.notaste) .ckA__pin{position:sticky;top:0;height:100svh;display:flex;justify-content:center}
.film:not(.notaste) .ckA__frame{position:relative;flex:none;width:calc(var(--u)*1440);height:calc(var(--u)*890);margin-top:calc((100svh - var(--u)*890)/2)}
.film:not(.notaste) .ckA__art img{display:block;position:absolute;left:calc(var(--u)*328);top:calc(var(--u)*53);width:calc(var(--u)*1450);height:auto;max-width:none;pointer-events:auto;opacity:0;transition:opacity .3s ease}
.film:not(.notaste) .leaf-in .ckA__art img{opacity:1}
.film:not(.notaste) .ckA__seven{position:absolute;left:calc(var(--u)*411);top:calc(var(--u)*577);margin:0;opacity:0;transition:opacity .3s ease}
.film:not(.notaste) .leaf-in .ckA__seven{opacity:1}
.film:not(.notaste) .ckA__num{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.film:not(.notaste) .ckA__word{font:italic 400 calc(var(--u)*76)/1 "Instrument Serif",Georgia,serif;letter-spacing:-.012em;text-shadow:none}
.film:not(.notaste) .ckA__col{position:absolute;left:calc(var(--u)*883);top:calc(var(--u)*118);width:calc(var(--u)*340);pointer-events:auto}
.film:not(.notaste) .paper--check:not(.leaf-in) .ckA__col{background:var(--leaf);box-shadow:0 0 0 calc(var(--u)*14) var(--leaf)}   /* a slow line: the words never sit on the bare painting */
.film:not(.notaste) .ckA__list{margin:0;font-size:max(14px,calc(var(--u)*19.2));line-height:1.2}
.film:not(.notaste) .ckA__list li{display:grid;grid-template-columns:calc(var(--u)*35) 1fr;align-items:baseline;padding:calc(var(--u)*9) 0 calc(var(--u)*8);background:url(art/chart/leaf-rule.webp) 0 0/100% 7px no-repeat}
.film:not(.notaste) .ckA__list li:last-child{background:url(art/chart/leaf-rule.webp) 0 0/100% 7px no-repeat,url(art/chart/leaf-rule.webp) 40% 100%/100% 7px no-repeat}
.film:not(.notaste) .ckA__list i{width:auto;font:400 1.5em/.8 var(--hand);color:var(--bistre)}
.film:not(.notaste) .ckA__col .lede{margin:calc(var(--u)*18) 0 0;max-width:none;font-size:max(15px,calc(var(--u)*21));line-height:1.08}
.film:not(.notaste) .ck{margin-top:calc(var(--u)*18)}
.film:not(.notaste) .ck label{display:block;margin:0;font-size:max(14px,calc(var(--u)*18));font-weight:400;line-height:1.2}
.film:not(.notaste) .ck__row{align-items:flex-end;gap:calc(var(--u)*14)}
.film:not(.notaste) .ck input{min-height:max(46px,calc(var(--u)*60));font-size:max(26px,calc(var(--u)*42));line-height:1}
.film:not(.notaste) .paper--check .btn{flex:none;min-height:max(46px,calc(var(--u)*58));padding:0 calc(var(--u)*22);font-size:max(16px,calc(var(--u)*20))}
.film:not(.notaste) .ckA__say{margin:calc(var(--u)*8) 0 0;color:var(--chalk-ink);font:600 max(15px,calc(var(--u)*19))/1.1 Garamond,"Source Serif",Georgia,serif}
.film:not(.notaste) .ckA__col .fine{margin:calc(var(--u)*10) 0 0;font-size:max(14px,calc(var(--u)*15.5));line-height:1.3;color:var(--paper-soft)}
.film:not(.notaste) .ckA__wall{position:absolute;left:calc(var(--u)*426);top:calc(var(--u)*782);margin:0;font:400 max(15px,calc(var(--u)*20))/1 var(--hand);color:var(--bistre);opacity:0;transition:opacity .3s ease}
.film:not(.notaste) .leaf-in .ckA__wall{opacity:1}
/* while the machine reads, the letters are gone over one at a time */
@keyframes ck-read{0%,60%,100%{opacity:1}24%{opacity:.22}}
.ckA.is-reading .ckA__list i{animation:ck-read 1.75s ease-in-out infinite}
.ckA.is-reading li:nth-child(2) i{animation-delay:.25s}
.ckA.is-reading li:nth-child(3) i{animation-delay:.5s}
.ckA.is-reading li:nth-child(4) i{animation-delay:.75s}
.ckA.is-reading li:nth-child(5) i{animation-delay:1s}
.ckA.is-reading li:nth-child(6) i{animation-delay:1.25s}
.ckA.is-reading li:nth-child(7) i{animation-delay:1.5s}
.ckA.is-reading .btn{opacity:.6}

/* The chart: a second leaf, laid over the first when a check comes back. It adds its height only then. */
.film:not(.notaste) .ckB{position:relative;z-index:1;container-type:inline-size;margin:-35svh 0 46svh 20%;padding:clamp(30px,3.2vw,56px) var(--m) clamp(28px,2.4vw,44px);pointer-events:auto;outline:0}
.ck-again{font-family:var(--hand);font-size:1.5rem;line-height:1;color:var(--bistre);text-decoration-thickness:1px}
.ck-again:hover{color:var(--chalk-ink)}
.notaste .ck-again{font:inherit;color:inherit}

/* Tall screens and short ones: the leaf runs down the page in reading order. One unit is one pixel of a 390 wide phone. */
@media (max-width:900px),(max-height:620px){
  .film:not(.notaste) .paper--check{--u:calc(min(100vw,560px) / 390)}
  .film:not(.notaste) .ckA{height:auto}
  .film:not(.notaste) .ckA__pin{position:static;height:auto;display:block}
  .film:not(.notaste) .ckA__frame{width:calc(var(--u)*390);height:calc(var(--u)*856);margin:0 auto}
  .film:not(.notaste) .ckA__art img{left:calc(var(--u)*-14);top:calc(var(--u)*-14);width:calc(var(--u)*418)}
  .film:not(.notaste) .ckA__seven{left:calc(var(--u)*150);top:calc(var(--u)*266)}
  .film:not(.notaste) .ckA__word{font-size:calc(var(--u)*66)}
  .film:not(.notaste) .ckA__col{left:calc(var(--u)*24);top:calc(var(--u)*336);width:calc(var(--u)*342)}
  .film:not(.notaste) .ckA__list{font-size:calc(var(--u)*17.5)}
  .film:not(.notaste) .ckA__list li{grid-template-columns:calc(var(--u)*30) 1fr;padding:calc(var(--u)*5.5) 0 calc(var(--u)*4.5)}
  .film:not(.notaste) .ckA__col .lede{font-size:calc(var(--u)*19);line-height:1.1;margin-top:calc(var(--u)*12)}
  .film:not(.notaste) .ck label{font-size:calc(var(--u)*17)}
  .film:not(.notaste) .ck input{font-size:calc(var(--u)*31);min-height:calc(var(--u)*52)}
  .film:not(.notaste) .paper--check .btn{min-height:calc(var(--u)*50);padding:0 calc(var(--u)*17);font-size:calc(var(--u)*19)}
  .film:not(.notaste) .ckA__say{font-size:calc(var(--u)*18)}
  .film:not(.notaste) .ckA__col .fine{font-size:max(14px,calc(var(--u)*14.5))}
  .film:not(.notaste) .ckA__wall{left:calc(var(--u)*24);top:calc(var(--u)*810);font-size:calc(var(--u)*18.5)}
  .film:not(.notaste) .ckA:has(.ckA__say:not(:empty)) .ckA__wall{opacity:0}   /* a message under the form takes this line */
  .film:not(.notaste) .ckB{margin:calc(var(--u)*20) 0 0;padding:clamp(26px,5vw,44px) var(--m) clamp(26px,5vw,44px)}
}

/* ---------------- The wolf path: Wolfgang ----------------
   The paper hangs in the painting. The leaf says who I am with the valley showing through the cut I, the fair questions are letters pegged along the path, each one a real details element. */
.wp__paper,.wp__note,.wp__rope,.wp__strip .peg,.wp .peg,.seal,.fq__tag,.fq__pic,.card__stamp,.pmk{display:none}
.film .wp{--u:min(calc(100vw / 1440),calc(100svh / 900));--ink:#1b1712;--pen:#2a1c10;--sw:0deg;position:relative;z-index:2;padding:0;background:none;color:var(--ink);overflow-x:clip;pointer-events:none}
.film .wp .who__grid{display:block}
.film .wp :is(h2,p,ul){margin:0;padding:0}
.film .wp summary::after{display:none}

/* the line everything hangs from */
.film .wp__rope,.film .fq::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q500 72 1000 3' fill='none' stroke='%231d150e' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;pointer-events:none}
.film .peg{display:block;position:absolute;left:calc(var(--px)*var(--u));top:calc((var(--py) - 34)*var(--u));width:calc(24*var(--u));height:calc(74*var(--u));background:url(art/who/peg.webp) center/100% 100% no-repeat;transform:rotate(calc(var(--pr,1)*1deg));z-index:6;pointer-events:none}

/* --- he says who he is --- */
.film .wp__me{position:relative;height:calc(800*var(--u) + 44svh)}
.film .wp__hold{position:sticky;top:calc(50svh - 405*var(--u));height:calc(800*var(--u))}
.film .wp__rope{display:block;position:absolute;left:0;right:0;top:calc(-58*var(--u));height:calc(90*var(--u))}
.film .wp__leaf{position:absolute;left:calc(50% - 720*var(--u) + 470*var(--u));top:0;width:calc(930*var(--u));height:calc(800*var(--u));transform:rotate(calc(-.7deg + var(--sw)));transform-origin:40% 0}
.film .wp__paper{display:block;position:absolute;left:calc(-35.3*var(--u));top:calc(-35.3*var(--u));width:calc(1000.6*var(--u));pointer-events:none}
.film .wp__paper img{display:block;width:100%;height:auto;max-width:none}
.film .wp__say{position:absolute;left:calc(432*var(--u));top:calc(56*var(--u));width:calc(460*var(--u));pointer-events:auto}
.film .wp__say h2{font-size:calc(56*var(--u));font-weight:600;line-height:1;letter-spacing:-.04em;white-space:nowrap}
.film .wp__I{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.film .wp__say p{margin-top:calc(18*var(--u));font-size:max(15px,calc(20.5*var(--u)));line-height:1.4;letter-spacing:-.006em}
.film .wp__note{display:block;position:absolute;left:calc(300*var(--u));top:calc(548*var(--u));width:calc(330*var(--u));height:auto;max-width:none;transform:rotate(-2deg);pointer-events:none}
.film .wp .facts{position:absolute;right:calc(44*var(--u));bottom:calc(46*var(--u));display:block;width:calc(206*var(--u));margin:0;list-style:none;font:italic 400 calc(22*var(--u))/1.15 "Instrument Serif",Georgia,serif}
.film .wp .facts li{padding:calc(7*var(--u)) 0 calc(6*var(--u));border-top:1px solid rgba(27,23,18,.5)}
.film .wp .facts li:last-child{border-bottom:1px solid rgba(27,23,18,.5)}

/* --- fair questions: the letters go down the path, either side of it --- */
.film .wp__ask{position:relative;display:grid;grid-template-columns:calc(436*var(--u)) calc(436*var(--u));grid-auto-rows:calc(322*var(--u));justify-content:space-between;margin:0;padding:calc(30*var(--u)) calc(50% - 720*var(--u) + 180*var(--u)) 62svh calc(50% - 720*var(--u) + 180*var(--u))}
.film .wp__strip{grid-column:1/-1;justify-self:center;align-self:start;position:relative;width:calc(520*var(--u));height:calc(120*var(--u));background:url(art/who/strip.webp) center/calc(589*var(--u)) calc(189*var(--u)) no-repeat;transform:rotate(calc(-1.4deg + var(--sw)));transform-origin:13% 0;display:flex;align-items:center;padding-left:calc(44*var(--u));pointer-events:auto}
.film .wp__strip h2{margin:0;font-size:calc(54*var(--u));font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.film .wp__strip .peg{left:calc(60*var(--u));top:calc(-44*var(--u))}

.film .fq{--a:0deg;--pic:none;position:relative;align-self:start;margin:calc(14*var(--u)) 0 0;padding:0;background:none;perspective:1500px;perspective-origin:50% 0;transform:rotate(calc(var(--tilt,0deg) + var(--sw)*1.6));transform-origin:30% 0;transition:translate .22s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(calc(-5*var(--u)) calc(7*var(--u)) calc(7*var(--u)) rgba(14,8,6,.42));pointer-events:auto}
.film .fq[open]{background:none;z-index:3}
.film .fq::after{content:"";position:absolute;top:calc(-26*var(--u));height:calc(46*var(--u));z-index:-1}
.film .fq:nth-of-type(odd)::after{left:-60vw;right:12%}
.film .fq:nth-of-type(even)::after{left:12%;right:-60vw}
.film .fq::before{content:"";position:absolute;left:calc(var(--peg,14%) - 12*var(--u));top:calc(-38*var(--u));width:calc(24*var(--u));height:calc(74*var(--u));background:url(art/who/peg.webp) center/100% 100% no-repeat;transform:rotate(2deg);z-index:6;pointer-events:none}
.film .fq--a{--pic:url(art/who/lt-a.webp);--tilt:-1.1deg}
.film .fq--c{--pic:url(art/who/lt-c.webp);--tilt:.7deg;--peg:78%}
.film .fq--d{--pic:url(art/who/lt-d.webp);--tilt:-.8deg;margin-top:calc(70*var(--u))}
.film .fq--e{--pic:url(art/who/lt-e.webp);--tilt:1.2deg;--peg:70%}
.film .fq--f{--pic:url(art/who/lt-f.webp);--tilt:-1deg;margin-top:calc(70*var(--u));--peg:22%}
.film .fq summary{position:relative;display:block;min-height:calc(136*var(--u));padding:calc(38*var(--u)) calc(34*var(--u)) calc(50*var(--u));background:var(--pic) 0 0/100% 300% no-repeat;font:400 max(23px,calc(33*var(--u)))/1.1 "Meyer Hand","Instrument Serif",Georgia,serif;color:var(--pen);letter-spacing:.002em;cursor:pointer;z-index:1}
.film .fq summary:hover{color:var(--pen)}
.film .fq summary:focus-visible{outline:3px solid var(--gold,#e6b450);outline-offset:3px}
.film .fq--e summary,.film .fq--e p{color:#f6f1e6}
.film .fq--e summary:hover{color:#f6f1e6}
.film .seal{display:block;position:absolute;left:calc(50% - 42*var(--u));bottom:calc(-42*var(--u));width:calc(84*var(--u));height:calc(84*var(--u));background:url(art/who/seal.webp) center/100% 100% no-repeat;pointer-events:none;transition:transform .55s cubic-bezier(.45,.05,.8,.5),opacity .3s ease .24s}
.film .seal--a{clip-path:polygon(-5% -5%,105% -5%,105% 46%,86% 52%,70% 47%,57% 55%,44% 49%,30% 56%,16% 50%,-5% 54%)}
.film .seal--b{clip-path:polygon(-5% 54%,16% 50%,30% 56%,44% 49%,57% 55%,70% 47%,86% 52%,105% 46%,105% 105%,-5% 105%)}
.film .fq.on .seal--b{transform:translateY(calc(150*var(--u))) rotate(28deg);opacity:0}
.film .fq.on .seal--a{transform:translate(calc(-3*var(--u)),calc(-2*var(--u))) rotate(-3deg)}
.film .fq__drop{position:absolute;left:0;right:0;top:100%;height:0}
.film .fq__panel{position:absolute;left:0;right:0;top:0;min-height:calc(136*var(--u));padding:calc(12*var(--u)) calc(34*var(--u)) calc(30*var(--u));background:var(--pic) 0 100%/100% 300% no-repeat;transform-origin:50% 0;transform:rotateX(-178deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .62s cubic-bezier(.3,1.25,.5,1)}
.film .fq.on .fq__panel{transform:rotateX(0)}
.film .fq__panel::after{content:"";position:absolute;inset:0;background:linear-gradient(#120a06,transparent 34%);opacity:.5;pointer-events:none;transition:opacity .62s ease}
.film .fq.on .fq__panel::after{opacity:.16}
.film .fq p{position:relative;z-index:1;max-width:none;padding:0;font-size:max(15px,calc(19.5*var(--u)));line-height:1.42;letter-spacing:-.006em;color:var(--ink)}
.film .fq--e p{color:#f6f1e6}
@media (hover:hover){.film .fq:hover{translate:0 calc(-4*var(--u))}.film .fq:hover .seal--b:not(.on *){transform:translateY(calc(2*var(--u)))}}

/* the card turns over; the answer is the message on its back */
.film .fq--card{--tilt:.9deg;aspect-ratio:520/350;margin-top:calc(-30*var(--u));perspective:1600px;perspective-origin:50% 50%}
.film .fq--card::before{left:calc(50% - 12*var(--u));top:calc(-46*var(--u))}
.film .fq--card summary{position:absolute;inset:0;min-height:0;padding:0;background:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s cubic-bezier(.45,.05,.2,1);font-size:max(21px,calc(27*var(--u)))}
.film .fq--card.on summary{transform:rotateY(180deg)}
.film .fq__pic{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none}
.film .fq--card .fq__q{position:absolute;left:2%;right:2%;bottom:3%;padding:calc(8*var(--u)) calc(18*var(--u));background:#e2dbcc}
.film .fq--card .fq__drop{inset:0;height:auto}
.film .fq--card .fq__panel{inset:0;min-height:0;padding:calc(106*var(--u)) calc(34*var(--u)) 0;background:url(art/who/card-back.webp) 0 0/100% 100% no-repeat;transform:rotateY(-180deg);transition:transform .7s cubic-bezier(.45,.05,.2,1);cursor:pointer}
.film .fq--card.on .fq__panel{transform:rotateY(0)}
.film .fq--card .fq__panel::after{display:none}
.film .card__stamp{display:block;position:absolute;right:calc(20*var(--u));top:calc(16*var(--u));width:calc(58*var(--u));height:auto;transform:rotate(1.5deg)}
.film .pmk{display:block;position:absolute;top:calc(12*var(--u));width:calc(86*var(--u));height:calc(86*var(--u));color:#2b2740;opacity:.84;transform:rotate(-9deg)}
.film .pmk svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.film .pmk circle{fill:none;stroke:currentColor;stroke-width:2.4}
.film .pmk text{font:600 13.4px Switzer,Arial,sans-serif;letter-spacing:.14em;fill:currentColor}
.film .pmk b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 calc(15*var(--u))/1 Switzer,Arial,sans-serif;letter-spacing:-.01em}
.film .pmk--you{left:calc(24*var(--u))}
.film .pmk--me{left:calc(100*var(--u));top:calc(20*var(--u));transform:rotate(7deg)}

/* the tag on the deed */
.film .fq__tag{display:block;position:absolute;left:calc(100% - 26*var(--u));top:calc(52*var(--u));width:calc(180*var(--u));transform:rotate(calc(9deg + var(--sw)*3));transform-origin:0 0;pointer-events:none}
.film .fq__tag img{display:block;width:100%;height:auto;transform:scaleX(-1)}
.film .fq__tag b{position:absolute;left:calc(22*var(--u));top:calc(32*var(--u));font:400 calc(15*var(--u))/1.1 Arial,"Helvetica Neue",sans-serif;color:#17140f}

@media (max-width:900px){
  .film .wp{--u:min(calc(100vw / 390),1.3px)}
  .film .wp__me{height:auto;padding:0 8px}
  .film .wp__hold{position:relative;top:0;height:auto;max-width:520px;margin:0 auto;aspect-ratio:812/2260}
  .film .wp__rope{top:-30px;height:60px;left:-8px;right:-8px}
  .film .wp__leaf{position:absolute;inset:0;width:auto;height:auto;transform:rotate(calc(-.5deg + var(--sw)));transform-origin:50% 0}
  .film .wp__paper{left:0;top:0;width:100%}
  .film .wp__say{left:8%;right:8%;width:auto;top:51.5%}
  .film .wp__say h2{font-size:clamp(1.9rem,9.2vw,3rem)}
  .film .wp__I{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .film .wp__say p{margin-top:12px;font-size:1rem;line-height:1.4}
  .film .wp__note{left:30%;top:39.6%;width:62%}
  .film .wp .facts{left:8%;right:8%;bottom:4.2%;width:auto;font-size:1.25rem}
  .film .peg{top:calc((var(--py) - 34)*var(--u))}
  .film .wp__ask{display:block;margin-top:44px;padding:0 12px 58svh}
  .film .wp__strip{width:min(320px,86vw);height:88px;background-size:100% 100%;padding-left:30px;margin:0 auto 52px;transform-origin:50% 0}
  .film .wp__strip h2{font-size:2.5rem}
  .film .wp__strip .peg{left:24px}
  .film .fq{width:91%;margin:0 0 44px;max-width:560px}
  .film .fq:nth-of-type(even){margin-left:auto}
  .film .fq::after{top:-22px;height:40px}
  .film .fq:nth-of-type(odd)::after{left:-12px;right:-9vw}
  .film .fq:nth-of-type(even)::after{left:-9vw;right:-12px}
  .film .fq summary{min-height:104px;padding:30px 26px 40px;font-size:1.5rem}
  .film .fq__drop{position:relative;top:0;height:0;transition:height .5s cubic-bezier(.3,1,.5,1)}
  .film .fq.on .fq__drop{height:var(--h,160px)}
  .film .fq__panel{min-height:110px;padding:8px 26px 28px}
  .film .fq p,.film .fq--card p{font-size:1rem;line-height:1.4}
  .film .fq--d,.film .fq--f{margin-top:0}
  .film .fq{--peg:16%}
  .film .fq--f{--peg:80%}
  .film .fq--d{--peg:80%}
  .film .fq--card{margin-top:0;width:96%}
  .film .fq--card .fq__drop{position:absolute;height:auto;transition:none}
  .film .fq--card.on .fq__drop{height:auto}
  .film .fq--card summary{font-size:1.3rem}
  .film .fq--card .fq__panel{padding:102px 22px 0}
  .film .fq--card p{font-size:.9375rem;line-height:1.34}
  .film .fq__tag{left:auto;right:6px;top:-30px;width:132px;transform:rotate(-6deg);transform-origin:100% 0}
  .film .fq__tag img{transform:none}
  .film .fq__tag b{left:30px;top:24px;font-size:11.5px}
}

/* ---------------- The end of the path: the footer ----------------
   There is no last sheet. The candle room stays, my note lies in the dark corner of it, and the painting comes to rest on the floor of the page, with the wolf asleep and the phone beside the candle. */
.film .foot{position:relative;z-index:4;display:flex;flex-direction:column;justify-content:space-between;gap:0;min-height:100svh;padding:0;background:none;color:var(--paper-ink);pointer-events:none}
.film .foot{--u:min(calc(100vw / 1440),calc(100svh / 900))}
.film .foot__top{position:relative;display:block;width:calc(560*var(--u));margin:calc(66*var(--u)) 0 0 calc(50% - 720*var(--u) + 182*var(--u));padding:calc(30*var(--u)) calc(38*var(--u)) calc(26*var(--u));background:url(art/who/card-back.webp) 0 0/100% 100% no-repeat;filter:drop-shadow(calc(8*var(--u)) calc(12*var(--u)) calc(14*var(--u)) rgba(0,0,0,.6));transform:rotate(-.8deg);pointer-events:auto}
.film .foot__top::after{content:"";position:absolute;inset:1.5%;background:linear-gradient(105deg,rgba(150,84,32,.86),rgba(226,160,90,.62) 58%,rgba(255,205,140,.46));mix-blend-mode:multiply;pointer-events:none}
.film .note__say{font:400 max(25px,calc(32*var(--u)))/1.05 "Meyer Hand","Instrument Serif",Georgia,serif;letter-spacing:.002em;margin-bottom:calc(10*var(--u));color:var(--pen,#2a1c10)}
.film .note__fields{column-gap:calc(14*var(--u))}
.film .field{position:relative;z-index:1;margin-bottom:calc(8*var(--u))}
.film .field label{margin-bottom:2px;color:#2a1c10}
.film .field input{min-height:44px;background:rgba(255,236,204,.62);box-shadow:inset 0 0 0 1px rgba(42,28,16,.34)}
.film .note-form .btn{position:relative;z-index:1}
.film .note-form .fine{position:relative;z-index:1;display:inline-block;margin:0 0 0 12px;color:#2a1c10}
.film .note__msg{position:relative;z-index:1}
.film .sent{position:relative;z-index:1;color:#2a1c10}
.film .foot__end{position:relative;display:block;padding:0 calc(50% - 720*var(--u) + 182*var(--u)) 14px;background:#060302;color:#e9dcc2;pointer-events:auto}
.film .foot__end::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(120*var(--u));background:linear-gradient(to top,#060302,rgba(6,3,2,0));pointer-events:none}
.film .foot__mark{display:block;width:calc(952*var(--u));max-width:100%;height:auto;margin:0}
.film .foot__mark text{fill:url(#fm)}
.film .foot__facts{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:calc(40*var(--u));align-items:start;margin-top:6px;padding-right:calc(150*var(--u));font-size:14px;line-height:1.35}
.film .foot__facts ul{margin:0;padding:0;list-style:none;white-space:nowrap}
.film .foot__facts a{padding:0;color:inherit;font-weight:600}
.film .foot__credit,.film .foot__updated{margin:0;font-size:13px;color:#b9a98e}
.film .foot__updated{white-space:nowrap}
@media (max-width:900px){
  .film .foot{--u:1px;display:block;min-height:0;padding-top:12svh}
  .film .foot__top{width:auto;max-width:560px;margin:0 12px;padding:30px 26px 28px;transform:rotate(-.5deg);background-size:100% 100%}
  @media (min-width:600px){.film .foot__top{margin:0 auto}}
  .film .note__say{font-size:1.75rem;margin-bottom:12px}
  .film .field input{min-height:48px}
  .film .note-form .fine{display:block;margin:8px 0 0}
  .film .foot__end{margin-top:calc(52svh);padding:0 var(--m) 74px}
  .film .foot__end::before{height:90px}
  .film .foot__mark{width:100%}
  .film .foot__facts{display:block;padding-right:0;margin-top:14px;font-size:1rem}
  .film .foot__facts a{display:inline-block;padding:8px 0;font-size:1.125rem}
  .film .foot__credit{margin-top:10px;font-size:.875rem}
  .film .foot__updated{margin-top:8px;font-size:.875rem}
}
.film .call__stick .hint--call{position:static;margin:14px 0 0;max-width:none}
.film .fq--card:has(summary:focus-visible){outline:3px solid var(--gold,#e6b450);outline-offset:3px}

/* The bench: the page's real parts on leaves of paper, pinned over the painting. It takes no pin of its own, so it goes by at the speed of the scroll, and the painting walks behind it. */
.wk-stop--made{display:block;padding:6svh 0 52svh}
.wb{position:relative;z-index:5;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;box-sizing:border-box;width:calc(var(--u)*1290);margin-left:max(150px,calc((100vw - var(--u)*1290)/2));align-items:start;font-size:max(15px,calc(var(--u)*16.5));line-height:1.36}
.wb-leaf{min-width:0;box-sizing:border-box;border:calc(var(--u)*40) solid transparent;border-image:url(art/wk/c-film.webp) 68 fill/1 stretch;color:var(--wk-ink)}
.wb h3{margin:0;font-size:calc(var(--u)*42);font-weight:600;letter-spacing:-.035em;line-height:1.02}
.wb h4{margin:calc(var(--u)*6) 0 calc(var(--u)*2);font:italic 400 calc(var(--u)*29)/1.06 "Instrument Serif",Georgia,serif;letter-spacing:0}
.wb p{margin:0;max-width:37em}
.wb-sub{margin:calc(var(--u)*10) 0 calc(var(--u)*16)!important;font:italic 400 calc(var(--u)*22)/1.16 "Instrument Serif",Georgia,serif}
.wb-head{grid-column:1/5;margin-top:calc(var(--u)*30)}
.wb-peel{grid-column:5/13}
.wb-frames{grid-column:1/8;margin-top:calc(var(--u)*-8)}
.wb-hair{grid-column:8/13;margin-top:calc(var(--u)*-26)}
.wb-join{grid-column:1/13;margin-top:calc(var(--u)*-10)}
.wb-pads{grid-column:1/13;margin-top:calc(var(--u)*-16);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);grid-template-rows:auto 1fr;gap:0 calc(var(--u)*24)}

/* the ledger: the real numbers, once */
.wb-ledger{margin:0;padding:0;border-top:1px solid rgba(32,20,12,.5)}
.wb-ledger div{display:grid;grid-template-columns:5.2em 1fr;gap:.5em;align-items:baseline;padding:calc(var(--u)*5) 0;border-bottom:1px solid rgba(32,20,12,.22)}
.wb-ledger dd{margin:0;font:italic 400 calc(var(--u)*29)/1 "Instrument Serif",Georgia,serif;font-variant-numeric:lining-nums;text-align:right}
.wb-ledger dt{font-size:max(14px,calc(var(--u)*15));line-height:1.2}
.wb .wk-watch{margin-top:calc(var(--u)*16);min-height:44px}

/* the stages */
.wb-stage{position:relative;overflow:hidden;background:#e9dcc0;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.wb-stage canvas,.wb-stage video,.wb-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.wb-stage canvas{opacity:0;transition:opacity .4s}
.wb--on .wb-stage canvas{opacity:1}
.js .wb-stage img{display:none}
.js .wb--flat .wb-stage img{display:block}
.wb--flat .wb-stage canvas{display:none}
.wb-gilt{box-sizing:border-box;aspect-ratio:16/9;border:calc(var(--u)*20) solid transparent;border-image:url(art/wk/frame-gilt.webp) 142 fill/1 stretch;background-clip:padding-box;box-shadow:0 6px 16px rgba(30,16,6,.34)}
.wb-frames .wb-pair{display:grid;grid-template-columns:42fr 58fr;gap:calc(var(--u)*12)}
.wb-frame,.wb-sheet{display:block;width:100%;height:calc(var(--u)*262);touch-action:pan-y;cursor:ew-resize;background:#efe4cc;box-shadow:inset 0 0 0 1px rgba(32,20,12,.26)}
.wb-sheet{cursor:pointer}

/* the rule: an ink line with ticks and a brass slide. The real range under it is for the keyboard. */
.wb-rule{position:relative;margin-top:calc(var(--u)*5)}
.wb-rail{--v:0;position:relative;height:44px;touch-action:pan-y;cursor:ew-resize}
.wb-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:9px;margin-top:-4px;background:linear-gradient(rgba(32,20,12,.75),rgba(32,20,12,.75)) 0 50%/100% 1.5px no-repeat,repeating-linear-gradient(90deg,rgba(32,20,12,.6) 0 1px,transparent 1px 10%)}
.wb-rail i{position:absolute;top:50%;left:calc(var(--v)*100%);width:15px;height:27px;margin:-14px 0 0 -7px;background:linear-gradient(90deg,#8a6236,#e6c477 42%,#c8974a 62%,#6d4a22);box-shadow:0 2px 4px rgba(30,16,6,.5),inset 0 0 0 1px rgba(60,36,14,.65)}
.wb-rail:hover i{background:linear-gradient(90deg,#9c6f3e,#f1d48a 42%,#dcab55 62%,#7c5428)}
.wb-key{position:absolute;left:0;top:0;width:100%;height:44px;margin:0;opacity:0;pointer-events:none}
.wb-rule:focus-within .wb-rail{outline:3px solid var(--gold);outline-offset:1px}
.wb-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:0 calc(var(--u)*16);margin-top:calc(var(--u)*-4)}
.wb-tabs button{min-height:44px;padding:0;border:0;color:var(--wk-soft);font:500 max(14px,calc(var(--u)*15))/1.1 Switzer,Arial,sans-serif;cursor:pointer;background:linear-gradient(transparent,transparent) 0 72%/100% 2px no-repeat}
.wb-tabs button:hover{color:var(--wk-ink)}
.wb-tabs button[aria-pressed=true]{color:var(--wk-ink);background-image:linear-gradient(var(--wk-hand),var(--wk-hand))}
.wb-count{margin-left:auto;font:italic 400 max(16px,calc(var(--u)*19))/1 "Instrument Serif",Georgia,serif;font-variant-numeric:lining-nums tabular-nums}

/* the hair */
.wb-hair .wb-gilt{aspect-ratio:8/5}
.wb-stage{--d:50%}
.wb-first{-webkit-mask-image:linear-gradient(90deg,#000 var(--d),transparent var(--d));mask-image:linear-gradient(90deg,#000 var(--d),transparent var(--d))}
.wb-cut{position:absolute;top:0;bottom:0;left:var(--d);width:2px;margin-left:-1px;background:var(--gold);box-shadow:0 0 0 1px rgba(40,24,10,.35)}
.wb-tag{position:absolute;left:8px;top:8px;padding:1px 7px 2px;background:#efe4cc;color:var(--wk-ink);font:italic 400 max(15px,calc(var(--u)*17))/1.1 "Instrument Serif",Georgia,serif}
.wb-tag--r{left:auto;right:8px}

/* the printer's proof */
.wb-two{display:grid;grid-template-columns:minmax(0,12fr) minmax(0,10fr);gap:calc(var(--u)*22);align-items:start}
.wb-proof{position:relative;margin:0;padding:calc(var(--u)*10) calc(var(--u)*12) calc(var(--u)*12);background:#f1e8d3;box-shadow:0 2px 6px rgba(30,16,6,.3),inset 0 0 0 1px rgba(32,20,12,.14)}
.wb-proof::before,.wb-proof::after{content:"";position:absolute;width:12px;height:12px;border:solid rgba(32,20,12,.55);border-width:1px 0 0 1px;left:4px;top:4px}
.wb-proof::after{left:auto;top:auto;right:4px;bottom:4px;border-width:0 1px 1px 0}
.wb-proof figcaption{margin:0 0 calc(var(--u)*6);padding-bottom:calc(var(--u)*4);border-bottom:1px solid rgba(32,20,12,.4);font:italic 400 max(15px,calc(var(--u)*17))/1.1 "Instrument Serif",Georgia,serif}
.wb-proof pre{margin:0;white-space:pre-wrap;overflow:hidden}
.wb-proof code{display:block;font:600 max(11px,calc(var(--u)*11.4))/1.42 "Courier New",Courier,ui-monospace,monospace;color:#2a1a10}
.wb-ln{position:relative;display:block;padding-left:2.5em;overflow-wrap:anywhere;transition:background-color .2s}
.wb-ln::before{content:attr(data-n);position:absolute;left:0;width:1.8em;text-align:right;color:#a01017;font-weight:400;opacity:.8}
.wb-ln.on{background:rgba(230,180,80,.3)}
.wb-note{display:block;padding-left:2.1em;margin:-.05em 0 .12em;color:#a01017;font:400 max(15px,calc(var(--u)*16.5))/1.1 "Meyer Hand","Instrument Serif",Georgia,serif;transform:rotate(-.5deg);transform-origin:0 50%}
.wb-more{display:none}

/* the pads */
.wb-grid{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*10)}
.wb-grid button{--p:0%;position:relative;display:block;min-height:calc(var(--u)*74);padding:calc(var(--u)*7) calc(var(--u)*9) calc(var(--u)*5);border:0;background:#efe4cc;color:var(--wk-ink);text-align:left;cursor:pointer;box-shadow:0 2px 0 rgba(60,36,14,.55),0 3px 6px rgba(30,16,6,.3),inset 0 0 0 1px rgba(32,20,12,.25);transition:transform .08s,box-shadow .08s}
.wb-grid button:hover{background:#f5ebd5}
.wb-grid button:active,.wb-grid button.on{transform:translateY(2px);box-shadow:0 0 0 rgba(60,36,14,.55),inset 0 0 0 1px rgba(32,20,12,.4),inset 0 0 0 2px var(--wk-gold)}
.wb-grid b{display:block;font:italic 400 max(17px,calc(var(--u)*20))/1 "Instrument Serif",Georgia,serif}
.wb-grid svg{display:block;width:100%;height:calc(var(--u)*30);margin-top:calc(var(--u)*5);fill:var(--wk-ink);background:linear-gradient(var(--wk-gold),var(--wk-gold)) var(--p) 0/2px 100% no-repeat}
.wb-grid .on svg{fill:var(--wk-hand)}

@media (max-width:1023px){
  .wb{display:flex;flex-direction:column;gap:0;width:auto;margin:0 -8px;font-size:15px}
  .wb-leaf{border-width:calc(var(--u)*28)}
  .wb-head,.wb-frames,.wb-hair,.wb-join,.wb-pads{margin-top:calc(var(--u)*-8)}
  .wb-pads{display:block}
  .wb-pads p{margin-bottom:10px}
  .wb h3{font-size:calc(var(--u)*30)}
  .wb h4{font-size:calc(var(--u)*25)}
  .wb-sub{font-size:calc(var(--u)*19)}
  .wb-ledger div{padding:3px 0}
  .wb-ledger dd{font-size:calc(var(--u)*24)}
  .wb-peel .wb-gilt{aspect-ratio:4/3}
  .wb-gilt{border-width:calc(var(--u)*10)}
  .wb-frame,.wb-sheet{height:calc(var(--u)*172)}
  .wb-two{display:block}
  .wb-proof{margin-top:12px}
  .wb-proof pre{max-height:calc(var(--u)*176)}
  .wb--all .wb-proof pre{max-height:none}
  .wb-more{display:block;min-height:44px;margin-top:4px;padding:0;border:0;background:none;color:var(--wk-hand);font:italic 400 18px/1 "Instrument Serif",Georgia,serif;cursor:pointer}
  .wb-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .wb-grid button{min-height:64px;padding:6px 6px 4px}
  .wb-grid svg{height:22px}
  .wb-frames .wb-tabs{display:grid;grid-template-columns:1fr 1fr;margin-top:0}
  .wb-frames .wb-tabs button{justify-self:start}
  .wb-count{grid-column:1/3;order:-1;margin-left:0;padding-top:2px}
}
.notaste .wb-leaf{border:1px solid #999;border-image:none;background:#fff;color:#333;padding:12px}
.notaste .wb-gilt{border:2px ridge #999;border-image:none;box-shadow:none}


/* The way round the page: the hero's second button, the Menu sheet, the paper that goes over on a jump, and the slip for someone coming back. */
.hero__do{display:flex;flex-wrap:wrap;gap:8px}
.btn--plain{background:none;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn--plain:hover{background:none;box-shadow:inset 0 0 0 3px currentColor}
.film .hero__slip{padding-bottom:28px}
.film .hero__slip .btn{padding:0 18px;white-space:nowrap}
@media (max-width:700px){.film .hero__slip .btn{padding:0 13px}.hero__do{flex-wrap:nowrap}.film .hero__slip .btn:first-child{flex:1 1 auto}}
@media (max-width:374px){.hero__do{flex-wrap:wrap}}
.film .hero__slip .btn--plain{background:none;color:var(--paper-ink)}
.notaste .btn--plain{box-shadow:none}

.mn{--leaf:clamp(20px,1.8vw,30px);position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:rgba(14,10,7,0);color:var(--wk-ink);touch-action:none;transition:background .18s ease}
.mn.on{background:rgba(14,10,7,.5)}
.mn:focus{outline:0}
.mn__leaf{position:absolute;top:6px;right:max(calc(var(--m) - var(--leaf) + 8px),4px);box-sizing:border-box;width:min(clamp(392px,26vw,500px),calc(100vw - 8px));max-height:calc(100dvh - 12px);display:flex;flex-direction:column;padding:0 10px 4px;overflow:hidden;border:var(--leaf) solid transparent;border-image:url(art/wk/c-film.webp) 68 fill/1 stretch;background:#dcbf95 padding-box;font-size:var(--body);line-height:1.25;opacity:0;transform:translate3d(0,-14px,0) rotate(.5deg);transform-origin:90% 0;transition:opacity .16s ease,transform .18s var(--out)}
.mn.on .mn__leaf{opacity:1;transform:none}
.reduce .mn__leaf,.reduce .mn{transition:none}
.mn :focus-visible{outline:3px solid var(--wk-hand);outline-offset:-3px}
.mn__top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.mn__in{flex:1 1 auto;min-height:0;margin-right:-6px;padding-right:6px;overflow:hidden auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:rgba(74,54,38,.5) transparent}
.mn__h{margin:0;font:italic 400 clamp(1.25rem,1.1rem + .4vw,1.5rem)/1.1 "Instrument Serif",Georgia,serif;letter-spacing:0;color:var(--wk-soft)}
.mn__x{min-height:44px;padding:0 0 0 14px;border:0;background:none;color:var(--wk-ink);font-weight:500;font-size:var(--small);text-decoration:underline;text-underline-offset:.22em;cursor:pointer}
.mn__x:hover{color:var(--wk-hand)}
.mn__reach{display:grid;gap:6px;margin:4px 0 0}
.mn__do{display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box;width:100%;min-height:54px;padding:6px 14px;border:0;background:var(--wk-ink);color:#fbf1dc;font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background .14s ease}
.mn__do:hover{background:#5a2f1c}
.mn__do:active{background:#3a2010}
.mn__do b{font-weight:600}
.mn__do span{font-size:var(--small);font-variant-numeric:tabular-nums;opacity:.86}
.mn__do[aria-expanded=true]{background:#5a2f1c}
.mn__note{margin:8px 0 2px;padding:12px 0 2px;border-top:1px solid rgba(32,20,12,.32)}
.mn .note__say{display:none}
.mn .note__fields{grid-template-columns:1fr 1fr;column-gap:10px}
.mn .field{margin-bottom:8px}
.mn .field:last-child{grid-column:1/-1}
.mn .field label{margin-bottom:2px;color:var(--wk-ink);font-size:var(--small)}
.mn .field input{min-height:46px;padding:0 10px;background:rgba(255,246,228,.72);box-shadow:inset 0 0 0 1px rgba(42,28,16,.42);color:var(--wk-ink);font-size:max(16px,var(--body))}
.mn .note-form .btn{width:100%;min-height:50px;background:var(--wk-ink);color:#fbf1dc}
.mn .note-form .btn:hover{background:#5a2f1c}
.mn .note-form .fine{display:block;margin:6px 0 0;color:var(--wk-soft)}
.mn .note__msg{color:var(--wk-hand)}
.mn .sent__head{font-size:var(--lead);letter-spacing:-.02em;margin-bottom:6px}
.mn nav{margin-top:14px}
.mn__list{margin:2px 0 0}
.mn__list a{display:flex;align-items:center;min-height:46px;border-bottom:1px solid rgba(32,20,12,.24);font:italic 400 clamp(1.625rem,1.4rem + .6vw,2rem)/1.05 "Instrument Serif",Georgia,serif;color:var(--wk-ink);text-decoration:none;transition:color .14s ease,padding-left .18s var(--out)}
.mn__list li:last-child a{border-bottom:0}
.mn__list a:hover{color:var(--wk-hand);padding-left:6px}
.mn__quiet{display:block;margin:6px 0 0;min-height:44px;color:var(--wk-soft)}
.mn__quiet[hidden]{display:none}
.landed:focus{outline:0}

.leap{position:fixed;inset:0;z-index:60;width:100%;height:100%;height:100lvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:visible;background:#e3dfce;color:var(--paper-ink);display:none;place-items:center;transform:translate3d(0,calc(100% + 16vw),0);will-change:transform;touch-action:none}
.leap:popover-open,.leap.on{display:grid}
.leap::before,.leap::after{content:"";position:absolute;left:0;width:100%;aspect-ratio:2560/263;background:url(art/tear.webp) 0 0/100% 100% no-repeat;pointer-events:none}
.leap::before{bottom:calc(100% - 2px)}
.leap::after{top:calc(100% - 2px);transform:scale(-1,-1)}
.leap p{margin:0;font:italic 400 clamp(2.5rem,1.6rem + 4vw,6rem)/1 "Instrument Serif",Georgia,serif;letter-spacing:-.01em}

.back{position:fixed;top:58px;right:var(--m);z-index:29;box-sizing:border-box;width:min(23.5rem,calc(100vw - 2 * var(--m)));padding:10px 40px 12px 14px;background:var(--paper);color:var(--paper-ink);box-shadow:0 8px 22px rgba(10,6,4,.38);opacity:0;transform:translate3d(0,-10px,0);transition:opacity .28s ease,transform .3s var(--out)}
.back.on{opacity:1;transform:none}
.back[hidden]{display:none}
.back__say{font:italic 400 1.5rem/1.05 "Instrument Serif",Georgia,serif}
.back__do{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:6px}
.back__go{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;background:var(--paper-ink);color:var(--paper);font-size:var(--small);font-weight:500;text-decoration:none;white-space:nowrap}
.back__go:hover{background:#2b2d38}
.back__go[hidden]{display:none}
.back__go--plain{padding:0 2px;background:none;color:var(--paper-ink);text-decoration:underline;text-underline-offset:.22em}
.back__go--plain:hover{background:none;color:var(--red)}
.back__x{position:absolute;right:0;top:0;width:44px;height:44px;border:0;background:none;color:var(--paper-ink);font-size:1.5rem;line-height:1;cursor:pointer}
.back__x:hover{color:var(--red)}
.back :focus-visible{outline:3px solid var(--red);outline-offset:1px}