/*
  Tiidy supplements: shared styles for /privacy, /terms, /refunds, /changelog, /press, /buy and /404.
  Tokens, type, masthead, folio and colophon are copied from the home page (index.html) so every
  page reads as part of the same printed issue. Keep them in step when the home page changes.

  Type: Archivo (display, variable width and weight), Newsreader (text), IBM Plex Mono (folios,
  captions, ledgers). Tiidy yellow #FAE74E is the only colour.
*/
:root{
  --paper:#F3F0E8; --paper-2:#EAE6DB; --card:#FBFAF6; --ink:#121211; --ink-2:#36352F; --muted:#6D6A61; --faint:#A29E92;
  --hair:rgba(18,18,17,.11); --hair-2:rgba(18,18,17,.2);
  --yellow:#FAE74E; --on-yellow:#161507;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --g:clamp(16px,3.2vw,48px);
  --gap:clamp(12px,1.6vw,24px);
  --nav:56px;
  --pencil:rgba(28,27,24,.3); --pencil-soft:rgba(28,27,24,.17);
  --hl-h:.42em; --hl-y:88%;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131312; --paper-2:#1B1B19; --card:#1E1E1C; --ink:#EFEBE1; --ink-2:#CFCABE; --muted:#9A968B; --faint:#66635B;
    --hair:rgba(239,235,225,.1); --hair-2:rgba(239,235,225,.2);
    --pencil:rgba(236,232,222,.28); --pencil-soft:rgba(236,232,222,.15);
    --mark-h:.1em; --mark-b:-.06em;
    --hl-h:.14em; --hl-y:100%;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#131312; --paper-2:#1B1B19; --card:#1E1E1C; --ink:#EFEBE1; --ink-2:#CFCABE; --muted:#9A968B; --faint:#66635B;
  --hair:rgba(239,235,225,.1); --hair-2:rgba(239,235,225,.2);
  --pencil:rgba(236,232,222,.28); --pencil-soft:rgba(236,232,222,.15);
  --mark-h:.1em; --mark-b:-.06em;
  --hl-h:.14em; --hl-y:100%;
  color-scheme:dark;
}

/* ============ Base (as the home page) ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--serif);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:inherit}
p{margin:0}
::selection{background:var(--yellow);color:var(--on-yellow)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--yellow);border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--g);top:-60px;z-index:80;padding:10px 14px;border-radius:999px;background:var(--ink);color:var(--paper);font:600 14px/1 var(--display);text-decoration:none;transition:top .2s var(--ease)}
.skip:focus{top:10px}
.wrap{max-width:1560px;margin-inline:auto;padding-inline:var(--g)}
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em;line-height:1.5}
.cap{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.fig{font:italic 400 15px/1.45 var(--serif);color:var(--muted)}
.fig b{font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:var(--ink);margin-right:.6em}
kbd{font:500 .82em/1 var(--mono);display:inline-flex;align-items:center;justify-content:center;min-width:1.9em;height:1.9em;padding:0 .45em;border:1px solid var(--hair-2);border-bottom-width:2px;border-radius:6px;background:var(--card);color:var(--ink);vertical-align:.1em}

/* Buttons */
.btn{--h:48px;display:inline-flex;align-items:center;gap:10px;height:var(--h);padding:0 22px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font:600 15px/1 var(--display);letter-spacing:.005em;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background .2s,color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.yellow{background:var(--yellow);color:var(--on-yellow);border-color:var(--on-yellow)}
.btn svg{width:18px;height:18px;flex:none}
.btn.sm{--h:36px;padding:0 15px;font-size:14px}

/* Reading progress and folio */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
.folio{position:fixed;left:calc(max(0px,(100vw - 1560px) / 2) + var(--g) / 2 - 7px);bottom:28px;z-index:40;display:flex;gap:10px;align-items:center;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);pointer-events:none;white-space:nowrap;transform-origin:0 100%;transform:rotate(-90deg) translate(0,100%)}
.folio b{color:var(--ink);font-weight:600;display:inline-block;min-width:3.4em}
.folio i{font-style:normal}
@media (max-width:1100px){.folio{display:none}}

/* Masthead */
.mast{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color .3s}
.mast.scrolled{border-bottom-color:var(--hair-2)}
.mast .wrap{display:flex;align-items:center;gap:clamp(12px,2vw,28px);height:var(--nav)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 21px/1 var(--display);font-variation-settings:"wdth" 88;letter-spacing:-.02em}
.logo img{width:28px;height:28px;border-radius:7px;background:var(--yellow);padding:2px;transition:transform .5s var(--ease)}
.logo:hover img{transform:rotate(-16deg)}
.mast .issue{color:var(--muted);border-left:1px solid var(--hair-2);padding-left:clamp(12px,2vw,28px)}
.mast nav{display:flex;gap:22px;margin-left:auto}
.mast nav a{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--muted);position:relative}
.mast nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.mast nav a:hover,.mast nav a[aria-current="page"]{color:var(--ink)}
.mast nav a:hover::after,.mast nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:980px){.mast .issue{display:none}}
@media (max-width:760px){.mast nav{display:none}.mast .btn{margin-left:auto}}

/* Section heads */
section{position:relative}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--hair-2);color:var(--muted)}
.sec-head b{color:var(--ink);font-weight:600}
.rule{border:0;border-top:2px solid var(--ink);margin:0}

/* ============ Page cover ============ */
.cover{position:relative;padding-bottom:clamp(40px,6vw,88px);border-bottom:2px solid var(--ink)}
.title{position:relative;z-index:2;margin-top:clamp(40px,7vw,104px);font:800 clamp(56px,11vw,188px)/.86 var(--display);font-variation-settings:"wdth" 72;letter-spacing:-.04em;text-wrap:balance}
.title .clean{position:relative;display:inline-block;isolation:isolate}
.title .clean::before{content:"";position:absolute;left:-.04em;right:-.06em;bottom:var(--mark-b,.05em);height:var(--mark-h,.36em);background:var(--yellow);z-index:-1;transform-origin:0 50%;transition:transform .7s var(--ease) .25s}
.js .title .clean:not(.in)::before{transform:scaleX(0)}
.title .soft{color:var(--faint)}
.intro{margin-top:clamp(28px,4vw,56px);align-items:start;row-gap:32px}
.lede{grid-column:1 / span 7;font:400 clamp(21px,2vw,28px)/1.42 var(--serif);text-wrap:pretty;max-width:34ch}
.lede.drop::first-letter{float:left;font:800 5.1em/.78 var(--display);font-variation-settings:"wdth" 70;margin:.04em .08em 0 -.02em;color:var(--ink)}
.intro .side{grid-column:9 / span 4}
@media (max-width:900px){.lede,.intro .side{grid-column:1 / -1}}

/* Yellow highlighter: a marker stroke behind the words. In dark mode it drops to a low rule, as on the home page. */
.hl{background:linear-gradient(var(--yellow),var(--yellow)) 0 var(--hl-y) / 100% var(--hl-h) no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em;margin:0 -.08em;transition:background-size .9s var(--ease) .15s}
.js .hl:not(.in){background-size:0% var(--hl-h)}
/* Drawn underline: JS adds a pencil squiggle under the words */
.uline{position:relative;display:inline-block;white-space:nowrap}
.uline svg{position:absolute;left:-2%;width:104%;top:88%;height:.34em;overflow:visible;pointer-events:none}
.uline path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.7}
.uline.in path{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.45,.05,.25,1) .3s}

/* Ledger: the receipt-style summary */
.ledger{border-top:2px solid var(--ink);font:400 13px/1.5 var(--mono)}
.ledger h2,.ledger .lh{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:12px 0 8px;color:var(--ink)}
.ledger .ln{display:flex;gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--hair)}
.ledger .ln span:first-child{flex:none;color:var(--muted)}
.ledger .ln i{flex:1;min-width:12px;border-bottom:1.5px dotted var(--faint);transform:translateY(-.3em)}
.ledger .ln span:last-child{flex:none;text-align:right;color:var(--ink);font-weight:500}
.ledger .ln .y{background:var(--yellow);color:var(--on-yellow);padding:0 4px}
.ledger .foot{padding-top:10px;color:var(--muted);font-size:11.5px}

/* Contents list */
.toc{border-top:2px solid var(--ink)}
.toc .lh{display:block;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:12px 0 8px}
.toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--gap)}
.toc li{break-inside:avoid}
.toc a{display:flex;gap:10px;padding:6px 0;text-decoration:none;font:500 14px/1.3 var(--display);border-bottom:1px solid var(--hair)}
.toc a span{font:500 11px/1.6 var(--mono);color:var(--muted);min-width:1.8em}
.toc a:hover span{color:var(--ink)}
.toc a:hover{border-color:var(--ink)}
@media (max-width:520px){.toc ol{columns:1}}

/* ============ Clauses (legal text) ============ */
.clauses{padding-bottom:clamp(48px,8vw,120px)}
.clause{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(28px,4vw,52px) 0;border-bottom:1px solid var(--hair-2);scroll-margin-top:calc(var(--nav) + 12px)}
.clause .n{grid-column:1 / span 2;font:100 clamp(56px,6.4vw,104px)/.8 var(--display);font-variation-settings:"wdth" 62;letter-spacing:-.05em;font-variant-numeric:lining-nums;color:var(--ink);transition:font-variation-settings .6s var(--ease)}
.clause:hover .n{font-variation-settings:"wdth" 62,"wght" 700}
.clause .body{grid-column:3 / span 6;min-width:0}
.clause h2{font:800 clamp(26px,2.5vw,38px)/1.02 var(--display);font-variation-settings:"wdth" 80;letter-spacing:-.025em;text-wrap:balance}
.clause .body > * + *{margin-top:14px}
.clause .body > h2 + *{margin-top:18px}
.clause p,.clause li{font-size:clamp(18px,1.3vw,19.5px);line-height:1.58;color:var(--ink-2);text-wrap:pretty;max-width:62ch}
.clause p b,.clause li b{color:var(--ink);font-weight:600}
.clause ul,.clause ol{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.clause ul li{position:relative;padding-left:1.4em}
.clause ul li::before{content:"";position:absolute;left:.1em;top:.72em;width:.55em;height:1.5px;background:var(--ink)}
.clause ol{counter-reset:s}
.clause ol li{position:relative;padding-left:2em;counter-increment:s}
.clause ol li::before{content:counter(s);position:absolute;left:0;top:.28em;width:1.45em;height:1.45em;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font:500 11px/1 var(--mono);color:var(--ink)}
.clause .note{grid-column:10 / span 3;align-self:start;padding-top:8px;border-top:1px solid var(--ink);font:italic 400 15.5px/1.45 var(--serif);color:var(--muted)}
.clause .note b{display:block;margin-bottom:4px;font:600 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--ink)}
.clause .note + .note{grid-column:10 / span 3}
.clause.plain .body{grid-column:3 / span 8}
@media (max-width:900px){
  .clause .n{grid-column:1 / -1;font-size:clamp(44px,12vw,64px);margin-bottom:12px}
  .clause .body,.clause.plain .body{grid-column:1 / -1}
  .clause .note{grid-column:1 / -1;margin-top:22px;max-width:60ch}
}

/* Inline links in running text: a yellow marker underline, as in the colophon */
.tx a,.clause .body a,.lede a{color:inherit;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.3em;text-underline-offset:-.12em;text-decoration-skip-ink:none;transition:text-decoration-color .2s}
.tx a:hover,.clause .body a:hover,.lede a:hover{text-decoration-color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.tx,.clause .body,.lede) a{text-decoration-thickness:.12em;text-underline-offset:.14em}}
:root[data-theme="dark"] :is(.tx,.clause .body,.lede) a{text-decoration-thickness:.12em;text-underline-offset:.14em}

/* Data table inside a clause (what is sent, and why) */
.sent{width:100%;border-collapse:collapse;margin-top:18px;border-top:2px solid var(--ink)}
.sent th,.sent td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--hair-2)}
.sent thead th{font:600 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:10px}
.sent tbody th{font:600 16px/1.3 var(--display);font-variation-settings:"wdth" 88;color:var(--ink);width:38%}
.sent tbody th small{display:block;margin-top:4px;font:400 12px/1.4 var(--mono);color:var(--muted)}
.sent td{font:400 16.5px/1.45 var(--serif);color:var(--ink-2)}
@media (max-width:560px){
  .sent,.sent tbody,.sent tr,.sent th,.sent td{display:block;width:auto}
  .sent thead{display:none}
  .sent tr{padding:12px 0;border-bottom:1px solid var(--hair-2)}
  .sent tbody th,.sent td{border:0;padding:0}
  .sent td{margin-top:4px}
}
.fine{margin-top:clamp(28px,4vw,48px);color:var(--muted);max-width:72ch}
.fine a{color:var(--ink)}

/* Sign-off block at the end of a page */
.signoff{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(40px,6vw,80px) 0 0;align-items:end;row-gap:24px}
.signoff .say{grid-column:3 / span 7;font:italic 400 clamp(22px,2vw,30px)/1.3 var(--serif);color:var(--ink);text-wrap:balance}
.signoff .say a{font-style:normal;font-family:var(--display);font-weight:600;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.3em;text-underline-offset:-.12em;text-decoration-skip-ink:none}
.signoff .who{grid-column:10 / span 3;color:var(--muted)}
@media (max-width:900px){.signoff .say,.signoff .who{grid-column:1 / -1}}

/* ============ Refunds ============ */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);border-top:2px solid var(--ink);margin-top:clamp(40px,6vw,80px)}
.step{padding:18px 18px 28px 0;border-right:1px solid var(--hair-2);min-width:0}
.step + .step{padding-left:18px}
.step:last-child{border-right:0}
.step .k{display:block;font:100 clamp(64px,7vw,120px)/.8 var(--display);font-variation-settings:"wdth" 62;letter-spacing:-.05em}
.step h2{margin-top:18px;font:800 clamp(24px,2.2vw,32px)/1.02 var(--display);font-variation-settings:"wdth" 80;letter-spacing:-.02em}
.step p{margin-top:10px;font-size:18px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.step p a{color:inherit;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.3em;text-underline-offset:-.12em;text-decoration-skip-ink:none}
@media (max-width:900px){
  .steps{grid-template-columns:1fr}
  .step,.step + .step{padding:18px 0 26px;border-right:0;border-bottom:1px solid var(--hair-2)}
}

/* ============ Changelog ============ */
.release{padding:clamp(40px,6vw,80px) 0 clamp(20px,3vw,40px)}
.release-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;row-gap:20px}
.vnum{grid-column:1 / span 6;display:block;font:100 clamp(150px,23vw,380px)/.74 var(--display);font-variation-settings:"wdth" 62;letter-spacing:-.06em;margin-left:-.05em;font-variant-numeric:lining-nums}
.vnum.in{animation:wghtup 1.4s var(--ease) both}
@keyframes wghtup{from{font-variation-settings:"wdth" 62,"wght" 100}50%{font-variation-settings:"wdth" 62,"wght" 700}to{font-variation-settings:"wdth" 62,"wght" 100}}
.vmeta{grid-column:8 / span 5;padding-bottom:.5em}
.vmeta .tag{display:inline-block;padding:6px 9px;border:1px solid var(--ink);border-radius:999px}
.vmeta .tag.y{background:var(--yellow);color:var(--on-yellow);border-color:var(--on-yellow)}
.vmeta h2{margin-top:16px;font:800 clamp(34px,3.6vw,56px)/.95 var(--display);font-variation-settings:"wdth" 78;letter-spacing:-.03em;text-wrap:balance}
.vmeta p{margin-top:14px;font-size:clamp(18px,1.4vw,21px);line-height:1.5;color:var(--ink-2);max-width:40ch}
.vmeta .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center}
@media (max-width:900px){.vnum,.vmeta{grid-column:1 / -1}}
.log{margin-top:clamp(36px,5vw,64px);border-top:2px solid var(--ink)}
.day{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:14px 0;border-bottom:1px solid var(--ink);position:sticky;top:var(--nav);z-index:3;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.day b{grid-column:1 / span 4;font:600 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.day span{grid-column:5 / -1;color:var(--muted)}
.entry{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(20px,2.6vw,32px) 0;border-bottom:1px solid var(--hair-2)}
.entry .ref{grid-column:1 / span 1;font:500 12px/1.9 var(--mono);color:var(--muted)}
.entry h3{grid-column:2 / span 4;font:750 clamp(22px,1.9vw,30px)/1.05 var(--display);font-variation-settings:"wdth" 82;letter-spacing:-.02em;text-wrap:balance}
.entry h3 small{display:block;margin-top:8px;font:400 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--muted)}
.entry ul{grid-column:6 / span 7;margin:0;padding:0;list-style:none;display:grid;gap:8px}
.entry li{position:relative;padding-left:1.4em;font-size:18px;line-height:1.5;color:var(--ink-2);text-wrap:pretty;max-width:62ch}
.entry li::before{content:"";position:absolute;left:.1em;top:.72em;width:.55em;height:1.5px;background:var(--ink)}
.entry li b{color:var(--ink);font-weight:600}
.entry:hover .ref{color:var(--ink)}
.entry.key h3 .mark{background:var(--yellow);color:var(--on-yellow);padding:0 .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media (max-width:900px){
  .day b{grid-column:1 / -1}
  .day span{grid-column:1 / -1}
  .entry .ref{grid-column:1 / -1}
  .entry h3{grid-column:1 / -1;margin-top:2px}
  .entry ul{grid-column:1 / -1;margin-top:14px}
}
.log-end{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:18px 0;color:var(--muted)}

/* ============ Press ============ */
.block{padding:clamp(48px,7vw,104px) 0 0}
.block h2.big{margin-top:clamp(24px,4vw,56px);font:800 clamp(44px,7vw,120px)/.88 var(--display);font-variation-settings:"wdth" 72;letter-spacing:-.04em}
.copyset{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:36px;margin-top:clamp(28px,4vw,56px)}
.copyitem{grid-column:span 6;border-top:2px solid var(--ink);padding-top:12px;min-width:0}
.copyitem.wide{grid-column:1 / -1}
.copyitem .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted)}
.copyitem .hd b{color:var(--ink);font-weight:600}
.copyitem blockquote{margin:14px 0 0;font:400 clamp(18px,1.4vw,21px)/1.55 var(--serif);color:var(--ink);text-wrap:pretty;max-width:66ch}
.copyitem blockquote p + p{margin-top:12px}
.copyitem.wide blockquote{font-size:clamp(21px,2vw,28px);line-height:1.42;max-width:44ch}
.copybtn{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px dashed var(--ink);background:transparent;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:background .2s,transform .25s var(--ease)}
.copybtn:hover{background:var(--yellow);color:var(--on-yellow);border-style:solid}
.copybtn.done{background:var(--ink);color:var(--paper);border-style:solid}
.copybtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.copyitem{grid-column:1 / -1}}

.facts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(28px,4vw,56px);align-items:start;row-gap:36px}
.facts dl{grid-column:1 / span 7;margin:0;border-top:2px solid var(--ink)}
.facts dl div{display:grid;grid-template-columns:11em 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair-2)}
.facts dt{font:500 11px/1.9 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font:400 18px/1.45 var(--serif);color:var(--ink)}
.facts dd b{font:600 18px/1.3 var(--display);font-variation-settings:"wdth" 88}
.facts dd a{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.3em;text-underline-offset:-.12em;text-decoration-skip-ink:none}
.facts .bio{grid-column:9 / span 4;display:grid;gap:14px}
.facts .bio img{width:min(200px,60%);aspect-ratio:1;object-fit:cover;object-position:50% 100%;filter:grayscale(1) contrast(.92) brightness(1.04);opacity:.9;-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 98%);mask-image:linear-gradient(to bottom,#000 62%,transparent 98%)}
.facts .bio h3{font:800 clamp(26px,2.4vw,36px)/1 var(--display);font-variation-settings:"wdth" 80;letter-spacing:-.025em;margin-top:-6px}
.facts .bio p{font-size:18px;line-height:1.5;color:var(--ink-2)}
.facts .bio a{color:inherit;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.3em;text-underline-offset:-.12em;text-decoration-skip-ink:none}
@media (max-width:900px){.facts dl,.facts .bio{grid-column:1 / -1}}
@media (max-width:520px){.facts dl div{grid-template-columns:1fr;gap:2px}}

.plates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,36px) var(--gap);margin-top:clamp(28px,4vw,56px)}
.plates figure{margin:0;display:flex;flex-direction:column;min-width:0}
.plates .pl-img{position:relative;aspect-ratio:1;border-radius:14px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair);display:grid;place-items:center;overflow:hidden}
.plates .pl-img img{width:62%;height:62%;object-fit:contain}
.plates .pl-img.tile{background:var(--yellow);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.plates .pl-img.tile img{width:72%;height:72%}
.plates .pl-img.dark{background:#1A1A19}
.plates .pl-img.og img{width:100%;height:auto;object-fit:cover;border-radius:6px;box-shadow:0 0 0 1px var(--hair-2),0 20px 30px -22px rgba(0,0,0,.5)}
.plates .pl-img.og{padding:10%}
.plates .pl-img.me img{width:84%;height:84%;align-self:end;object-position:50% 100%;filter:grayscale(1) contrast(.92) brightness(1.04)}
.plates figcaption{margin-top:12px;border-top:1px solid var(--ink);padding-top:8px;display:grid;gap:6px}
.plates figcaption .m{color:var(--muted)}
.plates .dl{display:inline-flex;align-items:center;gap:6px;width:max-content;font:600 14px/1 var(--display);text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:3px}
.plates .dl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plates .dl:hover{background:var(--yellow);color:var(--on-yellow)}
.plates .dl + .dl{margin-left:14px}
@media (max-width:1100px){.plates{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.plates{grid-template-columns:1fr}}

.brand{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:36px;margin-top:clamp(28px,4vw,56px)}
.brand > div{grid-column:span 4;border-top:2px solid var(--ink);padding-top:12px;min-width:0}
.brand h3{font:800 clamp(22px,1.9vw,28px)/1.05 var(--display);font-variation-settings:"wdth" 82;letter-spacing:-.02em;margin-top:10px}
.brand p{margin-top:10px;font-size:17.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.brand .word{margin-top:14px;font:800 clamp(56px,6vw,96px)/.9 var(--display);font-variation-settings:"wdth" 80;letter-spacing:-.045em}
.brand .word .ii{position:relative}
.brand .word .ii::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.07em;background:var(--yellow)}
.swatches{display:flex;gap:8px;margin-top:14px}
.sw{flex:1;min-width:0;border-radius:10px;padding:48px 10px 10px;box-shadow:inset 0 0 0 1px var(--hair-2);font:500 11px/1.4 var(--mono)}
.sw b{display:block;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.sw.y{background:#FAE74E;color:#161507}
.sw.i{background:#121211;color:#EFEBE1}
.sw.p{background:#F3F0E8;color:#121211}
.faces{margin-top:14px;display:grid;gap:8px}
.faces div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px solid var(--hair-2);padding-bottom:8px}
.faces .a{font:800 26px/1 var(--display);font-variation-settings:"wdth" 76;letter-spacing:-.02em}
.faces .n{font:italic 400 24px/1 var(--serif)}
.faces .p{font:500 17px/1 var(--mono)}
.faces span:last-child{color:var(--muted);font:400 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;text-align:right}
@media (max-width:900px){.brand > div{grid-column:1 / -1}}

.contact{margin-top:clamp(48px,7vw,104px);border-top:2px solid var(--ink);padding:clamp(28px,4vw,48px) 0 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:18px;align-items:end}
.contact .cap{grid-column:1 / span 3;color:var(--muted)}
.contact a.mail{grid-column:1 / span 9;font:800 clamp(34px,6vw,96px)/.95 var(--display);font-variation-settings:"wdth" 72;letter-spacing:-.04em;text-decoration:none;word-break:break-word;width:max-content;max-width:100%}
.contact a.mail span{background:linear-gradient(var(--yellow),var(--yellow)) 0 var(--hl-y) / 0% var(--hl-h) no-repeat;transition:background-size .5s var(--ease)}
.contact a.mail:hover span{background-size:100% var(--hl-h)}
.contact p{grid-column:10 / span 3;color:var(--muted);font-size:16px;line-height:1.5}
@media (max-width:900px){.contact .cap,.contact a.mail,.contact p{grid-column:1 / -1}}

/* ============ Buy ============ */
.big9{display:block;font:900 clamp(104px,29vw,470px)/.78 var(--display);font-variation-settings:"wdth" 62,"wght" 200;letter-spacing:-.055em;margin:clamp(30px,5vw,70px) 0 0 -.04em;white-space:nowrap}
.big9 sup{font-size:.2em;letter-spacing:-.01em;vertical-align:top;position:relative;top:.3em;font-variation-settings:"wdth" 90,"wght" 600}
.buy .cols{margin-top:clamp(36px,5vw,64px);align-items:start;row-gap:48px}
.buy .pitch{grid-column:1 / span 5}
.buy .pitch h2{font:800 clamp(34px,3.6vw,56px)/.95 var(--display);font-variation-settings:"wdth" 78;letter-spacing:-.03em;text-wrap:balance}
.buy .pitch p{margin-top:16px;font-size:clamp(18px,1.4vw,21px);line-height:1.5;color:var(--ink-2);max-width:36ch;text-wrap:pretty}
.buy .pitch .np{display:block;color:var(--ink);font:600 1.05em/1.3 var(--display);font-variation-settings:"wdth" 88}
.buy .pitch .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.buy .pitch p.mono{margin-top:18px;font-size:12px;line-height:1.55;color:var(--muted);max-width:44ch}
.soon{display:flex;gap:12px;align-items:flex-start;margin-top:24px;padding:14px 16px;border:1.5px dashed var(--ink);border-radius:14px;max-width:44ch}
.soon .dotp{flex:none;width:10px;height:10px;margin-top:.45em;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 1.5px var(--ink)}
.soon .dotp{animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.soon p{margin:0!important;font-size:17px!important;line-height:1.45!important;color:var(--ink)!important}
.receipt-slot{grid-column:8 / span 5;position:relative}
.receipt-slot::before{content:"";display:block;height:10px;border-radius:6px;background:var(--ink);box-shadow:inset 0 -3px 0 rgba(255,255,255,.08)}
.receipt-clip{overflow:hidden;margin:-4px 14px 0;padding-bottom:30px}
.receipt{--z:10px;position:relative;background:var(--card);color:var(--ink);padding:26px 22px 34px;font:400 13px/1.7 var(--mono);box-shadow:0 22px 40px -26px rgba(0,0,0,.5),0 0 0 1px var(--hair);transition:transform 1.9s cubic-bezier(.3,.7,.2,1);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%}
.js .receipt:not(.in){transform:translateY(-101%)}
.receipt .c{text-align:center}
.receipt .ttl{font:800 22px/1 var(--display);font-variation-settings:"wdth" 80;letter-spacing:.02em;text-align:center}
.receipt hr{border:0;border-top:1.5px dashed var(--hair-2);margin:12px 0}
.receipt .ln{display:flex;gap:8px}
.receipt .ln span:first-child{flex:none}
.receipt .ln i{flex:1;border-bottom:1.5px dotted var(--faint);transform:translateY(-.45em)}
.receipt .ln span:last-child{flex:none;text-align:right}
.receipt .trial{font:600 15px/1.35 var(--mono);margin:4px 0 2px}
.receipt .tot{font-weight:600;font-size:15px}
.receipt .tot span:last-child{background:var(--yellow);color:var(--on-yellow);padding:0 4px}
.receipt .small{font-size:11.5px;line-height:1.6;color:var(--muted)}
.barcode{height:44px;margin:16px auto 6px;width:80%;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px,var(--ink) 12px 13px,transparent 13px 17px)}
.stamp{position:absolute;right:18px;top:92px;padding:6px 10px;border:2px solid var(--ink);border-radius:8px;background:var(--yellow);color:var(--on-yellow);font:700 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-8deg);transition:transform .45s cubic-bezier(.2,1.4,.3,1) 1.9s,opacity .2s 1.9s}
.js .receipt:not(.in) .stamp{opacity:0;transform:rotate(-8deg) scale(.6)}
@media (max-width:900px){.buy .pitch,.receipt-slot{grid-column:1 / -1}}

/* ============ 404 ============ */
.lost{min-height:calc(100svh - var(--nav));display:flex;flex-direction:column}
.lost .wrap{flex:1;display:flex;flex-direction:column;width:100%}
.lost .stage{position:relative;flex:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;padding:clamp(24px,4vw,56px) 0 clamp(32px,5vw,64px);row-gap:28px}
.lost .title{grid-column:1 / span 8;grid-row:1;margin-top:0}
.lost .art{grid-column:9 / span 4;grid-row:1 / span 2;align-self:end}
.lost .art svg{width:100%;height:auto;overflow:visible}
.lost .say{grid-column:1 / span 6;grid-row:2;font:400 clamp(20px,1.8vw,26px)/1.42 var(--serif);color:var(--ink-2);max-width:36ch;text-wrap:pretty}
.lost .go{grid-column:1 / -1;grid-row:3;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.lost .go .mono{color:var(--muted);margin-left:6px}
.lost .go .mono a{color:var(--ink)}
.rug-lump{transform-box:fill-box;transform-origin:50% 100%;animation:lump 3.2s ease-in-out infinite}
@keyframes lump{0%,100%{transform:scale(1,1)}50%{transform:scale(1.04,.9)}}
.b404{transform-box:fill-box;transform-origin:50% 95%;animation:sweep404 3.2s var(--ease) infinite}
@keyframes sweep404{0%,100%{transform:rotate(-14deg)}10%{transform:rotate(-24deg)}20%{transform:rotate(-6deg)}30%{transform:rotate(-18deg)}40%{transform:rotate(-14deg)}}
@media (max-width:900px){.lost .title,.lost .say,.lost .go{grid-column:1 / -1;grid-row:auto}.lost .art{grid-column:1 / -1;grid-row:auto;width:min(320px,100%);justify-self:end;order:-1}}

/* ============ Compare pages ============ */
.verdict{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:28px;margin-top:clamp(36px,5vw,64px)}
.verdict > div{border-top:2px solid var(--ink);padding-top:12px;min-width:0}
.verdict .cap{color:var(--muted)}
.verdict h2{margin-top:12px;font:800 clamp(26px,2.6vw,40px)/1 var(--display);font-variation-settings:"wdth" 80;letter-spacing:-.025em;text-wrap:balance}
.verdict ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.verdict li{position:relative;padding-left:1.4em;font-size:18px;line-height:1.5;color:var(--ink-2);text-wrap:pretty;max-width:48ch}
.verdict li::before{content:"";position:absolute;left:.1em;top:.72em;width:.55em;height:1.5px;background:var(--ink)}
.verdict .us h2 .clean{position:relative;display:inline-block;isolation:isolate}
.verdict .us h2 .clean::before{content:"";position:absolute;left:-.04em;right:-.06em;bottom:var(--mark-b,.05em);height:var(--mark-h,.36em);background:var(--yellow);z-index:-1}
@media (max-width:760px){.verdict{grid-template-columns:1fr}}
.cmpwrap{padding:clamp(48px,7vw,104px) 0 clamp(24px,3vw,40px)}
.cmpwrap h2.big{margin-top:clamp(24px,4vw,56px);font:800 clamp(44px,7vw,120px)/.88 var(--display);font-variation-settings:"wdth" 72;letter-spacing:-.04em}
table.cmp{width:100%;border-collapse:collapse;margin-top:clamp(28px,4vw,56px);font-size:16px}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:16px 16px 16px 0;border-bottom:1px solid var(--hair-2)}
.cmp thead th{border-bottom:2px solid var(--ink);padding-bottom:12px;font:700 clamp(18px,1.6vw,24px)/1.05 var(--display);font-variation-settings:"wdth" 84;letter-spacing:-.015em;vertical-align:bottom}
.cmp thead th small{display:block;margin-top:6px;font:400 11px/1.3 var(--mono);letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.cmp thead th.us{position:relative}
.cmp thead th.us::before{content:"";position:absolute;left:0;right:16px;top:-14px;height:6px;background:var(--yellow)}
.cmp tbody th{font:400 12px/1.4 var(--mono);letter-spacing:.03em;color:var(--muted);text-transform:uppercase;width:24%;padding-top:19px}
.cmp td{font:400 17px/1.4 var(--serif);color:var(--ink-2);width:38%}
.cmp td.us{font:600 17px/1.35 var(--display);font-variation-settings:"wdth" 90;color:var(--ink)}
.cmp .ns{display:inline-block;width:22px;height:1.5px;background:var(--faint);vertical-align:.35em}
.cmp tbody tr{transition:background .2s}
.cmp tbody tr:hover{background:color-mix(in srgb,var(--yellow) 12%,transparent)}
.cmp .fn{vertical-align:super;font:600 10px/1 var(--mono);margin-left:2px}
.cmp-notes{margin-top:18px;display:grid;gap:6px;color:var(--muted);max-width:80ch}
@media (max-width:760px){
  table.cmp,.cmp tbody,.cmp tr,.cmp td,.cmp tbody th{display:block;width:auto}
  .cmp thead{display:none}
  .cmp tbody tr{padding:14px 0;border-bottom:1px solid var(--hair-2)}
  .cmp tbody th{border:0;padding:0 0 8px;color:var(--ink);font-weight:600}
  .cmp td{border:0;padding:3px 0;display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:10px}
  .cmp td::before{content:attr(data-l);font:500 11px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
  .cmp td.us::before{color:var(--ink)}
}
.cta-band{margin-top:clamp(40px,6vw,80px);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:clamp(24px,3vw,40px) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:20px;align-items:center}
.cta-band p{grid-column:1 / span 6;font:800 clamp(30px,3.4vw,52px)/.95 var(--display);font-variation-settings:"wdth" 78;letter-spacing:-.03em;text-wrap:balance}
.cta-band p small{display:block;margin-top:10px;font:400 12px/1.5 var(--mono);letter-spacing:.02em;color:var(--muted)}
.cta-band .btns{grid-column:7 / -1;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
@media (max-width:900px){.cta-band p,.cta-band .btns{grid-column:1 / -1;justify-content:flex-start}}
.sources{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:14px}
.sources .cap{grid-column:1 / span 3;color:var(--ink)}
.sources .cap span{display:block;margin-top:6px;color:var(--muted);text-transform:none;letter-spacing:.02em}
.sources ol{grid-column:4 / -1;margin:0;padding:0 0 0 1.6em;display:grid;gap:6px;font:400 12.5px/1.5 var(--mono);color:var(--muted)}
.sources a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair-2);text-underline-offset:2px;overflow-wrap:anywhere}
.sources a:hover{text-decoration-color:var(--ink)}
@media (max-width:900px){.sources .cap,.sources ol{grid-column:1 / -1}}
.colophon .lk h4 + ul + h4{margin-top:26px}

/* ============ Colophon footer (as the home page) ============ */
.colophon{position:relative;border-top:2px solid var(--ink);padding:clamp(48px,7vw,96px) 0 clamp(80px,8vw,110px)}
.colophon .cols{row-gap:40px}
.colophon .maker{grid-column:1 / span 5;align-self:start;display:grid;grid-template-columns:clamp(150px,15vw,220px) 1fr;gap:clamp(16px,2vw,28px);align-items:end}
.colophon .maker figure{margin:0}
.colophon .maker img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 100%;filter:grayscale(1) contrast(.92) brightness(1.04);opacity:.9;-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 98%);mask-image:linear-gradient(to bottom,#000 62%,transparent 98%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.colophon .maker img,.facts .bio img,.plates .pl-img.me img){opacity:.82;filter:grayscale(1) contrast(.9) brightness(.92)}}
:root[data-theme="dark"] :is(.colophon .maker img,.facts .bio img,.plates .pl-img.me img){opacity:.82;filter:grayscale(1) contrast(.9) brightness(.92)}
.colophon .maker figcaption{margin-top:-6px;position:relative}
.colophon .maker p{font-size:18px;line-height:1.5;color:var(--ink-2);min-width:0}
.colophon .maker p b{font-weight:600;color:var(--ink)}
.colophon .me{color:inherit;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.32em;text-underline-offset:-.14em;text-decoration-skip-ink:none;transition:text-decoration-color .2s}
.colophon .me:hover{text-decoration-color:var(--ink)}
.colophon .me-more{display:block;margin-top:14px;font-size:12.5px;letter-spacing:.02em;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--hair-2);width:max-content;max-width:100%;padding-bottom:2px}
.colophon .me-more:hover{color:var(--ink);border-color:var(--ink)}
.colophon .set{grid-column:7 / span 3}
.colophon .set h4,.colophon .lk h4{margin-bottom:12px;color:var(--ink)}
.colophon .set p{font-size:15.5px;line-height:1.5;color:var(--muted)}
.colophon .set p em{color:var(--ink)}
.colophon .lk{grid-column:11 / span 2}
.colophon .lk ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.colophon .lk a{font:500 14px/1 var(--display);text-decoration:none;border-bottom:1px solid var(--hair-2);padding-bottom:2px}
.colophon .lk a:hover,.colophon .lk a[aria-current="page"]{border-color:var(--ink)}
.colophon .lk a[aria-current="page"]{background:var(--yellow);color:var(--on-yellow);border-color:var(--on-yellow)}
.sign{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px 20px;border-top:1px solid var(--hair-2);padding-top:18px;color:var(--muted)}
.wordmark{font:800 clamp(88px,17vw,264px)/.86 var(--display);font-variation-settings:"wdth" 80;letter-spacing:-.045em;color:var(--ink);grid-column:1 / -1;display:flex;align-items:flex-end;gap:.08em;margin-top:clamp(8px,2vw,24px);text-decoration:none;width:max-content;max-width:100%}
.wordmark img{height:.8em;width:auto;margin-bottom:.02em;transform:rotate(-8deg);transform-origin:50% 100%;transition:transform .6s var(--ease)}
.wordmark:hover img{transform:rotate(14deg)}
@media (max-width:900px){.colophon .maker,.colophon .set,.colophon .lk{grid-column:1 / -1}}
@media (max-width:520px){.colophon .maker{grid-template-columns:120px 1fr}}

/* Reveal on view */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:760px){
  .cols,.clause,.release-head,.day,.entry,.copyset,.facts,.brand,.contact,.signoff,.lost .stage,.cta-band,.sources{grid-template-columns:repeat(4,minmax(0,1fr))}
  .title{letter-spacing:-.035em}
}

/* ============ Pencil marginalia: someone's notes on the printed page ============ */
.mg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.mk{position:absolute;pointer-events:none}
.mk svg{display:block;overflow:visible}
.mk path,.mk .st{fill:none;stroke:var(--pencil);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.mk .soft{stroke:var(--pencil-soft)}
.mk .yf{fill:var(--yellow);stroke:none;opacity:0;transition:opacity .6s ease-out}
.mk .dust{fill:var(--pencil);stroke:none;opacity:0;transition:opacity .5s ease-out}
.mk.drawn path,.mk.drawn .st{stroke-dashoffset:0;transition:stroke-dashoffset var(--d,1.1s) cubic-bezier(.45,.05,.25,1) var(--dl,0s)}
.mk.drawn .yf{opacity:.95;transition-delay:.9s}
.mk.drawn .dust{opacity:1;transition-delay:calc(var(--dl,0s) + .7s)}
@media (max-width:1100px){.mk:not(.m){display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.15s!important;animation-iteration-count:1!important;transition-duration:.15s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .rv{transform:none}
  .receipt{transform:none}
  .vnum.in,.rug-lump,.b404,.soon .dotp{animation:none}
  .mk path,.mk .st,.uline path{stroke-dashoffset:0}
  .mk .yf{opacity:.95}
  .mk .dust{opacity:1}
}