/* Family of Form: an architectural model. A pale wall, concrete, a thin line and pen.
   The red acrylic is the only colour here and it stays in the product. One dark passage: in through the King's hole,
   out as the black sheet is drawn off the frame's open side. */

/* The statement gives up a little scroll here, so the reel can run at a walk. */
.say{height:170svh}

/* ---- The reel ---- */
.sheet{--h:min(56svh,40vw);--gap:clamp(36px,4.6vw,88px);height:650svh}
.sheet .reel__pin{align-items:stretch}
.sheet__track{position:relative;height:100%;gap:var(--gap)}
.sheet .reel__head{align-self:center}
.sheet .reel__item{height:var(--h);align-self:center}
.sheet .reel__item.tall{height:calc(var(--h)*1.16)}
.sheet .reel__item:focus-visible{outline:1px solid var(--w-ink);outline-offset:4px}
.sheet h3{margin:0;font-weight:400;font-size:clamp(28px,3.4vw,60px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
/* Pen on the wall. The line carries its own alpha, so the wall and its lamp stay under it and there is no paper to see. */
.sheet .ink{background:none;isolation:auto}
.sheet .ink img,.sheet .ink:hover img,.sheet .ink:focus-within img,.sheet .ink.is-on img{filter:none;mix-blend-mode:normal}
.sheet .ink+.ink{margin-left:calc(var(--gap)*-.5)}

/* The turn: one line, redrawn by the scroll from a vase into a frame. */
.turn{flex:none;height:100%;display:flex;align-items:center;gap:clamp(24px,3.6vw,64px)}
.turn__line{flex:none;height:var(--h);width:auto;overflow:visible;fill:none;stroke:var(--w-ink);stroke-width:.24;stroke-linejoin:round;stroke-linecap:round}
.turn__line path{stroke-dasharray:1;stroke-dashoffset:var(--d,0)}
.turn__say{width:min(34vw,12em);font-size:clamp(28px,3.4vw,60px);opacity:var(--o,1)}
.turn p{margin:clamp(12px,2.4svh,24px) 0 0;font-size:var(--cap);line-height:1.35;letter-spacing:-.005em;color:var(--w-ink2);text-wrap:balance}

/* Six blanks on one line. What the hand could not read, then what it can. */
.read{--g:clamp(10px,1.7vw,32px);--c:min((100vw - 2*var(--gut) - 5*var(--g))/6,44svh*.5253);flex:none;box-sizing:border-box;width:calc(100vw - 2*var(--gut));height:100%;margin:0 var(--gut);display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(20px,4svh,44px);padding:clamp(84px,12svh,120px) 0 clamp(30px,6svh,64px)}
.read__say{position:relative;flex:1;min-height:0}
.read__flaw,.read__tops{position:absolute;inset:0 0 auto 0;opacity:var(--o,0)}
.read__flaw ul{list-style:none;margin:clamp(12px,2.4svh,24px) 0 0;padding:0;font-size:clamp(16px,1.42vw,24px);line-height:1.42;letter-spacing:-.012em}
.read__flaw li{opacity:var(--o,0)}
.read__tops p{margin:clamp(12px,2.4svh,24px) 0 0;font-size:var(--cap);line-height:1.35;letter-spacing:-.005em;color:var(--w-ink2)}
.read__row{display:grid;grid-template-columns:repeat(6,var(--c));gap:clamp(20px,3svh,30px) var(--g)}
.top{margin:0}
.top svg{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:var(--w-ink)}
.top path{stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.top__up{transform:translateY(calc((1 - var(--p,1))*20px))}
/* A pointer on a top lifts it a millimetre and a half off the frame. */
.top__lift{transition:transform .9s var(--ease)}
@media (hover:hover){.top:hover .top__lift{transform:translateY(-1.5px)}}
.top figcaption{margin-top:clamp(8px,1.4svh,14px);font-size:var(--cap);line-height:1;letter-spacing:-.008em;white-space:nowrap}
/* A blank has no height of its own yet: the number arrives with the top. */
.top figcaption span{color:var(--w-ink2);margin-left:.25em;font-variant-numeric:tabular-nums;opacity:var(--p,1)}

/* The King in elevation, with the hole cut through to the dark. */
.king{--kh:min(72svh,120vw);flex:none;align-self:center;width:calc(var(--kh)*52/98);height:var(--kh);margin-left:calc(var(--gap)*.6)}
.king svg{display:block;height:100%;width:auto;overflow:visible;fill:none;stroke:var(--w-ink)}
.king path{stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.king .king__hole{fill:var(--night);stroke:none}
.king__over{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none;overflow:hidden}
.king__over path{fill:none;stroke:var(--w-ink);stroke-width:1;stroke-linejoin:round}
html.fall .king__over{display:block}
html.fall .king svg{visibility:hidden}

/* ---- Random and Stable: the dark passage. Plain black with a lamp of its own. It lies over the swap, and the way out is
   that black drawn off to the right along the card's own rail, its edge a soft tide a sixth of the screen wide (chess.js). ---- */
.rs{position:relative;z-index:3;pointer-events:none}
.rs__pin{position:relative;min-height:100svh;overflow:hidden}
html.fall{--a:1;--f:.6;--r:1.06;--t:.7}
html.fall .rs{z-index:5;height:calc((var(--a) + var(--f) + var(--r) + var(--t) + 1)*100svh);margin-top:calc((var(--a) + var(--f) + 1)*-100svh)}
html.fall .rs__pin{position:sticky;top:0;height:100svh;clip-path:path("M0 0Z")}
.rs__lamp{position:absolute;left:0;top:0;width:220svh;height:220svh;margin:-110svh 0 0 -110svh;max-width:none;will-change:transform;transform:translate3d(var(--lx,50vw),var(--ly,42svh),0)}
.rs__words{position:absolute;left:var(--gut);right:var(--gut);top:calc(50% - .72em);margin:0;display:flex;align-items:baseline;gap:.24em;font-size:clamp(44px,9vw,min(190px,20svh));font-weight:300;line-height:1;letter-spacing:-.042em;white-space:nowrap;color:var(--w-ink);opacity:var(--o,1)}
.rs__r{display:inline-block}
.rs__r i{display:inline-block;font-style:normal;will-change:transform;transform:translate3d(calc(var(--x,0)*1px),calc(var(--y,0)*1px),0) rotate(calc(var(--a,0)*1deg))}
.rs__and{color:var(--w-ink2)}
.rs__l{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(26px,5svh,52px);margin:0;font-size:clamp(17px,1.5vw,25px);line-height:1.25;letter-spacing:-.012em;color:var(--w-ink2);opacity:var(--o,0)}

/* ---- The swap: the live stage, standing on the wall ---- */
.swapwrap{position:relative;z-index:4;height:165svh}
html.fall .swapwrap{height:calc(165svh + var(--t)*100svh);margin-top:calc((var(--t) + 1)*-100svh)}
.swap{--w:clamp(48px,min(4.4vw,6.4svh),78px);position:sticky;top:0;height:100svh;min-height:620px;overflow:clip;color:var(--w-ink);isolation:isolate}
.swap.is-off{pointer-events:none}
.swap__poster{position:absolute;inset:0;z-index:0;transition:opacity .9s linear}
.swap__poster img{position:absolute;left:64%;top:14svh;width:auto;max-width:none;height:62svh;transform:translateX(-50%)}
.swap--live .swap__poster,.swap--flat .swap__poster{opacity:0;pointer-events:none}
/* The stage is an opaque canvas on a fixed wall. Its top and foot dissolve into the field, so it never shows an edge as it scrolls away. */
.swap__stage{--foot:80%;position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .9s linear;-webkit-tap-highlight-color:transparent;-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 var(--foot),transparent 98%);mask-image:linear-gradient(transparent,#000 8%,#000 var(--foot),transparent 98%)}
.swap--live .swap__stage,.swap--flat .swap__stage{opacity:1}
.swap__stage>canvas{display:block;width:100%!important;height:100%!important}
.swap--over .swap__stage{cursor:grab}
.swap--drag .swap__stage{cursor:grabbing}
.swap__head{position:absolute;z-index:2;left:var(--gut);top:clamp(84px,15svh,140px);pointer-events:none}
.swap__head h2{margin:0;font-weight:400;font-size:clamp(28px,3.4vw,60px);line-height:1.08;letter-spacing:-.03em}
.swap__head p{margin:clamp(12px,2.2svh,22px) 0 0;font-size:var(--cap);letter-spacing:-.005em;color:var(--w-ink2)}

.swap__pieces{position:absolute;z-index:5;left:var(--gut);bottom:clamp(26px,5svh,52px);display:grid;gap:clamp(0px,.4svh,4px)}
.pc{display:flex;align-items:center;gap:12px;min-height:clamp(30px,4.2svh,38px);padding:0 10px 0 0;font-size:var(--cap);letter-spacing:-.008em;color:var(--w-ink2);transition:color .3s linear}
.pc svg{width:clamp(30px,2.5vw,38px);height:auto;fill:none;stroke:currentColor}
.pc svg path{stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.pc:hover,.pc[aria-checked=true]{color:var(--w-ink)}
.pc:focus-visible{outline:1px solid var(--w-ink);outline-offset:2px}
.swap__now{position:absolute;z-index:5;right:var(--gut);bottom:clamp(26px,5svh,52px);margin:0;font-size:var(--cap);line-height:1;letter-spacing:-.005em;color:var(--w-ink2);white-space:nowrap;pointer-events:none}

/* The menu is a rail of the real sheets, standing on one line. The two real sides are full size; the concept cards are small,
   and stay cold until you reach for one. The rail lifts a little around the pointer, like keys under a finger. */
.deck{position:absolute;z-index:3;left:64%;bottom:clamp(26px,5svh,52px);display:flex;align-items:flex-end;gap:clamp(3px,.4vw,6px);transform:translateX(-50%);touch-action:pan-y}
.dk{--r:0;--s:0;flex:none;width:calc(var(--w)*.6);padding:0;aspect-ratio:2/3;transform:translateY(calc(var(--r)*-5px + var(--s)*-10px));transition:transform .9s var(--ease)}
.dk--real{width:var(--w)}
.dk--real+.dk:not(.dk--real){margin-left:calc(var(--w)*.28)}
.dk canvas{display:block;width:100%;height:100%;filter:grayscale(1) contrast(1.04);transition:filter .6s linear}
.dk--real canvas,.dk:hover canvas,.dk:focus-visible canvas,.dk.dk--up canvas,.dk[aria-checked=true] canvas{filter:none}
.dk[aria-checked=true],.dk--up{--s:1}
.dk:focus-visible{outline:1px solid var(--w-ink);outline-offset:2px}

.flat{position:absolute;left:64%;top:44%;height:62%;aspect-ratio:1/2;transform:translate(-50%,-50%)}
.flat__f{position:absolute;inset:0;width:100%;height:100%;fill:#c9c6c0}
.flat__c{position:absolute;left:20%;top:30%;width:80%;height:60%;transition:transform .4s var(--ease),opacity .32s linear}
.flat__c.out{transform:translateX(60%);opacity:0}

/* ---- The passages after the swap share one voice: a heading at statement size, one line under it, captions at --cap. ---- */
.touch h2,.duo h2,.dims__h,.line__h,.cast__h{margin:0;font-weight:400;font-size:clamp(28px,3.4vw,60px);line-height:1.08;letter-spacing:-.03em}
.touch__say p,.duo__say p{margin:clamp(12px,2.2svh,22px) 0 0;max-width:24em;color:var(--w-ink2);font-size:clamp(16px,1.3vw,21px);line-height:1.4;letter-spacing:-.008em}
.use figcaption,.duo__cap,.line figcaption,.cast figcaption,.dims figcaption{margin-top:12px;font-size:var(--cap);letter-spacing:-.005em;color:var(--w-ink2)}

/* ---- Tops by touch. Six tops out of order, unseen: a soft shape and nothing more. The fingertip (or the pointer) carries a small
   round window in which the profile is drawn in ink; after a moment's contact the top is read, and only then is it named. ---- */
.touch{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);align-items:end;padding:clamp(90px,15svh,170px) var(--gut) clamp(70px,12svh,140px)}
.touch__say{grid-column:1/8}
.feels{--tip:clamp(46px,5.4vw,84px);grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:clamp(44px,9svh,100px)}
.feel{display:block;width:100%;padding:0 clamp(4px,1vw,14px);text-align:left;touch-action:pan-y;cursor:pointer;-webkit-tap-highlight-color:transparent}
.feel__f{position:relative;display:block;aspect-ratio:54/30;-webkit-mask-image:linear-gradient(#000 64%,transparent 98%);mask-image:linear-gradient(#000 64%,transparent 98%)}
.feel__s{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.feel__s--dim{fill:rgba(20,19,17,.1);filter:blur(clamp(5px,.7vw,10px));transition:opacity 1s var(--ease)}
.feel__s--lit{fill:none;stroke:var(--w-ink);-webkit-mask-image:radial-gradient(circle var(--tip) at var(--mx,-200px) var(--my,-200px),#000 30%,transparent 100%);mask-image:radial-gradient(circle var(--tip) at var(--mx,-200px) var(--my,-200px),#000 30%,transparent 100%)}
.feel__s--lit path{stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:stroke-width .3s}
.feel.is-read .feel__s--dim{opacity:0}
.feel.is-read .feel__s--lit{-webkit-mask-image:none;mask-image:none}
.feel.hot .feel__s--lit path{stroke-width:2.2}
.feel__n{display:block;padding-top:14px;font-size:var(--cap);line-height:1;letter-spacing:-.008em;white-space:nowrap;opacity:0;transition:opacity .7s}
.feel__n span{color:var(--w-ink2);margin-left:.25em;font-variant-numeric:tabular-nums}
.feel.is-read .feel__n{opacity:1}
.feel:focus-visible{outline:1px solid var(--w-ink);outline-offset:6px}
/* Six of six: the family, tallest first. */
.feels__fam{grid-column:9/-1;grid-row:1;list-style:none;margin:0;padding:0;font-size:var(--cap);font-variant-numeric:tabular-nums;color:var(--w-ink2);opacity:0;visibility:hidden;transition:opacity .9s var(--ease) .5s,visibility 0s .5s}
.feels__fam li{display:flex;justify-content:space-between;gap:1.6em;padding:.42em 0;border-top:1px solid var(--w-line);transition:color .3s}
.feels__fam li:last-child{border-bottom:1px solid var(--w-line)}
.feels__fam b{font-weight:400;color:var(--w-ink)}
.feels__fam li:hover{color:var(--w-ink)}
.touch.done .feels__fam{opacity:1;visibility:visible}

/* ---- Two sides. Both photographs print on the wall itself (nothing between them and the field makes a layer of its own, and the
   divide is cut on the pictures, not on a box round them), so the lamp passes under the row unbroken. The studio ground is a hair
   under white and falls off at the foot and the right of the frame: lifted to white and eased out there, only the pieces print. ---- */
.duo{position:relative;padding:clamp(70px,12svh,140px) var(--gut) clamp(50px,8svh,100px)}
.duo__stage{--x:50%;position:relative;margin-top:clamp(20px,4svh,50px);aspect-ratio:6336/2688;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.duo__a,.duo__b{position:absolute;inset:0}
.duo__stage img{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;mix-blend-mode:multiply;filter:brightness(1.05);--m:linear-gradient(#000 80%,transparent 99%),linear-gradient(90deg,#000 95%,transparent);-webkit-mask-image:var(--m);mask-image:var(--m);-webkit-mask-composite:source-in;mask-composite:intersect}
.duo__a img{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.duo__b img{clip-path:inset(0 0 0 var(--x))}
.duo__rule{position:absolute;top:4%;bottom:14%;left:var(--x);width:1px;margin-left:-.5px;background:var(--w-ink);pointer-events:none}
.duo__rule::after{content:"";position:absolute;left:50%;bottom:-13px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--w-ink)}
.duo__range{position:absolute;inset:auto 0 0;width:100%;height:1px;margin:0;opacity:0;appearance:none;-webkit-appearance:none;pointer-events:none}
.duo__stage:has(.duo__range:focus-visible) .duo__rule{width:3px;margin-left:-1.5px}
.duo__cap{margin:0}

/* ---- In play: a game fills the screen, then plain rectangles follow with room around them. ---- */
.grow--duel{z-index:1;height:165svh}
.use{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);padding:clamp(70px,12svh,140px) var(--gut) clamp(50px,8svh,100px)}
.use figure{margin:0}
.use img{display:block;width:100%;height:auto}
.use__a{grid-column:1/8}
.use__b{grid-column:9/-1;margin-top:20svh!important}
.use__d{grid-column:1/5;margin-top:10svh!important}
.use__c{grid-column:6/-1;margin-top:26svh!important}

/* ---- Dimensions. The elevations are projected from the CAD meshes: thin ink on the wall, millimetres beside them. Pick a piece
   in the table and its elevations are drawn instead. ---- */
.dims{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);align-items:end;padding:clamp(90px,15svh,170px) var(--gut) clamp(70px,12svh,140px)}
.dims__h{grid-column:1/-1;margin-bottom:clamp(30px,6svh,70px)}
.dims__d{grid-column:1/8;margin:0}
.dims__views{display:flex;align-items:flex-end;gap:clamp(8px,2.4vw,44px)}
.draw{flex:none;display:block;height:clamp(540px,66svh,780px);width:auto;overflow:visible;fill:none;stroke:var(--w-ink);stroke-width:1;stroke-linejoin:round}
.draw path,.draw rect{vector-effect:non-scaling-stroke}
.draw .dp{display:none}
.draw .dp.on{display:inline}
.draw .df{stroke-width:1.3}
.draw .dt,.draw .dx{stroke:var(--w-ink2);stroke-width:.8}
.draw .dc{fill:rgba(20,19,17,.045)}
.draw .dl path{stroke-width:.8}
.draw text{fill:var(--w-ink);stroke:none;font-family:var(--sans);font-size:3.6px;letter-spacing:-.01em}
.dims__t{grid-column:9/-1}
.fam{width:100%;border-collapse:collapse;font-size:var(--cap);font-variant-numeric:tabular-nums;letter-spacing:-.008em}
.fam th,.fam td{padding:.5em 0;text-align:right;font-weight:400;border-top:1px solid var(--w-line);white-space:nowrap;vertical-align:bottom;color:var(--w-ink2);transition:color .3s}
.fam thead th{border-top:0;padding-bottom:.8em}
.fam tbody th{text-align:left}
.fam__p{display:flex;align-items:flex-end;gap:12px;min-height:44px;color:inherit;font:inherit;letter-spacing:inherit}
.fam__p svg{flex:none;height:clamp(32px,4.6svh,44px);width:auto;overflow:visible;fill:none;stroke:currentColor}
.fam__p svg path{stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.fam tr.on th,.fam tr.on td,.fam tr:hover th,.fam tr:hover td{color:var(--w-ink)}
.fam__p:focus-visible{outline:1px solid var(--w-ink);outline-offset:3px}
.dims__n{margin:12px 0 0;color:var(--w-ink2);font-size:var(--cap);letter-spacing:-.005em}
.dims__s{margin:clamp(28px,5svh,52px) 0 0;font-size:var(--cap);letter-spacing:-.008em}
.dims__s div{display:flex;justify-content:space-between;gap:1em;padding:.5em 0;border-top:1px solid var(--w-line)}
.dims__s div:last-child{border-bottom:1px solid var(--w-line)}
.dims__s dt{color:var(--w-ink2)}
.dims__s dd{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---- From a deck of cards: what happened between the sketches and the pour. Black and white prints on the wall, until you look at one. ---- */
.line{position:relative;z-index:1;padding:clamp(90px,15svh,170px) var(--gut) clamp(50px,8svh,100px)}
.line__s{--h:clamp(170px,26svh,280px);list-style:none;margin:clamp(30px,6svh,70px) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(44px,8svh,80px) clamp(20px,3vw,56px)}
.line__s li{flex:none;max-width:100%}
.line__f{margin:0;position:relative}
.line__f picture{display:block;background:var(--w-bg);isolation:isolate}
.line__f img{display:block;height:var(--h);width:auto;max-width:100%;object-fit:contain;filter:grayscale(1) contrast(1.08) brightness(1.03);mix-blend-mode:multiply;transition:filter .6s var(--ease)}
.line__f:hover img,.line__f:focus-visible img,.line__f.is-on img{filter:none;mix-blend-mode:normal}
.line__f:focus-visible{outline:1px solid var(--w-ink);outline-offset:4px}
.line figcaption{white-space:nowrap}
.mould{display:block;width:min(calc(var(--h)*2.14),calc(100vw - 2*var(--gut)));height:auto;overflow:visible}
.mould path,.mould rect{vector-effect:non-scaling-stroke}
.mould__line,.mould__void,.mould__cast,.mould__block{stroke:var(--w-ink);stroke-width:1;stroke-linejoin:round}
.mould__line{fill:none}
.mould__void{fill:var(--w-bg)}
.mould__cast{fill:#c9c6c0}
.mould__hatch{stroke:var(--w-ink2);stroke-width:.42;vector-effect:none!important}

/* ---- As cast: the real things. The six were cut out of their photograph, so they print on the wall; the other two are plain rectangles. ---- */
.cast{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);padding:clamp(90px,15svh,170px) var(--gut) clamp(60px,10svh,120px)}
.cast__h{grid-column:1/-1;margin-bottom:clamp(30px,6svh,70px)}
.cast figure{margin:0}
.cast img{display:block;width:100%;height:auto}
.cast__a{grid-column:3/11}
.cast__a img{mix-blend-mode:multiply}
.cast__b{grid-column:2/6;margin-top:clamp(60px,11svh,120px)!important}
.cast__c{grid-column:7/-1;margin-top:clamp(110px,20svh,220px)!important}

/* ---- Closing ---- */
.last{position:relative;z-index:1;display:flex;align-items:center;min-height:46svh;padding:0 var(--gut)}
.last__t{margin:0;font-weight:400;font-size:clamp(29px,min(4vw,7.8svh),74px);line-height:1.12;letter-spacing:-.03em;color:var(--w-ink)}

@media (max-width:900px){
  .touch__say{grid-column:1/-1}
  .feels{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .feels__fam{grid-column:1/-1;grid-row:auto;margin-top:clamp(30px,5svh,50px)}
  .dims__d,.dims__t{grid-column:1/-1}
  .dims__t{margin-top:clamp(44px,8svh,80px)}
  .cast__a{grid-column:1/-1}
  .cast__b{grid-column:1/8}
  .cast__c{grid-column:3/-1;margin-top:clamp(50px,9svh,90px)!important}
  .use__a{grid-column:1/-1}
  .use__b{grid-column:5/-1;margin-top:12svh!important}
  .use__d{grid-column:1/9;margin-top:12svh!important}
  .use__c{grid-column:1/-1;margin-top:12svh!important}
}
/* A tall screen keeps a quarter of the game's width: the hand and the piece it moves. */
@media (max-aspect-ratio:1/1){.grow--duel .grow__win img{object-position:42% 50%}}

/* ---- Tablet ---- */
@media (max-width:1100px){.deck{left:60%}}
/* Here the rail reaches the gutter and a long card name would run into it: the name stands clear above the rail. */
@media (min-width:721px) and (max-width:1180px) and (min-height:521px){.swap__now{bottom:calc(clamp(26px,5svh,52px) + var(--w)*1.5 + 18px)}}
@media (max-width:900px){
  .swap__poster img,.flat{left:50%}
  .swap__head{right:var(--gut)}
  .deck{left:50%}
}
@media (min-width:721px) and (max-aspect-ratio:1/1){
  .sheet{--h:min(44vw,40svh)}
  .read{--c:min((100vw - 2*var(--gut) - 2*var(--g))/3,14svh)}
  .read__row{grid-template-columns:repeat(3,var(--c))}
}

/* ---- Phone ---- */
@media (max-width:720px){
  .dims__views{flex-direction:column;align-items:flex-start;gap:28px}
  .draw{height:auto;width:100%}
  .draw--side{width:66%}
  .line__s{--h:clamp(150px,22svh,200px)}
  .sheet{--h:38svh;--gap:30px;height:560svh}
  .sheet .reel__head{width:min(72vw,7em)}
  .sheet .reel__item.tall{height:calc(var(--h)*1.2)}
  .turn{flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;width:calc(100vw - 2*var(--gut))}
  .turn__line{height:min(44svh,92vw)}
  .turn__say{width:auto}
  .read{--c:min((100vw - 2*var(--gut) - 2*var(--g))/3,11.6svh);--g:14px;justify-content:flex-start;gap:clamp(14px,2.4svh,24px);padding:clamp(72px,10svh,92px) 0 clamp(20px,3svh,30px)}
  .read__say{flex:none;height:clamp(164px,21svh,190px)}
  .read__row{grid-template-columns:repeat(3,var(--c));gap:12px var(--g)}
  .top figcaption span{display:block;margin:5px 0 0}
  .king{--kh:min(60svh,120vw);margin-left:0}

  .rs__words{top:calc(50% - 2.1em);display:block;font-size:min(17.6vw,11svh);line-height:1.08}
  .rs__r,.rs__and,.rs__s{display:block}

  .swap{--w:calc((100vw - var(--gut)*2 - 36px)/6.92);height:100svh;min-height:600px}
  .swap__stage{--foot:88%}
  .swap__head{top:64px}
  .deck{bottom:20px;gap:3px}
  .swap__pieces{left:var(--gut);right:var(--gut);bottom:calc(var(--w)*1.5 + 34px);grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  .pc{flex-direction:column;align-items:flex-start;gap:0;min-height:44px;padding:6px 0}
  .pc svg{width:100%}
  .pc span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .swap__now{right:var(--gut);bottom:auto;top:calc(64px + 2.16*28px + clamp(12px,2.2svh,22px));line-height:1.55}
  .swap__poster{top:150px;bottom:calc(var(--w)*1.6 + 72px)}
  .swap__poster img{top:0;height:100%}

  .duo__stage{margin-left:calc(var(--gut)*-1);margin-right:calc(var(--gut)*-1)}
  .last{min-height:46svh}
}

/* Touch: each card and each piece owns the rail up to halfway to its neighbours, and reaches past its own edge where nothing else is,
   so no tap lands in a gap and none is taken by the wrong neighbour. The areas are transparent and the layout does not move. */
@media (pointer:coarse){
  .dk,.pc{position:relative}
  .dk::after,.pc::after{content:"";position:absolute}
  .dk::after{inset:-12px calc(clamp(3px,.4vw,6px)*-.5) -14px}
  .dk--real+.dk--real::after{right:calc(clamp(3px,.4vw,6px)*-.5 - var(--w)*.14)}
  .dk--real+.dk:not(.dk--real)::after{left:calc(clamp(3px,.4vw,6px)*-.5 - var(--w)*.14)}
  .dk:first-child::after{left:-10px}
  .dk:last-child::after{right:-10px}
  .pc::after{inset:calc(clamp(0px,.4svh,4px)*-.5) 0 calc(clamp(0px,.4svh,4px)*-.5) -12px}
  .pc:first-child::after{top:-10px}
  .pc:last-child::after{bottom:-10px}
}
@media (pointer:coarse) and (max-width:720px){
  /* The pieces stand in one row of six, each already 44px tall: they only close the gaps. The cards stop short of the pieces above. */
  .dk::after{inset:-8px -1.5px -14px}
  .dk--real+.dk--real::after{right:calc(-1.5px - var(--w)*.14)}
  .dk--real+.dk:not(.dk--real)::after{left:calc(-1.5px - var(--w)*.14)}
  .dk:first-child::after{left:-10px}
  .dk:last-child::after{right:-10px}
  .pc::after,.pc:first-child::after,.pc:last-child::after{inset:0 -3px}
}

/* The narrowest phones: the instruction wraps, so a long card name has its side of the line. */
@media (max-width:380px){.swap__head p{max-width:11em}}

/* Short windows: the stage takes the window, not its own minimum. */
@media (max-height:700px) and (min-width:721px){.swap{min-height:0}}
@media (max-height:520px){
  /* No height for text above the row: it stands beside it. */
  .read{--g:10px;--c:min((100vw - 2*var(--gut))*.62/6 - var(--g),38svh*.5253);flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--g)}
  .read__say{flex:none;width:34%;height:auto;align-self:stretch}
  .read__row{grid-template-columns:repeat(6,var(--c));gap:0 var(--g)}
  .top figcaption span{display:none}
  .swap{min-height:0}
  .swap__head p{display:none}
  .pc{min-height:28px}
  .pc svg{width:28px}
  .swap__poster{top:0;bottom:0}
}

/* The sheet's edge crosses the nav: half of it would be on the wrong ground, so it waits. So do the swap's words and controls: no edge,
   soft or hard, is ever laid across a letter or a card. --clear is set from the scroll in chess.js: it falls to nothing before the
   sheet's edge can reach them, and comes back once it has passed the last of them. */
html[data-page=chess] .nav{transition:color .4s,transform .55s var(--ease)}
html.sheet-out .nav:not(:focus-within){opacity:var(--clear,0);pointer-events:none}
html.sheet-out :is(.swap__head,.swap__pieces,.swap__now,.deck){opacity:var(--clear,0)}

/* Reduced motion and no WebGL: the same screens in the plain order of the page. The wall and the dark meet through a soft ramp, never a cut. */
html:not(.fall) .rs{pointer-events:auto}
html:not(.fall) .rs__lamp{display:none}
html:not(.fall) .rs__pin{display:grid;align-content:center;gap:clamp(20px,4svh,40px);padding:clamp(104px,15vw,240px) var(--gut)}
html:not(.fall) .rs__words,html:not(.fall) .rs__l{position:static}
html:not(.fall) .rs__l{--o:1}
html:not(.fall) .rs::before,html:not(.fall) .rs::after,html.no-gl .rs::after{content:"";display:block;height:34svh}
html:not(.fall) .rs::before{background:linear-gradient(transparent,var(--night))}
html:not(.fall) .rs::after,html.no-gl .rs::after{background:linear-gradient(var(--night),transparent)}
html.no-gl .rs{height:auto;margin-bottom:0}
html:not(.motion) .swapwrap{height:auto}
html:not(.motion) .swap{position:relative}