/* The Sales Letter: one stylesheet, one system.
   Tokens first. Everything below uses them; nothing sets its own font or color. */
:root{
  /* ink and paper */
  --paper:#FDF9F2;          /* warm white, not cream */
  --paper-2:#F5EDE0;        /* the one deeper tint, for panels and the receipt */
  --ink:#2A2724;            /* warm near-black */
  --ink-soft:#5E5852;
  --ink-faint:#9A9289;
  --rule:#E3DACD;
  --pen:#B3241B;            /* the red pen. Annotations, underlines, the stamp. Nothing else. */
  --onink:#FDF9F2;
  /* aliases for ml.css */
  --accent:var(--pen);--muted:var(--ink-soft);--link:var(--ink);--visited:var(--ink);--onaccent:var(--onink);
  /* type */
  --serif:"Newsreader",Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,monospace;
  --hand:"Kalam","Segoe Print","Bradley Hand",cursive;
  /* fluid scale, 375px -> 1200px */
  --t-1:clamp(14px,.84rem + .2vw,15px);
  --t0:clamp(17px,1.02rem + .18vw,18.5px);
  --t1:clamp(20px,1.12rem + .6vw,23px);
  --t2:clamp(25px,1.3rem + 1.2vw,32px);
  --t3:clamp(40px,1.8rem + 3.2vw,64px);
  --meta:12.5px;
  --lh:1.5;
  /* space */
  --s1:8px; --s2:12px; --s3:clamp(18px,1rem + .6vw,24px); --s4:clamp(28px,1.4rem + 1.4vw,40px); --s5:clamp(44px,2rem + 2.4vw,64px);
  /* the galley */
  --gutter:14px;
  --margin:0px;             /* the editor's margin. Closed until the switch opens it (phones). */
  --margin-open:62px;
  --gap:10px;
  --measure:34em;
}
body.on{--margin:var(--margin-open)}
@media(min-width:720px){:root{--margin:9.5rem;--margin-open:9.5rem;--gap:1.25rem;--gutter:24px}}

*{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{background:var(--paper);color:var(--ink)}
body{margin:0;font:400 var(--t0)/var(--lh) var(--serif);font-variant-numeric:oldstyle-nums;font-kerning:normal;font-optical-sizing:auto;padding:0 var(--gutter) var(--s5);overflow-x:hidden}
::selection{background:color-mix(in srgb,var(--pen) 22%,transparent)}
a{color:inherit;text-decoration:underline 1px var(--pen);text-underline-offset:.2em}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--pen);outline-offset:3px}
p{margin:0}
button{font:inherit;color:inherit}

/* ---- the sheet: a margin column and a text column ---- */
.sheet{position:relative;max-width:calc(var(--margin) + var(--gap) + var(--measure));margin:0 auto;padding-top:var(--s3)}
.lh{padding:0;margin:0 0 var(--s4) calc(var(--margin) + var(--gap));border:0;transition:margin .45s cubic-bezier(.2,.7,.2,1)}
.ml .lh{margin-left:0;border:0}
.wm{display:inline-grid;justify-items:start;font:700 22px/.92 var(--serif);font-variation-settings:"opsz" 48;letter-spacing:-.012em;color:var(--ink);text-decoration:none;width:max-content}
.wm .dot,.bw .dot{position:relative}
.wm .dot:after,.bw .dot:after{content:"";position:absolute;left:50%;top:.02em;width:.21em;height:.21em;margin-left:-.105em;border-radius:50%;background:var(--pen)}
.lh .name{display:none}
.blk{display:grid;grid-template-columns:var(--margin) var(--gap) minmax(0,1fr);margin:0 0 var(--s2);transition:grid-template-columns .45s cubic-bezier(.2,.7,.2,1)}
.blk .txt,.blk>:not(.txt):not(.note){grid-column:3;min-width:0}
.blk .note{display:none}
.blk.bleed .txt{grid-column:1/-1}        /* panels that break the galley on purpose */
.letter p.body{text-indent:1.4em}
.body .cue{display:block;margin-top:.55em;font-weight:700;text-indent:0}
.sal{margin:0 0 .5em}

/* ---- margin notes (the pen) ---- */
.notes{position:absolute;left:0;top:0;width:var(--margin-open);height:100%;pointer-events:none;z-index:2}
.on .mn[data-n]{pointer-events:auto;cursor:pointer}
button.mn{appearance:none;background:none;border:0;padding:0;color:var(--pen)}
.hint{display:none;font:italic 400 var(--t-1)/1.4 var(--serif);color:var(--ink-soft);margin:4px 0 0}
.on .hint{display:block}
.receipt .blank{display:inline-block;width:5.5ch;height:1em;border-bottom:1.5px solid var(--pen);vertical-align:-2px;margin-right:2px}
.mn{position:absolute;right:5px;max-width:calc(var(--margin-open) - 5px);font:700 13px/1.1 var(--hand);color:var(--pen);text-align:right;opacity:0;transform:translateY(4px);transition:opacity .3s .2s,transform .3s .2s;text-wrap:balance}
.mn.big{font-size:17px}
.on .mn{opacity:1;transform:none}
.mn.pulse{animation:mnpulse 1.2s ease-in-out 2}
@keyframes mnpulse{50%{transform:scale(1.18);transform-origin:right center}}
@media(min-width:720px){.mn{font-size:16px;right:10px;max-width:calc(var(--margin-open) - 10px)}.mn.big{font-size:20px}}
.ref{text-decoration:underline 1.5px transparent;text-underline-offset:.16em;text-decoration-skip-ink:none;transition:text-decoration-color .35s;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.on .ref{text-decoration-color:var(--pen)}
.ref.flash{animation:ppflash 2.4s ease-out}
@keyframes ppflash{0%,60%{background:color-mix(in srgb,var(--pen) 16%,transparent)}100%{background:transparent}}
.ref:before,.reveal.top:before{content:none!important}

/* ---- type roles ---- */
h1{margin:0 0 .15em;font:700 var(--t3)/1 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.012em;text-wrap:balance}
h2,.first h2,.sample .mvname,.gbox .q,.coming .eyebrow,.rhh,.mph{font:700 var(--t2)/1.12 var(--serif);font-variation-settings:"opsz" 48;letter-spacing:-.008em;text-wrap:balance;margin:0}
.sub,.hook,.callout,.offer,.winsub,.endrev .ecap{font:400 var(--t1)/1.3 var(--serif);font-variation-settings:"opsz" 28;margin:0;text-wrap:balance}
.callout,.offer{font-style:italic}
.whofor{font:400 var(--t-1)/1.4 var(--serif);color:var(--ink-soft);margin:calc(-1 * var(--s2)) 0 var(--s3)}
.by a{text-decoration:underline 1px var(--ink-faint);text-underline-offset:.16em}
.by a:after{content:"in";display:inline-block;font:700 9px/1 var(--serif);color:var(--onink);background:var(--ink-soft);border-radius:2px;padding:2px 3px 1px;margin-left:5px;vertical-align:2px;letter-spacing:0}
.segs{display:grid;gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:calc(-1 * var(--s2)) 0 var(--s4)}
.seg+.seg{border-top:1px solid var(--rule)}
.seg summary{cursor:pointer;list-style:none;font:700 var(--t0)/1.3 var(--serif);padding:12px 0;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:44px}
.seg summary i{font:italic 400 var(--t-1)/1.3 var(--serif);color:var(--ink-soft);flex:1}
.seg summary::-webkit-details-marker{display:none}
.seg summary:after{content:"+";font:400 22px/1 var(--serif);color:var(--pen)}
.seg[open] summary:after{content:"−"}
.seg p{margin:0 0 var(--s3)}
.eyebrow,.obj,.subj,.winey,.dateline,.fig,.cap label,.by,.why,.cap small,.tapnote,.mvt small,.mpc,.applynote,.first .subj{font:italic 400 var(--t-1)/1.4 var(--serif);color:var(--ink-soft);letter-spacing:0;text-transform:none;margin:0}
.meta,.receipt,footer,.jbox{font:400 var(--meta)/1.5 var(--mono);letter-spacing:0;text-transform:none}

/* ---- hero ---- */
.hookwrap{margin:var(--s2) 0 var(--s4)}
.whatis{font:italic 400 var(--t1)/1.3 var(--serif);margin:0 0 var(--s1);color:var(--ink)}
.deliver{font:400 var(--t0)/1.45 var(--serif);margin:0 0 var(--s3);color:var(--ink);text-wrap:pretty}
.hook{margin-bottom:var(--s2)}
.callout{margin:0 0 var(--s2)}
.bywrap{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s2);align-items:center;margin:0 0 var(--s4)}
.photo{width:48px;height:62px;object-fit:cover;display:block}
.by b{color:var(--ink);font-weight:700;font-style:normal}
.by i{display:block}
.offer{color:var(--ink);margin:0 0 var(--s3);padding:0;border:0}

/* ---- the switch ---- */
.reveal{appearance:none;background:none;border:0;padding:6px 0;cursor:pointer;display:inline-flex;align-items:center;gap:10px;font:italic 400 var(--t-1)/1 var(--serif);color:var(--ink);white-space:nowrap;-webkit-tap-highlight-color:transparent;min-height:44px}
.reveal .sw{width:40px;height:24px;border:1.5px solid var(--ink);border-radius:12px;position:relative;flex:none;transition:background .25s,border-color .25s}
.reveal .knob{position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--ink);transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .25s}
.reveal.top{font-size:var(--t0);gap:14px}
.reveal.top .sw{width:56px;height:32px;border-radius:16px;border-width:2px}
.reveal.top .knob{top:3px;left:3px;width:22px;height:22px}
.on .reveal.top .knob{transform:translate(24px)}
.on .reveal .sw{border-color:var(--pen)}
.on .reveal .knob{transform:translate(16px);background:var(--pen)}
.on .reveal .lbl{color:var(--pen)}
.reveal:active .sw{transform:translateY(1px)}
@keyframes nudge{0%,to{transform:translate(0)}30%{transform:translate(7px)}60%{transform:translate(0)}80%{transform:translate(4px)}}
body:not(.on) .reveal.top .knob{animation:nudge 1.1s ease-in-out 1.4s 2}
.endrev{margin:var(--s4) 0 var(--s2);display:grid;gap:var(--s2);justify-items:center;text-align:center;padding:var(--s3) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.endrev .reveal{font-size:var(--t0)}
.endrev .reveal .sw{width:56px;height:32px;border-radius:16px;border-width:2px}
.endrev .reveal .knob{top:3px;left:3px;width:22px;height:22px}
.on .endrev .reveal .knob{transform:translate(24px)}
.endrev .caught{font-style:italic;max-width:30ch}
.endrev .caught[hidden]{display:none}

/* ---- sticky bar ---- */
.bar{position:fixed;left:0;right:0;top:0;z-index:40;height:44px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);transform:translateY(-100%);transition:transform .3s ease}
.bar.show{transform:none}
.bar .bw{font:700 14px/1 var(--serif);letter-spacing:-.005em;color:var(--ink);text-decoration:none;display:inline-flex;gap:.28em}
.bar .reveal{padding:0;min-height:44px;font-size:13.5px}
.bar .prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--pen);transition:width .15s linear}
body.barred{padding-top:0}

/* ---- forms ---- */
.cap{position:relative;display:grid;gap:var(--s2);margin:var(--s2) 0 var(--s3);padding:0;border:0}
.cap .row{display:grid;gap:var(--s2)}
.cap input{width:100%;min-width:0;font:400 var(--t0)/1.3 var(--serif);background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--ink);padding:10px 0;border-radius:0}
.cap input::placeholder{color:var(--ink-faint)}
.cap button{width:100%;min-height:48px;font:700 var(--t0)/1 var(--serif);background:var(--ink);color:var(--onink);border:0;padding:14px 18px;border-radius:0;cursor:pointer;transition:transform .05s}
.cap button:active{transform:translateY(1px)}
.cap button:disabled{opacity:.7;cursor:wait}
.cap .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cap .err{font-style:italic;color:var(--pen)}
.cap .done,.cap .inbox{font-style:italic}
.cap .copy,.cap .app,.platemore,.mpback,.gong.rung .cap{font:500 var(--t-1)/1 var(--serif);font-style:normal;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:12px 14px;border-radius:0;cursor:pointer;text-decoration:none;text-align:center;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.4em;letter-spacing:0;text-transform:none}
.cap .apps{display:flex;gap:var(--s1);flex-wrap:wrap}
.cap .app{flex:1 1 auto}
.readfirst{margin:0 0 var(--s4)}
.readfirst a{display:flex;align-items:center;justify-content:center;min-height:48px;width:100%;background:var(--ink);color:var(--onink);border:0;padding:14px 18px;font:700 var(--t0)/1 var(--serif);text-decoration:none}
.readfirst a:active{transform:translateY(1px)}

/* ---- letter furniture ---- */
.paper{font-family:var(--serif);font-size:inherit;line-height:inherit;margin:0 0 var(--s3)}
.paper .blk{margin-bottom:var(--s2)}
.cross,.paper .cross{margin:var(--s3) 0 var(--s1);font:700 var(--t0)/1.3 var(--serif);text-decoration:none}
.team,.paper .team{border:0;padding:0;margin:0 0 var(--s2);font-size:inherit;line-height:inherit;text-indent:1.4em}
.sig,.paper .sig{font:italic 400 var(--t1)/1.2 var(--serif);margin:var(--s2) 0 var(--s3)}
.ps,.paper .ps{border:0;padding:0;font-size:inherit}
.ps b{font-weight:700}
.endps{margin-top:var(--s3);border-top:1px solid var(--rule);padding-top:var(--s3)}
.bait{margin:var(--s3) 0 var(--s2);font-style:italic;font-size:var(--t1);line-height:1.3}

/* plate */
figure.plate{margin:var(--s2) 0 var(--s3);display:grid;gap:var(--s2)}
figure.plate .fig,.paper figure.plate .fig{display:none}
@media(max-width:719px){figure.plate .frame{margin-left:calc(-1 * (var(--margin) + var(--gap)));transition:margin-left .45s cubic-bezier(.2,.7,.2,1)}}
figure.plate .frame{position:relative;aspect-ratio:1039/1438;overflow:hidden;border:1px solid var(--rule);background:#F7F3EA}
figure.plate .frame img{position:absolute;width:121.95%;height:auto;left:-11.59%;top:-13.1%;max-width:none;border:0;filter:contrast(1.06)}
figure.plate figcaption,.paper figcaption{font:400 var(--t-1)/1.45 var(--serif);color:var(--ink-soft)}
figure.plate figcaption b{color:var(--ink);font-weight:400}
.plate.short .frame{aspect-ratio:1039/600}
.plate.short .frame img{top:0;margin-top:-18.13%}
.plate.short .frame:after{content:'';position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(rgba(247,243,234,0),#F7F3EA)}
.platemore{justify-self:start}
.plate:not(.short) .platemore{display:none}
.plate.short figcaption{display:none}

/* panels: one style. They bleed into the margin so the page changes ground. */
.sample,.gbox{background:var(--paper-2);border:0;padding:var(--s3) var(--gutter) var(--s3) calc(var(--margin) + var(--gap) + var(--gutter));margin:var(--s3) calc(-1 * var(--gutter)) var(--s4);display:grid;gap:var(--s2);transition:padding-left .45s cubic-bezier(.2,.7,.2,1)}
.sample .eyebrow,.gbox .obj{text-align:left}
.sample .mvname{text-align:left;margin:0 0 .1em}
.sample p{font-size:inherit;line-height:inherit}
.sample .fp{font-style:italic;color:var(--ink-soft);border-left:2px solid var(--pen);padding-left:var(--s2)}
.sample .fp b{font-style:normal;color:var(--ink)}
.gbox .q{margin:0}
.gbox .q .ref{font-weight:700}
.gbox .bait{margin:0;font:inherit}

/* the moves list: numbers in the margin, like a proofreader's marks */
.coming{margin:var(--s3) 0 var(--s4);display:grid;gap:var(--s1)}
.coming .eyebrow{color:var(--ink);font-style:normal;margin:0 0 .1em}
.coming .tapnote{margin:0 0 var(--s2)}
.coming ol{margin:0;padding:0;list-style:none;display:grid;gap:0}
.coming li{display:block;border-top:1px solid var(--rule)}
.coming li:last-child{border-bottom:1px solid var(--rule)}
.mvjump{all:unset;cursor:pointer;display:grid;grid-template-columns:max(var(--margin),2.2em) var(--gap) minmax(0,1fr);transition:grid-template-columns .45s cubic-bezier(.2,.7,.2,1);align-items:baseline;width:100%;box-sizing:border-box;min-height:52px;padding:10px 0;margin-left:calc(-1 * (var(--margin) + var(--gap)))}
.mvjump>span{grid-column:1;text-align:right;padding-right:6px;font:700 17px/1 var(--hand);color:var(--pen)}
.mvjump .mvt{grid-column:3;display:grid;gap:2px;font-style:normal}
.mvt b{font-weight:700}
.mvjump:hover .mvt b,.mvjump:focus-visible .mvt b{text-decoration:underline 1.5px var(--pen);text-underline-offset:.16em}
.coming li.done>button>span{color:transparent;position:relative}
.coming li.done>button>span:after{content:'✓';color:var(--pen);position:absolute;right:0}

/* the move panel (bottom sheet) */
.mpanel{position:fixed;left:0;right:0;bottom:0;max-width:600px;margin:0 auto;background:var(--paper);border-top:1.5px solid var(--ink);box-shadow:0 -8px 30px rgba(42,39,36,.12);padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));z-index:50}
@media(min-width:720px){.mpanel{left:16px;right:16px;bottom:16px;border:1.5px solid var(--ink)}}
.mpanel[hidden]{display:none}
.mph{margin:0 2em var(--s1) 0;font-size:var(--t1)}
.mph span{display:block;font:italic 400 var(--t-1)/1.3 var(--serif);color:var(--ink-soft);letter-spacing:0;text-transform:none;margin:0 0 4px}
.mpn{margin:0 0 var(--s2);font-size:var(--t0)}
.mpu{margin:0 0 var(--s3);font-size:var(--t0);border-left:2px solid var(--pen);padding-left:var(--s2)}
.mpu b{font-weight:700}
.mpx{all:unset;cursor:pointer;position:absolute;top:8px;right:10px;font:400 26px/1 var(--serif);color:var(--ink-soft);padding:6px 10px}
.mpf{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.mpc{font-style:italic}
body.mp-open{padding-bottom:45vh}

/* the gong */
.gong{appearance:none;background:none;border:0;padding:var(--s2) 0 0;cursor:pointer;display:grid;justify-items:center;gap:var(--s3);color:var(--ink);-webkit-tap-highlight-color:transparent;width:100%}
.gong svg{width:min(100%,240px);height:auto;display:block;overflow:visible}
.gong .disc{transform-origin:150px 128px}
.gong .ring{opacity:0;transform-origin:150px 128px}
.gong.rung .disc{animation:gswing 1.4s cubic-bezier(.2,.6,.3,1)}
.gong.rung .ring{animation:gripple 1.1s ease-out forwards}
.gong.rung .ring.r2{animation-delay:.12s}
.gong.rung .ring.r3{animation-delay:.24s}
@keyframes gswing{0%{transform:rotate(0)}8%{transform:rotate(-5deg) scale(1.03)}22%{transform:rotate(4deg)}38%{transform:rotate(-2.5deg)}55%{transform:rotate(1.5deg)}75%{transform:rotate(-.6deg)}to{transform:rotate(0)}}
@keyframes gripple{0%{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}
.gong .cap{font:700 var(--t0)/1 var(--serif);color:var(--onink);background:var(--ink);padding:14px 22px;width:100%;max-width:320px;text-align:center;min-height:48px;display:grid;place-items:center;letter-spacing:0;text-transform:none;border:0;margin:0}
.gong.rung .cap{background:transparent;color:var(--ink-soft);border:1px solid var(--rule)}

/* the first letter */
.first{display:none;margin:0 0 var(--s4)}
.first.show{display:block;animation:rise .6s ease-out}
@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.first .mind{font-style:italic;margin:0 0 var(--s3);padding:0 0 var(--s3);border-bottom:1px solid var(--rule)}
.first .subj{margin:0 0 .2em}
.first h2{margin:0 0 var(--s3)}
.first .dlg{text-indent:0!important;margin-left:1.4em;border-left:2px solid var(--rule);padding-left:var(--s2)}
.first ul{margin:.2em 0 var(--s2) 1.1em;padding:0;list-style:none}
.first li{position:relative;padding-left:14px;margin:0 0 .4em}
.first li:before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--pen)}
.first .close{margin:.2em 0 0;font-style:italic;border-top:1px solid var(--rule);padding-top:var(--s3)}
.first .paper{margin-top:0}
.confess{border-left:2px solid var(--pen);padding-left:var(--s2);text-indent:0!important}

/* ---- signup: the win and the receipt ---- */
.win{text-align:center;margin:var(--s2) 0 var(--s3);animation:winin .5s cubic-bezier(.2,.9,.3,1.2) both}
.winey{margin:0 0 .4em}
.winh{font:700 var(--t3)/1 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.02em;margin:0}
.winsub{font-style:italic;margin:.35em 0 0}
@keyframes winin{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.cap.won .inbox{text-align:center;margin-bottom:var(--s2)}
.receipt{position:relative;background:var(--paper-2);border:0;padding:var(--s3) var(--s3) calc(var(--s3) + 10px);margin:var(--s2) 0 0;color:var(--ink);--tooth:6px;mask:conic-gradient(from 135deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--tooth)) var(--tooth) repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - var(--tooth)) no-repeat;-webkit-mask:conic-gradient(from 135deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--tooth)) var(--tooth) repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - var(--tooth)) no-repeat}
.rhead{text-align:center;padding:0 0 var(--s3);margin-bottom:var(--s2);border-bottom:1px solid var(--rule)}
.rhead .stamp{position:static;display:inline-block;margin:0 0 var(--s2)}
.stamp{font:700 30px/1 var(--mono);letter-spacing:.14em;color:var(--pen);border:3px solid var(--pen);border-radius:4px;padding:6px 12px 4px;transform:rotate(-6deg) scale(2.2);opacity:0;pointer-events:none;mix-blend-mode:multiply}
.cap.stamped .rhead .stamp,.cap.stamped .stamp{animation:stamp .28s cubic-bezier(.5,0,.75,0) forwards}
.cap.stamped .receipt{animation:thud .35s .26s ease-out}
@keyframes stamp{to{transform:rotate(-6deg) scale(1);opacity:.9}}
@keyframes thud{0%{transform:translateY(0)}30%{transform:translateY(3px)}100%{transform:translateY(0)}}
.rhh{font-size:var(--t2)}
.rhs{font:400 var(--t-1)/1.45 var(--serif);margin:.4em 0 0;color:var(--ink-soft)}
.rhs b{color:var(--ink)}
.receipt .rh{text-align:center;letter-spacing:.08em;text-transform:uppercase;font-size:11px;padding-bottom:var(--s1);border-bottom:1px solid var(--rule);margin-bottom:var(--s1)}
.receipt .rr{display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:4px 0}
.receipt .rt{color:var(--ink-soft);white-space:nowrap}
.receipt .rd{font-weight:500}
.receipt .rm{grid-column:2;color:var(--pen);font:400 15px/1.1 var(--hand)}
.receipt .rr.rq .rd,.receipt .rr.rq .rt{color:var(--pen)}
.receipt .rtot{display:flex;justify-content:space-between;border-top:1px solid var(--rule);margin-top:var(--s1);padding-top:6px;font-weight:500}
.receipt .rtot+.rtot{border-top:0;margin-top:0;padding-top:0}
.receipt .rn{margin:var(--s2) 0 0;font:italic 400 var(--t-1)/1.4 var(--serif);text-align:center}
.receipt .rmiss{margin:var(--s3) 0 0;border:1px solid var(--pen);padding:var(--s2);text-align:center}
.receipt .rmiss p{margin:0 0 6px;font:700 var(--t0)/1.35 var(--serif);color:var(--pen)}
.receipt .rmiss a{font:400 var(--t0)/1.35 var(--serif);color:var(--ink)}
.cap .copy{margin-top:var(--s2)}

/* ---- gate, footer, print ---- */
.gate{position:fixed;inset:0;z-index:60;background:var(--paper);display:grid;place-items:center;padding:16px}
.gate form{width:min(100%,360px);display:grid;gap:12px}
.gate .k{font:700 15px/1 var(--serif)}
.gate label{font:italic 400 var(--t-1)/1 var(--serif);color:var(--ink-soft)}
.gate input{font:400 18px/1.3 var(--serif);background:none;border:0;border-bottom:1px solid var(--ink);padding:8px 2px;color:var(--ink);width:100%;outline:0}
.gate button{font:700 15px/1 var(--serif);background:var(--ink);color:var(--onink);border:0;padding:14px;cursor:pointer}
.gate .err{font:italic 400 14px/1.4 var(--serif);color:var(--pen);min-height:1.4em;margin:0}
.locked .sheet,.locked .bar{visibility:hidden}
footer{margin-top:var(--s5);padding-top:var(--s2);border-top:1px solid var(--rule);display:grid;gap:4px;color:var(--ink-soft)}
footer a{color:inherit}

@media print{.bar,.cap,.notes{display:none}}
@media(prefers-reduced-motion:reduce){
  .reveal .knob,.gong.rung .disc,.gong.rung .ring,.first.show,.win,.cap.stamped .receipt,.bar{animation:none!important;transition:none!important}
  .cap.stamped .rhead .stamp,.cap.stamped .stamp{animation:none;transform:rotate(-6deg);opacity:.9}
  .mn,.ref{transition:none}
}

/* desktop: panels sit on the text column instead of bleeding into the margin */
@media(min-width:720px){
  .blk.bleed .txt{grid-column:3}
  .sample,.gbox{margin:var(--s3) 0 var(--s4);padding:var(--s3) var(--s4)}
  .sample .eyebrow,.gbox .obj,.sample .mvname,.gbox .q{text-align:left}
}

/* gong v2: brass on a wood stand; the mallet swings, the disc shudders, the brass flashes */
.gong svg{width:min(100%,270px)}
.gong .disc,.gong .ring{transform-origin:150px 138px}
.gong .mallet{transform-origin:230px 246px}
.gong .cords{transform-origin:150px 42px}
.gong.rung .mallet{animation:mswing .55s cubic-bezier(.3,0,.3,1)}
.gong.rung .disc{animation:gswing2 1.6s .14s cubic-bezier(.2,.6,.3,1)}
.gong.rung .ring{animation:gripple 1.2s .14s ease-out forwards}
.gong.rung .ring.r2{animation-delay:.26s}.gong.rung .ring.r3{animation-delay:.38s}
.gong.rung .shine{animation:gshine .9s .14s ease-out}
.gong.rung .cords{animation:csway 1.6s .14s ease-out}
@keyframes mswing{0%{transform:rotate(0)}30%{transform:rotate(-25deg)}55%{transform:rotate(-8deg)}100%{transform:rotate(0)}}
@keyframes gswing2{0%{transform:none}6%{transform:scale(1.035) rotate(-1.5deg)}14%{transform:scale(.99) rotate(3deg)}28%{transform:rotate(-2.2deg)}45%{transform:rotate(1.3deg)}65%{transform:rotate(-.6deg)}100%{transform:none}}
@keyframes gshine{0%{opacity:0}12%{opacity:.5}100%{opacity:0}}
@keyframes csway{0%,100%{transform:none}20%{transform:rotate(1.2deg)}45%{transform:rotate(-.8deg)}70%{transform:rotate(.3deg)}}
@media(prefers-reduced-motion:reduce){.gong.rung .mallet,.gong.rung .disc,.gong.rung .shine,.gong.rung .cords,.gong.rung .ring{animation:none}}

.mpl{margin:10px 0 0;font:500 14px/1.4 var(--serif)}
.mpl a{color:var(--pen);text-decoration:underline;text-underline-offset:3px}

/* phones: the header stays put when the margin opens, so the three links never spill */
@media (max-width:719px){.lh{margin-left:0}}