/*
 * DateCard Shop — design system (research ux-design §2). Mobile first: 375 px base, 16 px gutters, no
 * horizontal scroll; 560 px and 720 px breakpoints. Colours and font stacks come from
 * public/assets/shared/brand.js (themeCSS() output below, verbatim; test/pages.test.js keeps them equal).
 *
 * Classes other modules may use (page-specific ones are in the second half: home, legal, content pages, shirts,
 * order, manage):
 *   layout   .wrap (680 px column) .wrap-wide (1080) .section .section-tight .stack .row .row-center
 *            .grid-2 .grid-3 .center .stage (mockup backdrop) .mt-4 .mt-8 .mt-12 .mt-16 .mt-24 .mt-32
 *   type     .display .display-l .moment .accent-i (Fraunces italic accent) .eyebrow .lede .small .muted
 *            .tag .price .bignum .mono .disclosure (bold caps, never under 12 pt)
 *   buttons  .btn + .btn-primary | .btn-secondary | .btn-quiet | .btn-volt, .btn-block, .btn-sm
 *   chips    .chips > .chip (.chip-volt, .chip-line), .sticker (volt badge, .sticker-tilt)
 *   cards    .card .card-blush .card-ink
 *   forms    .field > label + input|select|textarea + .hint + .err; .field.bad; .check; .seg (radio
 *            segmented control); .switch (checkbox toggle); .count
 *   notices  .notice + .notice-info | -success | -warn | -danger, .notice-title
 *   steps    ol.steps > li(.done | .current) > .step-label + .step-sub
 *   other    .toast (+ .show) .skip .vh .icon .qa (details/summary FAQ) .table-wrap (+ .table-prose, .table-wide; a
 *            named, focusable region: role="region" tabindex="0" aria-label, as src/content/render.js tableWrap
 *            writes it) .bars .err-mark
 */

/* ---- tokens (brand.js themeCSS(), verbatim) ---- */
:root{color-scheme:light;--paper:#FAF7F2;--card:#FFFFFF;--ink:#201B18;--muted:#6B625B;--line:#E8E0D6;--blush:#F3E4DC;--accent:#C34528;--accent-deep:#A93A20;--on-accent:#FFFFFF;--volt:#DDF247;--on-volt:#201B18;--stage:#EFE9E1;--success:#2E7D4F;--warn:#9A5B00;--danger:#B3261E;--display:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;--serif:'Fraunces',Georgia,'Times New Roman',serif;--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--paper:#14110F;--card:#1E1A17;--ink:#F4EFE8;--muted:#A89F97;--line:#3A332E;--blush:#3A2620;--accent:#EE6A4A;--accent-deep:#F08A6E;--on-accent:#14110F;--volt:#DDF247;--on-volt:#14110F;--stage:#24201C;--success:#5BC28A;--warn:#E8A53A;--danger:#FF8A80}}
:root[data-theme="dark"]{color-scheme:dark;--paper:#14110F;--card:#1E1A17;--ink:#F4EFE8;--muted:#A89F97;--line:#3A332E;--blush:#3A2620;--accent:#EE6A4A;--accent-deep:#F08A6E;--on-accent:#14110F;--volt:#DDF247;--on-volt:#14110F;--stage:#24201C;--success:#5BC28A;--warn:#E8A53A;--danger:#FF8A80}

/* Shape and depth (ux-design §2.4): borders over shadows; one glow for the primary action. The gutter widens to clear a
   landscape iPhone's notch and rounded corners (viewport-fit=cover in layout.js hands those edges to the page; the
   insets are 0 everywhere else), so every wrap, and every full-bleed strip that steps out of one by -1 gutter, keeps
   its content inside the safe area. */
:root{--r-xs:8px;--r-sm:12px;--r-md:14px;--r-lg:20px;--r-xl:24px;--r-pill:999px;--col:680px;--wide:1080px;
  --gutter:max(16px,env(safe-area-inset-left),env(safe-area-inset-right));
  --glow:0 12px 24px -14px rgba(195,69,40,.7);--float:0 -8px 24px -12px rgba(32,27,24,.25);--ring:0 0 0 3px rgba(195,69,40,.18)}

/* Mixed colours, worked out per theme (test/pages.test.js recomputes them from brand.js): each notice tint is its colour
   7–11% into --card; --control-line (form-field edges, the switch's off track) is --muted 80% into --card, at least 3:1
   on card, paper and blush in both themes (WCAG 1.4.11), where --line (1.3:1) is only a hairline. Not color-mix(): an
   engine without it (Safari before 16.2, Chrome before 111) keeps such a token as text, and every declaration that uses
   it then computes to nothing (fields without a border, notices without a background). The rules below that mix
   colours do it in @supports, over a plain value that stands on its own. */
:root{--tint-info:#FBF2F0;--tint-success:#EAF2ED;--tint-warn:#F4EDE3;--tint-danger:#F7E9E9;--control-line:#89817C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tint-info:#2D201B;--tint-success:#242B23;--tint-warn:#34291B;--tint-danger:#352522;--control-line:#8C847D}}
:root[data-theme="dark"]{--tint-info:#2D201B;--tint-success:#242B23;--tint-warn:#34291B;--tint-danger:#352522;--control-line:#8C847D}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:68px}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;overflow-wrap:anywhere}
main{flex:1 0 auto}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
p a,li a,.small a,.check a{text-decoration:underline;text-underline-offset:3px}
@supports (color:color-mix(in srgb,red 50%,blue)){p a,li a,.small a,.check a{text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent)}}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
fieldset{border:0;min-width:0}
[hidden]{display:none!important}
::selection{background:var(--blush)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-60px;z-index:60;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--r-sm);font-weight:600}
.skip:focus{top:8px}
.icon{width:20px;height:20px;flex:none}

/* ---- layout ---- */
.wrap{width:100%;max-width:calc(var(--col) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{width:100%;max-width:calc(var(--wide) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:40px}
.section-tight{padding-block:28px}
.section+.section{padding-top:0}
.stack>*+*{margin-top:12px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.row-center{justify-content:center}
.grid-2,.grid-3{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.center{text-align:center}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.stage{background:var(--stage);border-radius:var(--r-xl);overflow:hidden}
@media (min-width:560px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:720px){.section{padding-block:56px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- type ---- */
h1,h2,h3{font-weight:600;line-height:1.2;text-wrap:balance}
h2{font-size:22px}
h3{font-size:17px;line-height:1.35}
p{text-wrap:pretty}
.display{font-family:var(--display);font-weight:800;font-size:clamp(40px,12vw,64px);line-height:.95;text-transform:uppercase;letter-spacing:0}
.display-l{font-family:var(--display);font-weight:800;font-size:32px;line-height:1;text-transform:uppercase}
.moment{font-family:var(--serif);font-weight:600;font-size:clamp(28px,8vw,36px);line-height:1.08;letter-spacing:-.02em}
.accent-i{font-family:var(--serif);font-style:italic;font-weight:600;text-transform:none;letter-spacing:-.01em;color:var(--accent)}
.eyebrow{font-size:11.5px;font-weight:600;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lede{font-size:17px;line-height:1.55;color:var(--muted);max-width:46ch}
.center .lede{margin-inline:auto}
.small{font-size:14px;line-height:1.5}
.muted{color:var(--muted)}
.tag{font-family:var(--display);font-weight:700;font-size:14px;line-height:1;letter-spacing:.06em;text-transform:uppercase}
.price{font-family:var(--display);font-weight:700;font-size:24px;line-height:1}
.bignum{font-family:var(--display);font-weight:900;font-size:56px;line-height:.9;font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
.disclosure{font-weight:700;font-size:max(16px,1rem);line-height:1.45;letter-spacing:.01em}

/* ---- header / footer ---- */
.site-head{position:sticky;top:0;z-index:40;background:var(--paper);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
@supports (color:color-mix(in srgb,red 50%,blue)){.site-head{background:color-mix(in srgb,var(--paper) 92%,transparent)}}
.site-head-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding-block:8px}
.wordmark{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-family:var(--display);font-weight:800;font-size:20px;line-height:1;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.wordmark:hover{text-decoration:none}
.wordmark svg{width:14px;height:14px;color:var(--accent);flex:none}
.site-nav{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}
.site-nav>a:not(.btn){font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.site-nav .btn-sm{min-height:38px;padding:8px 14px;font-size:14px;white-space:nowrap}
@media (max-width:719px){.nav-more{display:none}}
@media (max-width:479px){.wordmark{font-size:17px}.site-nav{gap:12px}.site-nav .btn-sm{padding:8px 12px}}
/* Wordmark, FAQ and Design yours need about 337 px of row (a 369 px screen). Below 375 px, down to 320 (WCAG 1.4.10),
   the FAQ link goes (it's in the footer) and the rest keeps one row. With wider text spacing (1.4.12) or a fallback
   font the nav wraps under the wordmark rather than pushing the page sideways. */
@media (max-width:374px){.site-nav>a:not(.btn){display:none}}
@media (max-width:339px){.wordmark span{font-size:15px}}
.site-foot{margin-top:56px;border-top:1px solid var(--line);padding:24px 0 40px;font-size:13.5px;color:var(--muted)}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:12px}
.foot-nav a{font-weight:600}
.site-foot p+p{margin-top:6px}
.site-foot p a{color:var(--muted)}
.site-foot-lite{margin-top:40px;padding:20px 0 32px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 20px;border-radius:var(--r-md);border:1.5px solid transparent;font:600 16px/1.2 var(--sans);text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.985)}
.btn .icon{width:18px;height:18px}
.btn-primary{min-height:54px;background:var(--accent);color:var(--on-accent);box-shadow:var(--glow);font-size:17px}
.btn-primary:hover{background:var(--accent-deep)}
.btn-secondary{background:var(--card);color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--blush)}
.btn-quiet{min-height:44px;padding:10px 6px;background:none;color:var(--accent)}
.btn-quiet:hover{text-decoration:underline;text-underline-offset:3px}
.btn-volt{background:var(--volt);color:var(--on-volt);border-radius:var(--r-pill);font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.04em;text-transform:uppercase}
.btn-block{display:flex;width:100%}
.btn-sm{min-height:40px;padding:8px 14px;font-size:15px}
.btn-primary.btn-sm{min-height:40px;font-size:15px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:default;box-shadow:none;transform:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-primary{box-shadow:none}}

/* ---- chips, stickers ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);background:var(--blush);color:var(--ink);font-size:13px;font-weight:500;line-height:1.3}
.chip-line{background:none;border:1px solid var(--line)}
.chip-volt,.sticker{background:var(--volt);color:var(--on-volt);font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.sticker{display:inline-block;padding:5px 11px;border-radius:var(--r-pill);line-height:1}
.sticker-tilt{transform:rotate(-6deg)}

/* ---- cards ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.card-blush{background:var(--blush);border-color:transparent}
/* --accent on blush is 4.0:1 in light mode; --accent-deep is 5.1:1 (5.8:1 dark). */
.card-blush a:not(.btn){color:var(--accent-deep)}
.card-ink{background:var(--ink);color:var(--paper);border-color:transparent}
.card-ink .muted{color:var(--paper)}
@supports (color:color-mix(in srgb,red 50%,blue)){.card-ink .muted{color:color-mix(in srgb,var(--paper) 72%,var(--ink))}}
.card>h2,.card>h3{margin-bottom:6px}

/* ---- forms ---- */
.field{margin-top:18px}
.field>label,.field>.label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.opt{font-weight:500;color:var(--muted)}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{display:block;width:100%;min-height:50px;padding:12px 13px;border:1px solid var(--control-line);border-radius:var(--r-sm);background:var(--card);font-size:16px;line-height:1.4;-webkit-appearance:none;appearance:none}
select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B625B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:15px}
textarea{min-height:120px;resize:vertical}
/* Placeholders carry formats and the words that print when a field is left empty: full --muted (6:1). */
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.hint{margin-top:6px;font-size:13.5px;color:var(--muted)}
.err{margin-top:6px;font-size:14px;font-weight:500;color:var(--danger)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--danger)}
.count{margin-top:4px;font-size:12.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:15px;line-height:1.45;cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--accent)}
.seg{display:flex;padding:4px;gap:4px;border-radius:var(--r-pill);background:var(--blush)}
.seg label{flex:1;position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 10px;border-radius:var(--r-pill);font-weight:600;font-size:15px;text-align:center}
.seg input:checked+span{background:var(--card);box-shadow:0 0 0 1px var(--line),0 2px 6px -3px rgba(32,27,24,.3)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}
label.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:15px;font-weight:400;cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{display:block;flex:none;position:relative;width:48px;height:28px;border-radius:var(--r-pill);background:var(--control-line);transition:background .2s ease}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(32,27,24,.35);transition:transform .2s ease}
.switch input:checked+.track{background:var(--accent)}
.switch input:checked+.track::after{transform:translateX(20px)}
.switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:2px}
.switch input:disabled+.track{opacity:.5}

/* ---- notices ---- */
.notice{border-radius:var(--r-md);padding:14px 16px;border:1px solid var(--line);background:var(--tint-info);font-size:15px;line-height:1.5}
.notice-success{background:var(--tint-success)}
.notice-warn{background:var(--tint-warn)}
.notice-danger{background:var(--tint-danger)}
@supports (color:color-mix(in srgb,red 50%,blue)){
  .notice-success{border-color:color-mix(in srgb,var(--success) 35%,var(--line))}
  .notice-warn{border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}
  .notice-danger{border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}}
.notice-title{font-weight:600;margin-bottom:4px}
.notice p+p{margin-top:6px}

/* ---- status steps ---- */
.steps{list-style:none;position:relative;display:grid;gap:18px;padding-left:4px}
.steps li{position:relative;padding-left:28px}
.steps li::before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:var(--paper)}
.steps li:not(:last-child)::after{content:"";position:absolute;left:5px;top:20px;bottom:-16px;width:2px;background:var(--line)}
.steps li.done::before{background:var(--accent);border-color:var(--accent)}
.steps li.done:not(:last-child)::after{background:var(--accent)}
.steps li.current::before{background:var(--volt);border-color:var(--ink)}
@supports (color:color-mix(in srgb,red 50%,blue)){.steps li.current::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--volt) 55%,transparent)}}
.step-label{font-weight:600}
.step-sub{font-size:14px;color:var(--muted)}

/* ---- FAQ, tables, charts ---- */
.qa{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.qa+.qa{margin-top:10px}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;padding:16px 18px;font-weight:600;line-height:1.4}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;font-size:20px;line-height:1;color:var(--accent)}
.qa[open] summary::after{content:"–"}
.qa .qa-a{padding:0 18px 16px;color:var(--ink)}
.qa .qa-a p+p{margin-top:8px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
/* Each is a focusable region (src/content/render.js tableWrap), so arrow keys scroll it: a ring shows which. */
.table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
/* Words stay whole in a cell: body's overflow-wrap:anywhere would let a column shrink to a letter a line. */
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;overflow-wrap:normal}
/* Tables of sentences wrap on a phone; size charts (numbers) keep one line and scroll sideways, and so do
   comparisons of five or more columns (.table-wide), at a width where their sentences still read. */
.table-prose th,.table-prose td{white-space:normal;vertical-align:top}
.table-wide table{min-width:42em}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bars{display:flex;align-items:flex-end;gap:2px;height:72px}
.bars span{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:var(--accent);opacity:.85}
.bars span.zero{background:var(--line);opacity:1}

/* ---- toast, misc ---- */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:70;max-width:calc(100% - 2 * var(--gutter));transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:var(--r-pill);font-size:14.5px;font-weight:500;box-shadow:var(--float);transition:opacity .2s ease,transform .2s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}
.err-mark{width:48px;height:48px;margin:8px auto 16px;color:var(--accent)}
.center .row{margin-top:20px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ===========================================================================
   Page-specific (pages module): home, legal, order, manage, report
   =========================================================================== */

/* ---- home ---- */
.hero{padding-top:16px}
.hero-media{position:relative;width:100%;height:clamp(220px,34vh,420px);height:clamp(220px,34svh,420px)}
.hero-media picture,.tpl picture{display:block;width:100%;height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media .sticker{position:absolute;top:14px;right:14px}
.hero-copy{padding-top:20px}
.hero-copy .lede{margin-top:12px}
.hero-copy .btn-primary{margin-top:20px}
.trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:14px;color:var(--muted);list-style:none}
.trust li{display:inline-flex;align-items:center;gap:6px}
.trust .icon{width:18px;height:18px;color:var(--accent)}
.ref-banner{margin-top:12px}
@media (min-width:720px){.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}.hero-copy{padding-top:0}.hero-media{height:auto;aspect-ratio:4/5}}
.how{list-style:none;display:grid;gap:12px;margin-top:20px}
.how li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:start}
.how .num{font-family:var(--display);font-weight:900;font-size:40px;line-height:.9;color:var(--accent)}
.how h3{margin-bottom:2px}
@media (min-width:720px){.how{grid-template-columns:repeat(3,minmax(0,1fr))}}
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:min(66%,250px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:4px var(--gutter) 12px;margin-inline:calc(-1 * var(--gutter));scrollbar-width:thin;overscroll-behavior-x:contain}
.scroller>*{scroll-snap-align:start}
.tpl{display:block;color:var(--ink)}
.tpl:hover{text-decoration:none}
.tpl .stage{aspect-ratio:3/4}
.tpl img{width:100%;height:100%;object-fit:cover}
.tpl-name{margin-top:8px;font-family:var(--display);font-weight:700;font-size:20px;line-height:1.1;text-transform:uppercase}
.tpl-blurb{font-size:14px;color:var(--muted)}
.tpl-go{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-weight:600;color:var(--accent);font-size:14px}
.tpl-go .icon{width:16px;height:16px}
.products{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
.product{display:flex;flex-direction:column;gap:2px;padding:14px;color:var(--ink)}
.product .tpl-name{margin-top:0}
.product:hover{text-decoration:none;border-color:var(--ink)}
.product .price{margin-top:8px}
.product .small{color:var(--muted)}
.rules{list-style:none;display:grid;gap:12px;margin-top:14px}
.rules li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px}
.rules .icon{color:var(--accent);margin-top:1px}
.founder{display:grid;gap:12px}
.founder blockquote{font-family:var(--serif);font-size:19px;line-height:1.45;letter-spacing:-.01em}
.band{background:var(--volt);color:var(--on-volt);padding:40px 0;margin-top:16px}
.band .display-l{color:var(--on-volt)}
.band .btn-secondary{margin-top:16px;border-color:var(--on-volt);color:var(--on-volt);background:transparent}
@supports (color:color-mix(in srgb,red 50%,blue)){.band .btn-secondary:hover{background:color-mix(in srgb,var(--on-volt) 8%,transparent)}}
main:has(>.band:last-child)+.site-foot{margin-top:0}

/* ---- legal / FAQ ---- */
.doc h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,9vw,46px);line-height:1.04;letter-spacing:-.022em}
.doc .stamp{margin-top:12px}
.doc .lede{margin-top:12px}
.doc section{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.doc h2{font-family:var(--serif);font-weight:600;font-size:clamp(22px,5.6vw,27px);letter-spacing:-.016em}
.doc h3{margin-top:20px}
.doc p,.doc ul,.doc ol{margin-top:12px}
.doc ul,.doc ol{padding-left:22px;display:grid;gap:8px}
.doc li::marker{color:var(--accent)}
.doc .notice,.doc .table-wrap,.doc .qa:first-of-type{margin-top:14px}
.doc .toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.todo{display:block;margin-top:12px;padding:12px 14px;border:2px dashed var(--warn);border-radius:var(--r-sm);background:var(--tint-warn);font-weight:600;color:var(--ink)}
.size-card+.size-card{margin-top:14px}
.size-card h3{margin-top:0}

/* ---- breadcrumbs (every inner page; src/seo.js marks up the same trail) ---- */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:2px 0;margin:0;padding:0;font-size:13.5px;line-height:1.4;color:var(--muted)}
.crumbs li+li::before{content:"/";margin:0 8px}
@supports (color:color-mix(in srgb,red 50%,blue)){.crumbs li+li::before{color:color-mix(in srgb,var(--muted) 55%,transparent)}}
.crumbs a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.crumbs [aria-current]{color:var(--ink)}
.crumbs+h1,.crumbs+.notice{margin-top:14px}
.notice+h1{margin-top:18px}

/* ---- content pages: how it works, guides (src/pages/guides.js) ---- */
.doc .answer{margin-top:16px;padding:16px 18px;border-radius:var(--r-lg);background:var(--blush);font-size:17px;line-height:1.55}
.doc .answer p{margin-top:0}
.doc .answer a{color:var(--accent-deep)}
.doc .byline{margin-top:12px}
.doc .related,.doc .guide-list{padding-left:0;list-style:none}
.related li{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--line)}
.related li:last-child{border-bottom:0}
.related a,.guide-links a{font-weight:600}
.cta-card{margin-top:32px}
.doc .cta-card p:first-child{margin-top:0}
.cta-title{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.01em}
.guide-list{gap:12px;margin-top:24px}
.guide-list .card h2{font-size:20px}
.guide-list .card h2 a{color:var(--ink)}
.guide-links{list-style:none;display:grid;gap:10px}
.guide-links li{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}

/* ---- shirts (src/pages/shirts.js) ---- */
.shirt-grid{list-style:none;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){.shirt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.shirt-card{display:flex;flex-direction:column;gap:3px;height:100%;padding:12px;color:var(--ink);text-decoration:none}
.shirt-card:hover{text-decoration:none;border-color:var(--ink)}
.shirt-card h2.tpl-name{margin-top:8px}
.shirt-card .price{margin-top:auto;padding-top:8px}
.shirt-mockup{aspect-ratio:1/1}
.shirt-mockup img{width:100%;height:auto}
.shirt-media{display:grid;gap:12px;align-content:start}
.swatches{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.swatch{display:inline-block;flex:none;width:16px;height:16px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px var(--line),inset 0 0 0 1px rgba(0,0,0,.12)}
.notes{padding-left:20px;display:grid;gap:6px;font-size:14px;color:var(--muted)}
.shirt-grid-1{display:grid;gap:20px}
@media (min-width:720px){.shirt-grid-1{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}}
/* A size pick reloads at #buy, the price (shirts.js sizePicker), so a phone lands on the price, both pickers and "Design
   yours". Two columns tall enough to show the buy column down to "Design yours" from the top (about 790 px at 720 wide,
   630 from 1024) stay at the top instead: a target pulled a screen above the page clamps to 0, so the heading and the
   shirt don't scroll away. A shorter window (a phone on its side) still jumps. */
@media (min-width:720px) and (min-height:800px),(min-width:1024px) and (min-height:640px){#buy{scroll-margin-top:100vh}}
.color-list,.size-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.color-opt,.size-opt{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);color:var(--ink);font-size:14px;font-weight:500;line-height:1.2;text-decoration:none}
.size-opt{min-width:48px}
.color-opt:hover,.size-opt:hover{text-decoration:none;border-color:var(--ink)}
.color-opt.on,.size-opt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.size-opt.sold-out{color:var(--muted);background:var(--paper);border-style:dashed}
.sold{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--danger)}
.shirt-doc h2{margin-top:32px}
.shirt-doc h2:first-child{margin-top:0}

/* ---- order / thanks ---- */
.order-head{display:grid;gap:8px}
.order-grid{display:grid;gap:14px;margin-top:20px}
.order-mock{aspect-ratio:1/1;max-width:420px}
.order-mock-empty{display:grid;place-items:center;aspect-ratio:auto;height:120px;max-width:none}
.order-mock-empty .icon{width:40px;height:40px;color:var(--accent)}
.order-mock img{width:100%;height:100%;object-fit:cover}
@media (min-width:720px){.order-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}}
.totals{display:grid;gap:6px;margin-top:10px;font-size:15px}
.totals div{display:flex;justify-content:space-between;gap:12px}
.totals .total{padding-top:8px;border-top:1px solid var(--line);font-weight:700}
.linkbox{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);font-size:13.5px}
.linkbox code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spinner{width:28px;height:28px;margin:0 auto 14px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- manage ---- */
.m-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.m-code{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:.06em}
.m-qr{width:132px;padding:8px;border-radius:var(--r-sm);background:#FAF7F2}
.m-stats{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.bars-axis{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--muted)}
.mode-help{margin-top:8px;font-size:14px;color:var(--muted)}
.phone-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.inline-form{display:flex;gap:8px;align-items:stretch}
.inline-form input{flex:1;min-width:0}
.inline-form .btn{flex:none}
.saved-list{list-style:none;display:grid;gap:8px;margin-top:10px}