/* jasondillard.com — site.css (DESIGN.md v2 tokens + components). Built by _src/build.py. */
:root{
  color-scheme:light;
  --bg:#FFFFFF;--bg-alt:#F6F7F9;--surface:#FFFFFF;--surface-nav:rgba(255,255,255,.78);--band:#101828;
  --ink:#101828;--text:#344054;--muted:#5B6478;--placeholder:#6B7489;--on-band:#FFFFFF;--on-band-muted:#C7CCD6;
  /* DESIGN 2026-10-16b: the saturated blue is retired. Ink navy is the single action colour
     for buttons AND links (the same navy as the ink band, so the site is one palette: white /
     paper grounds, navy for structure and action, the three motif colours as signature, gold
     as the only hover / focus accent). --accent-soft is a 7% navy tint on white. */
  --accent:#0E1726;--accent-hover:#1B2A44;--accent-ink:#FFFFFF;--accent-soft:#EDEFF2;
  --gold-focus:#B08D4F; /* the antique gold of the motif: 3.1:1 on white, used for the focus ring and hover underlines */
  --line:#E4E7EF;--line-strong:#C9CFDA;--line-field:#8592A4;--line-glass:rgba(16,24,40,.08);--line-onlight:rgba(255,255,255,.75);--gold:#C9A961;
  /* ART 2026-10-16: chapter grounds. Three of them, alternated deliberately: white (default),
     a warm paper tint for secondary chapters, and ONE ink band per page for the chapter that
     carries the credibility (plus the footer). Ink is navy-black, never a theme. */
  --bg-paper:#F8F5EF;--line-paper:#E6E0D4;
  --ink-band:#0E1726;--on-ink:#FFFFFF;--on-ink-soft:#D9DEE7;--on-ink-muted:#AEB7C7;--on-ink-line:rgba(255,255,255,.16);--on-ink-gold:rgba(201,169,97,.55);
  /* ART 2026-10-16: the signature. In Jason's course every deal is three things changing hands
     — cash, paper and title — and his workbook colour-codes them green, red and gold. Muted to
     moss, oxblood and antique gold, these three segments are the site's only ornament: the
     eyebrow mark, the section-divider accent, the hero rule, the footer, the favicon. Never
     explained in copy; never used as text. */
  --m-cash:#55704E;--m-paper:#7E3A3A;--m-title:#B08D4F;
  --motif:linear-gradient(90deg,var(--m-cash) 0 10px,transparent 10px 13px,var(--m-paper) 13px 23px,transparent 23px 26px,var(--m-title) 26px 36px);
  --motif-ink:linear-gradient(90deg,#86A07E 0 10px,transparent 10px 13px,#B5625F 13px 23px,transparent 23px 26px,#D2B274 26px 36px);
  --amber-soft:#FFF3CD;--amber-ink:#6B4300;--amber-line:#E3B23C;
  --error:#B42318;--error-soft:#FCEBEA;--success:#067647;--success-soft:#E6F4EC;
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-body:"Inter",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-display:clamp(46px,6.6vw,96px);--fs-h1:clamp(36px,4vw,56px);--fs-h2:clamp(28px,3.1vw,44px);--fs-h3:22px;--fs-pull:clamp(34px,4.4vw,64px);--fs-event:clamp(40px,5.2vw,76px);
  --fs-dek:clamp(20px,1.8vw,24px);--fs-lead:19px;--fs-body:17px;--fs-small:14px;--fs-eyebrow:12px;--fs-proof:15px;--fs-btn:15px;--fs-nav:14px;
  --lh-tight:1.08;--lh-heading:1.18;--lh-body:1.65;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --container:1160px;--gutter:24px;--section:clamp(56px,7vw,88px);
  /* HEADER 2026-10-17: where anything sticky comes to rest — the bottom edge of the
     SCROLLED bar (banner 36 + 8 pad + 64 bar with the preview banner, 8 + 64 without) plus
     2px of air. The jump nav sticks here; a section rail sticks below it. --head-h is the
     top-state bar's bottom edge measured from the header's top (20 pad + 64 bar − 10 of
     air that the old sticky bar also gave away): main pads this much so the fixed header
     overlays nothing, and the hero / ink head pull back under it. */
  --stick-top:110px;--rail-top:calc(var(--stick-top) + 24px);
  --r-pill:999px;--r-xl:20px;--r-lg:12px;--r-md:10px;--r-sm:6px;--head-h:74px;
  --sh-1:0 1px 2px rgba(16,24,40,.04),0 1px 1px rgba(16,24,40,.03);
  --sh-2:0 1px 2px rgba(16,24,40,.05),0 8px 24px -8px rgba(16,24,40,.12);
  --sh-3:0 2px 4px rgba(16,24,40,.06),0 24px 48px -16px rgba(16,24,40,.20);
  --sh-accent:0 6px 18px -6px rgba(14,23,38,.35);--sh-accent-hover:0 10px 24px -8px rgba(14,23,38,.45);
  --ring:0 0 0 2px #FFFFFF,0 0 0 4px var(--gold-focus); /* DESIGN 2026-10-16b: gold, 2px, offset */
  --ease:cubic-bezier(.2,.8,.2,1);--t-fast:160ms;--t-base:220ms;--t-slow:420ms;--t-drawer:240ms;
}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-body)/var(--lh-body) var(--font-body);font-feature-settings:"cv11";overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
/* DESIGN 2026-10-16b: navy is close in tone to body text, so a link in running copy is
   underlined at rest — the underline is what makes it a link, never colour alone. Nav,
   buttons, cards, the doors, the trophy names and the plain link lists keep their own styles. */
:where(main :is(p,li,dd,td,address)) a:where(:not(.btn,.btn-text,.card)),.foot-legal a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.jumpnav a,.nav a,.drawer-nav a,.evs a.btn,.jump a{text-decoration:none}
.link-list a,.door a,.trophy-name a,.cred-line a,.jump a,.ep a,.proof a,.taglist a,.xembed-link a,.course-approval a{text-decoration:none}
.link-list a:hover,.cred-line a:hover,.xembed-link a:hover,.course-approval a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--ring)}
h1,h2,h3{font-family:var(--font-display);font-weight:500;color:var(--ink);margin:0;text-wrap:balance}
h1{font-size:var(--fs-display);line-height:1.02;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:-.005em}
h3{font-size:var(--fs-h3);line-height:1.3}
p{margin:0}
p+p{margin-top:16px}
strong{color:var(--ink);font-weight:600}
em{font-style:italic}
abbr[title]{text-decoration:none}
.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}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
main{padding-top:var(--head-h)} /* HEADER 2026-10-17: the fixed header's room; .hero and .head-ink pull back under it */
.lead{font-size:var(--fs-lead);line-height:1.6;max-width:62ch}
.skip{position:absolute;top:8px;left:8px;z-index:100;transform:translateY(-200%);background:var(--accent);color:#fff;padding:12px 20px;border-radius:var(--r-pill);font-weight:600}
.skip:focus{transform:none}
[hidden]{display:none!important}

html.preview-off{--stick-top:74px}
body:has(.jumpnav){--rail-top:calc(var(--stick-top) + 76px)}

/* ---- preview banner ---- */
.preview{position:sticky;top:0;z-index:60;min-height:36px;background:var(--amber-soft);color:var(--amber-ink);border-bottom:1px solid var(--amber-line);font:500 13px/1.3 var(--font-body);display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 48px 6px 16px;text-align:center}
.preview-x{position:absolute;right:8px;top:2px;width:32px;height:32px;border:0;background:transparent;color:var(--amber-ink);font:400 20px/1 var(--font-body);border-radius:var(--r-pill);cursor:pointer}
.preview-x:hover{background:rgba(107,67,0,.08)}
html.preview-off .preview{display:none}

/* ---- header / nav — HEADER 2026-10-17: the "appearing" header ---- */
/* Fixed and overlaying (main pads --head-h for it, so nothing moves). Two states.
   TOP (scrollY ≤ 70): bare — no background, border, shadow or radius; wordmark at full
   size, links in --ink, Contact the navy pill, all floating over the hero. Its only ground
   is ::before, a white→clear gradient the height of the header (ink→clear on a page whose
   first band is ink, html[data-head="ink"], where the wordmark and links go white and
   Contact inverts to white/navy). It is invisible on white and only ever touches the top
   ~104px of the hero photo — not the side fade the owner rejected.
   SCROLLED (site.js adds .scrolled past 70px, passive listener + rAF): header padding
   tightens, the bar becomes the white glass pill — 86% white, blur(14px), 1px --line,
   999px, the one permitted resting shadow — the wordmark drops to 34px (30 on phones) and
   the gradient fades out. Everything transitions over .4s --ease; reduced motion collapses
   the transitions (states still switch). JS off: solid white + a hairline. */
.header{position:fixed;top:0;left:0;right:0;z-index:50;padding:20px 0;pointer-events:none;transition:padding .4s var(--ease)}
html:not(.preview-off) .header{top:36px}
.header::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(255,255,255,.92),rgba(255,255,255,0));transition:opacity .4s var(--ease)}
html.js[data-head="ink"] .header::before{background:linear-gradient(to bottom,rgba(14,23,38,.92),rgba(14,23,38,0))}
.header.scrolled{padding:8px clamp(12px,2.5vw,28px)}
.header.scrolled::before{opacity:0}
.glass-blur{background:var(--surface-nav);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid var(--line-onlight);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--sh-2)}
@supports not (backdrop-filter:blur(1px)){.glass-blur{background:rgba(255,255,255,.97)}}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:var(--container);margin:0 auto;min-height:64px;padding:6px 0;border-radius:var(--r-pill);pointer-events:auto;background:rgba(255,255,255,0);border:1px solid transparent;box-shadow:0 14px 40px -14px rgba(14,23,38,0);transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.header.scrolled .bar{padding:8px 10px 8px 22px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--line);box-shadow:0 14px 40px -14px rgba(14,23,38,.35)}
@supports not (backdrop-filter:blur(1px)){.header.scrolled .bar{background:rgba(255,255,255,.97)}}
.wordmark{display:block;height:32px;width:169px;overflow:hidden;position:relative;flex:none;border-radius:4px;transition:height .4s var(--ease),width .4s var(--ease)}
.wordmark img{position:absolute;height:47.7px;width:auto;max-width:none;top:-8.6px;left:-.5px;transition:height .4s var(--ease),top .4s var(--ease),left .4s var(--ease),filter .4s var(--ease)}
/* the glyph crop scales with the art: 47.7 → 34px is ×.713 on every dimension */
.header.scrolled .wordmark{height:22.8px;width:120.5px}
.header.scrolled .wordmark img{height:34px;top:-6.1px;left:-.4px}
.nav{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--r-pill);color:var(--text);font:500 var(--fs-nav)/1 var(--font-body);white-space:nowrap;transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.nav a:hover{background:rgba(16,24,40,.05);color:var(--ink);text-decoration:none}
.nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.nav .contact a{background:var(--accent);color:#fff;min-height:48px;padding:0 22px;font-weight:600;box-shadow:var(--sh-accent);margin-left:8px;transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.nav .contact a:hover{background:var(--accent-hover);color:#fff;box-shadow:var(--sh-accent-hover)}
.nav .contact a[aria-current="page"]{background:var(--accent-hover);color:#fff}
/* top state on a white page: links in --ink (not --text) — they float over the hero photo
   under the gradient, and ink is the darker of the two */
.header:not(.scrolled) .nav a:not([aria-current="page"],.btn){color:var(--ink)}
/* top state over an ink first band: white wordmark (the art is flat navy on clear, so the
   filter is exact), white links, Contact inverted like every primary on ink */
html.js[data-head="ink"] .header:not(.scrolled) .wordmark img{filter:brightness(0) invert(1)}
html.js[data-head="ink"] .header:not(.scrolled) .nav a{color:var(--on-ink)}
html.js[data-head="ink"] .header:not(.scrolled) .nav a:hover{background:rgba(255,255,255,.1);color:var(--on-ink)}
html.js[data-head="ink"] .header:not(.scrolled) .nav a[aria-current="page"]{background:rgba(255,255,255,.14);color:var(--on-ink)}
html.js[data-head="ink"] .header:not(.scrolled) .nav .contact a{background:var(--on-ink);color:var(--accent);box-shadow:none}
html.js[data-head="ink"] .header:not(.scrolled) .nav .contact a:hover{box-shadow:0 0 0 1px var(--gold-focus)}
html.js[data-head="ink"] .header:not(.scrolled) :focus-visible{box-shadow:0 0 0 2px var(--ink-band),0 0 0 4px var(--gold-focus)}
html.js[data-head="ink"] .header:not(.scrolled) .burger span{background:var(--on-ink)}
/* SQUATCH 2026-10-17 (owner): on the home page the top-state nav used to straddle the hard
   seam at 48vw where the white copy panel meets the photo ("Work With Me" half on each).
   Top state, home only (html[data-home], set by build.py for "/"): the wordmark stays on the
   white; the whole nav group slides right by the distance from the container's right edge
   to 40px off the viewport edge, so it sits entirely inside the photo panel. It is a
   transform, so the pill's .4s transition carries it back into the container when the
   header condenses. Below 1280px the group cannot clear the seam, so the home page uses the
   drawer there (home only — every other page keeps the inline nav to 760px). */
html[data-home] .header nav{transition:transform .4s var(--ease)}
html[data-home] .header:not(.scrolled) nav{transform:translateX(calc(max(0px,(100vw - var(--container)) / 2) + var(--gutter) - 40px))}
@media (max-width:1359px){html[data-home] .nav a:not(.btn){padding:0 10px}} /* 1280: the group clears the seam by ~40px */
@media (max-width:1279px){html[data-home] .nav{display:none}html[data-home] .burger{display:block}}
/* JS off: the header is still fixed, so it needs a ground wherever it lands */
html:not(.js) .header{background:#fff;border-bottom:1px solid var(--line);padding:8px 0}
html:not(.js) .header::before{display:none}
/* the three-bar toggle (phones): 27×2.5px bars that fold to an × on .open; 44px target */
.burger{display:none;width:44px;height:44px;border-radius:var(--r-pill);border:0;background:transparent;flex:none;position:relative;cursor:pointer;padding:0}
.burger span{position:absolute;left:8.5px;width:27px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform var(--t-base) var(--ease),opacity var(--t-base) var(--ease),top var(--t-base) var(--ease),background .4s var(--ease)}
.burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:20.75px}.burger span:nth-child(3){top:28.5px}
.burger.open span:nth-child(1),.burger[aria-expanded="true"] span:nth-child(1){top:20.75px;transform:rotate(45deg)}
.burger.open span:nth-child(2),.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger.open span:nth-child(3),.burger[aria-expanded="true"] span:nth-child(3){top:20.75px;transform:rotate(-45deg)}

/* ---- drawer (body-level) ---- */
.drawer{position:fixed;inset:0;z-index:70;visibility:hidden}
.drawer.is-open{visibility:visible}
.drawer-scrim{position:absolute;inset:0;background:rgba(16,24,40,.4);opacity:0;transition:opacity var(--t-drawer) var(--ease);border:0;padding:0;cursor:default}
.drawer.is-open .drawer-scrim{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(88vw,360px);transform:translateX(100%);transition:transform var(--t-drawer) var(--ease);border-radius:var(--r-lg) 0 0 var(--r-lg);box-shadow:var(--sh-3);padding:16px 20px 24px;overflow:auto;display:flex;flex-direction:column}
.drawer.is-open .drawer-panel{transform:none}
.drawer-top{display:flex;justify-content:flex-end;margin-bottom:8px}
.drawer-close{width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--line-glass);background:rgba(255,255,255,.7);position:relative;cursor:pointer;padding:0}
.drawer-close::before,.drawer-close::after{content:"";position:absolute;left:13px;top:21px;width:18px;height:1.5px;background:var(--ink)}
.drawer-close::before{transform:rotate(45deg)}.drawer-close::after{transform:rotate(-45deg)}
.drawer-nav{list-style:none;margin:0;padding:0}
.drawer-nav li+li{border-top:1px solid var(--line)}
.drawer-nav a{display:flex;align-items:center;min-height:52px;color:var(--ink);font:500 18px/1.2 var(--font-body);border-radius:var(--r-sm)}
.drawer-nav a[aria-current="page"]{color:var(--accent)}
.drawer-cta{margin-top:20px}
.drawer-cta .btn{width:100%}
.drawer-tel{margin-top:16px;font-size:15px;color:var(--muted)}
.drawer-tel a{color:var(--muted)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:var(--r-pill);font:600 var(--fs-btn)/1 var(--font-body);white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),background var(--t-fast),border-color var(--t-fast);text-decoration:none}
.btn:hover{transform:translateY(-2px);text-decoration:none} /* SQUATCH 2026-10-17 (G): 1 → 2px */
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--sh-accent-hover);color:#fff}
.btn-secondary{background:#fff;color:var(--accent);border-color:var(--accent)}
.btn-secondary:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.btn-text{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;font-size:16px;min-height:44px}
.btn-text:hover{text-decoration:underline}
.btn-text .arr{display:inline-block;transition:transform var(--t-base) var(--ease)}
.btn-text:hover .arr{transform:translateX(5px)} /* SQUATCH 2026-10-17 (G) */
.btn-sm{min-height:40px;padding:0 18px;font-size:14px}
.btn[disabled]{opacity:.6;cursor:default;transform:none}
.btn-nav{min-height:48px}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.actions .btn{max-width:100%;white-space:normal;text-align:center}

/* ---- eyebrow ---- */
.eyebrow{display:flex;align-items:center;gap:10px;font:600 var(--fs-eyebrow)/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.eyebrow::before{content:"";width:36px;height:2px;background:var(--motif);flex:none}
.mark{display:block;width:36px;height:3px;background:var(--motif);border-radius:1px}
.section h2.eyebrow,h2.eyebrow{margin:0 0 16px;max-width:none;text-wrap:initial}

/* ---- chip ---- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;min-height:24px;border-radius:var(--r-sm);background:var(--amber-soft);color:var(--amber-ink);border:1px solid var(--amber-line);font:600 13px/1.3 var(--font-body);letter-spacing:.02em;white-space:nowrap;vertical-align:middle;max-width:100%}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber-line);flex:none}
h1 .chip{font-size:18px;min-height:40px;padding:6px 16px;letter-spacing:.02em;white-space:normal}
blockquote .chip{font-style:normal;white-space:normal}
@media (max-width:599px){.chip{white-space:normal}.chip::before{align-self:flex-start;margin-top:8px}}

/* ---- sections ---- */
.section{padding:var(--section) 0}
.section-ruled{padding-top:0}
/* DESIGN 2026-10-16: a section rule is --line-strong, a list row hairline is --line. The two
   used to be the same weight, which is why an h2 and a list item read as the same event. */
.section-ruled>.container::before{content:"";display:block;height:3px;background:var(--motif) 0 0/36px 3px no-repeat,linear-gradient(var(--line-strong),var(--line-strong)) 0 1px/100% 1px no-repeat;margin-bottom:var(--section)}
/* ART 2026-10-16: chapter grounds. A ground change is itself the break, so a grounded section
   carries its own top padding and no hairline. */
.section-paper{background:var(--bg-paper)}
.section-paper.section-ruled>.container::before{background:var(--motif) 0 0/36px 3px no-repeat,linear-gradient(var(--line-paper),var(--line-paper)) 0 1px/100% 1px no-repeat}
/* DESIGN 2026-10-16b: on paper only the genuine cards go white; panels and notes are flat */
.section-paper .card,.section-paper .taglist li,.section-paper .xembed,.section-paper .calc-field input{background:var(--surface)}
.section-paper .deflist li,.section-paper .cred li,.section-paper .qa dt,.section-paper .cols li,.section-paper .kv tr,.section-paper .topics li{border-color:var(--line-paper)}
.section-ink{background:var(--ink-band);color:var(--on-ink-soft)}
.section-ink h2,.section-ink h3,.section-ink strong,.section-ink .cred-line,.section-ink .cred-line a,.section-ink .lead{color:var(--on-ink)}
.section-ink .eyebrow,.section-ink .micro,.section-ink .cred-src,.section-ink .intro-line{color:var(--on-ink-muted)}
.section-ink .eyebrow::before,.section-ink .mark{background:var(--motif-ink)}
.section-ink .cred li,.section-ink .deflist li,.section-ink .qa dt{border-color:var(--on-ink-line)}
.section-ink a{color:var(--on-ink)}
.section-ink .cred-detail{color:var(--on-ink-soft)}
.section-ink.section-ruled>.container::before{display:none}
.section-ink.section-ruled{padding-top:var(--section)}
/* DESIGN 2026-10-16b: on the ink band a navy fill would vanish, so the primary inverts —
   white fill, navy text — and stays the band's one strong button; the secondary is the ghost pill */
.section-ink .btn-primary,.head-ink .btn-primary{background:var(--on-ink);color:var(--accent);box-shadow:none}
.section-ink .btn-primary:hover,.head-ink .btn-primary:hover{background:var(--on-ink);color:var(--accent);box-shadow:0 0 0 1px var(--gold-focus),var(--sh-2)}
.head-ink .btn-secondary{background:transparent;color:var(--on-ink);border-color:rgba(255,255,255,.4)}
.head-ink .btn-secondary:hover{background:rgba(255,255,255,.1);border-color:var(--on-ink);color:var(--on-ink)}
.head-ink :focus-visible{box-shadow:0 0 0 2px var(--ink-band),0 0 0 4px var(--gold-focus)}
.section-ink .btn-secondary{background:transparent;color:var(--on-ink);border-color:rgba(255,255,255,.4);box-shadow:none}
.section-ink .btn-secondary:hover{background:rgba(255,255,255,.1);border-color:var(--on-ink);color:var(--on-ink)}
.section-ink :focus-visible{box-shadow:0 0 0 2px var(--ink-band),0 0 0 4px var(--gold-focus)}
.section h2{margin-bottom:24px;max-width:20ch}
/* DESIGN 2026-10-16: the quiet secondary block (the /register recordings capture) — a
   smaller heading and no emphasis, so it cannot compete with the page's one real action. */
.section-quiet .rail-head h2,.section-quiet h2{font:500 var(--fs-h3)/1.3 var(--font-display);letter-spacing:0}
.section h2+.intro-line,.section h2+p{margin-top:0}
.block+.block{margin-top:40px}
.prose{max-width:68ch}
.prose p+p{margin-top:16px}
.prose .lead{max-width:62ch}
.intro-line{max-width:68ch;margin-bottom:20px}
.after{margin-top:32px}
.micro{font-size:var(--fs-small);color:var(--muted)}

/* ---- section rail: the two-column rhythm — DESIGN 2026-10-16 ---- */
/* The page used to cap every text block at 68ch and left-align it against the gutter, so at
   1440 the words ran x=77–610 and the right half of the screen was empty — which is what
   "a lot of wide, you get lost in the text" was describing. The eyebrow and the h2 now sit
   in a left rail and the body starts beside them, so the measure stays readable but the
   column starts further right and the page is balanced. Below 1024 the two stack, in the
   same order, exactly as before. */
.rail-head>:last-child{margin-bottom:0}
.rail-photo{margin:20px 0 24px;max-width:160px}
.sec-photo{margin-top:32px}
.sec-photo .frame{aspect-ratio:16/9}
/* ART 2026-10-16: the lonely-rail rule. A block whose rail would hold only an eyebrow (or a
   three-column grid) gets full-width heading treatment instead: eyebrow + h2 above, content
   beneath in a wider measure. The sticky rail is kept for genuinely long reading blocks. */
.block.stack .stack-head{margin-bottom:28px}
.block.stack .stack-head>:last-child{margin-bottom:0}
.block.stack .stack-head h2{max-width:22ch}
.block.stack .stack-head h2.eyebrow{max-width:none}
.block.stack .stack-body{min-width:0}
.block.stack .prose,.block.stack .deflist,.block.stack .intro-line,.block.stack .qa,.block.stack .checklist{max-width:76ch}
.block.stack .cols{margin-top:4px}
h2.pull{font-size:var(--fs-pull);line-height:1.04;letter-spacing:-.015em;max-width:16ch}
.block.stack .stack-head h2.pull{max-width:16ch}
@media (min-width:1024px){
  .block.stack .checklist{columns:2;column-gap:48px;max-width:none}
  .block.stack .checklist li{break-inside:avoid}
  .block.rail{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);column-gap:clamp(40px,4.5vw,72px);align-items:start}
  .rail-head{grid-column:1;position:sticky;top:var(--rail-top)}
  .rail-body{grid-column:2;min-width:0}
  /* the rail is the measure now, so the heading does not need its own */
  .section .rail-head h2{max-width:none;margin-bottom:0}
  .rail-head .eyebrow{margin-bottom:14px}
  .rail-photo{margin:20px 0 0;max-width:260px}
  /* the "who I am" grid IS the rail grid — photo where a heading would be, words in the
     body column — so it uses the same two tracks and the page keeps one left edge */
  .whoami{grid-template-columns:minmax(200px,280px) minmax(0,1fr);column-gap:clamp(40px,4.5vw,72px)}
}

/* ---- section jump nav (long pages) — DESIGN 2026-10-16 ---- */
/* Plain anchors in document order: with JS off it still navigates; site.js adds the
   current-section highlight. One compact row, scrollable rather than wrapping, so it stays
   a strip and never becomes a second masthead. */
.jumpnav{position:sticky;top:var(--stick-top);z-index:40;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:16px}
.jumpnav ul{display:flex;align-items:center;gap:0 2px;list-style:none;margin:0;padding:3px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jumpnav ul::-webkit-scrollbar{display:none}
.jumpnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-pill);white-space:nowrap;font:500 var(--fs-nav)/1 var(--font-body);color:var(--muted);transition:background var(--t-fast),color var(--t-fast)}
.jumpnav a:hover{background:rgba(16,24,40,.05);color:var(--ink);text-decoration:none}
.jumpnav a[aria-current="true"]{background:rgba(16,24,40,.07);color:var(--ink)}

/* ---- sticky apply bar (/register, phones only) — DESIGN 2026-10-16 ---- */
/* On a phone the application is ~9,000px from the top. A plain link, mobile only, hidden by
   site.js while the application panel itself is on screen. */
.applybar{display:none}
@media (max-width:759px){
  /* the phone gets the apply bar instead; a sticky strip as well would eat the viewport */
  .jumpnav{position:static}
  .applybar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line-strong)}
  .applybar .btn{width:100%;min-height:52px}
  .applybar.is-off{display:none}
  body.has-applybar{padding-bottom:84px}
}

/* ---- video slot (/register, /courses) — OWNER 2026-10-16 ---- */
.video-wrap{padding:8px 0 0}
.videoblock{max-width:760px}
.videoblock-sm{max-width:520px;margin-top:24px}
.videoblock-wide{max-width:none}
.videoblock .video{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);background:var(--band);box-shadow:inset 0 0 0 1px var(--line);object-fit:cover}
.video-slot{display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:16/9;padding:16px;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-lg)}
.video-caption{margin-top:10px}

/* ---- hero (ART 2026-10-16; DESIGN 2026-10-16b: two crisp panels, no scrim) ---- */
/* The owner read the left-to-right fade as the photo being "cut off", so the gradient is
   gone. The hero is now two panels with a hard vertical edge: copy on white in the left 48%,
   the photograph as a full-height panel in the right 52%, running up behind the glass nav and
   edge to edge on the right. object-position 0% keeps Jason at the left of the panel (source
   x≈17–27%), fully in frame, and no text ever reaches him: the copy column is capped so it
   ends before the panel edge. Fold at 1440×900 (measured): banner 36 → hero 36–720 → proof
   strip 720–810 → announce 810–886. Anything taller than the clamp pushes the band under. */
.hero{position:relative;margin-top:calc(-1 * var(--head-h));min-height:clamp(560px,76vh,700px);display:flex;align-items:center;overflow:hidden;background:var(--bg)}
/* POLISH 2026-10-17: the home hero is the page's one ink band (the trophy case moved to
   paper). White type, the dek in gold, the primary inverted like every primary on ink, the
   lane switch in its on-ink form. The photo keeps its hard seam — no fade, by owner's call. */
.hero-ink{background:var(--ink-band);color:var(--on-ink-soft)}
.hero-ink h1,.hero-ink .lead{color:var(--on-ink)}
.hero-ink .hero-copy .dek{color:var(--gold)}
.hero-ink .btn-primary{background:var(--on-ink);color:var(--accent);box-shadow:none}
.hero-ink .btn-primary:hover{box-shadow:0 0 0 1px var(--gold-focus),var(--sh-2)}
.hero-ink .btn-secondary{background:transparent;color:var(--on-ink);border-color:rgba(255,255,255,.4);box-shadow:none}
.hero-ink .btn-secondary:hover{background:rgba(255,255,255,.1);border-color:var(--on-ink);color:var(--on-ink)}
.hero-ink .lane-l{color:var(--on-ink-muted)}
.hero-ink .lane button{background:transparent;border-color:rgba(255,255,255,.3);color:var(--on-ink-soft)}
.hero-ink .lane button:hover{border-color:var(--on-ink);color:var(--on-ink)}
.hero-ink .lane button[aria-checked="true"]{background:var(--on-ink);border-color:var(--on-ink);color:var(--accent)}
.hero-ink :focus-visible{box-shadow:0 0 0 2px var(--ink-band),0 0 0 4px var(--gold-focus)}
/* SQUATCH 2026-10-17 (A): overflow:hidden keeps the Ken Burns drift inside the hard-edged
   panel. The panel still runs up behind the header (owner's call). */
.hero-media{position:absolute;top:0;bottom:0;right:0;left:48%;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:0% 45%}
/* the copy's rhythm is measured against the fold: h1 80px ×3 lines, lead 17px ×6 lines */
/* SQUATCH 2026-10-17 (H): the lane switch adds a 30px row under the buttons, so the bottom
   air (36 → 24) and the lead's margin (24 → 20) give some of it back. Measured: the proof
   strip now lands at 746 and the announce band at 836–912 at 1440×900 (was 720 / 812–887).
   LANE_SWITCH = False in build.py restores the original fold exactly. */
.hero>.container{position:relative;width:100%;padding-top:calc(var(--head-h) + 32px);padding-bottom:24px}
.hero-copy{max-width:min(490px,48vw - var(--gutter) - 24px)}
.hero-copy h1{margin-bottom:16px;font-size:clamp(46px,5.6vw,80px)}
.hero-copy .dek{font:400 var(--fs-dek)/1.35 var(--font-display);color:var(--ink);margin:0 0 16px}
.hero-copy .lead{max-width:none;margin-bottom:20px;font-size:17px}
.frame{border-radius:var(--r-lg);overflow:hidden;background:var(--bg-alt);box-shadow:inset 0 0 0 1px var(--line)}
.frame img{width:100%;height:100%;object-fit:cover}
/* DESIGN 2026-10-16b: the proof bar is a flat full-width strip under the hero — a hairline
   above and below, nothing overlapping, no card. */
/* SQUATCH 2026-10-17 (C): the two hairlines are pseudo-elements over transparent borders
   (same height to the pixel) so they can grow in from the left; static with JS off. */
.proof-wrap{position:relative;border-top:1px solid transparent;border-bottom:1px solid transparent}
.proof-wrap::before,.proof-wrap::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line-strong)}
.proof-wrap::before{top:-1px}.proof-wrap::after{bottom:-1px}
@media (max-width:899px){
  .hero{margin-top:0;min-height:0;display:flex;flex-direction:column}
  .hero>.container{padding-top:32px;padding-bottom:0;order:1}
  /* POLISH 2026-10-17: the ink hero still runs up under the fixed header on phones, so the
     header's ink veil fades into ink rather than into the white page ground */
  .hero-ink{margin-top:calc(-1 * var(--head-h))}
  .hero-ink>.container{padding-top:calc(var(--head-h) + 24px)}
  .hero-media{position:static;left:0;order:2;aspect-ratio:4/3;width:100%;margin:28px 0 0}
  .hero-media img{object-position:22% 45%}
  .hero-copy{max-width:none}
  .hero-copy h1{font-size:var(--fs-display)}
}

/* ---- proof bar ---- */
.proof{list-style:none;margin:0;padding:36px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;font-variant-numeric:tabular-nums}
/* POLISH 2026-10-17: four large tiles — number in the serif, label beneath, hairlines between */
.ptile{display:flex;flex-direction:column;justify-content:flex-end;min-height:132px;padding:0 28px 22px 0}
.ptile+.ptile{border-left:1px solid var(--line-strong);padding-left:28px}
.ptile strong{display:block;font:500 clamp(40px,4.2vw,60px)/1 var(--font-display);color:var(--ink);letter-spacing:-.02em;margin-bottom:10px}
.ptile span{font:500 var(--fs-proof)/1.3 var(--font-body);color:var(--text)}
.ptile-list span{display:block;color:var(--ink);font-size:17px;line-height:1.35}
.proof-cred{margin:0;padding:14px 0 18px;border-top:1px solid var(--line);font:500 var(--fs-small)/1.4 var(--font-body);color:var(--ink)}
.affil-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.affil-wrap .container{display:flex;align-items:center;gap:32px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.affil-label{margin:0;font:600 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:none}
.affil{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 36px;flex:1 1 auto;justify-content:space-between}
.affil a{font:500 clamp(16px,1.3vw,19px)/1.2 var(--font-display);color:var(--ink);text-decoration:none;letter-spacing:-.005em;opacity:.78;transition:opacity var(--t-fast)}
.affil a:hover{opacity:1;text-decoration:underline;text-decoration-color:var(--gold-focus);text-underline-offset:4px}
.affil .sr-only{position:absolute}

/* ---- announcement band (home, directly under the proof strip) — OWNER 2026-10-16 ---- */
/* DESIGN 2026-10-16b: a flat full-width strip on the paper tint, the three-colour motif as
   its left accent — no border, no radius, no shadow, no second box under the proof strip.
   The 14px padding is measured: the proof strip ends at 810px at 1440×900, so the band runs
   810→886 and clears the fold. Loosening it puts the band under the fold. */
.announce-wrap{background:var(--bg-paper)}
.announce+.announce{margin-top:0}
.announce{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:14px 0 14px 56px}
.announce::before{content:"";position:absolute;left:0;top:50%;margin-top:-2px;width:36px;height:3px;background:var(--motif)}
/* the line names the class, the city, the dates and the seat limit, so it needs the full
   remaining width to stay on one line at 1440 — a second line would push the band under
   the fold */
.announce-line{margin:0;color:var(--ink);font-size:17px;font-weight:500;flex:1 1 auto;min-width:0}
.announce .actions{margin:0;flex:none}
/* the fold rule does not apply on a phone, so the band gets its air back */
@media (max-width:759px){
  .announce{display:block;padding:24px 0}
  .announce::before{position:static;display:block;margin:0 0 14px}
  .announce .actions{width:100%;margin-top:16px}
}

/* ---- trophy case (ART 2026-10-16) — the credentials chapter, home and /about ---- */
/* The two national awards and the Foundation role, set large in the serif on the page's one
   ink band. Award name big, organisation and year in small caps beneath, thin gold hairlines
   between the three, the motif once. Every item keeps its source link (white link on dark). */
.trophy{padding:clamp(48px,6vw,72px) 0}
/* POLISH 2026-10-17: the trophy case on paper (the hero took the ink) — ink type, gold rules */
.trophy.section-paper .trophy-name,.trophy.section-paper .trophy-name a{color:var(--ink)}
.trophy.section-paper .trophy-org{color:var(--muted)}
.trophy.section-paper .trophy-list li+li{border-left-color:var(--gold)}
.trophy .mark{margin-bottom:28px}
.trophy-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.trophy-list li+li{border-left:1px solid var(--on-ink-gold);padding-left:40px}
.trophy-name{font:500 clamp(24px,2.4vw,34px)/1.15 var(--font-display);color:var(--on-ink);letter-spacing:-.01em;text-wrap:balance}
.trophy-name a{color:var(--on-ink);text-decoration:none}
.trophy-name a:hover{text-decoration:underline;text-decoration-color:var(--on-ink-gold);text-underline-offset:4px}
.trophy-org{margin-top:12px;font:600 12px/1.5 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-muted)}
.trophy-detail{margin-top:10px;font-size:15px;color:var(--on-ink-soft);max-width:34ch}
.trophy-rows{margin-top:40px;padding-top:32px;border-top:1px solid var(--on-ink-line);list-style:none;padding-left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.trophy-rows li{padding:12px 0;border-bottom:1px solid var(--on-ink-line)}
.trophy-rows .cred-line{color:var(--on-ink);font-weight:600}
.trophy-rows .cred-line a{color:var(--on-ink)}
.trophy-rows .cred-detail{color:var(--on-ink-soft);font-size:15px;margin-top:4px}
.trophy-rows .cred-src{color:var(--on-ink-muted)}
.trophy .intro-line{color:var(--on-ink-muted);margin:0 0 28px}
@media (max-width:899px){
  .trophy-list{grid-template-columns:1fr;gap:0}
  .trophy-list li+li{border-left:0;padding-left:0;border-top:1px solid var(--on-ink-gold);margin-top:24px;padding-top:24px}
  .trophy-rows{grid-template-columns:1fr}
}


/* ---- credibility rows (/about full, /courses + /speaking short) — OWNER 2026-10-12 ---- */
.cred{list-style:none;margin:0;padding:0;max-width:68ch}
.cred li{padding:14px 0;border-top:1px solid var(--line)}
.cred li:last-child{border-bottom:1px solid var(--line)}
.cred-line{color:var(--ink);font-weight:600}
.cred-line a{color:var(--ink)}
.cred-detail{margin-top:4px;font-size:16px;color:var(--text)}
.cred-src{color:var(--muted);font-size:var(--fs-small);white-space:nowrap}
/* short form: two columns of plain proof lines, each row keeping its hairline so the two
   columns read as one strip rather than two lists */
.cred-short{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.cred-short li{padding:12px 0}
.cred-short li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.cred-short .cred-line{font-weight:500;font-size:16px}
@media (max-width:759px){
  .cred-short{grid-template-columns:1fr}
  .cred-short li:nth-last-child(-n+2){border-bottom:0}
  .cred-short li:last-child{border-bottom:1px solid var(--line)}
}

/* ---- plain link list (/about, /gems) ---- */
.link-list li{display:block}
.link-list a{font-weight:600}
.link-list .ll-x{display:block;margin-top:4px;color:var(--text)}
/* OWNER 2026-10-12: county cross-links — same rows, towns in --muted at meta size */
.county-links a{color:var(--ink)}
.county-links .ll-x{color:var(--muted);font-size:var(--fs-small)}

/* ---- three doors (home) — ART 2026-10-16: three real cards on the paper tint ---- */
.doors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
/* SQUATCH 2026-10-17 (E): fork panels. Photo fills the top of the panel, documentary (no
   tint); title + the one line + arrow on a solid white band beneath, never over a face.
   Whole panel is the link (the h3 link's ::after). Hover: image scale 1.07 over .8s, arrow
   +6px, the 2px lift. Min 360px, 3-up; stacked on phones. */
.door{position:relative;display:flex;flex-direction:column;min-height:360px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-fast)}
.door:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-strong)}
.door-img{position:relative;flex:1 1 auto;min-height:200px;overflow:hidden;background:var(--bg-alt)}
.door-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.door:hover .door-img img{transform:scale(1.07)}
.door-band{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:16px;align-items:center;padding:20px 24px 22px;background:var(--bg);border-top:1px solid var(--line)}
.door .mark{grid-column:1/-1;margin:0 0 14px}
.door h3{font-size:28px;line-height:1.15;margin:0}
.door h3 a{color:var(--ink)}
.door h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.door h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold-focus);text-underline-offset:4px}
.door>.door-band>p{grid-column:1;color:var(--text);font-size:16px;margin-top:6px}
.door-arrow{grid-column:2;grid-row:2/4;color:var(--accent);font-weight:600;font-size:22px;line-height:1;transition:transform var(--t-base) var(--ease)}
.door:hover .door-arrow{transform:translateX(6px)}
.door.is-lane{border-color:var(--line-strong)}
.door.is-lane h3 a{text-decoration:underline;text-decoration-color:var(--gold-focus);text-underline-offset:4px}
@media (max-width:899px){.door{min-height:0}.door-img{min-height:0;aspect-ratio:16/9;flex:none}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:24px}
  .ptile{min-height:0;padding:14px 20px 14px 0}.ptile+.ptile{padding-left:20px}
  .ptile:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--line-strong)}.ptile:nth-child(4){border-top:1px solid var(--line-strong)}
  .affil{justify-content:flex-start;gap:8px 28px}
}
/* the closing invitation: one line, one button, centred on the paper tint */
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tile a{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;color:var(--text);text-decoration:none;transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-fast)}
.tile a:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-strong)}
.tile-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--bg-alt)}
.tile-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tile a:hover .tile-img img{transform:scale(1.06)}
.tile-tag{position:absolute;top:14px;left:14px;padding:6px 10px;border-radius:var(--r-pill);background:var(--on-ink);color:var(--ink);font:600 12px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase}
.tile-band{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;padding:18px 22px 20px;border-top:1px solid var(--line)}
.tile-band h3{grid-column:1;font-size:24px;line-height:1.15;margin:0}
.tile-band p{grid-column:1;margin-top:6px;font-size:15px;color:var(--text)}
.tile-band .door-arrow{grid-column:2;grid-row:1/3}
.tile a:hover .door-arrow{transform:translateX(6px)}
.tile a:hover h3{text-decoration:underline;text-decoration-color:var(--gold-focus);text-underline-offset:4px}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.quotes .quote{max-width:none}
.quotes-empty{margin:0}
.form-line{margin:10px 0 20px;color:var(--text);font-size:17px}
.announce-again{border-top:1px solid var(--line)}
/* OWNER 2026-10-20: after the base .tiles rule so it wins. Tablet: 2-up. Phone: one swipeable
   row of compact tiles (scroll-snap, ~78% wide so the next tile peeks in). */
@media (max-width:899px){.tiles,.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){
  .quotes{grid-template-columns:1fr}
  .tiles{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scrollbar-width:none}
  .tiles::-webkit-scrollbar{display:none}
  .tile{flex:0 0 78%;scroll-snap-align:start}
  .tile-band{padding:14px 16px 16px}.tile-band h3{font-size:21px}.tile-band p{font-size:14px}
}
.cta-close{text-align:center;padding:8px 0 16px}
.cta-close .mark{margin:0 auto 24px}
.cta-close h2{max-width:20ch;margin:0 auto 28px;font-size:var(--fs-h2)}
.cta-close .actions{justify-content:center}

/* ---- courses (/courses) ---- */
/* OWNER 2026-10-12: named groups — the Society of Exchange Counselors classes, then Jason's
   own material. Two columns: a written card runs full width, a card that is still chips
   takes one column. */
.course-group+.course-group{margin-top:var(--s-7)}
.course-group>h2{margin-bottom:8px;max-width:34ch}
.course-group-note{margin:0 0 20px;color:var(--muted);font-size:16px;max-width:68ch}
.courses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.course-lead{grid-column:1/-1}
.course{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.course .num{font:600 12px/1 var(--font-body);letter-spacing:.14em;color:var(--muted);margin-bottom:12px;font-variant-numeric:tabular-nums}
.course h3{margin-bottom:12px}
.course p+p{margin-top:12px}
.course .course-desc{margin-top:12px}
/* OWNER 2026-10-12: the subtitle, then the approval line, under a real course title */
.course-subtitle{margin:-4px 0 0;font:400 18px/1.35 var(--font-display);color:var(--ink)}
.course-approval{margin:0;font-size:15px;color:var(--text)}
.course-approval a{color:var(--text);font-weight:500}
.course-subtitle+.course-approval{margin-top:10px}
.course-link{margin-top:20px}
.course-link .btn-text{min-height:0}
.course .course-sub{margin-top:20px;font:600 12px/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.course .deflist{margin-top:8px;max-width:none}
.course .note{margin-top:16px;font-size:15px;max-width:none}
/* the full-width lead card keeps a readable measure */
.course-lead p,.course-lead .deflist,.course-lead .note{max-width:68ch}
/* OWNER 2026-10-12: two columns inside the lead card — prose and notes left, scope right —
   so the full-width card doesn't end at a 68ch measure with half of it empty */
.course-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:16px 48px;margin-top:16px;align-items:start}
.course-cols>div>:first-child{margin-top:0}
.course-cols p,.course-cols .deflist{max-width:none}
.course-cover .course-sub{margin-top:0}
.course-notes{margin-top:24px;display:grid;gap:12px}
.course-notes .note{max-width:none;margin-top:0}
/* stacked: the scope list needs air under the prose. More specific than the
   .course-cols>div>:first-child reset above, or that reset wins. */
@media (max-width:899px){
  .course-cols{grid-template-columns:1fr;gap:0}
  .course-cols>.course-cover>.course-sub{margin-top:28px}
}

/* ---- syllabus blocks (/register) — OWNER 2026-10-16 ---- */
/* An h2, then a run of sub-blocks each with an optional kicker eyebrow, an h3, an optional
   approval line, prose and a .deflist. No cards and no grid: the blocks stack, so a block
   that is only a list sits as comfortably as one with two paragraphs. */
.syl+.syl{margin-top:var(--s-7)}
/* an intro line under the h2 needs real air before the first sub-block's h3 */
.intro-line+.syl{margin-top:28px}
.syl h3{margin-bottom:10px}
.syl .eyebrow{margin-bottom:12px}
.syl p{max-width:68ch}
.syl p+p{margin-top:12px}
.syl .course-approval{margin-top:0;margin-bottom:12px}
.syl .deflist,.syl .taglist{margin-top:16px}
.syl h3+.deflist,.syl h3+.taglist{margin-top:12px}
/* DESIGN 2026-10-16: the two courses included in the class are self-contained units, so
   they read as cards — surface, hairline border, internal padding — instead of being more
   ribbon in a page of ribbon. The blocks that are only a list stay plain. */
.syl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,28px)}
.syl-card .deflist li:last-child{border-bottom:0;padding-bottom:0}
.syl-card+.syl{margin-top:var(--s-6)}
.syl-card .course-approval{color:var(--muted)}
.syl-card .course-approval a{color:var(--text)}

/* ---- events (/events) ---- */
.evs{list-style:none;margin:16px 0 0;padding:0}
.ev{display:grid;grid-template-columns:180px 1fr;gap:8px 24px;padding:20px 0;border-top:1px solid var(--line)}
.ev:last-child{border-bottom:1px solid var(--line)}
.ev-when{font:600 var(--fs-small)/1.5 var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums}
.ev-kind{font:600 12px/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ev-body h3{margin-bottom:6px}
.ev-where,.ev-note{color:var(--text)}
.ev-meta{margin-top:6px;font-size:var(--fs-small);color:var(--muted)}
.ev-link{margin-top:4px}
.events-past{margin-top:var(--s-7)}
.events-empty{margin-top:20px;max-width:68ch}
.events-empty .slot{margin-bottom:16px}
.events-empty .actions{margin-top:24px}
/* OWNER 2026-10-16: the /register link under the empty state's two standing buttons */
.events-empty .micro{margin-top:18px}

/* ---- X embed (/about) ---- */
.xembed{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,28px);max-width:600px}
.xembed h2{font-size:var(--fs-h3);line-height:1.3;margin-bottom:8px;max-width:none}
.xembed-label{color:var(--text);font-size:16px}
.xembed-handle{margin-top:8px;color:var(--muted);font-size:var(--fs-small)}
.xembed-slot{margin:16px 0 0}
.xembed .actions{margin-top:16px}
.xembed .micro{margin-top:10px}
/* OWNER 2026-10-16: always-present profile link; emphasised if the embed never renders */
.xembed-link{margin-top:10px}
.xembed-link.is-only{font-size:16px;font-weight:500}

/* ---- page head + inner frames ---- */
.page-head{padding:48px 0 32px}
.page-head h1{font-size:var(--fs-h1);line-height:1.06;margin-bottom:20px;max-width:22ch;letter-spacing:-.015em}
/* ART 2026-10-16: /register's event header — the page's one ink band, the class name large,
   the place · dates · seats line in small caps beneath it, the venue, then the copy. */
.page-head.head-ink{background:var(--ink-band);color:var(--on-ink-soft);margin-top:calc(-1 * var(--head-h));padding:calc(var(--head-h) + 56px) 0 64px}
.head-ink h1{color:var(--on-ink);font-size:var(--fs-event);max-width:14ch;margin-bottom:22px}
.head-ink .head-meta{font:600 13px/1.5 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-muted);margin:0 0 6px}
.head-ink .head-venue{font-size:17px;color:var(--on-ink-soft);margin:0 0 28px}
.page-head.head-ink .dek{color:var(--on-ink);max-width:30ch}
.page-head.head-ink .lead{color:var(--on-ink-soft)}
.head-ink .eyebrow{display:none}
/* ART 2026-10-16: /about — the person dominates: name large with the Foundation portrait
   inset beside it, then the wide teaching photo, then the bio. */
.about-head{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;padding-bottom:40px}
.about-head .headshot{width:148px;aspect-ratio:4/5;flex:none}
.about-head h1{font-size:clamp(44px,5.6vw,84px);line-height:1.02;letter-spacing:-.02em;margin-bottom:14px;max-width:none}
.about-head .dek{margin:0;max-width:40ch}
/* photo band: one restrained image per page where there was none */
.band-photo{padding:8px 0 0}
.band-photo .frame{aspect-ratio:21/9}
.band-photo .frame.r169{aspect-ratio:16/9}
.band-photo+.section{padding-top:var(--section)}
.band-photo+.section.section-ruled>.container::before{display:none}
main>.band-photo:last-child{padding-bottom:var(--section)}
.head-ink+.video-wrap{padding-top:40px}
@media (max-width:759px){
  .about-head{grid-template-columns:1fr;gap:20px}
  .about-head .headshot{width:120px}
  .band-photo .frame{aspect-ratio:4/3}
  .page-head.head-ink{padding:calc(var(--head-h) + 40px) 0 44px} /* HEADER 2026-10-17: still runs up behind the header */
}
.page-head .dek{font:400 var(--fs-dek)/1.35 var(--font-display);color:var(--ink);margin:-4px 0 20px;max-width:34ch}
.page-head .dek-long{font-size:20px;max-width:56ch}
.page-head .lead{margin-bottom:0}
.page-head .actions{margin-top:28px}
.page-head+.section{padding-top:24px}
.page-frame{padding:8px 0 0}
.page-frame .frame{aspect-ratio:16/9}
.page-frame .frame.r32{aspect-ratio:3/2}
.page-frame .frame.r43{aspect-ratio:4/3}
.page-frame+.section{padding-top:var(--section)}

/* ---- panels ---- */
/* DESIGN 2026-10-16b: a panel is no longer a rounded box. It is flat content, and the
   section it sits in carries the ground (paper, per GROUNDS in build.py). */
.panel{max-width:none}
.panel h2{margin-bottom:20px;max-width:26ch}
.panel p{max-width:60ch}
.panel p+p{margin-top:16px}
.panel .strong{color:var(--ink);font-weight:500}
.panel .actions{margin-top:28px}
.panel-split .actions{margin-top:28px}
.panel-band{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px}
.panel-band h2{margin:0;font-size:var(--fs-h3);line-height:1.3;max-width:40ch}
.panel-band .actions{margin:0}
.panel-note{margin-top:8px}

/* ---- columns ---- */
.cols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.cols li{border-top:1px solid var(--line);padding-top:20px}
.cols .num{display:block;font:600 12px/1 var(--font-body);letter-spacing:.14em;color:var(--muted);margin-bottom:14px;font-variant-numeric:tabular-nums}
.cols h3{margin-bottom:10px}
.cols+.after{margin-top:32px}
/* SQUATCH 2026-10-17 (D): sticky stacking cards. Each card is a bordered surface; at ≥1024px
   it is position:sticky at --rail-top (which already clears the pill and /register's jump
   nav) plus 14px per card, so the previous card shows as a 14px lip above the next and the
   sequence stacks like paper while the reader scrolls. Equal min-heights keep the lips
   clean. Below 1024px: plain cards, in flow, no stickiness. Verbatim copy, same ids. */
.stk{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;max-width:76ch}
.stk-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px clamp(24px,3vw,36px) 30px;margin:0}
.cols.stk li{border-top:0;padding-top:28px}
.stk h3{font-size:28px;line-height:1.15;margin-bottom:12px}
.stk .num{margin-bottom:16px}
.stk p{max-width:60ch}
.qa.stk dt{padding-top:0;border-top:0}
.qa.stk dd{margin:10px 0 0}
@media (min-width:1024px){
  .stk{display:block;max-width:820px}
  .stk-card{position:sticky;top:calc(var(--rail-top) + var(--i,0)*14px);min-height:250px;margin-top:20px}
  .stk-card:first-child{margin-top:0}
  .stk+.sec-photo,.stk+.after{position:relative;z-index:1}
}

/* ---- who i am ---- */
.whoami{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start}
.headshot{aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);background:var(--bg-alt)}
.headshot img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.whoami .lead{max-width:62ch;margin-bottom:20px}
.whoami .prose{max-width:68ch}

/* ---- lists ---- */
.deflist{list-style:none;margin:0;padding:0;max-width:68ch}
/* DESIGN 2026-10-16: 12px, not 14 — a hairline row is for a multi-clause item, and the
   tighter rhythm stops a list of them reading as rows in an admin table. */
.deflist li{padding:12px 0;border-top:1px solid var(--line)}
/* DESIGN 2026-10-16: a list of short single-clause items ("Wraps." / "Bond for title.")
   is a set of tags, not five full-width rows. Quiet fill, hairline edge, body colour —
   never the accent, because nothing here is clickable. build.py decides by the items. */
.taglist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.taglist li{background:var(--bg-alt);border-radius:var(--r-pill);padding:8px 16px;font-size:16px;color:var(--text)}
.deflist li:last-child{border-bottom:1px solid var(--line)}
.deflist strong{color:var(--ink);font-weight:600}
.checklist{list-style:none;margin:0;padding:0;max-width:68ch}
.checklist li{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:10px 0;align-items:start}
.checklist li::before{content:"";width:20px;height:20px;margin-top:4px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E1726' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center/12px no-repeat}
.topics{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.topics li{padding:10px 0;border-top:1px solid var(--line);break-inside:avoid}
.qa{margin:0;max-width:68ch}
.qa dt{font:500 var(--fs-h3)/1.3 var(--font-display);color:var(--ink);padding-top:24px;border-top:1px solid var(--line)}
.qa dt:first-child{padding-top:0;border-top:0}
.qa dd{margin:10px 0 32px}
.qa dd:last-child{margin-bottom:0}

/* ---- accordion (DESIGN 2026-10-16b) ---- */
/* <details>/<summary>, so it works with JS off and every word stays in the DOM. Used for
   the three fears on /work, the county FAQ and "Details" on /register; the first item is
   open. Never for the 1031 disclaimer, the fine print or a form. */
.accs{max-width:68ch;border-bottom:1px solid var(--line)}
.acc{border-top:1px solid var(--line)}
.acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;min-height:44px;cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc summary h3{margin:0;font-size:var(--fs-h3);line-height:1.3}
.acc summary:hover h3{text-decoration:underline;text-decoration-color:var(--gold-focus);text-underline-offset:4px}
.acc summary:focus-visible{box-shadow:var(--ring);border-radius:4px;outline:none}
.acc-ic{flex:none;width:20px;height:20px;position:relative}
.acc-ic::before,.acc-ic::after{content:"";position:absolute;left:3px;top:9px;width:14px;height:2px;background:var(--ink);transition:transform var(--t-base) var(--ease)}
.acc-ic::after{transform:rotate(90deg)}
.acc[open] .acc-ic::after{transform:none}
.acc-body{padding:0 0 24px;max-width:68ch}
.acc-body p+p{margin-top:12px}
.acc-body .deflist,.acc-body .taglist{margin-top:4px}
.acc-body .course-approval{margin-bottom:12px}
.block.stack .accs{max-width:76ch}

/* ---- 1031 deadline calculator (DESIGN 2026-10-16b) ---- */
/* Pure calendar arithmetic in site.js; no storage, no network. Sits inside the 1031 block,
   above the disclaimer, on /work and each county page. */
.calc{margin-top:36px;padding:24px 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);max-width:68ch}
.calc-title{margin:0 0 6px;font:500 var(--fs-h3)/1.3 var(--font-display);color:var(--ink)}
.calc-note{margin:0 0 18px;font-size:15px;color:var(--muted)}
.calc-field{display:grid;gap:8px;max-width:320px}
.calc-field label{font:500 14px/1.4 var(--font-body);color:var(--ink)}
.calc-field input{min-height:48px;width:100%;border:1px solid var(--line-field);border-radius:var(--r-md);background:#fff;padding:10px 14px;font:400 16px/1.4 var(--font-body);color:var(--text)}
.calc-field input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.calc-out{margin:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px}
.calc-out div{border-top:1px solid var(--line);padding-top:12px}
.calc-out dt{font:600 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.calc-out dd{margin:6px 0 0;font:500 22px/1.3 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:599px){.calc-out{grid-template-columns:1fr}}

/* ---- disclaimer ---- */
/* DESIGN 2026-10-16b: still bordered and full-size (DESIGN-HANDOVER rule 1); square, not rounded */
.disclaimer{background:var(--surface);border:2px solid var(--line-strong);padding:clamp(20px,3vw,32px);max-width:72ch;margin-top:40px}
.disclaimer h3{margin-bottom:12px}
.disclaimer p{font-size:17px;line-height:1.65;color:var(--text)}
.disclaimer p+p{margin-top:14px}

/* ---- note / callout — DESIGN 2026-10-16b: plain text, no box (the licence line, the
   /capital fine print, course notes). Size and colour unchanged. ---- */
.note{font-size:16px;color:var(--text);max-width:72ch}
.note+.note{margin-top:12px}
.block>.note{margin-top:0}
.note .chip{margin-top:8px}

/* ---- tables ---- */
.kv{width:100%;max-width:680px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.kv tr{border-top:1px solid var(--line)}
.kv tr:last-child{border-bottom:1px solid var(--line)}
.kv th{width:40%;text-align:left;vertical-align:top;padding:14px 16px 14px 0;font:600 14px/1.5 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kv td{padding:14px 0;color:var(--text);font-size:17px;vertical-align:top}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.formats{width:100%;border-collapse:collapse;font-size:16px;color:var(--text)}
.formats th{background:var(--bg-alt);text-align:left;font:600 14px/1.4 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:14px 12px}
.formats td{padding:14px 12px;border-top:1px solid var(--line);vertical-align:top}
.formats td:first-child{color:var(--ink);font-weight:500;white-space:nowrap}

/* ---- quote ---- */
.quote{margin:0;max-width:720px;border-left:2px solid var(--line-strong);padding:8px 0 8px 28px}
.quote blockquote{margin:0;font:italic 400 22px/1.45 var(--font-display);color:var(--ink)}
.quote figcaption{margin-top:14px;font:500 var(--fs-small)/1.5 var(--font-body);color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}

/* ---- cards ---- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
.cards li{display:flex}
.card{display:block;flex:1;min-width:0;overflow-wrap:anywhere;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;color:var(--text);font-size:16px;transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-fast)}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-strong);text-decoration:none}
.card h2,.card h3{margin-bottom:10px;font-size:var(--fs-h3);line-height:1.3;max-width:none}
.card .btn-text{display:inline-block;margin-top:12px;min-height:0;overflow-wrap:anywhere}
.card .btn-text .arr{display:inline}
.card p{color:var(--text)}

/* ---- forms ---- */
.form{max-width:560px}
.form-heading{margin-bottom:24px}
.field{margin-bottom:20px}
.field>label,.field legend{display:block;font:500 14px/1.4 var(--font-body);color:var(--ink);margin-bottom:8px;padding:0}
.field .req{color:var(--accent);margin-left:2px}
.field .opt{color:var(--muted);font-weight:400;margin-left:4px}
.field input,.field textarea,.field select{display:block;width:100%;min-height:48px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line-field);padding:10px 14px;font:400 16px/1.4 var(--font-body);color:var(--text)}
.field input::placeholder,.field textarea::placeholder{color:var(--placeholder)}
.field textarea{min-height:140px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23344054' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.field.is-error input,.field.is-error textarea,.field.is-error select{border-color:var(--error)}
.field .err{display:block;margin-top:6px;font:500 14px/1.4 var(--font-body);color:var(--error)}
.field .err:empty{display:none}
fieldset.field{border:0;padding:0;margin:0 0 20px;min-width:0}
.radio-group{display:grid;gap:8px}
.radio-card{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:16px;color:var(--text);cursor:pointer;min-height:48px}
.radio-card input{width:18px;height:18px;margin:0;accent-color:var(--accent);min-height:0;box-shadow:none}
.radio-card:has(input:checked){background:var(--accent-soft);border-color:var(--accent)}
.radio-card:has(input:focus-visible){box-shadow:var(--ring)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.form-summary{background:var(--error-soft);color:var(--error);border-radius:var(--r-md);padding:12px 16px;margin-bottom:20px;font-weight:500;font-size:15px}
.form-summary:empty{display:none}
.form-fail{background:var(--error-soft);border-radius:var(--r-md);padding:14px 16px;margin-top:16px;color:var(--ink);font-size:15px}
.form-fail:empty{display:none}
.form-fail a{color:var(--accent);font-weight:600}
.form-success{background:var(--success-soft);border-radius:var(--r-lg);padding:28px;max-width:560px;display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start}
.form-success svg{width:20px;height:20px;margin-top:4px;stroke:var(--success)}
.form-success p{font-size:19px;color:var(--ink);line-height:1.5}
.form-inline{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.form-inline .field{flex:1 1 240px;margin:0}
.form .actions{margin-top:4px}
.form-after{margin-top:12px}

/* ---- audio archive ---- */
.jump{display:flex;flex-wrap:wrap;gap:4px 20px;list-style:none;margin:24px 0 0;padding:0}
.jump a{font-weight:600;font-size:16px;color:var(--accent);min-height:44px;display:inline-flex;align-items:center}
.archive{margin-top:8px}
.year{display:flex;align-items:center;gap:20px;margin:0 0 8px;max-width:none;scroll-margin-top:110px}
.year::after{content:"";flex:1;height:1px;background:var(--line)}
.year-block+.year-block{margin-top:48px}
.eps{list-style:none;margin:0;padding:0}
.ep{display:grid;grid-template-columns:96px 1fr;gap:4px 16px;padding:16px 0;border-top:1px solid var(--line);align-items:baseline}
.ep:last-child{border-bottom:1px solid var(--line)}
.ep .d{font:500 var(--fs-small)/1.5 var(--font-body);color:var(--muted);font-variant-numeric:tabular-nums}
.ep .t{font-weight:500;color:var(--ink);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.ep .len{font:500 var(--fs-small)/1.5 var(--font-body);color:var(--muted);font-variant-numeric:tabular-nums}
.ep audio{grid-column:1/-1;width:100%;height:40px;border-radius:var(--r-md);accent-color:var(--accent);color-scheme:light;margin-top:8px}

/* ---- audio block (class) ---- */
.audio-block{max-width:72ch}
.audio-block .slot{margin:16px 0 12px}
.audio-block audio{width:100%;height:40px;border-radius:var(--r-md);accent-color:var(--accent)}
.audio-block .disclosure{font-size:var(--fs-small);color:var(--muted)}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-details address{font-style:normal;font-size:17px;line-height:1.65;margin-bottom:24px}
.contact-details address p+p{margin-top:6px}
.contact-details address a{color:var(--text)}
.map{display:block;position:relative;background:var(--bg-alt);border-radius:var(--r-lg);aspect-ratio:16/9;max-width:560px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.map:hover{text-decoration:none}
.map img{width:100%;height:100%;object-fit:cover}
.map .btn{position:absolute;right:12px;bottom:12px}
.map-credit{margin-top:8px;font-size:13px;color:var(--muted);max-width:560px}
.map-credit a{color:var(--muted)}
.contact-details .mark{margin:0 0 20px}

/* ---- footer (ART 2026-10-16: ink, four clear columns — business, pages, counties, legal) ---- */
.footer{background:var(--ink-band);color:var(--on-ink-muted);padding:64px 0 28px;font-size:var(--fs-small)}
.footer a{color:var(--on-ink-soft)}
.footer a:hover{text-decoration:underline;color:var(--on-ink)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.4fr;gap:40px 48px}
.foot-heading{font:600 var(--fs-eyebrow)/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-muted);margin:0 0 14px}
.footer .mark{background:var(--motif-ink);margin-bottom:22px}
.foot-biz{font-size:15px;line-height:1.6;color:var(--on-ink-soft);margin:0}
.foot-biz strong{color:var(--on-ink);font-weight:600}
.foot-links{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px;font-weight:500}
.foot-site,.foot-counties{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-legal p{max-width:44ch;line-height:1.55}
.foot-legal p+p{margin-top:10px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;margin-top:48px;padding-top:20px;border-top:1px solid var(--on-ink-line)}
.foot-credit{margin:0;font-size:13px;color:var(--on-ink-muted);max-width:70ch;flex:1 1 320px}
.footer .btn-secondary{background:transparent;color:var(--on-ink);border-color:rgba(255,255,255,.35);box-shadow:none}
.footer .btn-secondary:hover{background:rgba(255,255,255,.1);border-color:var(--on-ink);color:var(--on-ink)}
.footer :focus-visible{box-shadow:0 0 0 2px var(--ink-band),0 0 0 4px var(--gold-focus)}
@media (max-width:1023px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:599px){.foot-grid{grid-template-columns:1fr;gap:32px}}

/* ---- anchors under the sticky bar ---- */
[id]{scroll-margin-top:calc(var(--stick-top) + 12px)}
/* with a jump nav the target has to clear the nav as well */
body:has(.jumpnav) [id]{scroll-margin-top:calc(var(--stick-top) + 72px)}

/* ---- responsive ---- */
@media (max-width:1023px){
  .proof{justify-content:flex-start;gap:10px 22px}
  .proof li+li::before{display:none}
}
@media (max-width:899px){
  .cols{grid-template-columns:1fr}
  .doors{grid-template-columns:1fr}
  .cards{grid-template-columns:minmax(0,1fr)}
  .courses{grid-template-columns:minmax(0,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:759px){
  :root{--gutter:20px;--fs-body:16px;--fs-lead:17px;--fs-h3:20px;--head-h:68px}
  /* HEADER 2026-10-17: 8px top pad + 60px bar in both states; the pill still appears */
  .header{padding:8px 0}
  .header.scrolled{padding:8px 12px}
  .bar{padding:6px 0;min-height:60px}
  .header.scrolled .bar{padding:6px 6px 6px 16px}
  .wordmark{height:28px;width:148px}
  .wordmark img{height:41.7px;top:-7.5px}
  .header.scrolled .wordmark{height:20.1px;width:106.5px}
  .header.scrolled .wordmark img{height:30px;top:-5.4px;left:-.4px}
  .nav{display:none}
  .burger{display:block}
  .proof{gap:10px 18px}
  .proof li{white-space:normal}
  .actions .btn{width:100%;min-height:52px}
  .actions .btn-text{width:auto}
  .btn-sm{min-height:44px}
  .preview{min-height:44px;padding-right:56px}
  html:not(.preview-off) .header{top:44px} /* HEADER 2026-10-17: the 44px banner */
  .preview-x{width:44px;height:44px;top:0;right:4px}
  .foot-links a,.foot-site a,.foot-counties a{display:inline-flex;align-items:center;min-height:44px}
  .foot-links,.foot-site,.foot-counties{gap:0}
  .quote blockquote{font-size:20px}
  .page-frame .frame{aspect-ratio:4/3}
  .page-frame .frame.r32{aspect-ratio:4/3}
  .whoami{grid-template-columns:160px 1fr;gap:24px}
  .ep{grid-template-columns:1fr}
  .ev{grid-template-columns:1fr;gap:4px}
  .course{padding:20px}
  .form-inline{display:block}
  .form-inline .field{margin-bottom:20px}
  .form-inline .btn{width:100%;min-height:52px}
}
@media (max-width:699px){
  .topics{columns:1}
  .table-wrap{border:0;background:transparent;overflow:visible}
  .formats thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .formats,.formats tbody,.formats tr,.formats td{display:block}
  .formats tr{border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 14px;background:var(--surface)}
  .formats tr+tr{margin-top:12px}
  .formats td{border:0;padding:8px 0;white-space:normal}
  .formats td::before{content:attr(data-label);display:block;font:600 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  .map{aspect-ratio:4/3}
  .kv th{width:38%;padding-right:12px}
}
@media (max-width:599px){
  .whoami{grid-template-columns:1fr}
  .headshot{width:160px}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  .form-success{padding:20px}
  .cards-2{grid-template-columns:minmax(0,1fr)}
}

/* ---- scroll reveal (DESIGN 2026-10-16b) ---- */
/* site.js adds html.rv-on only when motion is allowed, then marks each .rv as it enters the
   viewport (once). Without JS, or with prefers-reduced-motion, nothing here applies and
   everything is visible. 16px, one fade-up, grid children staggered 60ms. Nothing bounces. */
html.rv-on .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--rv-d,0ms)} /* SQUATCH 2026-10-17 (C): 16px/.42s → 24px/.9s */
html.rv-on .rv.is-in{opacity:1;transform:none}

/* ---- MOTION 2026-10-17: structure in motion ---- */
/* Every rule here is progressive: the markup renders complete with JS off, and site.js adds
   the html classes (js, deal-on, rp-on) and the data attributes that switch these on. The
   reduced-motion block at the end of the file already collapses every transition. */
/* SQUATCH 2026-10-17: the hero b-roll rules (.hero-video / .hero-vbtn) were dead — the
   ambient branch is off in content.py — and were trimmed; the still has a Ken Burns drift now. */
/* proof numbers: the final width is reserved before the count starts, so nothing shifts */
.proof strong[data-count]{display:inline-block}
/* the deal diagram: nodes, three flows in the motif colours, one legend. Scenes are
   [data-scene] on the svg; the sticky figure is shown only by html.deal-on (≥1024px). */
.deal-fig{display:none}
.deal-mini{max-width:360px;margin-bottom:16px}
.deal-svg{display:block;width:100%;height:auto;font:500 14px var(--font-body)}
.deal-svg .dn rect{fill:var(--bg);stroke:var(--line-strong);stroke-width:1.5}
.deal-svg .dn text{fill:var(--ink);text-anchor:middle}
.section-paper .deal-svg .dn rect{fill:var(--surface)}
.deal-svg .dn,.deal-svg .clock{opacity:0;transition:opacity 600ms var(--ease)}
.deal-svg .df{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 600ms var(--ease),opacity 300ms}
.deal-svg .cash{stroke:var(--m-cash)}.deal-svg .paper{stroke:var(--m-paper)}.deal-svg .title{stroke:var(--m-title)}
.deal-svg #da-cash path{fill:var(--m-cash)}.deal-svg #da-paper path{fill:var(--m-paper)}.deal-svg #da-title path{fill:var(--m-title)}
.deal-svg .old{stroke-dasharray:.04 .03;stroke-dashoffset:0;stroke-width:1.5;transition:opacity 600ms var(--ease)}
.deal-svg .clock circle{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.deal-svg .clock .arc{fill:none;stroke:var(--m-title);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 900ms var(--ease) 200ms}
.deal-svg .clock .hand{stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.deal-svg .dl rect{stroke:none}
.deal-svg .dl .cash{fill:var(--m-cash)}.deal-svg .dl .paper{fill:var(--m-paper)}.deal-svg .dl .title{fill:var(--m-title)}
.deal-svg .dl text{font:600 13px/1 var(--font-body);font-variant:small-caps;letter-spacing:.06em;fill:var(--muted);text-anchor:start}
.deal-svg[data-scene="1"] .s1,.deal-svg[data-scene="2"] .s2,.deal-svg[data-scene="3"] .s3{opacity:1;stroke-dashoffset:0}
.deal-svg[data-scene="2"] .old{opacity:.45}
.deal-svg[data-scene="3"] .clock .arc{stroke-dashoffset:0}
@media (min-width:1024px){
  html.deal-on .deal{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);column-gap:clamp(48px,6vw,96px);align-items:start}
  html.deal-on .deal-fig{display:block;position:sticky;top:clamp(var(--rail-top),50vh - 200px,60vh)}
  html.deal-on .deal-mini{display:none}
  html.deal-on .deal-steps{display:block;margin-top:0}
  html.deal-on .deal-step{min-height:min(70vh,640px);display:flex;flex-direction:column;justify-content:center;padding-top:0}
  html.deal-on .deal-step p{max-width:44ch}
}
/* /work: the recognition list as real checkboxes in their labels, drawn as the check row */
.checklist-live li{display:block;padding:0}
.checklist-live label{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:10px 0;align-items:start;cursor:pointer;min-height:44px}
.checklist-live li::before{display:none}
.checklist-live input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:4px 0 0 2px;border:0;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E1726' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center/12px no-repeat;cursor:pointer;transition:background-color var(--t-fast)}
.checklist-live input:checked{background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E")}
.checklist-live input:checked+span{color:var(--ink)}
/* the sentence that already follows the list, with the page's deal button beside it — always
   visible, JS or not. The first tick only emphasises: one gold ring pulse on the button
   (600ms, once) and a scroll into view if it sits below the fold. Never hidden. */
.reveal{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.reveal-cta.is-pulse{animation:ring-pulse 600ms var(--ease) 1}
@keyframes ring-pulse{0%{box-shadow:0 0 0 0 #fff,0 0 0 0 var(--gold-focus)}40%{box-shadow:0 0 0 2px #fff,0 0 0 6px var(--gold-focus)}100%{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(176,141,79,0)}}
/* /radio: one shared player in a slim fixed bar; the per-row <audio> is the JS-off path */
html.rp-on .ep audio{display:none}
.ep-play{grid-column:2;justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;margin-top:4px;border:1px solid var(--accent);border-radius:var(--r-pill);background:#fff;color:var(--accent);font:600 14px/1 var(--font-body);cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.ep-play:hover,.ep-play[aria-pressed="true"]{background:var(--accent);color:#fff}
.rplayer{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--bg);border-top:1px solid var(--line-strong);padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px))}
body.has-rp{padding-bottom:96px}
.rp-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"btn title time" "btn seek seek";gap:2px 16px;align-items:center}
.rp-title{grid-area:title;margin:0;font-weight:500;color:var(--ink);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-btn{grid-area:btn;min-width:72px;min-height:44px;border:0;border-radius:var(--r-pill);background:var(--accent);color:#fff;font:600 14px/1 var(--font-body);cursor:pointer}
.rp-btn:hover{background:var(--accent-hover)}
.rp-seek{grid-area:seek;width:100%;margin:0;height:24px;accent-color:var(--accent);cursor:pointer}
.rp-time{grid-area:time;font:500 var(--fs-small)/1 var(--font-body);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rplayer audio{display:none}
@media (max-width:759px){.ep-play{grid-column:1}.rp-title{font-size:14px}}
/* the motif draws in: three segments left to right, 200ms each, once (site.js adds .mk) */
.mark.mk,.eyebrow.mk::before,.announce.mk::before{clip-path:inset(0 100% 0 0)}
.mark.mk.is-in,.eyebrow.mk.is-in::before,.announce.mk.is-in::before{clip-path:inset(0 0 0 0);transition:clip-path 600ms steps(3,end)}

/* ---- SQUATCH 2026-10-17: Ken Burns, staged entrance, clip / grow reveals, crossfade, lane ---- */
/* html.mo and html.hero-on are set by the inline pre-paint script (build.py MOTION_JS) only
   when motion is allowed: mo before first paint, hero-on ~300ms after DOMContentLoaded.
   With JS off or reduced motion neither exists and everything below is at rest. */
/* (A) the hero still drifts 1.00 → 1.08 over 22s, linear, once, inside its panel */
@keyframes kb{to{transform:scale(1.08) translate(-1.2%,-.8%)}}
html.mo .hero-media img{animation:kb 22s linear forwards}
/* (B) the h1 words rise from below their own line; dek → lead → buttons → lane follow at
   90ms steps. The .w box keeps the line box exactly (padding and negative margin cancel),
   it only extends the clip so descenders survive. */
.hero-copy h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.hero-copy h1 .w i{display:inline-block;font-style:normal}
html.mo:not(.hero-on) .hero .w i{transform:translateY(110%)}
html.hero-on .w i{transition:transform .7s var(--ease) var(--wd,0ms)}
html.mo:not(.hero-on) :is(.hero,.head-ink) :is(.dek,.lead,.actions,.lane,.head-meta,.head-venue,.head-ink h1){opacity:0;transform:translateY(24px)}
html.hero-on :is(.hero,.head-ink) :is(.dek,.lead,.actions,.lane,.head-meta,.head-venue,h1){transition:opacity .9s var(--ease) var(--wd,0ms),transform .9s var(--ease) var(--wd,0ms)}
.hero .dek{--wd:240ms}.hero .lead{--wd:330ms}.hero .actions{--wd:420ms}.hero .lane{--wd:510ms}
.head-ink h1{--wd:0ms}.head-ink .head-meta{--wd:90ms}.head-ink .head-venue{--wd:180ms}.head-ink .dek{--wd:270ms}.head-ink .lead{--wd:360ms}.head-ink .actions{--wd:450ms}
/* (C) reveal variants, all once via the existing observer: clip = a left-to-right wipe on
   every photo frame; grow = section hairlines and the proof strip's rules scale in from the left */
html.rv-on .rv[data-io="clip"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
html.rv-on .rv[data-io="clip"].is-in{clip-path:inset(0)}
html.rv-on .gr.section-ruled>.container::before,html.rv-on .proof-wrap.gr::before,html.rv-on .proof-wrap.gr::after{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
html.rv-on .gr.is-in.section-ruled>.container::before,html.rv-on .proof-wrap.gr.is-in::before,html.rv-on .proof-wrap.gr.is-in::after{transform:none}
/* (F) cross-document crossfade, 220ms, pure CSS; browsers without support load normally */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:220ms}
/* (G) the map tile */
.map img{transition:transform .8s var(--ease)}
.map:hover img{transform:scale(1.06)}
/* (H) the lane switch: a radiogroup of three pills under the hero buttons. Hidden until
   site.js unhides it, so JS off is the page as before. Radio semantics, arrow keys. */
.lane{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.lane-l{font:500 13px/1 var(--font-body);color:var(--muted);margin-right:6px}
.lane button{min-height:30px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--bg);color:var(--text);font:500 13px/1 var(--font-body);cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.lane button:hover{border-color:var(--accent);color:var(--ink)}
.lane button[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
@media (max-width:759px){.lane button{min-height:44px;padding:0 16px}}

/* ---- motion ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
  .btn:hover,.card:hover,.door:hover,.btn-text:hover .arr,.door:hover .door-arrow,.door:hover .door-img img,.map:hover img{transform:none}
  /* SQUATCH 2026-10-17: every effect inert — no drift, no entrance pre-state, no wipes, no crossfade */
  .hero-media img{animation:none}
  .hero .w i,.hero .dek,.hero .lead,.hero .actions,.hero .lane,.head-ink h1,.head-ink .head-meta,.head-ink .head-venue,.head-ink .dek,.head-ink .lead,.head-ink .actions{opacity:1;transform:none;transition:none}
  html.rv-on .rv[data-io="clip"]{clip-path:none}
  html.rv-on .gr.section-ruled>.container::before,html.rv-on .proof-wrap.gr::before,html.rv-on .proof-wrap.gr::after{transform:none}
  @view-transition{navigation:none}
  html.rv-on .rv{opacity:1;transform:none;transition:none}
  .mark.mk,.eyebrow.mk::before,.announce.mk::before{clip-path:none}
}