/* crAppstore - ONE stylesheet for the whole site. Change here, changes everywhere. */
/* ============================================================================
   crAppstore — STOCK LIST  (rev 2)
   Anchor: a dot-matrix inventory printout pinned up in a small computer shop.
   One voice: Space Mono, everywhere. Hierarchy comes from size, case, and ink
   blocks — never from swapping in another family.
   TIER 1 primitives -> TIER 2 semantic -> TIER 3 component.
   ========================================================================== */

/* ---------------- TIER 1 — PRIMITIVES ---------------- */
:root{
  --ink-350:#6d6d6d; --ink-400:#585858; --ink-600:#404040; --ink-900:#000000;
  --stock-50:#ffffff; --stock-100:#f2f2f2; --stock-200:#e4e4e4; --stock-300:#c0c0c0;
  --verm-300:#4a7ebb; --verm-500:#000080; --verm-600:#00004b;
  --k-04:rgba(0,0,0,.04); --k-16:rgba(0,0,0,.16); --k-55:rgba(0,0,0,.55);
  --p-06:rgba(255,255,255,.06); --p-14:rgba(255,255,255,.14);

  /* ONE family. The tagline face, carried through everything. */
  --f:"Space Mono","Courier New",ui-monospace,monospace;

  --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-15:15px;
  --fs-17:17px; --fs-20:20px; --fs-26:26px; --fs-38:38px; --fs-56:56px;
  --fw-400:400; --fw-700:700;
  --lh-tight:1.06; --lh-snug:1.3; --lh-base:1.55;
  --ls-tight:-.02em; --ls-caps:.14em; --ls-wide:.06em;

  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-20:20px; --s-24:24px;
  --s-32:32px; --s-40:40px; --s-96:96px;
  --ctl-sm:30px; --ctl-md:38px; --ctl-lg:46px; --tap-min:44px;
  --sheet-w:1120px; --gutter:20px;

  --r-punch:999px;                    /* the only curve in this world */
  --e1:2px 2px 0 var(--ink-900); --e2:4px 4px 0 var(--ink-900);
  --rule-hair:1px; --rule:2px; --rule-heavy:3px;
  --d-1:1ms; --d-60:60ms; --ease-step:steps(2,end);
}

/* ---------------- TIER 2 — SEMANTIC ---------------- */
:root{
  --bg:var(--stock-200); --paper:var(--stock-100); --paper-alt:var(--stock-50);
  --paper-band:var(--stock-300);
  --ink:var(--ink-900); --ink-body:var(--ink-600); --ink-label:var(--ink-350);
  --ink-quiet:var(--ink-400);
  --on-ink:var(--stock-50); --on-ink-2:var(--stock-300); --on-ink-accent:var(--verm-300);
  --accent:var(--verm-500); --accent-text:var(--verm-600); --accent-on:var(--stock-50);
  --rule-color:var(--ink-900); --rule-soft:var(--ink-400);
  --scrim:var(--k-55);
  --grain:repeating-linear-gradient(0deg,var(--k-04) 0 1px,transparent 1px 4px);
  --halftone:radial-gradient(circle at center,var(--k-16) 1.1px,transparent 1.6px);
  --halftone-size:7px 7px;
  --perf:radial-gradient(circle at center,var(--rule-soft) 1.3px,transparent 1.6px);
  --perf-size:7px 3px;
  --focus-a:var(--stock-100); --focus-b:var(--verm-600);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1e1e1e; --paper:#2a2a2a; --paper-alt:#333333; --paper-band:#3a3a3a;
    --ink:var(--stock-100); --ink-body:#d0d0d0; --ink-label:#b8b8b8; --ink-quiet:#8a8a8a;
    --on-ink:#1e1e1e; --on-ink-2:#404040; --on-ink-accent:var(--verm-600);
    --accent:var(--verm-300); --accent-text:var(--verm-300); --accent-on:#1e1e1e;
    --rule-color:var(--stock-300); --rule-soft:#6d6d6d;
    --scrim:rgba(0,0,0,.68);
    --e1:2px 2px 0 var(--stock-300); --e2:4px 4px 0 var(--stock-300);
    --grain:repeating-linear-gradient(0deg,var(--p-06) 0 1px,transparent 1px 4px);
    --halftone:radial-gradient(circle at center,var(--p-14) 1.1px,transparent 1.6px);
    --focus-a:#1e1e1e; --focus-b:var(--verm-300);
  }
}
:root{ --focus-ring:0 0 0 3px var(--focus-a),0 0 0 6px var(--focus-b); }

/* ---------------- TIER 3 — COMPONENT ---------------- */
:root{
  --row-pad-y:var(--s-16); --row-pad-x:var(--s-16);
  --row-no-w:44px; --row-icon-w:56px; --row-box-w:120px; --row-tag-w:150px;
  --row-face:var(--paper); --row-face-alt:var(--paper-alt);
  --box-edge:var(--rule) solid var(--ink);
  --tag-face:var(--paper-alt); --tag-punch:12px;
  --stamp-h:var(--ctl-sm);
  --modal-w:640px;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --tag-face:#3a3a3a; } }

/* ============================================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f);font-size:var(--fs-13);line-height:var(--lh-base);
  color:var(--ink);background-color:var(--bg);background-image:var(--grain);
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--s-96) + env(safe-area-inset-bottom,0px))}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (forced-colors:active){ :focus-visible{outline:3px solid Highlight;outline-offset:2px} }
.tnum{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s-12);top:-80px;z-index:80;background:var(--accent);
  color:var(--accent-on);padding:var(--s-8) var(--s-16);border:var(--rule) solid var(--ink);
  font-weight:var(--fw-700);font-size:var(--fs-12);letter-spacing:var(--ls-caps);
  text-transform:uppercase}
.skip:focus{top:var(--s-12)}
.sheet{max-width:var(--sheet-w);margin:0 auto;background:var(--paper);
  border-left:var(--rule) solid var(--rule-color);border-right:var(--rule) solid var(--rule-color)}
.wrap{padding:0 var(--gutter)}
@media (max-width:760px){ .sheet{border-left:0;border-right:0} }

/* ---- MASTHEAD ---- */
.mast{border-bottom:var(--rule-heavy) solid var(--rule-color)}
.mast__in{padding:var(--s-12) var(--gutter);display:flex;align-items:center;gap:var(--s-12);
  flex-wrap:wrap}
.mast__plate{display:inline-flex;align-items:center;gap:var(--s-8);background:var(--ink);
  color:var(--on-ink);padding:var(--s-8) var(--s-12);min-height:var(--tap-min)}
.mast__plate svg{width:20px;height:20px}
.mast__name{font-size:var(--fs-17);font-weight:var(--fw-700);letter-spacing:var(--ls-caps);
  text-transform:uppercase;line-height:1}
.mast__name .hi{color:var(--on-ink-accent)}
.mast__line{font-size:var(--fs-12);color:var(--ink-body);margin-left:auto}
.mast__rules{height:6px;background:var(--paper-band);
  border-top:var(--rule-hair) solid var(--rule-color);
  border-bottom:var(--rule-hair) solid var(--rule-color)}

/* ---- STOCK HEAD ---- */
.stockhead{position:relative;padding:var(--s-32) 0 var(--s-24);
  border-bottom:var(--rule-hair) solid var(--rule-soft)}
.stockhead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--halftone);background-size:var(--halftone-size)}
.stockhead__in{position:relative;display:grid;gap:var(--s-24);
  grid-template-columns:minmax(0,1fr) auto;align-items:end}
.stockhead h1{margin:0;max-width:19ch;font-size:clamp(var(--fs-26),5.2vw,var(--fs-56));
  font-weight:var(--fw-700);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);
  text-transform:uppercase}
.stockhead h1 .hi{color:var(--accent-text)}
.stockhead__blurb{margin:var(--s-16) 0 0;max-width:62ch;font-size:var(--fs-15);
  color:var(--ink-body);line-height:var(--lh-snug)}
.talker{position:relative;margin:0;min-width:168px;text-align:center;background:var(--ink);
  color:var(--on-ink);border:var(--rule) solid var(--ink);box-shadow:var(--e2);
  padding:var(--s-24) var(--s-20) var(--s-12)}
.talker::after{content:"";position:absolute;top:8px;left:50%;translate:-50% 0;
  width:var(--tag-punch);height:var(--tag-punch);border-radius:var(--r-punch);
  background:var(--paper);background-image:var(--halftone);background-size:var(--halftone-size);
  box-shadow:inset 0 0 0 1px var(--ink)}
.talker__n{display:block;font-size:var(--fs-56);font-weight:var(--fw-700);line-height:.9;
  letter-spacing:var(--ls-tight);color:var(--on-ink-accent);font-variant-numeric:tabular-nums}
.talker__l{display:block;margin-top:var(--s-8);font-size:var(--fs-10);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--on-ink-2)}
@media (max-width:860px){
  .stockhead__in{grid-template-columns:1fr;align-items:start}
  .talker{justify-self:start}
}

/* ---- THE RACK ---- */
.rackhead{display:grid;
  grid-template-columns:var(--row-no-w) var(--row-icon-w) var(--row-box-w) 1fr var(--row-tag-w);
  gap:var(--s-16);align-items:center;padding:var(--s-8) var(--row-pad-x);
  background:var(--ink);color:var(--on-ink);
  border-top:var(--rule-heavy) solid var(--rule-color);
  border-bottom:var(--rule) solid var(--rule-color);
  font-size:var(--fs-10);letter-spacing:var(--ls-caps);text-transform:uppercase}
.rackhead span:first-child{text-align:right}
.rackhead span:last-child{text-align:center}
@media (max-width:900px){ .rackhead{display:none} }

.rack{list-style:none;margin:0;padding:0;border-bottom:var(--rule-heavy) solid var(--rule-color)}
.rack > li + li{border-top:var(--rule-hair) solid var(--rule-soft)}
:where(.rack > li:nth-child(even)) .row{background:var(--row-face-alt)}

.row{position:relative;display:grid;width:100%;text-align:left;
  grid-template-columns:var(--row-no-w) var(--row-icon-w) var(--row-box-w) 1fr var(--row-tag-w);
  gap:var(--s-16);align-items:center;padding:var(--row-pad-y) var(--row-pad-x);
  background:var(--row-face);color:var(--ink);border:0;cursor:pointer;
  transition:background var(--d-60) var(--ease-step),color var(--d-60) var(--ease-step)}
.row:focus-visible{z-index:2;box-shadow:var(--focus-ring)}
.row:focus-visible,.row:hover{background:var(--ink);color:var(--on-ink)}
.row:focus-visible .row__desc,.row:hover .row__desc{color:var(--on-ink-2)}
.row:focus-visible .row__no,.row:hover .row__no{color:var(--on-ink-accent)}
.row:focus-visible .row__icon,.row:hover .row__icon{color:var(--on-ink-accent);
  border-color:var(--on-ink)}
.row:focus-visible .row__box,.row:hover .row__box{box-shadow:var(--e1)}
.row:focus-visible .tag,.row:hover .tag{background:var(--paper);color:var(--ink)}
.row:focus-visible .tag::before,.row:hover .tag::before{background:var(--ink)}
.row:focus-visible .stamp,.row:hover .stamp{background:var(--accent);color:var(--accent-on)}
@media (hover:none){
  .row:hover{background:var(--row-face);color:var(--ink)}
  :where(.rack > li:nth-child(even)) .row:hover{background:var(--row-face-alt)}
  .row:hover .row__desc{color:var(--ink-body)}
  .row:hover .row__no,.row:hover .row__icon{color:var(--ink-quiet)}
  .row:hover .tag{background:var(--tag-face);color:var(--ink)}
  .stamp,.row:hover .stamp{background:var(--accent);color:var(--accent-on)}
}
.row__no{font-size:var(--fs-20);font-weight:var(--fw-700);line-height:1;text-align:right;
  color:var(--ink-quiet);font-variant-numeric:tabular-nums}
.row__icon{display:grid;place-items:center;width:var(--row-icon-w);height:var(--row-icon-w);
  border:var(--rule) solid var(--rule-soft);color:var(--accent-text);
  background-image:var(--halftone);background-size:var(--halftone-size)}
.row__icon svg{width:28px;height:28px}
.row__box{position:relative;aspect-ratio:4/3;overflow:hidden;border:var(--box-edge);
  box-shadow:var(--e1);background:var(--paper-alt)}
.row__box img{width:100%;height:100%;object-fit:cover;object-position:top center}
.row__box--none{display:grid;place-items:center;background:var(--paper-band);
  background-image:var(--halftone);background-size:var(--halftone-size)}
.row__nophoto{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;text-align:center;
  background:var(--ink);color:var(--on-ink);font-size:var(--fs-10);letter-spacing:var(--ls-wide);
  text-transform:uppercase}
.row__body{min-width:0}
.row__name{display:block;margin:0;font-size:var(--fs-17);font-weight:var(--fw-700);
  line-height:var(--lh-snug);letter-spacing:var(--ls-tight);text-transform:uppercase}
.row__desc{display:block;margin:var(--s-4) 0 0;max-width:54ch;font-size:var(--fs-13);
  line-height:var(--lh-snug);color:var(--ink-body)}
.row__kind{display:inline-block;margin-top:var(--s-8);font-size:var(--fs-10);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-label)}

/* the shop tag — now carrying the price it always should have */
.tag{position:relative;text-align:center;background:var(--tag-face);color:var(--ink);
  border:var(--rule) solid var(--ink);padding:var(--s-24) var(--s-12) var(--s-12);
  transition:background var(--d-60) var(--ease-step),color var(--d-60) var(--ease-step)}
.tag::before{content:"";position:absolute;top:7px;left:50%;translate:-50% 0;
  width:var(--tag-punch);height:var(--tag-punch);border-radius:var(--r-punch);
  background:var(--row-face);box-shadow:inset 0 0 0 1px var(--ink)}
:where(.rack > li:nth-child(even)) .tag::before{background:var(--row-face-alt)}
.tag__price{display:block;font-size:var(--fs-20);font-weight:var(--fw-700);line-height:1.1;
  letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.tag__per{display:block;font-size:var(--fs-10);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--ink-label);padding-bottom:var(--s-8);
  background-image:var(--perf);background-size:var(--perf-size);background-repeat:repeat-x;
  background-position:bottom center}
.stamp{display:grid;place-items:center;margin-top:var(--s-12);min-height:var(--stamp-h);
  padding:0 var(--s-12);background:var(--ink);color:var(--on-ink);
  border:var(--rule) solid var(--ink);font-size:var(--fs-11);font-weight:var(--fw-700);
  letter-spacing:var(--ls-caps);text-transform:uppercase;
  transition:background var(--d-60) var(--ease-step),color var(--d-60) var(--ease-step)}

@media (max-width:900px){
  .row{grid-template-columns:36px 44px 1fr;
    grid-template-areas:"no icon body" "box box box" "tag tag tag";row-gap:var(--s-12);
    align-items:start}
  .row__no{grid-area:no;font-size:var(--fs-17)}
  .row__icon{grid-area:icon;width:44px;height:44px}
  .row__icon svg{width:22px;height:22px}
  .row__box{grid-area:box;max-width:260px}
  .row__body{grid-area:body}
  .row__name{font-size:var(--fs-15)}
  .tag{grid-area:tag;display:flex;align-items:center;gap:var(--s-12);text-align:left;
    padding:var(--s-8) var(--s-12) var(--s-8) var(--s-24)}
  .tag::before{top:50%;left:9px;translate:0 -50%}
  .tag__price{font-size:var(--fs-17)}
  .tag__per{padding-bottom:0;background-image:none;flex:1}
  .stamp{margin-top:0;min-width:120px;min-height:var(--ctl-md)}
}

/* ---- THE SPEC SHEET (modal) ---- */
.scrim{position:fixed;inset:0;z-index:70;background:var(--scrim);display:none;
  padding:var(--s-20);overflow:auto}
.scrim.is-open{display:grid;place-items:start center}
.spec{position:relative;width:100%;max-width:var(--modal-w);margin:min(6vh,60px) 0;
  background:var(--paper);color:var(--ink);border:var(--rule-heavy) solid var(--ink);
  box-shadow:var(--e2)}
.spec__head{display:flex;align-items:flex-start;gap:var(--s-12);padding:var(--s-16);
  background:var(--ink);color:var(--on-ink)}
.spec__icon{flex:none;display:grid;place-items:center;width:52px;height:52px;
  border:var(--rule) solid var(--on-ink);color:var(--on-ink-accent)}
.spec__icon svg{width:28px;height:28px}
.spec__titles{min-width:0;flex:1}
.spec__name{margin:0;font-size:var(--fs-20);font-weight:var(--fw-700);line-height:var(--lh-snug);
  letter-spacing:var(--ls-tight);text-transform:uppercase}
.spec__tagline{margin:var(--s-4) 0 0;font-size:var(--fs-12);color:var(--on-ink-2)}
.spec__close{flex:none;width:var(--ctl-md);height:var(--ctl-md);background:none;
  border:var(--rule) solid var(--on-ink);color:var(--on-ink);cursor:pointer;
  font-size:var(--fs-15);line-height:1}
.spec__close:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
.spec__shot{border-bottom:var(--rule) solid var(--ink);background:var(--paper-band)}
.spec__shot img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center}
.spec__body{padding:var(--s-20) var(--s-16)}
.spec__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:var(--rule-hair);background:var(--rule-soft);border:var(--rule-hair) solid var(--rule-soft);
  margin-bottom:var(--s-20)}
.spec__fact{background:var(--paper);padding:var(--s-8) var(--s-12)}
.spec__fact dt{margin:0;font-size:var(--fs-10);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--ink-label)}
.spec__fact dd{margin:var(--s-4) 0 0;font-size:var(--fs-13);font-weight:var(--fw-700)}
.spec__what{margin:0 0 var(--s-8);font-size:var(--fs-10);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--ink-label)}
.spec__text{margin:0;font-size:var(--fs-15);line-height:var(--lh-base);color:var(--ink-body)}
.spec__foot{display:flex;flex-wrap:wrap;gap:var(--s-12);align-items:center;
  padding:var(--s-16);border-top:var(--rule) solid var(--ink);background:var(--paper-alt)}
.spec__price{font-size:var(--fs-26);font-weight:var(--fw-700);letter-spacing:var(--ls-tight);
  font-variant-numeric:tabular-nums}
.spec__price small{display:block;font-size:var(--fs-10);font-weight:var(--fw-400);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-label)}
.spec__actions{display:flex;gap:var(--s-8);margin-left:auto;flex-wrap:wrap}
.btn{display:inline-grid;place-items:center;min-height:var(--ctl-lg);padding:0 var(--s-20);
  border:var(--rule) solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;
  font-size:var(--fs-12);font-weight:var(--fw-700);letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  transition:background var(--d-60) var(--ease-step),color var(--d-60) var(--ease-step)}
.btn:hover{background:var(--ink);color:var(--on-ink)}
.btn--buy{background:var(--accent);border-color:var(--accent);color:var(--accent-on);
  box-shadow:var(--e1)}
.btn--buy:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.spec__note{width:100%;margin:0;font-size:var(--fs-10);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--ink-label)}
@media (max-width:520px){
  .spec__actions{margin-left:0;width:100%}
  .btn{flex:1}
}

/* ---- COLOPHON + LEGAL FOOTER ---- */
.colophon{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8) var(--s-16);
  padding:var(--s-24) 0 var(--s-12);font-size:var(--fs-12);color:var(--ink-body)}
.colophon .mark{color:var(--accent-text);font-weight:var(--fw-700)}
.colophon .rule{flex:1;min-width:24px;height:0;border-top:var(--rule-hair) solid var(--rule-soft)}
.legal{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-20);align-items:center;
  padding:var(--s-12) 0 var(--s-40);border-top:var(--rule-hair) solid var(--rule-soft);
  font-size:var(--fs-11);letter-spacing:var(--ls-wide);text-transform:uppercase}
.legal a{color:var(--ink-label);border-bottom:1px solid transparent;padding-bottom:2px}
.legal a:hover,.legal a:focus-visible{color:var(--ink);border-bottom-color:var(--accent)}
.legal .copy{color:var(--ink-quiet);margin-left:auto;text-transform:none;letter-spacing:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:var(--d-1) !important;animation:none !important}
}
@media print{
  body{background:#fff;padding-bottom:0}
  .skip,.scrim,#crapSignup{display:none !important}
  .sheet{border:0;max-width:none}
  .row{break-inside:avoid}
  .talker{box-shadow:none}
}

/* ---- IN THE WORKSHOP - on the list, not on the shop yet ---- */
.soonhead{margin:var(--s-32) 0 var(--s-12);font-size:var(--fs-11);font-weight:var(--fw-700);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-label);
  padding-bottom:var(--s-8);border-bottom:var(--rule) solid var(--rule-color)}
.soon{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--rule-hair);
  background:var(--rule-soft);border:var(--rule-hair) solid var(--rule-soft)}
.soon__item{display:flex;align-items:center;gap:var(--s-12);padding:var(--s-12);
  background:var(--paper);color:var(--ink-body)}
.soon__icon{flex:none;display:grid;place-items:center;width:34px;height:34px;
  border:var(--rule-hair) solid var(--rule-soft);color:var(--ink-quiet)}
.soon__icon svg{width:20px;height:20px}
.soon__name{flex:1;min-width:0;font-size:var(--fs-13);font-weight:var(--fw-700);
  letter-spacing:var(--ls-tight);text-transform:uppercase;color:var(--ink)}
.soon__tag{font-size:var(--fs-10);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--ink-label)}

/* ---- FREE BETA ---- */
.betabar{margin:0;padding:var(--s-8) var(--gutter);text-align:center;
  background:var(--accent);color:var(--accent-on);
  font-size:var(--fs-12);letter-spacing:var(--ls-wide);
  border-bottom:var(--rule) solid var(--ink)}
.betabar b{font-weight:var(--fw-700);text-transform:uppercase;letter-spacing:var(--ls-caps)}
.tag__beta{display:block;margin-bottom:var(--s-4);
  background:var(--accent);color:var(--accent-on);
  font-size:var(--fs-10);font-weight:var(--fw-700);letter-spacing:var(--ls-caps);
  text-transform:uppercase;padding:2px 4px}
.tag__price{text-decoration:line-through;opacity:.55}
@media (max-width:900px){ .tag__beta{margin:0 var(--s-8) 0 0} }


/* ---- prose pages (About / legal) — same press, narrower measure ---- */
.prose{padding:var(--s-32) 0 var(--s-40);max-width:70ch}
.prose h1{margin:0 0 var(--s-8);font-size:clamp(var(--fs-26),4.4vw,var(--fs-38));
  font-weight:var(--fw-700);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);
  text-transform:uppercase}
.prose h2{margin:var(--s-32) 0 var(--s-8);font-size:var(--fs-17);font-weight:var(--fw-700);
  letter-spacing:var(--ls-caps);text-transform:uppercase;
  padding-bottom:var(--s-8);border-bottom:var(--rule) solid var(--rule-color)}
.prose h3{margin:var(--s-24) 0 var(--s-4);font-size:var(--fs-13);font-weight:var(--fw-700);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-label)}
.prose p,.prose li{font-size:var(--fs-15);line-height:var(--lh-base);color:var(--ink-body)}
.prose ul,.prose ol{padding-left:var(--s-20);margin:var(--s-12) 0}
.prose li{margin:var(--s-4) 0}
.prose a{color:var(--accent-text);border-bottom:1px solid currentColor}
.prose strong{color:var(--ink);font-weight:var(--fw-700)}
.prose hr{border:0;border-top:var(--rule-hair) solid var(--rule-soft);margin:var(--s-24) 0}
.prose code{background:var(--paper-band);padding:1px 5px;font-size:var(--fs-13)}
.notice{margin:var(--s-16) 0 var(--s-24);padding:var(--s-12) var(--s-16);
  background:var(--paper-alt);border:var(--rule) solid var(--accent);
  border-left-width:6px;font-size:var(--fs-13);color:var(--ink)}
.notice strong{display:block;font-size:var(--fs-11);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--s-4)}
.todo{background:var(--paper-band);border-bottom:2px dotted var(--accent-text);
  padding:0 4px;color:var(--ink);font-weight:var(--fw-700)}
.backlink{display:inline-grid;place-items:center;min-height:var(--ctl-md);padding:0 var(--s-16);
  margin-top:var(--s-32);border:var(--rule) solid var(--ink);background:var(--paper);
  font-size:var(--fs-11);font-weight:var(--fw-700);letter-spacing:var(--ls-caps);
  text-transform:uppercase}
.backlink:hover{background:var(--ink);color:var(--on-ink)}