:root{
  --navy:#205178; --gold:#b69d78; --act:#f29551;
  --ink:#0C141C; --ink2:#122232; --cream:#F9F6F1; --line:#e2d9cc;
  --serif:'Baskervville',Georgia,serif;
  /* 🔴 HIS sans, not ours. adenleadership.com loads Montserrat 400 for body,
     buttons and the nav (probed off the live Astra CSS 2026-09-10), and the
     rebuild had silently substituted Archivo with no reason recorded in
     DECISIONS.md or DRAFT_NOTES.md. Trace ruled it back to Montserrat.
     Montserrat sets WIDER than Archivo at the same size, so anything that was
     measured to fit (the nav row, tracked uppercase buttons) is re-measured
     after any change here, in a browser, not by eye. */
  --sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --wrap:1220px; --rail-h:69px; --head-h:63px;
  /* One spacing scale. Band and block level values snap to it; row and card
     gutters are reviewed one at a time in Pass 3, because .eprow and .strip
     rewrap rather than just breathe. */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:90px;
  /* One type scale. 97 font-size declarations resolved to 55 computed values,
     17 of them crowded between 13.76px and 17.28px doing the same job. */
  --t-micro:.72rem; --t-small:.82rem; --t-body:.94rem; --t-lede:1.16rem; --t-h3:1.3rem;
  --fg:#151310; --bg:#fff; --muted:#615b56;
  /* the accent is a FILL colour. As text on white it measures about 2.3:1, so
     text-shaped calls to action use the ink version and buttons keep the fill. */
  --act-ink:#A8501A; --gold-ink:#7d6340;
  /* The accent's companions, so the whole call-to-action family turns over on
     one theme block instead of six hardcoded literals. These defaults ARE the
     values they replaced, so the dark look does not move. */
  --act-fg:#1a1005;            /* text and the play arrow ON the accent fill */
  --act-hover:#e2803a;
  --act-halo:rgba(242,149,81,.22);
  --act-focus:rgba(197,138,42,.18);

  /* ── the dark surface, as one palette ────────────────────────────────
     The hero, the ink bands, the podcast and webinar heads, the sticky rail
     and the footer are one surface wearing one set of colours. Every literal
     that used to sit inside those rules is a token here, so the whole surface
     turns over on ONE attribute instead of 60 edits.
     🔴 These defaults ARE the design as built. data-theme="dark" and no
     attribute at all render identically; the light values live in the block
     below and only apply when a reader asks for them. */
  --surf:var(--ink);
  --surf-deep:#080F16;
  --surf-fg:#e7edf2;
  --surf-h:#fff;
  --surf-p:#a9b8c5;
  --surf-lede:#b9c6d2;
  --surf-role:#8ea0b0;
  --surf-num:#93a3b1;
  --surf-foot-fg:#9fb0bd;
  --surf-faint:#7f8f9d;
  --surf-kicker:#c9b895;
  --surf-inv:#fff;
  --surf-inv-ink:var(--ink);
  --surf-hair-08:rgba(255,255,255,.08);
  --surf-hair-10:rgba(255,255,255,.10);
  --surf-hair-14:rgba(255,255,255,.14);
  --surf-hair-16:rgba(255,255,255,.16);
  --surf-hair-18:rgba(255,255,255,.18);
  --surf-hair-22:rgba(255,255,255,.22);
  --surf-hair-24:rgba(255,255,255,.24);
  --surf-hair-32:rgba(255,255,255,.32);
  --rail-bg:rgba(12,20,28,.97);
  --surf-veil:rgba(18,34,50,.85);
  --surf-veil0:rgba(12,20,28,0);
  --surf-glow-navy-62:rgba(32,81,120,.62);
  --surf-glow-navy-60:rgba(32,81,120,.6);
  --surf-glow-navy-55:rgba(32,81,120,.55);
  --surf-glow-gold-20:rgba(182,157,120,.20);
  --surf-glow-gold-13:rgba(182,157,120,.13);
  --logo-invert:1;
  --surf-accent:var(--gold);
}
/* ── light look ──────────────────────────────────────────────────────────
   Greg's own margin note on the September 2025 draft: "Doesn't like the black
   and the photo of him. Try something new." This is the something new, offered
   as a choice rather than as a replacement, so he can hold the two side by side.
   Warm paper rather than white: the page is already #fff, so a white band would
   dissolve the section rhythm the layout is built on. #F1EAE0 sits far enough
   under the page and the cream band to keep all three readable as steps. */
html[data-theme="light"]{
  /* Trace, 2026-09-10: "the light is too much beige, not enough white." The
     first pass was a warm sand (#E6DBCA) chosen to hold the band rhythm by tone.
     It held the rhythm and lost the room. This pass gives the tone job to the
     HAIRLINES and lets the surface go nearly white, tinted with his own navy
     rather than gold so it sits under the blue logo instead of fighting it.
     Measured: every text token clears AA 4.5:1 on BOTH light surfaces. */
  --surf:#F1F5F9;
  --surf-deep:#E3EAF2;
  --surf-fg:#2E363E;
  --surf-h:#10161C;
  --surf-p:#4A545E;
  --surf-lede:#39424B;
  --surf-role:#566068;
  --surf-num:#566068;
  --surf-foot-fg:#4A545E;
  --surf-faint:#5C666F;
  --surf-kicker:#205178;
  --surf-inv:#10161C;
  --surf-inv-ink:#ffffff;
  /* Cool, to match the surface. The warm browns here were half the beige. */
  --surf-hair-08:rgba(16,22,28,.10);
  --surf-hair-10:rgba(16,22,28,.12);
  --surf-hair-14:rgba(16,22,28,.16);
  --surf-hair-16:rgba(16,22,28,.18);
  --surf-hair-18:rgba(16,22,28,.20);
  --surf-hair-22:rgba(16,22,28,.24);
  --surf-hair-24:rgba(16,22,28,.26);
  --surf-hair-32:rgba(16,22,28,.34);
  --rail-bg:rgba(241,245,249,.97);
  --surf-veil:rgba(227,234,242,.85);
  --surf-veil0:rgba(241,245,249,0);
  /* Navy led rather than gold led, for the same reason as the surface. */
  --surf-glow-navy-62:rgba(32,81,120,.13);
  --surf-glow-navy-60:rgba(32,81,120,.12);
  --surf-glow-navy-55:rgba(32,81,120,.10);
  --surf-glow-gold-20:rgba(182,157,120,.14);
  --surf-glow-gold-13:rgba(182,157,120,.10);
  --logo-invert:0;
  /* His own navy, which is also his logo's colour, so the eyebrows and the
     display numerals tie to the mark. 7.6:1 on this surface. */
  --surf-accent:#205178;
  /* 🔴 HIS BLUE IS THE PRIMARY ACCENT IN THE LIGHT LOOK. Trace, 2026-09-10.
     It is also what his own site does: #205178 appears 30 times in the live
     adenleadership.com CSS, the orange 8. Measured, and it is STRONGER than the
     orange it replaces here: white on this navy is 8.37:1 where the orange
     button was 8.21:1, and as link text it is 8.37:1 on white where --act-ink
     managed 5.49:1. The orange is untouched in the dark look. */
  --act:#205178;
  --act-ink:#205178;
  --act-fg:#ffffff;
  --act-hover:#18405E;
  --act-halo:rgba(32,81,120,.22);
  --act-focus:rgba(32,81,120,.18);
}
/* 🔴 HIS LOGO, HIS COLOUR. logo-lockup.png is already Greg's blue (#105070
   measured off the file, 88% of its opaque pixels). The dark look paints it
   white with brightness(0) invert(1); carrying that filter into the light look
   with invert(0) made it BLACK, which is a colourway he has never published.
   The right answer is no filter at all: show the file he ships.
   See memory "Never recolour a client logo to a version they do not publish".
   🔴 Related and NOT fixed here because it is the design Trace already
   approved: the DARK look's white mark is also a reversed version Greg does not
   publish. Raised, not changed. */
html[data-theme="light"] body.t-dark .brand img,
html[data-theme="light"] .foot-brand img{filter:none}
/* At 1.37:1 the band is a step, not a shout, so it gets a hairline to sit on.
   In the dark look the tone difference did that job on its own. */
/* At 1.10:1 the band is a whisper, so the hairline is what says "new section".
   In the dark look the tone difference did that job on its own. */
html[data-theme="light"] .band--ink,
html[data-theme="light"] .band--show,
html[data-theme="light"] .band--ask,
html[data-theme="light"] .hero,
html[data-theme="light"] .site-foot{
  border-top:1px solid var(--surf-hair-14);
  border-bottom:1px solid var(--surf-hair-14)}
html[data-theme="light"] .site-foot{border-bottom:0}
/* the booking panel's shadow was warm too */
html[data-theme="light"] .bookwrap{box-shadow:0 10px 34px rgba(16,22,28,.10)}
/* The portrait was cut for a near black ground. On paper it needs its own
   footing, not a filter that fakes one. */
html[data-theme="light"] .hero-shot img{filter:none}

/* ── contact form additions ──────────────────────────────────────────────
   Only the parts the registration form did not already have: a checkbox group,
   a textarea, the opt in row and the honeypot. Everything else (.reg-wrap,
   .reg-form, .fld, .reg-err, .reg-fine, .reg-done) is reused as it stands, so
   the two forms cannot drift apart visually.
   These sit on the page body, which is light in BOTH looks, which is why they
   are literals rather than surface tokens. */
.ct-h{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:0 0 .3em}
.ct-lede{font-size:var(--t-lede);color:var(--muted);margin:0 0 30px;max-width:52ch}
.fld-set{border:0;padding:0;margin:0;min-width:0}
.fld-set legend{padding:0;margin:0 0 7px}
.fld-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
@media(max-width:560px){.fld-checks{grid-template-columns:1fr}}
/* 44px tap target on the whole row, not just the 16px box */
.chk{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:9px 0;
  cursor:pointer;font-size:var(--t-body);line-height:1.45}
/* 🔴 .fld input styles TEXT fields (13px padding, a border, a radius) and it
   also matches a checkbox inside .fld, which inflated every box and pushed its
   label into the next grid column. Same specificity means source order decides,
   and that rule wins, so this one is deliberately more specific rather than
   moved. Do not "simplify" it back to .chk input. */
.chk input[type="checkbox"],
.fld .chk input[type="checkbox"]{
  -webkit-appearance:checkbox;appearance:checkbox;
  width:18px;height:18px;min-width:18px;flex:none;
  padding:0;margin:2px 0 0;border:0;border-radius:0;background:none;
  box-shadow:none;accent-color:var(--navy)}
.chk--opt{border-top:1px solid var(--line);padding-top:18px;margin-top:4px;
  color:var(--muted);font-size:var(--t-small)}
.fld textarea{font:inherit;font-size:16px;padding:13px 14px;border:1px solid #cdd5dd;
  border-radius:8px;background:#fff;color:var(--fg);resize:vertical;min-height:132px;
  width:100%;max-width:100%}
.fld textarea:focus{border-color:var(--navy);outline:none;
  box-shadow:0 0 0 3px rgba(32,81,120,.16)}
/* Off screen, not display:none: some bots skip hidden fields, and this one
   only works if a bot fills it in. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── the booking panel ───────────────────────────────────────────────────
   A light card in both looks, because the Calendly iframe paints its own white
   and cannot follow the switch. Framed and inset so it reads as deliberate. */
.bookwrap{background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:10px;box-shadow:0 10px 34px rgba(12,20,28,.10);overflow:hidden}
.book-alt{font-size:var(--t-small);color:var(--muted);margin:18px 0 0;max-width:60ch}
@media(max-width:700px){.bookwrap{padding:6px}}

/* ── the switch itself ───────────────────────────────────────────────────
   A control, not a toy: 44px tap target, real button semantics, aria-pressed
   so a screen reader says which look is on, and it carries its own label so
   nobody has to decode an icon. */
/* Floating, bottom right, never in the header. It sits ABOVE the sticky rail
   and takes the corner; back-to-top stacks above it rather than fighting for the
   same 20px. Solid ground and a shadow because it now floats over whatever band
   happens to be under it. */
.look{position:fixed;right:20px;bottom:calc(var(--rail-h) + 16px);z-index:56;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:11px 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;box-shadow:0 6px 22px rgba(12,20,28,.16);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.look:hover{border-color:var(--fg);box-shadow:0 8px 26px rgba(12,20,28,.22);
  transform:translateY(-1px)}
html[data-theme="light"] .look{box-shadow:0 6px 22px rgba(16,22,28,.14)}
.look svg{width:15px;height:15px;flex:none}
.look .look-moon{display:none}
html[data-theme="light"] .look .look-moon{display:block}
html[data-theme="light"] .look .look-sun{display:none}
/* Back to top stacks ABOVE the switch so the two never overlap.
   🔴 `html .totop` on purpose. The base .totop rule is defined LATER in this
   sheet, so a plain `.totop` here loses on source order and the buttons sit on
   top of each other. Measured, not guessed: both were at right 20 with 8px
   between their boxes. Same trap as the checkbox rule further up. Do not
   "simplify" the html prefix away. */
html .totop{bottom:calc(var(--rail-h) + 74px)}
@media(max-width:700px){
  .look{right:14px;bottom:calc(var(--rail-h) + 12px);padding:11px 14px;letter-spacing:.1em}
  html .totop{bottom:calc(var(--rail-h) + 68px);right:14px}
}
@media(prefers-reduced-motion:reduce){.look,.look:hover{transition:none;transform:none}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--fg);background:var(--bg);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.06;margin:0 0 .45em;
  letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.5rem,6vw,5rem)}
h2{font-size:clamp(1.9rem,3.6vw,3.1rem)}
h2.huge{font-size:clamp(1.9rem,3.8vw,3.3rem)}
h3{font-size:var(--t-h3);letter-spacing:-.005em}
h4{font-size:.98rem;font-family:var(--sans);font-weight:600;margin:0 0 .4em}
p{margin:0 0 1.05em;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px;z-index:99}

/* Focus. There was not one outline declaration in the whole sheet, so every
   keyboard stop fell through to Chromium's own #005FCC. That ring is not
   invisible, it measures 3.10:1 on the navy header and clears the 3:1 bar; it
   is simply not a decision. It is not in Greg's palette, it differs between
   Chromium, Safari and Firefox, and it draws a rounded rectangle around
   controls this site declares at border-radius:1px.

   The colour follows the GROUND, not the page theme, because a t-dark page
   carries white .band sections: episode pages are theme="dark" and their whole
   body is white, so a body.t-dark rule would have painted a white ring on a
   white background. Measured: #A8501A is 5.49:1 on white and 5.09:1 on cream,
   #fff is 18.54:1 on the navy and 19.26:1 on the footer, and the navy is
   7.14:1 on the gold band where #A8501A would have been 2.11:1.

   No border-radius is set here on purpose. Declaring one would change the
   element's own corners while it is focused; leaving it off lets the outline
   follow whatever radius each control already has. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--act-ink);outline-offset:3px}
.hero :focus-visible,.band--ink :focus-visible,.band--show :focus-visible,
.band--ask :focus-visible,.pod-hero :focus-visible,.cc-hero :focus-visible,
.ep-head :focus-visible,.site-foot :focus-visible,.rail :focus-visible,
.totop:focus-visible,body.t-dark header.site :focus-visible,
body.t-dark .drawer :focus-visible{outline-color:var(--surf-h)}
.band--gold :focus-visible{outline-color:var(--ink)}

.kicker{display:flex;align-items:center;gap:9px;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--gold-ink);margin:0 0 1.1em}
.kicker--gold{color:var(--surf-accent)}
.kicker--ink{color:#3d3324}
.dot{width:7px;height:7px;border-radius:50%;background:var(--act);
  box-shadow:0 0 0 4px var(--act-halo)}
.lede{font-size:var(--t-lede);max-width:60ch;color:var(--muted)}
.lede--wide{max-width:62ch}
.note{font-size:var(--t-body);color:var(--muted)}
.more{margin-top:30px}
.link{font-weight:600;font-size:var(--t-small);letter-spacing:.04em;text-decoration:none;
  color:var(--act-ink);border-bottom:2px solid var(--act);padding-bottom:2px}
.band--ink .link,.band--show .link,.t-dark .hero .link{color:var(--surf-h)}
/* .link had no :hover rule anywhere in the sheet. On the dark bands it is
   already white, so only the rule under it has anywhere left to go. */
.link:hover{color:var(--fg);border-bottom-color:var(--fg)}
.band--ink .link:hover,.band--show .link:hover,.t-dark .hero .link:hover{
  color:var(--surf-h);border-bottom-color:var(--surf-h)}

.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  padding:14px 24px;border-radius:1px;font-size:.78rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
  border:1px solid transparent;white-space:nowrap}
.btn--act{background:var(--act);color:var(--act-fg);border-color:var(--act)}
.btn--act:hover{background:var(--act-hover);border-color:var(--act-hover)}
.btn--line{border-color:currentColor;background:transparent}
.t-dark .btn--line:hover,.band--ink .btn--line:hover,.band--show .btn--line:hover,
.rail .btn--line:hover{background:var(--surf-inv);color:var(--surf-inv-ink);border-color:var(--surf-inv)}
.btn--dark{background:#14100b;color:#fff;border-color:#14100b}
.btn--dark:hover{background:#000}
.btn--dark-line{border:1px solid #6b5b43;background:transparent;color:#2c2418;
  padding:14px 24px;font-size:.78rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;
  border-radius:1px;transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease}
.btn--dark-line:hover{background:#14100b;color:#fff;border-color:#14100b}
.btn--lg{padding:17px 30px;font-size:.82rem}
.btn--sm{padding:11px 17px;font-size:.7rem}
.btn--nav{border-color:var(--line);color:var(--fg)}
.btn--nav:hover{background:var(--fg);color:#fff;border-color:var(--fg)}
body.t-dark .btn--nav{border-color:var(--surf-hair-32);color:var(--surf-h)}
body.t-dark .btn--nav:hover{background:var(--surf-inv);color:var(--surf-inv-ink);border-color:var(--surf-inv)}
.btn--play:before{content:'';border-left:9px solid currentColor;border-top:6px solid transparent;
  border-bottom:6px solid transparent}
.cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}

/* The mark. Trace said twice that it is too small, so the rest state is 68px,
   which is what adenleadership.com itself renders and exactly double what this
   build shipped. A 68px mark is only affordable in a sticky bar if the bar
   gives it back: past 80px of scroll the header compacts to 46px and picks up
   a hairline and a soft shadow so it separates from the copy running under it.
   The rest state ships in the HTML, so first paint is the big logo. */
header.site{position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid transparent}
header.site.is-compact{border-bottom-color:var(--line);
  box-shadow:0 8px 22px rgba(12,20,28,.07)}
body.t-dark header.site{background:var(--surf);border-color:transparent}
body.t-dark header.site.is-compact{border-bottom-color:var(--surf-hair-14);
  box-shadow:0 8px 22px rgba(0,0,0,.36)}
body.t-dark .nav a{color:var(--surf-h)}
body.t-dark .brand img{filter:brightness(0) invert(var(--logo-invert))}
.brand{display:flex;align-items:center}
.brand:hover img{opacity:.82}
.brand img{height:68px;width:auto;transition:height .18s ease}
header.site.is-compact .brand img{height:46px}
body.t-dark .burger span{background:var(--surf-h)}
.bar{display:flex;align-items:center;gap:var(--s3);padding:13px 26px;
  max-width:var(--wrap);margin:0 auto;transition:padding .18s ease}
header.site.is-compact .bar{padding-top:var(--s1);padding-bottom:var(--s1)}
@media(prefers-reduced-motion:reduce){
  .brand img,.bar{transition:none}
}
.nav{display:flex;gap:20px;margin-left:auto}
.nav a{font-size:.8rem;font-weight:500;text-decoration:none;padding-bottom:3px;
  border-bottom:2px solid transparent}
/* Hover and current page were the same declaration, so you could tell
   neither that a link was live nor which page you were on. Split, and both
   halves follow the header's own ground: the bar is white on light pages and
   navy on dark ones. Measured, gold #b69d78 is 7.14:1 on the navy but 2.60:1
   on white, and gold-ink #7d6340 is the other way round at 5.63:1 and 3.29:1.
   .on is declared first so hovering the current link still shows the hover. */
.nav a.on{border-color:var(--gold-ink)}
body.t-dark .nav a.on{border-color:var(--surf-accent)}
.nav a:hover{border-color:var(--act-ink)}
body.t-dark .nav a:hover{border-color:var(--act)}
.burger{display:none;background:none;border:0;padding:11px;cursor:pointer;margin-left:auto}
.burger span{display:block;width:22px;height:2px;background:var(--fg);margin:4px 0}
.drawer{display:none;flex-direction:column;gap:15px;padding:18px 26px 26px}
.drawer.open{display:flex}
.drawer a{text-decoration:none;font-weight:500}
body.t-dark .drawer{background:var(--surf);color:var(--surf-h)}

.hero{position:relative;background:var(--surf);color:var(--surf-h);overflow:hidden;
  padding:var(--s5) 0 var(--s6)}
.hero-bg{position:absolute;inset:0;
  background:radial-gradient(900px 620px at 76% 12%,var(--surf-glow-navy-62),transparent 62%),
             radial-gradient(700px 520px at 8% 88%,var(--surf-glow-gold-20),transparent 60%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:56px;
  align-items:start}
.hero h1{color:var(--surf-h);max-width:20ch;font-size:clamp(2.5rem,4.8vw,4.3rem)}
.hero .lede{color:var(--surf-lede);font-size:1.2rem}
.hero .hero-sub{color:var(--surf-h);font-size:clamp(1.2rem,1.9vw,1.5rem);font-weight:600;
  line-height:1.35;max-width:34ch;margin:-4px 0 14px}
.hero .kicker{color:var(--surf-kicker)}
.hero-shot{position:relative;align-self:stretch;display:flex;align-items:flex-end}
.hero-shot img{width:100%;max-width:396px;margin-left:auto;filter:brightness(.98);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 72%,transparent),
    linear-gradient(90deg,transparent,#000 14%,#000 90%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 72%,transparent),
    linear-gradient(90deg,transparent,#000 14%,#000 90%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.proof{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  border-top:1px solid var(--surf-hair-14);margin-top:30px;padding:24px 0 0}
.proof--tight{grid-template-columns:repeat(3,1fr);margin-top:40px}
.pf-n{display:block;font-family:var(--serif);font-size:2.1rem;color:var(--surf-accent);line-height:1}
.pf-l{display:block;font-size:.8rem;color:var(--surf-num);margin-top:6px;max-width:24ch;
  overflow-wrap:anywhere}

.band{padding:var(--s7) 0}
/* the one deliberate exception to the scale */
.band.tight{padding:70px 0}
.band--cream{background:var(--cream)}
.band--ink{background:var(--surf);color:var(--surf-fg)}
.band--ink h2,.band--ink h3{color:var(--surf-h)}
.band--ink p{color:var(--surf-p)}
.band--ink .lede{color:var(--surf-lede)}
.band--show{background:var(--surf);color:var(--surf-fg);border-top:1px solid var(--surf-hair-08);
  background-image:radial-gradient(900px 560px at 88% 0,var(--surf-glow-gold-13),transparent 62%),
    linear-gradient(180deg,var(--surf-veil),var(--surf-veil0) 55%)}
.band--show h2{color:var(--surf-h);font-size:clamp(1.8rem,3.4vw,2.9rem)}
.band--show .lede{color:var(--surf-lede)}
.band--gold{background:var(--gold);color:#241d13}
.band--gold h2{color:#1a150d}
.band--gold .lede{color:#3d3324}
/* Home's Courageous Conversations band, white copy on a deeper gold (Patrice,
   2026-09-22). White on the standard #b69d78 measures 2.6:1 and fails WCAG AA, so
   the band itself goes darker and the same white then measures 5.9:1. Scoped to
   this one modifier: every other gold band keeps its dark copy at 7:1. */
.band--deep{background:#7a6039;color:#fff}
.band--deep h2,.band--deep .huge{color:#fff}
.band--deep .lede,.band--deep .code,.band--deep .kicker,.band--deep .kicker--ink,
.band--deep .side-n,.band--deep .side-l{color:#fff}
.band--deep .btn--dark{background:#fff;color:#1a150d;border-color:#fff}
.band--deep .btn--dark:hover{background:#f4efe6}
.band--deep .btn--dark-line{border-color:rgba(255,255,255,.62);color:#fff}
.band--deep .btn--dark-line:hover{background:rgba(255,255,255,.12);color:#fff}
.band--deep :focus-visible{outline-color:#fff}
/* A band owns its own rhythm: the first and last child inside .wrap must not
   add their own margin to the band padding. (The plan proposed display:flow-root
   on .wrap for this. Measured on the built page it changes nothing at all, and
   it silently un-grids every .wrap that is also .two / .cta-band / .statement,
   because .band > .wrap outranks .two. These two rules are what actually move
   the numbers the plan quotes.) */
.band > .wrap > :first-child,.pagehead > .wrap > :first-child{margin-top:0}
.band > .wrap > :last-child,.pagehead > .wrap > :last-child{margin-bottom:0}
.pagehead{padding:var(--s5) 0 58px;background:linear-gradient(180deg,var(--cream),#fff);
  border-bottom:1px solid var(--line)}
.pagehead h1{max-width:19ch}
.pagehead--post h1{max-width:26ch;font-size:clamp(2.2rem,3.4vw,2.9rem)}
/* One measure for the post head and the post body. 565px is 58ch of the
   17px body font, which is what .post-body's first grid column resolves
   to; ch cannot be used here because it would re-resolve against each
   child's own font and hand the serif h1 a 1318px line. */
.pagehead--post .wrap > *{max-width:565px}
.ph-in{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.ph-side{border-left:2px solid var(--gold);padding-left:26px}
.ph-side .bigq{margin:0}
.ph-side .bigq blockquote{font-size:1.35rem;line-height:1.35}
.ph-stat{display:flex;flex-direction:column;gap:22px}
.ph-stat .pf-n{color:var(--gold-ink);font-size:2.4rem;overflow-wrap:anywhere}
.pf-n--sm{font-size:1.5rem !important;font-family:var(--sans);font-weight:600;
  letter-spacing:.01em}
.ph-stat .pf-l{color:var(--muted)}

.show-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);
  flex-wrap:wrap;margin-bottom:40px}
.show-links{display:flex;gap:10px}
.feature{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s5);align-items:center;
  text-decoration:none;color:inherit;border-top:1px solid var(--surf-hair-14);
  border-bottom:1px solid var(--surf-hair-14);padding:var(--s4) 0}
.feature--wide{grid-template-columns:1.15fr .85fr}
.feature-art{position:relative;display:block;overflow:hidden;background:#000}
.feature-art img{width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform .4s ease,opacity .4s ease}
.feature:hover .feature-art img{transform:scale(1.035);opacity:.86}
.play{position:absolute;left:18px;bottom:18px;width:62px;height:62px;border-radius:50%;
  background:var(--act);box-shadow:0 10px 34px rgba(0,0,0,.45)}
.play:after{content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-left:22px solid var(--act-fg);border-top:13px solid transparent;border-bottom:13px solid transparent}
.play--sm{width:38px;height:38px;left:10px;bottom:10px}
.play--sm:after{border-left:13px solid var(--act-fg);border-top:8px solid transparent;
  border-bottom:8px solid transparent}
.feature-lab{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--surf-accent);margin-bottom:16px}
.feature-h{display:block;font-family:var(--serif);font-size:clamp(1.7rem,2.9vw,2.6rem);
  line-height:1.08;color:var(--surf-h);margin-bottom:12px}
.feature-guest{display:block;color:var(--surf-p);margin-bottom:22px}
.feature-go{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-small);font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--act)}
.feature-go:before{content:'';border-left:9px solid currentColor;border-top:6px solid transparent;
  border-bottom:6px solid transparent}
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:34px}
/* Two lines, clamped in CSS rather than cut in Python, so nothing is ever
   truncated mid word and the full title still reaches assistive tech. */
.mini span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.35}
.mini{text-decoration:none;color:var(--surf-lede);font-size:.78rem}
.mini img{aspect-ratio:16/9;object-fit:cover;margin-bottom:9px;opacity:.72;
  transition:opacity .2s ease}
.mini:hover img{opacity:1}
.mini--all{display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--surf-hair-24);color:var(--surf-accent);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;font-size:.7rem;min-height:96px;padding:14px}

.eprows{border-top:1px solid var(--line);margin-top:30px}
.eprow{display:grid;grid-template-columns:170px minmax(0,1fr) 78px;gap:24px;
  align-items:center;padding:18px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:background-color .15s ease,box-shadow .15s ease}
.eprow:hover{background:var(--cream);box-shadow:inset 3px 0 0 var(--act)}
.eprow-n{font-family:var(--serif);font-size:var(--t-h3);color:var(--gold-ink)}
.eprow-art{position:relative;display:block;overflow:hidden;background:#000}
.eprow-art img{aspect-ratio:16/9;object-fit:cover;width:100%}
.eprow-title{display:block;font-family:var(--serif);font-size:1.2rem;line-height:1.25}
.eprow-meta{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-top:5px}
.eprow-go{font-size:var(--t-small);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--act-ink);text-align:right}
.pod-hero{background:var(--surf);color:var(--surf-h);padding:var(--s5) 0 var(--s6);
  background-image:radial-gradient(900px 560px at 82% 6%,var(--surf-glow-navy-55),transparent 62%)}
.pod-in{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.pod-cover img{width:100%;border-radius:2px;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.pod-hero h1{color:var(--surf-h);font-size:clamp(2.2rem,4.4vw,3.9rem);max-width:none}
.pod-hero .lede{color:var(--surf-lede)}
.listen-on{margin-top:18px;font-size:var(--t-body);color:var(--surf-num)}
.listen-on a{color:var(--surf-h);border-bottom:1px solid var(--gold);text-decoration:none}

.offer:first-child{border-top:1px solid var(--line)}
.offer{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:34px;align-items:start;
  padding:30px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:background-color .16s ease,box-shadow .16s ease}
.offer:hover{background:var(--cream);box-shadow:inset 3px 0 0 var(--act)}
.offer-n{font-family:var(--serif);font-size:2.1rem;color:var(--gold-ink);align-self:start;
  line-height:1.05}
.offer-u{display:block;font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.offer-n--word{font-size:1.5rem}
.offer-h{display:block;font-family:var(--serif);font-size:1.6rem;line-height:1.15;margin-bottom:6px}
.offer-p{display:block;color:var(--muted);font-size:var(--t-body);max-width:56ch}
.offer-go{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:var(--t-small);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--act-ink);justify-self:end}
.offer-go:after{content:'';width:26px;height:1px;background:currentColor;
  transition:width .16s ease}
.offer:hover .offer-go:after{width:40px}

.svc-list{display:flex;flex-direction:column;margin-top:34px;border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,22ch);gap:var(--s4);
  padding:40px 0;border-bottom:1px solid var(--line);align-items:start}
.svc-aside{border-left:2px solid var(--gold);padding-left:20px;font-size:var(--t-body);
  color:var(--muted)}
.svc-n{font-family:var(--serif);font-size:2.6rem;color:var(--gold-ink);line-height:1}
.ticks{list-style:none;padding:0;margin:0 0 24px}
.ticks li{position:relative;padding-left:26px;margin-bottom:9px;font-size:.98rem}
.ticks li:before{content:'';position:absolute;left:0;top:.6em;width:13px;height:2px;
  background:var(--act)}
.probs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.prob{background:transparent;border-top:2px solid var(--surf-hair-22);padding:22px 0 0}
.probs--light .prob{border-top-color:var(--act)}
.prob h3{font-size:1.18rem}
.prob p{font-size:var(--t-body);color:var(--muted)}
.band--ink .prob p{color:var(--surf-p)}

.bigq{margin:0 0 var(--s5);max-width:60ch}
.bigq blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.5rem,2.7vw,2.3rem);
  line-height:1.28}
.bigq figcaption{margin-top:22px;display:flex;flex-direction:column}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.qgrid--2{grid-template-columns:1fr 1fr}
.quote{margin:0;padding:28px 26px;display:flex;flex-direction:column;gap:15px;
  background:#fff;border:1px solid var(--line);border-radius:2px}
.band--ink .quote{border-color:var(--surf-hair-14)}
.quote blockquote{flex:1 1 auto}
.q-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px}
.band--cream .quote{background:#fff}
.band--ink .quote{background:var(--surf)}
.quote blockquote{margin:0;font-size:var(--t-body);line-height:1.6}
.quote figcaption{display:flex;flex-direction:column}
.q-name{font-weight:600;font-size:var(--t-body)}
.q-role{font-size:.81rem;color:var(--muted)}
.band--ink .q-role{color:var(--surf-role)}
.tlogo{height:38px;width:130px;object-fit:contain;object-position:left center;
  filter:grayscale(1);opacity:.8;mix-blend-mode:multiply}
.band--ink .tlogo,.band--show .tlogo{display:none}
.qcol{display:flex;flex-direction:column;gap:18px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.two--mid{align-items:start}
.statement{text-align:center;display:flex;flex-direction:column;align-items:center}
/* two wraps in one band: the logo wall reads as its own beat without a
   second 90px band boundary under it */
.wrap + .wrap.statement{margin-top:70px}
.statement .kicker{justify-content:center}
.statement .lede{margin-bottom:var(--s5)}
.wall{display:flex;flex-wrap:wrap;gap:44px;align-items:center;justify-content:center}
.wlogo{height:34px;width:auto;max-width:170px;object-fit:contain;filter:grayscale(1);
  opacity:.72;mix-blend-mode:multiply;transition:opacity .2s ease}
/* 203px wide source: painted any wider than 100 and it is an upscale */
.wlogo[src*="Minnehaha-County-Department"]{width:100px}
.tlogo[src*="Minnehaha-County-Department"]{width:100px}
.wlogo:hover{opacity:1}

.pull img{margin-bottom:24px;max-width:min(483px,100%)}
.pull img:last-child{margin-bottom:0}
/* Greg, 2026-08-17: "consider making the quote from me and picture of me a bit smaller" */
.pull--small img{max-width:min(320px,100%)}
.pull--small blockquote.big{font-size:1.18rem}
.why-line{font-family:var(--serif);font-size:1.42rem;line-height:1.35;margin:0 0 var(--s5);max-width:44ch}
.pull blockquote.big{font-family:var(--serif);font-size:1.42rem;line-height:1.35;
  border-left:3px solid var(--act);padding-left:22px;margin:0 0 .5em}
.attrib{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.split{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--s5);align-items:center}
.split-side{border-left:2px solid rgba(26,21,13,.28);padding-left:28px}
.split-side{text-align:left}
.side-n{font-family:var(--serif);font-size:clamp(3rem,5.6vw,4.8rem);line-height:1;
  margin:0 0 .18em}
.side-l{font-size:.92rem;color:#3d3324;max-width:22ch;line-height:1.45;margin:0}
.code{font-size:1rem;font-weight:600;color:#3a3024}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:var(--s4) 0 var(--s4)}
.step{background:transparent;border:1px solid var(--surf-hair-16);padding:28px 24px;
  border-radius:2px}
.step-n{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--surf-accent);
  font-weight:600;display:block;margin-bottom:12px}
.inc{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:34px 0}
.inc p{font-size:var(--t-body);margin:0}
.shifts{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:var(--s4) 0 var(--s4)}
.shift{border-top:2px solid var(--gold);padding-top:18px}
.shift .from{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--surf-faint);margin:0}
.shift .to{font-family:var(--serif);font-size:1.6rem;color:var(--surf-h);margin:.08em 0 .5em}
.shift p:last-child{font-size:var(--t-body);margin:0}
.takes{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;margin-top:34px;align-items:start}
.mid-cta{display:flex;justify-content:center;margin-top:10px}
.take{border-left:3px solid var(--act);padding-left:22px}
.take p{font-size:var(--t-body);color:var(--muted);margin:0}
.cc-hero{background:var(--surf);color:var(--surf-h);padding:var(--s5) 0 var(--s6);
  background-image:radial-gradient(900px 560px at 20% 0,rgba(242,149,81,.20),transparent 60%),
                   radial-gradient(800px 520px at 90% 40%,var(--surf-glow-navy-60),transparent 62%)}
.cc-hero h1{color:var(--surf-h);max-width:15ch}
.cc-hero .lede{color:var(--surf-lede)}
.cc-when{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin:34px 0 14px}

/* ── registration form, /courageous-conversations-webinars/ ────────────────
   The one page on the site whose job is a submitted form, so it is deliberately
   quieter than the sell page that feeds it: no rail, no second CTA, nothing that
   competes with the button. Fields are 16px minimum, which is what stops iOS
   Safari zooming the viewport on focus and throwing the layout on a phone. */
.cc-hero--reg{padding-bottom:38px}
.wrap--narrow{max-width:660px}
.reg-when{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:26px 0 4px}
.reg-when .cc-n{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2rem);color:var(--surf-h)}
.reg-when .cc-l{color:var(--surf-p)}
.reg-seats{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--act);border:1px solid currentColor;border-radius:999px;padding:4px 12px}
.reg-wrap{padding:52px 0 78px}
.reg-form{display:flex;flex-direction:column;gap:18px}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld>span{font-size:.82rem;letter-spacing:.06em;font-weight:600;color:var(--ink)}
.fld>span em{font-style:normal;font-weight:400;color:#7c8894;letter-spacing:0}
.fld input,.fld select{font:inherit;font-size:16px;padding:13px 14px;border:1px solid #cdd5dd;
  border-radius:8px;background:#fff;color:var(--ink);width:100%}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--act);
  box-shadow:0 0 0 3px var(--act-focus)}
.reg-form .btn{align-self:flex-start;margin-top:6px}
.reg-form .btn:disabled{opacity:.55;cursor:default}
.reg-fine{font-size:.86rem;color:#7c8894;margin:0}
.reg-price{margin:0;font-size:1.02rem;color:var(--ink)}
.reg-price s{color:#7c8894;margin-right:6px}
.reg-price strong{color:var(--act)}
.reg-err{margin:0;padding:12px 14px;border-radius:8px;background:#fdecec;color:#8d2020;
  border:1px solid #f2c4c4;font-size:.92rem}
.reg-note{padding:16px 18px;border-radius:10px;background:#f4f6f8;border:1px solid #dfe5eb;
  margin-bottom:26px}
.reg-note p{margin:0}
.reg-done{padding:30px 26px;border-radius:12px;background:#f4f6f8;border:1px solid #dfe5eb}
.reg-done h2{margin:0 0 10px}
.reg-done p{margin:0 0 10px}
.reg-done p:last-child{margin-bottom:0}
@media(max-width:620px){.fld-row{grid-template-columns:1fr}}
.cc-n{display:block;font-family:var(--serif);font-size:2rem}
.cc-l{display:block;font-size:var(--t-body);color:var(--surf-num)}
.cc-hero .code{color:var(--surf-num)}
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:34px}
.art{display:flex;flex-direction:column;gap:14px}
.art-body{display:flex;flex-direction:column;flex:1 1 auto}
.art-body p{flex:1 1 auto}
.art-img{display:block}
.art-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.art h3{font-size:1.16rem;margin-bottom:.35em}
.art h3 a{text-decoration:none}
.art h3 a:hover{border-bottom:1px solid currentColor}
/* the card image was the sixth control with no feedback at all, and this is
   the same device .mini img already uses one screen up */
.art-img:hover img{opacity:.88}
.art .link{align-self:flex-start;padding:8px 0;margin-top:auto}
.art p{font-size:var(--t-body);color:var(--muted)}
.art-meta{font-size:var(--t-micro) !important;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:600;margin-bottom:.5em}
.endcap{align-self:start;border-left:3px solid var(--gold);padding-left:30px}
.endcap-h{font-size:1.5rem}
.band--ask{background:var(--surf);color:var(--surf-h);text-align:center}
.ask{display:flex;flex-direction:column;align-items:center}
.ask .kicker{justify-content:center}
.ask h2{color:var(--surf-h);max-width:16ch}
.ask .lede{color:var(--surf-lede);margin-bottom:30px}
.cta-band{display:flex;gap:var(--s5);align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{margin-bottom:.25em}
/* only /webinar/ carries a .huge here. At plain .cta-band h2 a 22ch cap
   rewraps /group-coaching/'s 811px single line heading. */
.cta-band h2.huge{max-width:22ch}
.cta-band .lede{margin:0;max-width:52ch}

.rail{position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--rail-bg);
  backdrop-filter:blur(10px);color:var(--surf-h);border-top:1px solid var(--surf-hair-18);
  box-shadow:0 -16px 44px rgba(0,0,0,.45);
  transform:translateY(102%);transition:transform .28s ease;will-change:transform}
.rail[hidden]{display:block}
.rail.rail--on{transform:translateY(0)}
.rail-short{display:none}
.rail-in{display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:12px 26px;flex-wrap:wrap;max-width:var(--wrap);margin:0 auto}
.rail-txt{margin:0;font-size:var(--t-body)}
.rail-txt strong{color:var(--surf-accent)}
.rail-txt span{color:var(--surf-num)}
.rail-txt strong{margin-right:6px}
.rail-cta{display:flex;gap:10px}
.rail .btn{padding:12px 18px}
/* Anchors clear the bar. scroll-padding is derived from the COMPACT header,
   because by the time you land on an anchor anywhere down the page that is the
   bar covering it. #main is the exception: it sits at the top of the document,
   where the header is still at its 95px rest height, so the skip link adds the
   difference back and lands the reader at scroll zero rather than 24px under a
   header that has not compacted yet. */
html{scroll-padding-top:calc(var(--head-h) + var(--s1));scroll-padding-bottom:var(--rail-h)}
#main{scroll-margin-top:var(--head-h)}

.site-foot{background:var(--surf-deep);color:var(--surf-foot-fg);padding:56px 0 26px;font-size:var(--t-body);
  border-top:1px solid var(--surf-hair-10)}
.foot-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr 1.15fr;gap:var(--s5)}
.site-foot h4{color:var(--surf-h);margin-bottom:14px}
.site-foot a{color:var(--surf-foot-fg);text-decoration:none}
.site-foot a.btn--act{color:var(--act-fg)}
.site-foot a:hover{color:var(--surf-h)}
.foot-brand img{width:132px;filter:brightness(0) invert(var(--logo-invert));opacity:.9}
.fnav{display:flex;flex-direction:column;gap:9px}
.tag{font-family:var(--serif);font-style:italic;color:var(--surf-accent);margin:14px 0 8px}
.fsmall{font-size:var(--t-body);margin-bottom:18px}
.foot-nav-dupe{display:block}
.foot-legal{display:flex;justify-content:space-between;border-top:1px solid #16232e;
  margin-top:var(--s4);padding-top:20px;font-size:var(--t-micro);color:#8b9aa6}

/* Between 1041 and 1220 the 1220px wrap fills the viewport and the gutter
   collapses to 26px, the phone value, on every 1152, 1180 and 1200 laptop.
   Hold it at 48px there. Below 1041 the mobile layout owns the gutter.
   It sits here, not up beside .wrap, because .bar and .rail-in declare the
   padding SHORTHAND further down the sheet and would overwrite it. */
@media(min-width:1121px) and (max-width:1220px){
  .wrap,.bar,.rail-in{padding-left:48px;padding-right:48px}
}
/* This is a NAVIGATION breakpoint only. The bar swaps to a burger, the mark
   steps down, the multi column grids halve. Everything that collapses a layout
   to ONE column waits for 860, because a 900px tablet has room for two columns
   and parked the home hero portrait in a column of empty navy.

   🔴 Moved 1040 -> 1120 on 2026-09-10 when the sans became his Montserrat,
   which sets wider than the Archivo it replaced. Measured, not eyeballed: the
   brand (114) plus the six nav labels (666) plus the Book button (163) plus two
   24px bar gaps need 991px. With the 48px side padding that band used to apply,
   a 1041px viewport gives the bar 945px, so the nav wrapped to two rows through
   the whole 1041 to 1119 range. 1120 leaves 33px of real slack.
   The other lever, not pulled here because it is an IA decision and not mine:
   "Courageous Conversations" is 173px of that 666 on its own, and his live site
   calls the same menu item "Webinars". */
@media(max-width:1120px){
  /* the burger stops setting the compact bar height once the mark is 40px,
     so the compact bar is 40 + 8 + 8 + the hairline */
  :root{--head-h:57px}
  .nav,.bar .btn{display:none}
  .burger{display:block}
  .brand img{height:52px}
  header.site.is-compact .brand img{height:40px}
  header.site.is-compact .burger{padding:8px}
  /* the drawer is the only navigation from here down, so its tap targets are
     sized here rather than at 640. :not(.btn) is required: .drawer a at 0,0,2,0
     beats .btn at 0,0,1,0 and would strip the CTA's own padding. */
  .drawer{gap:0}
  .drawer a:not(.btn){display:block;padding:11px 0}
  .proof{grid-template-columns:1fr 1fr}
  .proof--tight{grid-template-columns:repeat(3,1fr);gap:14px}
  .strip{grid-template-columns:repeat(3,1fr)}
  .probs,.shifts,.steps,.inc,.qgrid,.arts,.takes,.foot-grid{grid-template-columns:1fr 1fr}
  .eprow{grid-template-columns:140px 1fr 70px}
}
/* the tablet numeral. On a phone proof--tight inherits the 2.1rem of the home
   page's own stat row; between 641 and 1040 three stats across need the step. */
@media(min-width:641px) and (max-width:1040px){
  .proof--tight .pf-n{font-size:1.6rem}
}
@media(max-width:860px){
  .hero-in,.two,.split,.ph-in{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .hero-shot{max-width:340px}
  .side-l{margin-left:0}
  .feature,.feature--wide{grid-template-columns:1fr;gap:26px}
  .pod-in{grid-template-columns:1fr;gap:34px}
  .pod-cover{max-width:330px}
}
@media(max-width:640px){
  body{font-size:16px}
  main > section:last-of-type{padding-bottom:60px}
  .band{padding:60px 0}
  /* .band.tight was INVERTED on a phone: ordinary bands stepped 90 to 60 and
     tight never did, so the tight band measured 70 against its neighbour's 60. */
  .band.tight{padding:44px 0}
  /* Every page opening section steps down together. Pass 3 put all five tops on
     one 48px clearance, so the mobile step is derived from 48, not from the 64
     the audit measured: 32px top is --s4 and holds the same 0.62 the bands use.
     The audit's own figures (pagehead 40, cc-hero 52) were steps down from the
     pre Pass 3 values and would now leave the phone with MORE clearance than
     the desktop. Bottoms scale: 58 to 40, 64 to 44, 52 to 36. */
  .hero{padding:var(--s4) 0 44px}
  .pagehead{padding:var(--s4) 0 40px}
  .cc-hero{padding:var(--s4) 0 44px}
  .pod-hero{padding:var(--s4) 0 44px}
  .probs,.shifts,.steps,.inc,.qgrid,.qgrid--2,.arts,
  .takes,.foot-grid,.svc{grid-template-columns:1fr}
  /* one column turned a four stat bar into 433px of scroll. Two across reads as
     a bar, and .pf-l still fits in two lines. */
  .proof{grid-template-columns:1fr 1fr;gap:18px}
  .strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .strip::-webkit-scrollbar{display:none}
  .strip > *{flex:0 0 62%;scroll-snap-align:start}
  .mini--all{min-height:0;padding:22px 14px}
  .offer{grid-template-columns:1fr;gap:10px}
  /* nowrap made .offer-go's own min-content the floor of the 1fr track, which
     is the last sideways scroll at 320. It has a line of its own here. */
  .offer-go{text-align:left;white-space:normal}
  .svc{gap:12px}
  /* align-items:center from the desktop rule floats a 104x59 thumbnail with
     29px of dead space above and below a three line title. */
  .eprow{grid-template-columns:104px 1fr;gap:14px;align-items:start}
  .play--sm{width:30px;height:30px;left:7px;bottom:7px}
  .play--sm:after{border-left:10px solid var(--act-fg);border-top:6px solid transparent;border-bottom:6px solid transparent}
  .eprow-go{display:none}
  .cta-band{flex-direction:column;align-items:flex-start}
  .site-foot{padding:var(--s5) 0 22px}
  .foot-grid{gap:30px}
  .rail-in{padding:9px 18px;gap:12px;flex-wrap:nowrap}
  .rail-txt{font-size:.78rem;line-height:1.3}
  .rail-long{display:none}
  .rail-short{display:inline;color:var(--surf-num)}
  .rail-second{display:none}
  .rail-cta{flex:0 0 auto}
  /* the strong and the date measure 211px in a 192px text block, so the date
     wrapped every time. Make the two line stack deliberate. */
  .rail-txt strong{display:block;margin-right:0}
  .rail .btn{padding:14px 18px}
  /* the rail measures 64 once its CTA clears the 44px tap target */
  :root{--rail-h:64px}
  .endcap{padding-left:20px}
  .btn{white-space:normal;text-align:center;line-height:1.35;justify-content:center}
  .btn--sm{padding:14px 16px}
  /* flex-wrap put the pair on two lines at unequal widths, 295 against 289, and
     equal height went with it. Stack them and let both fill the column. */
  .cta-row{flex-direction:column;align-items:stretch}
  .fnav{gap:2px}
  .fnav a{padding:11px 0;display:block}
  .wall{gap:22px}
  .wlogo{height:40px;width:108px}
  /* 320 is still a live phone width and it is where the last two sideways
     scrolls in the build sat: one 16 character post title and the longest offer
     heading each overrun the 268px column as an unbreakable min-content box.
     anywhere rather than break-word, because .offer is a grid whose 1fr track
     takes its minimum from min-content, which break-word does not move. */
  h1,.offer-n,.offer-h,.offer-p{overflow-wrap:anywhere}
  /* Tap targets. .link, .crumb and .listen-on a each carry a decorative bottom
     border, so padding cannot buy the height: a flat 12px 0 drops that underline
     12px clear of the words, and buying it all above the line inserts 21px of
     dead space over a text link. They get the hit area instead, exactly 44px,
     centred on the words, and worth zero pixels of layout. */
  .link,.crumb,.listen-on a{position:relative;display:inline-block}
  .link:after,.crumb:after,.listen-on a:after{content:'';position:absolute;
    left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
}
/* ---------------------------------------------------- episode + post pages */
.ep-head{background:var(--surf);color:var(--surf-h);padding:var(--s5) 0 52px;overflow:hidden;
  background-image:radial-gradient(900px 520px at 78% 0,var(--surf-glow-navy-55),transparent 62%)}
.ep-head h1{color:var(--surf-h);font-size:clamp(1.9rem,3.2vw,2.8rem);max-width:20ch}
.ep-head-in{display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:center}
.ep-art-big img{width:100%;border-radius:2px;box-shadow:0 26px 60px rgba(0,0,0,.45)}
.ep-art-big--sq{max-width:330px;margin-left:auto}
.ep-head .kicker{gap:18px;flex-wrap:wrap}
.crumb{color:var(--surf-accent);text-decoration:none;border-bottom:1px solid rgba(182,157,120,.5)}
.crumb:hover{border-color:var(--surf-accent)}
.ep-meta{font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--surf-num);
  margin:0 0 26px}
.pagehead--post .ep-meta{color:var(--muted)}
.pagehead--post .kicker a{color:var(--gold-ink);text-decoration:none}
.player{margin-top:8px}
.player audio{width:100%;max-width:560px;height:46px;display:block;
  border-radius:40px;background:rgba(255,255,255,.9)}
.player-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;align-items:center}
.player-note{font-size:var(--t-body);color:var(--surf-num)}
.player-note a{color:var(--surf-h);border-bottom:1px solid var(--gold);text-decoration:none}
.ep-body,.post-body{display:grid;grid-template-columns:minmax(0,58ch) 320px;gap:56px;
  align-items:start;justify-content:start}
.prose{max-width:58ch;font-size:var(--t-lede);min-width:0;overflow-wrap:anywhere}
.prose img,.prose table{max-width:100%}
.prose h2{font-size:clamp(1.32rem,3.4vw,1.7rem);margin:1.6em 0 .5em}
.prose h3{font-size:clamp(1.1rem,2.4vw,1.28rem);margin:1.5em 0 .45em}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.2em}
.prose li{margin-bottom:.5em}
.prose a{color:var(--act-ink);text-decoration:none;border-bottom:1px solid var(--gold)}
.prose a:hover{border-color:var(--act)}
.prose img{margin:1.6em 0;border-radius:2px}
.prose h2:first-of-type{margin-top:0}
.prose h3{border-top:1px solid var(--line);padding-top:1.1em}
.prose h2 + h3{border-top:0;padding-top:0}
.prose blockquote{margin:1.6em 0;padding-left:22px;border-left:3px solid var(--gold);
  font-family:var(--serif);font-size:1.24rem;line-height:1.4}
.prose--legal{max-width:62ch;font-size:.98rem}
.prose--legal h2{font-size:1.3rem}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:var(--t-body)}
/* A four column table cannot be both 338px wide and legible. clean_body wraps
   every table in .tscroll, so the table keeps a readable minimum and the box
   scrolls instead of the page. overflow-wrap:anywhere is reset inside it:
   inherited from .prose it would let every cell break mid word and shrink the
   table back down to the column, which is the thing the box exists to stop. */
.tscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.tscroll table{margin:1.6em 0}
.tscroll td,.tscroll th{overflow-wrap:normal;word-break:normal;min-width:120px}
.prose td,.prose th{border:1px solid var(--line);padding:10px 12px;text-align:left}
.post-hero img{width:100%;margin:0 0 2em}
/* a <picture> is inline by default, which would leave a text baseline gap
   under an image that is otherwise a block */
.art-img picture,.post-hero picture,.prose picture{display:block}
.ep-aside{position:sticky;top:96px;background:var(--cream);border:1px solid var(--line);
  padding:28px 26px;border-radius:2px}
.ep-aside h3{font-size:1.2rem}
.ep-aside p{font-size:var(--t-body);color:var(--muted)}
.aside-alt{margin:var(--s2) 0 0;font-size:var(--t-body)}
.post-listen{border-bottom:1px solid var(--line);margin-bottom:26px;padding-bottom:24px}
.post-listen .player audio{height:40px}
.post-listen .player-links{display:none}
.epnav--one{grid-template-columns:1fr}
.epnav{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:56px;
  border-top:1px solid var(--line);padding-top:26px}
.epnav-a{text-decoration:none;font-family:var(--serif);font-size:1.1rem;line-height:1.25;
  display:block}
.epnav-a span{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin-bottom:8px}
.epnav-a:hover{color:var(--act-ink)}
.epnav-a--next{text-align:right}
/* stop the Keep reading row at the aside's right edge. The plan said 999px
   "ends at 1135 with the aside"; measured, the aside ends at 1077 and 999
   overshoots it by 58. 941 = the 565 body column + the 56 gap + the 320 aside. */
.rels{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px;
  max-width:941px}
.rel{text-decoration:none;border-top:2px solid var(--gold);padding-top:16px;display:block}
.rel-d{display:block;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.rel-t{display:block;font-family:var(--serif);font-size:1.14rem;line-height:1.25}
.arcs{display:flex;flex-direction:column;gap:var(--s5)}
.yr-jump{display:flex;gap:10px;flex-wrap:wrap}
.yr-jump a{text-decoration:none;font-size:.76rem;font-weight:600;letter-spacing:.1em;
  border:1px solid var(--line);padding:9px 15px;border-radius:2px;color:var(--fg)}
.yr-jump a:hover{background:var(--fg);color:#fff;border-color:var(--fg)}
.arc-year{scroll-margin-top:calc(var(--head-h) + 72px)}
.arc-year h2{font-size:1.5rem;border-bottom:1px solid var(--line);padding-bottom:10px;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.yr-n{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.arc{list-style:none;padding:0;margin:0}
.arc li{border-bottom:1px solid var(--line)}
.arc a{display:flex;justify-content:space-between;gap:24px;padding:13px 0;
  text-decoration:none;align-items:baseline}
.arc a:hover{background:var(--cream);box-shadow:inset 3px 0 0 var(--act)}
.arc-t{font-family:var(--serif);font-size:1.08rem;line-height:1.3}
.arc-m{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap}

/* ---- filtering an archive that is already on the page --------------------
   Every row ships visible. The bar is hidden until the script un-hides it, so
   a reader with no JavaScript gets the whole list and no dead controls. */
.filt{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 20px;
  padding:20px 22px;background:var(--cream);border:1px solid var(--line);
  border-radius:2px}
/* the bar ships hidden and the script un-hides it. An author display value
   outranks the UA sheet's [hidden] rule, so without this the bar renders as
   dead furniture for anyone whose script did not run. */
.filt[hidden]{display:none}
.filt-f{display:flex;flex-direction:column;gap:6px;min-width:150px}
.filt-f--q{flex:1 1 300px}
.filt-l{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.filt-i,.filt-s{font-family:var(--sans);font-size:var(--t-body);color:var(--fg);
  background:#fff;border:1px solid var(--line);border-radius:2px;
  padding:11px 13px;width:100%;-webkit-appearance:none;appearance:none}
.filt-s{padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23615b56'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
  background-size:10px 6px}
.filt-i:focus,.filt-s:focus{outline:2px solid var(--act);outline-offset:1px;
  border-color:var(--act)}
.filt-i::-webkit-search-cancel-button{cursor:pointer}
.filt-n{flex:1 1 100%;margin:0;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.filt-none{margin:26px 0 0;font-family:var(--serif);font-size:var(--t-lede)}
.link--btn{font-family:var(--sans);font-size:var(--t-small);font-weight:600;
  letter-spacing:.06em;background:none;border:0;border-bottom:1px solid var(--act);
  color:var(--act-ink);padding:0 0 2px;cursor:pointer}
.link--btn:hover{color:var(--fg);border-bottom-color:var(--fg)}

/* the year nav rides down the page with you, which is the whole reason it is
   worth having on a list this long */
.yr-bar{position:sticky;top:var(--head-h);z-index:40;background:var(--bg);
  border-bottom:1px solid var(--line);padding:12px 0}
.yr-jump a.yr-off{opacity:.32;pointer-events:none}

.totop{position:fixed;right:20px;bottom:calc(var(--rail-h) + 16px);z-index:45;
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--surf-h);background:var(--surf);border:0;
  border-radius:2px;padding:12px 16px;cursor:pointer;opacity:0;
  /* a button's UA line-height is normal, not the body's 1.6, so padding alone
     landed it at 36px. 44 is the tap target. */
  min-height:44px;display:inline-flex;align-items:center;
  transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
.totop.on{opacity:1;transform:none}
.totop:hover{background:var(--act);color:var(--ink)}

.topics{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.topics a{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;
  font-size:.82rem;font-weight:600;letter-spacing:.04em;background:#fff;
  border:1px solid var(--line);border-radius:2px;padding:10px 15px;color:var(--fg)}
.topics a:hover{border-color:var(--fg)}
.topics-n{font-size:.7rem;letter-spacing:.1em;color:var(--muted)}
.topics a:hover .topics-n{color:var(--fg)}

.more--tight{margin:22px 0 0}
.sitesearch{max-width:620px}
.sitesearch .filt-n{margin:10px 0 0}
.sitesearch .arc{margin-top:6px}
@media(max-width:1040px){
  .yr-bar{top:70px}
  .rels{grid-template-columns:1fr 1fr}
}
/* the body column, its aside and the episode head all collapse together at the
   same width the rest of the site does */
@media(max-width:860px){
  .ep-body,.post-body,.ep-head-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .ep-art-big{max-width:300px;order:-1}
  .ep-aside{position:static}
}
@media(max-width:640px){
  /* .ep-head and .yr-jump are declared further down the sheet than the main 640
     block, so their mobile values have to sit here to win the cascade. */
  .ep-head{padding:var(--s4) 0 36px}
  /* the two breadcrumbs wrap to two lines at this width and their 44px hit
     areas overlapped by 7px, which cost the upper one 8px of its target */
  .ep-head .kicker{row-gap:26px}
  .yr-jump a{padding:12px 16px}
  .epnav,.rels{grid-template-columns:1fr}
  .epnav-a--next{text-align:left}
  .arc a{flex-direction:column;gap:4px}
  /* a sticky bar plus a sticky header is most of a phone screen, and the year
     chips wrap to two rows at this width */
  .yr-bar{position:static;padding:0 0 18px;border-bottom:0}
  .arc-year{scroll-margin-top:calc(var(--head-h) + 12px)}
  .filt{padding:18px;gap:16px}
  .filt-f{min-width:0;flex:1 1 100%}
  /* 11px of padding leaves the input at 40px and the select at 42. 44 is the
     target, and this is the width where it matters. */
  .filt-i,.filt-s{padding-top:13px;padding-bottom:13px}
  .totop{right:14px;bottom:calc(var(--rail-h) + 12px);padding:14px 16px}
}