/* Blast Phemur* landing page. D4 The Swear Jar. Static CSS, no build step. */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/fraunces-latin.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/fraunces-italic-latin.woff2) format("woff2")}
@font-face{font-family:"Recursive";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/recursive-latin.woff2) format("woff2")}

/* D4 tokens, synced from d4-swear-jar.html :root (2026-10-31).
   Oat paper, cocoa ink, sea-glass jar, penny copper, honey label. Three accents: sea-glass, penny, honey. */
:root{
  --oat:#F6EEDF; --cocoa:#3A2418; --cocoa-2:#6B4A36; --glass:#7FB7AE; --glass-t:#2F6B64; --penny:#A3561F; --penny-t:#9A4F1C; --honey:#E8C79A;
  --night:#1E1712; --oat-f:#B8A894; --glass-l:#8FCFC4; --penny-l:#E69A5E;
  /* from the board's drawings: glass highlight, the level and the falling asterisk of the jar that fills */
  --shine:#D8ECE7; --level:#8A4A1C; --fall:#B8693A;
  /* the TV frame is dark in both themes, as a screen is */
  --tv:#000000; --tv-ink:#FFFFFF; --tv-muted:#B8A894; --tv-line:#3A2E25;
  --s-wall:#211913; --s-floor:#17110D; --s-frame:#2C231B; --s-door:#3E3125; --s-fig:#0C0907;
  --story:"Fraunces",Georgia,"Times New Roman",serif;
  --hand:"Recursive",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(18px,4.2vw,60px);
  --max:1240px;
  --r:26px;
}
/* dark is the primary ground: the kitchen at night. Light is the oat page derived from it. */
[data-theme=dark]{--bg:#1E1712;--fg:#F6EEDF;--muted:#B8A894;--gt:#8FCFC4;--pt:#E69A5E;--card:#2A2019;--dash:#5A4A3E;--shelf:#3D2D22;--jar-line:#F6EEDF;color-scheme:dark}
[data-theme=light]{--bg:#F6EEDF;--fg:#3A2418;--muted:#6B4A36;--gt:#2F6B64;--pt:#9A4F1C;--card:#FFFAF1;--dash:#D6C6AE;--shelf:#E3D2B6;--jar-line:#3A2418;color-scheme:light}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font:400 18px/1.55 var(--hand);font-variation-settings:"CASL" 1,"MONO" 0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block}
a{color:var(--gt);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--gt);outline-offset:3px;border-radius:6px}
kbd{font:700 .9em/1 var(--hand);font-variation-settings:"CASL" 0,"MONO" 1;display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;padding:0 .35em;border:2px solid currentColor;border-bottom-width:4px;border-radius:7px;vertical-align:.08em}
.num{font-family:var(--hand);font-variation-settings:"CASL" 1,"MONO" 1}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--honey);color:var(--cocoa);font:700 16px/1 var(--hand);padding:14px 18px;border-radius:999px;border:3px solid var(--cocoa);text-decoration:none}
.skip:focus{top:12px}

/* type: a soft, slightly wonky serif for the name and headlines; a casual sans that turns mono for numbers */
h1,h2,h3,.hero-line{font-family:var(--story);font-optical-sizing:auto}
h2{font-weight:700;font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.012em;max-width:18ch;text-wrap:balance}
h3{font-weight:700;font-size:clamp(21px,1.9vw,25px);line-height:1.15}
.lede{max-width:56ch;color:var(--muted);font-size:clamp(18px,1.5vw,20px);margin-top:18px;text-wrap:pretty}
.small{max-width:70ch;color:var(--muted);font-size:16px;margin-top:22px}

/* the wordmark: Fraunces soft, mixed case, the brushed asterisk in penny on the cap line */
.ast{fill:var(--pt);width:.5em;height:.5em;flex:none}
.wm-sm,.wm-xs{font-family:var(--story);font-weight:760;font-variation-settings:"opsz" 72;letter-spacing:-.01em;line-height:1;white-space:nowrap;display:inline-flex;align-items:flex-start}
.wm-sm .ast,.wm-xs .ast{margin-left:.04em;margin-top:-.08em}

/* top bar */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px 28px;padding:10px var(--pad);background:var(--bg);border-bottom:3px dotted transparent;transition:border-color .2s}
.top.stuck{border-bottom-color:var(--dash)}
.top-mark{display:inline-flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;min-height:44px}
.top-mark img{width:28px;height:28px}
.wm-sm{font-size:22px}
.top-nav{display:flex;gap:4px 22px;margin-left:auto;font:600 15px/1.2 var(--hand)}
.top-nav a{color:var(--fg);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;border-bottom:2px solid transparent}
.top-nav a:hover{border-bottom-color:var(--pt)}
.theme{font:700 14px/1 var(--hand);background:var(--honey);color:var(--cocoa);border:2px solid var(--cocoa);border-radius:999px;padding:0 16px;min-height:44px;cursor:pointer;white-space:nowrap}
.theme:hover{background:var(--oat)}
@media (max-width:860px){.top-nav{display:none}.theme{margin-left:auto}}

/* page rhythm */
main > .sec,.hero,.foot{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(72px,9vw,132px)}
.sec + .sec{border-top:3px dotted var(--dash)}
.moment{padding-top:clamp(56px,7vw,104px)}
.how{padding-block:clamp(56px,6.5vw,96px)}
.privacy{padding-block:clamp(36px,4.5vw,64px)}
.next{padding-block:clamp(48px,6vw,88px)}
.last{padding-bottom:clamp(40px,5vw,72px)}
.sec-head{margin-bottom:clamp(32px,4vw,56px)}

/* hero: the name stacked like a jar label, the line that lands the pun, the jar on its shelf */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:0 clamp(20px,4vw,64px);padding-top:clamp(24px,3vw,44px);padding-bottom:0}
.hero::after{content:"";grid-column:1/-1;height:16px;margin-inline:calc(var(--pad) * -1);background:var(--shelf);border-top:3px solid var(--fg);border-radius:3px;margin-top:-3px}
.hero-copy{padding-bottom:clamp(36px,4.4vw,60px);min-width:0}
.wm{font-weight:760;font-size:clamp(64px,9.2vw,134px);line-height:.86;letter-spacing:-.025em;font-variation-settings:"opsz" 144}
.wm-a,.wm-b{display:block;white-space:nowrap}
.wm-b{display:flex;align-items:flex-start}
.wm .ast{width:.46em;height:.46em;margin-left:.03em;margin-top:.02em}
.hero-line{margin-top:clamp(20px,2.3vw,32px);font-weight:600;font-size:clamp(26px,2.6vw,38px);line-height:1.12;letter-spacing:-.01em;max-width:24ch}
.hero-line em{display:block;font-style:italic;font-weight:500;color:var(--gt)}
.lead{margin-top:18px;max-width:44ch;font-size:clamp(18px,1.45vw,20px);color:var(--muted);text-wrap:pretty}
.hero-jar{position:relative;align-self:end;justify-self:center;width:min(100%,530px);container-type:inline-size;margin-bottom:-4px}
.hero-jar .jar{width:100%;height:auto;overflow:visible;transform:rotate(-3deg);transform-origin:50% 100%}

/* the jar, drawn once and themed: sea-glass, copper lid, cocoa word; outline follows the ground */
.jar .glass,.next-jar .glass{fill:var(--glass)}
.line{stroke:var(--jar-line);stroke-width:5;stroke-linejoin:round}
.nofill{fill:none}
.shine{fill:none;stroke:var(--shine);stroke-width:5;stroke-linecap:round}
.word{fill:var(--cocoa)}
.lid-p{fill:var(--penny)}
.string{fill:none;stroke:var(--honey);stroke-width:1.6;stroke-linecap:round}
.lid,.word,.jar{transform-box:fill-box}
.tag{position:absolute;left:66%;top:52%;font:700 6.1cqw/1 var(--hand);z-index:1;font-variation-settings:"CASL" 1;background:var(--honey);color:var(--cocoa);border:2px solid var(--cocoa);border-radius:6px 16px 16px 6px;padding:.42em .8em .42em 1.05em;transform:rotate(9deg);transform-origin:0 50%;white-space:nowrap}
.tag::before{content:"";position:absolute;left:.38em;top:50%;width:.32em;height:.32em;margin-top:-.16em;border-radius:50%;background:var(--bg);border:2px solid var(--cocoa)}

/* one word goes in: on first load the lid lifts, the caught word drops in, the jar settles. Once. */
@media (prefers-reduced-motion:no-preference){
  .hero-jar .lid{transform-origin:100% 100%;animation:lid-lift 1.7s .45s cubic-bezier(.3,.7,.35,1) both}
  .hero-jar .word{animation:word-drop 1s .75s both}
  .hero-jar .jar{animation:settle .9s 1.6s ease-in-out both}
}
@keyframes lid-lift{0%{transform:none}22%,52%{transform:translate(9px,-15px) rotate(16deg)}74%{transform:translate(0,-2px) rotate(-2deg)}100%{transform:none}}
@keyframes word-drop{0%{transform:translateY(-92px);opacity:0;animation-timing-function:cubic-bezier(.55,0,.85,.4)}12%{opacity:1}74%{transform:translateY(3px);animation-timing-function:ease-out}88%{transform:translateY(-2px)}100%{transform:none;opacity:1}}
@keyframes settle{0%{transform:rotate(-3deg)}30%{transform:rotate(-5deg)}62%{transform:rotate(-1.6deg)}100%{transform:rotate(-3deg)}}
/* phones: the jar comes up beside the plain-words line, on its own little shelf, so name, pun and jar share the first screen */
@media (max-width:760px){
  .hero{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;padding-top:18px}
  .hero-copy{display:contents}
  .kicker{grid-column:1;grid-row:1;margin:0}
  .hero-jar{grid-column:2;grid-row:1;width:116px;margin:0 30px 0 0;align-self:end}
  .hero-jar::after{content:"";display:block;height:7px;margin:-6px -14px 0 -10px;background:var(--shelf);border-top:2px solid var(--fg);border-radius:2px}
  .tag{font-size:11px;top:50%}
  .wm,.hero-line,.lead,.cta-row{grid-column:1/-1}
  .wm{margin-top:14px}
  .cta-row{padding-bottom:40px}
}

/* install button: honey label. While the store listing is pending it is a plain note, not a link. */
.cta-row{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.cta{display:inline-flex;align-items:center;min-height:56px;padding:0 26px;border-radius:999px;font:700 18px/1.2 var(--hand);font-variation-settings:"CASL" 1}
p.cta{border:3px dashed var(--honey);color:var(--fg)}
[data-theme=light] p.cta{border-color:var(--penny-t)}
a.cta{background:var(--honey);color:var(--cocoa);border:3px solid var(--cocoa);text-decoration:none;box-shadow:0 5px 0 var(--cocoa);transition:transform .12s,box-shadow .12s}
[data-theme=dark] a.cta{border-color:var(--oat);box-shadow:0 5px 0 var(--oat)}
a.cta:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--cocoa)}
[data-theme=dark] a.cta:hover{box-shadow:0 3px 0 var(--oat)}
a.cta:active{transform:translateY(5px);box-shadow:none}
.cta-note{font:600 15px/1.4 var(--hand);color:var(--muted)}
@media (max-width:520px){.cta{font-size:16px;padding:10px 20px;border-radius:28px;min-height:52px}}

/* the moment: a caption over a dark frame, and the timeline underneath */
.tv{background:var(--tv);color:var(--tv-ink);border:3px solid var(--fg);border-radius:var(--r);padding:clamp(10px,1.4vw,18px);display:grid;gap:clamp(16px,2vw,24px)}
.screen{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;container-type:inline-size;background:var(--s-wall)}
.scene{position:absolute;inset:0;width:100%;height:100%}
.s-wall{fill:var(--s-wall)} .s-floor{fill:var(--s-floor)} .s-frame{fill:var(--s-frame)} .s-door{fill:var(--s-door)} .s-fig{fill:var(--s-fig)} .s-shelf{fill:var(--s-frame)}
.s-shade{fill:var(--honey);opacity:.78} .s-cone{fill:var(--honey);opacity:.06}
.cc{position:absolute;left:0;right:0;bottom:16%;text-align:center;font:500 clamp(14px,3.3cqw,36px)/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.01em}
.cc span{background:var(--tv);color:var(--tv-ink);padding:.12em .45em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:1.6cqw;padding:1.4cqw 2cqw;background:var(--tv);font:600 clamp(11px,1.5cqw,15px)/1 var(--hand);color:var(--tv-ink)}
.bar-track{flex:1;height:4px;background:var(--tv-line);border-radius:2px;position:relative}
.bar-fill{position:absolute;left:0;top:0;bottom:0;width:71%;background:var(--penny-l);border-radius:2px}
.bar-cc{border:2px solid var(--tv-ink);border-radius:4px;padding:.2em .35em;font-size:.85em}
.lanes{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:44px 64px auto;gap:10px 16px;align-items:center;padding:0 4px 4px}
.lane-l{font:600 13px/1 var(--hand);text-transform:uppercase;letter-spacing:.07em;color:var(--tv-muted)}
.tracks{grid-column:2;grid-row:1/4;position:relative;display:grid;grid-template-rows:44px 64px auto;gap:10px;min-width:0}
.lane{position:relative;border-radius:8px;background:#120D0A}
.lane-cc{background:transparent;border:2px dashed var(--tv-line)}
.cc-line{position:absolute;left:25%;right:20%;top:6px;bottom:6px;background:#1C1511;border:2px solid var(--tv-line);border-radius:6px}
.tok{position:absolute;top:50%;transform:translateY(-50%);font:600 clamp(10px,1.15vw,14px)/1 var(--hand);font-variation-settings:"CASL" 0,"MONO" 1;color:var(--tv-ink);white-space:nowrap;padding-left:4px}
.t1{left:28%} .t3{left:58%} .t4{left:69%}
.t2{left:45%;width:7.5%;height:calc(100% - 4px);display:flex;align-items:center;border:2px solid var(--penny-l);border-radius:5px;color:var(--penny-l);overflow:visible}
.wave{width:100%;height:100%}
.wave-on{fill:var(--glass)}
.wave-off{fill:var(--penny-l)}
.lane-snd::before{content:"";position:absolute;left:45%;width:7.5%;top:6px;bottom:6px;border:2px dashed var(--penny-l);border-radius:6px}
.under{position:relative;height:40px}
.gap-l{position:absolute;left:calc(45% + 8px);top:0;font:700 13px/1.2 var(--hand);color:var(--penny-l);white-space:nowrap}
.ticks{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font-size:13px;color:var(--tv-muted)}
.ph{position:absolute;left:0;right:0;top:-6px;height:calc(44px + 10px + 64px + 12px);overflow:hidden;pointer-events:none}
.ph i{position:absolute;inset:0;transform:translateX(45%)}
.ph i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:2px;background:var(--honey)}
.tv figcaption{font-size:15px;color:var(--tv-muted);max-width:72ch;padding:0 4px 4px}
@media (prefers-reduced-motion:no-preference){
  .ph i{animation:playhead 8s linear infinite}
  .cc{animation:cc-show 8s steps(1,end) infinite}
}
@keyframes playhead{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes cc-show{0%{opacity:0}25%{opacity:1}80%{opacity:0}}
.js .tv:not(.on) .anim,.js .tv:not(.on) .anim i{animation-play-state:paused}
@media (max-width:620px){.lanes{column-gap:10px}.lane-l{font-size:10px;letter-spacing:.04em}.ticks span:nth-child(even){visibility:hidden}.gap-l{font-size:12px}}

/* three steps */
.steps{--g:clamp(20px,3vw,40px);list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.steps li:not(:last-child)::after{content:"";position:absolute;top:27px;left:68px;right:calc(var(--g) * -1 + 12px);border-top:3px dotted var(--dash)}
.steps li{position:relative}
.steps .n{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--bg);border:3px solid var(--fg);font-weight:700;font-size:22px;position:relative;margin-bottom:22px}
.steps li:last-child .n{background:var(--glass);color:var(--cocoa);border-color:var(--fg)}
.steps h3{font-size:clamp(26px,2.5vw,34px);margin-bottom:8px}
.steps p{color:var(--muted);max-width:32ch}
@media (max-width:760px){.steps{grid-template-columns:1fr;--g:28px}.steps li:not(:last-child)::after{left:27px;right:auto;top:66px;bottom:calc(var(--g) * -1 + 8px);border-top:0;border-left:3px dotted var(--dash)}.steps li{padding-left:80px;min-height:56px}.steps .n{position:absolute;left:0;top:0;margin:0}}

/* the two dials, as the extension shows them */
.card{background:var(--card);border:3px solid var(--fg);border-radius:var(--r);padding:clamp(20px,2.6vw,34px)}
.dials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
@media (max-width:860px){.dials{grid-template-columns:1fr}}
.dial{min-width:0}
.dial legend{float:left;width:100%;font:700 clamp(26px,2.4vw,32px)/1.1 var(--story);margin-bottom:18px}
.seg{clear:both;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:3px solid var(--fg);border-radius:999px;overflow:hidden;background:var(--bg)}
.seg label{position:relative;cursor:pointer}
.seg label + label{border-left:2px solid var(--dash)}
.seg input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 6px;font:700 16px/1 var(--hand);font-variation-settings:"CASL" 1}
.seg label:hover input:not(:checked) + span{background:var(--card)}
.seg input:checked + span{background:var(--glass);color:var(--cocoa)}
.seg input:focus-visible + span{outline:3px solid var(--fg);outline-offset:-7px;border-radius:999px}
.means{margin-top:18px;min-height:5.2em}
.means p{display:none;font-size:18px;line-height:1.5}
.dial:has(input[value="0"]:checked) [data-l="0"],
.dial:has(input[value="1"]:checked) [data-l="1"],
.dial:has(input[value="2"]:checked) [data-l="2"],
.dial:has(input[value="3"]:checked) [data-l="3"]{display:block}

/* when it gets one wrong */
.wrong-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:860px){.wrong-grid{grid-template-columns:1fr}}
.popup{background:var(--card);border:3px solid var(--fg);border-radius:20px;overflow:hidden;max-width:400px;transform:rotate(-1deg)}
.pop-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--bg);border-bottom:3px solid var(--fg)}
.pop-mark{display:inline-flex;align-items:center;gap:8px}
.wm-xs{font-size:19px}
.pill{display:inline-block;font:700 13px/1 var(--hand);font-variation-settings:"CASL" 1;background:var(--glass);color:var(--cocoa);padding:7px 10px;border-radius:999px;border:2px solid var(--cocoa)}
.pill.honey{background:var(--honey)}
.pop-r{padding:14px}
.pop-lbl{font:700 13px/1.2 var(--hand);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.pop-r ul{list-style:none}
.pop-r li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:12px 0;border-top:2px dashed var(--dash)}
.pop-r li:first-child{border-top:0}
.pop-r .w{font-weight:700;font-size:18px;flex-basis:100%}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.b{font:700 15px/1 var(--hand);font-variation-settings:"CASL" 1;color:var(--fg);background:transparent;border:2px solid var(--fg);border-radius:999px;padding:0 14px;min-height:44px;cursor:pointer}
.b:hover{background:var(--bg)}
.lnk{font:600 15px/1 var(--hand);color:var(--gt);background:none;border:0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;min-height:44px;padding:0 4px;cursor:pointer}
.done{display:none;font:600 15px/1.3 var(--hand);color:var(--gt)}
.done-btn{margin-left:10px}
li.is-done .acts{display:none}
li.is-done .done{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.pop-foot{font-size:14px;color:var(--muted);margin-top:4px}
.popup figcaption{font-size:14px;color:var(--muted);padding:12px 14px;border-top:3px solid var(--fg);background:var(--bg)}
.wrong-side h3{margin-bottom:10px}
.wrong-side > p{color:var(--muted);max-width:52ch}
.keys-h{margin-top:40px}
.keys{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;align-items:center;margin-top:14px;max-width:52ch}
.keys dt kbd{font-size:20px;min-width:2.1em;height:2.1em}
.keys dd{color:var(--muted)}

/* privacy: a honey label stuck on the jar */
.privacy{border-top:0}
.label-card{background:var(--honey);color:var(--cocoa);border:3px solid var(--cocoa);border-radius:22px 34px 26px 30px;padding:clamp(28px,5vw,72px);box-shadow:10px 10px 0 var(--shelf)}
[data-theme=dark] .label-card{border-color:var(--oat)}
.label-card h2{max-width:14ch}
.label-card p{max-width:60ch;margin-top:18px;font-size:clamp(18px,1.5vw,20px)}
.label-card a{color:var(--cocoa);font-weight:700}
.label-card .fine{font-size:16px;margin-top:26px;padding-top:18px;border-top:2px dashed var(--cocoa)}
.stamps{list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.stamps li{font:700 clamp(17px,1.6vw,20px)/1 var(--hand);font-variation-settings:"CASL" 1;background:var(--oat);color:var(--cocoa);border:3px solid var(--cocoa);border-radius:999px;padding:13px 20px}
.stamps li:nth-child(1){transform:rotate(-2deg)}
@media (min-width:900px){.label-card{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:56px}.label-card > *{grid-column:1}.label-card .stamps{grid-column:2;grid-row:1/span 4;flex-direction:column;align-items:flex-start;align-self:center;gap:18px;margin:0}.label-card .stamps li{font-size:clamp(20px,2vw,26px);padding:16px 26px}} .stamps li:nth-child(2){transform:rotate(1.4deg)} .stamps li:nth-child(3){transform:rotate(-.8deg)}

/* where it works */
.services{list-style:none}
.services li{display:grid;grid-template-columns:minmax(0,1fr) 15.5rem minmax(0,1.1fr);gap:12px 32px;align-items:center;padding:28px 0;border-top:2px dashed var(--dash)}
.services li:last-child{border-bottom:2px dashed var(--dash)}
.services h3{font-size:clamp(30px,4vw,56px);font-weight:700;line-height:1;letter-spacing:-.01em}
.services p:last-child{color:var(--muted)}
.services .pill{justify-self:start;white-space:nowrap}
@media (max-width:860px){.services li{grid-template-columns:1fr}}

/* coming next: the jar that fills */
.next-card{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;border:3px dashed var(--pt);border-radius:var(--r);padding:clamp(24px,4vw,56px)}
@media (max-width:700px){.next-card{grid-template-columns:1fr}}
.next-jar{color:var(--jar-line);justify-self:center;width:min(100%,220px)}
.next-jar svg{width:100%;height:auto;overflow:visible}
.next-jar .lvl{fill:var(--level)}
.next-jar .fall{fill:var(--fall);opacity:0}
.next-jar .line{stroke:currentColor}
.next-jar .lid,.next-jar .lvl,.next-jar .fall{transform-box:fill-box;transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .next-jar .lid{animation:n-lid 4s ease-in-out infinite}
  .next-jar .fall{animation:n-fall 4s cubic-bezier(.5,0,.9,.5) infinite}
  .next-jar .lvl{animation:n-rise 4s ease-out infinite}
}
@keyframes n-lid{0%,8%{transform:none}18%,40%{transform:translate(6px,-12px) rotate(12deg)}52%,100%{transform:none}}
@keyframes n-fall{0%,16%{transform:translateY(0);opacity:0}18%{opacity:1}38%{transform:translateY(92px);opacity:1}44%,100%{transform:translateY(92px);opacity:0}}
@keyframes n-rise{0%,38%{transform:translateY(0)}46%,92%{transform:translateY(-8px)}100%{transform:translateY(0)}}
.soon{display:inline-block;font:700 13px/1.3 var(--hand);text-transform:uppercase;letter-spacing:.07em;border:2px dashed var(--pt);color:var(--pt);border-radius:8px;padding:6px 10px;margin-bottom:16px}
.next-copy p{max-width:58ch;margin-top:14px}
.next-copy .fine{font-size:15px;color:var(--muted)}

/* questions */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq-head{position:sticky;top:96px}
@media (max-width:860px){.faq{grid-template-columns:1fr}.faq-head{position:static}}
.faq-list details{border-top:2px dashed var(--dash)}
.faq-list details:last-child{border-bottom:2px dashed var(--dash)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:14px 0;font:700 clamp(20px,1.9vw,24px)/1.2 var(--story)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:30px;height:30px;border:2px solid var(--fg);border-radius:50%;background:linear-gradient(var(--fg),var(--fg)) center/12px 2px no-repeat,linear-gradient(var(--fg),var(--fg)) center/2px 12px no-repeat}
.faq-list details[open] summary::after{background:linear-gradient(var(--fg),var(--fg)) center/12px 2px no-repeat;border-color:var(--pt)}
.faq-list summary:hover{color:var(--pt)}
.faq-list details p{padding:0 0 22px;max-width:60ch;color:var(--muted)}

/* last word */
.last{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.last-jar{width:min(100%,280px);justify-self:center}
.last-jar .jar{width:100%;height:auto;transform:rotate(4deg)}
.last h2{font-size:clamp(40px,6vw,88px);max-width:12ch}
@media (max-width:700px){.last{grid-template-columns:1fr}.last-jar{width:160px;justify-self:start}}

/* footer */
.foot{display:grid;gap:14px;padding-block:36px 56px;border-top:3px dotted var(--dash);font:500 15px/1.5 var(--hand);color:var(--muted)}
.foot-mark{color:var(--fg)}
.foot-mark .wm-xs{font-size:20px;vertical-align:-.1em}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 24px;font-weight:700}
.foot-nav a{color:var(--fg);display:inline-flex;align-items:center;min-height:44px}
.foot-legal{max-width:80ch}

/* 404 */
.lost{max-width:var(--max);margin-inline:auto;padding:clamp(60px,10vw,140px) var(--pad);display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;min-height:70vh}
.lost h1{font-size:clamp(40px,6vw,84px);line-height:1.02;max-width:13ch}
.lost p{margin-top:18px;color:var(--muted);max-width:44ch}
.lost .jar{width:100%;height:auto;transform:rotate(-6deg)}
@media (max-width:700px){.lost{grid-template-columns:1fr}.lost .jar{width:150px}}

/* a plain-words line above the name, for people who arrive from a search */
.kicker{font:600 clamp(14px,1.2vw,16px)/1.35 var(--hand);color:var(--muted);max-width:48ch;margin-bottom:clamp(16px,2vw,24px)}

/* send this to a friend */
.share{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 28px;align-items:center;margin-top:clamp(36px,5vw,64px);padding-top:28px;border-top:2px dashed var(--dash)}
.share-h{grid-row:span 2;font:italic 500 clamp(30px,3.6vw,48px)/1 var(--story);color:var(--gt)}
.share-p{color:var(--muted)}
.share-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.share-b{background:var(--bg)}
.share-status{grid-column:1/-1;min-height:1.5em;font:600 15px/1.4 var(--hand);color:var(--gt);overflow-wrap:anywhere}
.share .lnk{display:inline-flex;align-items:center}
@media (max-width:700px){.share{grid-template-columns:1fr}.share-h{grid-row:auto}}
.lanes > .lane-l:nth-child(1){grid-row:1;grid-column:1}
.lanes > .lane-l:nth-child(2){grid-row:2;grid-column:1}

/* ---- press kit ------------------------------------------------------------------------------ */
.press-head h1,.bul-head h1{font-size:clamp(44px,6vw,88px);line-height:1;letter-spacing:-.015em;max-width:16ch;text-wrap:balance}
.facts{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);max-width:62rem;margin-top:clamp(28px,3vw,40px);border-top:3px solid var(--fg)}
.facts dt,.facts dd{padding-block:14px;border-bottom:2px dashed var(--dash)}
.facts dt{font:700 14px/1.4 var(--hand);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding-right:20px;padding-top:18px}
.facts dd{max-width:62ch}
.cta-inline{font-weight:700}
@media (max-width:640px){.facts{grid-template-columns:1fr}.facts dt{border-bottom:0;padding-bottom:0}.facts dd{padding-top:4px}}
.copyblocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px}
.copyblocks .wide{grid-column:1/-1}
.copyblocks p{font-size:clamp(18px,1.5vw,20px);max-width:72ch}
.lbl{font:700 13px/1.3 var(--hand);text-transform:uppercase;letter-spacing:.07em;color:var(--pt);margin-bottom:10px}
@media (max-width:700px){.copyblocks{grid-template-columns:1fr}}
.files{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:32px 24px;margin-top:36px}
.prev{aspect-ratio:16/10;border:3px solid var(--fg);border-radius:18px;display:grid;place-items:center;padding:8%;overflow:hidden}
.prev.oat{background:var(--oat)}
.prev.night{background:var(--night)}
.prev img{width:100%;height:auto}
.prev img.sq{width:44%}
.prev.img{display:block;background:var(--night);padding:0}
.prev.img img{width:100%;height:100%;object-fit:contain}
.files li > p{margin-top:12px;font-weight:700}
.files .dl{margin-top:0;font-weight:700;display:flex;flex-wrap:wrap;align-items:center;column-gap:8px}
.dl a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.dl span{color:var(--muted);font:500 15px/1 var(--hand);font-variation-settings:"CASL" 1,"MONO" 1;margin-right:14px}
.swatches{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:16px;margin-top:32px}
.swatches li{border:3px solid var(--fg);border-radius:18px;padding:64px 16px 14px;display:grid;gap:4px;font-size:15px}
.swatches b{font:700 19px/1.15 var(--story)}
.sw-night{background:#1E1712;color:#F6EEDF}
.sw-oat{background:#F6EEDF;color:#3A2418}
.sw-cocoa{background:#3A2418;color:#F6EEDF}
.sw-glass{background:#7FB7AE;color:#1E1712}
.sw-penny{background:#A3561F;color:#FFFAF1}
.sw-honey{background:#E8C79A;color:#3A2418}

/* ---- bulletin insert: the sheet is sized in container units, so the preview is the print ---- */
.bul-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:30px}
.bul-acts .small{margin-top:0}
.cta-b{background:var(--honey);color:var(--cocoa);border:3px solid var(--cocoa);box-shadow:0 5px 0 var(--cocoa);cursor:pointer;transition:transform .12s,box-shadow .12s}
[data-theme=dark] .cta-b{border-color:var(--oat);box-shadow:0 5px 0 var(--oat)}
.cta-b:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--cocoa)}
[data-theme=dark] .cta-b:hover{box-shadow:0 3px 0 var(--oat)}
.cta-b:active{transform:translateY(5px);box-shadow:none}
html:not(.js) [data-print]{display:none}
.sheet-wrap{max-width:var(--max);margin-inline:auto;padding:0 var(--pad) clamp(72px,9vw,132px)}
.sheet{container-type:inline-size;width:min(100%,8.5in);margin-inline:auto;aspect-ratio:8.5/11;background:#FFFFFF;color:#3A2418;display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);border-radius:4px;box-shadow:0 22px 60px rgba(0,0,0,.45);overflow:hidden}
[data-theme=light] .sheet{box-shadow:0 0 0 1px #D6C6AE,0 18px 44px rgba(58,36,24,.16)}
.ins{--ink:#3A2418;--pen:#9A4F1C;--mut:#6B4A36;display:grid;grid-template-columns:minmax(0,1fr) 25cqw;grid-template-rows:minmax(0,1fr) auto;column-gap:5cqw;padding:5.2cqw 5.6cqw 3.4cqw;color:var(--ink);font-family:var(--hand);font-variation-settings:"CASL" 1,"MONO" 0;min-height:0}
.ins-main{min-width:0}
.ins-wm{width:44cqw;height:auto}
.ins-say{font:600 1.75cqw/1.3 var(--hand);color:var(--mut);margin-top:1.5cqw}
.ins-h{font:italic 600 6.4cqw/1 var(--story);letter-spacing:-.01em;color:var(--ink);margin-top:3.4cqw;max-width:none}
.ins-p{font-size:1.95cqw;line-height:1.45;margin-top:1.8cqw}
.ins-facts{list-style:none;display:grid;gap:1.05cqw;margin-top:2.3cqw;font-size:1.72cqw;line-height:1.4}
.ins-facts li{position:relative;padding-left:2.7cqw}
.ins-facts li::before{content:"";position:absolute;left:0;top:.42em;width:1.25cqw;height:1.25cqw;border-radius:50%;border:.32cqw solid var(--pen)}
.ins-facts b{font-weight:800}
.ins-side{display:grid;justify-items:center;align-content:start;gap:.9cqw;text-align:center}
.ins-jar{width:15cqw;height:auto;transform:rotate(-6deg);margin-bottom:1.4cqw}
.ins-qr{width:19.5cqw;height:auto}
.ins-url{font:800 1.8cqw/1.2 var(--hand);font-variation-settings:"CASL" 1,"MONO" 1;color:var(--ink)}
.ins-free{font-size:1.45cqw;line-height:1.35;color:var(--mut)}
.ins-store{font:700 1.45cqw/1.35 var(--hand);color:var(--pen)}
.ins-foot{grid-column:1/-1;font-size:1.32cqw;line-height:1.4;color:var(--mut);border-top:.25cqw dashed #CDBDA5;padding-top:1.4cqw;margin-top:2.2cqw}
.cut{display:flex;align-items:center;gap:1.6cqw;padding-inline:3cqw;font:700 1.2cqw/1 var(--hand);text-transform:uppercase;letter-spacing:.09em;color:#6B4A36}
.cut::before,.cut::after{content:"";flex:1;border-top:.3cqw dashed #6B4A36}
@media print{
  @page{size:letter;margin:0}
  html:has(.bulletin-page),.bulletin-page{background:#FFFFFF}
  .bulletin-page .top,.bulletin-page .foot,.bulletin-page .bul-head,.bulletin-page .skip{display:none}
  .bulletin-page .sheet-wrap{padding:0;max-width:none}
  .bulletin-page .sheet{width:8.5in;height:11in;aspect-ratio:auto;border-radius:0;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}
}
.top-mark + .theme{margin-left:auto}
.ins-free,.ins-store{text-wrap:balance}

/* the real clip, under the diagram: poster only until someone asks for it */
.clip{margin-top:clamp(24px,3vw,40px)}
.clip h3{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.01em;color:var(--tv-ink)}
.clip video{width:100%;height:auto;aspect-ratio:16/9;display:block;border-radius:14px;background:#000}

/* press kit: the clip's download row, and screenshots, which are unreadable in a 300px column */
.clip-dl{margin-top:14px;font-weight:700;display:flex;flex-wrap:wrap;align-items:center;column-gap:8px}
.shots{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}