/* Unshelf site styles v2, 25 Oct 2026. Tokens from docs/brand/unshelf/tokens.json (brand kit v2): white paper, ledger
   green ink, green-bar tables, thrift-tag colours on price tags only. Zilla Slab + Libre Franklin, self-hosted.
   Type: 1.25 ratio, 17px reading size: 14 / 17 / 21 / 26 / 33 / 41 / 51 (51 is the home headline only).
   Space: 4px grid (4 8 12 16 24 32 48 64 96). Radius 4 (buttons, inputs, pills) and 6 (photos). No shadows.

   COMPONENTS (reuse these class names; do not invent a second version)
   Layout     .wrap (max width, 16px gutter) | .narrow (65ch column) | .sec (section) + .shelf (alt ground) | .cols, .cols.three
              .stack (vertical rhythm) | .lead (intro paragraph) | .fine (small print) | .muted | .sr (screen-reader only)
   Button     .btn (the one call-to-action button; one per screen) | .btn.quiet (outline, never the primary action)
   Pill       .pill.planned reads "Planned" (roadmap, no date) | .pill.today reads "Today" | .pill.held reads "Held"
   Hold card  .hold > .hold-tag "Held" + .hold-why (left red rule, the word Held, reason in plain words)
   Ledger     table.ledger (add .resp to stack rows on phones; give each td data-label="...") | caption, thead, tbody, tfoot
   Price card .plans > .plan > h3, .cost (price, tabular), .for, ul | .plan .export-note (export beside the price)
   FAQ        details.faq > summary + .faq-body
   Form       .form > .field (label + input/select/textarea) | fieldset.full > .opts > label.opt | .hp (honeypot) | .send + .status
   Price tag  .ttag > .num (+ small) with .t-pink .t-blue .t-yellow .t-green (tag colours live only here)
   Photo      figure.pic (one square photo with caption) | .frame (relative box for a photo and its tag) | figure.shot (big hero photo) | ul.rack > li > figure (grid of items)
   Lists      ul.points (square bullets) | ol.dates (numbered ledger rows with a bold lead-in)
   Worksheet  .sheet (the /replaces/ calculator) | .sheet-row | .sheet-out
   Header     .site-head > .wrap > a.logo + nav.nav (.nav-links + a.btn) | Footer .site-foot > .mark + .foot-links (not a nav)
   Documents  .doc (narrow single-column text page)
   Theme      light by default, dark by prefers-color-scheme, or force with <html data-theme="light|dark"> */
@font-face{font-family:"Zilla Slab";font-weight:600;font-display:swap;src:url(/assets/fonts/zilla-slab-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Zilla Slab";font-weight:700;font-display:swap;src:url(/assets/fonts/zilla-slab-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Franklin";font-weight:400;font-display:swap;src:url(/assets/fonts/libre-franklin-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Franklin";font-weight:700;font-display:swap;src:url(/assets/fonts/libre-franklin-latin-700-normal.woff2) format("woff2")}

:root{
  --paper:#FFFFFF;--shelf:#EEF1ED;--ink:#1C3A2E;--muted:#4D6158;--line:#CBD6CF;--bar:#E6F1E8;
  --btn:#1C3A2E;--btn-ink:#FFFFFF;--btn-hover:#2B5545;
  --tag-orange:#F28C28;--tag-pink:#F3A0C6;--tag-blue:#8DBBF2;--tag-yellow:#F4D35E;--tag-green:#A4D99C;--tag-ink:#1C3A2E;
  --held:#8A5300;--held-soft:#FDF0D9;--sold:#157347;--alert:#B42318;--focus:#1D5BB8;
  --slab:"Zilla Slab",Rockwell,"Roboto Slab",Georgia,serif;
  --read:"Libre Franklin","Franklin Gothic Book","Arial Narrow",Arial,sans-serif;
  --t-s:14px;--t-b:17px;--t-m:21px;--t-l:26px;--t-xl:33px;--t-2xl:41px;--t-3xl:51px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;
  --gap:var(--s16);
  --gutter:var(--s4);
  --r-sm:4px;--r-md:6px;
  --touch:48px;
  color-scheme:light dark;
}
@media (min-width:700px){:root{--gap:var(--s24);--gutter:var(--s6)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#13201B;--shelf:#1A2A23;--ink:#E9F1EC;--muted:#A9BDB3;--line:#2F443A;--bar:#1D3029;
  --btn:#E9F1EC;--btn-ink:#13201B;--btn-hover:#CFDDD5;
  --held:#F2BD55;--held-soft:#3A2C12;--sold:#6FD69B;--alert:#FF8A80;--focus:#6AA5FF;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#13201B;--shelf:#1A2A23;--ink:#E9F1EC;--muted:#A9BDB3;--line:#2F443A;--bar:#1D3029;
  --btn:#E9F1EC;--btn-ink:#13201B;--btn-hover:#CFDDD5;
  --held:#F2BD55;--held-soft:#3A2C12;--sold:#6FD69B;--alert:#FF8A80;--focus:#6AA5FF;
}
:root[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper);scroll-behavior:smooth;scrollbar-color:var(--muted) var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--t-b)/1.6 var(--read);-webkit-text-size-adjust:100%;caret-color:var(--ink);accent-color:var(--ink)}
::selection{background:var(--tag-yellow);color:var(--tag-ink)}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.2em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
a,button,summary,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%;height:auto}
svg{display:block}
p{text-wrap:pretty;margin:0 0 var(--s3)}
p:last-child{margin-bottom:0}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.skip{position:absolute;left:-999px;top:var(--s2);background:var(--paper);padding:var(--s2) var(--s3);z-index:10}
.skip:focus{left:var(--s2)}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-family:var(--slab);font-weight:600;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.stack>*+*{margin-top:var(--s4)}
.mt-4{margin-top:var(--s4)} .mt-6{margin-top:var(--s6)} .mt-8{margin-top:var(--s8)} .mt-12{margin-top:var(--s12)}

/* header and footer: footer links sit in a div, not a nav */
.site-head .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s1) var(--s6);padding-top:var(--s3);padding-bottom:var(--s3)}
.logo{display:block;color:var(--ink);justify-self:start} .logo svg{height:40px;width:auto}
.nav{display:contents}
.nav-links{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;gap:0 var(--s4)}
.nav-links a,.foot-links a{display:inline-flex;align-items:center;min-height:44px}
.nav .btn{grid-column:2;grid-row:1}
.nav a[aria-current="page"]{text-decoration-thickness:3px}
.site-foot{background:var(--shelf)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s12);align-items:flex-start;justify-content:space-between;padding-top:var(--s8);padding-bottom:calc(var(--s12) + env(safe-area-inset-bottom));font-size:var(--t-b)}
.site-foot .mark{display:flex;align-items:center;gap:var(--s3);max-width:460px}
.foot-links{display:flex;flex-wrap:wrap;gap:0 var(--s6)}
@media (min-width:900px){
  .site-head .wrap{grid-template-columns:auto minmax(0,1fr);gap:var(--s4) var(--s12);padding-top:var(--s4);padding-bottom:var(--s4)}
  .logo svg{height:44px}
  .nav{display:flex;align-items:center;justify-content:flex-end;gap:var(--s8)}
  .nav-links{display:flex;gap:0 var(--s6)}
  .nav .btn{grid-column:auto;grid-row:auto}
}

/* type */
h1,h2,h3{font-family:var(--slab);margin:0;text-wrap:balance;font-weight:700;letter-spacing:-.01em}
h1{font-size:var(--t-xl);line-height:1.1}
h2{font-size:var(--t-xl);line-height:1.15;margin-bottom:var(--s6)}
h3{font-size:var(--t-m);line-height:1.25;font-weight:600}
.lead{font-size:var(--t-m);line-height:1.5}
.fine{font-size:var(--t-b);color:var(--muted);max-width:56ch}
@media (min-width:700px){
  h1{font-size:var(--t-2xl)}
  h2{font-size:var(--t-xl)}
  h1.display{font-size:var(--t-3xl);line-height:1.05}
}

/* button: ink, small radius, 48px tall, one per screen */
.btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:700;font-size:var(--t-b);background:var(--btn);color:var(--btn-ink);border:2px solid var(--btn);border-radius:var(--r-sm);padding:var(--s3) var(--s6);min-height:var(--touch);text-decoration:none;cursor:pointer;transition:background-color .15s ease-out}
.btn:active{background:var(--btn-hover)}
.btn:disabled{opacity:.6;cursor:progress}
.btn.quiet{background:transparent;color:var(--ink)}
@media (hover:hover){.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:var(--btn-ink)} .btn.quiet:hover{background:var(--bar);color:var(--ink);border-color:var(--ink)}}
.nav .btn{padding:var(--s2) var(--s4)}

/* pills: a word, never colour alone */
.pill{display:inline-block;font-size:var(--t-s);font-weight:700;line-height:1.2;padding:var(--s1) var(--s2);border-radius:var(--r-sm);vertical-align:middle;white-space:nowrap;border:1px solid currentColor}
.pill.planned{color:var(--muted);background:var(--shelf)}
.pill.today{color:var(--sold);background:var(--paper)}
.pill.held{color:var(--held);background:var(--held-soft)}

/* hold-reason card: a left red rule and the word Held */
.hold{position:relative;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);padding:var(--s4) var(--s6) var(--s4) var(--s8);overflow:hidden}
.hold::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--s1);background:var(--alert)}
.hold-tag{font-family:var(--slab);font-weight:700;font-size:var(--t-m)}
.hold-why{margin:0;font-size:var(--t-m);line-height:1.4}
.hold-note{margin-top:var(--s2);font-size:var(--t-b);color:var(--muted)}

/* the hang tag: a thrift-store price tag, notched at the string end */
.ttag{--c:var(--tag-orange);position:relative;display:inline-flex;flex-direction:column;background:var(--c);color:var(--tag-ink);
  padding:var(--s2) var(--s4) var(--s2) var(--s8);clip-path:polygon(16px 0,100% 0,100% 100%,16px 100%,0 calc(100% - 16px),0 16px);line-height:1.15}
.ttag::before{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--paper)}
.ttag .num{font-size:var(--t-l)}
.ttag small{font-size:var(--t-s);font-weight:700}
.t-pink{--c:var(--tag-pink)} .t-blue{--c:var(--tag-blue)} .t-yellow{--c:var(--tag-yellow)} .t-green{--c:var(--tag-green)}

/* photo frames */
.pic{margin:0;max-width:360px}
.pic img{aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-md)}
.pic figcaption{font-size:var(--t-s);color:var(--muted);margin-top:var(--s2)}
.frame{position:relative}
.frame img{border-radius:var(--r-md);width:100%}
.shot{margin:0}
.shot img{aspect-ratio:4/3;object-fit:contain;background:var(--shelf)}
.shot .ttag{position:absolute;right:var(--s4);bottom:var(--s4);transform:rotate(-4deg)}
.shot .ttag .num{font-size:var(--t-xl)}
.shot figcaption{font-size:var(--t-s);color:var(--muted);margin-top:var(--s2)}
.rack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s3);margin:0;padding:0;list-style:none}
.rack figure{margin:0}
.rack img{aspect-ratio:1/1;object-fit:cover}
.rack .ttag{position:absolute;left:var(--s2);bottom:var(--s2);padding:var(--s1) var(--s3) var(--s1) 28px}
.rack .ttag::before{left:10px}
.rack .ttag .num{font-size:var(--t-m)}
.rack figcaption{margin-top:var(--s2);font-size:var(--t-s);line-height:1.4}
@media (min-width:700px){.rack{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s8) var(--s6)}}

/* sections and layout */
section{scroll-margin-top:var(--s3)}
.sec{padding-top:var(--gap);padding-bottom:var(--gap)}
.sec.tight{padding-top:var(--s8);padding-bottom:var(--s8)}
.shelf{background:var(--shelf)}
.narrow{max-width:56ch}
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s8)}
@media (min-width:840px){
  .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s12);align-items:start}
  .cols.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8)}
}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s8);align-items:center;padding-top:var(--s6);padding-bottom:var(--gap)}
.hero .copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.hero .proof{color:var(--muted)}
@media (min-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s12)}}
.points{margin:0;padding:0;list-style:none}
.points li{padding-left:var(--s6);position:relative;margin-bottom:var(--s3)}
.points li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;background:var(--tag-orange)}
.points b{display:block}
.dates{margin:0;padding:0;list-style:none;max-width:820px}
.dates li{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1);padding:var(--s3) var(--s4)}
.dates li:nth-child(odd){background:var(--bar)}
.dates b{font-family:var(--slab);font-weight:600}
@media (min-width:700px){.dates li{grid-template-columns:160px minmax(0,1fr);gap:var(--s6)}}

/* ledger: a real table on green-bar paper; with .resp the rows stack on phones */
.ledger{width:100%;border-collapse:collapse;font-size:var(--t-b)}
.ledger caption{text-align:left;caption-side:bottom;font-size:var(--t-s);color:var(--muted);padding-top:var(--s3)}
.ledger th,.ledger td{text-align:left;vertical-align:top;padding:var(--s3) var(--s4)}
.ledger thead th{font-family:var(--slab);font-weight:600;font-size:var(--t-b);padding-top:0;border-bottom:2px solid var(--ink)}
.ledger tbody tr:nth-child(odd){background:var(--bar)}
.ledger tbody th{font-weight:700}
.ledger tfoot td,.ledger tfoot th{border-top:2px solid var(--ink);font-weight:700;padding-top:var(--s4)}
.ledger .r{text-align:right}
@media (max-width:699px){
  .resp thead{display:none}
  .resp tr{display:block;padding:var(--s3) var(--s2)}
  .resp th,.resp td{display:block;padding:var(--s1) 0}
  .resp td[data-label]::before{content:attr(data-label) ": ";font-weight:700}
  .resp tfoot th,.resp tfoot td{border-top:0}
  .resp tfoot tr{border-top:2px solid var(--ink);padding-top:var(--s3)}
}

/* pricing cards: two, side by side, no ranking */
.plans{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);max-width:900px}
@media (min-width:700px){.plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8)}}
.plan{border:2px solid var(--ink);border-radius:var(--r-sm);padding:var(--s6);background:var(--paper)}
.plan h3{margin-bottom:var(--s2)}
.plan .cost{font-family:var(--slab);font-weight:700;font-size:var(--t-2xl);line-height:1;margin:0 0 var(--s1);font-variant-numeric:tabular-nums lining-nums}
.plan .cost small{font-family:var(--read);font-weight:400;font-size:var(--t-b);color:var(--muted)}
.plan .for{margin:var(--s3) 0 0}
.plan .export-note{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);font-size:var(--t-b)}
.plan ul{margin:var(--s2) 0 0;padding-left:1.1em}
@media (hover:hover){.plan{transition:border-color .15s ease-out} .plan:hover{border-color:var(--muted)}}

/* FAQ: native details */
.faq{border-bottom:1px solid var(--line)}
.faq:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--slab);font-weight:600;font-size:var(--t-m);line-height:1.25;padding:var(--s4) var(--s8) var(--s4) 0;min-height:var(--touch);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:var(--s2);top:var(--s4);font-size:var(--t-l);line-height:1}
.faq[open] summary::after{content:"-"}
.faq-body{padding:0 0 var(--s4);max-width:56ch}

/* forms: 16px+ inputs, labels above, 48px+ targets */
.form{background:var(--paper);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);max-width:640px}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.field>label,.form legend{font-size:var(--t-b);font-weight:700}
.form .hint{font-size:var(--t-b);color:var(--muted);margin:0}
.req{color:var(--muted);font-weight:400}
.form input[type=text],.form input[type=email],.form input[type=number],.form select,.form textarea,.sheet input[type=number]{font:inherit;font-size:var(--t-b);padding:var(--s3) var(--s4);border:1px solid var(--muted);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);min-height:var(--touch);width:100%}
.form textarea{min-height:120px;resize:vertical}
.form input:invalid:not(:placeholder-shown),.form [aria-invalid="true"]{border-color:var(--alert);border-width:2px}
.form fieldset{border:0;margin:0;padding:0;min-width:0}
.form legend{padding:0;margin-bottom:var(--s3)}
.opts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-flex;align-items:center;min-height:var(--touch);padding:var(--s2) var(--s4);border:1px solid var(--muted);border-radius:var(--r-sm);font-size:var(--t-b);cursor:pointer;background:var(--paper)}
.opt input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden;pointer-events:none}
.send{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.status{font-size:var(--t-b);margin:0}
.status.ok{color:var(--sold)} .status.err{color:var(--alert)}

/* worksheet (the /replaces/ calculator): browser only, nothing is sent */
.sheet{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);padding:var(--s4)}
.sheet-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.sheet-row:last-of-type{border-bottom:0}
.sheet-row input[type=checkbox]{width:28px;height:28px;margin:0}
.sheet-row label{font-weight:700;display:block}
.sheet-row .what{grid-column:2;color:var(--muted);font-size:var(--t-b)}
.sheet-row .amt{grid-column:2;display:flex;align-items:center;gap:var(--s2)}
.sheet-row .amt input{width:120px}
.sheet fieldset{border:0;margin:0;padding:0;min-width:0}
.sheet-inputs{max-width:none;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sheet-out{margin-top:var(--s6);background:var(--bar);border-radius:var(--r-sm);padding:var(--s4) var(--s6)}
.sheet-out .big{font-family:var(--slab);font-weight:700;font-size:var(--t-xl);line-height:1.15;font-variant-numeric:tabular-nums lining-nums}
.sheet-out ul{margin:var(--s3) 0 0;padding-left:1.1em}
@media (min-width:700px){.sheet{padding:var(--s6)} .sheet-row{grid-template-columns:auto minmax(0,1.3fr) minmax(0,1fr) auto}.sheet-row .what,.sheet-row .amt{grid-column:auto}}

/* document pages: privacy, consign, thanks */
.doc{max-width:780px;margin:0 auto;padding:var(--s8) var(--gutter) var(--s24)}
.doc h1{margin:0 0 var(--s6)}
.doc h2{font-size:var(--t-l);margin:var(--s12) 0 var(--s3)}
.doc ul,.doc ol{padding-left:1.3em} .doc li{margin:var(--s2) 0}
.doc .lead{margin:0 0 var(--s8)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.plan{transition:none}}


/* group A: /your-data/ dial drawing, /review/ hold cards, /steps/ chain */
.dial-fig{margin:0}
.dial{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.dial li{display:grid;gap:var(--s1);padding:var(--s4) var(--s4) var(--s4) var(--s12);position:relative;border-bottom:1px solid var(--line)}
.dial li:last-child{border-bottom:0}
.dial li::before{content:"";position:absolute;left:var(--s4);top:var(--s4);width:20px;height:20px;border:2px solid var(--muted);border-radius:50%;background:var(--paper)}
.dial li.on{background:var(--bar)}
.dial li.on::before{border-color:var(--ink);background:var(--ink)}
.dial b{font-family:var(--slab);font-weight:600;font-size:var(--t-m)}
.dial span{color:var(--muted)}
.dial-fig figcaption{font-size:var(--t-s);color:var(--muted);margin-top:var(--s2)}
.holds{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);max-width:760px}
.chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.chain li{border:1px solid var(--line);border-left:var(--s1) solid var(--line);border-radius:var(--r-sm);background:var(--paper);padding:var(--s4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
.chain h3{font-size:var(--t-m)}
.chain p{margin:0}
.chain .btn{margin-top:auto;padding:var(--s2) var(--s4)}
.chain li.mine{opacity:.75}
.chain li.on{border-color:var(--ink);background:var(--bar)}
.chain li.on .btn{background:var(--btn);color:var(--btn-ink)}
.pick{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);padding:var(--s4) var(--s6);max-width:760px}
.pick h3{margin-bottom:var(--s2)}
@media (min-width:600px){.chain{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.chain{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:840px){.holds{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}}
/* site-b.css: styles for questions, about, partners, register, register demo, sample item page, consign.
   Appended to assets/site.css by build_v2.py. Uses the tokens from site.css only. */
.doc .pics{display:grid;grid-template-columns:1fr;gap:var(--s4);margin:var(--s6) 0}
@media (min-width:600px){.doc .pics{grid-template-columns:1fr 1fr}}
.doc .pics figure{margin:0}
.doc .pics img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-md)}
.doc .pics figcaption{font-size:var(--t-s);color:var(--muted);margin-top:var(--s2)}
.doc .ledger{margin:var(--s4) 0}

/* register demo */
.reg-label{margin:0 0 var(--s2);font-weight:700}
.reg-h{font-size:var(--t-xl);margin:0 0 var(--s4)}
.reg{display:grid;gap:var(--s4);grid-template-columns:1fr}
.reg-total{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bar);padding:var(--s3) var(--s4);font-size:var(--t-m)}
.reg-total b{font-family:var(--slab);font-size:var(--t-xl);font-variant-numeric:tabular-nums}
.reg-reset{margin-left:auto;min-height:var(--touch)}
.reg-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.reg-tile{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--s2);min-height:72px;padding:var(--s3);font:inherit;color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:var(--r-sm);text-align:left;cursor:pointer;touch-action:manipulation}
.reg-tile b{font-family:var(--slab);font-size:var(--t-m);font-variant-numeric:tabular-nums}
.reg-tile:active{background:var(--bar);border-color:var(--ink)}
.reg-sub{font-size:var(--t-m);margin:0 0 var(--s2)}
.reg-lines{list-style:none;margin:0 0 var(--s4);padding:0}
.reg-lines li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.reg-rm{min-height:var(--touch);padding:var(--s1) var(--s3)}
.reg-charge{width:100%;min-height:56px;font-size:var(--t-m)}
@media (hover:hover){.reg-tile:hover{border-color:var(--ink);background:var(--bar)}}
@media (min-width:600px){.reg-tiles{grid-template-columns:repeat(3,1fr)}}
@media (min-width:840px) and (orientation:landscape){
  .reg{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}
  .reg-total{grid-column:1/-1}
  .reg-tiles{grid-template-columns:repeat(3,1fr)}
}

/* sample consignor page */
.cd{max-width:560px;margin:0 auto}
.cd-sample{margin:0 0 var(--s4)}
.cd h1{font-size:var(--t-xl);margin:0 0 var(--s4)}
.cd-pic{max-width:100%;margin:0 0 var(--s4)}
.cd-facts{margin:0 0 var(--s3);display:grid;gap:var(--s2)}
.cd-facts div{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.cd-facts dt{color:var(--muted)}
.cd-facts dd{margin:0;font-weight:700;text-align:right}
.cd-h2{font-size:var(--t-m);margin:var(--s8) 0 var(--s2)}
.cd .btn{min-height:var(--touch)}

.doc p,.doc li{max-width:36em}
.doc table.ledger{display:block;max-width:100%;overflow-x:auto}