/* Photofin: the racing page of a newspaper that covers one race, run every hour. Hand-written; pages come from ../src/gen.py.
   Type: League Gothic (loud condensed headlines), Fraunces (heavy nameplate, text, and the light italic second voice), Courier Prime
   (agate: the small print of the racing form), Covered By Your Grace (the pencil in the margin; one face, used sparingly).
   Colour: straw newsprint and warm ink; vermilion = money (fees, purse, payouts); racing green = the wire, settlement, the tote;
   marigold = volume, highlighter and the second print plate (misregistration).
   Unit: on wide screens the home page is a sideways course of 56u-tall artboards, --u = min(1vw, (100vh - bar - rail) / 56). */
@font-face{font-family:"League Gothic";src:url(/fonts/leaguegothic.woff2) format("woff2");font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-italic.woff2) format("woff2");font-weight:300 600;font-style:italic;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(/fonts/courierprime.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(/fonts/courierprime-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Covered By Your Grace";src:url(/fonts/coveredbyyourgrace.woff2) format("woff2");font-display:swap}

:root{
  --ground:#F1E1B0; --paper:#F7ECCB; --photo:#E8D39C; --deep:#E2CB8C;
  --ink:#1C1712; --ink2:#4A4136; --pencil:#4F473D; --mute:#5E5446;
  --verm:#E2401B; --vermink:#A92E0B; --green:#0F5A38; --green2:#0B4329; --mari:#F4B11E;
  --line:rgba(28,23,18,.2); --line2:rgba(28,23,18,.42);
  --disp:"League Gothic","Arial Narrow",Impact,sans-serif; --text:"Fraunces",Georgia,serif; --agate:"Courier Prime","Courier New",monospace;
  --hand:"Covered By Your Grace","Comic Sans MS",cursive;
  --bar:56px; --railh:44px; --u:1vw; --wrap:1320px; --gut:clamp(20px,3.6vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1); --mech:cubic-bezier(.7,0,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  /* light: one warm lamp, upper left. Shadows are warm brown and fall down and to the right; tops of edges catch the light. */
  --shc:58,36,10; --lt:255,248,230;
  --sh-1:0 1px 1px rgba(var(--shc),.22),1px 3px 4px rgba(var(--shc),.13),3px 8px 14px rgba(var(--shc),.1);
  --sh-2:0 1px 1px rgba(var(--shc),.26),2px 5px 7px rgba(var(--shc),.17),8px 17px 30px rgba(var(--shc),.17);
  --sh-3:0 2px 2px rgba(var(--shc),.2),6px 14px 18px rgba(var(--shc),.17),18px 36px 56px rgba(var(--shc),.22);
  --ds-1:drop-shadow(0 1px 1px rgba(var(--shc),.32)) drop-shadow(2px 5px 5px rgba(var(--shc),.18));
  --ds-2:drop-shadow(0 1px 1px rgba(var(--shc),.3)) drop-shadow(4px 9px 9px rgba(var(--shc),.2)) drop-shadow(9px 20px 22px rgba(var(--shc),.13));
  --ds-3:drop-shadow(0 2px 2px rgba(var(--shc),.24)) drop-shadow(8px 16px 14px rgba(var(--shc),.2)) drop-shadow(18px 34px 34px rgba(var(--shc),.16));
  --sheen:linear-gradient(135deg,rgba(var(--lt),.62),rgba(var(--lt),0) 42%,rgba(var(--shc),0) 66%,rgba(var(--shc),.07));
  --edge:inset 0 1px 0 rgba(var(--lt),.75),inset 0 -1px 0 rgba(var(--shc),.1);
  --flap:linear-gradient(180deg,#40362C 0,#28211A 47%,#0D0A07 50%,#1C1611 53%,#241D17 100%);
  --enamel:radial-gradient(130% 100% at 18% 0%,#1E7A4F 0,#126140 34%,var(--green) 55%,#0A4128 100%);
  --slab:1px 1px 0 #083D25,2px 2px 0 #083D25,3px 3px 0 #06301D,4px 4px 0 #06301D,5px 5px 0 #052716;
  --screw:radial-gradient(circle at 38% 34%,#FFF8E6 0 1px,#D9CDA8 1.6px,#8A7F62 3.6px,#3C352A 4.6px,transparent 5.2px);
}
@media (min-width:1024px){:root{--u:min(1vw,(100vh - var(--bar) - var(--railh)) / 56)}}

@view-transition{navigation:auto}
::view-transition-old(root){animation:sheet-out .32s var(--mech) both}
::view-transition-new(root){animation:sheet-in .42s var(--mech) both}
@keyframes sheet-out{to{transform:translateX(-14%) rotate(-1.2deg);opacity:0}}
@keyframes sheet-in{from{transform:translateX(22%) rotate(1.6deg);opacity:.2;box-shadow:-30px 0 60px rgba(28,23,18,.25)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 16px)}
body{margin:0;background:var(--ground);color:var(--ink);font:400 18px/1.55 var(--text);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:lining-nums;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
/* the lamp: a warm pool of light from the upper left, under the content; a soft vignette toward the edges of the desk, over it */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(85% 75% at 14% 0%,rgba(var(--lt),.55),rgba(var(--lt),0) 60%),radial-gradient(60% 60% at 92% 100%,rgba(var(--shc),.06),rgba(var(--shc),0))}
body::after{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;background:radial-gradient(150% 115% at 42% 36%,rgba(var(--shc),0) 62%,rgba(var(--shc),.15) 100%)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
img,svg{display:block;max-width:100%}
figure{margin:0}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:inherit}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--vermink);outline-offset:3px}
::selection{background:var(--mari);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-80px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 14px;font:700 14px var(--agate)}
.skip:focus{top:10px}
.agate{font-family:var(--agate);font-variant-numeric:tabular-nums}
.k{font:700 12px/1.3 var(--agate);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.hand{font-family:var(--hand);color:var(--pencil);font-size:22px;line-height:1.08;letter-spacing:.01em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.12em}

/* ---------------------------------------------------------------- shared objects */
.flip{display:inline-flex;gap:2px;font:400 1em/1 var(--disp);font-variant-numeric:tabular-nums;letter-spacing:0;min-width:3.3em}
.flip .fd{position:relative;display:inline-grid;place-items:center;width:.72em;height:1.12em;background:var(--flap);color:var(--paper);border-radius:2px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(var(--lt),.2),inset 0 -1px 0 rgba(0,0,0,.4),0 1px 0 #000,1px 2px 3px rgba(var(--shc),.4);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.flip .fd::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:linear-gradient(#000 50%,rgba(var(--lt),.16) 50%)}
.flip .fs{display:inline-grid;place-items:center;width:.3em}
.flip .fd.go{animation:flip .36s var(--mech)}
@keyframes flip{0%{transform:perspective(200px) rotateX(0)}45%{transform:perspective(200px) rotateX(-88deg)}55%{transform:perspective(200px) rotateX(88deg)}100%{transform:perspective(200px) rotateX(0)}}

.ticket{position:relative;display:inline-flex;color:var(--paper);font:400 26px/1 var(--disp);text-transform:uppercase;letter-spacing:.04em;
  filter:drop-shadow(0 1px 0 rgba(var(--shc),.5)) drop-shadow(2px 4px 4px rgba(var(--shc),.24)) drop-shadow(6px 11px 13px rgba(var(--shc),.16));
  transition:transform .4s var(--spring),filter .3s var(--ease)}
.tk-b{display:flex;align-items:stretch;background:linear-gradient(162deg,#43382E 0,var(--ink) 36%,#0E0B08 100%);box-shadow:inset 0 1px 0 rgba(var(--lt),.22),inset 0 -2px 0 rgba(0,0,0,.4);transition:background .2s;
  -webkit-mask:radial-gradient(circle 7px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 7px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.tk-b>span{padding:.58em .85em .5em .92em;display:flex;align-items:center;white-space:nowrap;text-shadow:0 1px 0 #000}
.ticket i{font:700 .38em/1.15 var(--agate);font-style:normal;letter-spacing:.1em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);
  padding:.6em .8em .6em .7em;border-right:2px dashed rgba(247,236,203,.55);color:var(--mari);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.ticket:hover{transform:translate(-1px,-4px) rotate(-.8deg);filter:drop-shadow(0 1px 0 rgba(var(--shc),.3)) drop-shadow(5px 9px 8px rgba(var(--shc),.24)) drop-shadow(12px 22px 22px rgba(var(--shc),.18))}
.ticket:hover .tk-b{background:linear-gradient(162deg,#D2502A 0,var(--vermink) 40%,#7A1F06 100%)}
.ticket:hover i{transform:rotate(186deg) translate(-3px,-2px)}
.ticket:active{transform:translateY(0) scale(.98);filter:drop-shadow(0 1px 0 rgba(var(--shc),.5)) drop-shadow(1px 2px 2px rgba(var(--shc),.3))}
.ticket.sm{font-size:19px}.ticket.sm .tk-b>span{padding:.45em .8em .4em}
.lnk{display:inline-flex;align-items:center;gap:.4em;font:400 22px/1 var(--disp);text-transform:uppercase;letter-spacing:.05em;color:var(--ink);
  background:linear-gradient(var(--mari),var(--mari)) 0 100%/100% 4px no-repeat;padding:4px 0 6px;transition:background-size .25s var(--ease);border:0;cursor:pointer}
.lnk:hover{background-size:100% 100%}
.lnk.big{font-size:26px}

.kick{display:flex;align-items:center;gap:12px;font:700 13px/1.2 var(--agate);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.kick-n{background:var(--ink);color:var(--paper);padding:4px 7px 3px}

.stamp,.photo-stamp,.rc-stamp{display:inline-block;font:400 40px/1 var(--disp);text-transform:uppercase;letter-spacing:.06em;color:var(--vermink);
  border:5px double var(--vermink);padding:8px 14px 5px;transform:rotate(var(--sr,0deg));opacity:.92;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.55' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.75'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.55' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.75'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E")}

.tape{display:block;height:28px;background:rgba(244,177,30,.55);box-shadow:inset 0 0 0 1px rgba(28,23,18,.06);
  clip-path:polygon(3% 8%,10% 0,22% 9%,35% 1%,50% 8%,63% 0,78% 7%,90% 0,100% 10%,97% 92%,86% 100%,72% 91%,58% 100%,42% 92%,28% 100%,14% 92%,0 100%)}

/* tickets for payout states */
.stubs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;counter-reset:s}
.stub{position:relative;background:var(--sheen),var(--paper);border:2px solid var(--ink);padding:14px 14px 14px 16px;display:flex;flex-direction:column;gap:6px;
  -webkit-mask:radial-gradient(circle 8px at 50% 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 8px at 50% 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 8px at 50% 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 8px at 50% 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.stub-n{font:700 12px var(--agate);letter-spacing:.1em;color:var(--mute)}
.stub b{font:400 28px/1 var(--disp);text-transform:uppercase;letter-spacing:.03em}
.stub-d{font-size:14px;line-height:1.35;color:var(--ink2)}
.stub.st3{background:var(--enamel);color:var(--paper);border-color:var(--green2)}
.stubs{filter:var(--ds-1)}
.stub.st3 .stub-n,.stub.st3 .stub-d{color:#E9E2C6}
.stub.st1 b{color:var(--ink)}
.stub.st0 b{color:var(--ink2)}

/* ---------------------------------------------------------------- bar */
.bar{position:sticky;top:0;z-index:50;height:var(--bar);display:flex;align-items:center;gap:28px;padding:0 var(--gut);
  background:linear-gradient(180deg,rgba(var(--lt),.5),rgba(var(--lt),0) 70%),var(--ground);border-bottom:4px double var(--ink);
  box-shadow:0 1px 0 rgba(var(--lt),.6),0 3px 3px -1px rgba(var(--shc),.16),0 10px 18px -8px rgba(var(--shc),.3)}
.brand{display:flex;align-items:center;gap:8px;flex:none}
.wordmark{font:900 26px/1 var(--text);font-variation-settings:"opsz" 144;letter-spacing:-.02em}
.nav{display:flex;gap:22px;margin-right:auto}
.nav a{font:400 21px/1 var(--disp);text-transform:uppercase;letter-spacing:.06em;padding:6px 0 4px;background:linear-gradient(var(--mari),var(--mari)) 0 100%/0 4px no-repeat;transition:background-size .25s var(--ease)}
.nav a:hover,.nav a[aria-current]{background-size:100% 4px}
.nav-cta{display:none}
.bar-right{display:flex;align-items:center;gap:16px}
.bar-clock{display:flex;align-items:center;gap:8px;font-size:22px}
.bar-clock .k{font-size:11px}
.xlink{width:36px;height:36px;display:grid;place-items:center}
.menu{display:none;width:44px;height:40px;border:2px solid var(--ink);background:var(--paper);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.menu i{display:block;width:20px;height:2px;background:var(--ink);transition:transform .2s}
.menu[aria-expanded="true"] i:first-of-type{transform:translateY(4px) rotate(45deg)}
.menu[aria-expanded="true"] i:last-of-type{transform:translateY(-4px) rotate(-45deg)}
.castrip{position:absolute;left:0;right:0;top:100%;display:flex;align-items:center;gap:12px;padding:6px var(--gut);background:var(--paper);border-bottom:1px solid var(--line2);font-size:13px}
.castrip code{font-size:13px;overflow:hidden;text-overflow:ellipsis}
.iconbtn{border:0;background:none;cursor:pointer;padding:4px}

/* ---------------------------------------------------------------- the course (home) */
.ab{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));transform:rotate(var(--r,0deg))}
.ab[style*="--h"]{height:calc(var(--h)*var(--u))}
.stg{position:relative;flex:none;width:calc(var(--sw)*var(--u));height:calc(56*var(--u))}
.cap-list,.swipe{display:none}

@media (min-width:1024px){
  .home .track{margin:0 auto;width:max-content;padding:calc((100vh - var(--bar) - var(--railh) - 56*var(--u))/2) 0 0}
  .home .stg{margin:0 auto}
  html.js .home .course{height:calc(100vh - var(--bar) + (var(--total) - 100)*var(--u) + var(--railh))}
  html.js .home .course-pin{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));overflow:hidden;overflow:clip}
  html.js .home .track{display:flex;padding-left:calc((100vw - 100*var(--u))/2);padding-right:calc((100vw - 100*var(--u))/2);margin:0;will-change:transform}
  html.js .home .rail{display:flex}
  html.js .home .stg+.stg::before{left:-40px;right:auto;width:80px;top:-60vh;bottom:-60vh;height:auto;
    background:linear-gradient(90deg,rgba(var(--shc),0),rgba(var(--shc),.05) 40%,rgba(var(--shc),.12) 49.4%,rgba(var(--lt),.5) 50.6%,rgba(var(--lt),.12) 58%,rgba(var(--lt),0))}
  html.js .home [data-z]{will-change:translate}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce),(min-width:1024px) and (max-height:599px){
  html.js .home .course{height:auto}
  html.js .home .course-pin{position:static;height:auto;overflow:visible}
  html.js .home .track{display:block;padding:0;width:auto;margin:0}
  html.js .home .stg{margin:0 auto calc(4*var(--u))}
  html.js .home .rail{display:none}
  html.js .home .stg+.stg::before{left:0;right:0;width:auto;top:-34px;bottom:auto;height:68px;
    background:linear-gradient(180deg,rgba(var(--shc),0),rgba(var(--shc),.05) 40%,rgba(var(--shc),.13) 49.5%,rgba(var(--lt),.55) 50.5%,rgba(var(--lt),.12) 58%,rgba(var(--lt),0))}
}

/* rail: the running rail with its furlong poles; the progress cue */
.rail{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;height:var(--railh);align-items:center;background:var(--ground);border-top:4px double var(--ink);padding:0 var(--gut)}
.rail ol{position:relative;display:flex;flex:1;height:100%;align-items:stretch}
.rail ol::before{content:"";position:absolute;left:0;right:0;top:12px;height:3px;background:var(--paper);box-shadow:0 0 0 1px var(--ink)}
.rail li{flex:1;position:relative;display:flex}
.rail a{position:relative;flex:1;display:flex;align-items:flex-end;padding:0 0 5px 10px;font:700 11px/1 var(--agate);letter-spacing:.06em;white-space:nowrap;text-transform:uppercase;color:var(--mute)}
.rail a span{background:var(--ground);padding:2px 5px;position:relative;z-index:1}
.rail a::before{content:"";position:absolute;left:0;top:3px;bottom:5px;width:4px;background:repeating-linear-gradient(var(--verm) 0 5px,var(--paper) 5px 10px);box-shadow:0 0 0 1px var(--ink)}
.rail a.on{color:var(--ink)}
.rail a.on span{background:var(--mari)}
.rail a:hover span{text-decoration:underline}
.rail-runner{position:absolute;left:var(--gut);top:1px;z-index:2;pointer-events:none;transform:translateX(var(--rx,0px));will-change:transform}
.rail-runner svg{width:22px;height:22px}
.rail-hint{flex:none;margin-left:16px;font-size:11px;letter-spacing:.06em;color:var(--mute);text-transform:uppercase}

/* stage 0: the front page */
.ear{border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:calc(.5*var(--u)) 0;text-align:center}
.ear-l p{font:400 calc(1.75*var(--u))/1 var(--disp);text-transform:uppercase;letter-spacing:.08em}
.ear-l p:nth-child(2){color:var(--vermink)}
.ear-r .k{font-size:calc(.72*var(--u))}
.ear-clock{font-size:calc(2.9*var(--u));line-height:1.1;margin:calc(.2*var(--u)) 0;display:flex;justify-content:center}
.np{text-align:center}
.nameplate{position:relative;display:inline-block;font:900 calc(7.6*var(--u))/1 var(--text);font-variation-settings:"opsz" 144;letter-spacing:-.035em;color:var(--ink)}
.nameplate span{position:relative;display:block}
.nameplate .mis{position:absolute;inset:0;color:var(--verm);transform:translate(calc(.16*var(--u)),calc(.1*var(--u)));mix-blend-mode:multiply;z-index:-1}
.dateline{display:flex;justify-content:space-between;gap:16px;border-top:4px double var(--ink);padding-top:calc(.35*var(--u));font-size:calc(.8*var(--u));letter-spacing:.1em;text-transform:uppercase}
.tick-ab{height:calc(2*var(--u))}
.ticker{display:flex;overflow:hidden;height:100%;background:var(--green);color:var(--paper);font:700 calc(.86*var(--u))/calc(2*var(--u)) var(--agate);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.tk-run{display:flex;flex:none;animation:tick 70s linear infinite}
.tk-run span{padding:0 calc(1.4*var(--u));position:relative}
.tk-run span::after{content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--mari);transform:rotate(45deg)}
.tk-run b{color:var(--ink);background:var(--mari);padding:0 4px;font-weight:700}
@keyframes tick{to{transform:translateX(-100%)}}
.banner{font-family:var(--disp);text-transform:uppercase;line-height:.86;color:var(--ink)}
.banner .b1{display:block;font-size:calc(7.15*var(--u));letter-spacing:.005em;text-shadow:calc(.14*var(--u)) calc(.1*var(--u)) 0 var(--mari)}
.banner .b2{display:block;font-size:calc(3.7*var(--u));font-stretch:78%;color:var(--verm);letter-spacing:.02em;margin-top:calc(.35*var(--u))}
.deck{font:italic 300 calc(1.34*var(--u))/1.3 var(--text);color:var(--ink2);text-wrap:pretty}
.s-cta{display:flex;align-items:center;gap:calc(1.6*var(--u));flex-wrap:wrap}
.s-cta .ticket{font-size:calc(1.85*var(--u))}
.walk{font-size:calc(1.6*var(--u));color:var(--pencil);border-bottom:2px solid transparent}
.walk:hover{border-bottom-color:var(--pencil)}
.walk span{display:inline-block;animation:nudge 1.6s var(--ease) infinite}
@keyframes nudge{50%{transform:translateX(6px)}}
.s-photo{border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.photo{width:100%;height:100%;cursor:crosshair}
.cap{background:var(--paper);border:1.5px solid var(--ink);padding:calc(.55*var(--u)) calc(.75*var(--u)) calc(.6*var(--u));box-shadow:calc(.25*var(--u)) calc(.25*var(--u)) 0 rgba(28,23,18,.18);
  font-size:calc(.98*var(--u));line-height:1.3;color:var(--ink)}
.cap::before{content:"";position:absolute;left:50%;top:calc(-.7*var(--u));width:calc(4.2*var(--u));height:calc(1.2*var(--u));margin-left:calc(-2.1*var(--u));background:rgba(244,177,30,.6);transform:rotate(-3deg)}
.cap.c2::before{transform:rotate(4deg)}.cap.c4::before{transform:rotate(-6deg);left:40%}
.cap-k{display:flex;align-items:center;gap:calc(.5*var(--u));font:400 calc(1.5*var(--u))/1 var(--disp);text-transform:uppercase;letter-spacing:.04em;margin-bottom:calc(.3*var(--u))}
.cap-k b,.cap-list b{display:inline-grid;place-items:center;width:calc(1.7*var(--u));height:calc(1.7*var(--u));border-radius:50%;background:var(--ink);color:var(--paper);font:400 calc(1.2*var(--u))/1 var(--disp)}
.c2 .cap-k b{background:var(--vermink)}.c4 .cap-k b{background:var(--green)}
.pn .hand,.pn.hand{font-size:calc(1.6*var(--u))}
.pn-photo .hand{color:var(--ink);transform:rotate(-3deg)}
.ph-credit p{font-size:calc(.72*var(--u));letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);background:var(--paper);display:inline-block;padding:1px 4px}
.ph-k{font:700 11px var(--agate);letter-spacing:.1em;fill:var(--ink)}
.ph-k.grn{fill:var(--green)}
.ph-t{font:15px var(--hand);fill:var(--ink)}
.ph-t.no{font-size:12.5px;fill:var(--ink2)}
.ph-fee{fill:none;stroke:var(--verm);stroke-width:3;stroke-dasharray:8 6}
.ph-wire{stroke:var(--green);stroke-width:4}
.ph-pay{fill:none;stroke:var(--verm);stroke-width:2.6}
.rn-n{font:400 21px var(--disp);fill:var(--ink)}
.ros-g{font:400 30px var(--disp);fill:var(--ink)}
.pu-t{font:400 19px var(--disp);letter-spacing:.08em;fill:var(--paper)}
.slit line{stroke:var(--vermink);stroke-width:1.5;stroke-dasharray:3 3}
.slit{opacity:0;transition:opacity .2s}
.photo-tag{position:absolute;z-index:5;pointer-events:none;font:700 12px/1.2 var(--agate);letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:5px 8px;white-space:nowrap;opacity:0;transition:opacity .2s;transform:translate(-50%,-130%)}
.photo-tag.on{opacity:1}

/* stage chrome: headlines, body, conditions */
.s-h{font:400 calc(5.4*var(--u))/.9 var(--disp);text-transform:uppercase;letter-spacing:.01em;margin-top:calc(.9*var(--u));text-shadow:calc(.11*var(--u)) calc(.08*var(--u)) 0 var(--mari);text-wrap:balance}
.s-h.xl{font-size:calc(7.6*var(--u))}
.s-headblk .kick{font-size:calc(.9*var(--u))}
.s-body{font-size:calc(1.24*var(--u));line-height:1.48;color:var(--ink2);text-wrap:pretty}
.cond-k{font:400 calc(1.5*var(--u))/1 var(--disp);text-transform:uppercase;letter-spacing:.08em;color:var(--green);padding-bottom:calc(.4*var(--u));border-bottom:3px double var(--green)}
.cond li{font-size:calc(1.12*var(--u));line-height:1.35;padding:calc(.55*var(--u)) 0 calc(.55*var(--u)) calc(1.8*var(--u));border-bottom:1px solid var(--line);position:relative;font-weight:500}
.cond li::before{content:"";position:absolute;left:0;top:calc(.95*var(--u));width:calc(.9*var(--u));height:calc(.9*var(--u));background:var(--green);clip-path:polygon(0 0,100% 50%,0 100%)}
.cloth{width:100%;height:auto;overflow:visible}
.cloth-n{font:400 236px/1 var(--disp)}
.cloth-n.mis{fill:var(--mari);mix-blend-mode:multiply;opacity:.0}
.s-cloth{z-index:0}
.s-cloth.sm{z-index:0}
.s-art{z-index:1}.s-art svg{width:100%;height:auto;overflow:visible}

/* entry */
.ent-h{font:400 24px var(--disp);letter-spacing:.08em;fill:var(--paper)}
.ent-k{font:700 13px var(--agate);letter-spacing:.12em;fill:var(--ink2)}
.ent-v{font:24px var(--hand);fill:var(--green)}
.ent-big{font:400 30px var(--disp);letter-spacing:.06em;fill:var(--vermink)}
.sig{stroke-dasharray:100;stroke-dashoffset:0}

/* purse */
.tag-t{font:400 19px var(--disp);letter-spacing:.06em;fill:var(--ink)}
.s-stamp{z-index:3}.s-stamp .stamp{font-size:calc(2.5*var(--u))}

/* running: the tote board */
.flipnum b{display:grid;place-items:center;width:calc(15*var(--u));height:calc(17*var(--u));background:var(--green);color:var(--mari);font:400 calc(15.5*var(--u))/1 var(--disp);border-radius:calc(.6*var(--u));position:relative;overflow:hidden;box-shadow:calc(.4*var(--u)) calc(.4*var(--u)) 0 var(--ink)}
.flipnum b::after{content:"";position:absolute;left:0;right:0;top:50%;height:calc(.25*var(--u));background:var(--green2)}
.tote{background:var(--green);color:var(--paper);padding:calc(1*var(--u)) calc(1.2*var(--u)) calc(.8*var(--u));border-radius:calc(.5*var(--u));box-shadow:calc(.5*var(--u)) calc(.5*var(--u)) 0 var(--ink),inset 0 0 0 calc(.3*var(--u)) var(--green2)}
.tt-head,.tt-foot{display:flex;justify-content:space-between;font:700 calc(.8*var(--u))/1 var(--agate);letter-spacing:.12em;color:var(--paper)}
.tt-head{padding-bottom:calc(.7*var(--u));border-bottom:2px solid rgba(247,236,203,.3)}
.tt-foot{padding-top:calc(.7*var(--u));color:#E9E2C6}
.tt-rows{display:flex;flex-direction:column;gap:calc(.55*var(--u));padding:calc(.8*var(--u)) 0;position:relative}
.tt-row{display:grid;grid-template-columns:calc(3*var(--u)) calc(3.4*var(--u)) calc(15*var(--u)) 1fr;align-items:center;gap:calc(.8*var(--u));height:calc(4*var(--u))}
.fc{display:inline-grid;place-items:center;background:var(--ink);color:var(--mari);font:400 calc(2.4*var(--u))/1 var(--disp);height:calc(3.4*var(--u));min-width:calc(1.5*var(--u));border-radius:2px;position:relative;font-weight:400}
.fc::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(244,177,30,.25)}
.tt-pos .fc{width:calc(2.8*var(--u))}
.tt-name{display:flex;gap:2px}
.tt-name .fc{color:var(--paper);min-width:calc(1.3*var(--u));font-size:calc(2*var(--u))}
.tt-silk svg{width:calc(3.2*var(--u));height:auto}
.tt-bulbs{display:flex;gap:calc(.35*var(--u))}
.tt-bulbs i{width:calc(1.1*var(--u));height:calc(1.1*var(--u));border-radius:50%;background:var(--green2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.tt-bulbs i.on{background:var(--mari);box-shadow:0 0 calc(.5*var(--u)) rgba(244,177,30,.6)}
.s-tote{z-index:1}

/* wire */
.s-pstamp{z-index:3}.photo-stamp{font-size:calc(2*var(--u));color:var(--green);border-color:var(--green)}
.s-stubs .cond-k{margin-bottom:calc(.8*var(--u))}
.s-stubs .stubs{gap:calc(.6*var(--u))}
.s-stubs .stub{padding:calc(.8*var(--u)) calc(.9*var(--u))}
.s-stubs .stub b{font-size:calc(1.7*var(--u))}
.s-stubs .stub-d{font-size:calc(.86*var(--u))}
.s-stubs .stub-n{font-size:calc(.75*var(--u))}

/* conditions */
.vword{font:400 calc(11.5*var(--u))/.8 var(--disp);text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--verm);letter-spacing:.01em;text-shadow:calc(-.18*var(--u)) calc(.12*var(--u)) 0 var(--mari);height:calc(56*var(--u));white-space:nowrap;overflow:hidden}
.params{columns:3;column-gap:calc(2.4*var(--u));column-rule:1px solid var(--line2);border-top:4px double var(--ink);padding-top:calc(1*var(--u))}
.prm{break-inside:avoid;padding:0 0 calc(1.1*var(--u));margin-bottom:calc(1.1*var(--u));border-bottom:1px dotted var(--line2)}
.prm dt{font:400 calc(2*var(--u))/1 var(--disp);text-transform:uppercase;letter-spacing:.04em;color:var(--ink);margin-bottom:calc(.35*var(--u))}
.prm dd{font-size:calc(1.12*var(--u));line-height:1.38;color:var(--ink2)}

/* ink & pencil */
.ink-k{font:400 calc(3.3*var(--u))/1 var(--disp);text-transform:uppercase;letter-spacing:.02em}
.ink-k.pen{font-family:var(--hand);text-transform:none;font-size:calc(3.3*var(--u));color:var(--pencil);letter-spacing:0}
.ink-s{font:italic 300 calc(1.3*var(--u))/1.3 var(--text);color:var(--ink2);margin:calc(.3*var(--u)) 0 calc(1.2*var(--u))}
.inklist li{font-size:calc(1.3*var(--u));line-height:1.3;font-weight:600;padding:calc(.7*var(--u)) 0 calc(.7*var(--u)) calc(2*var(--u));border-top:2px solid var(--ink);position:relative}
.inklist li::before{content:"";position:absolute;left:0;top:calc(1.05*var(--u));width:calc(.9*var(--u));height:calc(.9*var(--u));background:var(--ink)}
.s-pencil .pcard{background:#FBF4DC;padding:calc(1.6*var(--u)) calc(2*var(--u)) calc(2*var(--u));
  background-image:var(--sheen),repeating-linear-gradient(transparent 0 calc(2.6*var(--u) - 1px),rgba(15,90,56,.22) calc(2.6*var(--u) - 1px) calc(2.6*var(--u)));
  clip-path:polygon(0 1%,6% 0,14% 1.5%,26% 0,38% 1%,52% 0,66% 1.4%,80% 0,92% 1.2%,100% 0,99.4% 30%,100% 62%,99.2% 100%,84% 98.6%,70% 100%,55% 98.8%,40% 100%,26% 98.6%,12% 100%,0 99%,.8% 60%)}
.penlist li{font:calc(1.9*var(--u))/1.37 var(--hand);color:var(--pencil);padding-left:calc(1.8*var(--u));position:relative}
.penlist li::before{content:"~";position:absolute;left:0;top:0;color:var(--vermink)}

/* stewards */
.notice{background:var(--paper);border:3px solid var(--ink);padding:calc(1.2*var(--u)) calc(2.4*var(--u)) calc(1.6*var(--u));box-shadow:calc(.6*var(--u)) calc(.6*var(--u)) 0 rgba(28,23,18,.2)}
.notice-top{display:flex;justify-content:space-between;font:700 calc(.8*var(--u)) var(--agate);letter-spacing:.14em;text-transform:uppercase;border-bottom:4px double var(--ink);padding-bottom:calc(.5*var(--u))}
.enquiry{font:400 calc(9.4*var(--u))/.9 var(--disp);text-transform:uppercase;letter-spacing:.14em;color:var(--verm);text-shadow:calc(.18*var(--u)) calc(.12*var(--u)) 0 var(--mari);margin-top:calc(.6*var(--u))}
.notice .s-h{font-size:calc(3.6*var(--u));margin-top:0;text-shadow:none}
.notice-s{font:italic 300 calc(1.3*var(--u)) var(--text);color:var(--ink2);margin:calc(.2*var(--u)) 0 calc(1.2*var(--u))}
.risks{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(1.2*var(--u)) calc(2.2*var(--u))}
.risks li{position:relative;padding-left:calc(3*var(--u))}
.rk-n{position:absolute;left:0;top:0;width:calc(2.2*var(--u));height:calc(2.2*var(--u));border:2px solid var(--vermink);border-radius:50%;display:grid;place-items:center;font:400 calc(1.4*var(--u))/1 var(--disp);color:var(--vermink)}
.rk-t{font:400 calc(1.7*var(--u))/1.05 var(--disp);text-transform:uppercase;letter-spacing:.03em}
.rk-s{font-size:calc(1.02*var(--u));line-height:1.38;color:var(--ink2);margin-top:calc(.3*var(--u))}

/* letters */
.letters{columns:3;column-gap:calc(2.4*var(--u));column-rule:1px solid var(--line2);border-top:4px double var(--ink);padding-top:calc(1*var(--u))}
.letter{break-inside:avoid;margin-bottom:calc(1.4*var(--u))}
.lt-q{font:600 calc(1.32*var(--u))/1.3 var(--text);margin-bottom:calc(.4*var(--u))}
.lt-sir{font-style:italic;font-weight:300}
.lt-a{font-size:calc(1.14*var(--u));line-height:1.45;color:var(--ink2)}
.lt-ed{display:block;font:700 calc(.72*var(--u))/1.3 var(--agate);letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:calc(.15*var(--u))}
.booklet{display:flex;flex-direction:column;gap:calc(.8*var(--u));background:var(--green);color:var(--paper);padding:calc(1.6*var(--u)) calc(1.6*var(--u)) calc(1.8*var(--u));box-shadow:calc(.5*var(--u)) calc(.5*var(--u)) 0 var(--ink);border-left:calc(.7*var(--u)) solid var(--green2);transition:transform .3s var(--ease)}
.booklet:hover{transform:rotate(0) translateY(-4px)}
.bk-k{font:700 calc(.8*var(--u)) var(--agate);letter-spacing:.14em;text-transform:uppercase;color:var(--paper)}
.bk-t{font:400 calc(3.4*var(--u))/.9 var(--disp);text-transform:uppercase}
.bk-l{font-size:calc(1*var(--u));line-height:1.45;color:#E9E2C6}
.bk-a{font:400 calc(1.5*var(--u))/1 var(--disp);text-transform:uppercase;letter-spacing:.05em;color:var(--paper);text-decoration:underline;text-decoration-color:var(--mari);text-decoration-thickness:3px;text-underline-offset:5px}

/* board */
.board{background:var(--green);color:var(--paper);padding:calc(1.2*var(--u)) calc(1.6*var(--u));border-radius:calc(.5*var(--u));box-shadow:calc(.5*var(--u)) calc(.5*var(--u)) 0 var(--ink),inset 0 0 0 calc(.3*var(--u)) var(--green2)}
.bd-top{display:flex;align-items:center;justify-content:space-between;font-size:calc(3*var(--u));border-bottom:2px solid rgba(247,236,203,.3);padding-bottom:calc(.8*var(--u))}
.bd-k{font:700 calc(.78*var(--u))/1.2 var(--agate);letter-spacing:.12em;text-transform:uppercase;color:#E9E2C6}
.bd-top .flip .fd{color:var(--mari)}
.bd-cells{display:grid;grid-template-columns:repeat(6,1fr);gap:calc(.8*var(--u));padding:calc(.9*var(--u)) 0;border-bottom:2px solid rgba(247,236,203,.3)}
.bd-c{display:flex;flex-direction:column;gap:calc(.4*var(--u))}
.bd-v{font:400 calc(2.3*var(--u))/1 var(--disp);color:var(--mari)}
.bd-lanes{padding:calc(.6*var(--u)) 0}
.bd-lanes li{display:flex;align-items:center;gap:calc(1*var(--u));height:calc(2.9*var(--u));color:#C9C2A6}
.bd-lanes svg{width:calc(2.1*var(--u));height:auto}
.ln-n{font:400 calc(1.5*var(--u)) var(--disp);width:calc(1.4*var(--u))}
.ln-r{flex:1;height:0;border-top:2px dashed rgba(247,236,203,.35)}
.ln-v{font:700 calc(.75*var(--u)) var(--agate);letter-spacing:.12em;text-transform:uppercase}
.bd-msg{font:italic 300 calc(1.2*var(--u))/1.3 var(--text);color:var(--paper);padding-top:calc(.3*var(--u))}
.clip{position:relative;background:var(--sheen),var(--paper);padding:calc(1.4*var(--u)) calc(1.6*var(--u)) calc(1.6*var(--u));
  clip-path:polygon(0 2%,8% 0,20% 1.6%,34% 0,48% 1.4%,62% 0,76% 1.6%,90% 0,100% 1.4%,99% 50%,100% 98%,86% 100%,72% 98.4%,58% 100%,44% 98.2%,30% 100%,16% 98.4%,0 100%,1% 50%)}
.clip-k{font:700 calc(.78*var(--u)) var(--agate);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border-bottom:3px double var(--ink);padding-bottom:calc(.4*var(--u));margin-bottom:calc(.7*var(--u))}
.clip-t{font:400 calc(2.3*var(--u))/1 var(--disp);text-transform:uppercase}
.clip-s{font-size:calc(1.05*var(--u));line-height:1.4;color:var(--ink2);margin:calc(.4*var(--u)) 0 calc(.9*var(--u))}
.clip .lnk{font-size:calc(1.5*var(--u))}

/* finish: the footer is an event */
.finish{overflow:hidden}
.s-post svg{width:100%;height:auto;overflow:visible}
.fin-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(1.6*var(--u));border-top:4px double var(--ink);padding-top:calc(1*var(--u))}
.fin-cols .k{font-size:calc(.8*var(--u));margin-bottom:calc(.6*var(--u))}
.fin-cols a{font:400 calc(1.7*var(--u))/1.6 var(--disp);text-transform:uppercase;letter-spacing:.04em}
.fin-cols a:hover{color:var(--vermink)}
.fin-legal{font-size:calc(.86*var(--u));line-height:1.6;color:var(--ink2)}
.fin-word{font:900 calc(27*var(--u))/.78 var(--text);font-variation-settings:"opsz" 144;letter-spacing:-.05em;color:var(--ink);white-space:nowrap;margin-left:calc(-1*var(--u))}
.fin-word::first-letter{color:var(--verm)}
.shutter{position:absolute;inset:0;pointer-events:none;z-index:9;display:flex}
.shutter i{flex:1;background:var(--ink);transform:scaleX(0)}
.shutter i:first-child{transform-origin:left}.shutter i:last-child{transform-origin:right}
.finish.snap .shutter i{animation:shut .5s var(--mech)}
@keyframes shut{0%{transform:scaleX(0)}45%,55%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* effects (fx.js adds html.fx; without it every stage is drawn in its final state) */
.fcoin{fill:var(--verm);stroke:var(--ink);stroke-width:2}
.gate{transition:transform .5s var(--mech)}
.ph-pay{stroke-dasharray:100}
.fc.go{animation:flip .14s linear}
html.fx .stg:not(.in) .stamp{opacity:0}
html.fx .stg.in .stamp{animation:slam .5s .6s var(--mech) both}
@keyframes slam{0%{opacity:0;transform:rotate(var(--sr,0deg)) scale(1.9)}70%{opacity:.95;transform:rotate(var(--sr,0deg)) scale(.95)}100%{opacity:.92;transform:rotate(var(--sr,0deg)) scale(1)}}
.sig{transition:stroke-dashoffset 1.6s .5s ease}
html.fx .stg:not(.in) .sig{stroke-dashoffset:100}
.drop{transition:transform .7s cubic-bezier(.55,0,.8,.3) calc(var(--d)*.16s + .25s),opacity .2s calc(var(--d)*.16s + .25s)}
html.fx .stg:not(.in) .drop{transform:translateY(-90px);opacity:0}
.s-cloth svg{transform-origin:50% 0}
html.fx .stg.in .s-cloth svg{animation:swing 1.3s var(--ease) both}
@keyframes swing{0%{transform:translateY(-30px) rotate(-12deg);opacity:0}55%{transform:rotate(4deg);opacity:1}80%{transform:rotate(-1.5deg)}}
.s-stubs .stub{transition:transform .5s var(--ease) calc(var(--n)*.2s + .4s),opacity .35s calc(var(--n)*.2s + .4s)}
html.fx .stg:not(.in) .s-stubs .stub{opacity:0;transform:translateY(-18px) rotate(-6deg)}
.tt-bulbs i{transition:background .15s calc(var(--k)*70ms + .6s),box-shadow .15s calc(var(--k)*70ms + .6s)}
html.fx .stg:not(.in) .tt-bulbs i.on{background:var(--green2);box-shadow:none}
.pn .hand{clip-path:inset(-30% -4% -30% 0);transition:clip-path 1.3s ease .9s}
html.fx .stg:not(.in) .pn .hand{clip-path:inset(-30% 100% -30% 0)}
.fin-word{transition:transform 1s var(--mech) .25s}
html.fx .finish:not(.in) .fin-word{transform:translateY(45%)}
.rosettes svg,.sh-art .rosette{transition:transform .3s var(--ease)}
.rosettes li:hover svg{transform:rotate(-8deg) scale(1.04)}
@media (prefers-reduced-motion:reduce){.sig,.drop,.s-stubs .stub,.tt-bulbs i,.pn .hand,.fin-word,.gate{transition:none}}

/* ---------------------------------------------------------------- inner pages */
.sheet-head{padding:clamp(28px,4vw,56px) var(--gut) clamp(28px,3.4vw,48px);max-width:var(--wrap);margin:0 auto}
.flag{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;border-bottom:4px double var(--ink);padding-bottom:10px;margin-bottom:clamp(20px,3vw,36px)}
.flag-s{font:400 clamp(26px,3vw,40px)/1 var(--disp);text-transform:uppercase;letter-spacing:.06em;background:var(--ink);color:var(--paper);padding:6px 14px 4px}
.flag-s a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--mari)}
.flag-r{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.sh-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end}
.pg-h{font:400 clamp(64px,10.5vw,160px)/.84 var(--disp);text-transform:uppercase;letter-spacing:-.005em;text-shadow:.03em .02em 0 var(--mari);margin-bottom:22px}
.sheet-head .deck{font-size:clamp(19px,1.7vw,24px);max-width:30em}
.sh-art{position:relative;justify-self:end}
.coin-art{width:min(420px,100%);height:auto}
.clockart{background:var(--green);color:var(--paper);padding:22px 26px 20px;box-shadow:8px 8px 0 var(--ink);transform:rotate(1.5deg)}
.clockart .k{color:#E9E2C6}
.bigclock{font-size:clamp(56px,7vw,96px);margin:10px 0 6px}
.bigclock .fd{color:var(--mari)}
.clockart .hand{color:var(--paper);font-size:22px}
.h3{font:400 clamp(28px,2.6vw,38px)/1 var(--disp);text-transform:uppercase;letter-spacing:.02em}
.h3.sm{font-size:28px}
.small{font-size:16px;line-height:1.5;color:var(--ink2)}
.sec-tight{padding-top:28px;padding-bottom:28px}
.reveal{transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .reveal:not(.in){opacity:0;transform:translateY(14px)}
@media (prefers-reduced-motion:reduce){html.js .reveal:not(.in){opacity:1;transform:none}}

.strip{display:flex;flex-wrap:wrap;align-items:stretch;background:var(--green);color:var(--paper);box-shadow:6px 6px 0 var(--ink)}
.sp-c{flex:1 1 160px;display:flex;flex-direction:column;gap:8px;padding:16px 20px;border-right:1px solid rgba(247,236,203,.25)}
.sp-c .k{color:#E9E2C6;font-size:11px}
.sp-v,.sp-c .flip{font:400 34px/1 var(--disp);color:var(--mari)}

.strip .lnk{align-self:center;margin:0 22px;color:var(--paper);background-image:linear-gradient(var(--mari),var(--mari))}
.strip .lnk:hover{color:var(--ink)}
.tbl-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px;border-bottom:4px double var(--ink);padding-bottom:10px}
.card-tbl{background:var(--paper);border:2px solid var(--ink);position:relative}
.tbl-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th{font:700 12px var(--agate);letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:12px 16px;border-bottom:2px solid var(--ink);color:var(--ink2);white-space:nowrap}
td{padding:10px 16px;border-bottom:1px dashed var(--line2)}
td.no{font:400 24px var(--disp);width:60px}
.vac{display:flex;align-items:center;gap:14px;color:var(--mute)}
.vac svg{width:28px;height:28px}
.vac-line{flex:1;border-top:2px dashed var(--line2)}
.vac-t{font:700 11px var(--agate);letter-spacing:.12em;text-transform:uppercase}
.tbl-empty{padding:24px 22px 28px;border-top:2px solid var(--ink);display:grid;gap:6px;justify-items:start;position:relative}
.empty-t{font:400 32px/1 var(--disp);text-transform:uppercase;letter-spacing:.02em}
.empty-s{color:var(--ink2);margin-bottom:10px}
.tbl-pn{justify-self:end;margin-top:-6px;transform:rotate(-3deg);font-size:24px}

/* entries */
.entries{display:grid;gap:40px;padding-bottom:40px}
.classifieds{background:var(--paper);border:2px solid var(--ink);padding:18px 22px 24px}
.cl-head{display:flex;justify-content:space-between;font:700 12px var(--agate);letter-spacing:.12em;text-transform:uppercase;border-bottom:4px double var(--ink);padding-bottom:8px;margin-bottom:16px}
.slots{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-left:1px solid var(--line2)}
.slot{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;gap:4px 10px;padding:12px;border-right:1px solid var(--line2);border-bottom:1px dashed var(--line2);color:var(--mute);align-items:center}
.slot-n{font:400 24px/1 var(--disp);color:var(--ink2);grid-column:1/-1}
.slot svg{width:40px;height:40px;grid-row:2/4}
.slot-l{height:8px;background:repeating-linear-gradient(90deg,var(--line2) 0 6px,transparent 6px 10px)}
.slot-l.s{width:60%}
.slot-v{grid-column:1/-1;font:700 11px var(--agate);letter-spacing:.12em;text-transform:uppercase}
.cl-empty{display:grid;justify-items:start;gap:8px;padding-top:22px}
.specimen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:center}
.spec-card{position:relative;background:var(--paper);border:2px solid var(--ink);padding:22px;box-shadow:8px 8px 0 var(--green);transform:rotate(-2deg);max-width:340px}
.spec-card svg{width:110px;height:110px;margin:10px 0}
.spec-name{font:400 34px/1 var(--disp);text-transform:uppercase}
.spec-tick{font-size:15px;color:var(--ink2);margin:4px 0 14px}
.spec-bar{height:10px;background:var(--deep)}.spec-bar span{display:block;height:100%;width:40%;background:var(--verm)}
.spec-card .hand{position:absolute;font-size:30px;color:var(--vermink);width:34px;height:34px;border:2px solid var(--vermink);border-radius:50%;display:grid;place-items:center;line-height:1;padding-top:4px}
.sp1{left:126px;top:56px}.sp2{right:-14px;top:170px}.sp3{right:30px;bottom:-14px}
.notes{counter-reset:n;display:grid;gap:12px}
.notes li{counter-increment:n;position:relative;padding-left:44px;font-size:17px;line-height:1.45;color:var(--ink2)}
.notes li::before{content:counter(n);position:absolute;left:0;top:-2px;width:30px;height:30px;border:2px solid var(--vermink);border-radius:50%;display:grid;place-items:center;font:24px/1 var(--hand);color:var(--vermink);padding-top:3px}
.record .notes li::before,.create .notes li::before{border-color:var(--green);color:var(--green)}
.spec-notes .h3{margin-bottom:18px}

/* this hour */
.places{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:center;padding-bottom:56px}
.places .kick{margin-bottom:10px}.places .h3{margin-bottom:12px}
.rosettes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:end}
.rosettes li{display:grid;justify-items:center;text-align:center;gap:8px}
.rosettes p{font-size:15px;line-height:1.35;color:var(--ink2)}
.rosettes b{display:block;font:400 26px/1 var(--disp);text-transform:uppercase;color:var(--ink)}
.rosettes li:nth-child(1){transform:rotate(-4deg)}.rosettes li:nth-child(3){transform:rotate(5deg)}
.ros-t{font:400 28px var(--disp);fill:var(--ink)}
.fourth .hand{font-size:24px;transform:rotate(-5deg)}

/* at the wire */
.lb-head{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,4vw,56px) var(--gut) 20px;overflow:hidden}
.h-wire{font:400 clamp(96px,21vw,330px)/.78 var(--disp);text-transform:uppercase;letter-spacing:-.01em;display:flex;flex-wrap:wrap;gap:0 .18em;margin:0 0 20px}
.h-wire span:first-child{font-stretch:75%;color:var(--ink);text-shadow:.03em .02em 0 var(--mari)}
.h-wire span:last-child{color:var(--green);position:relative}
.h-wire span:last-child::after{content:"";position:absolute;left:.36em;top:-.06em;bottom:-.06em;width:.05em;background:var(--verm);transform:rotate(1deg)}
.lb-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:start}
.lb-print svg{width:100%;height:auto}
.lb-print figcaption{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:8px;color:var(--ink2)}
.lbv{font:400 40px var(--disp);fill:#6E6457}

/* results */
.pg-results .sh-art{display:flex;align-items:flex-end;gap:6px}
.r-a{transform:rotate(-8deg)}.r-b{transform:rotate(4deg) translateY(10px)}.r-c{transform:rotate(-2deg)}
.stubs.wide .stub{padding:22px 20px}
.stubs.wide .stub b{font-size:34px}
.stubs.wide .stub-d{font-size:16px}
html.js .stubs.wide .stub.reveal:not(.in){transform:translateY(14px) rotate(-3deg)}

/* rules (docs) */
.docs{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,4vw,64px);padding-bottom:64px;align-items:start}
.docnav{position:sticky;top:calc(var(--bar) + 24px);display:flex;flex-direction:column;gap:2px}
.docnav .k{margin-bottom:10px}
.docnav a{display:flex;align-items:center;gap:12px;padding:8px 12px 6px;font:400 21px/1.1 var(--disp);text-transform:uppercase;letter-spacing:.03em;border-left:4px solid transparent;transition:background .2s,border-color .2s}
.docnav a:hover{background:var(--paper)}
.docnav a.on{border-left-color:var(--verm);background:var(--paper)}
.tab-n{font:700 13px var(--agate);color:var(--mute)}
.booklet-page{background:var(--paper);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--green);padding:clamp(24px,4vw,56px) clamp(22px,4.4vw,64px)}
.doc{position:relative;padding:0 0 34px;margin-bottom:34px;border-bottom:1px dashed var(--line2)}
.doc:last-child{border-bottom:0;margin-bottom:0}
.doc-n{font:700 13px var(--agate);letter-spacing:.14em;text-transform:uppercase;color:var(--vermink);margin-bottom:6px}
.doc .h3{margin-bottom:14px}
.doc p{max-width:40em;color:var(--ink2);margin-bottom:12px}
.doc-pn{position:absolute;right:0;top:4px;transform:rotate(-4deg);font-size:23px;max-width:15em;text-align:right}
.doc-fig{margin:24px 0 0;border:2px solid var(--ink);background:var(--photo)}
.doc-fig svg{width:100%;height:auto}
.doc-fig figcaption{font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;background:var(--paper);border-top:2px solid var(--ink);color:var(--ink2)}
.doc-stubs{margin-top:6px}
.rules{counter-reset:r;display:grid;gap:10px}
.rules li{counter-increment:r;position:relative;padding:10px 0 10px 56px;border-top:1px solid var(--line);color:var(--ink2)}
.rules li::before{content:counter(r,upper-roman);position:absolute;left:0;top:8px;font:400 26px/1 var(--disp);color:var(--green)}

/* entry form (create) */
.create{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);padding-bottom:64px;align-items:start}
.slip{background:var(--paper);border:2px solid var(--ink);padding:clamp(20px,3vw,36px);box-shadow:10px 10px 0 rgba(28,23,18,.16);display:grid;gap:20px;
  background-image:repeating-linear-gradient(transparent 0 35px,rgba(15,90,56,.1) 35px 36px)}
.slip-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:700 12px var(--agate);letter-spacing:.12em;text-transform:uppercase;border-bottom:4px double var(--ink);padding-bottom:10px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:grid;gap:6px;position:relative}
.field>span{font:400 20px/1 var(--disp);text-transform:uppercase;letter-spacing:.04em}
.field em{font:400 13px var(--agate);letter-spacing:.02em;text-transform:none;color:var(--mute);margin-left:6px}
input:not([type=range]):not([type=file]),textarea{width:100%;background:transparent;border:0;border-bottom:2px solid var(--ink);padding:8px 2px;font:400 19px/1.4 var(--agate);color:var(--ink);border-radius:0}
input::placeholder,textarea::placeholder{color:#857A69}
input:focus-visible,textarea:focus-visible{outline:none;border-bottom-color:var(--vermink);background:rgba(244,177,30,.18)}
textarea{resize:vertical}
input[aria-invalid="true"]{border-bottom-color:var(--vermink)}
.err{color:var(--vermink);font:700 13px var(--agate)}
.count{justify-self:end;font-size:13px;color:var(--mute)}
.drop{display:grid;gap:2px;border:2px dashed var(--ink2);padding:16px;cursor:pointer;position:relative;background:rgba(247,236,203,.6)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop:focus-within{outline:3px solid var(--vermink);outline-offset:3px}
.drop-t{font:400 20px var(--disp);text-transform:uppercase}.drop-s{font-size:14px;color:var(--ink2)}
.range{display:flex;align-items:center;gap:16px}
.range input{flex:1;accent-color:var(--vermink);height:28px}
.range output{font:700 22px var(--agate);min-width:3.2em}
.slip-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px dashed var(--line2);padding-top:14px}
.slip-foot .hand{font-size:22px;transform:rotate(-2deg)}
.create-side{display:grid;gap:28px}
.runner-card{position:relative;background:var(--paper);border:2px solid var(--ink);padding:20px 22px 22px;box-shadow:8px 8px 0 var(--green)}
.rc-k{display:flex;justify-content:space-between;font:700 12px var(--agate);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border-bottom:3px double var(--ink);padding-bottom:8px}
.rc-top{display:flex;gap:16px;align-items:center;margin:14px 0 6px;min-height:132px}
.rc-silk svg{width:120px;height:120px}
.rc-silk.pop svg{animation:pop .45s var(--ease)}
@keyframes pop{0%{transform:scale(.8) rotate(-6deg)}60%{transform:scale(1.06) rotate(2deg)}}
.rc-img img{width:110px;height:110px;object-fit:cover;border:2px solid var(--ink)}
.rc-name{font:400 40px/1 var(--disp);text-transform:uppercase;overflow-wrap:anywhere}
.rc-tick{color:var(--ink2);font-size:16px;margin:4px 0 10px}
.rc-desc{font-size:16px;color:var(--ink2);margin-bottom:14px;overflow-wrap:anywhere}
.rc-share{display:flex;justify-content:space-between;font:400 18px var(--disp);text-transform:uppercase;letter-spacing:.04em}
.rc-bar{height:12px;background:var(--deep);margin:6px 0 14px;border:1.5px solid var(--ink)}
.rc-bar span{display:block;height:100%;background:var(--verm);transform-origin:left;transition:transform .25s var(--ease)}
.rc-links{font-size:13px;color:var(--ink2);margin-bottom:10px;overflow-wrap:anywhere}
.rc-stamp{position:absolute;right:18px;top:56px;font-size:24px;--sr:8deg}
.rc-note{font-size:14px;color:var(--mute)}
.record{padding:4px 2px}.record .h3{margin-bottom:14px}

/* form guide (token) */
.token{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);padding-bottom:64px;align-items:start}
.form-card{background:var(--paper);border:2px solid var(--ink);padding:22px;box-shadow:10px 10px 0 var(--green);display:grid;grid-template-columns:150px 1fr;gap:12px 28px}
.fc-k{grid-column:1/-1;display:flex;justify-content:space-between;font:700 12px var(--agate);letter-spacing:.12em;text-transform:uppercase;border-bottom:4px double var(--ink);padding-bottom:8px}
.token-silk{color:var(--mute)}.token-silk svg{width:140px;height:140px}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dotted var(--line2)}
.facts dt{font:400 18px var(--disp);text-transform:uppercase;letter-spacing:.04em}
.facts dd{font:400 16px var(--agate);text-align:right}
.facts .addr{overflow-wrap:anywhere;max-width:60%}
.token-side{display:grid;gap:22px;justify-items:start}
.token-side .clip{--u:13px}
.token-side .ticket{margin-top:4px}
.tk-pn{transform:rotate(-3deg);font-size:24px}

/* 404 */
.nf{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,4vw,56px) var(--gut) 72px}
.h-nf{font:400 clamp(72px,24vw,360px)/.8 var(--disp);text-transform:uppercase;color:var(--ink);position:relative;display:inline-block;margin:0 0 24px}
.h-nf::after{content:"";position:absolute;left:-2%;right:-2%;top:46%;height:.07em;background:var(--verm);transform:rotate(-3deg);mix-blend-mode:multiply}
.nf-card{background:var(--paper);border:2px solid var(--ink);max-width:640px;padding:12px 18px;margin-bottom:22px;transform:rotate(-1deg)}
.nf-row{display:flex;align-items:center;gap:14px;position:relative;color:var(--mute)}
.nf-row svg{width:40px;height:40px}
.nf-name{font:400 26px var(--disp);text-transform:uppercase;color:var(--ink)}
.nf-strike{position:absolute;left:68px;right:110px;top:50%;height:3px;background:var(--vermink)}
.nf-k{margin-left:auto;font:400 22px var(--disp);text-transform:uppercase;color:var(--vermink);border:3px double var(--vermink);padding:2px 8px 0;transform:rotate(-4deg)}
.nf .deck{font-size:clamp(20px,2vw,26px);margin-bottom:8px}
.nf-pn{font-size:26px;transform:rotate(-2deg);margin-bottom:26px}
.ctas{display:flex;gap:26px;align-items:center;flex-wrap:wrap}

/* footer (inner pages): the finish, small */
.foot{position:relative;overflow:hidden;border-top:4px double var(--ink);background:var(--ground);padding:48px var(--gut) 0;margin-top:24px}
.foot-post{position:absolute;left:calc(var(--gut) - 10px);top:-6px;width:40px}
.foot-post svg{width:40px;height:auto}
.foot-in{max-width:var(--wrap);margin:0 auto;padding-left:56px;display:grid;gap:30px}
.foot-line{font:400 clamp(30px,3.4vw,48px)/1 var(--disp);text-transform:uppercase}
.foot-line .hand{font-size:.62em;text-transform:none;margin-left:10px;color:var(--vermink)}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:28px}
.foot-cols .k{margin-bottom:8px}
.foot-cols a{font:400 22px/1.6 var(--disp);text-transform:uppercase;letter-spacing:.04em}
.foot-cols a:hover{color:var(--vermink)}
.foot-base{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:13px;color:var(--ink2);border-top:1px solid var(--line2);padding-top:14px}
.foot-word{font:900 clamp(120px,22vw,340px)/.74 var(--text);font-variation-settings:"opsz" 144;letter-spacing:-.05em;white-space:nowrap;margin:26px 0 -.2em -.04em;color:var(--ink)}
.foot-word::first-letter{color:var(--verm)}

.toast{position:fixed;left:50%;bottom:64px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:10px 16px;font:700 13px var(--agate);opacity:0;transition:.25s;pointer-events:none;z-index:100}
.toast.on{opacity:1;transform:translate(-50%,0)}


/* ================================================================ depth: light, shade, materials and layers
   One lamp, upper left. Paper lies on paper (soft layered shadows, lit top edges, lifted corners); enamel boards have a bevel,
   screws and a slab edge; flip cards are split flaps; cloth, coins, rosettes and the post are shaded volumes (SVG, src/gen.py).
   On the course, [data-z] layers move at their own rate (app.js). Everything here is static: reduced motion keeps all of it. */
.hand{text-shadow:0 0 .5px rgba(79,71,61,.35)}
.s-h,.pg-h,.h3,.ink-k,.banner .b2,.cond-k,.rk-t,.bk-t,.clip-t,.empty-t{text-shadow:0 .03em 0 rgba(var(--lt),.55)}
.s-h{text-shadow:calc(.11*var(--u)) calc(.08*var(--u)) 0 var(--mari),0 .03em 0 rgba(var(--lt),.55)}
.pg-h{text-shadow:.03em .02em 0 var(--mari),0 .03em 0 rgba(var(--lt),.55)}
.nameplate span:first-child{text-shadow:0 .02em 0 rgba(var(--lt),.75),0 -.008em 0 rgba(var(--shc),.3)}
.stamp,.photo-stamp,.rc-stamp{mix-blend-mode:multiply;text-shadow:0 0 1px currentColor}

/* tape: translucent, with a sheen and frayed ends */
.tape,.cap::before,.t-pc,.t-cl{background:linear-gradient(180deg,rgba(var(--lt),.45),rgba(244,177,30,.42) 38%,rgba(244,177,30,.6) 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(184,124,8,.18),0 1px 1px rgba(var(--shc),.12)}
.t-pc,.t-cl{position:absolute;display:block;z-index:2;width:calc(7*var(--u));height:calc(1.6*var(--u));left:50%;top:calc(-.7*var(--u));margin-left:calc(-3.5*var(--u));transform:rotate(-4deg);
  clip-path:polygon(2% 10%,10% 0,24% 8%,38% 0,52% 9%,66% 0,80% 8%,92% 0,100% 12%,98% 90%,88% 100%,74% 92%,60% 100%,46% 91%,32% 100%,18% 92%,4% 100%)}
.t-cl{transform:rotate(5deg);left:30%}

/* the front page */
.ticker{background:linear-gradient(180deg,#1D7A4E,var(--green) 40%,#0A4529);box-shadow:inset 0 1px 0 rgba(var(--lt),.28),0 1px 0 rgba(0,0,0,.35),0 4px 6px -1px rgba(var(--shc),.4),0 10px 16px -6px rgba(var(--shc),.35)}
.tick-ab{z-index:3}
.tk-run b{box-shadow:inset 0 1px 0 rgba(var(--lt),.6),inset 0 -1px 0 rgba(0,0,0,.18)}
.ear{box-shadow:0 1px 0 rgba(var(--lt),.7);background:linear-gradient(180deg,rgba(var(--lt),.4),rgba(var(--lt),0))}
.s-cta .ticket{filter:drop-shadow(0 1px 0 rgba(var(--shc),.5)) drop-shadow(3px 6px 5px rgba(var(--shc),.28)) drop-shadow(10px 18px 18px rgba(var(--shc),.2))}
.s-photo{box-shadow:0 2px 0 rgba(var(--lt),.5),0 6px 10px -4px rgba(var(--shc),.3)}
.s-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--shc),.55),rgba(var(--shc),.2) 2%,rgba(var(--shc),.06) 5%,rgba(var(--shc),0) 9%),linear-gradient(0deg,rgba(var(--shc),.2),rgba(var(--shc),0) 3.5%),
  linear-gradient(100deg,rgba(var(--lt),.22),rgba(var(--lt),0) 30%,rgba(var(--shc),0) 62%,rgba(var(--shc),.14))}
/* the print's bottom-right corner lifts off the page */
.ph-curl{position:absolute;right:-3px;bottom:-3px;width:calc(5*var(--u));height:calc(5*var(--u));z-index:2;pointer-events:none;
  background:linear-gradient(135deg,rgba(var(--lt),0) 49%,#E9DBB0 50%,#FBF3DC 64%,#D8C695 100%);
  box-shadow:-3px -3px 7px rgba(var(--shc),.32);clip-path:polygon(100% 0,0 100%,0 0);transform:scale(-1,-1);border-radius:0 0 calc(1.4*var(--u)) 0}
.ph-curl::before{content:"";position:absolute;inset:0;background:var(--ground)}
.cap{background:var(--sheen),var(--paper);box-shadow:0 1px 1px rgba(var(--shc),.3),3px 6px 8px rgba(var(--shc),.22),10px 20px 30px rgba(var(--shc),.22),var(--edge);border-color:rgba(28,23,18,.85)}
.cap-k b,.cap-list b{background:radial-gradient(circle at 35% 30%,#4A3F35,var(--ink) 60%);box-shadow:inset 0 1px 0 rgba(var(--lt),.25),1px 2px 2px rgba(var(--shc),.35)}
.c2 .cap-k b{background:radial-gradient(circle at 35% 30%,#D2502A,var(--vermink) 65%)}.c4 .cap-k b{background:radial-gradient(circle at 35% 30%,#1F7C50,var(--green) 65%)}
.hero .cap,.hero .s-cta{translate:calc(var(--mx,0)*-7px) calc(var(--my,0)*-5px);transition:translate .5s var(--ease)}
.hero .cap.c2,.hero .cap.c4{translate:calc(var(--mx,0)*-10px) calc(var(--my,0)*-7px)}

/* saddlecloths, prints and cards cast their shadows on the page */
.s-cloth svg,.art-e,.art-w,.s-post svg,.lb-print svg,.coin-art,.rosettes svg,.sh-art .rosette,.foot-post svg{filter:var(--ds-2)}
.s-cloth.sm svg{filter:var(--ds-1)}
.art-pencil{filter:drop-shadow(1px 2px 1px rgba(var(--shc),.25))}
.vword{filter:drop-shadow(2px 4px 3px rgba(var(--shc),.3)) drop-shadow(8px 14px 14px rgba(var(--shc),.16))}
.s-stamp{filter:none}

/* split-flap number and the enamel boards */
.flipnum b{background:linear-gradient(180deg,#1C7A4E 0,#12623E 49%,#08391F 50%,#0B4A2D 52%,#0E5636 100%);
  box-shadow:inset 0 2px 0 rgba(var(--lt),.28),inset 0 -2px 0 rgba(0,0,0,.35),var(--slab),var(--sh-2);text-shadow:0 3px 0 rgba(0,0,0,.28)}
.flipnum b::after{height:calc(.3*var(--u));margin-top:calc(-.15*var(--u));background:linear-gradient(#021A0E 0 55%,rgba(var(--lt),.22) 55%)}
.flipnum b::before{content:"";position:absolute;left:0;right:0;top:50%;bottom:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 30%);z-index:1}
.tote,.board{background:var(--enamel);box-shadow:inset 0 2px 0 rgba(var(--lt),.24),inset 0 -3px 0 rgba(0,0,0,.32),inset 0 0 0 calc(.3*var(--u)) rgba(11,67,41,.9),inset 0 0 0 calc(.3*var(--u) + 1px) rgba(0,0,0,.2),var(--slab),var(--sh-2);position:relative}
.tote::before,.board::before,.clockart::before,.strip::before{content:"";position:absolute;inset:5px;pointer-events:none;
  background:var(--screw) 0 0/11px 11px no-repeat,var(--screw) 100% 0/11px 11px no-repeat,var(--screw) 0 100%/11px 11px no-repeat,var(--screw) 100% 100%/11px 11px no-repeat}
.fc{background:var(--flap);box-shadow:inset 0 1px 0 rgba(var(--lt),.18),0 1px 0 #000,1px 2px 2px rgba(0,0,0,.35);text-shadow:0 1px 0 #000}
.fc::after{top:calc(50% - 1px);height:2px;background:linear-gradient(#000 50%,rgba(var(--lt),.14) 50%)}
.tt-bulbs i{background:radial-gradient(circle at 36% 30%,rgba(var(--lt),.4) 0 10%,#0D4A2E 36%,#032515 100%);box-shadow:inset 0 -1px 1px rgba(0,0,0,.4),0 1px 0 rgba(var(--lt),.12)}
.tt-bulbs i.on{background:radial-gradient(circle at 38% 32%,#FFFBE8 0 12%,#FFD45A 32%,var(--mari) 60%,#B87708 100%);box-shadow:0 0 calc(.45*var(--u)) rgba(255,196,48,.85),0 0 calc(1.4*var(--u)) rgba(255,196,48,.38)}
html.fx .stg:not(.in) .tt-bulbs i.on{background:radial-gradient(circle at 36% 30%,rgba(var(--lt),.4) 0 10%,#0D4A2E 36%,#032515 100%);box-shadow:inset 0 -1px 1px rgba(0,0,0,.4)}
.tt-head,.bd-top{border-bottom-color:rgba(0,0,0,.3)!important;box-shadow:0 1px 0 rgba(var(--lt),.16)}
.bd-cells{border-bottom-color:rgba(0,0,0,.3);box-shadow:0 1px 0 rgba(var(--lt),.16)}
.bd-v{text-shadow:0 0 calc(.6*var(--u)) rgba(244,177,30,.25),0 2px 0 rgba(0,0,0,.3)}

/* paper sheets lying on the page: sheen, a lit top edge, soft shadows, lifted corners */
.notice{position:relative;background:var(--sheen),var(--paper);box-shadow:var(--sh-2),var(--edge)}
.notice::before,.notice::after,.classifieds::after,.booklet-page::after{content:"";position:absolute;z-index:-1;bottom:12px;width:44%;height:22%;pointer-events:none}
.notice::before{left:14px;box-shadow:-2px 12px 14px rgba(var(--shc),.22);transform:rotate(-2.5deg)}
.notice::after,.classifieds::after,.booklet-page::after{right:12px;box-shadow:8px 15px 16px rgba(var(--shc),.3);transform:rotate(3deg)}
.rk-n{background:radial-gradient(circle at 35% 30%,rgba(var(--lt),.9),rgba(var(--lt),0) 70%);box-shadow:1px 2px 2px rgba(var(--shc),.22),inset 0 -1px 1px rgba(var(--shc),.15)}
.s-pencil,.s-clip{filter:var(--ds-2)}
.s-params .params,.s-letters .letters{background:var(--sheen),#F8EED1;padding:calc(1.2*var(--u)) calc(1.6*var(--u)) calc(.4*var(--u));box-shadow:var(--sh-1),var(--edge)}
.booklet{background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(var(--lt),.14) 4%,rgba(var(--lt),0) 12%),var(--enamel);
  box-shadow:inset 0 1px 0 rgba(var(--lt),.25),1px 1px 0 #F7ECCB,2px 2px 0 #C4B384,3px 3px 0 #F7ECCB,4px 4px 0 #C4B384,5px 5px 0 #F7ECCB,6px 6px 0 #A8976A,var(--sh-2);
  transition:transform .45s var(--spring),box-shadow .35s var(--ease)}
.booklet:hover{transform:rotate(-1deg) translate(-3px,-8px);box-shadow:inset 0 1px 0 rgba(var(--lt),.25),1px 1px 0 #F7ECCB,2px 2px 0 #C4B384,3px 3px 0 #F7ECCB,4px 4px 0 #C4B384,5px 5px 0 #F7ECCB,6px 6px 0 #A8976A,var(--sh-3)}
.bk-t{text-shadow:0 2px 0 rgba(0,0,0,.3)}

/* the finish: the post stands in front of a wood-type wordmark */
.fin-word,.foot-word{text-shadow:-.004em -.004em 0 rgba(var(--lt),.5),.006em .006em 0 #3E3127,.012em .012em 0 #3E3127,.018em .018em 0 #31261D,.024em .024em 0 #31261D,.03em .03em 0 #261D16,.05em .07em .06em rgba(var(--shc),.3)}
.fin-word::first-letter,.foot-word::first-letter{text-shadow:-.004em -.004em 0 rgba(var(--lt),.5),.006em .006em 0 #A42E10,.012em .012em 0 #A42E10,.018em .018em 0 #8C260B,.024em .024em 0 #8C260B,.03em .03em 0 #741E08,.05em .07em .06em rgba(var(--shc),.3)}
.fin-cols,.foot-cols{text-shadow:0 1px 0 rgba(var(--lt),.6)}

/* the rail: a painted running rail on striped posts */
.rail{background:linear-gradient(180deg,rgba(var(--lt),.45),rgba(var(--lt),0)),var(--ground);box-shadow:0 -1px 0 rgba(var(--lt),.6),0 -8px 16px -8px rgba(var(--shc),.3)}
.rail ol::before{background:linear-gradient(180deg,#FFFDF4,#F3E6C2 45%,#BFAE80);box-shadow:0 0 0 1px var(--ink),0 3px 3px rgba(var(--shc),.35)}
.rail a::before{background:linear-gradient(90deg,rgba(var(--lt),.55),rgba(var(--lt),0) 45%,rgba(var(--shc),.45)),repeating-linear-gradient(var(--verm) 0 5px,var(--paper) 5px 10px);box-shadow:0 0 0 1px var(--ink),2px 2px 2px rgba(var(--shc),.3)}
.rail a.on span{box-shadow:inset 0 1px 0 rgba(var(--lt),.6),1px 1px 2px rgba(var(--shc),.3)}
.rail-runner svg{filter:drop-shadow(2px 3px 2px rgba(var(--shc),.4))}

/* the course: the broadsheet is folded between stages (a valley fold, lit from the left) */
.home .stg+.stg::before{content:"";position:absolute;pointer-events:none;z-index:-1;left:0;right:0;top:-34px;height:68px;
  background:linear-gradient(180deg,rgba(var(--shc),0),rgba(var(--shc),.05) 40%,rgba(var(--shc),.13) 49.5%,rgba(var(--lt),.55) 50.5%,rgba(var(--lt),.12) 58%,rgba(var(--lt),0))}

/* inner pages: the same sheets, boards and prints */
.flag-s{background:linear-gradient(162deg,#43382E,var(--ink) 40%,#0E0B08);box-shadow:var(--sh-1),inset 0 1px 0 rgba(var(--lt),.2)}
.classifieds,.card-tbl,.nf-card,.slip,.booklet-page{position:relative;background-image:var(--sheen);box-shadow:var(--sh-2),var(--edge)}
.slip{background-image:var(--sheen),repeating-linear-gradient(transparent 0 35px,rgba(15,90,56,.1) 35px 36px)}
.slot{box-shadow:inset 3px 4px 7px rgba(var(--shc),.13),inset -1px -1px 0 rgba(var(--lt),.55);background:rgba(var(--shc),.025)}
.spec-card,.runner-card,.form-card{background-image:var(--sheen);box-shadow:0 1px 1px rgba(var(--shc),.3),2px 5px 6px rgba(var(--shc),.2),var(--edge),
  10px 12px 0 -1px var(--green),10px 12px 0 0 #0A4128,15px 22px 26px rgba(var(--shc),.3);transition:transform .45s var(--spring),box-shadow .35s var(--ease)}
.spec-card:hover{transform:rotate(-3deg) translateY(-6px)}
.booklet-page{box-shadow:var(--edge),0 1px 1px rgba(var(--shc),.3),2px 4px 6px rgba(var(--shc),.18),1px 1px 0 #F7ECCB,3px 3px 0 #D2C294,4px 4px 0 #F7ECCB,6px 6px 0 #C4B384,
  10px 10px 0 -1px var(--green),10px 10px 0 0 #0A4128,16px 22px 28px rgba(var(--shc),.28)}
.docnav a.on,.docnav a:hover{background:var(--sheen),var(--paper);box-shadow:var(--sh-1),var(--edge)}
.doc-fig{position:relative}
.doc-fig::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 2px 3px 8px rgba(var(--shc),.35),inset 0 0 0 1px rgba(var(--shc),.1)}
.clockart,.strip{position:relative;background:var(--enamel);box-shadow:inset 0 2px 0 rgba(var(--lt),.24),inset 0 -3px 0 rgba(0,0,0,.3),var(--slab),var(--sh-2)}
.strip{box-shadow:inset 0 2px 0 rgba(var(--lt),.2),inset 0 -2px 0 rgba(0,0,0,.3),var(--slab),var(--sh-2)}
.sp-v{text-shadow:0 2px 0 rgba(0,0,0,.3)}
.rosettes li svg,.sh-art .rosette{transition:transform .45s var(--spring),filter .35s var(--ease)}
.rosettes li:hover svg{transform:rotate(-8deg) translateY(-8px) scale(1.04);filter:var(--ds-3)}
.r-b{position:relative;z-index:-1}
.h-wire span:last-child::after{box-shadow:.05em .04em .04em rgba(var(--shc),.4)}
.h-nf::after{mix-blend-mode:normal;box-shadow:inset 0 2px 0 rgba(var(--lt),.3),3px 5px 6px rgba(var(--shc),.35)}
.nf-card{background-color:var(--paper)}
.nf-strike{box-shadow:1px 2px 2px rgba(var(--shc),.3)}
.nf-k{background:rgba(var(--lt),.4)}
input:not([type=range]):not([type=file]),textarea{box-shadow:0 1px 0 rgba(var(--lt),.8)}
.drop{box-shadow:inset 3px 4px 8px rgba(var(--shc),.13),0 1px 0 rgba(var(--lt),.7)}
.rc-bar{box-shadow:inset 1px 2px 3px rgba(var(--shc),.3)}
.rc-bar span{background:linear-gradient(180deg,#F06A42,var(--verm) 50%,#B8320F)}
.spec-bar{box-shadow:inset 1px 2px 3px rgba(var(--shc),.25)}
.spec-bar span{background:linear-gradient(180deg,#F06A42,var(--verm) 50%,#B8320F)}
.foot{box-shadow:inset 0 10px 14px -10px rgba(var(--shc),.3)}
.toast{box-shadow:var(--sh-2)}
.menu{box-shadow:var(--sh-1),var(--edge)}
.nav.open{box-shadow:0 14px 24px -10px rgba(var(--shc),.4)}

/* ---------------------------------------------------------------- below 1024: one column, everything in reading order */
@media (max-width:1023.98px){
  body{font-size:17px}
  .bar{gap:12px}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--paper);border-bottom:4px double var(--ink);padding:8px var(--gut) 16px}
  .nav.open{display:flex}
  .nav a{font-size:28px;padding:10px 0 8px;border-bottom:1px dashed var(--line2);background:none}
  .nav .nav-cta{display:block;color:var(--vermink)}
  .menu{display:flex}
  .bar-right .ticket{display:none}
  .bar-clock .k{display:none}
  .bar-clock{font-size:19px}
  .ab{position:relative;left:auto;top:auto;width:auto;height:auto!important;transform:none}
  .deco,.s-cloth,.cap,.ph-credit,.pn-photo,.s-vword,.s-pencilart,.shutter,.s-post,.s-flipnum{display:none}
  .stg{width:auto;height:auto;display:flex;flex-direction:column;gap:18px;padding:44px var(--gut) 48px;border-bottom:4px double var(--ink)}
  .hero{padding-top:20px;gap:12px}
  .ear{display:none}
  .np{order:-1}
  .nameplate{font-size:clamp(54px,17vw,96px)}
  .dateline{font-size:11px;flex-wrap:wrap;gap:4px 14px}
  .dateline span:nth-child(3),.dateline span:nth-child(4){display:none}
  .tick-ab{height:30px;margin:0 calc(-1*var(--gut))}
  .ticker{font-size:12px;line-height:30px}
  .banner .b1{font-size:clamp(50px,14.5vw,92px);text-shadow:3px 2px 0 var(--mari)}
  .banner .b2{font-size:clamp(28px,8vw,48px)}
  .deck{font-size:19px}
  .s-cta .ticket{font-size:24px}
  .walk{font-size:22px}
  .s-photo{margin:6px calc(-1*var(--gut)) 0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .s-photo .photo{width:880px;max-width:none;height:auto}
  .swipe{display:block;order:0;margin-bottom:-8px}
  .s-photo{order:1}.cap-list{order:2}.pn-photo{order:3}
  .s-headblk{order:-5}.s-p{order:-4}.s-cond{order:-3}
  .s-pstamp{display:none}
  .cap-list{display:grid;gap:12px;counter-reset:c}
  .cap-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45}
  .cap-list b{flex:none;width:30px;height:30px;font-size:20px;margin-top:-2px}
  .cap-list li:nth-child(2) b{background:var(--vermink)}.cap-list li:nth-child(4) b{background:var(--green)}
  .hand,.pn .hand{font-size:23px}
  .s-h{font-size:clamp(44px,12vw,72px);text-shadow:2px 2px 0 var(--mari)}
  .s-h.xl{font-size:clamp(52px,14vw,88px)}
  .s-headblk .kick{font-size:12px}
  .s-body{font-size:17px}
  .cond-k{font-size:24px}
  .cond li{font-size:16px;padding:9px 0 9px 26px}
  .cond li::before{top:14px;width:12px;height:12px}
  .s-art{max-width:520px}
  .s-stamp .stamp{font-size:30px}
  .s-stamp{align-self:flex-start;transform:rotate(-6deg)}
  .s-tote{order:5}
  .flipnum b{width:90px;height:100px;font-size:92px}
  .tote{padding:12px}
  .tt-head,.tt-foot{font-size:10px}
  .tt-row{grid-template-columns:34px 30px minmax(0,1fr);height:auto;gap:8px}
  .tt-bulbs{display:none}
  .fc{font-size:22px;height:32px;min-width:16px}
  .tt-pos .fc{width:30px}
  .tt-name .fc{font-size:18px;min-width:14px}
  .tt-silk svg{width:28px}
  .s-stubs .stubs{grid-template-columns:1fr 1fr}
  .s-stubs .stub b{font-size:24px}.s-stubs .stub-d{font-size:14px}.s-stubs .stub-n{font-size:11px}
  .photo-stamp{font-size:26px}
  .s-pstamp{align-self:flex-start}
  .params,.letters{columns:1}
  .s-params .params,.s-letters .letters{padding:16px 18px 4px}
  .prm dt{font-size:24px}.prm dd{font-size:16px}
  .ink-k,.ink-k.pen{font-size:40px}
  .ink-s{font-size:17px}
  .inklist li{font-size:17px;padding:10px 0 10px 26px}
  .inklist li::before{top:16px;width:12px;height:12px}
  .s-pencil .pcard{padding:24px 22px 28px;background-image:var(--sheen),repeating-linear-gradient(transparent 0 33px,rgba(15,90,56,.22) 33px 34px)}
  .penlist li{font-size:24px;line-height:34px;padding-left:22px}
  .notice{padding:16px 18px 22px}
  .notice-top{font-size:11px}
  .enquiry{font-size:clamp(56px,17vw,110px)}
  .notice .s-h{font-size:36px}
  .notice-s{font-size:17px}
  .risks{grid-template-columns:1fr;gap:16px}
  .risks li{padding-left:40px}
  .rk-n{width:28px;height:28px;font-size:18px}
  .rk-t{font-size:22px}.rk-s{font-size:16px}
  .lt-q{font-size:18px}.lt-a{font-size:16px}.lt-ed{font-size:11px}
  .booklet{padding:20px;transform:none;max-width:420px}
  .bk-k{font-size:11px}.bk-t{font-size:40px}.bk-l{font-size:15px}.bk-a{font-size:22px}
  .board{padding:14px}
  .bd-top{font-size:40px}
  .bd-k{font-size:10px}
  .bd-cells{grid-template-columns:repeat(2,1fr);gap:14px}
  .bd-v{font-size:30px}
  .bd-lanes li{height:38px;gap:10px}
  .bd-lanes svg{width:26px}
  .ln-n{font-size:20px;width:18px}.ln-v{font-size:10px}
  .bd-msg{font-size:17px}
  .clip{padding:18px 20px 22px;transform:none}
  .clip-k{font-size:11px}.clip-t{font-size:30px}.clip-s{font-size:16px}.clip .lnk{font-size:20px}
  .finish{padding-bottom:0}
  .fin-cols{grid-template-columns:1fr 1fr}
  .fin-cols .k{font-size:11px}.fin-cols a{font-size:22px}
  .fin-legal{font-size:13px}
  .fin-word{font-size:30vw;margin:10px 0 -.18em}
  .rail{display:none!important}
  .sh-grid,.lb-grid,.specimen,.places,.docs,.create,.token{grid-template-columns:minmax(0,1fr)}
  .sh-art{justify-self:start}
  .slots{grid-template-columns:repeat(3,1fr)}
  .rosettes{grid-template-columns:repeat(2,1fr)}
  .docnav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
  .docnav .k{width:100%}
  .docnav a{font-size:18px;border:1px solid var(--line2);border-left-width:4px}
  .doc-pn{position:static;text-align:left;margin-top:6px}
  .doc-fig{overflow-x:auto}.doc-fig svg{width:760px;max-width:none}
  .tbl-pn{position:static;margin-top:8px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-in{padding-left:44px}
}
@media (min-width:1024px) and (max-width:1279px){.rail a{font-size:9.5px;letter-spacing:.02em;padding-left:8px}.rail-hint{display:none}}
@media (max-width:560px){
  .row2{grid-template-columns:1fr}
  .slots{grid-template-columns:repeat(2,1fr)}
  .slot:nth-child(n+7){display:none}
  .stubs{grid-template-columns:1fr 1fr}
  .form-card{grid-template-columns:1fr}
  .bar-clock{display:none}
  .wordmark{font-size:24px}
  .flag-r{display:none}
  .strip .lnk{margin:14px 20px}
}
@media (prefers-reduced-motion:reduce){
  .tk-run{animation:none}
  .walk span{animation:none}
  .flip .fd.go{animation:none}
  .ticket,.lnk,.booklet,.nav a{transition:none}
}