/* ════════════════════════════════════════════════════════════════
   BENEFACTOR · web presence — shared design system
   Canon black-gold-white. No red. Hanken Grotesk (tight) · Cormorant (accent).
   NO monospace anywhere — --mono is Hanken with tabular figures, matching the
   phone's --font-num, so labels and numbers read in one voice on both surfaces.
   Gold = sole accent + primary CTA.
   Linked by every page. Page-specific CSS lives in each page's <style>.
   ════════════════════════════════════════════════════════════════ */

:root{
  --bg-0:#080604; --bg-1:#0d0a07; --bg-2:#12100c;
  --hairline:rgba(216,182,92,0.16); --hairline-soft:rgba(233,226,207,0.08);
  --gold:#d8b65c; --gold-2:#ead07a; --gold-deep:#9a7320; --gold-bright:#f8ecc0; --leaf:#f4e6b4; --white:#fdf7ea;
  /* semantic — exact phone-app values (muted sage green · terracotta, never neon/alarm) */
  --positive:#9fcf8e; --positive-line:rgba(159,207,142,0.28); --positive-bg:rgba(159,207,142,0.08);
  --warn:#d8b65c; --danger:#d98a6a; --danger-line:rgba(217,138,106,0.30); --danger-bg:rgba(217,138,106,0.10);
  --gold-hairline:rgba(217,178,78,0.26); --hairline-strong:rgba(233,225,209,0.16);
  --gold-metal:linear-gradient(135deg,#fbeec2 0%,#ead07a 19%,#c9a23f 42%,#f6e3a0 57%,#bd8f33 77%,#8c6a22 100%);
  --gold-soft:linear-gradient(150deg,#ecd283 0%,#c69a3c 100%);
  --grey-1:#c9c2b0; --grey-2:#8f8874; --grey-3:#5f594a;
  --font-d:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --serif:'Cormorant',Georgia,serif;
  /* The phone has no monospace: its --font-num IS Hanken Grotesk. Web matches it,
     so every var(--mono) label and figure across the app now reads in one voice. */
  --mono:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:200ms; --t-med:340ms;
  --num-feat:tabular-nums;
  --nav-h:66px; --maxw:1180px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
html{background:#080604;}
body{margin:0;background:var(--bg-0);color:var(--grey-1);font-family:var(--font-d);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:15px;line-height:1.58;overflow-x:hidden;
  font-variant-numeric:var(--num-feat);}
a{color:var(--gold);text-decoration:none;transition:color .18s var(--ease);} a:hover{color:var(--gold-2);}
button{font-family:inherit;cursor:pointer;}
img{max-width:100%;display:block;}
::selection{background:rgba(216,182,92,0.3);color:var(--white);}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}

/* type helpers */
.serif{font-family:var(--serif);} .mono{font-family:var(--mono);}
.kicker{font-size:12px;font-weight:650;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);}
.overline{font-size:11.5px;font-weight:650;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);}
h1,h2,h3{margin:0;color:var(--white);letter-spacing:-0.018em;font-weight:600;text-wrap:balance;}
h1{font-weight:300;letter-spacing:-0.022em;line-height:1.05;font-size:clamp(38px,5.4vw,66px);}
h1 b{font-weight:600;color:transparent;letter-spacing:-0.02em;
  background:linear-gradient(135deg,#fbeec2 8%,#ead07a 34%,#c89f42 60%,#f4e6b4 82%,#b58a30);
  -webkit-background-clip:text;background-clip:text;}
h2{font-size:clamp(27px,3.3vw,42px);line-height:1.14;}
h2 em,.serif-em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--gold-2);letter-spacing:0;}
h3{font-size:17px;font-weight:600;letter-spacing:-0.008em;}
p{margin:0;} .lead{font-size:clamp(15px,1.2vw,17px);line-height:1.75;color:var(--grey-1);max-width:60ch;}
.muted{color:var(--grey-2);} .fig{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* ————— NAV ————— */
nav.site{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:30px;
  padding:15px clamp(20px,4vw,52px);transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent;}
nav.site.scrolled{background:rgba(8,6,4,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--hairline-soft);}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:0.26em;font-size:12px;color:var(--white);text-transform:uppercase;}
.orb{width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 50% 55%, #fbf0c8 0%, #d8b65c 36%, rgba(216,182,92,0.25) 64%, transparent 78%);}
nav.site .links{display:flex;gap:26px;font-size:13.5px;font-weight:500;margin-left:8px;}
nav.site .links a{color:var(--grey-2);} nav.site .links a:hover{color:var(--leaf);}
nav.site .right{margin-left:auto;display:flex;align-items:center;gap:16px;}
nav.site .signin{font-size:13.5px;font-weight:500;color:var(--grey-2);} nav.site .signin:hover{color:var(--leaf);}
@media(max-width:820px){ nav.site .links{display:none;} }

/* ═══════════════════════════════════════════════════════════════
   TOUCH TARGETS  [P1-2 · Apple HIG 44pt · WCAG 2.5.5]
   ───────────────────────────────────────────────────────────────
   PADDING, NOT VISUAL SIZE — the punch list's own instruction, and the right
   one: the design's compactness is deliberate, so most of these expand the
   HIT AREA and leave the paint alone. `.tap44` centres a ≥44×44 invisible box
   on the control; `position:relative` is what makes it land on the control
   rather than on some distant ancestor, so it is set here, never assumed.

   WHY NOT EXPAND EVERYTHING: a 31px row in a stacked list grows into its
   neighbour if you inflate its hit area, and two overlapping targets is a worse
   defect than one small one — the upper row silently eats taps meant for the
   one below. So a stacked list GROWS (it has the room) and only isolated
   controls get an invisible halo.

   NOT TOUCHED, deliberately: links inside a sentence. WCAG 2.5.5 and 2.5.8
   both exempt them, and inflating prose links produces overlapping halos in
   running text — the same defect one level down.
   ═══════════════════════════════════════════════════════════════ */
.tap44{position:relative;}
.tap44::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;min-width:44px;min-height:44px;}

/* A primary action is never a 20px sliver. A FLOOR, not a size: any .btn that
   is already taller keeps its own height. */
.btn,.btn-sm{min-height:44px;}

/* Isolated small controls — halo, no visual change. */
.icon-btn,button.icon,.chip-btn,.pill-btn{position:relative;}
.icon-btn::after,button.icon::after,.chip-btn::after,.pill-btn::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;min-width:44px;min-height:44px;}

/* HASH TARGETS CLEAR THE FIXED NAV. Landing set scroll-margin-top on its sections
   only; the legal pages' h2/h3 anchors had nothing and parked under the nav.
   Every element with an id is a potential target, so the rule is on [id]. */
[id]{scroll-margin-top:96px;}
html{scroll-padding-top:96px;}

/* Form controls a finger has to hit exactly. */
.in,input[type="text"],input[type="email"],input[type="tel"],input[type="number"],
input[type="password"],input[type="search"],select,textarea{min-height:44px;}
input[type="checkbox"],input[type="radio"]{width:22px;height:22px;position:relative;}
input[type="checkbox"]::after,input[type="radio"]::after{content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;}

/* ── The controls the page-local sweep found. ─────────────────────────────
   A mechanical pass over all 42 pages' own <style> blocks turned up every rule
   pinning a height under 44px. Most were DECORATION — avatars, icon glyphs,
   rings, check marks — which live inside a larger target and must not grow.
   These are the ones that are genuinely interactive.

   Toggles are the sharpest case: a 24px switch is the smallest real control in
   the product and the one most often mis-tapped. They keep their 24px paint
   (a bigger switch would look like a different component) and gain a halo. */
/* THE HALO SITS ON ::before, NOT ::after, AND THAT IS THE WHOLE POINT.
   THE DEFECT THIS REPLACES: every one of these switches paints its KNOB with
   `::after` — `.tog::after{top:2px;left:2px;width:19px;height:19px;border-radius:50%}`
   in Settings, and the same shape in Extend, Borrow, Records, Emissaries and Home.
   Putting a 44px halo on that same pseudo-element did not add a hit area: it
   REDEFINED THE KNOB. `min-width`/`min-height` beat `width`/`height`, so the 19px
   knob painted 44×44 inside a 25px track — OFF inherited the halo's
   translate(-50%,-50%) and floated a grey disc up-and-left over the row's own text;
   ON kept `translateX(19px)` and bulged a gold disc out of the pill. Measured on 6
   toggles: declared 19×19, painted 44×44, overflowing its track by 19px.
   CLAUDE.md already records this exact hazard for `.btn` — "a second rule on the same
   pseudo-element would have silently deleted it", which is why `.btn` is excluded
   from every halo list. These switches were added to the list anyway.
   `::before` is free on all six (verified: no rule in the project paints it), so the
   halo lives there and the knob keeps its own pseudo-element. `.pubsw` uses an `<i>`
   for its knob and is unaffected either way. */
.tgl,.tgl2,.tog,.pubsw,.ce-sw,[role="switch"]{position:relative;}
.tgl::before,.tgl2::before,.tog::before,.pubsw::before,.ce-sw::before,[role="switch"]::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;min-width:44px;min-height:44px;
  /* invisible, but it MUST still hit-test — a pseudo-element only enlarges the
     control's target because clicks on it resolve to the originating element.
     `pointer-events:none` here would leave the box drawn and the target unchanged:
     a halo that looks right in the stylesheet and does nothing, which is the silent
     class of defect this whole rule exists to fix. */
  background:none;border:0;border-radius:inherit;}

/* Real buttons and standalone links that were left short. These GROW: each sits
   in a row or stack with room, and a halo would reach into a neighbour. */
.sm button,.seg button,.advise-a button,.op-modal-close,.lnk,.pk,.lk,.line,.sc-cta,.tc,
.pubview-btn,.filter-tag,.dchip,.qav,.wn-tag{min-height:44px;}

/* A dismiss control is small ON PURPOSE — it must never compete with the thing
   it dismisses — so it keeps its paint and takes the halo. */
.x,.close,.dismiss{position:relative;}
.x::after,.close::after,.dismiss::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:100%;height:100%;min-width:44px;min-height:44px;}

/* ⚠️ .btn is deliberately absent from every halo list above: .btn-gold already
   uses ::after for its shine sweep, and a second rule on the same pseudo-element
   would silently delete the sweep. .btn takes min-height instead (see above). */

@media print{.tap44::after,.icon-btn::after,button.icon::after{display:none;}}

/* ————— BUTTONS ————— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px;border-radius:15px;
  font-family:var(--font-d);font-size:15px;font-weight:600;letter-spacing:0.01em;border:none;white-space:nowrap;
  position:relative;overflow:hidden;user-select:none;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color .18s,border-color .18s;}
.btn-gold{background:linear-gradient(135deg,#f2d789 0%,#d4ad4c 45%,#f0cd77 60%,#c9a23f 100%);color:#2a2008;
  box-shadow:0 1px 0 rgba(255,255,255,0.4) inset,0 10px 30px -8px rgba(216,182,92,0.55),0 2px 6px rgba(0,0,0,0.4);}
/* hover swaps to the DEEPER metallic gold + a crisp inset gold border and lifts — never a brightness wash */
.btn-gold:hover{transform:translateY(-3px) scale(1.012);background:var(--gold-metal);color:#2a2008;
  box-shadow:inset 0 0 0 1.5px var(--gold-deep),0 18px 40px -10px rgba(216,182,92,0.85),0 0 26px -4px rgba(216,182,92,0.55),0 2px 6px rgba(0,0,0,0.35);}
.btn-gold:active{transform:translateY(-1px) scale(0.99);background:var(--gold-soft);
  box-shadow:inset 0 0 0 2px var(--gold-deep),0 10px 26px -10px rgba(216,182,92,0.8),0 0 30px -4px rgba(216,182,92,0.72);}
.btn-gold::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.5) 48%,transparent 64%);
  background-size:240% 100%;background-position:-140% 0;opacity:0;}
.btn-gold:hover::after{opacity:1;background-position:180% 0;transition:background-position .7s var(--ease);}
.btn-ghost{background:rgba(233,225,209,0.03);color:var(--grey-1);border:1px solid var(--hairline-strong);}
.btn-ghost:hover{background:rgba(233,225,209,0.06);border-color:var(--gold-hairline);color:var(--white);transform:translateY(-2px);}
.btn-ghost:active{background:rgba(216,182,92,0.11);border-color:var(--gold);color:var(--white);transform:translateY(0) scale(0.99);}
.btn-sm{height:40px;padding:0 18px;font-size:13.5px;border-radius:12px;}
.btn-lg{height:56px;padding:0 30px;font-size:16px;border-radius:16px;}
.btn[disabled]{opacity:0.5;cursor:not-allowed;filter:grayscale(0.3);}
.btn.loading{pointer-events:none;color:transparent;position:relative;}
.btn.loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(42,32,8,0.35);border-top-color:#2a2008;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ————— INPUTS ————— */
.in{height:50px;padding:0 18px;border-radius:15px;background:rgba(18,16,12,0.72);border:1px solid var(--hairline-soft);
  color:var(--white);font-family:var(--font-d);font-size:15px;outline:none;width:100%;transition:border-color .2s;}
.in::placeholder{color:var(--grey-3);}
.in:focus{border-color:var(--gold);}
label.fld{display:block;font-size:12px;font-weight:600;letter-spacing:0.04em;color:var(--grey-2);margin:0 0 7px 2px;text-transform:uppercase;}
select.in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--grey-2) 50%),linear-gradient(135deg,var(--grey-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
textarea.in{height:auto;padding:14px 18px;line-height:1.6;resize:vertical;min-height:130px;}

/* ————— PAGE SCAFFOLD (non-landing) ————— */
.page{min-height:100vh;position:relative;}
.page::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 60% at 50% -10%, rgba(217,178,78,0.10) 0%, transparent 55%),
             radial-gradient(ellipse 70% 50% at 50% 120%, rgba(122,74,20,0.10) 0%, transparent 60%),
             linear-gradient(180deg,#070605,#0a0806);}
.page > *{position:relative;z-index:1;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,52px);}
.section{padding:clamp(64px,9vw,120px) 0;}
.section-hd{max-width:820px;}
.section-hd h2{margin-top:14px;}
.section-hd .lead{margin-top:18px;}
.hero-pad{padding-top:calc(var(--nav-h) + clamp(56px,11vw,140px));}

/* faint hairline divider */
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--hairline),transparent);max-width:var(--maxw);margin:0 auto;}

/* card */
.card{background:linear-gradient(180deg,#100e0b,#0b0908);border:1px solid var(--hairline-soft);border-radius:20px;
  box-shadow:0 24px 60px -34px rgba(0,0,0,0.8);}

/* status pills — gold family for covenant lifecycle; green/terracotta for kept/broken state */
.pill{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9px;letter-spacing:0.08em;border-radius:999px;padding:4px 11px;}
.pill.pending{color:#c9b98a;border:1px solid rgba(216,182,92,0.25);background:rgba(216,182,92,0.05);}
.pill.bound{color:#2a2008;border:1px solid #b58a30;background:linear-gradient(180deg,#f4e6b4,#d8b65c);font-weight:500;}
.pill.settled{color:var(--gold-2);border:1px solid rgba(216,182,92,0.5);background:rgba(216,182,92,0.12);}
.pill.pos{color:var(--positive);border:1px solid var(--positive-line);background:var(--positive-bg);}
.pill.danger{color:var(--danger);border:1px solid var(--danger-line);background:var(--danger-bg);}
/* semantic text + figures */
.pos{color:var(--positive);} .neg{color:var(--danger);} .warnc{color:var(--warn);}

/* ————— FOOTER ————— */
footer.site{position:relative;z-index:1;background:#060504;border-top:1px solid var(--hairline-soft);
  padding:34px clamp(22px,6vw,52px);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:12.5px;color:var(--grey-3);}
footer.site .brand{letter-spacing:0.22em;font-size:10.5px;color:var(--grey-2);}
footer.site .brand .orb{width:15px;height:15px;}
footer.site .links{display:flex;gap:20px;flex-wrap:wrap;}
footer.site .links a{color:var(--grey-2);font-weight:500;} footer.site .links a:hover{color:var(--leaf);}
footer.site .mono{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;}

/* ————— PRESSABLE (app parity: lift + gold edge on hover, press on active) ————— */
.pressable{transition:transform .16s var(--ease),border-color .16s,background .16s,box-shadow .16s;}
.pressable:hover{border-color:var(--hairline);background:rgba(216,182,92,0.05);box-shadow:0 8px 24px -16px rgba(0,0,0,0.75);transform:translateY(-1px);}
.pressable:active{transform:scale(0.99);}

/* ————— REVEAL ————— */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.lit{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .btn.loading::after{animation:none;}
}

/* ════════ RESPONSIVE POLISH — marketing pages · wide · tablet · phone ════════ */
/* WIDE DESKTOP: let the field breathe on large monitors */
@media (min-width:1440px){
  :root{ --maxw:1320px; }
  .section{padding:clamp(80px,10vw,150px) 0;}
}
@media (min-width:1800px){ :root{ --maxw:1440px; } }
/* TABLET: legal two-column collapses to one earlier; comfortable gutters */
@media (min-width:761px) and (max-width:1024px){
  .container{padding:0 clamp(28px,5vw,48px);}
  .section{padding:clamp(56px,8vw,96px) 0;}
}
/* PHONE: nav links already hidden ≤820; tighten hero + stacks + full-width CTAs */
@media (max-width:600px){
  h1{font-size:clamp(32px,10vw,44px);}
  nav.site{padding:13px 18px;}
  nav.site .right .btn{height:40px;padding:0 16px;font-size:13px;}
  .btn-lg{height:52px;}
  footer.site{flex-direction:column;align-items:flex-start;gap:16px;}
}
/* coarse-pointer: no sticky hover lift on touch */
@media (hover:none){
  .pressable:hover,.btn-gold:hover,.btn-ghost:hover{transform:none;}
  .pressable:active,.btn-gold:active{transform:scale(0.98);}
}


/* ---------------------------------------------------------------------------
   LEGAL TABLES. Promoted out of Privacy.html’s local <style> when NDA.html’s
   Execution article became the second user — the most legally load-bearing
   table in the agreement (what is recorded about a signer) was rendering with
   1px cell padding and no row separators because the class was defined on a
   page it was copied FROM, not in a sheet both pages load.
   --------------------------------------------------------------------------- */
.ltable{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:13px;}
.ltable th{text-align:left;color:var(--gold);font-weight:600;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;padding:8px 12px;border-bottom:1px solid var(--hairline);}
.ltable td{color:var(--grey-1);padding:10px 12px;border-bottom:1px solid var(--hairline-soft);vertical-align:top;line-height:1.55;}

/* ————— LEGAL INSTRUMENT NUMBERING —————————————————————————————————————————
   ONE numbering system for every instrument: NDA, Terms of Service, Privacy
   Notice, and the covenant terms sheet. Article numbers come from the `sec`
   counter on `.prose`; clauses from `ol.cl` (N.1, N.2); lettered children from
   a nested `ol.sub` (N.1.a). Depth stops there on purpose — a keeper citing
   7.7.c has said enough, and 7.7.c.iv is a document nobody reads.

   NOTHING IS EVER TYPED. A hand-typed "7.2" is a fact the next inserted clause
   falsifies, and this project has already shipped typed numbers into headings a
   counter could not target. Cross-references are LINKS to the article's anchor
   and name it in words ("see Late tenders & recovery"), never a number.

   It lives here, not in a page <style>, because four documents share it and the
   recorded defect class in this codebase is vocabulary used against a shell
   that never defined it. buildplan/LEGAL_INSTRUMENTS.md is the written policy.
   --------------------------------------------------------------------------- */
.prose{counter-reset:sec;}
.legal .prose h3::before{counter-increment:sec;content:counter(sec) " · ";color:var(--gold);font-family:var(--mono);font-size:12px;}
.legal .toc{counter-reset:tocn;}
.legal .toc a::before{counter-increment:tocn;content:counter(tocn) " · ";color:var(--grey-3);font-family:var(--mono);font-size:11px;}
.legal .toc a:hover::before{color:var(--gold-deep);}
.prose ol.cl,.prose ol.sub{list-style:none;margin:0 0 14px;padding:0;}
/* cl and fig reset at the ARTICLE, not at the list: an article with two clause
   lists must keep counting (7.1–7.3 then 7.4), or two clauses share a citation. */
.legal .prose h3{counter-reset:cl 0 fig 0;}
.prose ol.cl>li{counter-increment:cl;position:relative;padding-left:52px;margin-bottom:11px;}
.prose ol.cl>li::before{content:counter(sec) "." counter(cl);position:absolute;left:0;top:1px;width:44px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--gold);letter-spacing:0.03em;}
.prose ol.sub{counter-reset:sub;margin:9px 0 2px;}
.prose ol.sub>li{counter-increment:sub;position:relative;padding-left:52px;margin-bottom:7px;}
.prose ol.sub>li::before{content:counter(sec) "." counter(cl) "." counter(sub,lower-alpha);position:absolute;left:0;top:1px;width:44px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--gold-deep);letter-spacing:0.03em;}
.prose ol.cl>li>strong:first-child,.prose ol.sub>li>strong:first-child{color:var(--white);}
.prose ol.cl .ltable{margin-top:10px;}
/* recitals are lettered (A), (B) — the whereas-clause convention, and they are
   referenced as recitals rather than as numbered articles */
.prose ol.recitals{list-style:upper-alpha;padding-left:24px;}
/* figures — a table or chart inside an article is lettered apart from the
   clauses (Figure 9.a), so a chart is never read as an operative clause */
.prose figure.lfig{margin:2px 0 20px;}
.prose figure.lfig>figcaption{counter-increment:fig;font-family:var(--mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--grey-3);margin:0 0 9px;}
.prose figure.lfig>figcaption::before{content:"FIGURE " counter(sec) "." counter(fig,lower-alpha) " \00b7 ";color:var(--gold);}
.prose figure.lfig .ltable{margin-top:0;}