/* Romance House storefront — authored by hand.
   build_site.py never writes this file. See ../../../SITE-SCHEMA.md §3.

   Two grounds, both taken from the product: the press floor the house works on
   and the paper each pen prints on. Every accent is sampled from that pen's
   own jacket via tools/covers/catalog.py, never chosen by eye.
   `--on-accent` exists so no button ever paints white on a light accent. */

/* ============================================================ the press floor
   The house is a back office. Its own surface is a printer's job ticket:
   mono data, registration marks, no selling. Selling happens past a door. */
:root{
  --press:#0E0E11; --press-2:#17171A; --press-3:#202026;
  --press-rule:#2C2C34; --press-type:#EBE8E2; --press-dim:#7A7A86;
  --reg:#C6403C;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter:clamp(20px,5vw,64px);
  color-scheme:dark;
}

/* ------------------------------------------------------------- pen worlds
   Palettes are lifted from tools/covers/catalog.py so the site and the
   printed covers are the same house. */
body{ --paper:var(--press); --paper-2:var(--press-2); --rule:var(--press-rule);
      --ink:var(--press-type); --ink-2:var(--press-dim); --body-c:var(--press-type);
      --dim:var(--press-dim); --accent:var(--reg); --on-accent:#FFF7F0;
      --edge:#5E5E6F;
      --display:var(--sans); --bodyface:var(--sans); --tight:-.01em; }

body[data-pen="sable-voss"]{
  --paper:#08060A; --paper-2:#120D14; --rule:#2C2129;
  --ink:#E8C97A; --ink-2:#C4A050; --body-c:#DAD1C4; --dim:#8B7F72;
  --accent:#CC4B55; --on-accent:#08060A;
  --edge:#705468;
  --display:'Cinzel',Georgia,serif; --bodyface:var(--sans);
  --tight:.02em; color-scheme:dark; }

body[data-pen="lyra-thorn"]{
  --paper:#0A0E16; --paper-2:#131A28; --rule:#25304A;
  --ink:#E6ECF2; --ink-2:#AFC3D6; --body-c:#C6CFDD; --dim:#78849B;
  --accent:#8FA8C8; --on-accent:#0A0E16;
  --edge:#485E90;
  --display:'Cormorant Garamond',Georgia,serif;
  --bodyface:'Cormorant Garamond',Georgia,serif; --tight:0; color-scheme:dark; }

body[data-pen="harper-vale"]{
  --paper:#0C1C24; --paper-2:#12262F; --rule:#1F3B45;
  --ink:#FAF4E6; --ink-2:#D2BA8C; --body-c:#DED7C8; --dim:#7F929B;
  --accent:#E08A3C; --on-accent:#0C1C24;
  --edge:#396C7F;
  --display:'Oswald',Impact,sans-serif; --bodyface:var(--sans);
  --tight:.01em; color-scheme:dark; }

body[data-pen="raven-quinn"]{
  --paper:#080C08; --paper-2:#101710; --rule:#20301F;
  --ink:#E8BA4A; --ink-2:#B48C40; --body-c:#D7D3C5; --dim:#7D8579;
  --accent:#E8BA4A; --on-accent:#080C08;
  --edge:#446642;
  --display:'Anton',Impact,sans-serif; --bodyface:var(--sans);
  --tight:.005em; color-scheme:dark; }

body[data-pen="mira-ellsworth"]{
  --paper:#E9DDC4; --paper-2:#F4EDDC; --rule:#C9BB9C;
  --ink:#33271B; --ink-2:#54684D; --body-c:#3E3529; --dim:#6B6153;
  --accent:#7A2B38; --on-accent:#F6F0E1;
  --edge:#917C4F;
  --display:'Libre Baskerville',Georgia,serif;
  --bodyface:'Libre Baskerville',Georgia,serif; --tight:0; color-scheme:light; }

/* The two serif worlds set their own base size: Cormorant runs small,
   Libre Baskerville runs large. */
body[data-pen="lyra-thorn"]{font-size:17.5px}
body[data-pen="mira-ellsworth"]{font-size:15.5px}
body[data-pen="lyra-thorn"] .card-sub{font-size:13.5px}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--body-c);
     font-family:var(--bodyface);font-size:16px;line-height:1.6;
     -webkit-font-smoothing:antialiased;
     transition:background .5s var(--ease),color .5s var(--ease)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}

.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
      text-transform:uppercase;font-weight:500}
/* width:100% — inside #app's flex column, `margin:0 auto` alone collapses the
   main element to fit-content instead of centring a full-width block. */
.wrap{width:100%;max-width:1400px;margin:0 auto;padding-inline:var(--gutter);
      flex:1;display:flex;flex-direction:column}
.foot{margin-top:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}

/* ===================================================================== shell */
#app{min-height:100dvh;display:flex;flex-direction:column}

/* ================================================================ vestibule */
.v{flex:1;display:flex;flex-direction:column;background:var(--press);
   color:var(--press-type);min-height:100dvh}
.v-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
       padding:18px var(--gutter);color:var(--press-dim);
       border-bottom:1px solid var(--press-rule)}
.v-bar b{color:var(--press-type);font-weight:500}

.v-lede{display:grid;gap:clamp(20px,4vw,72px);align-items:end;
        grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
        padding:clamp(36px,6vh,72px) var(--gutter) clamp(26px,4vh,40px)}
.v-lede h1{margin:0;font-family:var(--sans);font-weight:600;
           font-size:clamp(30px,4.6vw,64px);line-height:1;letter-spacing:-.035em;
           color:var(--press-type)}
.v-lede h1 em{font-style:normal;color:var(--press-dim)}
.v-lede p{margin:0;max-width:46ch;color:var(--press-type);
          font-family:var(--sans);font-size:15.5px;line-height:1.65;
          padding:16px 18px;border-left:2px solid var(--press-accent,#8A7A5C);
          background:color-mix(in srgb,var(--press) 76%,transparent);
          backdrop-filter:blur(3px)}
@media (max-width:860px){.v-lede{grid-template-columns:1fr;gap:18px;align-items:start}}

/* --- the doors. Five jambs in one wall; hovering opens one a little. ------ */
.doors{display:flex;gap:2px;flex:1;min-height:min(460px,52vh);
       padding:0 var(--gutter) var(--gutter);background:var(--press)}
/* A door is a panel with a window in it: that pen's first cover, veiled at
   rest and uncovered as the door opens. */
.door{position:relative;flex:1 1 0;min-width:0;overflow:hidden;text-align:left;
      text-decoration:none;background:var(--dp);border:1px solid var(--press-rule);
      border-top:3px solid color-mix(in srgb,var(--dc) 55%,transparent);
      padding:22px 20px;display:flex;flex-direction:column;justify-content:flex-end;
      transition:flex-grow .55s var(--ease),border-color .45s var(--ease);
      opacity:0;transform:translateY(14px);animation:rise .7s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
/* Framed on the art, not the jacket type — a door is not a book on a shelf. */
.door::before{content:"";position:absolute;inset:0;background-image:var(--art);
              background-repeat:no-repeat;
              background-size:cover;background-position:50% 42%;opacity:.62;
              filter:saturate(.78) contrast(1.02);
              transition:opacity .5s var(--ease),filter .5s var(--ease),
                         background-size .6s var(--ease),
                         background-position .6s var(--ease)}
/* The scrim exists to keep the name and promise legible, so it sits under
   them and thins out fast going up — the top two thirds stay picture. */
.door::after{content:"";position:absolute;inset:0;pointer-events:none;
             background:linear-gradient(to top,var(--dp) 4%,
               color-mix(in srgb,var(--dp) 82%,transparent) 30%,
               color-mix(in srgb,var(--dp) 22%,transparent) 62%,
               transparent 100%)}
.door>span{position:relative;z-index:1}
.door:hover,.door:focus-visible{flex-grow:2.4;border-top-color:var(--dc)}
.door:hover::before,.door:focus-visible::before{opacity:.92;filter:none;
                                                background-size:cover;
                                                background-position:50% 38%}
.door-name{font-family:var(--df);font-size:clamp(19px,2vw,30px);line-height:1.04;
           font-weight:700;color:var(--dc);letter-spacing:var(--dt);
           text-wrap:balance;
           text-shadow:0 1px 2px var(--dp),0 2px 18px var(--dp),0 0 40px var(--dp)}
.door-genre{margin-top:12px;color:var(--ddim);
            font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
            text-transform:uppercase;line-height:1.7}
.door-promise{margin:14px 0 0;max-width:26ch;font-family:var(--sans);
              font-size:14.5px;line-height:1.5;color:var(--dtext);
              text-shadow:0 1px 10px var(--dp);
              opacity:0;transform:translateY(6px);
              transition:opacity .4s var(--ease) .06s,transform .4s var(--ease) .06s}
.door:hover .door-promise,.door:focus-visible .door-promise{opacity:1;transform:none}
.door-enter{margin-top:14px;color:var(--dc);font-family:var(--mono);font-size:10.5px;
            letter-spacing:.16em;text-transform:uppercase;opacity:0;
            transition:opacity .4s var(--ease) .12s}
.door:hover .door-enter,.door:focus-visible .door-enter{opacity:1}
.doors.opening .door{opacity:0;transform:scale(.98);pointer-events:none;
                     transition:opacity .38s var(--ease),transform .38s var(--ease)}
.doors.opening .door.chosen{opacity:1;transform:none;flex-grow:60;
                            background:var(--dp);border-color:var(--dp)}

.v-foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
        padding:16px var(--gutter) 26px;color:var(--press-dim);
        border-top:1px solid var(--press-rule);margin-inline:var(--gutter)}

/* ==================================================================== world */
.w-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;
       padding:12px var(--gutter);background:color-mix(in srgb,var(--paper) 88%,transparent);
       backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.w-back{color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.13em;
        text-transform:uppercase;white-space:nowrap}
.w-back:hover{color:var(--ink)}
.w-pen{font-family:var(--display);font-size:17px;font-weight:700;color:var(--ink);
       letter-spacing:var(--tight);margin-right:auto;white-space:nowrap;
       overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.w-cart{display:flex;align-items:center;gap:9px;padding:8px 15px;border-radius:2px;
        border:1px solid var(--rule);color:var(--ink);font-family:var(--mono);
        font-size:11px;letter-spacing:.12em;text-transform:uppercase;
        transition:border-color .25s,background .25s}
a.w-cart{text-decoration:none}
.w-cart:hover{border-color:var(--accent);background:var(--paper-2)}
.w-cart .n{min-width:19px;height:19px;display:grid;place-items:center;border-radius:999px;
           background:var(--accent);color:var(--on-accent);font-size:10.5px;letter-spacing:0}

/* the promise: the one thing each pen already says about itself */
.hero{position:relative;padding:clamp(56px,11vh,124px) 0 clamp(34px,6vh,58px)}
/* The pen's own weather behind its promise, fading out before the facts row so
   the small type below never sits on a picture. */
/* Height stays inside .hero: the intro paragraph below is a SIBLING, not a
   child, so anything taller than 100% covers text it cannot raise above it. */
.hero-art{position:absolute;inset:-1px 0 auto;height:100%;overflow:hidden;z-index:0;
          pointer-events:none}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;
              opacity:.5}
.hero-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
             color-mix(in srgb,var(--paper) 34%,transparent) 0%,
             color-mix(in srgb,var(--paper) 68%,transparent) 46%,
             var(--paper) 88%)}
/* Must exclude .hero-art: same specificity as the rule above it and later in
   the cascade, so it would win and drop the absolute art back into flow. */
.hero>*:not(.hero-art){position:relative;z-index:1}
.promise{text-shadow:0 2px 26px var(--paper)}
.hero-eyebrow{color:var(--dim);margin-bottom:22px}
.promise{margin:0;font-family:var(--display);font-weight:700;
         font-size:clamp(38px,7.4vw,96px);line-height:.99;letter-spacing:var(--tight);
         color:var(--ink);max-width:19ch;text-wrap:balance}
.hero-sign{margin-top:20px;font-family:var(--display);font-size:15px;
           color:var(--ink-2);letter-spacing:.08em}
.promise span{display:inline-block;clip-path:inset(0 0 110% 0);
              transform:translateY(.16em);
              animation:reveal .72s var(--ease) forwards;
              animation-delay:calc(var(--i)*55ms + 120ms)}
@keyframes reveal{to{clip-path:inset(-.2em -.1em -.2em -.1em);transform:none}}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;
            padding-top:20px;border-top:1px solid var(--rule);color:var(--dim)}
.hero-facts b{color:var(--body-c);font-weight:500}

/* series block ------------------------------------------------------------- */
.series{padding-bottom:clamp(44px,7vh,84px)}
.series-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
             padding-bottom:14px}
.series-head h2{margin:0;font-family:var(--display);font-weight:700;
                font-size:clamp(22px,3.1vw,36px);color:var(--ink);
                letter-spacing:var(--tight)}
.series-head .mono{color:var(--dim);margin-left:auto}
.series-logline{margin:0 0 26px;max-width:62ch;color:var(--body-c);
                font-size:16px;line-height:1.62}
/* Each pen's rule is its cover language in one stroke. */
.srule{height:1px;background:var(--rule);margin-bottom:16px;position:relative}
body[data-pen="sable-voss"] .srule{background:linear-gradient(90deg,var(--ink-2),transparent 70%)}
body[data-pen="sable-voss"] .srule::after{content:"";position:absolute;left:0;top:-2.5px;
  width:6px;height:6px;background:var(--ink);transform:rotate(45deg)}
body[data-pen="lyra-thorn"] .srule{background:linear-gradient(90deg,transparent,var(--ink-2) 30%,var(--ink-2) 70%,transparent)}
body[data-pen="harper-vale"] .srule{background:repeating-linear-gradient(90deg,var(--ink-2) 0 3px,transparent 3px 9px)}
body[data-pen="raven-quinn"] .srule{height:4px;background:none}
body[data-pen="raven-quinn"] .srule::after{content:"";position:absolute;inset:0 auto 0 0;
  width:64px;background:var(--ink)}
body[data-pen="mira-ellsworth"] .srule{height:4px;border-top:1px solid var(--ink-2);
  border-bottom:1px solid var(--ink-2);background:none}

/* Sable Voss keeps two series and the cover SSOT insists they not look alike:
   "champagne ivory, wine, black silk — not Ravelli street-gold", set in
   Playfair italic. The section re-declares the tokens its children inherit. */
.series[data-series="gilded-sins"]{
  --ink:#F2E2C2; --ink-2:#C0525C; --accent:#B03840;
  --display:'Playfair Display',Georgia,serif; --tight:0}
.series[data-series="gilded-sins"] .series-head h2,
.series[data-series="gilded-sins"] .card-title{font-style:italic}
.series[data-series="gilded-sins"] .srule{
  background:linear-gradient(90deg,#B03840,transparent 70%)}
.series[data-series="gilded-sins"] .srule::after{background:#F2E2C2}

/* book cards --------------------------------------------------------------- */
.grid{display:grid;gap:30px 22px;
      grid-template-columns:repeat(auto-fill,minmax(min(100%,176px),1fr))}
.card{text-align:left;display:flex;flex-direction:column;gap:11px;width:100%}
.card-cover{position:relative;aspect-ratio:1600/2560;background:var(--paper-2);
            border:1px solid var(--rule);overflow:hidden;
            transition:transform .3s var(--ease),box-shadow .3s var(--ease),
                       border-color .3s var(--ease)}
.card-cover img{display:block;width:100%;height:100%;object-fit:cover}
.card:hover .card-cover,.card:focus-visible .card-cover{transform:translateY(-5px);
  border-color:var(--accent);box-shadow:0 14px 34px rgba(0,0,0,.42)}
/* Cream covers on a cream ground need the book lifted off the shelf. */
body[data-pen="mira-ellsworth"] .card-cover{box-shadow:0 4px 12px rgba(70,52,28,.16)}
body[data-pen="mira-ellsworth"] .card:hover .card-cover{box-shadow:0 14px 30px rgba(70,52,28,.26)}
.card-tags{display:flex;gap:8px;align-items:center;color:var(--dim);
           font-family:var(--mono);font-size:10px;letter-spacing:.13em;
           text-transform:uppercase}
.card-tags .pair{color:var(--accent)}
/* Two lines of title are reserved on every card so the rows stay ruled. */
.card-title{margin:0;font-family:var(--display);font-weight:700;font-size:15.5px;
            line-height:1.22;color:var(--ink);letter-spacing:var(--tight);
            min-height:2.44em}
.card-sub{margin:0;font-size:12.5px;line-height:1.45;color:var(--dim)}
.card-price{margin-top:2px;color:var(--body-c);font-family:var(--mono);font-size:11px;
            letter-spacing:.1em;text-transform:uppercase}
.card.hold .card-cover img{filter:saturate(.42) brightness(.72)}
.card.hold .card-price{color:var(--dim)}

/* also-kept strip ---------------------------------------------------------- */
.also{border-top:1px solid var(--rule);padding:34px 0 10px}
.also h3{margin:0 0 20px;color:var(--dim);font-family:var(--mono);font-size:11px;
         letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.also-row{display:grid;gap:14px;justify-content:start;
          grid-template-columns:repeat(auto-fit,minmax(260px,380px))}
/* The left edge is the other pen's own accent — a sliver of where you'd land. */
.also-card{text-align:left;padding:20px;border:1px solid var(--rule);
           border-left:3px solid var(--hint,var(--rule));
           background:var(--paper-2);transition:border-color .25s,transform .25s var(--ease)}
.also-card:hover{border-color:var(--accent);border-left-color:var(--hint,var(--accent));
                 transform:translateY(-2px)}
.also-card b{display:block;font-family:var(--display);font-size:19px;color:var(--ink);
             letter-spacing:var(--tight);margin-bottom:7px}
.also-card span{color:var(--dim);font-size:14px;line-height:1.5}

/* ================================================================ book page */
/* padding-block, not the shorthand: `.b` shares its element with `.wrap`,
   whose padding-inline is the page gutter. */
.b{padding-block:clamp(28px,5vh,52px) 0}
.crumb{color:var(--dim);margin-bottom:26px}
.crumb button:hover{color:var(--ink)}
.b-grid{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:minmax(0,340px) minmax(0,1fr);
        align-items:start}
.b-left{position:sticky;top:78px}
.b-cover{width:100%;aspect-ratio:1600/2560;border:1px solid var(--rule);overflow:hidden;
         background:var(--paper-2);box-shadow:0 20px 48px rgba(0,0,0,.4)}
body[data-pen="mira-ellsworth"] .b-cover{box-shadow:0 16px 36px rgba(60,45,25,.22)}
.b-cover img{display:block;width:100%;height:100%;object-fit:cover}

.b-kicker{color:var(--accent);margin-bottom:14px}
.b-title{margin:0;font-family:var(--display);font-weight:700;
         font-size:clamp(30px,5.4vw,62px);line-height:1.02;color:var(--ink);
         letter-spacing:var(--tight);text-wrap:balance}
.b-sub{margin:12px 0 0;color:var(--dim);font-size:15px}
.b-hook{margin:26px 0 0;font-size:clamp(17px,1.9vw,21px);line-height:1.48;
        color:var(--ink-2);max-width:38ch;font-family:var(--bodyface)}
.b-copy{margin-top:26px;max-width:56ch}
.b-copy p{margin:0 0 14px;line-height:1.68}
.b-tagline{margin:20px 0 0;max-width:56ch;padding-top:14px;
           border-top:1px solid var(--rule);color:var(--dim);font-size:14.5px;
           line-height:1.55}

/* edition picker ----------------------------------------------------------- */
.ed{margin-top:22px;border:1px solid var(--rule);background:var(--paper-2)}

/* What arrives on top of the printed book. It sits under the buy control and
   reads as a receipt, not an upsell: no accent fill, no badge, just a checked
   list in the quiet colour. The tick is drawn in the accent so it registers
   against every pen palette. */
.incl{margin-top:14px;padding:13px 16px;border:1px solid var(--rule)}
.incl-h{margin:0 0 9px;color:var(--dim);font-size:10.5px;letter-spacing:.14em;
        text-transform:uppercase}
.incl ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.incl li{position:relative;padding-left:19px;color:var(--body-c);font-size:13.5px;
         line-height:1.45}
.incl li::before{content:"";position:absolute;left:1px;top:.42em;width:9px;height:5px;
         border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
         transform:rotate(-45deg)}
.ed-h{padding:12px 16px;border-bottom:1px solid var(--rule);color:var(--dim)}
.ed-opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
        padding:14px 16px;border-bottom:1px solid var(--rule);cursor:pointer;
        transition:background .2s}
.ed-opt:last-of-type{border-bottom:0}
.ed-opt:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.ed-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--dim);
        flex:none;transition:border-color .2s,box-shadow .2s}
.ed-opt:has(input:checked) .ed-dot{border-color:var(--accent);
        box-shadow:inset 0 0 0 3.5px var(--accent)}
.ed-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
.ed-name{font-weight:600;color:var(--ink);font-size:14.5px}
.ed-meta{display:block;color:var(--dim);font-size:12px;margin-top:2px;
         font-family:var(--mono);letter-spacing:.06em}
.ed-price{margin-left:auto;font-family:var(--mono);font-size:14px;color:var(--ink)}
.buy{display:block;width:100%;margin-top:14px;padding:16px;background:var(--accent);
     color:var(--on-accent);font-family:var(--mono);font-size:12px;letter-spacing:.16em;
     text-transform:uppercase;transition:filter .2s,transform .12s}
body[data-pen="raven-quinn"] .buy:not([disabled]){background:var(--ink)}
.buy:not([disabled]):hover{filter:brightness(1.12)}
.buy:not([disabled]):active{transform:translateY(1px)}
.buy[disabled]{background:none;border:1px solid var(--rule);color:var(--dim);
               cursor:default;filter:none}
.buy-note{margin:11px 0 0;color:var(--dim);font-size:12.5px;line-height:1.5}

/* the series page, as it is printed inside the book ------------------------ */
.splate{margin-top:44px;border:1px solid var(--rule);background:var(--paper-2);
        padding:clamp(24px,4vw,44px)}
.splate-t{text-align:center;font-family:var(--display);color:var(--ink);
          letter-spacing:.06em;font-size:15px;font-weight:700}
.splate-n{text-align:center;color:var(--dim);margin:6px 0 26px}
.splate dl{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;margin:0;
           padding:20px 0;border-block:1px solid var(--rule)}
.splate dt{color:var(--dim);font-family:var(--mono);font-size:10.5px;
           letter-spacing:.13em;text-transform:uppercase;padding-top:3px}
.splate dd{margin:0;color:var(--body-c);font-size:14.5px;line-height:1.5}
.heat{display:inline-flex;gap:5px;align-items:center;vertical-align:-1px}
.heat i{width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--ink-2)}
.heat i.on{background:var(--accent);border-color:var(--accent)}
.heat i.half{background:linear-gradient(135deg,var(--accent) 50%,transparent 50%);
             border-color:var(--accent)}
.splate-also{margin-top:24px}
.splate-also h4{margin:0 0 12px;text-align:center;color:var(--dim);
                font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
                text-transform:uppercase;font-weight:500}
.splate-also ol{list-style:none;margin:0;padding:0;max-width:420px;
                margin-inline:auto}
.splate-also li{border-bottom:1px dotted var(--rule)}
.splate-also li:last-child{border-bottom:0}
.splate-also a{display:flex;width:100%;gap:12px;padding:9px 2px;text-align:left;
      text-decoration:none;
                    align-items:baseline;font-size:14px;transition:color .2s}
.splate-also a:hover{color:var(--ink)}
.splate-also .n{font-family:var(--mono);font-size:11px;color:var(--dim)}
.splate-also .now{color:var(--accent)}

/* ================================================================ how / foot */
.how{border-top:1px solid var(--rule);margin-top:clamp(48px,8vh,96px);
     padding:clamp(34px,5vh,56px) 0}
.how h3{margin:0 0 26px;color:var(--dim);font-family:var(--mono);font-size:11px;
        letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.how-row{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.how-step b{display:block;font-family:var(--mono);font-size:11px;color:var(--accent);
            letter-spacing:.14em;margin-bottom:9px}
.how-step strong{display:block;font-family:var(--display);font-size:18px;color:var(--ink);
                 letter-spacing:var(--tight);margin-bottom:7px;font-weight:700}
.how-step span{color:var(--dim);font-size:14px;line-height:1.55}
.foot{border-top:1px solid var(--rule);padding:22px 0 40px;color:var(--dim);
      display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap}

/* ===================================================================== cart */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(4,4,6,.62);
       opacity:0;pointer-events:none;transition:opacity .32s var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.cart{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(430px,100%);
      display:flex;flex-direction:column;background:var(--paper);
      border-left:1px solid var(--rule);transform:translateX(101%);
      transition:transform .38s var(--ease);color:var(--body-c)}
.cart.on{transform:none}
.cart-h{display:flex;align-items:center;gap:14px;padding:18px 22px;
        border-bottom:1px solid var(--rule)}
.cart-h b{font-family:var(--display);font-size:18px;color:var(--ink);
          letter-spacing:var(--tight);margin-right:auto}
.cart-x{padding:6px 10px;color:var(--dim);font-size:18px;line-height:1}
.cart-x:hover{color:var(--ink)}
.cart-body{flex:1;overflow:auto;padding:6px 22px 22px}
.parcel{padding-top:20px}
.parcel-h{display:flex;gap:10px;align-items:center;color:var(--dim);
          padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.line{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--rule)}
.line img{width:46px;height:74px;object-fit:cover;border:1px solid var(--rule);flex:none}
.line-b{flex:1;min-width:0}
.line-t{font-family:var(--display);font-size:14px;color:var(--ink);line-height:1.25;
        letter-spacing:var(--tight)}
.line-e{color:var(--dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
        text-transform:uppercase;margin-top:5px}
.qty{display:inline-flex;align-items:center;gap:2px;margin-top:9px;
     border:1px solid var(--rule)}
.qty button{width:26px;height:24px;color:var(--dim);font-size:14px;line-height:1}
.qty button:hover{color:var(--ink);background:var(--paper-2)}
.qty span{min-width:24px;text-align:center;font-family:var(--mono);font-size:12px}
.line-p{font-family:var(--mono);font-size:13px;color:var(--ink)}
.cart-empty{padding:56px 0;text-align:center;color:var(--dim);font-size:14.5px;
            line-height:1.6}
.cart-empty strong{display:block;color:var(--ink);font-family:var(--display);
                   font-size:19px;margin-bottom:10px;letter-spacing:var(--tight)}
.cart-f{border-top:1px solid var(--rule);padding:18px 22px 22px;background:var(--paper-2)}
.sum{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14px}
.sum.total{border-top:1px solid var(--rule);margin-top:9px;padding-top:12px;
           font-size:17px;color:var(--ink);font-family:var(--display);
           letter-spacing:var(--tight)}
.sum span:last-child{font-family:var(--mono)}
.split{margin:0 0 14px;padding:11px 13px;border-left:2px solid var(--accent);
       background:color-mix(in srgb,var(--accent) 9%,transparent);
       color:var(--body-c);font-size:12.5px;line-height:1.55}

/* ======================================================== prototype notices */
.proto{margin-top:12px;color:var(--dim);font-size:12px;line-height:1.5;
       display:flex;gap:8px}
.proto::before{content:"";flex:none;width:6px;height:6px;margin-top:6px;
               background:var(--dim);transform:rotate(45deg)}

/* ================================================================ responsive */
@media (max-width:900px){
  .b-grid{grid-template-columns:1fr}
  .b-left{position:static;max-width:300px}
}
/* On a phone the picker needs the whole column, not a tablet-sized card. */
@media (max-width:600px){ .b-left{max-width:none} }
@media (max-width:760px){
  .doors{flex-direction:column;min-height:0;gap:8px}
  /* No hover on touch: every door stands open a crack. */
  .door{flex:0 0 auto;padding:18px;min-height:0;justify-content:flex-start}
  .door:hover,.door:focus-visible{flex-grow:0}
  /* Short wide panel: zoom further so only texture shows. */
  .door::before{opacity:.2;background-size:auto 420%;background-position:50% 46%}
  .door:hover::before{background-size:auto 420%}
  .doors.opening .door.chosen{flex-grow:1;min-height:50vh}
  .door-promise,.door-enter{opacity:1;transform:none;max-width:none}
  .door-promise{margin-top:10px}
  .v-lede{padding-block:34px 24px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:24px 16px}
  .w-pen{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;
                       transition-duration:.01ms!important}
  .door,.promise span{opacity:1;transform:none;clip-path:none}
}
/* ======================================================= long-form free pages
   Sample chapters and the house guides. One column, book measure, the pen's
   own prose face — this is the part a reader actually reads. */
.prose{max-width:64ch;margin-inline:auto}
.prose h2{margin:44px 0 14px;font-family:var(--display);font-weight:700;
          font-size:clamp(20px,2.6vw,28px);color:var(--ink);
          letter-spacing:var(--tight);text-wrap:balance}
.prose h3{margin:32px 0 10px;font-family:var(--display);font-weight:700;
          font-size:18px;color:var(--ink);letter-spacing:var(--tight)}
.prose p{margin:0 0 1.05em;line-height:1.72}
.prose ul,.prose ol{margin:0 0 1.05em;padding-left:1.3em;line-height:1.72}
.prose li{margin-bottom:.4em}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink-2);text-decoration:underline;
         text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--ink)}

/* the sample chapter itself, set like the printed page */
.chapter{max-width:63ch;margin-inline:auto;font-size:1.05em}
.chapter p{margin:0;line-height:1.78;text-indent:1.4em}
.chapter p:first-of-type,.chapter .brk + p{text-indent:0}
.chapter .brk{margin:1.6em 0;text-align:center;color:var(--dim);
              letter-spacing:.8em}
.chapter em{font-style:italic}
.ch-num{text-align:center;margin:0 0 34px;color:var(--dim)}
.ch-title{text-align:center;margin:0 0 40px;font-family:var(--display);
          font-weight:700;font-size:clamp(24px,3.4vw,34px);color:var(--ink);
          letter-spacing:var(--tight);line-height:1.1;text-wrap:balance}

/* the bar that says this is free and where it stops */
.readbar{display:flex;gap:14px 22px;flex-wrap:wrap;align-items:baseline;
         padding:14px 0;margin-bottom:34px;border-block:1px solid var(--rule);
         color:var(--dim)}
.readbar b{color:var(--accent);font-weight:500}
.sample-end{max-width:63ch;margin:52px auto 0;padding:28px;border:1px solid var(--rule);
            background:var(--paper-2);text-align:center}
.sample-end h2{margin:0 0 10px;font-family:var(--display);font-size:22px;
               color:var(--ink);letter-spacing:var(--tight)}
.sample-end p{margin:0 0 18px;color:var(--dim);font-size:14.5px}
.sample-end .buy{max-width:320px;margin-inline:auto}

/* ============================================================ index surfaces */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{display:inline-block;padding:6px 12px;border:1px solid var(--rule);
      border-radius:999px;color:var(--body-c);font-size:13px;
      text-decoration:none;transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip .n{color:var(--dim);font-family:var(--mono);font-size:11px;margin-left:5px}

.deflist{display:grid;grid-template-columns:auto 1fr;gap:12px 26px;margin:0}
.deflist dt{color:var(--dim);font-family:var(--mono);font-size:10.5px;
            letter-spacing:.13em;text-transform:uppercase;padding-top:3px}
.deflist dd{margin:0;color:var(--body-c);line-height:1.55}
@media (max-width:560px){.deflist{grid-template-columns:1fr;gap:4px 0}
  .deflist dd{margin-bottom:12px}}

.rows{border-top:1px solid var(--rule);margin:0;padding:0;list-style:none}
.rows li{border-bottom:1px solid var(--rule)}
.rows a{display:grid;grid-template-columns:auto 1fr auto;gap:10px 18px;
        align-items:baseline;padding:15px 2px;text-decoration:none;
        transition:background .2s}
.rows a:hover{background:var(--paper-2)}
.rows .n{font-family:var(--mono);font-size:11px;color:var(--dim)}
.rows .t{font-family:var(--display);font-size:17px;color:var(--ink);
         letter-spacing:var(--tight);font-weight:700}
.rows .d{grid-column:2;color:var(--dim);font-size:14px;line-height:1.5}
.rows .p{font-family:var(--mono);font-size:11.5px;color:var(--dim);
         white-space:nowrap}

.htable{width:100%;border-collapse:collapse;font-size:14.5px}
.htable caption{text-align:left;color:var(--dim);padding-bottom:12px;
                font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
                text-transform:uppercase}
.htable th,.htable td{text-align:left;padding:12px 16px 12px 0;
                      border-bottom:1px solid var(--rule);vertical-align:top}
.htable th{color:var(--dim);font-weight:500;font-family:var(--mono);
           font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}
.htable td:first-child{color:var(--ink);white-space:nowrap}
.scroll-x{overflow-x:auto}

.faq details{border-bottom:1px solid var(--rule)}
.faq summary{padding:18px 2px;cursor:pointer;font-family:var(--display);
             font-size:17px;color:var(--ink);letter-spacing:var(--tight);
             list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--dim);font-family:var(--mono)}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--accent)}
.faq .a{padding:0 2px 20px;max-width:64ch;color:var(--body-c);line-height:1.68}
.faq .a p{margin:0 0 12px}

/* free-sample link on a book page */
.free{display:inline-flex;align-items:center;gap:9px;margin-top:14px;
      padding:13px 16px;width:100%;justify-content:center;
      border:1px solid var(--accent);color:var(--ink);text-decoration:none;
      font-family:var(--mono);font-size:11px;letter-spacing:.14em;
      text-transform:uppercase;transition:background .2s}
.free:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}

.pagenav{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
         border-top:1px solid var(--rule);margin-top:44px;padding-top:20px}
.pagenav a{color:var(--dim);text-decoration:none;font-size:14px;max-width:46%}
.pagenav a:hover{color:var(--ink)}
.pagenav b{display:block;font-family:var(--display);color:var(--ink);
           font-size:16px;letter-spacing:var(--tight);margin-top:3px}
.pagenav .next{text-align:right;margin-left:auto}

.section-head{margin:0 0 18px}
.section-head h2{margin:0 0 8px;font-family:var(--display);font-weight:700;
                 font-size:clamp(21px,2.8vw,30px);color:var(--ink);
                 letter-spacing:var(--tight)}
.section-head p{margin:0;color:var(--dim);max-width:62ch;line-height:1.6}
.block{padding-bottom:clamp(38px,6vh,68px)}

/* keyboard first stop on every page */
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;
      background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-size:12px;
      letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}

/* Shown on every page while the storefront gate has cleared nothing. It is a
   standing condition, not an error, so it is quiet: a hairline rule, the body
   face, and the same measure as the content it sits above. */
.notsale{margin:0;padding:11px 22px;background:var(--paper-2,var(--paper));
         border-bottom:1px solid var(--rule);color:var(--dim);
         font-size:13.5px;line-height:1.5;text-align:center}
.notsale::before{content:"";display:inline-block;width:7px;height:7px;
         margin-right:9px;vertical-align:middle;border-radius:50%;
         background:var(--accent)}
@media (max-width:640px){.notsale{padding:10px 16px;font-size:12.5px;text-align:left}}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--ink)}
.card{text-decoration:none}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}
.v-foot a{text-decoration:none}
.v-foot a:hover{color:var(--press-type)}
.series-head h2 a:hover{color:var(--accent)}
.rows a .t{transition:color .2s}
.rows a:hover .t{color:var(--accent)}

/* Reading and reference pages are one column: breadcrumb, heading, prose and
   chapter all share a left edge instead of drifting apart across 1400px. */
.wrap.doc{max-width:1040px}
.wrap.doc .prose,.wrap.doc .chapter,.wrap.doc .sample-end{margin-inline:0}
.wrap.doc .ch-title,.wrap.doc .ch-num{text-align:left}
.wrap.doc .chapter .ch-num{margin-bottom:26px}

/* =========================================================== generated places
   The covers carry the people; these carry the weather. Every one is faded
   into the page ground so it reads as the page's own light, not a pasted
   rectangle sitting on top of it. */
.banner{position:relative;margin:0 0 30px;overflow:hidden;border:0;
        aspect-ratio:21/9;max-height:min(46vh,420px)}
.banner img{display:block;width:100%;height:100%;object-fit:cover}
/* Only the bottom edge is washed into the page, so the picture meets the prose
   without a seam and the other three quarters of it stay a picture. */
.banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--paper) 0%,
             color-mix(in srgb,var(--paper) 40%,transparent) 18%,transparent 44%)}
@media (max-width:640px){.banner{aspect-ratio:16/9;max-height:34vh}}

/* On a pen page the series name IS the place: one linked block per series,
   its own weather behind it, the way into that series' hub. */
/* width must be definite: with only min-height and an aspect-ratio the browser
   solves the ratio the other way and derives width from height (210 x 2.4 = 504),
   which overflows a 390px viewport by 134px. */
.series-hero{position:relative;display:block;width:100%;overflow:hidden;
  text-decoration:none;
  margin:0 0 20px;aspect-ratio:2.9/1;min-height:240px;border:1px solid var(--rule);
  transition:border-color .3s var(--ease)}
.series-hero img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;opacity:1;
  transition:opacity .5s var(--ease),transform .9s var(--ease)}
.series-hero:hover{border-color:var(--accent)}
.series-hero:hover img{opacity:.92;transform:scale(1.03)}
/* The name sits bottom-left, so the scrim is heaviest there and clears
   completely by the top-right corner. */
.series-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right,var(--paper) 2%,
             color-mix(in srgb,var(--paper) 72%,transparent) 26%,
             color-mix(in srgb,var(--paper) 18%,transparent) 58%,transparent 82%)}
.series-hero .inner{position:relative;z-index:1;height:100%;padding:24px 26px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:9px}
.series-hero h2{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(22px,3.1vw,36px);color:var(--ink);letter-spacing:var(--tight)}
.series-hero .meta{color:var(--dim);font-family:var(--mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase}
@media (max-width:640px){.series-hero{aspect-ratio:2.4/1}}

/* the way back to a series from the foot of a book page */
.more{position:relative;display:block;width:100%;overflow:hidden;text-decoration:none;
      border:1px solid var(--rule);margin-top:44px;aspect-ratio:6/1;
      min-height:130px;transition:border-color .3s var(--ease)}
.more img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
          opacity:.88;transition:opacity .5s var(--ease),transform .8s var(--ease)}
.more:hover{border-color:var(--accent)}
.more:hover img{opacity:.7;transform:scale(1.04)}
.more::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,var(--paper) 6%,
             color-mix(in srgb,var(--paper) 45%,transparent) 62%,transparent)}
.more-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
         justify-content:center;gap:6px;padding:22px 26px}
.more-in b{font-family:var(--display);font-size:clamp(18px,2.4vw,26px);
           color:var(--ink);letter-spacing:var(--tight)}

/* the press floor, behind the house's own front page */
.v-art{position:absolute;inset:0 0 auto;height:70%;overflow:hidden;z-index:0}
.v-art img{width:100%;height:100%;object-fit:cover;opacity:.58}
/* Clear at the top, solid where the headline lands. */
.v-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
             color-mix(in srgb,var(--press) 20%,transparent) 0%,
             color-mix(in srgb,var(--press) 62%,transparent) 34%,
             color-mix(in srgb,var(--press) 88%,transparent) 62%,
             var(--press) 94%)}
.v{position:relative}
.v-bar,.v-lede,.doors,.v-foot{position:relative;z-index:1}

/* covers earn their place in a list, not just a grid */
.rows a.with-art{grid-template-columns:auto auto 1fr auto}
.rows .thumb{grid-row:span 2;width:52px;aspect-ratio:1600/2560;object-fit:cover;
             border:1px solid var(--rule);align-self:start}
.rows a.with-art .d{grid-column:3}
@media (max-width:560px){
  .rows a,.rows a.with-art{grid-template-columns:auto 1fr}
  .rows .thumb{display:none}
  .rows a.with-art .d,.rows .d{grid-column:2}
}


/* ================================================== shop, ladder and the till
   Everything below serves a page the SPA build did not have. */

.shop-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:16px 0 26px;border-bottom:1px solid var(--rule);margin-bottom:30px}
.shop-controls .mono{color:var(--dim);margin-right:6px}
.filter{padding:7px 13px;border:1px solid var(--rule);border-radius:999px;
  background:none;color:var(--body-c);font-size:13px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.filter:hover{border-color:var(--accent);color:var(--ink)}
.filter[aria-pressed="true"]{border-color:var(--accent);color:var(--on-accent);
  background:var(--accent)}
.card[hidden]{display:none}
.shop-empty{padding:40px 0;color:var(--dim)}

.ladder{width:100%;border-collapse:collapse;font-size:14.5px;
  font-variant-numeric:tabular-nums}
.ladder th,.ladder td{text-align:left;padding:12px 18px 12px 0;
  border-bottom:1px solid var(--rule);vertical-align:top}
.ladder th{color:var(--dim);font-weight:500;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}
.ladder td:first-child{color:var(--ink);white-space:nowrap}
.ladder .num{font-family:var(--mono);color:var(--ink);white-space:nowrap}

/* the cart page and the order summary */
.order{display:grid;gap:clamp(24px,4vw,52px);
  grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);align-items:start}
@media (max-width:820px){.order{grid-template-columns:1fr}}
.order-lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.order-lines li{display:grid;gap:16px;grid-template-columns:64px 1fr auto;
  padding:18px 0;border-bottom:1px solid var(--rule);align-items:start}
.order-lines img{width:64px;aspect-ratio:1600/2560;object-fit:cover;
  border:1px solid var(--rule)}
.order-t{font-family:var(--display);font-size:16px;color:var(--ink);
  letter-spacing:var(--tight);line-height:1.25}
.order-e{color:var(--dim);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;margin-top:5px}
.order-p{font-family:var(--mono);font-size:14px;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.order-side{border:1px solid var(--rule);background:var(--paper-2);padding:22px}
.order-side h2{margin:0 0 16px;font-family:var(--display);font-size:19px;
  color:var(--ink);letter-spacing:var(--tight)}
.field{display:block;margin-bottom:16px}
.field span{display:block;color:var(--dim);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:7px}
.field select{width:100%;padding:11px 12px;background:var(--paper);
  color:var(--body-c);border:1px solid var(--rule);font:inherit;font-size:14px}
.field select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tier-note{margin:14px 0 0;padding:11px 13px;border-left:2px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  font-size:12.5px;line-height:1.55;color:var(--body-c)}

.setcard{display:grid;gap:22px;grid-template-columns:auto minmax(0,1fr);
  align-items:center;border:1px solid var(--rule);background:var(--paper-2);
  padding:22px;margin-bottom:18px}
.setcard .spines{display:flex}
.setcard .spines img{width:44px;aspect-ratio:1600/2560;object-fit:cover;
  border:1px solid var(--rule);margin-left:-14px;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.setcard .spines img:first-child{margin-left:0}
.setcard h2{margin:0 0 6px;font-family:var(--display);font-size:20px;
  color:var(--ink);letter-spacing:var(--tight)}
.setcard p{margin:0 0 12px;color:var(--dim);font-size:14px;line-height:1.5}
.setcard .price{font-family:var(--mono);color:var(--ink);font-size:15px;
  font-variant-numeric:tabular-nums}
.setcard .was{color:var(--dim);text-decoration:line-through;margin-left:8px;
  font-size:13px}
@media (max-width:620px){.setcard{grid-template-columns:1fr}}

.notice{border:1px solid var(--accent);padding:16px 18px;margin:0 0 26px;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  font-size:14px;line-height:1.6}
.notice b{color:var(--ink)}


/* ------------------------------------------------------------------ controls
   `--rule` is a hairline: it separates things and carries no meaning, so the
   3:1 non-text floor does not reach it. `--edge` is for a border that is the
   ONLY indicator of an interactive control, and it is solved to 3:1 against
   that world's paper. site_audit.py checks it. */
.filter{border-color:var(--edge)}
.field select{border-color:var(--edge)}
.qty{border-color:var(--edge)}