@import url(https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@700&family=IM+Fell+English:ital@1&family=Alegreya+SC:wght@500;700&family=Alegreya:ital,wght@0,400;0,700;1,400&display=swap);:root{--vellum:#ede0c0;--vellum-light:#f5ecd6;--vellum-deep:#dfcc9e;--umber:#2a2219;--umber-2:#55463a;--indigo:#27395c;--indigo-deep:#1b2742;--madder:#9c3b2e;--madder-d:#86301f;--leaf:#4a6b3a;--leaf-d:#3b5a2c;--ochre:#c9952b;--ochre-d:#7a5210;--on-indigo:var(--vellum-light);--on-indigo-deep:var(--vellum);--on-indigo-mut:#d8c79c;--on-madder:var(--vellum-light);--on-leaf:var(--vellum-light);--on-ochre:var(--umber);--on-vellum-deep:var(--umber);--bg-page:var(--vellum);--bg-raised:var(--vellum-light);--bg-sunk:var(--vellum-deep);--fg:var(--umber);--fg-mut:var(--umber-2);--link:var(--indigo);--link-hover:var(--madder-d);--line:var(--umber);--line-soft:#c9b382;--focus:var(--madder-d);--chip-bg:var(--vellum-deep);--display:'Grenze Gotisch','Old English Text MT','Lucida Blackletter',Georgia,serif;--accent:'IM Fell English','Palatino Linotype','Book Antiqua',Georgia,serif;--caps:'Alegreya SC','Palatino Linotype',Georgia,serif;--font:'Alegreya','Palatino Linotype','Book Antiqua',Georgia,serif;--fw-display:700;--fw-bold:700;--fs-xs:.9rem;--fs-sm:.95rem;--fs-body:1.09375rem;--fs-lg:1.2rem;--fs-xl:1.4rem;--fs-h3:clamp(1.2rem, 1.7vw, 1.4rem);--fs-h2:clamp(2rem, 3.4vw, 2.7rem);--fs-h1:clamp(2.2rem, 5vw, 3.9rem);--fs-mega:clamp(4rem, 16vw, 10rem);--lh-display:1.08;--lh-snug:1.3;--lh-body:1.7;--lh-loose:1.82;--track-caps:.06em;--track-ribbon:.14em;--measure:66ch;--ca-space-1:4px;--ca-space-2:8px;--ca-space-3:12px;--ca-space-4:18px;--ca-space-5:26px;--ca-space-6:36px;--ca-space-7:52px;--ca-space-8:76px;--ca-space-9:104px;--r-xs:2px;--r-sm:3px;--r:4px;--r-lg:6px;--r-pill:999px;--bw-hair:1.5px;--bw:2px;--bw-thick:3px;--bw-slab:5px;--pop-sm:2px 2px 0 var(--umber);--pop:2px 2px 0 var(--umber), 2px 2px 0 1px var(--ochre);--pop-lg:3px 3px 0 var(--umber), 3px 3px 0 1px var(--ochre);--pop-xl:var(--pop-lg);--pop-in:1px 1px 0 var(--umber);--t-fast:.12s;--t:.22s;--t-slow:.4s;--ease:cubic-bezier(.2,.7,.3,1);--ease-out:cubic-bezier(.16,1,.3,1);--container:1200px;--gutter:26px;--nav-h:76px;--edge-h:14px;--m-fleuron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 11.6C6 11.6 1 8 1 4.6 1 2.6 2.5 1.4 4 1.4c1 0 1.6.6 2 1.4.4-.8 1-1.4 2-1.4 1.5 0 3 1.2 3 3.2C11 8 6 11.6 6 11.6z'/><path d='M5.4 0h1.2v2.2H5.4z'/></svg>");
  --m-fleuron-rule: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 14'><path d='M2 7c4-4.2 10-4.2 14 0-4 4.2-10 4.2-14 0z'/><path d='M23 1.5l5.5 5.5-5.5 5.5-5.5-5.5z'/><path d='M30 7c4-4.2 10-4.2 14 0-4 4.2-10 4.2-14 0z'/><path d='M16.5 6.4h3v1.2h-3zM26.5 6.4h3v1.2h-3z'/></svg>");
  --m-vine: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10'><path d='M0 5c4-4 8-4 12 0s8 4 12 0 3-1 4 0' fill='none' stroke='%23000' stroke-width='1.4'/><path d='M5.5 5c1.2-3.2 4.3-3.2 5.5 0-1.2 3.2-4.3 3.2-5.5 0z'/><circle cx='20' cy='6.6' r='1.9'/></svg>");
  --m-vine-v: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 28'><g transform='rotate(90 5 5)'><path d='M0 5c4-4 8-4 12 0s8 4 12 0 3-1 4 0' fill='none' stroke='%23000' stroke-width='1.4'/><path d='M5.5 5c1.2-3.2 4.3-3.2 5.5 0-1.2 3.2-4.3 3.2-5.5 0z'/><circle cx='20' cy='6.6' r='1.9'/></g></svg>");
  --m-register: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><circle cx='5' cy='5' r='3.4' fill='none' stroke='%23000' stroke-width='1.2'/><path d='M5 0v10M0 5h10' stroke='%23000' stroke-width='1.2'/></svg>");
  --m-deckle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'><path d='M0 14V6l4-2 5 3 6-4 5 2 7-3 6 4 5-1 6-3 7 4 5-2 6 3 6-4 6 2 6-3 5 4 6-1 7-3 5 3 7-2 5 4 6-3 6 2V14z'/></svg>");
  --m-hook-and-quill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M6 27L21 12' stroke='%23000' stroke-width='3.2' stroke-linecap='round' fill='none'/><path d='M21 12c2.8-2.8 6.4-.4 4.6 2.6-1.2 2-3.6 1.6-4.4.2' stroke='%23000' stroke-width='2.6' stroke-linecap='round' fill='none'/><path d='M26 27L12 13' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M12 13C7.5 12.4 4.6 8.4 5.4 4.6c3.8-.8 7.8 2.1 8.4 6.6z'/><path d='M4 28h8v1.6H4z'/></svg>");
  --m-hook: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M5 28L22 11' stroke='%23000' stroke-width='3.4' stroke-linecap='round' fill='none'/><path d='M22 11c3-3 7-.5 5 2.8-1.3 2.1-4 1.7-4.8.3' stroke='%23000' stroke-width='2.8' stroke-linecap='round' fill='none'/></svg>");
  --m-quill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M27 27L12 12' stroke='%23000' stroke-width='2.2' stroke-linecap='round' fill='none'/><path d='M12 12C6.5 11.3 3.4 6.4 4.4 2.4c4-1 8.9 2.2 9.6 7.6z'/></svg>");
  --m-yarnball: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='15' cy='16' r='12' fill='none' stroke='%23000' stroke-width='2.4'/><path d='M5 10c6 2 12 2 19-2M3.4 18c8 1 14-2 21-8M7 25c6-1 12-6 16-13M13 27c5-3 9-8 12-14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/><path d='M22 24l8 3' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/></svg>");
  --m-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='10' cy='10' r='6.5' fill='none' stroke='%23000' stroke-width='2.6'/><path d='M15 15l6 6' stroke='%23000' stroke-width='3' stroke-linecap='round'/></svg>");
  --m-cross: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='3' stroke-linecap='round'/></svg>");
  --m-leafpair: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 30V12' stroke='%23000' stroke-width='2' stroke-linecap='round'/><path d='M16 18C8 18 3 12 3 4c8 0 13 6 13 14zM16 18c8 0 13-6 13-14-8 0-13 6-13 14z'/></svg>");

  /* 1.7 Wallpaper tiles — masks too, so the ink is a token and the alpha a
     number. Each drawing keeps clear of its tile edge so repeats are seamless. */
  --tile-trellis: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><g fill='none' stroke='%23000' stroke-width='1.5'><path d='M0 80L80 0M80 160L160 80M0 80l80 80M80 0l80 80'/><circle cx='80' cy='80' r='6'/><circle cx='0' cy='80' r='6'/><circle cx='160' cy='80' r='6'/><circle cx='80' cy='0' r='6'/><circle cx='80' cy='160' r='6'/><path d='M40 40c6-10 16-10 22 0-6 10-16 10-22 0zM98 40c6-10 16-10 22 0-6 10-16 10-22 0zM40 120c6-10 16-10 22 0-6 10-16 10-22 0zM98 120c6-10 16-10 22 0-6 10-16 10-22 0z'/><path d='M80 62c-3 5-3 12 0 18 3-6 3-13 0-18zM62 80c5-3 12-3 18 0-6 3-13 3-18 0zM80 98c-3 5-3 12 0 18 3-6 3-13 0-18zM98 80c5-3 12-3 18 0-6 3-13 3-18 0z'/></g></svg>");
  --tile-willow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'><g fill='none' stroke='%23000' stroke-width='1.5'><path d='M0 45c30-34 60 34 90 0s60-34 90 0M0 135c30-34 60 34 90 0s60-34 90 0'/><path d='M20 34c4-14 14-18 22-14-2 10-10 16-22 14zM52 46c-4 14-14 18-22 14 2-10 10-16 22-14zM110 34c4-14 14-18 22-14-2 10-10 16-22 14zM142 46c-4 14-14 18-22 14 2-10 10-16 22-14zM20 124c4-14 14-18 22-14-2 10-10 16-22 14zM52 136c-4 14-14 18-22 14 2-10 10-16 22-14zM110 124c4-14 14-18 22-14-2 10-10 16-22 14zM142 136c-4 14-14 18-22 14 2-10 10-16 22-14z'/><path d='M76 72c8-6 18-4 22 4-8 6-18 4-22-4zM166 72c8-6 18-4 22 4-8 6-18 4-22-4zM76 100c8 6 18 4 22-4-8-6-18-4-22 4z'/></g></svg>");
  --tile-acanthus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'><path d='M20 180c0-60 40-110 90-110 30 0 50 22 40 44-8 18-34 18-40 2-5-14 12-24 24-14'/><path d='M180 20c0 60-40 110-90 110-30 0-50-22-40-44 8-18 34-18 40-2 5 14-12 24-24 14'/><path d='M60 150c-14-4-22-18-16-30 10 2 18 14 16 30zM90 172c-16 0-26-12-24-26 12 0 22 12 24 26zM140 50c14 4 22 18 16 30-10-2-18-14-16-30zM110 28c16 0 26 12 24 26-12 0-22-12-24-26z'/><path d='M30 44c10-14 24-14 30 0M140 156c10 14 24 14 30 0' /></g></svg>");
  --tile-trellis-ink: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%232a2219' stroke-opacity='.28' stroke-width='1'><path d='M0 12L12 0M12 24L24 12M0 12l12 12M12 0l12 12'/></g></svg>");
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · LEGACY TOKEN ALIASES — the cookie banner in site-extras.js builds
   itself with inline styles that read these five names (plus --ink --line
   --font --bw --bw-thick --r --r-sm --pop --pop-sm --fs-sm --t-fast --ease).
   Each aliases a live §1 token; never a second value.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --card:    var(--vellum-light);
  --rose:    var(--madder);
  --rose-d:  var(--madder-d);
  --amber:   var(--ochre);
  --on-rose: var(--on-madder);
  --ink:     var(--umber);
  --ink-2:   var(--umber-2);
  --ink-3:   var(--umber-2);
  /* SaaS brand aliases (the names the branding refresh writes to) */
  --primary:var(--indigo); --primary-d:var(--indigo-deep);
  --secondary:var(--madder); --secondary-d:var(--madder-d);
  --accent-c:var(--ochre); --accent-d:var(--ochre-d);
  --bg:var(--vellum); --surface:var(--vellum-light);
  --text:var(--umber); --text-soft:var(--umber-2);
  --shadow:var(--pop-sm); --shadow-lg:var(--pop); --shadow-xl:var(--pop-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3 · RESET + BASE
   ═══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 32px);
}
/* A / A+ text-size control (masthead). Root goes to 18px so every rem-based
   size grows 12.5%; the masthead is sized in px so its breakpoint math holds. */
html.ca-text-lg{ font-size:112.5%; }
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--fg);
  background-color:var(--bg-page);
  /* laid paper: one umber line in four at .03 — see the header for the composite */
  background-image:repeating-linear-gradient(0deg, rgba(42,34,25,.03) 0 1px, transparent 1px 4px);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,picture,svg{ display:block; max-width:100%; height:auto; }
img{ background:var(--vellum-deep); }   /* paints the box before the bytes land */
a{ color:var(--link); text-decoration-thickness:1px; text-underline-offset:.14em; }
a:hover{ color:var(--link-hover); }
h1,h2,h3,h4{ margin:0; line-height:var(--lh-snug); text-wrap:balance; overflow-wrap:anywhere; }
p{ margin:0 0 var(--ca-space-4); }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0 0 var(--ca-space-4); padding-left:1.3em; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
figure{ margin:0; }
mark{ background:rgba(201,149,43,.45); color:inherit; padding:0 .12em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
::selection{ background:var(--indigo); color:var(--on-indigo); }
.hidden{ display:none !important; }   /* article.js toggles it; never repurpose */
/* The hidden ATTRIBUTE, which is a different thing from the class above and
   on its own does not hide anything here. The UA sheet gives [hidden] its
   display:none at the lowest priority there is, so any class that names a
   display beats it — and most things worth hiding carry one. #searchClear
   is a .ca-chip (inline-flex) and #searchEmpty a .ca-empty-state, so
   `el.hidden = true` left both of them sitting under the search results.

   Nothing on the site paints differently for this rule TODAY, and that is
   the point: every place the gap has bitten already carries a workaround.
   search.js writes `style.display = 'none'` alongside the attribute (its own
   comment asks for exactly this rule instead) and ca-article.css carries
   seven `.x[hidden]{display:none}` patches, one per component that hit it.
   Proved by measurement, not assumed — the rule was deleted from the live
   CSSOM on eight routes and no element changed display. So this is a guard
   against the ninth component, and it retires the pattern rather than
   contradicting it.

   !important is safe because no script here hides an element and then
   reveals it with an inline display: search.js and ca-article.js both clear
   the attribute itself, the drawer scrim included. */
[hidden]{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   4 · ACCESSIBILITY PRIMITIVES
   ═══════════════════════════════════════════════════════════════════════ */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{
  position:absolute; left:-9999px; top:18px; z-index:300;
  padding:12px 18px; min-height:44px; display:inline-flex; align-items:center;
  background:var(--indigo); color:var(--on-indigo);           /* 9.78 */
  font-family:var(--caps); font-weight:700; letter-spacing:var(--track-caps);
  border:var(--bw) solid var(--umber); outline:1px solid var(--ochre); outline-offset:3px;
  text-decoration:none;
}
.skip-link:focus{ left:18px; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
main:focus{ outline:none; }
.ca-tap{ min-height:44px; min-width:44px; }

/* ═══════════════════════════════════════════════════════════════════════════
   5 · THE ORNAMENT ENGINE — ten devices, pure CSS / SVG masks
   Every ornament element is aria-hidden. Each device carries its RULE —
   the role it plays — so the next person reaches for the right one.
   ═══════════════════════════════════════════════════════════════════════ */

/* 5.1 WALLPAPER TILE  .ca-wallpaper  --trellis | --willow | --acanthus
   RULE: one tile per band, never two, and never under body prose without the
   centre mask. ONLY on the hero (acanthus, ochre .08 on indigo-deep), the FAQ
   band (willow, indigo .10), the newsletter band (trellis, indigo .12) and the
   footer (acanthus, ochre .08). Never on the plates band, the chapters band,
   or inside a card — yarn colour always sits on a plain parchment mat.
   The centre is masked out (radial 70%×80%) so text never sits on pattern. */
.ca-wallpaper{ position:relative; isolation:isolate; }
.ca-wallpaper::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--tile-ink, var(--indigo));
  opacity:var(--tile-alpha, .12);
  -webkit-mask-image:var(--tile), radial-gradient(ellipse 70% 80% at 50% 50%, transparent 45%, #000 100%);
          mask-image:var(--tile), radial-gradient(ellipse 70% 80% at 50% 50%, transparent 45%, #000 100%);
  -webkit-mask-size:var(--tile-size,160px) var(--tile-size,160px), 100% 100%;
          mask-size:var(--tile-size,160px) var(--tile-size,160px), 100% 100%;
  -webkit-mask-repeat:repeat, no-repeat;
          mask-repeat:repeat, no-repeat;
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.ca-wallpaper--trellis { --tile:var(--tile-trellis);  --tile-size:160px; --tile-alpha:.12; }
.ca-wallpaper--willow  { --tile:var(--tile-willow);   --tile-size:180px; --tile-alpha:.10; }
.ca-wallpaper--acanthus{ --tile:var(--tile-acanthus); --tile-size:200px; --tile-alpha:.08; --tile-ink:var(--ochre); }

/* 5.2 KELMSCOTT BORDER FRAME  .ca-border  --lg | --sm  + colour role
   border 2.5px umber + a 1px gilt outline 5px outside + (--lg) a 14px
   vine stripe along all four edges, masked from --m-vine and painted in the
   role colour. RULE — the frame colour is a ROLE: madder = the one object
   the page is about (the pattern card on an article page); leaf = chrome
   plates (hero vitrine, newsletter card); indigo = reading panels; ochre =
   the colophon card on indigo-deep. --sm is the double hairline only. */
.ca-border{
  position:relative;
  border:2.5px solid var(--line);
  outline:1px solid var(--ochre);
  outline-offset:5px;
  background:var(--bg-raised);
  --vine:var(--leaf);
}
.ca-border--leaf  { --vine:var(--leaf); }
.ca-border--indigo{ --vine:var(--indigo); }
.ca-border--madder{ --vine:var(--madder); }
.ca-border--ochre { --vine:var(--ochre); outline-color:var(--ochre); border-color:var(--ochre); }
.ca-border--lg{ padding:calc(9px + 14px + 12px); }
.ca-border--lg::after{
  content:''; position:absolute; inset:9px; pointer-events:none; z-index:2;
  background-color:var(--vine);
  -webkit-mask-image:var(--m-vine), var(--m-vine), var(--m-vine-v), var(--m-vine-v);
          mask-image:var(--m-vine), var(--m-vine), var(--m-vine-v), var(--m-vine-v);
  -webkit-mask-size:28px 10px, 28px 10px, 10px 28px, 10px 28px;
          mask-size:28px 10px, 28px 10px, 10px 28px, 10px 28px;
  -webkit-mask-repeat:repeat-x, repeat-x, repeat-y, repeat-y;
          mask-repeat:repeat-x, repeat-x, repeat-y, repeat-y;
  -webkit-mask-position:0 2px, 0 calc(100% - 2px), 2px 0, calc(100% - 2px) 0;
          mask-position:0 2px, 0 calc(100% - 2px), 2px 0, calc(100% - 2px) 0;
}
.ca-border--sm{ padding:var(--ca-space-5); }

/* 5.3 WOODCUT INITIAL  .ca-initial  (on the opening paragraph of a band)
   RULE: exactly ONE paragraph per band — the hero lede, the press note, the
   article intro. Never on cards, never twice in a band. Grenze 700 at 3.2em
   (56px) on an ochre square with a 2px umber keyline and a 24px trellis fill
   behind the glyph; umber on ochre 5.83. */
.ca-initial::first-letter{
  float:left;
  font-family:var(--display); font-weight:var(--fw-display);
  font-size:3.2em; line-height:.82;
  padding:.12em .18em .06em;
  margin:.08em .16em 0 0;
  color:var(--on-ochre);
  background:var(--ochre) var(--tile-trellis-ink) 0 0/24px 24px repeat;
  border:2px solid var(--umber);
  box-shadow:var(--pop-sm);
}

/* 5.4 FLEURON RULE  .ca-rule  --center | --full | --gilt
   14px × 140px of leaf—diamond—leaf, painted indigo (--gilt → ochre).
   RULE: under every h2. --gilt only on dark grounds. */
.ca-rule{
  display:block; width:140px; height:14px; margin:var(--ca-space-3) 0 var(--ca-space-5);
  background-color:var(--rule-ink, var(--indigo));
  -webkit-mask:var(--m-fleuron-rule) left center/46px 14px repeat-x;
          mask:var(--m-fleuron-rule) left center/46px 14px repeat-x;
}
.ca-rule--center{ margin-inline:auto; }
.ca-rule--full{ width:100%; }
.ca-rule--gilt{ --rule-ink:var(--ochre); }
.ca-rule--leaf{ --rule-ink:var(--leaf); }

/* 5.5 HEADLINE PLATE  .ca-plate
   Every h1 and section h2 sits between two 1px gilt hairlines with a 6px
   fleuron mid-mark on each. Display text is flat indigo, no shadow — a
   blackletter-adjacent face is never shadowed. THE display device. */
.ca-plate{
  position:relative;
  padding-block:.32em;
  border-block:1px solid var(--plate-line, var(--ochre));
}
.ca-plate::before,
.ca-plate::after{
  content:''; position:absolute; left:50%; translate:-50% -50%;
  width:7px; height:7px;
  background-color:var(--plate-mark, var(--umber));
  -webkit-mask:var(--m-fleuron) center/contain no-repeat;
          mask:var(--m-fleuron) center/contain no-repeat;
}
.ca-plate::before{ top:0; }
.ca-plate::after{ top:100%; }
.ca-plate--center::before,
.ca-plate--center::after{ left:50%; }
.ca-plate--left::before,
.ca-plate--left::after{ left:36px; }

/* 5.6 PRESSMARK / BOOKPLATE ROUNDEL  .ca-pressmark · .ca-roundel (= .ca-roundel)
   112px indigo disc with cream / ink / gilt rings (box-shadow), three lines:
   italic-small / BIG (Alegreya SC 700) / caps-sub. A press device is never
   crooked: rotate 0. Hover thickens the gilt ring. The .ca-roundel__* names
   are kept so site-extras.js fitRoundels() keeps measuring them.
   RULE: the "100% free" hero stamp, the three bookplates, the no-spam seal,
   listing stamps. Colours leaf-d / indigo / madder = beginner / intermediate
   / advanced — the one place three inks sit together. */
.ca-pressmark{
  display:inline-grid; place-items:center; flex:none;
  width:var(--mark-size,48px); height:var(--mark-size,48px);
  border-radius:50%;
  background:var(--indigo);
  box-shadow:0 0 0 2px var(--vellum-light), 0 0 0 3.5px var(--umber), 0 0 0 6px var(--ochre);
}
.ca-pressmark::before{
  content:''; width:62%; height:62%;
  background-color:var(--ochre);
  -webkit-mask:var(--m-hook-and-quill) center/contain no-repeat;
          mask:var(--m-hook-and-quill) center/contain no-repeat;
}
.ca-roundel{
  --size:112px;
  --roundel-big:.24;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:var(--size); height:var(--size); flex:none;
  border-radius:50%;
  background:var(--disc, var(--indigo));
  color:var(--on-indigo);
  box-shadow:0 0 0 3px var(--vellum-light), 0 0 0 5px var(--umber), 0 0 0 9px var(--ochre);
  text-align:center; line-height:1; text-decoration:none;
  rotate:0deg;
  transition:box-shadow var(--t) var(--ease);
}
.ca-roundel:hover, a:hover > .ca-roundel{ box-shadow:0 0 0 3px var(--vellum-light), 0 0 0 5px var(--umber), 0 0 0 11px var(--ochre); }
.ca-roundel__script{ font-family:var(--accent); font-style:italic; font-size:calc(var(--size) * .19); margin-bottom:.08em; }
.ca-roundel__big{ font-family:var(--caps); font-weight:700; font-size:calc(var(--size) * var(--roundel-big)); letter-spacing:.01em; line-height:1; }
.ca-roundel__sub{ font-family:var(--caps); font-weight:700; font-size:calc(var(--size) * .135); letter-spacing:var(--track-caps); margin-top:.3em; }
.ca-roundel--w5{ --roundel-big:.215; }
.ca-roundel--w6{ --roundel-big:.18; }
.ca-roundel--sm{ --size:78px; }
.ca-roundel--lg{ --size:150px; }
.ca-roundel--leaf  { --disc:var(--leaf-d); color:var(--on-leaf); }     /* 6.65 */
.ca-roundel--indigo{ --disc:var(--indigo); }
.ca-roundel--madder{ --disc:var(--madder); color:var(--on-madder); }  /* 5.80 */

/* 5.7 REGISTER-MARK CHIPS  .ca-chip  .is-on
   Alegreya SC 500 rectangle, 1.5px umber border, vellum-deep fill, 44px.
   On / hover → ochre fill, umber text (5.83) and a 10px printer's crosshair
   at the left. RULE: category, skill, yarn-weight and search facets. The
   crosshair appears ONLY on the on-state — "this plate is in register". */
/* One `.ca-chip` in the list, not two. The prefix rename of 2026-08-24 walked
   `.hf-chip` and `.sp-chip` onto the same name and left both lines standing. */
.ca-chip,
.featured-skill,
.category-badge{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:6px 14px;
  font-family:var(--caps); font-weight:500; font-size:var(--fs-xs);
  letter-spacing:var(--track-caps); line-height:1.2;
  color:var(--umber); background:var(--chip-bg);
  border:var(--bw-hair) solid var(--line); border-radius:var(--r-xs);
  text-decoration:none; white-space:nowrap;
  transition:background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.featured-skill, .category-badge{ min-height:30px; padding:2px 10px; gap:4px; align-self:flex-start; }
.ca-chip:hover, .ca-chip.is-on, .ca-chip-facet.is-on, .ca-chip[aria-current="page"]{
  background:var(--ochre); color:var(--on-ochre);     /* 5.83 */
  border-color:var(--umber);
}
.ca-chip.is-on::before, .ca-chip-facet.is-on::before, .ca-chip[aria-current="page"]::before{
  content:''; width:10px; height:10px; flex:none;
  background-color:var(--umber);
  -webkit-mask:var(--m-register) center/contain no-repeat;
          mask:var(--m-register) center/contain no-repeat;
}
.ca-chip:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.ca-chip-n{ font-size:var(--fs-xs); font-weight:500; color:var(--umber-2); }   /* 5.71 on vellum-deep */
.ca-chip:hover .ca-chip-n, .ca-chip.is-on .ca-chip-n, .ca-chip-facet.is-on .ca-chip-n{ color:var(--on-ochre); }
.ca-chips, .ca-chips-browse, .ca-facets, .filter-controls, .filter-buttons{
  display:flex; flex-wrap:wrap; gap:var(--ca-space-2); align-items:center;
}
.ca-chips-row{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--ca-space-2) var(--ca-space-3); margin-bottom:var(--ca-space-3); }
.ca-chips-row > .ca-chips{ flex:1 1 0; min-width:0; }
.ca-chips-label{
  font-family:var(--accent); font-style:italic; font-size:var(--fs-body);
  color:var(--umber-2); margin:0; flex:0 0 176px; line-height:44px;
}

/* 5.8 DECKLE EDGE  .ca-edge  --X (band below)  --on-X (band above)
   14px strip: a torn-paper edge (--m-deckle) painted in the band BELOW's
   colour over a 1px gilt hairline and the band ABOVE's colour. RULE:
   REQUIRED between every pair of bands; always two classes or the valley
   leaks. The hairline is what reads paper-on-paper when two parchments sit
   4% apart. */
.ca-edge{
  position:relative; height:var(--edge-h); overflow:hidden;
  background:linear-gradient(var(--ochre) 0 1px, var(--edge-above, var(--vellum)) 1px);
}
.ca-edge::before{
  content:''; position:absolute; inset:0;
  background-color:var(--edge-below, var(--vellum));
  -webkit-mask:var(--m-deckle) left top/120px var(--edge-h) repeat-x;
          mask:var(--m-deckle) left top/120px var(--edge-h) repeat-x;
}
.ca-edge--vellum        { --edge-below:var(--vellum); }
.ca-edge--vellum-light  { --edge-below:var(--vellum-light); }
.ca-edge--vellum-deep   { --edge-below:var(--vellum-deep); }
.ca-edge--indigo        { --edge-below:var(--indigo); }
.ca-edge--indigo-deep   { --edge-below:var(--indigo-deep); }
.ca-edge--madder        { --edge-below:var(--madder); }
.ca-edge--ochre         { --edge-below:var(--ochre); }
.ca-edge--on-vellum       { --edge-above:var(--vellum); }
.ca-edge--on-vellum-light { --edge-above:var(--vellum-light); }
.ca-edge--on-vellum-deep  { --edge-above:var(--vellum-deep); }
.ca-edge--on-indigo       { --edge-above:var(--indigo); }
.ca-edge--on-indigo-deep  { --edge-above:var(--indigo-deep); }
.ca-edge--on-madder       { --edge-above:var(--madder); }
.ca-edge--on-ochre        { --edge-above:var(--ochre); }
/* a dark band above paints the hairline in gilt already; a gilt band above
   needs an umber hairline or the line vanishes */
.ca-edge--on-ochre{ background:linear-gradient(var(--umber) 0 1px, var(--ochre) 1px); }

/* 5.9 MARGIN-NOTE SLIPS  .ca-margin-note
   IM Fell italic on a torn vellum-light slip, 1.5px umber keyline, pinned to
   the vitrine edges, ±1.5deg — the ONLY crooked things in this world
   (handwritten, not printed). RULE: two per hero, one on the press-note
   photo. Never on cards. Hidden ≤760 (the copy is restated in the stats). */
.ca-margin-note{
  position:absolute; z-index:5; margin:0;
  max-width:190px; padding:12px 18px;
  font-family:var(--accent); font-style:italic; font-size:1.25rem; line-height:1.2;
  color:var(--umber); background:var(--vellum-light);
  border:var(--bw-hair) solid var(--umber);
  box-shadow:var(--pop-sm);
  clip-path:polygon(2% 4%, 30% 0, 62% 3%, 98% 1%, 100% 40%, 97% 72%, 100% 97%, 64% 100%, 33% 96%, 1% 100%, 0 60%, 3% 30%);
  rotate:-1.5deg;
}
.ca-margin-note--r{ rotate:1.5deg; }

/* 5.10 LAID PAPER + DOUBLE IMPRESSION  body (§3) · .ca-bleed
   .ca-bleed = 2px ink + 1px gilt impression; no blur, no big offset.
   Hover thickens the gilt ring (no lift); active collapses to 1px (the press
   coming down). RULE: every raised panel and card. */
.ca-bleed{ box-shadow:var(--pop); }
.ca-bleed--sm{ box-shadow:var(--pop-sm); }

/* Supporting marks */
.ca-eyebrow,
.ca-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 var(--ca-space-3);
  font-family:var(--caps); font-weight:500; font-size:var(--fs-xs);
  letter-spacing:var(--track-caps); line-height:1.3;
  color:var(--eyebrow-ink, var(--ochre-d));        /* 5.27 vellum · 5.87 vellum-light */
}
.ca-eyebrow::before{
  content:''; width:12px; height:12px; flex:none;
  background-color:currentColor;
  -webkit-mask:var(--m-fleuron) center/contain no-repeat;
          mask:var(--m-fleuron) center/contain no-repeat;
}
.ca-italic,
.ca-script{
  font-family:var(--accent); font-style:italic; font-weight:400;
  font-size:1.25rem; line-height:1.25;
  color:var(--indigo);
  margin:0 0 var(--ca-space-2);
}
.ca-italic--lg,
.ca-script--lg{ font-size:clamp(1.5rem, 3vw, 2.3rem); }
.ca-italic--madder, .ca-script--red{ color:var(--madder-d); }     /* 6.52 */
.ca-italic--ochre{ color:var(--ochre); }                            /* on indigo-deep only: 5.52 */
.ca-italic--cream, .ca-script--cream{ color:var(--on-indigo-deep); }
.ca-pull{
  font-family:var(--accent); font-style:italic;
  font-size:clamp(1.4rem, 2.8vw, 2rem); line-height:1.3;
  color:var(--indigo);
  border-left:4px solid var(--leaf);
  padding-left:var(--ca-space-4); margin:var(--ca-space-5) 0;
}
/* The 13 emoji-zeroing selectors from the skeleton: the glyph is killed
   (font-size:0 !important — each has a later component rule sizing it) and a
   mask is painted in currentColor. Baked pages stay fixed by CSS alone. */
.logo-icon, .footer-logo-icon, .newsletter-illustration, .author-portrait--mark,
.ca-loading-mark, .completion-modal-emoji, .nl-popup-icon, .ca-nlpop-icon,
.ca-empty-icon, .blog-img-placeholder, #thumbnailPlaceholder, .ca-mark-yarn, .search-icon{
  font-size:0 !important; line-height:0 !important;
  display:inline-grid; place-items:center;
}
.newsletter-illustration::before, .author-portrait--mark::before, .ca-loading-mark::before,
.completion-modal-emoji::before, .nl-popup-icon::before, .ca-nlpop-icon::before,
.ca-empty-icon::before, .blog-img-placeholder::before, #thumbnailPlaceholder::before,
.ca-mark-yarn::before, .search-icon::before{
  content:''; display:block;
  width:var(--mark-size,24px); height:var(--mark-size,24px);
  background-color:currentColor;
  -webkit-mask:var(--m-yarnball) center/contain no-repeat;
          mask:var(--m-yarnball) center/contain no-repeat;
}
.search-icon::before{ -webkit-mask-image:var(--m-search); mask-image:var(--m-search); width:20px; height:20px; }
.ca-nlpop-icon::before{ --mark-size:34px; }
.ca-nlpop.is-error .ca-nlpop-icon::before{ -webkit-mask-image:var(--m-cross); mask-image:var(--m-cross); }
.ca-empty-icon::before{ --mark-size:56px; }

/* ═══════════════════════════════════════════════════════════════════════════
   6 · TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════ */
.ca-h1, .ca-h2, .ca-h1, .ca-display{
  font-family:var(--display); font-weight:var(--fw-display);
  line-height:var(--lh-display);
  letter-spacing:0; text-transform:none;     /* sentence case ONLY */
  color:var(--display-ink, var(--indigo));
  margin:0 0 var(--ca-space-4);
  text-wrap:balance; overflow-wrap:anywhere;
}
.ca-h1{ font-size:var(--fs-h1); max-width:19ch; }
.ca-h2{ font-size:var(--fs-h2); }
.ca-h2--umber, .ca-h2--ink{ --display-ink:var(--umber); }
.ca-h2--madder{ --display-ink:var(--madder); }             /* display ≥32px: 5.21 */
.ca-h2--cream{ --display-ink:var(--on-indigo-deep); }
.ca-h3{ font-family:var(--caps); font-weight:700; font-size:var(--fs-h3); letter-spacing:.02em; color:var(--umber); margin:0 0 var(--ca-space-3); }
.ca-caps{ font-family:var(--caps); font-weight:700; letter-spacing:var(--track-caps); font-size:var(--fs-sm); color:var(--umber-2); }
.ca-caps--sm{ font-size:var(--fs-xs); }
.ca-sub{ max-width:60ch; font-size:var(--fs-lg); line-height:var(--lh-body); color:var(--fg-mut); margin:0 0 var(--ca-space-5); }
.ca-lede{ max-width:60ch; font-size:clamp(1.15rem, 1.6vw, 1.3rem); line-height:1.65; margin:0 0 var(--ca-space-5); }
.ca-center{ text-align:center; }
.ca-center .ca-h2, .ca-center .ca-sub, .ca-center .ca-lede{ margin-inline:auto; }
.ca-center .ca-eyebrow{ justify-content:center; }

/* ═══════════════════════════════════════════════════════════════════════════
   7 · LAYOUT PRIMITIVES + BANDS
   ═══════════════════════════════════════════════════════════════════════ */
.container, .ca-wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.ca-wrap--narrow, .ca-wrap-narrow{ max-width:860px; }
.ca-wrap--prose{ max-width:min(100%, 78ch); }
.ca-section{ position:relative; padding-block:var(--ca-space-8); background-color:var(--section-bg, transparent); }
.ca-section--tight, .ca-section-tight{ padding-block:var(--ca-space-6); }
.ca-band--vellum, .ca-band--paper            { --section-bg:var(--vellum);       background-color:var(--vellum); }
.ca-band--vellum-light, .ca-band--paper-light{ --section-bg:var(--vellum-light); background-color:var(--vellum-light); }
.ca-band--vellum-deep, .ca-band--cream{
  --section-bg:var(--vellum-deep); background-color:var(--vellum-deep);
  --chip-bg:var(--vellum-light);
  --eyebrow-ink:var(--indigo);          /* ochre-d is 4.36 here; indigo 7.27 */
  --fg-mut:var(--umber);                /* umber-2 is 5.71 — fine, but the sunk band reads crisper in ink */
  --link-hover:var(--madder-d);         /* 5.40 */
  --plate-halo:var(--vellum-deep);
}
.ca-band--indigo, .ca-band--teal{
  --section-bg:var(--indigo); background-color:var(--indigo); color:var(--on-indigo);
  --fg:var(--on-indigo); --fg-mut:var(--on-indigo-mut); --link:var(--on-indigo); --link-hover:var(--ochre);
  --line:var(--on-indigo); --focus:var(--ochre);  /* 4.28 ring only */
  /* eyebrow ink: ochre is 4.28 on plain indigo — a ring colour, NOT text (see
     the --ochre token note). on-indigo-mut is 6.88 here and keeps the warm
     gold read. indigo-deep below is the one dark ground ochre may carry. */
  --eyebrow-ink:var(--on-indigo-mut); --display-ink:var(--on-indigo); --plate-halo:var(--indigo); --plate-mark:var(--ochre);
}
.ca-band--indigo-deep, .ca-band--ink{
  --section-bg:var(--indigo-deep); background-color:var(--indigo-deep); color:var(--on-indigo-deep);
  --fg:var(--on-indigo-deep); --fg-mut:var(--on-indigo-mut); --link:var(--on-indigo-deep); --link-hover:var(--ochre);
  --line:var(--on-indigo-deep); --focus:var(--ochre);  /* 5.52 */
  --eyebrow-ink:var(--ochre); --display-ink:var(--vellum-light); --plate-halo:var(--indigo-deep); --plate-mark:var(--ochre);
}
.ca-band--madder, .ca-band--red{
  --section-bg:var(--madder); background-color:var(--madder); color:var(--on-madder);
  --fg:var(--on-madder); --fg-mut:var(--on-madder); --link:var(--on-madder); --link-hover:var(--vellum);
  --line:var(--umber); --focus:var(--on-madder);
}
.ca-band--indigo h1, .ca-band--indigo h2, .ca-band--indigo h3,
.ca-band--indigo-deep h1, .ca-band--indigo-deep h2, .ca-band--indigo-deep h3,
.ca-band--teal h1, .ca-band--teal h2, .ca-band--ink h1, .ca-band--ink h2{ color:inherit; }

/* Panels — the card stock every block is printed on */
.ca-panel, .ca-panel{
  position:relative; background:var(--bg-raised);
  border:var(--bw-hair) solid var(--line); border-radius:var(--r-xs);
  box-shadow:var(--pop); padding:var(--ca-space-6);
}
.ca-panel--flat{ box-shadow:none; }
.ca-panel--deep{ box-shadow:var(--pop-lg); }
.ca-panel--cream{ background:var(--vellum-deep); }
.ca-panel--teal, .ca-panel--indigo{ background:var(--indigo); color:var(--on-indigo); --focus:var(--ochre); --link:var(--on-indigo); }
.ca-panel--red, .ca-panel--madder{ background:var(--madder); color:var(--on-madder); --focus:var(--on-madder); --link:var(--on-madder); }
.ca-panel-side{ background:var(--vellum-deep); border:var(--bw-hair) solid var(--line); padding:var(--ca-space-5); box-shadow:var(--pop-sm); }
.ca-cols-2{ display:grid; gap:var(--ca-space-5); grid-template-columns:repeat(2, minmax(0,1fr)); }
.ca-cols-3{ display:grid; gap:var(--ca-space-5); grid-template-columns:repeat(3, minmax(0,1fr)); }
.ca-cols-4{ display:grid; gap:var(--ca-space-5); grid-template-columns:repeat(4, minmax(0,1fr)); }
.ca-stack{ display:flex; flex-direction:column; gap:var(--ca-space-5); }
.ca-row, .btn-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--ca-space-3); }
/* Ad-slot reservations (UX): un-hide and give min-height:280px when an ad
   integration exists. Hidden today so no blank gap ships on a site with no ads. */
.ca-ad-slot{ min-height:280px; margin:var(--ca-space-5) auto; }
.ca-ad-slot[hidden]{ display:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   8 · BUTTONS + CONTROLS — press-down physics
   hover: the gilt outline thickens (no lift) · active: translate 1px 1px and
   the impression collapses to 1px (a press coming down).
   ═══════════════════════════════════════════════════════════════════════ */
.ca-btn, .ca-btn, .submit-button, .footer-btn, .page-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:12px 24px;
  font-family:var(--caps); font-weight:700; font-size:1.02rem;
  letter-spacing:var(--track-caps); line-height:1.2; text-align:center;
  color:var(--on-indigo); background:var(--indigo);
  border:var(--bw) solid var(--umber); border-radius:var(--r-xs);
  outline:1px solid var(--ochre); outline-offset:2px;
  box-shadow:var(--pop-sm);
  text-decoration:none; cursor:pointer;
  transition:outline-width var(--t-fast) var(--ease), translate var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.ca-btn:hover, .submit-button:hover, .footer-btn:hover, .page-btn:hover{ outline-width:3px; color:var(--on-indigo); }
.ca-btn:active, .submit-button:active, .footer-btn:active, .page-btn:active{ translate:1px 1px; box-shadow:var(--pop-in); }
/* THE FOCUS RING ON A BUTTON. Every button here already wears a 1px gilt
   outline as decoration, so the ring has to be the SAME property at a
   different weight — a box-shadow ring would sit under the gilt one and read
   as a smudge. Three things this rule has to get right:
   · every selector in the base list appears here too. `.page-btn` was the one
     that did not, so a focused pagination button kept the same 1px gilt
     outline it wears when nobody is on it — present, but the one control on
     the site whose focused state is not visibly different from its resting
     one;
   · specificity, not order, is what beats `.ca-btn--plain{outline-color:
     transparent}` further down — that is 0,1,0 against this rule's 0,2,0;
   · `outline-width` is in the base transition, so the ring grows in over
     --t-fast. Pinned to 0s here: a ring that fades up is a ring that is not
     there yet at the moment the reader looks for it, and it made the focused
     state measure 1px for the first 120ms. */
.ca-btn:focus-visible, .submit-button:focus-visible,
.footer-btn:focus-visible, .page-btn:focus-visible{
  outline:3px solid var(--focus); outline-offset:3px;
  transition-duration:0s;
}
.ca-btn--madder, .ca-btn--primary, .submit-button{ background:var(--madder); color:var(--on-madder); }     /* 5.80 */
.ca-btn--madder:hover, .ca-btn--primary:hover, .submit-button:hover{ color:var(--on-madder); background:var(--madder-d); }
.ca-btn--indigo, .ca-btn--secondary{ background:var(--indigo); color:var(--on-indigo); }
.ca-btn--leaf{ background:var(--leaf-d); color:var(--on-leaf); }                                              /* 6.65 */
.ca-btn--leaf:hover{ color:var(--on-leaf); }
.ca-btn--ochre{ background:var(--ochre); color:var(--on-ochre); }                                             /* 5.83 */
.ca-btn--ochre:hover{ color:var(--on-ochre); background:#d6a13a; }
.ca-btn--plain, .ca-btn--ghost{ background:transparent; color:var(--fg); border-color:var(--line); outline-color:transparent; }
.ca-btn--plain:hover, .ca-btn--ghost:hover{ color:var(--fg); background:var(--ghost-hover, var(--vellum-deep)); outline-color:var(--ochre); }
.ca-btn--lg{ min-height:58px; padding:14px 30px; font-size:1.1rem; }
.ca-btn--sm{ min-height:44px; padding:8px 16px; font-size:var(--fs-sm); }
.ca-btn[disabled], .submit-button[disabled]{ opacity:.7; cursor:wait; }
/* Dark bands: ghost buttons in the band's foreground; the gilt ring stays. */
.ca-band--indigo-deep .ca-btn--plain, .ca-band--indigo .ca-btn--plain, .ca-newsletter-left .ca-btn--plain,
.ca-bench-band .ca-btn--plain{ color:var(--vellum); border-color:var(--vellum); --ghost-hover:rgba(245,236,214,.12); }

/* Painted <select> — two umber chevron halves, no native chrome */
select{
  -webkit-appearance:none; appearance:none;
  padding-right:44px;
  background-image:linear-gradient(45deg, transparent 50%, var(--umber) 50%), linear-gradient(135deg, var(--umber) 50%, transparent 50%);
  background-position:calc(100% - 22px) 55%, calc(100% - 16px) 55%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9 · MASTHEAD + DRAWER — the title page
   Sized in PX on purpose (see html.ca-text-lg): the breakpoint math below is
   measured with fonts loaded and must not move when the reader enlarges the
   body text. Sticky; .is-compact on scroll-down keeps it ≤56px.
   ═══════════════════════════════════════════════════════════════════════ */
.navbar{
  position:sticky; top:0; z-index:100;
  background:var(--vellum-light);
  border-bottom:var(--bw-thick) solid var(--umber);
  font-size:16px;
}
/* the vine strip under the title page: an OPAQUE 8px vellum-light strip
   (the masthead is sticky; the page would show through a transparent one)
   carrying a --m-vine repeat in leaf */
.navbar::after{
  content:''; position:absolute; left:0; right:0; bottom:-11px; height:11px;
  pointer-events:none; z-index:1;
  background-color:var(--vellum-light);
  border-bottom:1px solid var(--ochre);
}
.navbar::before{
  content:''; position:absolute; left:0; right:0; bottom:-10px; height:8px; z-index:2; pointer-events:none;
  background-color:var(--leaf);
  -webkit-mask:var(--m-vine) left center/24px 8px repeat-x;
          mask:var(--m-vine) left center/24px 8px repeat-x;
}
.navbar-inner{
  max-width:var(--container); margin-inline:auto;
  padding:10px var(--gutter);
  min-height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition:padding var(--t) var(--ease);
}
.logo{ display:inline-flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; color:var(--umber); flex:none; }
.logo:hover{ color:var(--umber); }
.logo-icon{ --mark-size:48px; }
.logo-text{ display:flex; flex-direction:column; line-height:1; }
.logo-name, .footer-brand-name{
  font-family:var(--display); font-weight:var(--fw-display);
  font-size:32px; line-height:1;                /* Grenze at 32px exactly — the floor */
  color:var(--indigo); letter-spacing:0;
}
.logo-sub{
  font-family:var(--accent); font-style:italic; font-size:15px; line-height:1.1;
  color:var(--umber-2);                          /* 7.68 */
  margin-top:3px; white-space:nowrap;
}
.logo:focus-visible{ outline:3px solid var(--focus); outline-offset:4px; }

.nav-links{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.nav-link{
  display:inline-flex; align-items:center;
  min-height:44px; padding:6px 7px;
  font-family:var(--caps); font-weight:500; font-size:15.5px;
  letter-spacing:.02em; white-space:nowrap;
  color:var(--umber); text-decoration:none;
  border:var(--bw-hair) solid transparent; border-radius:var(--r-xs);
  transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav-link:hover{ background:var(--vellum-deep); color:var(--umber); border-color:var(--umber); }
.nav-link:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.nav-link.active, .nav-link[aria-current="page"]{
  background:var(--indigo); color:var(--on-indigo);            /* 9.78 */
  border-color:var(--umber); box-shadow:var(--pop-sm);
}

/* Masthead search box */
.search-box, .ca-searchbar{
  display:flex; align-items:center; gap:6px;
  background:var(--vellum);
  border:var(--bw-hair) solid var(--umber); border-radius:var(--r-xs);
  box-shadow:var(--pop-sm);
  padding:0 10px;
}
/* 180, not 176 and no longer 132. The 132 was measured against the SEVEN-item
   menu bar, where the row came to 1244px inside a 1200px container and the
   box was the only thing left to take the 44px out of. VOCABULARY.md cut the
   bar to six shorter labels and handed 118px of that back, and 132 had a real
   cost: 10px of padding a side and the magnifier left the input 84px of
   client width for a placeholder that measures ~112, so the box rendered a
   word and a half and a clipped third. At 180 the placeholder sets in full
   and the row still ends ~70px inside the container at 1340, the narrowest
   width that shows the box at all. Keep this in step with the same number in
   _templates/_nav.html; §21 holds the breakpoint it is measured against. */
.navbar .search-box{ width:180px; flex:none; }
.search-box{ width:176px; flex:none; }
.search-box:focus-within, .ca-searchbar:focus-within{ outline:3px solid var(--focus); outline-offset:2px; }
.search-icon{ flex:none; color:var(--umber-2); }
.search-input{
  border:0; background:transparent; outline:none;
  min-height:44px; min-width:0; width:100%;
  font-family:var(--font); font-size:16px; color:var(--umber);
}
.ca-searchbar .search-input{ font-size:var(--fs-body); min-height:52px; }
.search-input::placeholder{ color:var(--umber-2); opacity:1; }     /* 6.90 */

/* A / A+ text-size control */
.text-size{
  display:inline-flex; align-items:baseline; gap:2px; flex:none;
  min-width:44px; min-height:44px; padding:4px 9px;
  font-family:var(--caps); font-weight:700; line-height:1;
  color:var(--umber); background:var(--vellum-light);
  border:var(--bw-hair) solid var(--umber); border-radius:var(--r-xs);
  box-shadow:var(--pop-sm);
}
.text-size__a{ font-size:14px; }
.text-size__plus{ font-size:19px; }
.text-size:hover{ background:var(--vellum-deep); }
.text-size[aria-pressed="true"]{ background:var(--ochre); color:var(--on-ochre); }
.text-size:active{ translate:1px 1px; box-shadow:var(--pop-in); }

.menu-toggle{
  display:none;
  width:48px; height:48px; flex:0 0 auto; min-width:48px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:0;
  background:var(--vellum-light); color:var(--umber);
  border:var(--bw-hair) solid var(--umber); border-radius:var(--r-xs);
  box-shadow:var(--pop-sm); cursor:pointer;
}
.menu-toggle span{
  display:block; width:24px; height:3px; background:var(--umber);
  transition:translate var(--t) var(--ease), rotate var(--t) var(--ease), opacity var(--t) var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){ translate:0 8px; rotate:45deg; }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ translate:0 -8px; rotate:-45deg; }
.menu-toggle:active{ translate:1px 1px; box-shadow:var(--pop-in); }

/* .is-compact — set by site-extras.js on scroll-down. The tallest child is a
   44px control + 2×4px padding + 3px border = 55px; the vine strip hides so
   the sticky block is ≤56px. Scroll-up restores the full title page. */
.navbar.is-compact .navbar-inner{ padding-block:4px; min-height:0; }
.navbar.is-compact .logo-sub{ display:none; }
.navbar.is-compact .logo-icon{ --mark-size:36px; }
.navbar.is-compact .menu-toggle{ width:44px; height:44px; min-width:44px; }
.navbar.is-compact .search-box{ border-width:1px; }
.navbar.is-compact .search-input{ min-height:42px; }   /* 42 + 2 border = a 44px box */
.navbar.is-compact::before, .navbar.is-compact::after{ display:none; }

/* The drawer: hidden, not merely off-screen (visibility flips after the
   slide on close, immediately on open — see the skeleton's note). */
.mobile-nav{
  position:fixed; top:0; right:0; z-index:130;
  width:min(86vw, 340px); height:100dvh;
  padding:52px 26px; padding-bottom:max(52px, env(safe-area-inset-bottom));
  background:var(--vellum-light);
  border-left:var(--bw-thick) solid var(--umber);
  translate:100% 0; visibility:hidden;
  transition:translate var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
  overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:4px;
  font-size:16px;
}
.mobile-nav.is-active, .mobile-nav.active, .mobile-nav.open{
  translate:0 0; visibility:visible;
  transition:translate var(--t-slow) var(--ease-out), visibility 0s linear 0s;
}
.mobile-nav-link{
  display:block; padding:12px 16px; min-height:52px;
  font-family:var(--caps); font-weight:700; font-size:19px; letter-spacing:.03em;
  color:var(--umber); text-decoration:none;
  border-bottom:var(--bw-hair) solid var(--line-soft);
}
.mobile-nav-link:hover{ background:var(--vellum-deep); color:var(--umber); }
.mobile-nav-link:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; background:var(--vellum-deep); color:var(--umber); }
.mobile-nav-link:active, .mobile-nav-link.active, .mobile-nav-link[aria-current="page"]{ background:var(--ochre); color:var(--on-ochre); }
.mobile-overlay{
  position:fixed; inset:0; z-index:120;
  background:rgba(27,39,66,.6);
  opacity:0; visibility:hidden;
  transition:opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.mobile-overlay.is-active, .mobile-overlay.active{ opacity:1; visibility:visible; }

/* The nav drawer's OWN scrim. site-extras.js builds it as a sibling of
   #mobileNav so both sit inside .navbar's stacking context (position:sticky +
   z-index:100), where 120 < 130 puts the drawer on top.

   It is a separate class from .mobile-overlay on purpose. The article page
   ships its own .mobile-overlay for the abbreviations sidebar, and the drawer
   used to adopt it with querySelector('.mobile-overlay'): that put the drawer's
   scrim in the ROOT stacking context at 120, above the whole masthead subtree
   at 100, so on every pattern page the menu opened and not one link inside it
   could be tapped. Two owners, one element. Keep them apart. */
.ca-nav-scrim{
  position:fixed; inset:0; z-index:120;
  background:rgba(27,39,66,.6);
  opacity:0; visibility:hidden;
  transition:opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.ca-nav-scrim.is-active{ opacity:1; visibility:visible; }
.ca-nav-scrim[hidden]{ display:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   10 · THE OPENING — frontispiece facing the title page
   A book opens on two pages. Left: one matted photograph (build_vitrine.py
   chooses and mats it; compile.py writes the caption). Right: the title
   page, centred type on card stock. The gutter between them is a dashed
   indigo rule. No photo grid, no stamp, no stats, no callouts.
   ═══════════════════════════════════════════════════════════════════════ */
.ca-opening{ padding-block:var(--ca-space-7) var(--ca-space-8); }
.ca-book{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  padding:0; background:var(--vellum-light); box-shadow:var(--pop-lg);
}
.ca-book > *{ min-width:0; }
.ca-frontis{
  margin:0; padding:var(--ca-space-6);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--ca-space-4);
  border-right:2px dashed var(--indigo);
}
.ca-frontis__link{ display:block; width:100%; max-width:520px; }
.ca-frontis__link:focus-visible{ outline:3px solid var(--focus); outline-offset:4px; }
.ca-frontis img{ display:block; width:100%; height:auto; border:1px solid var(--umber); box-shadow:var(--pop); }
.ca-frontis__caption{
  font-family:var(--accent); font-style:italic; font-size:1.15rem; line-height:1.35;
  color:var(--umber-2); text-align:center; max-width:40ch;
}
.ca-frontis__label, .ca-frontis__plate{ font-family:var(--caps); font-style:normal; font-weight:700; letter-spacing:var(--track-caps); }
.ca-frontis__label{ color:var(--ochre-d); font-size:var(--fs-sm); }
.ca-frontis__plate{ color:var(--indigo); }

.ca-title{
  padding:var(--ca-space-7) var(--ca-space-6);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.ca-title__press{
  display:inline-flex; align-items:center; gap:12px; margin:0 0 var(--ca-space-4);
  font-family:var(--caps); font-weight:700; font-size:var(--fs-sm); letter-spacing:var(--track-ribbon);
  color:var(--ochre-d);
}
.ca-title__mark{ --mark-size:36px; }
.ca-title__h1{
  font-family:var(--display); font-weight:var(--fw-display); font-size:var(--fs-h1); line-height:var(--lh-display);
  color:var(--indigo); margin:0 0 var(--ca-space-4); max-width:18ch; text-wrap:balance; overflow-wrap:anywhere;
}
.ca-title .ca-rule{ margin:0 auto var(--ca-space-4); }
.ca-title__vol-line{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin:0 0 var(--ca-space-4);
  font-family:var(--caps); font-weight:700; font-size:1.15rem; letter-spacing:var(--track-caps); color:var(--umber);
  font-variant-numeric:tabular-nums;
}
.ca-title__sep{ color:var(--ochre); }
.ca-title__lede{ max-width:46ch; font-size:clamp(1.1rem, 1.5vw, 1.25rem); line-height:1.65; color:var(--umber); margin:0 0 var(--ca-space-5); }
.ca-title__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--ca-space-3); }
.ca-title__imprint{ font-family:var(--accent); font-style:italic; font-size:1rem; color:var(--umber-2); margin:var(--ca-space-5) 0 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   11 · CARDS + GRIDS
   The featured grid is emitted by compile.py :: card_html() — those class
   names are a contract (featured-card / -ribbon / -img / -body / -skill /
   -title / -desc / -cta-inline). Restyle, never rename. search.js emits the
   same shape with 400×400 images; the .featured-img WRAPPER rule keeps both
   grids even. 12 cards = 4×3 at 1200 = 3×4 at ≤1100 = 2×6 on phones.
   ═══════════════════════════════════════════════════════════════════════ */
.featured-grid, .ca-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
  gap:var(--ca-space-5);
}
/* the letterpress index card: vellum-light, 1.5px umber, double impression,
   no tilt — upright, like everything printed */
.featured-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--vellum-light); color:var(--umber);
  border:var(--bw-hair) solid var(--umber); border-radius:var(--r-xs);
  box-shadow:var(--pop);
  text-decoration:none; overflow:hidden;
  transition:box-shadow var(--t-fast) var(--ease), translate var(--t-fast) var(--ease);
}
.featured-card:hover{ color:var(--umber); box-shadow:2px 2px 0 var(--umber), 2px 2px 0 3px var(--ochre); }
.featured-card:active{ translate:1px 1px; box-shadow:var(--pop-in); }
.featured-card:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
/* the 8px vellum-light mat: every photograph sits on plain parchment */
.featured-img{
  padding:8px; background:var(--vellum-light);
  border-bottom:var(--bw-hair) solid var(--umber);
}
.featured-img img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border:1px solid var(--umber); background:var(--vellum-deep);
}
.featured-ribbon{
  position:absolute; top:14px; left:14px; z-index:3;
  padding:4px 10px;
  font-family:var(--caps); font-weight:700; font-size:var(--fs-xs); letter-spacing:var(--track-caps);
  color:var(--on-indigo); background:var(--indigo);     /* 9.78 */
  border:1px solid var(--umber); outline:1px solid var(--ochre); outline-offset:1px;
}
.featured-body{ display:flex; flex-direction:column; flex:1 1 auto; gap:8px; padding:14px 16px 16px; }
.featured-body .featured-skill{ align-self:flex-start; }
.featured-title{
  font-family:var(--font); font-weight:700; font-size:1.2rem; line-height:1.25;
  color:var(--umber); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-wrap:pretty;
}
.featured-desc{
  font-size:var(--fs-sm); line-height:1.5; color:var(--umber-2); margin:0;   /* 7.68 */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.featured-cta-inline{
  margin-top:auto; padding-top:6px;
  font-family:var(--caps); font-weight:700; font-size:var(--fs-sm); letter-spacing:var(--track-caps);
  color:var(--indigo);
}
.featured-card:hover .featured-cta-inline{ color:var(--madder-d); }

/* Plate numbering — an ADDITION to the card contract (compile.py wraps the
   number and the skill badge in .ca-plate-meta; search.js cards have neither
   and still lay out). */
.ca-plate-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.ca-plate-no{ font-family:var(--caps); font-weight:700; font-size:var(--fs-xs); letter-spacing:var(--track-caps); color:var(--madder-d); font-variant-numeric:tabular-nums; }
.ca-plates-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--ca-space-4) var(--ca-space-7); align-items:end; margin-bottom:var(--ca-space-6); }
.ca-plates-head .ca-h2{ margin-bottom:0; }
.ca-plates-note{ margin:0; font-size:var(--fs-lg); line-height:var(--lh-body); color:var(--umber); max-width:48ch; }
.ca-plates-foot{ text-align:center; margin:var(--ca-space-6) 0 0; }

/* ── THE CONTENTS — leader-dot rows ──────────────────────────────────────
   The book's table of contents. Each row is ONE link ≥44px: numeral ·
   label · dotted leader · count. Chapters and editions are written by
   compile.py (chips / editions markers); apparatus rows are hand-written. */
.ca-contents__head{ max-width:62ch; margin:0 auto var(--ca-space-6); text-align:center; }
.ca-contents__head .ca-h2{ margin-bottom:var(--ca-space-4); }
.ca-contents__note{ margin:0; color:var(--umber-2); font-size:var(--fs-body); line-height:var(--lh-body); }
.ca-toc-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--ca-space-6) var(--ca-space-8); }
/* Pre-launch, the chapters and the editions are one unset row each while
   the apparatus is six real ones, and two columns leave the left one a
   third the height of the right. One narrower column reads as what it is:
   a short table of contents. `:has` means this reverts by itself the
   moment compile.py stops writing .ca-toc__row--unset. */
.ca-toc-grid:has(.ca-toc__row--unset){
  grid-template-columns:minmax(0,1fr); gap:var(--ca-space-5);
  max-width:760px; margin-inline:auto;
}
.ca-toc-grid:has(.ca-toc__row--unset) .ca-toc__h--later{ margin-top:var(--ca-space-5); }
.ca-toc__h{
  display:flex; align-items:center; gap:8px; margin:0 0 var(--ca-space-2);
  font-family:var(--caps); font-weight:700; font-size:1.05rem; letter-spacing:var(--track-caps); color:var(--ochre-d);
}
.ca-toc__h::before{ content:''; width:12px; height:12px; flex:none; background-color:var(--ochre); -webkit-mask:var(--m-fleuron) center/contain no-repeat; mask:var(--m-fleuron) center/contain no-repeat; }
.ca-toc__h--later{ margin-top:var(--ca-space-6); }
.ca-toc{ list-style:none; margin:0; padding:0; border-top:1.5px solid var(--umber); }
.ca-toc__row{ border-bottom:1px solid var(--line-soft); }
.ca-toc__link{
  display:flex; align-items:baseline; gap:10px; min-height:50px; padding:10px 4px;
  color:var(--umber); text-decoration:none; font-size:1.12rem; line-height:1.3;
}
.ca-toc__link:hover{ color:var(--umber); }
.ca-toc__link:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.ca-toc__num{ flex:none; width:2.4em; font-family:var(--caps); font-weight:700; color:var(--madder-d); }
.ca-toc__label{ font-weight:700; }
.ca-toc__link:hover .ca-toc__label{ color:var(--madder-d); text-decoration:underline; text-decoration-color:var(--ochre); text-underline-offset:3px; }
.ca-toc__sub{ font-weight:400; font-family:var(--accent); font-style:italic; color:var(--umber-2); }
.ca-toc__leader{ flex:1 1 auto; min-width:28px; border-bottom:2px dotted var(--umber-2); translate:0 -.3em; opacity:.75; }
.ca-toc__count{ flex:none; font-family:var(--caps); font-weight:500; font-size:var(--fs-sm); letter-spacing:var(--track-caps); color:var(--umber-2); font-variant-numeric:tabular-nums; }
.ca-toc--plain .ca-toc__count{ font-family:var(--accent); font-style:italic; letter-spacing:0; font-size:1rem; }
/* A contents row with nowhere to go yet: same leader-dot rhythm as the rows
   around it, in the muted ink, and NOT a link, because there is no leaf to
   open. Written by compile._toc_unset() while the book holds no plates. */
.ca-toc__row--unset{
  display:flex; align-items:baseline; gap:10px; min-height:50px; padding:10px 4px;
  font-size:1.12rem; line-height:1.3; color:var(--umber-2);
}
.ca-toc__row--unset .ca-toc__label{ font-weight:400; font-family:var(--accent); font-style:italic; }
.ca-toc__row--unset .ca-toc__count{ font-family:var(--accent); font-style:italic; letter-spacing:0; font-size:1rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   12 · THE PROOFING BENCH · ERRATA · THE TYPE CASE
   Bench: the one indigo band on the title page; three numbered steps on
   card stock. Errata: a dated list or the honest empty state. Type case:
   four sorts pulled from the glossary.
   ═══════════════════════════════════════════════════════════════════════ */
.ca-bench-band{ --tile-ink:var(--ochre); --tile-alpha:.10; }
.ca-bench-head{ max-width:64ch; margin-bottom:var(--ca-space-6); }
.ca-bench-lede{ margin:0; font-size:var(--fs-lg); line-height:var(--lh-body); color:var(--on-indigo-mut); }   /* 6.88 on indigo */
.ca-bench{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--ca-space-5); }
.ca-bench__step{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:var(--ca-space-5); background:var(--vellum-light); color:var(--umber);
  border:var(--bw-hair) solid var(--umber); border-radius:var(--r-xs); box-shadow:var(--pop);
}
.ca-bench__num{
  display:grid; place-items:center; width:60px; height:60px; margin-bottom:6px;
  font-family:var(--caps); font-weight:700; font-size:1.9rem; line-height:1;
  color:var(--on-ochre); background:var(--ochre); border:2px solid var(--umber); box-shadow:var(--pop-sm);
}
.ca-bench__title{ font-family:var(--display); font-weight:var(--fw-display); font-size:2rem; line-height:1.1; color:var(--indigo); margin:0; }
.ca-bench__text{ margin:0; color:var(--umber-2); line-height:1.6; }
.ca-bench-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--ca-space-3) var(--ca-space-5); margin:var(--ca-space-6) 0 0; }
.ca-bench-foot__link{ font-family:var(--caps); font-weight:700; letter-spacing:var(--track-caps); color:var(--on-indigo); text-decoration-color:var(--ochre); text-underline-offset:3px; min-height:44px; display:inline-flex; align-items:center; }
.ca-bench-foot__link:hover{ color:var(--ochre); }

/* errata */
.ca-errata-band .ca-sub{ max-width:66ch; }
.ca-errata-empty{ padding:var(--ca-space-5); background:var(--vellum-light); border:var(--bw-hair) solid var(--umber); box-shadow:var(--pop-sm); }
.ca-errata-empty__line{ font-family:var(--accent); font-style:italic; font-size:1.45rem; line-height:1.3; color:var(--indigo); margin:0 0 8px; }
.ca-errata-empty p:last-child{ margin:0; color:var(--umber-2); line-height:1.6; }
.ca-errata-list{ list-style:none; margin:0; padding:0; border-top:1.5px solid var(--umber); }
.ca-erratum{ display:grid; grid-template-columns:9em minmax(0,1fr); gap:var(--ca-space-4); padding:var(--ca-space-4) 0; border-bottom:1px solid var(--line-soft); }
.ca-erratum__date{ font-family:var(--caps); font-weight:700; font-size:var(--fs-sm); letter-spacing:var(--track-caps); color:var(--umber-2); font-variant-numeric:tabular-nums; }
.ca-erratum__plate{ font-weight:700; color:var(--indigo); }
.ca-erratum__what{ margin:4px 0 0; }
.ca-erratum__was{ text-decoration:line-through; color:var(--madder-d); }
.ca-erratum__now{ font-weight:700; }
.ca-erratum__note{ margin:4px 0 0; font-size:var(--fs-sm); color:var(--umber-2); line-height:1.5; }
.ca-errata-foot{ margin:var(--ca-space-4) 0 0; font-family:var(--caps); font-weight:700; letter-spacing:var(--track-caps); }
.ca-errata-foot a{ display:inline-flex; align-items:center; min-height:44px; }

/* the type case */
.ca-typecase-head{ max-width:64ch; margin-bottom:var(--ca-space-6); }
.ca-sorts{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--ca-space-4); }
.ca-sort{
  display:flex; flex-direction:column; gap:var(--ca-space-3); padding:var(--ca-space-4);
  background:var(--vellum); color:var(--umber); text-decoration:none;
  border:var(--bw-hair) solid var(--umber); border-radius:var(--r-xs); box-shadow:var(--pop-sm);
  transition:box-shadow var(--t-fast) var(--ease), translate var(--t-fast) var(--ease);
}
.ca-sort:hover{ color:var(--umber); box-shadow:2px 2px 0 var(--umber), 2px 2px 0 2px var(--ochre); }
.ca-sort:active{ translate:1px 1px; box-shadow:var(--pop-in); }
.ca-sort:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.ca-sort__face{
  display:grid; place-items:center; align-self:flex-start; min-width:76px; height:72px; padding:0 14px;
  font-family:var(--caps); font-weight:700; font-size:1.9rem; line-height:1;
  color:var(--vellum-light); background:var(--indigo); border:2px solid var(--umber);
  box-shadow:inset 0 0 0 2px var(--indigo), inset 0 0 0 3px var(--ochre);
}
.ca-sort__body{ display:flex; flex-direction:column; gap:6px; }
.ca-sort__name{ font-family:var(--caps); font-weight:700; font-size:1.15rem; line-height:1.2; }
.ca-sort__def{ font-size:var(--fs-sm); line-height:1.55; color:var(--umber-2); }
.ca-sort:hover .ca-sort__name{ color:var(--madder-d); }
.ca-typecase-foot{ margin:var(--ca-space-5) 0 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   13 · NEWSLETTER + FORMS — the Folio Post
   ═══════════════════════════════════════════════════════════════════════ */
.ca-newsletter-section{ padding-block:var(--ca-space-8); }
.ca-newsletter-card{ overflow:visible; background:var(--vellum-light); }
.ca-newsletter-content{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
.ca-newsletter-left{
  position:relative; isolation:isolate;
  padding:var(--ca-space-6);
  background:var(--indigo-deep); color:var(--on-indigo-deep);
  --fg:var(--on-indigo-deep); --fg-mut:var(--on-indigo-mut); --link:var(--on-indigo-deep); --link-hover:var(--ochre);
  --focus:var(--ochre); --display-ink:var(--vellum); --plate-halo:var(--indigo-deep); --plate-mark:var(--ochre);
  /* This panel is an indigo-deep ground but not a .ca-band--indigo-deep, so it
     has to re-declare the eyebrow ink itself. Without it .ca-eyebrow fell back
     to --ochre-d (#7a5210), which is 2.15 on #1b2742 — the "When a plate is set" kicker was effectively unreadable on /, /search/ and /404. Ochre is
     5.52 here, the same value .ca-band--indigo-deep uses. */
  --eyebrow-ink:var(--ochre);
  border-right:var(--bw-hair) solid var(--umber);
}
.newsletter-illustration{ --mark-size:56px; color:var(--ochre); margin-bottom:var(--ca-space-4); }
.ca-newsletter-title{ font-family:var(--display); font-weight:var(--fw-display); font-size:var(--fs-h2); line-height:var(--lh-display); color:var(--vellum); margin:0 0 var(--ca-space-3); }
.ca-newsletter-subtitle{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--on-indigo-deep); max-width:40ch; margin:0 0 var(--ca-space-5); }
.newsletter-seal{ --size:104px; }
.ca-newsletter-right{ padding:var(--ca-space-6); }
.form-group{ margin-bottom:var(--ca-space-4); }
.form-group label, .ca-label{ display:block; font-family:var(--caps); font-weight:700; font-size:var(--fs-sm); letter-spacing:var(--track-caps); color:var(--umber); margin-bottom:6px; }
.req{ color:var(--madder-d); }
.form-group input, .form-group select, .form-group textarea, .ca-input,
.ca-form input, .ca-form select, .ca-form textarea{
  width:100%; min-height:52px; padding:10px 14px;
  font-family:var(--font); font-size:var(--fs-body); color:var(--umber);
  background:var(--vellum);
  border:var(--bw-hair) solid var(--umber); border-radius:var(--r-xs);
  box-shadow:inset 2px 2px 0 rgba(42,34,25,.08);
}
.form-group textarea, .ca-form textarea{ min-height:72px; resize:vertical; }
.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.form-group input::placeholder, .form-group textarea::placeholder{ color:var(--umber-2); opacity:1; }
.ca-form-text{ display:block; font-size:var(--fs-sm); color:var(--umber-2); margin-top:6px; line-height:1.4; }
.submit-button{ width:100%; min-height:56px; margin-top:var(--ca-space-2); }
.ca-privacy-note{ font-size:var(--fs-sm); color:var(--umber-2); margin:var(--ca-space-3) 0 0; line-height:1.5; }
.ca-privacy-note a{ color:var(--madder-d); }
.ca-nextleaf-note{ margin:0; font-size:var(--fs-sm); line-height:1.5; color:var(--on-indigo-mut); }
.ca-nextleaf-note a{ color:var(--vellum); text-decoration-color:var(--ochre); }
.ca-nextleaf-note a:hover{ color:var(--ochre); }

/* ═══════════════════════════════════════════════════════════════════════════
   15 · THE COLOPHON — the last leaf
   indigo-deep ground, acanthus in ochre .08. Computed on #1b2742: vellum
   body 11.32, muted links #d8c79c 8.88, ochre headings / credit 5.52 — the
   one sanctioned ochre-as-text. An 8px vine strip in ochre above. One
   paragraph, one running index, one imprint line — not a link wall.
   ═══════════════════════════════════════════════════════════════════════ */
.ca-colophon{
  position:relative;
  background-color:var(--indigo-deep); color:var(--on-indigo-deep);
  --fg:var(--on-indigo-deep); --fg-mut:var(--on-indigo-mut); --link:var(--on-indigo-mut); --link-hover:var(--ochre);
  --line:var(--on-indigo-deep); --focus:var(--ochre);
  padding:calc(var(--ca-space-7) + 8px) 0 calc(var(--ca-space-7) + env(safe-area-inset-bottom));
  border-top:3px solid var(--umber);
}
.ca-colophon::after{
  content:''; position:absolute; left:0; right:0; top:6px; height:8px; pointer-events:none;
  background-color:var(--ochre); opacity:.9;
  -webkit-mask:var(--m-vine) left center/24px 8px repeat-x; mask:var(--m-vine) left center/24px 8px repeat-x;
}
.ca-colophon__card{ background:rgba(245,236,214,.04); border-color:var(--ochre); padding:var(--ca-space-6); box-shadow:none; }
.ca-colophon__head{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; margin-bottom:var(--ca-space-4); }
.ca-colophon__mark{ --mark-size:44px; box-shadow:0 0 0 2px var(--indigo-deep), 0 0 0 3.5px var(--ochre); }
.ca-colophon__name{ font-family:var(--display); font-weight:var(--fw-display); font-size:2rem; line-height:1; color:var(--vellum-light); margin:0; }
.ca-colophon__kicker{ margin:0 0 0 auto; font-family:var(--accent); font-style:italic; font-size:1.2rem; color:var(--ochre); }
.ca-colophon__text{ max-width:72ch; margin:0 0 var(--ca-space-5); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--on-indigo-deep); }
.ca-colophon__text a{ color:var(--vellum-light); font-weight:700; text-decoration-color:var(--ochre); text-underline-offset:3px; }
.ca-colophon__text a:hover{ color:var(--ochre); }
.ca-colophon__index{ border-top:1px solid var(--ochre); }
.ca-colophon__row{ display:grid; grid-template-columns:9em minmax(0,1fr); gap:var(--ca-space-2) var(--ca-space-4); padding:var(--ca-space-2) 0; border-bottom:1px solid rgba(201,149,43,.35); }
.ca-colophon__h{ display:flex; align-items:center; gap:8px; min-height:44px; margin:0; font-family:var(--caps); font-weight:700; font-size:1.02rem; letter-spacing:var(--track-caps); color:var(--ochre); }
.ca-colophon__h::before{ content:''; width:11px; height:11px; flex:none; background-color:var(--ochre); -webkit-mask:var(--m-fleuron) center/contain no-repeat; mask:var(--m-fleuron) center/contain no-repeat; }
.ca-colophon__links{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; }
.ca-colophon__links a{ display:inline-flex; align-items:center; min-height:44px; padding:0 4px; color:var(--on-indigo-mut); text-decoration:none; font-size:var(--fs-body); }
.ca-colophon__links a::after{ content:''; width:8px; height:8px; margin-left:10px; background-color:var(--ochre); opacity:.7; -webkit-mask:var(--m-fleuron) center/contain no-repeat; mask:var(--m-fleuron) center/contain no-repeat; }
.ca-colophon__links a:last-child::after{ display:none; }
.ca-colophon__links a:hover{ color:var(--ochre); text-decoration:underline; text-underline-offset:3px; }
.ca-colophon__links a:focus-visible{ outline:3px solid var(--ochre); outline-offset:2px; }
.ca-colophon__imprint{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--ca-space-3) var(--ca-space-5);
  margin-top:var(--ca-space-5); padding-top:var(--ca-space-4); border-top:1px solid var(--ochre);
}
.ca-colophon__copy{ margin:0; font-size:var(--fs-sm); color:var(--on-indigo-mut); }
.ca-colophon__legal{ margin:0; display:flex; flex-wrap:wrap; gap:0 var(--ca-space-4); }
.ca-colophon__legal a{ display:inline-flex; align-items:center; min-height:44px; font-size:var(--fs-sm); color:var(--on-indigo-mut); text-decoration:none; }
.ca-colophon__legal a:hover{ color:var(--ochre); text-decoration:underline; }
.ca-colophon__legal a:focus-visible{ outline:3px solid var(--ochre); outline-offset:2px; }
.ca-colophon__credit{ margin:0; font-family:var(--accent); font-style:italic; font-size:1.1rem; color:var(--ochre); }

/* ═══════════════════════════════════════════════════════════════════════════
   16 · LISTINGS · PAGINATION · SEARCH · BREADCRUMBS
   (the /patterns/ and /search/ pages keep these classes; styled now so those
   pages do not look broken when they pick up this stylesheet)
   ═══════════════════════════════════════════════════════════════════════ */
.ca-patterns-hero, .ca-leaf-head{
  position:relative; --section-bg:var(--vellum-deep); background:var(--vellum-deep);
  --chip-bg:var(--vellum-light); --eyebrow-ink:var(--indigo); --plate-halo:var(--vellum-deep);
  padding-block:var(--ca-space-7) var(--ca-space-6);
  border-bottom:var(--bw-thick) solid var(--umber);
}
.patterns-hero--stamped .container{ position:relative; }
.patterns-hero-stamp{ display:none; }
@media (min-width:1100px){
  .patterns-hero--stamped .container{ padding-right:230px; }
  .patterns-hero-stamp{ display:inline-flex; position:absolute; top:50%; right:12px; translate:0 -50%; }
}
.patterns-kicker, .ca-leaf-head__kicker{ display:inline-flex; align-items:center; gap:8px; font-family:var(--caps); font-weight:500; font-size:var(--fs-xs); letter-spacing:var(--track-caps); color:var(--indigo); margin-bottom:var(--ca-space-2); }
.patterns-kicker::before, .ca-leaf-head__kicker::before{ content:''; width:12px; height:12px; background-color:currentColor; -webkit-mask:var(--m-fleuron) center/contain no-repeat; mask:var(--m-fleuron) center/contain no-repeat; }
.patterns-h1, .ca-leaf-head__h1{ font-family:var(--display); font-weight:var(--fw-display); font-size:clamp(2.2rem, 5vw, 3.6rem); line-height:var(--lh-display); color:var(--indigo); margin:0 0 var(--ca-space-3); text-transform:none; }
.patterns-lede, .ca-leaf-head__lede{ color:var(--umber); max-width:60ch; font-size:var(--fs-lg); }
.ca-patterns-breadcrumb, .article-breadcrumb, .ca-leaf-head__crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-family:var(--caps); font-size:var(--fs-xs); letter-spacing:var(--track-caps); color:var(--umber-2);
  margin-bottom:var(--ca-space-4);
}
.ca-patterns-breadcrumb a, .article-breadcrumb a, .ca-leaf-head__crumb a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; margin-block:-10.7px; color:var(--indigo); text-decoration:none; }
.ca-patterns-breadcrumb a:hover, .article-breadcrumb a:hover, .ca-leaf-head__crumb a:hover{ color:var(--madder-d); text-decoration:underline; }
.sep{ color:var(--umber-2); }
.ca-chips-browse{ margin-bottom:var(--ca-space-4); }
.ca-chip-facet{ cursor:pointer; }
.ca-search-facets{ align-items:flex-start; gap:var(--ca-space-5); }
.ca-search-facets > *{ flex:1 1 220px; min-width:0; }
.ca-search-facets .ca-side-label{ margin:0 0 var(--ca-space-2); color:var(--umber); }
.ca-facet, .ca-seg{
  display:inline-flex; align-items:center; min-height:44px; padding:8px 16px;
  font-family:var(--caps); font-weight:700; font-size:var(--fs-sm); letter-spacing:var(--track-caps);
  background:var(--vellum-light); color:var(--umber);
  border:var(--bw-hair) solid var(--umber); border-radius:var(--r-xs); box-shadow:var(--pop-sm);
  text-decoration:none; cursor:pointer;
}
.ca-facet:hover, .ca-seg:hover{ background:var(--vellum-deep); color:var(--umber); }
.ca-facet.active, .ca-facet[aria-current="page"], .ca-seg.active{ background:var(--indigo); color:var(--on-indigo); }
.results-bar, .ca-resultbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--ca-space-3);
  padding:var(--ca-space-3) 0 var(--ca-space-4); border-bottom:1px solid var(--ochre); margin-bottom:var(--ca-space-5);
}
.results-count, .ca-result-count{ font-family:var(--caps); font-weight:500; font-size:var(--fs-sm); letter-spacing:var(--track-caps); color:var(--umber-2); }
.ca-result-active{ font-family:var(--caps); font-weight:700; font-size:var(--fs-sm); letter-spacing:var(--track-caps); color:var(--madder-d); }
.pagination-section{ padding-block:var(--ca-space-7); }
.pagination-container{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--ca-space-2); }
.page-btn{ min-width:52px; min-height:52px; padding:10px 14px; background:var(--vellum-light); color:var(--umber); }
.page-btn:hover{ color:var(--umber); }
.page-btn[aria-current="page"], .page-btn.active{ background:var(--indigo); color:var(--on-indigo); }
.page-btn.disabled{ opacity:1; color:var(--umber-2); border-color:var(--line-soft); box-shadow:none; outline:none; }
.page-dots{ padding:0 var(--ca-space-2); color:var(--umber-2); font-family:var(--caps); }
.ca-empty-state{
  display:grid; justify-items:center; gap:var(--ca-space-2); text-align:center;
  padding:var(--ca-space-8) var(--gutter); background:var(--vellum-light);
  border:var(--bw-hair) dashed var(--umber); border-radius:var(--r-xs);
}
.ca-empty-state .ca-btn{ margin-top:var(--ca-space-3); }
/* The pre-launch leaf offers two actions, not one, and .ca-empty-state is a grid
   that stacks its children. A row that wraps on a phone keeps them a pair. */
.ca-empty-state .ca-btn{ margin-top:var(--ca-space-3); }
.ca-btn-row{ display:flex; flex-wrap:wrap; gap:var(--ca-space-3); justify-content:center; }
.ca-empty-state .ca-btn-row{ margin-top:var(--ca-space-3); }
.ca-empty-state .ca-btn-row .ca-btn{ margin-top:0; }
.ca-empty-icon{ color:var(--indigo); margin-bottom:var(--ca-space-3); }
.ca-showmore-wrap{ display:flex; justify-content:center; margin-top:var(--ca-space-6); }
.ca-showmore-wrap [hidden]{ display:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   17 · PROSE · FAQ · TABLES · GLOSSARY · AUTHOR
   ═══════════════════════════════════════════════════════════════════════ */
.page-prose, .ca-prose, .ca-leaf-prose{ max-width:var(--measure); font-size:var(--fs-body); line-height:var(--lh-loose); color:var(--umber); }
.page-prose-flush, .ca-prose-section, .ca-leaf-prose--wide{ max-width:none; }
.page-prose h2, .ca-prose h2, .ca-page-h2, .ca-leaf-prose h2, .ca-leaf-h2{ font-family:var(--display); font-weight:var(--fw-display); font-size:2rem; line-height:var(--lh-display); color:var(--indigo); margin:var(--ca-space-7) 0 var(--ca-space-3); text-transform:none; }
.page-h2-flush{ margin-top:0; }
.page-prose h3, .ca-prose h3, .ca-leaf-prose h3, .ca-leaf-h3{ font-family:var(--caps); font-weight:700; font-size:1.25rem; margin:var(--ca-space-5) 0 var(--ca-space-2); }
/* .ca-leaf-h3 is the apparatus leaves' own h3 — a SIBLING of .ca-leaf-prose,
   not a child of it, because page_topic_hub.html emits subsections as
   heading + prose pairs. Without it those h3s fell back to the UA's bold
   serif at 1.17em and read as bold body copy. Same face and rhythm as the
   in-prose h3 above; the margin is tightened only where it follows its h2. */
.ca-leaf-h2 + .ca-leaf-h3{ margin-top:var(--ca-space-4); }
/* An approach run before a table: one line saying what the reader is about to
   look at. Set as an aside so it does not compete with the h2 above it. */
.ca-leaf-tablelede{ max-width:var(--measure); font-family:var(--accent); font-style:italic; font-size:1.2rem; line-height:1.5; color:var(--umber-2); margin:var(--ca-space-5) 0 var(--ca-space-2); }
.page-prose a, .ca-prose a, .ca-leaf-prose a{ color:var(--madder-d); font-weight:700; }   /* 6.52 */
/* Deliberately NOT `.ca-prose ul` — 2026-08-24. When the two inherited class
   prefixes were merged into `ca-`, this was the one selector list in the
   stylesheet whose meaning would have changed: two of its halves had been
   dead for months (they named a class no page here has ever carried) and the
   merge would have woken them onto `.ca-prose`, which /accessibility.html
   does use, recolouring that leaf's seven-item list from umber to umber-2.
   The screenshot sweep caught it. The dead halves are dropped rather than
   renamed, so every leaf renders exactly as it did before the merge. Keep
   list colour keyed to `.ca-leaf-prose`, which is the templated leaves. */
.page-list, .ca-leaf-prose ul, .ca-leaf-prose ol, .ca-leaf-list{ line-height:var(--lh-loose); color:var(--umber-2); }
.ca-prose-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:var(--ca-space-6); align-items:center; }
.ca-prose-figure{ position:relative; margin:0; }
.ca-prose-figure .ca-border{ padding:8px; }                 /* the vellum-light mat */
.ca-prose-figure img, .ca-prose-figure img{ width:100%; height:auto; border:1px solid var(--umber); }
.ca-prose-figure figcaption{ font-family:var(--accent); font-style:italic; font-size:1.15rem; line-height:1.25; color:var(--umber-2); margin-top:var(--ca-space-3); text-align:center; }
.ca-prose-figure .ca-margin-note{ top:-16px; left:-10px; }
.ca-byline{ display:flex; align-items:center; gap:14px; margin-top:var(--ca-space-5); padding-top:var(--ca-space-4); border-top:1px solid var(--ochre); }
.ca-portrait{ width:64px; height:64px; flex:none; border-radius:50%; background:var(--indigo); border:2px solid var(--umber); box-shadow:0 0 0 3px var(--ochre); display:grid; place-items:center; overflow:hidden; }
.ca-portrait svg{ width:100%; height:100%; }
.ca-byline-name{ font-family:var(--caps); font-weight:700; font-size:1.05rem; margin:0; }
.ca-byline-role{ font-family:var(--accent); font-style:italic; font-size:1.05rem; color:var(--umber-2); margin:0; }

.ca-answer-summary, .news-answer-summary{
  position:relative; background:var(--vellum-deep); border:var(--bw-hair) solid var(--umber); border-left-width:var(--bw-slab);
  padding:var(--ca-space-4) var(--ca-space-5); margin:0 0 var(--ca-space-5); font-size:var(--fs-lg); line-height:var(--lh-body); color:var(--umber);
}
.ca-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:var(--ca-space-5) 0; border:var(--bw-hair) solid var(--umber); }
/* The apparatus leaves' comparison table. .ca-table is the name; .ca-table is
   kept beside it the way .ca-prose / .ca-faq are, so old markup still lands.
   RULE: the table scrolls inside .ca-table-scroll, the page never does. min-width
   is the width below which cells start wrapping to three lines and the rows
   grow past a phone screen — 520px holds a 3-to-5 column table, and --wide
   raises it for the 6-and-7 column charts (yarn weights), which otherwise
   render 110px-tall rows on a 390px screen. Measured, not guessed. */
.ca-table, .ca-table{ min-width:520px; font-size:var(--fs-sm); background:var(--vellum-light); border-collapse:collapse; width:100%; }
.ca-table--wide{ min-width:720px; }
.ca-table th, .ca-table td{ padding:var(--ca-space-3) var(--ca-space-4); text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.ca-table thead th{ font-family:var(--caps); font-weight:700; letter-spacing:var(--track-caps); background:var(--indigo); color:var(--on-indigo); border-bottom:var(--bw-hair) solid var(--umber); vertical-align:bottom; }
.ca-table tbody tr:nth-child(2n), .ca-table tbody tr:nth-child(2n){ background:var(--vellum); }
@media (max-width:640px){
  .ca-table th, .ca-table td{ padding:var(--ca-space-2) var(--ca-space-3); }
}
.ca-link-card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:var(--ca-space-4); margin:var(--ca-space-5) 0; }
.ca-link-card{ display:block; padding:var(--ca-space-4); background:var(--vellum-light); border:var(--bw-hair) solid var(--umber); box-shadow:var(--pop-sm); text-decoration:none; color:var(--umber); }
.ca-link-card:hover{ color:var(--umber); box-shadow:var(--pop); }
.ca-link-card-title{ font-family:var(--caps); font-weight:700; font-size:1.1rem; margin:0 0 4px; }
.ca-link-card-note{ font-size:var(--fs-sm); color:var(--umber-2); margin:0; }
.ca-glossary-list{ display:grid; gap:var(--ca-space-4); list-style:none; padding:0; margin:0; }
.ca-glossary-item{ display:grid; grid-template-columns:auto 1fr; gap:var(--ca-space-4); align-items:start; padding:var(--ca-space-4); background:var(--vellum-light); border:var(--bw-hair) solid var(--umber); box-shadow:var(--pop-sm); }
.ca-glossary-abbr{ display:grid; place-items:center; min-width:64px; padding:var(--ca-space-2) var(--ca-space-3); font-family:var(--caps); font-weight:700; font-size:1.1rem; background:var(--ochre); color:var(--on-ochre); border:2px solid var(--umber); }
.ca-glossary-name{ font-family:var(--caps); font-weight:700; letter-spacing:var(--track-caps); }
.ca-glossary-def{ font-size:var(--fs-sm); color:var(--umber-2); margin:4px 0 0; }
.ca-glossary-uk{ font-size:var(--fs-sm); color:var(--umber-2); font-style:italic; }

/* FAQ — native <details>, no JS */
.qa-section{ padding-block:var(--ca-space-8); }
.qa-header{ text-align:center; margin-bottom:var(--ca-space-6); }
.qa-title{ font-family:var(--display); font-size:var(--fs-h2); color:var(--indigo); margin:0 0 var(--ca-space-2); }
.qa-list, .ca-faq{ display:grid; gap:var(--ca-space-3); }
.ca-faq details, .qa-list details, .news-faq-item{
  background:var(--vellum-light); border:var(--bw-hair) solid var(--umber); border-radius:var(--r-xs);
  box-shadow:var(--pop); overflow:hidden;
}
.ca-faq summary, .qa-list summary, .qa-question{
  display:flex; align-items:center; justify-content:space-between; gap:var(--ca-space-3);
  padding:var(--ca-space-3) var(--ca-space-5); min-height:56px;
  font-family:var(--caps); font-weight:700; font-size:1.15rem; line-height:1.3; letter-spacing:.01em;
  color:var(--umber); cursor:pointer; list-style:none;
}
.ca-faq summary::-webkit-details-marker, .qa-list summary::-webkit-details-marker{ display:none; }
.ca-faq summary:hover, .qa-list summary:hover{ background:var(--vellum); }
.ca-faq summary:focus-visible, .qa-list summary:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; }
.qa-icon, .ca-faq summary::after, .qa-list summary::after{
  content:'+'; flex:none; display:grid; place-items:center; width:34px; height:34px;
  font-family:var(--caps); font-weight:700; font-size:1.5rem; line-height:1;
  background:var(--ochre); color:var(--on-ochre); border:2px solid var(--umber);
  transition:rotate var(--t) var(--ease);
}
.ca-faq details[open] summary::after, .qa-list details[open] summary::after{ rotate:45deg; }
.qa-answer, .ca-faq details > *:not(summary), .ca-faq details > *:not(summary), .qa-list details > *:not(summary){
  padding:0 var(--ca-space-5) var(--ca-space-4); color:var(--umber); line-height:var(--lh-loose); max-width:var(--measure);
}
.ca-faq details a{ color:var(--madder-d); font-weight:700; }

.author-card{ display:flex; gap:var(--ca-space-4); align-items:flex-start; padding:var(--ca-space-5); background:var(--vellum-deep); border:var(--bw-hair) solid var(--umber); box-shadow:var(--pop-sm); }
.author-portrait{ width:82px; height:82px; flex:none; object-fit:cover; border:2px solid var(--umber); border-radius:50%; box-shadow:0 0 0 3px var(--ochre); background:var(--vellum-light); }
.author-name{ font-family:var(--caps); font-weight:700; font-size:1.2rem; margin:0 0 4px; }
.author-bio{ font-size:var(--fs-sm); line-height:1.65; color:var(--umber-2); margin:0; }
.source-attribution{ font-size:var(--fs-sm); color:var(--umber-2); margin-top:var(--ca-space-4); }

/* ── THE LEAVES (templated pages) — own vocabulary on top of the shared rules ──
   .ca-leaf-head = the running head of an inner leaf (vellum-deep band),
   .ca-leaf = a leaf's card stock, .ca-leaf-prose = its measure. The
   patterns-* / page-* names stay for the machine listings and search.js. */
.ca-leaf-head .ca-plate::before, .ca-leaf-head .ca-plate::after{ left:0; }
.ca-leaf-body{ padding-block:var(--ca-space-7); }
.ca-leaf{ position:relative; background:var(--vellum-light); border:var(--bw-hair) solid var(--umber); border-radius:var(--r-xs); box-shadow:var(--pop); padding:var(--ca-space-6); }
.ca-leaf + .ca-leaf{ margin-top:var(--ca-space-5); }
.ca-leaf--sunk{ background:var(--vellum-deep); }
.ca-leaf__h2{ font-family:var(--display); font-weight:var(--fw-display); font-size:2rem; line-height:var(--lh-display); color:var(--indigo); margin:0 0 var(--ca-space-3); }
.ca-leaf-prose p{ margin:0 0 var(--ca-space-4); }
.ca-leaf-prose p:last-child{ margin-bottom:0; }
.ca-leaf-prose h2:first-child{ margin-top:0; }
.ca-leaf-prose ul, .ca-leaf-prose ol{ padding-left:1.3em; margin:0 0 var(--ca-space-4); }
.ca-leaf-prose li{ margin:0 0 6px; }
.ca-leaf-prose strong{ color:var(--umber); }
.ca-leaf-meta{ font-family:var(--caps); font-weight:700; font-size:var(--fs-xs); letter-spacing:var(--track-caps); color:var(--umber-2); margin:0 0 var(--ca-space-4); }
.ca-leaf-actions{ display:flex; flex-wrap:wrap; gap:var(--ca-space-3); margin-top:var(--ca-space-5); }
/* the proofing-bench leaf (about): a three-row ledger */
.ca-ledger{ list-style:none; margin:0; padding:0; border-top:1.5px solid var(--umber); }
.ca-ledger__row{ display:grid; grid-template-columns:3.2em minmax(0,1fr); gap:var(--ca-space-3) var(--ca-space-4); padding:var(--ca-space-4) 0; border-bottom:1px solid var(--line-soft); }
.ca-ledger__num{ font-family:var(--caps); font-weight:700; font-size:1.5rem; line-height:1.1; color:var(--madder-d); }
.ca-ledger__title{ font-family:var(--caps); font-weight:700; font-size:1.15rem; margin:0 0 4px; }
.ca-ledger__text{ margin:0; color:var(--umber-2); line-height:1.6; }
/* the contact leaf: what to put in a letter */
.ca-letter-spec{ display:grid; gap:10px; margin:0 0 var(--ca-space-4); padding:0; list-style:none; counter-reset:ca-spec; }
.ca-letter-spec li{ display:flex; gap:12px; align-items:baseline; counter-increment:ca-spec; line-height:1.55; }
.ca-letter-spec li::before{ content:counter(ca-spec, upper-roman) "."; flex:none; width:2.2em; font-family:var(--caps); font-weight:700; color:var(--madder-d); }
/* the author leaf */
.ca-wren{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--ca-space-5); align-items:start; }
.ca-wren__mark{ width:120px; height:120px; border-radius:50%; background:var(--indigo); border:2px solid var(--umber); box-shadow:0 0 0 4px var(--ochre); display:grid; place-items:center; overflow:hidden; }
.ca-wren__mark svg{ width:100%; height:100%; }
.ca-wren__role{ font-family:var(--accent); font-style:italic; font-size:1.25rem; color:var(--umber-2); margin:0 0 var(--ca-space-3); }
.ca-wren__facts{ display:grid; gap:6px; margin:0 0 var(--ca-space-4); padding:0; list-style:none; }
.ca-wren__facts li{ display:flex; gap:10px; align-items:baseline; }
.ca-wren__facts li::before{ content:''; width:9px; height:9px; flex:none; translate:0 -1px; background-color:var(--ochre); -webkit-mask:var(--m-fleuron) center/contain no-repeat; mask:var(--m-fleuron) center/contain no-repeat; }
/* the errata leaf */
.ca-errata-page .ca-errata-list, .ca-errata-page .ca-errata-empty{ margin-top:var(--ca-space-4); }
@media (max-width:760px){
  .ca-leaf{ padding:var(--ca-space-5) var(--ca-space-4); }
  .ca-wren{ grid-template-columns:minmax(0,1fr); }
  .ca-wren__mark{ width:96px; height:96px; }
  .ca-ledger__row{ grid-template-columns:2.4em minmax(0,1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18 · 404 — "This leaf was never printed."
   ═══════════════════════════════════════════════════════════════════════ */
.ca-404, .ca-404{ position:relative; isolation:isolate; overflow:hidden; text-align:center; padding-block:var(--ca-space-9); }
.ca-404__numeral{
  font-family:var(--caps); font-weight:700; font-size:var(--fs-mega); line-height:.9; letter-spacing:-.02em;
  color:var(--madder); margin:0 0 var(--ca-space-3);                  /* display ≥24px: 5.21 */
}
.ca-404 .ca-h2{ margin-inline:auto; }
.ca-404-actions{ justify-content:center; margin-top:var(--ca-space-5); }
.ca-404-panel{ margin-top:var(--ca-space-8); text-align:left; }
.ca-404-panel .ca-chips{ justify-content:flex-start; }

/* ═══════════════════════════════════════════════════════════════════════════
   19 · NEWS (kept so the journal listing does not break on restyle)
   ═══════════════════════════════════════════════════════════════════════ */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:var(--ca-space-5); }
.blog-card{ display:flex; flex-direction:column; background:var(--vellum-light); border:var(--bw-hair) solid var(--umber); box-shadow:var(--pop); text-decoration:none; color:var(--umber); overflow:hidden; }
.blog-card:hover{ color:var(--umber); box-shadow:2px 2px 0 var(--umber), 2px 2px 0 3px var(--ochre); }
.blog-img{ padding:8px; background:var(--vellum-light); border-bottom:var(--bw-hair) solid var(--umber); }
.blog-img img{ width:100%; aspect-ratio:16/10; object-fit:cover; border:1px solid var(--umber); }
.blog-img-placeholder{ aspect-ratio:16/10; background:var(--vellum-deep); color:var(--indigo); border:1px solid var(--umber); --mark-size:48px; }
.blog-body{ padding:var(--ca-space-4); display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-title{ font-family:var(--font); font-weight:700; font-size:1.2rem; line-height:1.25; margin:0; text-transform:none; }
.blog-meta{ font-family:var(--caps); font-size:var(--fs-xs); letter-spacing:var(--track-caps); color:var(--umber-2); }
.blog-excerpt{ font-size:var(--fs-sm); color:var(--umber-2); margin:0; }
/* the pattern-book listing (compile.py :: _templates/patterns.html) — the
   photograph IS the .blog-img element there, inside a decorative link */
.blog-card > a{ display:block; line-height:0; }
img.blog-img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; box-sizing:border-box; }
.blog-content{ padding:var(--ca-space-4); display:flex; flex-direction:column; gap:8px; flex:1 1 auto; }
.blog-title a{ color:var(--umber); text-decoration:none; }
.blog-title a:hover{ color:var(--madder-d); text-decoration:underline; text-decoration-color:var(--ochre); text-underline-offset:3px; }
.blog-read-more{ margin-top:auto; display:inline-flex; align-items:center; min-height:44px; font-family:var(--caps); font-weight:700; font-size:var(--fs-sm); letter-spacing:var(--track-caps); color:var(--indigo); text-decoration:none; }
.blog-read-more:hover{ color:var(--madder-d); }
.filter-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--ca-space-3) var(--ca-space-4); margin-bottom:var(--ca-space-4); }
.filter-buttons{ display:flex; flex-wrap:wrap; gap:8px; }
.filter-controls .search-box{ width:min(100%, 260px); }

/* ═══════════════════════════════════════════════════════════════════════════
   19b · NEWSLETTER RESULT POPUP (built by the opt-in snippet; every page
   except the article)
   ═══════════════════════════════════════════════════════════════════════ */
.ca-nlpop{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:var(--gutter); background:rgba(27,39,66,.74); opacity:0; transition:opacity var(--t) var(--ease); }
.ca-nlpop.open{ opacity:1; }
.ca-nlpop[hidden]{ display:none; }
.ca-nlpop-card{
  position:relative; width:min(100%, 480px);
  max-height:calc(100vh - var(--ca-space-7)); max-height:calc(100dvh - var(--ca-space-7)); overflow:auto;
  text-align:center; background:var(--vellum-light); color:var(--umber);
  border:2.5px solid var(--umber); outline:1px solid var(--ochre); outline-offset:4px;
  box-shadow:var(--pop-lg); scale:.97; transition:scale var(--t) var(--ease-out);
}
.ca-nlpop.open .ca-nlpop-card{ scale:1; }
.ca-nlpop-close{
  position:absolute; z-index:6; top:var(--ca-space-3); right:var(--ca-space-3);
  display:grid; place-items:center; width:44px; height:44px;
  font-family:var(--caps); font-weight:700; font-size:1.6rem; line-height:1;
  color:var(--on-ochre); background:var(--ochre); border:2px solid var(--umber); cursor:pointer;
}
.ca-nlpop-close:hover{ background:var(--vellum-light); color:var(--umber); }
.ca-nlpop-close:focus-visible{ outline:3px solid var(--ochre); outline-offset:3px; }
.ca-nlpop-head{ padding:var(--ca-space-6) var(--ca-space-5) var(--ca-space-5); background:var(--indigo-deep); color:var(--on-indigo-deep); border-bottom:2px solid var(--umber); }
.ca-nlpop.is-error .ca-nlpop-head{ background:var(--madder); color:var(--on-madder); }
.ca-nlpop-icon{ width:64px; height:64px; margin:0 auto var(--ca-space-3); color:var(--on-ochre); background:var(--ochre); border:2px solid var(--umber); border-radius:50%; }
.ca-nlpop-title{ font-family:var(--display); font-weight:var(--fw-display); font-size:2rem; line-height:var(--lh-display); color:inherit; margin:0; text-transform:none; }
.ca-nlpop-body{ padding:var(--ca-space-5); }
.ca-nlpop-body p{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--umber); margin:0 0 var(--ca-space-5); }
.ca-nlpop-actions{ display:flex; flex-wrap:wrap; gap:var(--ca-space-3); justify-content:center; }

/* ═══════════════════════════════════════════════════════════════════════════
   20 · UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */
.ca-center-x, .ca-center-x{ margin-inline:auto; }
.ca-mt-0{ margin-top:0; } .ca-mt-4{ margin-top:var(--ca-space-4); } .ca-mt-6{ margin-top:var(--ca-space-6); }
.ca-mb-0{ margin-bottom:0; } .ca-mb-4{ margin-bottom:var(--ca-space-4); } .ca-mb-6{ margin-bottom:var(--ca-space-6); }
.ca-measure{ max-width:var(--measure); }
.ca-nowrap{ white-space:nowrap; }
.ca-side-label, .ca-side-label-mt{ display:block; }
.ca-side-label-mt{ margin-top:var(--ca-space-5); }
.ca-side-list{ display:flex; flex-direction:column; gap:var(--ca-space-2); list-style:none; padding:0; margin:0; }
.ca-side-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--ca-space-3); }
.ca-side-opt{ display:flex; align-items:center; gap:var(--ca-space-2); min-height:44px; padding:6px var(--ca-space-3); font-family:var(--caps); font-size:var(--fs-sm); letter-spacing:var(--track-caps); color:var(--umber); text-decoration:none; border:var(--bw-hair) solid transparent; }
.ca-side-opt:hover{ background:var(--vellum-deep); border-color:var(--umber); color:var(--umber); }
.ca-side-cta{ margin-top:var(--ca-space-4); }
.ca-flex-between{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--ca-space-3) var(--ca-space-5); }

/* ═══════════════════════════════════════════════════════════════════════════
   21 · RESPONSIVE
   Masthead math (re-measured in Chromium with the webfonts loaded, 2026-08-23,
   after the rename to Crochet Addiction): the wordmark grew from 9 glyphs to
   17, so the pressmark + wordmark column went 210 → ≈347. Seven Alegreya SC
   links ≈ 650 · A/A+ 52 · search box 176 · three 12px gaps · 52px of gutters
   → ≈1238px of CLIENT width with the search box, ≈1050px without it (the
   1001px sweep in _screens/shoot.py reported overflow=49 at the old
   breakpoint, which is where 1050 comes from). A page with a vertical
   scrollbar has ~15px less than the viewport, so: the search box hides at
   ≤1339 (measured with the box injected at 1280: 44px of masthead overflow),
   the link row collapses to the drawer at ≤1079, and the drawer's
   display:none guard and the matchMedia in site-extras.js are pinned to
   1080 together. Move all three as one.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── THE MASTHEAD FIT GUARD ──────────────────────────────────────────────
   The rules above set the masthead's minimum width. These four set what
   happens when the viewport is narrower than it, which on a phone it always
   is, and until 2026-08-26 the answer was "the page scrolls sideways".

   THE ARITHMETIC. `.logo` was `flex:none`, so the brand column could not be
   compressed and the row's floor was 16 (gutter) + 48 (pressmark) + 10 +
   267 ("Crochet Addiction" set in Grenze at 32px) + 12 + 52 (A/A+) + 12 +
   48 (hamburger) + 16 = 407px. Against a 320px client that is 87px of
   horizontal scroll, and the hamburger — the last item in the row and the
   only way into the menu on a phone — was sliced by the viewport edge.
   WCAG 1.4.10 Reflow names 320px as the width it is measured at, so this
   was a failure at exactly the width the criterion cares about.

   THE FIX is to nominate the brand column as the thing that gives. It is
   the only item in the row that can: the two controls are 44px+ tap targets
   and the wordmark is the one child with slack in it. `min-width:0` on the
   flex parent and on each nested flex child is what actually permits the
   shrink — a flex item's automatic minimum size is its content, and without
   min-width:0 at every level of the nest the ellipsis never engages and the
   overflow reappears one box further in.

   WHY IT IS HERE AND ALSO IN _templates/_nav.html. The template ships the
   same declarations in a <style> inside the masthead block so that a page
   sync_chrome.py has stamped carries the guard even if it is served before
   this stylesheet is refreshed. This copy is the one that reaches the ~40
   built pages that render _nav.html through Jinja. The two are identical on
   purpose; edit them together.

   HOW TO MEASURE IT. `documentElement.scrollWidth === documentElement.
   clientWidth`. NEVER against window.innerWidth: under mobile emulation
   innerWidth grows to match the overflow, so the check passes while the
   page is visibly scrolling — which is why _screens/shoot.py reported zero
   overflow for months with the hamburger sliced in its own screenshots. */
.navbar-inner{ min-width:0; }
.logo{ flex:0 1 auto; min-width:0; overflow:hidden; }
.logo-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.logo-name, .logo-sub{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.navbar .text-size, .navbar .menu-toggle{ flex:0 0 auto; }
@media (max-width:420px){
  .logo-name{ font-size:27px; }
  .logo-icon{ --mark-size:34px; }
}
/* Below ~370px the brand column is left with about 120px and the wordmark
   wants 183, so a single line can only ever end in an ellipsis — "Crochet Addicti…", which reads as a broken page rather than a narrow one. Two
   lines at 24px set the name in full and cost 6px of masthead height, on
   the one width class where it happens. Measured in Grenze Gotisch at 320. */
@media (max-width:370px){
  .logo-name{ white-space:normal; overflow:visible; text-overflow:clip;
              font-size:24px; line-height:1.06; }
}

@media (max-width:1339px){
  .navbar .search-box{ display:none; }
}
/* The other half of the same trade. The wordmark's sub-line is a whole
   sentence now ("Free crochet patterns,tested round by round"), ~130px
   wider than the phrase it replaced, and 1340 is the one width class where
   the 180px search box is in the row as well. The two together spill the
   1200px container, so the sub-line stands down exactly where the box
   stands up. Below 1340 the sub-line is the more useful of the two: it
   tells a first-time visitor what the site is. */
@media (min-width:1340px){
  .logo-sub{ display:none; }
}
@media (max-width:1079px){
  .navbar .nav-links{ display:none; }
  .navbar .menu-toggle{ display:flex; }
}
@media (min-width:1080px){
  .mobile-nav{ display:none; }
}
@media (max-width:1100px){
  :root{ --ca-space-8:60px; --ca-space-9:80px; --gutter:20px; }
  .ca-book{ grid-template-columns:minmax(0,1fr); }
  .ca-frontis{ order:2; border-right:0; border-top:2px dashed var(--indigo); }
  .ca-title{ padding:var(--ca-space-6) var(--ca-space-5); }
  .ca-sorts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ca-plates-head{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .ca-newsletter-content{ grid-template-columns:minmax(0,1fr); }
  .ca-newsletter-left{ border-right:0; border-bottom:var(--bw-hair) solid var(--umber); }
  .featured-grid, .ca-grid{ grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); }
}
@media (max-width:760px){
  :root{ --ca-space-7:40px; --ca-space-8:48px; --ca-space-9:60px; --gutter:16px; --nav-h:64px; --edge-h:10px;
         --fs-h1:clamp(2rem, 9.5vw, 2.8rem); }
  .navbar .nav-links, .navbar .search-box{ display:none; }
  .navbar .menu-toggle{ display:flex; }
  .logo-sub{ display:none; }
  .logo-icon{ --mark-size:40px; }
  .ca-opening{ padding-block:var(--ca-space-5) var(--ca-space-7); }
  .ca-title{ padding:var(--ca-space-6) var(--ca-space-4); }
  .ca-title__h1{ max-width:14ch; }
  .ca-title__mark{ display:none; }
  .ca-title__actions{ flex-direction:column; align-items:stretch; width:100%; }
  .ca-title__actions .ca-btn{ width:100%; }
  .ca-frontis{ padding:var(--ca-space-5) var(--ca-space-4); }
  .ca-margin-note{ display:none; }
  .ca-border--lg{ padding:14px; }
  .ca-border--lg::after{ display:none; }
  .ca-border--sm{ padding:var(--ca-space-4); }
  .ca-book.ca-border--sm{ padding:0; }
  .ca-plate::before, .ca-plate::after{ display:none; }
  .ca-edge{ background-size:auto; }
  .ca-edge::before{ -webkit-mask-size:90px var(--edge-h); mask-size:90px var(--edge-h); }
  .ca-toc-grid{ grid-template-columns:minmax(0,1fr); gap:var(--ca-space-5); }
  .ca-toc__h--later{ margin-top:var(--ca-space-5); }
  .ca-toc__link{ font-size:1.05rem; }
  .ca-toc__num{ width:2em; }
  .ca-bench{ grid-template-columns:minmax(0,1fr); gap:var(--ca-space-4); }
  .ca-bench__title{ font-size:2rem; }
  .ca-erratum{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .ca-sorts{ grid-template-columns:minmax(0,1fr); }
  .ca-sort{ flex-direction:row; align-items:flex-start; }
  .ca-sort__face{ min-width:64px; height:64px; font-size:1.5rem; padding:0 10px; }
  .featured-grid, .ca-grid{ grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:12px; }
  .featured-body{ padding:10px 12px 12px; }
  .featured-title{ font-size:1.05rem; }
  .featured-ribbon{ top:12px; left:12px; font-size:.8rem; padding:3px 8px; }
  .ca-rule{ width:110px; }
  .ca-cols-3{ grid-template-columns:minmax(0,1fr); }
  .ca-prose-figure .ca-margin-note{ display:none; }
  .ca-colophon__card{ padding:var(--ca-space-5) var(--ca-space-4); }
  .ca-colophon__row{ grid-template-columns:minmax(0,1fr); gap:0; }
  .ca-colophon__h{ min-height:36px; }
  .ca-colophon__kicker{ margin-left:0; flex-basis:100%; }
  .ca-colophon__imprint{ flex-direction:column; align-items:flex-start; }
  .ca-wallpaper::before{ -webkit-mask-size:120px 120px, 100% 100%; mask-size:120px 120px, 100% 100%; opacity:.08;
    -webkit-mask-image:var(--tile), radial-gradient(ellipse 85% 85% at 50% 50%, transparent 45%, #000 100%);
            mask-image:var(--tile), radial-gradient(ellipse 85% 85% at 50% 50%, transparent 45%, #000 100%); }
  .ca-chips-label{ flex-basis:100%; line-height:1.3; }
}
@media (max-width:480px){
  .featured-grid, .ca-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ca-sort{ flex-direction:column; }
}
@media (max-width:440px){
  .featured-desc{ display:none; }
}
@media (max-width:360px){
  .ca-chips-label{ flex-basis:100%; line-height:1.3; }
  .ca-initial::first-letter{ float:none; font-size:2.4em; padding:.1em .16em .04em; margin:0 .12em 0 0; vertical-align:-.1em; }
  .ca-title__vol-line{ font-size:1rem; }
}
/* Fold rules key off HEIGHT: the title page's "Open the book" stays on the
   first screen of a 1366×768 laptop and a 390×844 phone. */
@media (min-width:761px) and (max-height:900px){
  :root{ --fs-h1:clamp(2rem, 4.4vw, 3.35rem); }
  .ca-opening{ padding-block:var(--ca-space-6) var(--ca-space-7); }
  .ca-title{ padding-block:var(--ca-space-6); }
}
@media (min-width:761px) and (max-height:800px){
  :root{ --fs-h1:clamp(2rem, 4vw, 2.9rem); }
  .ca-opening{ padding-block:var(--ca-space-5) var(--ca-space-6); }
  .ca-title{ padding-block:var(--ca-space-5); }
  .ca-title__imprint{ display:none; }
  .ca-frontis{ padding-block:var(--ca-space-5); }
}
@media (max-width:760px) and (max-height:820px){
  :root{ --fs-h1:clamp(2rem, 8.2vw, 2.4rem); }
  .ca-title__press{ margin-bottom:var(--ca-space-3); }
  .ca-title__imprint{ display:none; }
  .ca-title__actions{ flex-direction:row; }
  .ca-title__actions .ca-btn{ width:auto; flex:1 1 150px; }
}
@media (max-height:480px) and (orientation:landscape){
  :root{ --nav-h:56px; --fs-h1:clamp(2rem, 5.2vw, 2.2rem); }
  .navbar-inner{ padding-block:4px; }
  .ca-opening{ padding-block:var(--ca-space-4) var(--ca-space-5); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22 · REDUCED MOTION + PRINT
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .ca-margin-note{ rotate:0deg !important; }
  .mobile-nav, .mobile-overlay{ transition:none !important; }
}
@media print{
  .navbar, .mobile-nav, .mobile-overlay, .ca-edge, .ca-newsletter-section, .ca-nlpop, .skip-link, .ca-margin-note, .ca-wallpaper::before, .footer-actions{ display:none !important; }
  body{ background:#fff; color:#000; }
  .ca-bench-band, .ca-colophon, .ca-newsletter-left{ background:#fff !important; color:#000 !important; }
  .ca-h1, .ca-h2{ color:#000; }
  .featured-card, .ca-bench__step, .ca-sort, .ca-faq details, .ca-border{ box-shadow:none; border:1px solid #000; outline:none; break-inside:avoid; }
  a[href^="http"]::after{ content:" (" attr(href) ")";font-size:.85em}}