/* vibecoder.dad | store.css  v1  (Nov 3 2026)
   The one stylesheet for the store: index.html, part.html, and later /buy/ and /help/.
   Values come from the "vibecoder.dad" design system (claude.ai): the 90s software shelf.
   Four brand colors, flat, hard edges, one hard shadow. Light only. ASCII only. */

:root{
  --navy:#141a33; --navy-raised:#222b57;
  --cream:#f6efe0; --paper:#fffaf0; --beige:#e6dcc6;
  --yellow:#f2b705; --red:#d93a2b; --red-text:#b3261b;
  --mute:#5a5f78; --mute-on-navy:#b9b6c9; --hairline:#cdbfa3;
  --ink:var(--navy);
  --display:'Fugaz One','Arial Black',sans-serif;
  --body:'Atkinson Hyperlegible Next','Atkinson Hyperlegible',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --r-stripe:6px; --r-sm:8px; --r-md:14px;
  --shadow:0 3px 0 var(--navy);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px;
  --wrap:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cream);color-scheme:light;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:17px;line-height:26px;color:var(--ink);background:var(--cream);min-height:100vh;display:flex;flex-direction:column}
html.big body{font-size:19px;line-height:28px}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s4)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- type ---- */
.display{font-family:var(--display);font-weight:400;text-transform:uppercase}
.ready{font-family:var(--mono);font-weight:600;font-size:15px;line-height:22px;letter-spacing:.02em;text-transform:uppercase;color:var(--mute)}
.ready::after{content:'\2588';margin-left:2px;animation:blink 1s steps(1) infinite}
html.still .ready::after{animation:none}
@keyframes blink{50%{opacity:0}}
.tag{font-family:var(--mono);font-weight:600;font-size:13px;line-height:16px;letter-spacing:.06em;text-transform:uppercase}

/* ---- buttons: words in the display face, navy border or yellow fill ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 20px;border:2px solid var(--navy);border-radius:var(--r-sm);background:var(--paper);color:var(--navy);font-family:var(--display);font-size:18px;line-height:1;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.btn--main{background:var(--yellow);box-shadow:var(--shadow)}
.btn--main:active{transform:translateY(3px);box-shadow:none}
.btn--ghost{background:transparent}
.btn:focus-visible,.chip:focus-visible,input:focus-visible,.band:focus-visible,.try:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* ---- the soon strip ---- */
.soon{background:var(--beige);border-bottom:2px solid var(--navy)}
.soon .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 16px;font-size:15px;line-height:22px}
.soon__stamp{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;background:var(--navy);color:var(--cream);padding:4px 10px;border-radius:4px}
.soon a{font-weight:700}

/* ---- top bar ---- */
.top{padding:14px 0}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.top__logo{display:block;width:min(200px,46vw)}
.top__logo img{width:100%;height:auto}
.top__nav{display:flex;gap:18px;font-weight:700;font-size:16px}
.top__nav a{text-decoration:none;padding:6px 0;border-bottom:3px solid transparent}
.top__nav a:hover,.top__nav a:focus-visible{border-bottom-color:var(--yellow)}

/* ---- hero ---- */
.hero{padding:var(--s8) 0 var(--s12)}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:var(--s8);align-items:center}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,10vw,76px);line-height:.95;text-transform:uppercase;letter-spacing:.005em}
.hero h1 .dot{color:var(--red)}
.hero__line{font-size:19px;line-height:28px;max-width:34ch;margin-top:var(--s4)}
html.big .hero__line{font-size:21px;line-height:30px}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s6)}
.hero__art{width:100%;max-width:520px;margin:0 auto}
.hero__art svg{width:100%;height:auto}
.hero__art text{font-family:var(--display)}
@media (min-width:820px){
  .hero .wrap{grid-template-columns:1.05fr .95fr}
  .hero__art{margin:0 0 0 auto}
}

/* ---- shelf bar: find + shelf chips + the stock line ---- */
.shelfbar{padding:0 0 var(--s6)}
.find{position:relative;max-width:520px}
.find svg{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:none;stroke:var(--navy);stroke-width:2.5;stroke-linecap:round}
.find input{width:100%;min-height:48px;padding:8px 14px 8px 44px;border:2px solid var(--navy);border-radius:var(--r-sm);background:var(--paper);font:inherit;color:var(--navy)}
.find input::placeholder{color:var(--mute);opacity:1}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s3)}
.chip{min-height:40px;padding:4px 14px;border:2px solid var(--navy);border-radius:999px;background:transparent;color:var(--navy);font-family:var(--display);font-size:16px;line-height:1;text-transform:uppercase}
.chip.on{background:var(--navy);color:var(--cream)}
.stock{margin-top:var(--s3)}

/* ---- shelves (bins): beige case plastic holding navy labels ---- */
.shelf{background:var(--beige);border-radius:var(--r-md);padding:var(--s4);margin:0 0 var(--s8)}
@media (min-width:640px){.shelf{padding:var(--s6)}}
.shelf__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:var(--s4)}
.shelf__name{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.05;text-transform:uppercase}
.shelf__count{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.06em;color:var(--mute)}
.shelf--top .shelf__name{background:var(--navy);color:var(--cream);padding:6px 12px;border-radius:var(--r-sm)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s4)}
@media (min-width:640px){.grid{gap:var(--s6)}}
.empty{padding:var(--s12) var(--s4);text-align:center}
.empty .big{font-family:var(--display);font-size:clamp(26px,6vw,40px);text-transform:uppercase;line-height:1.05}
.notice{font-size:15px;line-height:22px;color:var(--mute);padding:8px 0}

/* ---- the label card: a navy plate like a cartridge or floppy label ---- */
.label{position:relative;display:flex;flex-direction:column;background:var(--navy);color:var(--cream);border-radius:var(--r-md);padding:10px 10px 12px;min-width:0}
.label__screen{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--r-sm);overflow:hidden;background:var(--navy-raised);border:3px solid var(--cream);text-decoration:none;color:inherit}
.label__screen img{width:100%;height:100%;object-fit:cover}
.label__blank{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:48px;color:var(--cream);letter-spacing:.02em}
.stamp{position:absolute;left:8px;top:8px;background:var(--cream);color:var(--navy);font-family:var(--mono);font-weight:600;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:4px;transform:rotate(-3deg)}
.stamp--new{background:var(--yellow)}
.label__name{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.05;text-transform:uppercase;margin:12px 0 4px;overflow-wrap:anywhere}
.label__name a{text-decoration:none}
.label__name a:hover,.label__name a:focus-visible{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--yellow)}
.label__where{font-family:var(--mono);font-size:13px;color:var(--mute-on-navy);margin-bottom:4px}
.label__blurb{font-size:15px;line-height:22px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:22px}
html.big .label__blurb{font-size:17px;line-height:24px}
.label__facts{list-style:none;display:flex;flex-wrap:wrap;gap:4px 10px;margin:10px 0 0;font-family:var(--mono);font-weight:600;font-size:13px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-on-navy)}
.label__facts li+li::before{content:'\00b7';margin-right:10px}
.label__acts{display:flex;gap:8px;margin-top:auto;padding-top:12px}
.band,.try{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:6px 14px;border-radius:var(--r-sm);font-family:var(--display);font-size:17px;line-height:1;text-transform:uppercase;text-decoration:none;white-space:nowrap;flex:1}
.band{background:var(--yellow);color:var(--navy);border:2px solid var(--yellow)}
.band:active{transform:translateY(2px)}
.band--off{background:var(--navy-raised);color:var(--mute-on-navy);border-color:var(--navy-raised)}
.try{background:transparent;color:var(--cream);border:2px solid var(--cream);flex:0 1 auto}

/* ---- the Shop Card label ---- */
.label--pass .label__screen{display:flex;align-items:center;justify-content:center;background:var(--navy);border-color:var(--navy)}
.label--pass .label__screen img{width:72%;height:auto;object-fit:contain}

/* ---- footer: case plastic ---- */
footer{margin-top:auto;background:var(--beige);border-top:3px solid var(--navy);padding:var(--s8) 0}
footer .wrap{display:grid;gap:var(--s6)}
@media (min-width:720px){footer .wrap{grid-template-columns:1.2fr 1fr}}
footer .mark{width:180px;height:auto}
footer .prov{font-size:15px;line-height:22px;max-width:52ch;margin-top:12px}
footer .seller{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--mute);margin-top:12px}
footer .links{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:16px}
footer .links a{text-decoration:none;border-bottom:2px solid var(--hairline);width:max-content;max-width:100%}
footer .links a:hover{border-bottom-color:var(--yellow)}

/* ---- gear + sheet (the Rattle standard: same gear on every page) ---- */
.gear{position:fixed;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;background:var(--navy);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;z-index:40}
.gear svg{width:26px;height:26px;fill:var(--cream)}
.sheet{position:fixed;inset:0;background:rgba(20,26,51,.55);display:none;align-items:flex-end;justify-content:center;z-index:50;padding:0}
.sheet.on{display:flex}
.sheet__box{width:100%;max-width:520px;background:var(--paper);border:3px solid var(--navy);border-bottom:0;border-radius:var(--r-md) var(--r-md) 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto}
@media (min-width:640px){.sheet{align-items:center;padding:16px}.sheet__box{border-bottom:3px solid var(--navy);border-radius:var(--r-md)}}
.sheet__box h2{font-family:var(--display);font-weight:400;font-size:26px;text-transform:uppercase;margin-bottom:10px}
.sheet__box h3{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:18px 0 6px}
.sheet__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:2px solid var(--beige);font-weight:700}
.tog{min-width:76px;min-height:38px;border-radius:999px;border:2px solid var(--navy);background:transparent;font-family:var(--mono);font-weight:600;font-size:14px;text-transform:uppercase}
.tog.on{background:var(--navy);color:var(--cream)}
.sheet__box ul{list-style:none;font-size:15px;line-height:22px}
.sheet__box li{padding:6px 0;border-bottom:2px solid var(--beige);display:flex;justify-content:space-between;gap:12px}
.sheet__box li span:last-child{color:var(--mute);text-align:right}
.sheet__close{margin-top:16px;width:100%}
.veil{position:fixed;inset:0;background:var(--cream);z-index:60;display:flex;align-items:center;justify-content:center}

/* ---- product page ---- */
.part{padding:var(--s4) 0 var(--s12)}
.crumb{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:var(--s4)}
.crumb a{color:var(--navy)}
.plate{background:var(--navy);color:var(--cream);border-radius:var(--r-md);padding:var(--s4);display:grid;gap:var(--s4)}
@media (min-width:760px){.plate{grid-template-columns:1fr 1fr;padding:var(--s6);gap:var(--s6);align-items:start}}
.plate .label__screen{aspect-ratio:16/10}
.plate h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,7vw,44px);line-height:1;text-transform:uppercase}
.plate .lead{margin-top:10px;font-size:17px;line-height:26px}
.plate .label__facts{margin-top:14px}
.plate .label__acts{padding-top:18px;flex-wrap:wrap}
.plate .band,.plate .try{flex:0 1 auto;min-height:52px;padding:8px 22px;font-size:20px}
.panel{background:var(--paper);border:2px solid var(--navy);border-radius:var(--r-md);padding:var(--s4);margin-top:var(--s6)}
.panel h2{font-family:var(--display);font-weight:400;font-size:24px;text-transform:uppercase;margin-bottom:8px}
.panel ul{list-style:none}
.panel li{padding:8px 0;border-bottom:2px solid var(--beige);display:flex;gap:10px;align-items:flex-start}
.panel li:last-child{border-bottom:0}
.panel li::before{content:'';flex:0 0 12px;height:12px;margin-top:7px;border-radius:3px;background:var(--yellow);border:2px solid var(--navy)}
.panel .facts li::before{display:none}
.panel .facts li{justify-content:space-between}
.panel .facts li span:last-child{color:var(--mute)}
.panel--pass{background:var(--beige)}
.back{margin-top:var(--s6)}

/* ---- motion off ---- */
html.still *{transition:none!important;animation:none!important}

/* ---- print: the shelf itself does not need paper; the tools do ---- */
@media print{
  .gear,.sheet,.soon,.hero__acts,.shelfbar,.label__acts,.btn{display:none!important}
  body,html{background:#fff}
  .label{break-inside:avoid;border:2px solid #000;color:#000;background:#fff}
}

/* ---- v2: the front door is one featured part, a promise, and six shelf tiles ---- */
.feature{padding:var(--s6) 0 var(--s8)}
.feature .wrap{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:center}
@media (min-width:820px){.feature .wrap{grid-template-columns:1.1fr .9fr;gap:var(--s8)}}
.feature__shot{aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;background:var(--navy-raised);border:4px solid var(--navy);box-shadow:var(--shadow)}
.feature__shot img{width:100%;height:100%;object-fit:cover}
.feature__shot .label__blank{font-size:72px}
.feature__kicker{display:inline-block;background:var(--navy);color:var(--cream);font-family:var(--mono);font-weight:600;font-size:13px;line-height:16px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:4px;margin-bottom:var(--s4)}
.feature h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,8vw,64px);line-height:.95;text-transform:uppercase}
.feature .lead{font-size:19px;line-height:28px;margin-top:var(--s3);max-width:36ch}
html.big .feature .lead{font-size:21px;line-height:30px}
.feature .label__facts{color:var(--mute);margin-top:var(--s3)}
.feature__acts{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:var(--s6)}
.feature__more{font-weight:700;text-decoration:none;border-bottom:3px solid var(--yellow)}
.feature__more:hover{border-bottom-color:var(--navy)}

.promise{background:var(--beige);border-top:3px solid var(--navy);border-bottom:3px solid var(--navy);padding:var(--s8) 0}
.promise .wrap{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:center}
@media (min-width:820px){.promise .wrap{grid-template-columns:1.2fr .8fr}}
.promise h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,7vw,52px);line-height:.95;text-transform:uppercase}
.promise h2 .dot{color:var(--red)}
.promise p{margin-top:var(--s3);max-width:40ch}
.promise .btn{margin-top:var(--s4)}
.promise__art{width:100%;max-width:360px;margin:0 auto}
.promise__art svg{width:100%;height:auto}
.promise__art text{font-family:var(--display)}

.shelves-home{padding:var(--s8) 0 var(--s12)}
.shelves-home__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6)}
.shelves-home h2{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;text-transform:uppercase}
.findform{display:flex;gap:8px;flex:1 1 280px;max-width:440px}
.findform .find{flex:1}
.tiles{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media (min-width:600px){.tiles{grid-template-columns:repeat(2,1fr);gap:var(--s6)}}
@media (min-width:960px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{display:block;background:var(--navy);color:var(--cream);border-radius:var(--r-md);padding:var(--s4);text-decoration:none;min-height:100%}
.tile:hover .tile__name,.tile:focus-visible .tile__name{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--yellow)}
.tile__top{display:flex;align-items:center;gap:14px}
.tile__icon{flex:0 0 64px;width:64px;height:64px;border-radius:22%;background:var(--navy-raised);display:flex;align-items:center;justify-content:center}
.tile__icon svg{width:44px;height:44px}
.tile__name{font-family:var(--display);font-weight:400;font-size:28px;line-height:1;text-transform:uppercase;display:block}
.tile__count{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-on-navy);display:block;margin-top:6px}
.tile__line{font-size:15px;line-height:22px;margin-top:12px}
.tile__few{list-style:none;margin-top:12px;padding-top:12px;border-top:2px solid var(--navy-raised);font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute-on-navy);display:flex;flex-direction:column;gap:6px}
.tile__few li::before{content:'> ';color:var(--yellow)}
.tile__few li.more{color:var(--cream)}

/* ---- shelf page ---- */
.shelfpage{padding:var(--s4) 0 var(--s12)}
.shelfpage__head{margin-bottom:var(--s6)}
.shelfpage h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,7vw,52px);line-height:.95;text-transform:uppercase}
.shelfpage .line{margin-top:8px;color:var(--mute)}
footer .made{margin-top:12px;font-weight:700}
.promise__pass{margin-top:var(--s4);font-size:15px;line-height:22px;max-width:40ch}
.promise__pass a{font-weight:700}

/* ---- v3: the notebook. The homeschool door and the Learn shelf's pages.
   Same bones as the store (bar, gear, footer, labels, the yellow band), different paper:
   cream grid paper, paper sheets held down with tape, display type in mixed case, one mascot. ---- */
body.notebook{background-color:var(--cream);background-image:linear-gradient(rgba(205,191,163,.38) 1px,transparent 1px),linear-gradient(90deg,rgba(205,191,163,.38) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}
.notebook .top__nav a:hover,.notebook .top__nav a:focus-visible{border-bottom-color:var(--red)}
.notebook h1,.notebook h2,.notebook .label__name,.notebook .shelf__name,.notebook .band,.notebook .try,.notebook .btn,.notebook .chip{text-transform:none}
.notebook .feature__kicker,.notebook .soon__stamp{background:var(--red);color:var(--cream)}

/* a sheet of paper with a strip of tape at the top */
.sheet-card{position:relative;background:var(--paper);color:var(--navy);border:2px solid var(--navy);border-radius:var(--r-sm);padding:14px 12px 12px;margin-top:12px}
.sheet-card .label__screen{border-color:var(--navy);background:var(--beige)}
.sheet-card .label__facts,.sheet-card .label__where{color:var(--mute)}
.sheet-card .try{color:var(--navy);border-color:var(--navy)}
.sheet-card .band--off{background:var(--beige);color:var(--mute);border-color:var(--beige)}
.tape{position:absolute;left:50%;top:-11px;width:92px;height:22px;margin-left:-46px;background:rgba(242,183,5,.72);transform:rotate(-2deg);border-radius:2px;pointer-events:none}
.tape--red{background:rgba(217,58,43,.6)}
.sheets{display:grid;grid-template-columns:1fr;gap:var(--s6) var(--s4)}
@media (min-width:600px){.sheets{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.sheets{grid-template-columns:repeat(3,1fr)}}
.sheets .sheet-card:nth-child(odd){transform:rotate(-.5deg)}
.sheets .sheet-card:nth-child(even){transform:rotate(.5deg)}
.sheets .sheet-card:nth-child(even) .tape{transform:rotate(3deg)}
.sheets .sheet-card:nth-child(3n) .tape{background:rgba(217,58,43,.55)}
.sheet-card .label__blank{color:var(--navy);background:var(--beige)}

/* the featured lesson: a big sheet, the mascot beside it */
.notebook .feature{padding:var(--s6) 0 var(--s8)}
.notebook .feature__shot{border-color:var(--navy);background:var(--beige);box-shadow:none;position:relative;overflow:visible}
.notebook .feature__shot img,.notebook .feature__shot .label__blank{border-radius:calc(var(--r-md) - 5px)}
.notebook .feature__shot .tape{top:-13px;width:120px;margin-left:-60px}
.notebook .feature h1{text-transform:none}
.mascot{width:min(180px,40vw);margin:0 auto}
.mascot svg{width:100%;height:auto}
.notebook .promise{background:var(--paper);border-top:2px solid var(--navy);border-bottom:2px solid var(--navy)}
.notebook .promise .wrap{grid-template-columns:1fr;align-items:center}
@media (min-width:820px){.notebook .promise .wrap{grid-template-columns:1fr auto;gap:var(--s8)}}
.notebook .promise h2{text-transform:none}
.notebook .shelf{background:transparent;padding:0}
.notebook .shelves-home h2,.notebook .shelfpage h1{text-transform:none}

/* the Learn tile on the front door is the one paper tile: a sheet with tape */
.tile--paper{background:var(--paper);color:var(--navy);border:2px solid var(--navy);position:relative;transform:rotate(-.6deg)}
.tile--paper .tile__count,.tile--paper .tile__few{color:var(--mute)}
.tile--paper .tile__few{border-top-color:var(--beige)}
.tile--paper .tile__few li.more{color:var(--navy)}
.tile--paper .tile__few li::before{color:var(--red)}
.tile--paper:hover .tile__name,.tile--paper:focus-visible .tile__name{text-decoration-color:var(--red)}

/* Learn product pages: the plate becomes a sheet */
.notebook .plate{background:var(--paper);color:var(--navy);border:2px solid var(--navy);position:relative;margin-top:12px}
.notebook .plate .label__screen{border-color:var(--navy);background:var(--beige)}
.notebook .plate .label__facts{color:var(--mute)}
.notebook .plate .try{color:var(--navy);border-color:var(--navy)}
.notebook .plate h1{text-transform:none}
.notebook .panel h2,.notebook .crumb{text-transform:none}
.notebook .panel li::before{background:var(--red);border-color:var(--red)}

/* ---- v4: the mascot on empty and not-found states ---- */
.mascot-sm{width:150px;margin:0 auto 12px}
.mascot-sm img{width:100%;height:auto}
.plate .mascot-sm{margin:0}

/* ---- v5 (Nov 6 2026, the refit): the front door ----
   One bold thing: the six shelves are 3.5-inch floppy disks (Floppy's own world).
   Everything around them stays quiet. Classes start fd- so the other pages are untouched.
   Also here: the standard gear extras, the in-page dialog, the toast, and the paper path. */
.fd-hero{padding:var(--s6) 0 var(--s8)}
.fd-hero .wrap{display:grid;grid-template-columns:1fr auto;gap:var(--s4) var(--s6);align-items:start}
.fd-hero h1{grid-column:1/2;font-family:var(--display);font-weight:400;font-size:clamp(36px,9vw,68px);line-height:.98;text-transform:uppercase;letter-spacing:.005em;max-width:13ch}
.fd-hero__floppy{grid-column:2/3;grid-row:1/3;width:clamp(96px,26vw,230px)}
.fd-hero__floppy img{width:100%;height:auto}
.fd-hero__lead{grid-column:1/3;font-size:19px;line-height:28px;max-width:38ch}
html.big .fd-hero__lead{font-size:21px;line-height:30px}
.fd-promises{grid-column:1/3;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;max-width:560px;font-weight:700;font-size:16px;line-height:22px}
.fd-promises li{display:flex;gap:10px;align-items:flex-start}
.fd-promises li::before{content:'';flex:0 0 18px;height:18px;margin-top:2px;border-radius:3px;background:var(--yellow);border:2px solid var(--navy);box-shadow:inset 0 0 0 3px var(--yellow),inset 0 0 0 9px var(--navy)}
.fd-hero__acts{grid-column:1/3;display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s2)}
@media (min-width:820px){
  .fd-hero{padding:var(--s8) 0 var(--s12)}
  .fd-hero .wrap{grid-template-columns:1fr 260px;column-gap:var(--s12)}
  .fd-hero__lead,.fd-promises,.fd-hero__acts{grid-column:1/2}
  .fd-hero__floppy{grid-row:1/5;align-self:center;width:100%}
}

/* the disks */
.fd-disks{padding:var(--s8) 0 var(--s12);background:var(--beige);border-top:3px solid var(--navy);border-bottom:3px solid var(--navy)}
.fd-disks__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6)}
.fd-disks h2,.fd-top h2,.fd-band h2{text-transform:uppercase}
.fd-disks h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,6vw,40px);line-height:1}
.fd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
@media (min-width:720px){.fd-grid{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}
.disk{position:relative;display:block;aspect-ratio:1/1.04;background:var(--navy);color:var(--navy);text-decoration:none;border-radius:6px;
  clip-path:polygon(0 0,91% 0,100% 8.6%,100% 100%,0 100%);transition:transform .15s ease}
.disk:hover,.disk:focus-visible{transform:translateY(-4px)}
.disk:active{transform:translateY(0)}
.disk:focus-visible{outline:none;box-shadow:inset 0 0 0 4px var(--yellow)}
.disk__shutter{position:absolute;left:24%;top:0;width:54%;height:31%;background:linear-gradient(180deg,#d9dbe3,#b9bccb);border-radius:0 0 4px 4px;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 8px 6px}
.disk__shutter::before{content:'';position:absolute;left:58%;top:12%;width:18%;height:66%;background:var(--navy);border-radius:2px}
.disk__count{position:relative;font-family:var(--mono);font-weight:600;font-size:12px;line-height:14px;color:var(--navy);background:rgba(255,255,255,.55);padding:1px 5px;border-radius:3px;margin-right:auto}
.disk__label{position:absolute;left:8%;right:8%;bottom:7%;top:38%;background:var(--paper);border-radius:4px;padding:10px 10px 8px;display:flex;flex-direction:column;overflow:hidden}
.disk__label::before{content:'';position:absolute;left:0;right:0;top:0;height:7px;background:var(--stripe,var(--yellow))}
.disk__name{font-family:var(--display);font-weight:400;font-size:clamp(17px,4.6vw,26px);line-height:1.02;margin-top:4px;overflow-wrap:anywhere}
.disk__line{display:block;font-size:13px;line-height:17px;margin-top:6px;color:var(--mute)}
.disk__few{display:none;list-style:none;margin-top:auto;font-size:14px;line-height:19px;font-weight:700}
.disk__few li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disk__wp{position:absolute;bottom:2.4%;width:5%;aspect-ratio:1;background:var(--beige)}
.disk__wp--l{left:2.2%}.disk__wp--r{right:2.2%}
.disk--paper .disk__label{background-color:var(--paper);background-image:linear-gradient(rgba(205,191,163,.55) 1px,transparent 1px);background-size:100% 20px;background-position:0 8px}
@media (min-width:720px){
  .disk__line{font-size:15px;line-height:20px}
  .disk__few{display:block}
  .disk__label{padding:14px 14px 10px}
}
@media (min-width:960px){.disk__count{font-size:13px}}
/* eight disks: four across on a wide screen (v4.1) */
@media (min-width:960px){
  .fd-grid{grid-template-columns:repeat(4,1fr);gap:var(--s4)}
  .disk__label{padding:12px 12px 8px}
  .disk__name{font-size:21px}
  .disk__line{font-size:13.5px;line-height:17px}
  .disk__few{font-size:13.5px;line-height:18px}
  .disk__few li:nth-child(n+3){display:none}
}

/* the top shelf, quieter than before */
.fd-top{padding:var(--s8) 0}
.fd-top h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,5.6vw,36px);line-height:1;margin-bottom:var(--s4)}
.fd-top .wrap > .fd-top__body{display:grid;grid-template-columns:1fr;gap:var(--s4);align-items:center}
@media (min-width:760px){.fd-top .wrap > .fd-top__body{grid-template-columns:1fr 1fr;gap:var(--s8)}}
.fd-top h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,6vw,44px);line-height:1;text-transform:uppercase}
.fd-top .lead{margin-top:var(--s3);max-width:40ch}
.fd-top .label__facts{color:var(--mute);margin-top:var(--s3)}

/* paper and paying: two plain bands */
.fd-band{padding:var(--s8) 0;border-top:3px solid var(--navy)}
.fd-band .wrap{display:grid;grid-template-columns:auto 1fr;gap:var(--s4) var(--s6);align-items:center}
.fd-band__pic{width:clamp(76px,20vw,130px)}
.fd-band__pic img{width:100%;height:auto}
.fd-band h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,5.4vw,36px);line-height:1}
.fd-band p{margin-top:8px;max-width:46ch}
.fd-band .btn{margin-top:var(--s4)}
.fd-band--pay{background:var(--paper)}
.fd-band--pay .wrap{grid-template-columns:1fr}
.fd-band__acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.fd-band__acts a:not(.btn){font-weight:700}

/* gear extras: small hint text, folds, the how-to list */
.sheet__row small{display:block;font-weight:400;font-size:14px;line-height:18px;color:var(--mute)}
.fold{border-bottom:2px solid var(--beige);padding:10px 0}
.fold summary{cursor:pointer;font-weight:700;min-height:32px;display:flex;align-items:center}
.fold ul{margin-top:6px}
.fold__acts{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.fold__acts a{font-weight:700}
.fold__acts .btn{min-height:40px;font-size:15px;padding:6px 14px}
.how{padding-left:22px;font-size:15px;line-height:22px}
.sheet__box .how li{display:list-item;border-bottom:0;padding:4px 0}
.sheet__box .how li b{font-weight:700}

/* in-page dialog and the toast */
.dlg{position:fixed;inset:0;z-index:70;background:rgba(20,26,51,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.dlg__box{background:var(--paper);border:3px solid var(--navy);border-radius:var(--r-md);padding:20px;max-width:420px;width:100%}
.dlg__acts{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.toast{position:fixed;left:16px;right:84px;bottom:20px;z-index:65;background:var(--navy);color:var(--cream);padding:12px 14px;border-radius:var(--r-sm);font-size:15px;line-height:21px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s;max-width:520px}
.toast.on{opacity:1;transform:none}

/* the paper path: only what is being printed shows */
.print-only{display:none}
@media print{
  html.printing,html.printing body{background:#fff!important}
  html.printing body > *:not(.print-only){display:none!important}
  html.printing .print-only{display:block!important;color:#000;font-family:var(--body)}
  html.printing body{display:block;min-height:0}
  @page{margin:12mm}
  .print-only h1{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1;text-transform:uppercase;margin-bottom:4px}
  .print-only .print-sub{font-size:12px;margin-bottom:10px}
  .paper-shelf{margin-bottom:8px}
  .paper-shelf h2{font-family:var(--display);font-weight:400;font-size:15px;border-bottom:2px solid #000;margin-bottom:3px;break-after:avoid}
  .paper-cols{column-count:3;column-gap:7mm}
  .paper-row{display:grid;grid-template-columns:12px 1fr;gap:5px;padding:2px 0;break-inside:avoid;font-size:9.5px;line-height:12px}
  .paper-row .box{width:10px;height:10px;border:1.5px solid #000;margin-top:1px}
  .paper-row b{font-size:10.5px}
  .paper-row .url{font-family:var(--mono);font-size:8.5px}
  .print-how ol{font-size:15px;line-height:22px;padding-left:22px}
  .print-how li{padding:6px 0}
  .print-foot{display:flex!important;justify-content:space-between;align-items:baseline;border-top:3px solid #000;padding-top:6px;margin-top:12px;break-inside:avoid}
  .print-foot span:first-child{font-family:var(--display);font-size:26px;letter-spacing:.02em}
  .print-foot span:last-child{font-family:var(--mono);font-size:11px}
}