/* =========================================================================
   ePORTS — WORKBENCH (brand look A, chosen by Femi 2026-10-19)
   =========================================================================
   The v0 layer of the redesign. Pages opt in by linking this file INSTEAD of
   resources.css; nothing else on the site changes until it is moved over on
   purpose. First page on it: /privacy/. The design-system pass grows this
   file into the full component set and mirrors it into the ePORTS Design
   System project — keep the two in step.

   Feeling: warm, capable, real — a friend who has done it, with the numbers
   on the table. Products first, decoration second.

   Rules that travel with these values:
   - ONE marigold moment per screen (the primary button, or one hand-drawn
     mark). Never a marigold field.
   - Hand-drawn marks (underline, arrow, note) are decoration: aria-hidden,
     never the only carrier of meaning.
   - Reading text is Figtree at >=17px. Bricolage Grotesque is display only.
   - Contrast checked with scripts/check_contrast.py (2026-10-19):
     ink 12.2:1, muted 5.9:1, link 5.6:1 on --paper; CTA text 6.1:1 on
     --marigold; cream 12.6:1 and mist 9.6:1 on --bench.
   ========================================================================= */
:root{
  /* light reading field */
  --paper:#F2EFE8;     /* the desk */
  --sheet:#FFFDF8;     /* paper on the desk: cards, panels */
  --ink:#16302D;       /* text + dark bands */
  --muted:#4A5F5C;     /* secondary text */
  --rule:#DCD5C7;      /* hairlines */
  --teal:#0F6B5F;      /* links, ticks, checked badges */
  --teal-soft:#E1EEEA; /* tinted panels */
  --marigold:#E8742C;  /* the one warm accent (fills only) */
  --marker:#C2531A;    /* hand-drawn marks; large/decorative only */
  --marker-text:#9A4413;/* if a marker colour ever carries words */
  /* dark band */
  --bench:#16302D; --cream:#F5F2EA; --mist:#C9D9D4; --glow:#F2A65A;

  --f-display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --f-body:"Figtree","Segoe UI",system-ui,sans-serif;

  --step--1:.9rem; --step-0:1.0625rem; --step-1:1.25rem; --step-2:1.6rem; --step-3:2.2rem; --step-4:clamp(2.4rem,6vw,3.6rem);
  --gap:clamp(1rem,2.5vw,1.5rem);
  --radius:12px;
  --shadow:0 1px 0 rgba(22,48,45,.06),0 8px 22px -12px rgba(22,48,45,.28);
  --measure:68ch;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-0)/1.65 var(--f-body)}
img{max-width:100%;height:auto}
a{color:var(--teal);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-family:var(--f-display);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin:0;color:inherit}
h1{font-size:var(--step-4);font-weight:800;letter-spacing:-.035em}
h2{font-size:var(--step-3);font-weight:800}
h3{font-size:var(--step-1);font-weight:700;letter-spacing:-.01em}
p{margin:0}
.wb-wrap{max-width:72rem;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.wb-read{max-width:var(--measure)}
.wb-skip{position:absolute;left:-999px;top:0;background:var(--sheet);padding:.6rem 1rem;z-index:10}
.wb-skip:focus{left:1rem;top:1rem}
/* skip-link target: takes focus (tabindex=-1) without drawing a ring round the whole page */
main[tabindex="-1"]:focus{outline:none}
/* visually hidden, still read by screen readers (keeps the heading outline h1 > h2 > h3) */
.wb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- site header ----
   LIGHT on purpose (Femi, 2026-10-19): a dark top bar + orange button reads as Amazon's signature.
   The dark green lives only in the hero band below, never as a thin top bar. */
.wb-head{background:var(--sheet);color:var(--ink);border-bottom:1px solid var(--rule)}
.wb-head .wb-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem}
.wb-mark{font:800 1.2rem/1 var(--f-display);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.wb-foot .wb-mark{color:var(--cream)}
.wb-nav{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;font-size:.95rem}
.wb-nav a{color:var(--muted);text-decoration:none;font-weight:600}
.wb-nav a:hover,.wb-nav a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--marigold);text-decoration-thickness:2px}

/* ---- hero band ---- */
.wb-hero{background:var(--bench);color:var(--cream);padding-block:2.4rem 3.6rem;position:relative;overflow:hidden}
.wb-hero .wb-wrap{display:grid;gap:1.1rem}
.wb-eyebrow{font:600 .8rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.wb-hero p.wb-lede{font-size:var(--step-1);line-height:1.55;color:var(--mist);max-width:40rem}
.wb-hero p.wb-lede em{color:var(--cream);font-style:normal;font-weight:600}
/* hand-drawn underline under one word */
.wb-scribble{position:relative;white-space:nowrap}
.wb-scribble svg{position:absolute;left:-2%;bottom:-.28em;width:104%;height:.42em;overflow:visible}
/* ONE marigold moment per screen: on the dark hero the button is it, so the underline goes mint */
.wb-scribble path{fill:none;stroke:var(--marigold);stroke-width:3.4;stroke-linecap:round}
.wb-hero .wb-scribble path{stroke:#6FCDB9}

/* ---- "checked" date badge ---- */
.wb-checked{display:inline-flex;align-items:center;gap:.45rem;font:600 .85rem/1 var(--f-body);color:var(--teal);background:var(--teal-soft);border:1px solid #BFDAD2;border-radius:999px;padding:.45rem .8rem .45rem .6rem;justify-self:start}
.wb-checked svg{width:1rem;height:1rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wb-hero .wb-checked{color:var(--bench);background:var(--mist);border-color:var(--mist)}

/* ---- sections ---- */
.wb-main{padding-block:0 3.5rem}
/* minmax(0,1fr): without it the implicit column sizes to its widest child (e.g. a 3-col auto-fit
   grid) and the page scrolls sideways on phones. Measured 784px at a 320px viewport before this. */
.wb-section{padding-block:clamp(2.2rem,5vw,3.4rem);border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem}
.wb-section > header{display:grid;gap:.55rem;max-width:var(--measure)}
.wb-kicker{font:700 .78rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wb-kicker-gap{margin-bottom:.5rem}
.wb-prose{display:grid;gap:1rem;max-width:var(--measure)}

/* ---- at-a-glance cards (pulled up into the hero's lower edge) ---- */
.wb-glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:var(--gap);margin-top:-2.2rem;position:relative}
.wb-card{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.15rem 1.2rem 1.25rem;display:grid;gap:.5rem;align-content:start;min-width:0}
.wb-card .wb-ico{width:2.4rem;height:2.4rem;border-radius:10px;background:var(--teal-soft);display:grid;place-items:center}
.wb-card .wb-ico svg{width:1.4rem;height:1.4rem;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wb-card h3{font-size:1.12rem}
.wb-card p{color:var(--muted);font-size:.98rem;line-height:1.55}

/* ---- term rows: a bold term on the left, the plain-English answer on the right ---- */
.wb-terms{display:grid;margin:0;border-top:1px solid var(--rule)}
.wb-terms > div{display:grid;grid-template-columns:minmax(10rem,15rem) minmax(0,1fr);gap:.4rem 2rem;padding-block:1.1rem;border-bottom:1px solid var(--rule)}
.wb-terms dt{font:700 1.05rem/1.4 var(--f-display);letter-spacing:-.005em}
.wb-terms dd{margin:0;max-width:var(--measure)}
@media (max-width:640px){.wb-terms > div{grid-template-columns:1fr}}

/* ---- the "who we are" card ---- */
.wb-who{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;align-items:start;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem 1.5rem;max-width:46rem}
.wb-who .wb-ico{width:3rem;height:3rem;border-radius:12px;background:var(--bench);display:grid;place-items:center}
.wb-who .wb-ico svg{width:1.6rem;height:1.6rem;fill:none;stroke:var(--glow);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wb-who address{font-style:normal;display:grid;gap:.2rem}
.wb-who .wb-co{font:800 1.25rem/1.2 var(--f-display)}
.wb-who p{color:var(--muted);font-size:.98rem;margin-top:.6rem}

/* ---- rights checklist ---- */
.wb-ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem 1.4rem;max-width:52rem}
.wb-ticks li{display:grid;grid-template-columns:1.5rem 1fr;gap:.6rem;align-items:start}
.wb-ticks svg{width:1.3rem;height:1.3rem;margin-top:.2rem;fill:none;stroke:var(--teal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- callout / note ---- */
.wb-note{background:var(--teal-soft);border-radius:var(--radius);padding:1.1rem 1.25rem;max-width:var(--measure);display:grid;gap:.35rem}
.wb-fine{font-size:var(--step--1);color:var(--muted);max-width:var(--measure)}

/* ---- footer ---- */
.wb-foot{background:var(--bench);color:var(--mist);padding-block:2.2rem;font-size:.95rem}
.wb-foot .wb-wrap{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;align-items:center}
.wb-foot a{color:var(--cream)}
.wb-foot .wb-mark{font-size:1.05rem}
.wb-foot nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.wb-head,.wb-foot{background:none;color:#000}.wb-hero{background:none;color:#000}.wb-card,.wb-who{box-shadow:none}}

/* =========================================================================
   COMPONENTS (design-system pass, 2026-10-19). Reference page: site/_design/
   (underscore = never deployed). Each block names where it is meant to appear.
   ========================================================================= */

/* ---- buttons: ONE primary per screen ---- */
.wb-btn{display:inline-flex;align-items:center;gap:.5rem;font:700 1rem/1 var(--f-body);text-decoration:none;
  padding:.95rem 1.35rem;border-radius:10px;background:var(--marigold);color:#1B1208;border:2px solid var(--marigold);
  box-shadow:0 2px 0 #B85A1F;transition:transform .12s ease,box-shadow .12s ease}
.wb-btn:hover{transform:translateY(-1px);box-shadow:0 3px 0 #B85A1F;text-decoration:none}
.wb-btn:active{transform:translateY(1px);box-shadow:0 1px 0 #B85A1F}
.wb-btn-quiet{display:inline-flex;align-items:center;gap:.4rem;font:700 1rem/1 var(--f-body);color:var(--ink);
  text-decoration:none;padding:.95rem .2rem;border-bottom:2px solid var(--rule)}
.wb-btn-quiet:hover{border-color:var(--teal);color:var(--teal)}
.wb-hero .wb-btn-quiet{color:var(--cream);border-color:#3D5A56}
.wb-actions{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center}

/* ---- book-stack hero: real covers on the desk + a hand-written note.
   Homepage and each subject page. Swap the <img>s for Blender renders later. ---- */
.wb-hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:2rem;align-items:center}
@media (max-width:820px){.wb-hero-split{grid-template-columns:1fr}}
.wb-stack{position:relative;aspect-ratio:30/28;max-width:30rem;width:100%;justify-self:center}
.wb-stack img{position:absolute;width:40%;border-radius:4px;box-shadow:0 18px 34px -10px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.25)}
.wb-stack img:nth-of-type(1){left:4%;top:10%;transform:rotate(-7deg)}
.wb-stack img:nth-of-type(2){left:28%;top:3%;transform:rotate(1.5deg);z-index:2}
.wb-stack img:nth-of-type(3){left:52%;top:12%;transform:rotate(8deg)}
.wb-stack .wb-handnote{position:absolute;left:2%;bottom:0;z-index:3}
.wb-handnote{font:600 1.35rem/1.1 "Caveat","Segoe Print","Bradley Hand",cursive;color:var(--mist);transform:rotate(-4deg);display:inline-flex;align-items:flex-end;gap:.3rem}
.wb-handnote svg{width:3.2rem;height:2.4rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---- subject (lane) cards: homepage grid + menu. --lane = the subject's cover hue ---- */
.wb-lanes{display:grid;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));gap:var(--gap)}
@media (min-width:1060px){.wb-lanes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.wb-lane{position:relative;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);
  display:grid;grid-template-rows:auto 1fr;overflow:hidden;min-width:0;transition:transform .15s ease,box-shadow .15s ease}
.wb-lane:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(22,48,45,.06),0 16px 30px -14px rgba(22,48,45,.4)}
.wb-lane .wb-lane-art{background:var(--lane,#1F4A44);height:9.5rem;position:relative;overflow:hidden}
.wb-lane .wb-lane-art img{position:absolute;bottom:-2.6rem;width:5.6rem;border-radius:3px;box-shadow:0 10px 18px -6px rgba(0,0,0,.6)}
.wb-lane .wb-lane-art img:nth-child(1){left:12%;transform:rotate(-8deg)}
.wb-lane .wb-lane-art img:nth-child(2){left:36%;bottom:-1.6rem;z-index:2}
.wb-lane .wb-lane-art img:nth-child(3){left:60%;transform:rotate(8deg)}
.wb-lane-body{padding:1.1rem 1.2rem 1.25rem;display:grid;gap:.5rem;align-content:start}
.wb-lane h3 a{color:var(--ink);text-decoration:none}
.wb-lane h3 a::after{content:"";position:absolute;inset:0}
.wb-lane p{color:var(--muted);font-size:.97rem;line-height:1.5}
.wb-lane .wb-meta{font:600 .85rem/1.3 var(--f-body);color:var(--teal);margin-top:.2rem}

/* ---- three-level shelf + set: each subject page ---- */
.wb-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
@media (max-width:980px){.wb-shelf{grid-template-columns:1fr}}
.wb-book{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1.2rem;display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;align-content:start;min-width:0}
.wb-book img{width:6.5rem;border-radius:3px;box-shadow:0 8px 16px -6px rgba(0,0,0,.45)}
.wb-level{font:700 .76rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.wb-book h3{font-size:1.08rem;margin:.35rem 0 .45rem}
.wb-book p{font-size:.95rem;color:var(--muted);line-height:1.5}
.wb-price{font:800 1.35rem/1 var(--f-display)}
.wb-book .wb-buy{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--rule);padding-top:.9rem}
.wb-book .wb-buy a{font-weight:700}
.wb-set{grid-column:1/-1;background:var(--bench);color:var(--cream);border-radius:var(--radius);padding:1.4rem;
  display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:1.6rem;align-items:center}
.wb-set img{width:100%;border-radius:4px;box-shadow:0 14px 28px -10px rgba(0,0,0,.6)}
.wb-set > div{display:grid;gap:.7rem}
.wb-set p{color:var(--mist)}
.wb-set .wb-price{font-size:1.8rem;color:var(--cream)}
.wb-set .wb-save{color:var(--glow);font-weight:700}
@media (max-width:700px){.wb-set{grid-template-columns:1fr}}

/* ---- calculator preview: a worked example shown before the click. Subject pages, tools hub ---- */
.wb-calc{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1.5rem 1.4rem 1.3rem;display:grid;gap:.9rem;max-width:30rem;position:relative;min-width:0}
.wb-calc table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.wb-calc th{font-weight:400;text-align:left}
.wb-calc th,.wb-calc td{padding:.42rem 0;border-bottom:1px dashed var(--rule)}
.wb-calc td{text-align:right;font-weight:600}
.wb-calc tr.wb-total th,.wb-calc tr.wb-total td{border-bottom:0;border-top:2px solid var(--ink);padding-top:.6rem;font:800 1.15rem/1.2 var(--f-display)}
.wb-calc .wb-warn{font-size:.93rem;color:var(--marker-text);background:#FBEADF;border-radius:8px;padding:.6rem .8rem}
.wb-calc .wb-ex{position:absolute;top:-.75rem;left:1.2rem;font:700 .7rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--cream);padding:.38rem .55rem;border-radius:5px}

/* ---- worksheet fan: the free downloads shown as paper. Resource hubs + subject pages ---- */
/* sizes in % so the fan scales down on phones instead of running off the edge */
.wb-fan{position:relative;aspect-ratio:24/16;max-width:24rem;width:100%}
.wb-ws{position:absolute;top:3%;width:44%;aspect-ratio:11/14;background:var(--sheet);border:1px solid var(--rule);border-radius:4px;
  box-shadow:0 10px 20px -10px rgba(22,48,45,.45);padding:.85rem .8rem;display:grid;gap:.38rem;align-content:start;transform-origin:bottom center}
.wb-ws b{font:700 .72rem/1.25 var(--f-body);letter-spacing:.04em;color:var(--teal);text-transform:uppercase;margin-bottom:.2rem}
.wb-ws i{display:block;height:.32rem;border-radius:2px;background:#E4DED1}
.wb-ws i.s{width:60%}
.wb-ws.wb-grid i{height:.6rem;background:repeating-linear-gradient(90deg,#E4DED1 0 30%,transparent 30% 34%)}
.wb-fan .wb-ws:nth-child(1){left:0;transform:rotate(-10deg)}
.wb-fan .wb-ws:nth-child(2){left:28%;transform:rotate(-2deg);z-index:2}
.wb-fan .wb-ws:nth-child(3){left:52%;transform:rotate(7deg);z-index:3}
.wb-count{position:absolute;right:0;bottom:0;z-index:4;background:var(--marigold);color:#1B1208;font:800 .95rem/1 var(--f-display);
  padding:.6rem .8rem;border-radius:999px;transform:rotate(-5deg)}

/* ---- "what changed / what we re-checked". Homepage + resource pages ---- */
.wb-changes{list-style:none;margin:0;padding:0;display:grid;max-width:52rem;border-top:1px solid var(--rule)}
.wb-changes li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.4rem 1.4rem;padding-block:1rem;border-bottom:1px solid var(--rule)}
.wb-state{font:700 .74rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;padding:.42rem .55rem;border-radius:6px;justify-self:start;align-self:start}
.wb-state.same{background:var(--teal-soft);color:var(--teal)}
.wb-state.changed{background:#FBEADF;color:var(--marker-text);border:1px solid #F0C9AE}
.wb-was{text-decoration:line-through;color:var(--muted)}
.wb-changes small{display:block;color:var(--muted);font-size:.88rem;margin-top:.25rem}
@media (max-width:560px){.wb-changes li{grid-template-columns:1fr}}

/* ---- article layout (after launch): reading column + related-book box ---- */
.wb-article{max-width:42rem;display:grid;gap:1.1rem;font-size:1.125rem;line-height:1.7}
.wb-byline{color:var(--muted);font-size:.95rem;display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center}
.wb-related{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;align-items:center;background:var(--sheet);
  border:1px solid var(--rule);border-left:4px solid var(--marigold);border-radius:var(--radius);padding:1rem 1.1rem}
.wb-related img{width:5.5rem;border-radius:3px}
.wb-related p{font-size:1rem;line-height:1.5}

/* ---- 3D render hero (scripts/render_books.py: transparent WebP of the real covers) ---- */
.wb-render{margin:0;position:relative;justify-self:center;width:100%;max-width:44rem;isolation:isolate}
.wb-render img{display:block;width:100%;height:auto;position:relative}
/* warm spotlight behind dark books on the dark band, so their edges read */
.wb-hero .wb-render::before{content:"";position:absolute;inset:-6% -4% 2%;z-index:-1;
  background:radial-gradient(ellipse 60% 55% at 50% 48%,rgba(242,166,90,.36),rgba(242,166,90,.10) 55%,transparent 72%)}
.wb-render .wb-handnote{position:absolute;left:4%;bottom:2%}
.wb-render-single{display:block;width:100%;max-width:20rem;height:auto;justify-self:center}

/* =========================================================================
   PAGE PATTERNS (homepage + lane pages, 2026-10-19)
   ========================================================================= */

/* subject card art = the lane's 3D trio render, on the lane's cover hue */
.wb-lane-art.wb-art-render{height:auto;aspect-ratio:16/8.4;display:grid;place-items:end center;
  background:radial-gradient(ellipse 70% 70% at 50% 60%,rgba(255,255,255,.10),transparent 70%),var(--lane,#1F4A44)}
.wb-lane-art.wb-art-render img{position:static;width:96%;height:auto;box-shadow:none;border-radius:0;transform:none;margin-bottom:-2%}

/* the three questions: a real sequence, so real numbers */
.wb-q{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--gap);counter-reset:q}
.wb-q li{counter-increment:q;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1.3rem 1.3rem 1.4rem;display:grid;gap:.45rem;align-content:start}
.wb-q li::before{content:counter(q);font:800 2.4rem/1 var(--f-display);color:var(--teal)}
.wb-q strong{font:700 1.12rem/1.3 var(--f-display);letter-spacing:-.01em}
.wb-q span{color:var(--muted);font-size:.98rem;line-height:1.55}

/* generic two-column split: picture + words */
.wb-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.wb-split.wb-flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.wb-split > div{display:grid;gap:1rem;min-width:0}
.wb-split img{width:100%;height:auto;max-width:22rem;justify-self:center;display:block}
@media (max-width:760px){.wb-split,.wb-split.wb-flip{grid-template-columns:minmax(0,1fr)}.wb-split img{max-width:15rem}}

/* status pill: plain words, never urgency */
.wb-status{display:inline-flex;align-items:center;gap:.4rem;font:700 .78rem/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:#E8E3D8;border-radius:999px;padding:.45rem .7rem;justify-self:start}

/* a book in full: render | words. Lane pages, one row per level */
.wb-bookrow{display:grid;grid-template-columns:minmax(9rem,15rem) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:start;
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(1.1rem,3vw,1.8rem)}
.wb-bookrow > img{width:100%;height:auto;display:block}
.wb-bookrow > div{display:grid;gap:.8rem;min-width:0}
.wb-bookrow h3{font-size:clamp(1.3rem,2.6vw,1.6rem);line-height:1.15}
.wb-bookrow .wb-for{display:grid;gap:.5rem}
.wb-bookrow .wb-for p{max-width:var(--measure)}
.wb-bookrow .wb-comes{font-size:.95rem;color:var(--muted);max-width:var(--measure);border-top:1px dashed var(--rule);padding-top:.8rem}
.wb-bookrow .wb-buyline{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center}
@media (max-width:640px){.wb-bookrow{grid-template-columns:1fr}.wb-bookrow > img{max-width:13rem;justify-self:center}}
.wb-books{display:grid;gap:var(--gap)}

/* lede paragraph in a reading column */
.wb-lede-block{font-size:var(--step-1);line-height:1.6;max-width:var(--measure)}
.wb-lede-block em{font-style:normal;font-weight:600}

/* level picker: the three books side by side ABOVE the detail rows (levels, not steps) */
.wb-pick{text-decoration:none;color:inherit;grid-template-columns:5.2rem minmax(0,1fr);transition:transform .15s ease,box-shadow .15s ease}
.wb-pick img{width:5.2rem}
.wb-pick h3{font-size:1.05rem;margin:.4rem 0 .35rem}
.wb-pick:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(22,48,45,.06),0 16px 30px -14px rgba(22,48,45,.4)}
.wb-pick .wb-buy{font-weight:700;color:var(--teal)}
.wb-shelf + .wb-books{margin-top:.6rem}

/* lane pages: the lane's own free calculators as cards (scripts/build_lane_pages.py) */
.wb-toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:var(--gap)}
.wb-toolcard{text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.wb-toolcard:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(22,48,45,.06),0 16px 30px -14px rgba(22,48,45,.4)}
.wb-toolcard h3{font-size:1.05rem}
.wb-toolcard .wb-meta{font:600 .85rem/1.3 var(--f-body);color:var(--teal)}

/* shop open (2026-10-20): price + buy button under each book, and the set's price line (scripts/shop.py) */
.wb-buyline .wb-price{font-size:1.35rem}
.wb-buyline .wb-btn{padding:.8rem 1.15rem}
.wb-setbuy{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline}
/* the fan's tilted right-hand sheet poked 8–14px past a 320px screen (Etsy, 2026-10-20): leave it room */
@media (max-width:480px){.wb-fan{width:90%;justify-self:start}}