/* =============================================================================
   Dr. Jonny Bowden — site.css
   Register: medical-journal editorial. Serif for body text as well as headings,
   which is what makes a page read as an article rather than a landing page.
   Colour does the least possible work; hairline rules and space do the rest.
   Motion stays, quietly: nothing scales, nothing flashes, nothing strikes through.
   ============================================================================= */

/* --- fonts, self-hosted. No CDN. ---------------------------------------- */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/sourceserif4-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:300 700;font-display:swap;
  src:url(fonts/sourceserif4-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* --- tokens -------------------------------------------------------------- */
:root{
  --paper:#fbfaf7;
  --paper-2:#f4f1ea;
  --ink:#14171a;          /* 17.2:1 on paper */
  --ink-soft:#545a62;     /* 6.7:1  on paper */
  --navy:#1f3a5f;         /* 11.0:1 on paper — the only accent */
  --navy-lift:#2e5484;
  --on-navy:#fbfaf7;
  --on-navy-soft:#b9c6da; /* 6.7:1  on navy */
  --on-navy-accent:#9dbce6;
  --rule:#ded9d0;
  --rule-strong:#c9c3b8;
  --rule-dark:rgba(251,250,247,.24);

  /* Surfaces derived from the ground, kept as tokens so a theme can move them.
     --band is the contrast slab (.band-ink and the footer); on a light theme it
     is the accent colour, on a dark theme it is a LIFTED surface, which is why
     it is not simply var(--navy). */
  --band:#1f3a5f;
  --head-bg:rgba(251,250,247,.95);
  --ink-lift:rgba(251,250,247,.07);
  --field-bg:rgba(251,250,247,.06);
  --field-bg-2:rgba(251,250,247,.1);
  --on-navy-faint:rgba(251,250,247,.55);
  --logo-bg:#fff;
  --tap:rgba(31,58,95,.12);
  /* Text that sits ON the accent colour. Separate from --on-navy (text on the
     slab) because a dark theme has a LIGHT accent and a DARK slab — one token
     cannot serve both. */
  --on-accent:#fbfaf7;

  /* Shape and type, the parts a theme family changes. */
  --radius:2px;
  --radius-lg:2px;
  --font-b:'Source Serif 4',Charter,Georgia,'Times New Roman',serif;
  --font-h:'Source Serif 4',Charter,Georgia,'Times New Roman',serif;
  --h-weight:400;
  --h-track:-.016em;
  --h1-track:-.022em;
  --body-lh:1.68;
  --body-size:clamp(1.06rem,1.02rem + .22vw,1.19rem);
  --kicker-track:.15em;
  --kicker-rule:1px;

  --serif:'Source Serif 4',Charter,Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --pad:clamp(1.25rem,4vw,3rem);
  --maxw:1180px;
  --measure:68ch;
  --sec-lg:clamp(4.5rem,9vw,7.5rem);
  --sec-sm:clamp(2.5rem,5vw,4rem);
  --nav-h:70px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
/* No grey flash box on tap, and no double-tap-to-zoom delay on controls. */
a,button,summary,[role="button"]{-webkit-tap-highlight-color:var(--tap);touch-action:manipulation;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-b);font-size:var(--body-size);
  line-height:var(--body-lh);font-weight:400;font-variant-numeric:oldstyle-nums;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
figure,blockquote{margin:0;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:1px;}
.band-ink :focus-visible,.site-foot :focus-visible{outline-color:var(--on-navy-accent);}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--navy);color:var(--on-accent);padding:.7rem 1.1rem;}

/* --- layout -------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
.wrap-narrow{max-width:var(--measure);margin-inline:auto;padding-inline:var(--pad);}
section{padding-block:var(--sec-lg);}
section.tight{padding-block:var(--sec-sm);}
/* Sections separate with a hairline, the way a journal separates departments —
   not with alternating slabs of colour. */
main > section + section{border-top:1px solid var(--rule);}
main > section.band-ink + section,main > section + section.band-ink,
main > section.band-paper2 + section,main > section + section.band-paper2{border-top:0;}
.band-ink{background:var(--band);color:var(--on-navy);}
.band-ink a{color:var(--on-navy);}
.band-paper2{background:var(--paper-2);}
.hr{height:1px;background:var(--rule);border:0;margin:0;}

/* --- type ---------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-h);font-weight:var(--h-weight);letter-spacing:var(--h-track);margin:0 0 .55em;
  text-wrap:balance;}
h1{font-size:clamp(2.5rem,5.6vw,4.3rem);line-height:1.06;letter-spacing:var(--h1-track);max-width:17ch;}
h2{font-size:clamp(1.85rem,3.2vw,2.7rem);line-height:1.14;max-width:28ch;}
h3{font-size:clamp(1.24rem,1.7vw,1.5rem);line-height:1.25;max-width:34ch;}
h4{font-size:1.1rem;line-height:1.3;}
p{margin:0 0 1.15em;max-width:var(--measure);}
.lede{font-size:clamp(1.16rem,1.06rem + .42vw,1.4rem);line-height:1.6;color:var(--ink-soft);
  max-width:62ch;}
.band-ink .lede{color:var(--on-navy-soft);}

/* the department label: small caps sans over a hairline, journal-style */
.kicker{
  font-family:var(--sans);font-size:.69rem;font-weight:600;letter-spacing:var(--kicker-track);
  text-transform:uppercase;color:var(--navy);margin:0 0 1.4rem;padding-bottom:.7rem;
  border-bottom:var(--kicker-rule) solid var(--rule-strong);display:block;max-width:100%;
}
.band-ink .kicker{color:var(--on-navy-accent);border-bottom-color:var(--rule-dark);}
.mono{font-family:var(--sans);font-size:.82rem;line-height:1.6;letter-spacing:.005em;color:var(--ink-soft);}
.band-ink .mono{color:var(--on-navy-soft);}
em,.it{font-style:italic;}
strong{font-weight:600;}

/* --- buttons — rectangular, quiet, no lift ------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:.82rem;
  font-weight:600;letter-spacing:.02em;text-decoration:none;padding:.95rem 1.5rem;
  border:1px solid var(--navy);background:var(--navy);color:var(--on-accent);cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;min-height:48px;border-radius:var(--radius);
}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--rule-strong);}
.band-ink .btn{background:var(--on-navy);color:var(--band);border-color:var(--on-navy);}
.band-ink .btn-ghost{background:transparent;color:var(--on-navy);border-color:var(--rule-dark);}
.site-foot .btn-ghost{color:var(--on-navy);border-color:var(--rule-dark);}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem;}

/* underline-slide, kept */
.ul{position:relative;text-decoration:none;display:inline-block;}
.ul::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:currentColor;
  opacity:.55;transform:scaleX(0);transform-origin:right;transition:transform .3s ease;}

/* --- header -------------------------------------------------------------- */
#siteHeader{position:sticky;top:0;z-index:60;transition:transform .35s ease;will-change:transform;}
/* hidden sticky header: slides out of the way on scroll-down, returns on scroll-up */
#siteHeader.hdr-hidden{transform:translateY(-100%);}
.site-head{background:var(--head-bg);backdrop-filter:saturate(120%) blur(6px);
  -webkit-backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--rule);
  position:relative;transition:background-color .3s ease, border-color .3s ease,
    box-shadow .3s ease, margin .3s ease, border-radius .3s ease, color .3s ease;}
.head-in{display:flex;align-items:center;gap:1.25rem;min-height:var(--nav-h);}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);white-space:nowrap;}
.mono-mark{width:2.5rem;height:auto;aspect-ratio:83/100;flex:0 0 auto;display:block;}
.brand-text{font-family:var(--serif);font-size:1.22rem;letter-spacing:-.012em;line-height:1.1;display:block;}
.brand-sub{font-family:var(--sans);font-size:.58rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:2px;}
@media (max-width:420px){ .brand-sub{display:none;} .brand-text{font-size:1.1rem;} }
.nav{margin-left:auto;display:flex;align-items:center;gap:1.7rem;}
.nav a{font-family:var(--sans);font-size:.88rem;text-decoration:none;color:var(--ink);
  text-underline-offset:.45em;text-decoration-thickness:1.5px;transition:color .2s ease;}
.nav a[aria-current="page"]:not(.btn){color:var(--navy);text-decoration:underline;}
.nav .btn[aria-current="page"]{background:var(--navy-lift);}
.nav .btn{padding:.6rem 1.05rem;min-height:40px;color:var(--on-accent);font-size:.78rem;}
.burger{margin-left:auto;display:none;width:46px;height:46px;border:1px solid var(--rule-strong);
  background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:var(--radius);}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform .25s ease,opacity .2s ease;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
/* The phone menu is a panel, not a dropdown: it fills what is left of the
   viewport under the header, scrolls on its own if it has to, and the page
   behind it is locked (see the scroll lock in site.js). */
.mobile-nav{display:none;position:fixed;left:0;right:0;top:var(--head-h,64px);bottom:0;
  z-index:59;border-top:1px solid var(--rule);background:var(--paper);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:env(safe-area-inset-bottom);}
.mobile-nav.open{display:block;}
.mobile-nav ul{list-style:none;margin:0;padding:.25rem var(--pad) 1.25rem;}
.mobile-nav li{border-bottom:1px solid var(--rule);}
.mobile-nav a{display:block;padding:1rem 0;text-decoration:none;font-size:1.05rem;
  text-underline-offset:.35em;text-decoration-thickness:1.5px;}
.mobile-nav a[aria-current="page"]:not(.btn){color:var(--navy);text-decoration:underline;}
.mobile-nav .btn{margin-top:1.25rem;width:100%;justify-content:center;}
@media (max-width:900px){ .nav{display:none;} .burger{display:flex;} }

/* --- header states: clear at the top; modern = a floating rounded glass bar -- */
/* At the very top the bar goes clear; a scroll away it returns to its ground. */
#siteHeader.hdr-top .site-head{background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;}
/* Over a photo hero (home), a clear bar needs light type + a soft top scrim so
   the logo and nav stay readable against the picture. */
html:not([data-theme^="modern-"]) #siteHeader.hdr-photo.hdr-top .site-head{
  background:linear-gradient(to bottom, rgba(0,0,0,.34), rgba(0,0,0,0)) border-box no-repeat;}
html:not([data-theme^="modern-"]) #siteHeader.hdr-photo.hdr-top .brand,
html:not([data-theme^="modern-"]) #siteHeader.hdr-photo.hdr-top .brand-sub,
html:not([data-theme^="modern-"]) #siteHeader.hdr-photo.hdr-top .nav a:not(.btn){color:#fff;}
html:not([data-theme^="modern-"]) #siteHeader.hdr-photo.hdr-top .burger span{background:#fff;}

/* Modern family: a rounded bar that floats free of the very top and stays a
   little see-through at all times. */
[data-theme^="modern-"] #siteHeader{top:12px;}
[data-theme^="modern-"] #siteHeader.hdr-hidden{transform:translateY(calc(-100% - 18px));}
[data-theme^="modern-"] .site-head{margin-inline:clamp(12px,3vw,28px);border-radius:16px;
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background:color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.10);}
[data-theme^="modern-"] #siteHeader.hdr-top .site-head{
  background:color-mix(in srgb, var(--paper) 56%, transparent);
  border-color:color-mix(in srgb, var(--ink) 8%, transparent);
  backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);}
@media (max-width:900px){
  [data-theme^="modern-"] #siteHeader{top:0;}
  [data-theme^="modern-"] .site-head{margin-inline:0;border-radius:0;box-shadow:none;}
}

/* Modern · Frost: the Apple-style clear glass panel. */
[data-theme="modern-frost"] .site-head{
  background:color-mix(in srgb, #ffffff 42%, transparent);
  backdrop-filter:saturate(185%) blur(22px);-webkit-backdrop-filter:saturate(185%) blur(22px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 12px 34px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.7);}
[data-theme="modern-frost"] #siteHeader.hdr-top .site-head{
  background:color-mix(in srgb, #ffffff 34%, transparent);border-color:rgba(255,255,255,.5);
  backdrop-filter:saturate(185%) blur(22px);-webkit-backdrop-filter:saturate(185%) blur(22px);}
@media (max-width:900px){ [data-theme="modern-frost"] .site-head{border-radius:0;} }

/* Modern & Bold: on scroll-down the bar condenses instead of hiding away. */
.head-in{transition:min-height .3s ease;}
.brand-text{transition:font-size .3s ease, opacity .25s ease, max-width .35s ease;}
.mono-mark{transition:width .3s ease;}
.brand-sub{transition:opacity .25s ease, max-height .3s ease;}
.nav,.nav a,.nav .btn{transition:font-size .3s ease, padding .3s ease, gap .3s ease, min-height .3s ease;}
[data-theme^="modern-"] #siteHeader.hdr-min .head-in,
[data-theme^="bold-"] #siteHeader.hdr-min .head-in{min-height:46px;}
[data-theme^="modern-"] #siteHeader.hdr-min .brand-text,
[data-theme^="bold-"] #siteHeader.hdr-min .brand-text{font-size:1.05rem;}
[data-theme^="modern-"] #siteHeader.hdr-min .mono-mark,
[data-theme^="bold-"] #siteHeader.hdr-min .mono-mark{width:1.9rem;}
[data-theme^="modern-"] #siteHeader.hdr-min .brand-sub,
[data-theme^="bold-"] #siteHeader.hdr-min .brand-sub{opacity:0;max-height:0;margin:0;overflow:hidden;}

/* Modern condenses the furthest — a slim monogram-only strip. */
[data-theme^="modern-"] #siteHeader.hdr-min .head-in{min-height:30px;}
[data-theme^="modern-"] #siteHeader.hdr-min .brand{gap:0;}
[data-theme^="modern-"] #siteHeader.hdr-min .brand-text{opacity:0;max-width:0;overflow:hidden;white-space:nowrap;}
[data-theme^="modern-"] #siteHeader.hdr-min .mono-mark{width:1.45rem;}
[data-theme^="modern-"] #siteHeader.hdr-min .nav{gap:1.05rem;}
[data-theme^="modern-"] #siteHeader.hdr-min .nav a:not(.btn){font-size:.8rem;}
[data-theme^="modern-"] #siteHeader.hdr-min .nav .btn{padding:.3rem .7rem;min-height:28px;font-size:.72rem;}

/* --- hero ---------------------------------------------------------------- */
.hero{padding-block:clamp(2.5rem,5.5vw,4rem) clamp(1.75rem,3vw,2.5rem);}
.hero-wrap + section{border-top:1px solid var(--rule);}
/* Every page's opening section is capped so the section after it starts above
   the fold: a reader should never land on what looks like a complete page. */
.page-hero{padding-block:clamp(2.5rem,5.5vw,4rem) clamp(1.75rem,3vw,2.5rem);}
.page-hero + section{border-top:1px solid var(--rule);}
@media (max-width:640px){
  .hero,.page-hero{padding-block:1.75rem 1.5rem;}
  .hero h1{margin-bottom:1rem;} .hero .lede{margin-bottom:.9rem;}
  .btn-row{margin-top:1.25rem;}
}
.hero h1{max-width:16ch;margin-bottom:1.4rem;}
.hero h1 .hline{display:block;}
.hero .lede{max-width:54ch;color:var(--ink-soft);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.hero .kicker{max-width:100%;}
/* full-bleed extended photo hero: whole portrait as the field, copy set over the
   open right side. The scrim carries the active theme's band colour, so the hero
   still shifts with the theme while keeping the copy readable on any of them. */
/* the photo hero runs up under the (clear) header to the very top of the screen */
.has-hero-photo .hero-wrap{margin-top:calc(-1 * var(--headH, 64px));}
.has-hero-photo .hero-photo{padding-top:var(--headH,64px);}
.hero-photo{position:relative;overflow:hidden;padding:0;
  min-height:clamp(30rem,82vh,52rem);display:flex;align-items:center;}
.hero-photo-img{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  object-fit:cover;object-position:50% 26%;background:var(--paper-2);}
.hero-photo-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,10,14,0) 30%, rgba(10,10,14,.48) 74%, rgba(10,10,14,.62) 100%),
    linear-gradient(90deg, transparent 42%, color-mix(in srgb, var(--band) 68%, transparent) 100%);}
.hero-photo > .wrap{position:relative;z-index:2;width:100%;}
.hero-photo-copy{margin-left:auto;max-width:34rem;color:var(--on-navy);
  padding-block:clamp(2rem,5vw,4rem);}
.hero-photo-copy .kicker{color:var(--on-navy-accent);border-bottom-color:var(--rule-dark);max-width:100%;}
.hero-photo-copy h1{color:var(--on-navy);}
.hero-photo-copy .lede{color:var(--on-navy-soft);}
.hero-photo-copy .btn{background:var(--on-navy);color:var(--band);border-color:var(--on-navy);}
.hero-photo-copy .btn-ghost{background:transparent;color:var(--on-navy);border-color:var(--rule-dark);}
@media (max-width:760px){
  .hero-photo,.has-hero-photo .hero-photo{display:block;min-height:0;padding-top:0;}
  .hero-photo-img{position:static;height:44vh;object-position:22% 22%;}
  .hero-photo-scrim{display:none;}
  .hero-photo-copy{margin-left:0;max-width:none;color:var(--ink);padding-block:1.4rem 0;}
  .hero-photo-copy .kicker{color:var(--navy);}
  .hero-photo-copy h1{color:var(--ink);}
  .hero-photo-copy .lede{color:var(--ink-soft);}
  .hero-photo-copy .btn{background:var(--navy);color:var(--on-accent);border-color:var(--navy);}
  .hero-photo-copy .btn-ghost{background:transparent;color:var(--navy);border-color:var(--rule-strong);}
}

/* the standing note — one line at a time, a quiet crossfade, no strikethrough */
.rotator{border-top:1px solid var(--rule-strong);padding-top:1.1rem;}
.rotator .rot-label{font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 .9rem;}
.rotator .rot-stage{position:relative;min-height:4.2rem;}
@media (max-width:900px){ .rotator{padding-top:.9rem;} .rotator .rot-stage{min-height:3.2rem;} }
.rotator .rot-item{position:absolute;inset:0;margin:0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.35;color:var(--ink);opacity:0;
  transition:opacity 1s ease;max-width:100%;
  text-decoration:line-through;text-decoration-color:var(--navy);text-decoration-thickness:1.5px;}
.rotator .rot-item.on{opacity:1;}
/* reduced motion: show every line as a static list rather than one of six */
.rotator .rot-stage.static{position:static;min-height:0;display:grid;gap:.65rem;}
.rotator .rot-stage.static .rot-item{position:static;opacity:1;font-size:1.02rem;}
.rotator .rot-foot{font-family:var(--sans);font-size:.74rem;color:var(--ink-soft);margin:1rem 0 0;
  border-top:1px solid var(--rule);padding-top:.8rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;max-width:100%;}
.rot-pause{font:inherit;font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.06em;
  background:none;border:1px solid var(--rule-strong);color:var(--ink-soft);padding:.55rem .9rem;
  cursor:pointer;min-height:40px;min-width:64px;border-radius:var(--radius);transition:border-color .2s ease,color .2s ease;}

/* --- the claim / response pair — set as a journal would, no gimmick ------- */
.correction{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start;border-top:1px solid var(--rule-strong);
  padding:clamp(1.6rem,3vw,2.4rem) 0;margin:0;}
.correction:last-child{border-bottom:1px solid var(--rule-strong);}
@media (max-width:820px){ .correction{grid-template-columns:1fr;gap:1rem;} }
.correction .claim{font-family:var(--serif);font-style:italic;font-size:clamp(1.24rem,2.2vw,1.7rem);
  line-height:1.32;color:var(--ink);margin:0;max-width:100%;}
.clabel{display:block;font-family:var(--sans);font-style:normal;font-size:.66rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7rem;}
.correction .truth{font-size:1.02rem;margin:0;color:var(--ink);max-width:100%;}
.truth .clabel{color:var(--navy);}
.band-ink .correction{border-color:var(--rule-dark);}
.band-ink .correction .claim,.band-ink .correction .truth{color:var(--on-navy);}
.band-ink .clabel{color:var(--on-navy-soft);}
.band-ink .truth .clabel{color:var(--on-navy-accent);}

/* --- image slots --------------------------------------------------------- */
.ph{position:relative;width:100%;background:var(--paper-2);border:1px solid var(--rule);overflow:hidden;}
.band-ink .ph{background:var(--ink-lift);border-color:var(--rule-dark);}
.ph img{width:100%;height:100%;object-fit:cover;display:block;}
/* Book covers are artwork, not photography: never crop them. */
.shelf-item .ph img,.book .ph img{object-fit:contain;}
.ph.fit-contain img{object-fit:contain;padding:1.25rem;box-sizing:border-box;}
.partner .ph{background:var(--logo-bg);}
.book .ph.typo-cover,.shelf-item .ph.typo-cover,.ph.typo-cover{display:flex;align-items:center;justify-content:center;padding:1.5rem;background:var(--navy);border-color:var(--navy);text-align:center;}
.typo-cover span{font-family:var(--font-h);font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.2;color:var(--on-accent);}
.typo-cover::after{content:none;}
.montage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;margin-top:2rem;}
@media (max-width:820px){ .montage{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;} }
.partner .ph img{object-fit:contain;padding:1.35rem 1.5rem;box-sizing:border-box;}
.ep-thumb.miss{visibility:hidden;}
.shelf-item .ph,.book .ph{background:var(--paper);}
.band-ink .shelf-item .ph{background:var(--ink-lift);}
.ph::after{content:attr(data-brief);position:absolute;inset:auto .7rem .7rem .7rem;
  font-family:var(--sans);font-size:.62rem;font-weight:600;line-height:1.4;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);pointer-events:none;opacity:.7;}
.band-ink .ph::after{color:var(--on-navy-soft);}
.ph.filled::after{content:none;}
.ph.r-16x9{aspect-ratio:16/9;} .ph.r-4x3{aspect-ratio:4/3;}
.ph.r-1x1{aspect-ratio:1/1;}   .ph.r-2x3{aspect-ratio:2/3;} .ph.r-3x4{aspect-ratio:3/4;}
/* cover flip: hover on pointer devices, a real button for touch and keyboard */
.ph.flip .f-back{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;}
.ph.flip .f-front{transition:opacity .4s ease;}
@media (hover:hover){ .ph.flip:hover .f-back{opacity:1;} .ph.flip:hover .f-front{opacity:0;} }
.ph.flip.showback .f-back{opacity:1;} .ph.flip.showback .f-front{opacity:0;}
.f-btn{position:absolute;left:.5rem;bottom:.5rem;z-index:2;font:inherit;font-family:var(--sans);
  font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.45rem .65rem;
  min-height:40px;background:var(--navy);color:var(--on-accent);border:0;cursor:pointer;border-radius:var(--radius);
  opacity:.9;transition:opacity .2s ease,background .2s ease;}

/* --- accordion ----------------------------------------------------------- */
.acc{border-top:1px solid var(--rule-strong);margin-top:2.25rem;}
.acc-item{border-bottom:1px solid var(--rule);}
.acc-trigger{width:100%;display:flex;align-items:flex-start;gap:1.15rem;text-align:left;background:none;
  border:0;padding:1.35rem 0;cursor:pointer;font:inherit;color:inherit;min-height:56px;}
.acc-trigger .num{font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--navy);
  padding-top:.42rem;flex:0 0 auto;font-variant-numeric:lining-nums;}
.acc-trigger .lbl{font-family:var(--serif);font-size:clamp(1.12rem,1.7vw,1.34rem);line-height:1.35;
  flex:1;transition:color .2s ease;}
.acc-trigger .pm{flex:0 0 auto;width:18px;height:18px;position:relative;margin-top:.6rem;}
.acc-trigger .pm::before,.acc-trigger .pm::after{content:"";position:absolute;background:var(--ink-soft);
  transition:transform .3s ease,opacity .25s ease;}
.acc-trigger .pm::before{left:0;top:8px;width:18px;height:1.5px;}
.acc-trigger .pm::after{left:8px;top:0;width:1.5px;height:18px;}
.acc-trigger[aria-expanded="true"] .pm::after{transform:scaleY(0);opacity:0;}
.acc-body{height:0;overflow:hidden;visibility:hidden;}
.acc-body.open{visibility:visible;}
.acc-body .inner{padding:0 0 1.6rem 2.9rem;color:var(--ink-soft);}
.acc-body .inner p{max-width:64ch;}
@media (max-width:600px){ .acc-body .inner{padding-left:0;} }

/* --- features ------------------------------------------------------------ */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.75rem,3vw,2.75rem);margin-top:2.75rem;}
@media (max-width:900px){ .features{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .features{grid-template-columns:1fr;} }
.feature{display:flex;flex-direction:column;}
.feature.lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:center;border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong);padding:clamp(1.5rem,3vw,2.25rem) 0;background:none;}
@media (max-width:820px){ .feature.lead{grid-template-columns:1fr;} }
.feature .flabel{font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--navy);margin:1.1rem 0 .55rem;}
.feature.lead .flabel{margin-top:0;}
.feature h3{margin-bottom:.5rem;}
.feature p{color:var(--ink-soft);margin-bottom:1rem;font-size:1rem;}
.feature .more{font-family:var(--sans);font-size:.78rem;font-weight:600;text-decoration:none;
  color:var(--navy);margin-top:auto;}

/* --- story --------------------------------------------------------------- */
.story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);}
@media (max-width:900px){ .story{grid-template-columns:1fr;} }
.story .body p{font-size:1.06rem;color:var(--on-navy);max-width:64ch;}
.band-paper2 .story .body p,section:not(.band-ink) .story .body p{color:var(--ink);}
.story .body p:first-of-type::first-letter{font-family:var(--serif);font-size:3.4rem;line-height:.82;
  float:left;padding:.1em .14em 0 0;font-weight:400;}
.story .note{font-family:var(--sans);font-size:.78rem;line-height:1.65;color:var(--on-navy-soft);
  border-top:1px solid var(--rule-dark);padding-top:1rem;margin-top:1.5rem;max-width:44ch;}
section:not(.band-ink) .story .note{color:var(--ink-soft);border-top-color:var(--rule);}

/* --- video --------------------------------------------------------------- */
.vid{position:relative;aspect-ratio:16/9;background:var(--paper-2);border:1px solid var(--rule-strong);
  overflow:hidden;cursor:pointer;width:100%;padding:0;display:block;}
.vid img{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease;}
.vid .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.vid .play span{width:58px;height:58px;border-radius:50%;background:var(--navy);display:flex;
  align-items:center;justify-content:center;transition:background .25s ease;}
.vid .play span::after{content:"";border-left:15px solid var(--on-accent);border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:4px;}
.vid iframe,.vid video{width:100%;height:100%;border:0;display:block;object-fit:cover;}
.vid-cap{font-family:var(--sans);font-size:.78rem;line-height:1.55;color:var(--ink-soft);margin-top:.75rem;max-width:52ch;}
.band-ink .vid-cap{color:var(--on-navy-soft);}
.vid-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);margin-top:2.5rem;}
@media (max-width:820px){ .vid-grid{grid-template-columns:1fr;} }
.ep-list{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--rule-strong);}
.band-ink .ep-list{border-color:var(--rule-dark);}
.ep-list li{border-bottom:1px solid var(--rule);}
.band-ink .ep-list li{border-color:var(--rule-dark);}
.ep-list a{display:grid;grid-template-columns:120px 1fr;gap:1.1rem;align-items:center;
  padding:.9rem 0;text-decoration:none;}
.ep-thumb{width:120px;height:67.5px;aspect-ratio:16/9;overflow:hidden;object-fit:cover;border:1px solid var(--rule);background:var(--paper-2);
  transition:transform .3s ease;}
.ep-text{display:grid;gap:.25rem;min-width:0;}
@media (max-width:480px){ .ep-list a{grid-template-columns:96px 1fr;gap:.85rem;} .ep-thumb{width:96px;height:54px;} }
.ep-list .n{font-family:var(--sans);font-size:.75rem;font-weight:600;color:var(--navy);font-variant-numeric:lining-nums;}
.band-ink .ep-list .n{color:var(--on-navy-accent);}
.ep-list .ti{font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.3;}
.ep-list .d{font-family:var(--sans);font-size:.74rem;color:var(--ink-soft);white-space:nowrap;}
.band-ink .ep-list .d{color:var(--on-navy-soft);}


/* --- books --------------------------------------------------------------- */
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.1rem,2.2vw,1.9rem);
  align-items:start;margin-top:2.5rem;}
@media (max-width:820px){ .shelf{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:520px){ .shelf{grid-template-columns:repeat(2,minmax(0,1fr));} }
.shelf-item{text-decoration:none;display:block;}
.shelf-item .ph{transition:border-color .25s ease;}
.shelf-item .ph{aspect-ratio:2/3;}
.shelf-item .t{font-family:var(--sans);font-size:.76rem;line-height:1.4;margin-top:.65rem;
  color:var(--ink-soft);display:block;}
.band-ink .shelf-item .t{color:var(--on-navy-soft);}
.shelf-count{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--navy);}
.band-ink .shelf-count{color:var(--on-navy-accent);}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));
  gap:clamp(1.75rem,3vw,2.5rem);margin-top:2.5rem;}
.book{display:flex;flex-direction:column;}
.book .ph{margin-bottom:1rem;}
.book h3{font-size:1.2rem;margin-bottom:.3rem;}
.book .sub{font-size:.94rem;color:var(--ink-soft);margin-bottom:.5rem;line-height:1.45;font-style:italic;}
.book .meta{font-family:var(--sans);font-size:.72rem;color:var(--ink-soft);margin-bottom:.65rem;line-height:1.5;}
.book .blurb{font-size:.98rem;color:var(--ink);}
.book-lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(1.5rem,3.5vw,3rem);border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong);padding:clamp(1.5rem,3vw,2.25rem) 0;align-items:center;}
@media (max-width:700px){ .book-lead{grid-template-columns:1fr;} }
.book-lead h3{font-size:clamp(1.6rem,3vw,2.2rem);}
.badge{display:inline-block;font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy);border:1px solid var(--navy);padding:.3rem .6rem;
  margin-bottom:.85rem;border-radius:var(--radius);}

/* --- quotes -------------------------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:clamp(1.5rem,2.5vw,2.25rem);margin-top:2.5rem;}
.quote{margin:0;border-left:2px solid var(--on-navy-accent);padding-left:1.25rem;}
section:not(.band-ink) .quote{border-left-color:var(--navy);}
.quote blockquote{margin:0;}
.quote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.02rem,1.5vw,1.18rem);
  line-height:1.42;margin:0 0 .8rem;}
.quote figcaption{font-family:var(--sans);font-size:.75rem;font-weight:600;color:var(--on-navy-soft);}
section:not(.band-ink) .quote figcaption{color:var(--ink);}
.quote .src{display:block;font-weight:400;opacity:.8;margin-top:.25rem;font-style:normal;}

/* --- rows / logos / partners --------------------------------------------- */
.rows{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--rule-strong);}
.rows li{border-bottom:1px solid var(--rule);display:grid;
  grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:1.5rem;padding:1.05rem 0;align-items:baseline;}
@media (max-width:640px){ .rows li{grid-template-columns:1fr;gap:.3rem;} }
.rows .k{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.06em;color:var(--navy);}
.rows .v{color:var(--ink-soft);}
.rows .v strong{color:var(--ink);}
.band-ink .rows,.band-ink .rows li{border-color:var(--rule-dark);}
.band-ink .rows .k{color:var(--on-navy-accent);}
.band-ink .rows .v{color:var(--on-navy-soft);}
.band-ink .rows .v strong{color:var(--on-navy);}
.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:1.75rem;
  border-top:1px solid var(--rule-strong);border-left:1px solid var(--rule);}
@media (max-width:760px){ .logos{grid-template-columns:repeat(2,minmax(0,1fr));} }
.logo-cell{padding:1.3rem 1rem;font-family:var(--serif);font-size:clamp(.98rem,1.5vw,1.2rem);
  text-align:center;color:var(--ink);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:86px;}
.logo-cell .vmark{display:block;font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.06em;color:var(--navy);margin-top:.3rem;font-variant-numeric:lining-nums;}
.band-ink .logos{border-top-color:var(--rule-dark);border-left-color:var(--rule-dark);}
.band-ink .logo-cell{color:var(--on-navy);border-right-color:var(--rule-dark);border-bottom-color:var(--rule-dark);}
.band-ink .logo-cell .vmark{color:var(--on-navy-accent);}
.partners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2rem);margin-top:2.5rem;}
@media (max-width:760px){ .partners{grid-template-columns:1fr;} }
.partner{border-top:1px solid var(--rule-strong);padding-top:1.35rem;}
.partner .ph{margin-bottom:1.1rem;}
.partner h3{font-size:1.1rem;margin-bottom:.2rem;}
.partner .role{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy);margin-bottom:.6rem;}
.partner p{font-size:.95rem;color:var(--ink-soft);margin:0;}

/* --- ask CTA band (home, work) ------------------------------------------- */
.ask-cta{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:clamp(1.5rem,4vw,3rem);align-items:center;}
@media (max-width:760px){ .ask-cta{grid-template-columns:1fr;} }
.ask-cta h2{margin-bottom:.4rem;}
.ask-cta .lede{margin-bottom:0;}

/* --- homepage feature sections (Watch / Vitamins / Books / About) --------- */
.feat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;}
@media (max-width:820px){ .feat-grid{grid-template-columns:1fr;gap:1.75rem;} }
.feat-text .lede{margin-bottom:1.6rem;}
.feat-text h2{margin-bottom:.7rem;}
.feat-media{min-width:0;}
.feat-media .vid,.feat-media .ph{margin:0;}
/* a portrait-shaped media box shouldn't tower over its text column */
.feat-media .ph.r-3x4{max-width:340px;margin-inline:auto;}
@media (max-width:820px){ .feat-media .ph.r-3x4{max-width:280px;} }
.feat-quote{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.3;margin:0;
  color:var(--on-navy);border-left:2px solid var(--on-navy-accent);padding-left:1.3rem;}
section:not(.band-ink) .feat-quote{color:var(--ink);border-left-color:var(--navy);}
.feat .shelf{margin-top:2.25rem;}
/* on the About block the portrait leads on desktop, the story on mobile */
@media (max-width:820px){ .feat-media.lead-mobile{order:2;} .feat-text.lead-mobile{order:1;} }

/* --- form ---------------------------------------------------------------- */
.form{display:grid;gap:1.05rem;margin-top:2rem;max-width:640px;}
.field{display:grid;gap:.4rem;}
.field label{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-navy-soft);}
.field input,.field select,.field textarea{
  font:inherit;font-family:var(--serif);font-size:1rem;color:var(--on-navy);
  background:var(--field-bg);border:1px solid var(--rule-dark);padding:.85rem .95rem;
  border-radius:var(--radius);min-height:50px;width:100%;transition:border-color .2s ease,background .2s ease;}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--on-navy) 50%),
  linear-gradient(135deg,var(--on-navy) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;}
.field select option{color:var(--ink);background:var(--paper);}
.field textarea{min-height:150px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--on-navy-accent);background:var(--field-bg-2);}
.field input::placeholder,.field textarea::placeholder{color:var(--on-navy-faint);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem;}
@media (max-width:640px){ .form-row{grid-template-columns:1fr;} }
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-note{font-family:var(--sans);font-size:.78rem;line-height:1.6;color:var(--on-navy-soft);
  border-left:2px solid var(--on-navy-accent);padding-left:1rem;margin-top:.4rem;max-width:56ch;}
.form-msg{font-family:var(--sans);font-size:.8rem;padding:.9rem 1rem;border:1px solid var(--rule-dark);
  margin-top:.4rem;border-radius:var(--radius);max-width:56ch;}
.form-msg.ok{border-color:var(--on-navy-accent);color:var(--on-navy);}
.form-msg.bad{border-color:var(--on-navy-accent);color:var(--on-navy-accent);}

/* --- footer -------------------------------------------------------------- */
.foot-blurb{color:var(--on-navy-soft);font-size:.94rem;max-width:34ch;}
.site-foot{background:var(--band);color:var(--on-navy);padding-block:clamp(3rem,6vw,4.5rem) 2rem;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(1.75rem,3.5vw,3rem);}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr;} }
.site-foot .foot-h{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-navy-accent);margin:0 0 .9rem;}
.site-foot ul{list-style:none;margin:0;padding:0;}
.site-foot li{margin-bottom:.55rem;}
.site-foot a{text-decoration:none;color:var(--on-navy-soft);font-family:var(--sans);font-size:.9rem;}
.site-foot p{color:var(--on-navy-soft);}
.foot-brand{font-family:var(--serif);font-size:1.4rem;margin-bottom:.6rem;color:var(--on-navy);
  display:flex;align-items:center;gap:.75rem;line-height:1.15;}
.foot-brand .mono-mark{width:2.9rem;}
.foot-legal{border-top:1px solid var(--rule-dark);margin-top:2.75rem;padding-top:1.4rem;
  font-family:var(--sans);font-size:.72rem;line-height:1.7;color:var(--on-navy-soft);
  display:flex;flex-wrap:wrap;gap:.9rem 2rem;justify-content:space-between;}
.disclaimer{max-width:72ch;}

/* --- the repeating mark band --------------------------------------------- */
/* The JB mark tiled behind a section, every other row half a step across.
   Painted as a mask so it takes the section's own colour; guarded by @supports
   so a browser without mask never gets a solid block of currentColor. */
.mark-field{position:relative;isolation:isolate;}

.mark-field > *{position:relative;z-index:1;}
@supports ((-webkit-mask-image:url("img/mark-tile.svg")) or (mask-image:url("img/mark-tile.svg"))){
  .mark-field::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-color:currentColor;opacity:.07;
    -webkit-mask-image:url("img/mark-tile.svg");mask-image:url("img/mark-tile.svg");
    -webkit-mask-repeat:repeat;mask-repeat:repeat;
    /*TILE*/-webkit-mask-size:172px 100px;mask-size:172px 100px;}
  @media (max-width:600px){ .mark-field::before{/*TILE-PHONE*/-webkit-mask-size:137.6px 80px;mask-size:137.6px 80px;} }
}

/* --- scroll rail: a polished custom scrollbar (replaces the native one) ---- */
/* Hide the native scrollbar so this rail is the only one. Wheel, trackpad,
   keyboard and touch all still scroll; on a mouse the thumb is grab-to-drag.
   The thumb's length reflects how much of the page is in view, like a real bar. */
@media (hover:hover) and (pointer:fine){
  html{scrollbar-width:none;-ms-overflow-style:none;}
  html::-webkit-scrollbar{width:0;height:0;}
}
.scroll-rail{position:fixed;top:0;right:0;width:12px;height:100vh;height:100dvh;
  z-index:55;pointer-events:none;}
.scroll-rail-track{position:absolute;top:6px;bottom:6px;right:2px;width:8px;
  border-radius:999px;background:transparent;transition:background-color .25s ease;}
.scroll-rail-thumb{position:absolute;top:0;right:3.5px;width:5px;height:40px;
  border-radius:999px;background:var(--navy);opacity:.28;will-change:transform;
  transition:opacity .3s ease, width .2s ease, right .2s ease;}
.scroll-rail.active .scroll-rail-thumb{opacity:.5;}
/* over a dark backdrop (hero photo, ink bands, footer, dark themes) the thumb
   flips to the light on-band tone so it always contrasts what's behind it. */
.scroll-rail.on-dark .scroll-rail-thumb{background:var(--on-navy);}
@media (hover:hover) and (pointer:fine){
  .scroll-rail{pointer-events:auto;cursor:grab;}
  .scroll-rail.dragging{cursor:grabbing;}
  .scroll-rail:hover .scroll-rail-track,.scroll-rail.dragging .scroll-rail-track{
    background:color-mix(in srgb, var(--ink) 7%, transparent);}
  .scroll-rail.on-dark:hover .scroll-rail-track,.scroll-rail.on-dark.dragging .scroll-rail-track{
    background:color-mix(in srgb, var(--on-navy) 16%, transparent);}
  .scroll-rail:hover .scroll-rail-thumb{opacity:.8;width:8px;right:2px;}
  .scroll-rail.dragging .scroll-rail-thumb{opacity:1;width:8px;right:2px;}
}
@media (prefers-reduced-motion: reduce){ .scroll-rail-thumb,.scroll-rail-track{transition:none;} }

/* --- helpers / motion ---------------------------------------------------- */
.sr-h2{font-family:var(--sans);font-size:.69rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--navy);margin:0 0 1.4rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--rule-strong);}
.sub-h2{font-size:clamp(1.24rem,1.8vw,1.5rem);line-height:1.25;}
.reveal{opacity:0;transform:translateY(14px);}
.no-js .reveal,.reveal.shown{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .reveal{opacity:1;transform:none;}
}

/* --- hover states: pointer devices only ---------------------------------
   A phone has no hover. Left ungated, these stick after a tap and read as
   a stuck state on the element you just pressed. ------------------------ */
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--navy-lift);border-color:var(--navy-lift);}
  .btn-ghost:hover{background:transparent;color:var(--navy-lift);border-color:var(--navy);}
  .band-ink .btn:hover{background:var(--on-navy-soft);border-color:var(--on-navy-soft);color:var(--band);}
  .band-ink .btn-ghost:hover{background:transparent;border-color:var(--on-navy);}
  .site-foot .btn-ghost:hover{border-color:var(--on-navy);}
  .ul:hover::after{transform:scaleX(1);transform-origin:left;}
  .nav a:not(.btn):hover{color:var(--navy);}
  .nav .btn:hover{color:var(--on-accent);}
  .rot-pause:hover{border-color:var(--navy);color:var(--navy);}
  .f-btn:hover{opacity:1;background:var(--navy-lift);}
  .acc-trigger:hover .lbl{color:var(--navy);}
  .vid:hover img{opacity:.9;}
  .vid:hover .play span{background:var(--navy-lift);}
  .ep-list a:hover .ep-thumb{transform:translateX(3px);}
  .shelf-item:hover .ph{border-color:var(--navy);}
  .site-foot a:hover{color:var(--on-navy);}
}

/* --- phones: type floors and thumb-sized targets -------------------------
   Both blocks live at the end on purpose: they correct earlier rules of the
   same specificity, and a later rule is the only thing that beats one. ---- */
@media (max-width:600px){
  /* Nothing on a phone drops below ~11.5px. The small caps labels were set in
     desktop proportions and came out at 9.6-10.9px on a 390px screen. */
  .rotator .rot-label,.feature .flabel,.partner .role,.logo-cell .vmark,
  .clabel,.badge,.f-btn,.rot-pause,.foot-h,.form-note,.vid-cap,.meta{font-size:.72rem;}
  .kicker{font-size:.71rem;}
  .disclaimer{font-size:.8rem;}
}
@media (pointer:coarse){
  /* Every target a thumb aims at clears 44px. Links that sit inside a sentence
     are left alone — WCAG 2.5.8 exempts them, and padding them out would tear
     the paragraph apart. */
  .btn,.f-btn,.rot-pause,.burger,.acc-trigger,.mobile-nav a,.vid,.skip{min-height:44px;}
  .more,.rows li a,.earlier li a,.ep-list a,.shelf-item,
  p > .ul:only-child,.site-foot li a,.foot-legal a{
    display:inline-flex;align-items:center;min-height:44px;}
  .shelf-item,.ep-list a{display:flex;}
  .site-foot li a{display:block;padding-block:.35rem;}
  .site-foot li{margin-bottom:.1rem;}
  .f-btn{padding-inline:.9rem;}
}

/* =============================================================================
   /brain revision, 2026-09-18 — books->Amazon block, Dr. Oz citation card,
   the 5-up Model Health Show grid, the consultation CTA, and the About page
   photo gallery. Reuses existing tokens (--navy, --rule, --band, etc.) so
   every theme in themes.css still applies without change.
   ============================================================================= */

/* --- shrink a section further than .tight, for a compact hit-and-run block */
section.compact{padding-block:clamp(1.75rem,3.2vw,2.75rem);}

/* --- homepage: books image -> Amazon (shrunk 2026-09-18) ------------------ */
.books-amazon{display:block;text-decoration:none;max-width:480px;margin:1.1rem auto 0;}
/* Full banner, uncropped — the source photo is a short wide strip (940x343),
   so showing it at its own aspect ratio instead of forcing 16:9 both looks
   right and keeps the section short. */
.books-amazon .ph{aspect-ratio:940/343;border-radius:2px;}
.books-amazon-cap{display:block;margin-top:.5rem;font-family:var(--serif);
  font-size:clamp(1rem,1.5vw,1.2rem);color:var(--ink);text-align:center;}
.band-ink .books-amazon-cap{color:var(--on-navy);}
.books-amazon-cap .ul{display:block;margin-top:.3rem;font-family:var(--sans);
  font-size:.76rem;font-weight:600;color:var(--navy);text-decoration:underline;
  text-underline-offset:3px;}
.band-ink .books-amazon-cap .ul{color:var(--on-navy-accent);}
/* Desktop shows the same full, uncropped banner at its full size; mobile
   keeps the smaller 480px version above as-is. */
@media (min-width:760px){
  .books-amazon{max-width:900px;}
  .books-amazon-cap{font-size:clamp(1.05rem,1.4vw,1.3rem);margin-top:.75rem;}
}

/* --- homepage: "as seen on" — a strip along the bottom edge of the hero, so
   the press sits above the fold: a row of logo marks (SVG wordmarks drawn
   from each outlet's name, never another network's actual logo file) and
   three small captioned on-camera photos. On a phone the hero stacks, and
   the strip follows the hero copy on the page colour. ------------------------ */
.hero-photo{flex-direction:column;align-items:stretch;}
.hero-photo > .wrap{flex:1 1 auto;display:flex;align-items:center;}
.hero-photo .hero-photo-copy{padding-block:clamp(1.25rem,4vh,3.5rem);}
.hero-photo > .hero-press{flex:0 0 auto;position:relative;z-index:2;width:100%;
  background:rgba(10,10,14,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-top:1px solid var(--rule-dark);color:var(--on-navy);}
.hero-press-in{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.25rem);padding-block:.8rem;}
.hero-press-label{flex:0 0 auto;margin:0;font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:var(--kicker-track);text-transform:uppercase;color:var(--on-navy-accent);white-space:nowrap;}
.hero-press-logos{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;
  gap:.55rem clamp(1rem,1.9vw,1.9rem);min-width:0;}
.hero-press .press-cell{display:inline-flex;align-items:center;}
.hero-press .press-logo{display:block;height:27px;width:auto;color:var(--on-navy);}
.hero-press-photos{flex:0 0 auto;display:flex;gap:.5rem;}
.hero-press-photos figure{width:clamp(78px,7.4vw,104px);margin:0;}
.hero-press-photos .ph{aspect-ratio:4/3;border-color:var(--rule-dark);border-radius:var(--radius);}
.hero-press-photos figcaption{margin-top:.28rem;font-family:var(--sans);font-size:.56rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;text-align:center;color:var(--on-navy-soft);white-space:nowrap;}
@media (max-width:1100px){ .hero-press .press-logo{height:22px;} }
/* phone: the hero stacks, so the strip goes straight under the photo — still
   above the fold — on the page colour, logos only. */
@media (max-width:760px){
  .hero-photo,.has-hero-photo .hero-photo{display:flex;}
  .hero-photo-img{order:0;height:40vh;}
  .hero-photo > .hero-press{order:1;background:var(--paper-2);-webkit-backdrop-filter:none;backdrop-filter:none;
    border-top:0;border-bottom:1px solid var(--rule);color:var(--ink);}
  .hero-photo > .wrap{order:2;display:block;}
  .hero-photo .hero-photo-copy{padding-block:1.25rem 0;}
  .hero-press-in{flex-direction:column;align-items:flex-start;gap:.45rem;padding-block:.7rem .8rem;}
  .hero-press-label{color:var(--navy);font-size:.6rem;}
  .hero-press-logos{gap:.4rem 1rem;}
  .hero-press .press-logo{height:17px;color:var(--ink-soft);}
  .hero-press-photos{display:none;}
}

/* --- homepage: one big video, smaller ones underneath ---------------------- */
.tmhs-big .vid{aspect-ratio:16/9;max-width:760px;margin:0 auto;}
.tmhs-big .vid-cap{text-align:center;max-width:none;}
.tmhs-small-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.5rem;}
@media (max-width:760px){ .tmhs-small-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.tmhs-small-grid .vid{aspect-ratio:16/9;}
.tmhs-small-grid .vid-cap{font-size:.72rem;}

/* --- homepage: consultation CTA --------------------------------------------
   Deliberately different layouts per breakpoint, not one scaled down: on
   mobile the phone-shot vertical video reads naturally full-width, stacked
   above the copy, like a story card. On desktop that same skinny vertical
   clip sitting small next to text read as an afterthought, so it gets a
   bigger, framed "device" treatment and sits beside the copy instead. Fixed
   2026-09-27 alongside the play-button overlap bug (site.js, .vid-local
   handler): the video element now inherits .vid/.consult-video sizing, so it
   no longer renders at native size over the rest of the section. */
.consult-wrap{display:flex;flex-direction:column;align-items:center;gap:1.5rem;max-width:340px;margin:0 auto;}
.consult-video{width:100%;max-width:280px;margin:0 auto;}
.consult-video .vid{aspect-ratio:640/1138;border-radius:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.4);}
.consult-card{text-align:center;}
.consult-card .btn-row{justify-content:center;margin-top:1.25rem;}
@media (min-width:760px){
  .consult-wrap{flex-direction:row;align-items:center;text-align:left;max-width:860px;gap:3.5rem;}
  .consult-video{flex:0 0 270px;max-width:270px;margin:0;}
  .consult-video .vid{border-radius:20px;box-shadow:0 32px 60px -24px rgba(0,0,0,.5);}
  .consult-card{text-align:left;flex:1 1 auto;}
  .consult-card .btn-row{justify-content:flex-start;}
  .consult-card h2{font-size:clamp(1.85rem,2.4vw,2.3rem);}
}

/* --- about page: the client photo gallery --------------------------------- */
.ag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:2rem;}
@media (max-width:760px){ .ag-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:480px){ .ag-grid{grid-template-columns:1fr;} }
.ag-item{margin:0;}
.ag-item .ph{aspect-ratio:4/3;}
.ag-item figcaption{margin-top:.55rem;font-family:var(--sans);font-size:.76rem;
  color:var(--on-navy-soft);}

/* --- pushing the homepage About + Ask sections tight against each other -- */
#about + #talk{padding-top:0;}


/* consultation: the headline is set large enough to stop a scroll (the play
   button is centred on the cover, like every other video on the site) */
.consult-card h2{font-size:clamp(1.9rem,6.4vw,2.4rem);}
@media (min-width:760px){
  .consult-wrap{max-width:980px;}
  .consult-card h2{font-size:clamp(2.2rem,3.5vw,3.2rem);max-width:16ch;}
}

/* --- homepage hero = exactly the first screen ---------------------------------
   The hero (photo, copy and the "as seen on" strip) is one viewport tall on
   every device: 100svh, the height with the browser's own bars showing, so on
   a phone it ends at the bottom of the screen and the next section starts
   exactly at the fold. Type, spacing and the strip scale with the viewport's
   height as well as its width so everything still fits when the window is
   short; min-height (not a fixed height) means that if a visitor's own text
   zoom ever makes the copy taller than the screen, the hero grows rather than
   cutting it off. ---------------------------------------------------------- */
.hero-photo,.has-hero-photo .hero-photo{min-height:calc(100vh + var(--headOff,0px));
  min-height:calc(100svh + var(--headOff,0px));}
@media (min-width:761px){
  .hero-photo h1{font-size:clamp(1.6rem,min(5.6vw,9.4svh),4.3rem);margin-bottom:clamp(.45rem,2.2svh,1.4rem);}
  .hero-photo .lede{font-size:clamp(.92rem,min(1.06rem + .42vw,2.6svh),1.4rem);margin-bottom:0;}
  .hero-photo .hero-photo-copy{padding-block:clamp(.4rem,3svh,3.5rem);}
  .hero-photo .hero-photo-copy .kicker{margin-bottom:clamp(.5rem,2svh,1.4rem);padding-bottom:clamp(.35rem,1.2svh,.7rem);}
  .hero-photo .btn-row{margin-top:clamp(.7rem,3svh,2rem);}
  .hero-press-in{padding-block:clamp(.4rem,1.4svh,.8rem);}
  .hero-press .press-logo{height:clamp(14px,3.2svh,27px);}
  .hero-press-photos figure{width:clamp(56px,min(7.4vw,11svh),104px);}
}
@media (min-width:761px) and (max-width:1100px){ .hero-press .press-logo{height:clamp(13px,2.8svh,22px);} }
/* a very short, wide window (a phone on its side): drop the intro line and
   the three photos so the headline, the buttons and the logos still fit */
@media (min-width:761px) and (max-height:540px){
  .hero-photo .lede,.hero-press-photos{display:none;}
  .hero-photo .btn{min-height:40px;padding-block:.5rem;}
}
@media (max-width:760px){
  .hero-photo,.has-hero-photo .hero-photo{min-height:calc(100vh + var(--headOff,0px));
    min-height:calc(100svh + var(--headOff,0px));}
  /* photo takes whatever height the copy and the strip leave over */
  .hero-photo-img{flex:1 1 0;height:auto;min-height:22svh;}
  .hero-photo > .hero-press,.hero-photo > .wrap{flex:0 0 auto;}
  .hero-photo .hero-photo-copy{padding-block:clamp(.7rem,2svh,1.25rem) clamp(.8rem,2.4svh,1.4rem);}
  .hero-photo .hero-photo-copy .kicker{margin-bottom:clamp(.5rem,1.5svh,1rem);padding-bottom:clamp(.35rem,1svh,.7rem);font-size:.62rem;}
  .hero-photo h1{font-size:clamp(1.55rem,min(10.6vw,5.7svh),2.6rem);margin-bottom:clamp(.4rem,1.3svh,.9rem);}
  .hero-photo .lede{font-size:clamp(.9rem,2.4svh,1.14rem);line-height:1.5;margin-bottom:0;}
  .hero-photo .btn-row{flex-wrap:nowrap;gap:.5rem;margin-top:clamp(.7rem,2svh,1.25rem);}
  .hero-photo .btn-row .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;
    padding-inline:.5rem;min-height:46px;font-size:.8rem;line-height:1.2;}
  /* strip: the label and the logo marks run together on as few lines as fit */
  .hero-press-in{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.3rem .85rem;padding-block:clamp(.4rem,1.1svh,.7rem);}
  .hero-press-logos{display:contents;}
  .hero-press .press-logo{height:clamp(11px,1.85svh,15px);}
}

/* --- natural motion, round two ------------------------------------------------
   Quiet life on the pieces added since the first pass: a slow breath on the
   hero portrait, a ring on the consultation play button, and small hover
   responses on everything that can be clicked. Transform and opacity only,
   nothing fades out, hover rules sit behind a real pointer, and all of it is
   switched off for visitors who ask for reduced motion. ---------------------- */
.al-banner{overflow:hidden;}
.btn{transition:background .2s ease,color .2s ease,border-color .2s ease,transform .25s ease;}
.vid .play span{transition:background .25s ease,transform .35s cubic-bezier(.2,.7,.2,1);}
.books-amazon-cap .ul,.as-links .more{transition:transform .3s ease;}
.hero-press .press-logo{transition:opacity .25s ease;}
.hero-press-photos .ph img,.as-aside img{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.hero-press-photos .ph{overflow:hidden;}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);}
  .btn:active{transform:translateY(0);}
  .vid:hover .play span{transform:scale(1.1);}
  .books-amazon:hover .books-amazon-cap .ul{transform:translateX(4px);}
  .as-links .more:hover{transform:translateX(3px);}
  .hero-press-logos:hover .press-logo{opacity:.55;}
  .hero-press-logos .press-cell:hover .press-logo{opacity:1;}
  .hero-press-photos figure:hover .ph img{transform:scale(1.08);}
}
@media (prefers-reduced-motion:no-preference){
  /* the portrait breathes: 3% over half a minute, desktop only (on a phone the
     photo is a plain block above the copy and stays still) */
  @media (min-width:761px){
    .hero-photo.in-view .hero-photo-img{animation:heroBreath 28s ease-in-out infinite alternate;}
  }
  @keyframes heroBreath{ from{scale:1;} to{scale:1.035;} }
  /* the consultation play button sends out one soft ring every few seconds */
  .vid-local .play span{position:relative;}
  .vid-local .play span::before{content:"";position:absolute;inset:0;border-radius:50%;
    border:2px solid var(--on-navy);opacity:0;pointer-events:none;}
  .consult-video.in-view .vid-local .play span::before{animation:playRing 3.2s ease-out infinite;}
  @keyframes playRing{ 0%{transform:scale(1);opacity:.55;} 70%,100%{transform:scale(1.9);opacity:0;} }
}


/* --- Jonny's final review, 2026-10-04 -------------------------------------- */
/* hero photo: a wide picture on desktop, his portrait on a phone; the picture
   element must not become a box of its own in either layout */
.hero-photo-pic{display:contents;}
.hero-photo-img{object-position:25% 30%;}
/* a tall window on a desktop-class screen (tablet held upright): his face
   stays at the top, the words settle at the bottom over a soft shade */
@media (min-width:761px) and (max-aspect-ratio:1/1){
  .hero-photo > .wrap{align-items:flex-end;}
  .hero-photo-copy{margin-left:0;max-width:40rem;}
  .hero-photo-img{object-position:39% 0%;}
  .hero-photo-scrim{background:linear-gradient(180deg, rgba(10,10,14,0) 30%, rgba(10,10,14,.55) 62%, rgba(10,10,14,.78) 100%);}
}
@media (max-width:760px){ .hero-photo-img{object-position:50% 18%;} }
/* homepage watch section: the podcast hosts, one line */
.hosts-line{margin:1.5rem auto 0;max-width:62ch;text-align:center;font-size:1rem;color:var(--ink-soft);}
.band-ink .hosts-line{color:var(--on-navy-soft);}
/* ask page: the form alone, centred */
.ask-solo{max-width:720px;margin-inline:auto;}
/* work page: the quote beside the video, and Mike's one line */
.work-quote{margin:0;align-self:center;}
.work-quote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.4;
  max-width:30ch;margin:0;padding-left:1.25rem;border-left:3px solid var(--navy);}
.band-ink .work-quote p{border-left-color:var(--on-navy-accent);}
.speak-line{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.5;max-width:52ch;margin:0;}

/* Header over the hero photo (home, every theme): almost clear, so the
   picture reads through it; light type with a soft shadow keeps it legible.
   It takes its normal ground back as soon as it has scrolled past the photo. */
:root #siteHeader.hdr-photo.hdr-hero.hdr-hero .site-head{
  background:linear-gradient(to bottom, rgba(8,10,14,.24), rgba(8,10,14,0)) border-box no-repeat;
  border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;}
:root[data-theme^="modern-"] #siteHeader.hdr-photo.hdr-hero.hdr-hero .site-head{
  background:rgba(8,10,14,.10);border-color:rgba(255,255,255,.22);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
:root #siteHeader.hdr-photo.hdr-hero .brand,
:root #siteHeader.hdr-photo.hdr-hero .brand-sub,
:root #siteHeader.hdr-photo.hdr-hero .nav a:not(.btn){color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35);}
:root #siteHeader.hdr-photo.hdr-hero .nav a[aria-current="page"]:not(.btn){color:#fff;}
:root #siteHeader.hdr-photo.hdr-hero .mono-mark{filter:drop-shadow(0 1px 6px rgba(0,0,0,.3));}
:root #siteHeader.hdr-photo.hdr-hero .burger span{background:#fff;}
:root #siteHeader.hdr-photo.hdr-hero .burger{border-color:rgba(255,255,255,.5);background:transparent;}
@media (max-width:900px){ :root[data-theme^="modern-"] #siteHeader.hdr-photo.hdr-hero.hdr-hero .site-head{border-color:transparent;} }

/* --- Page titles, 2026-10-14 -----------------------------------------------
   A page opens with a modest title and a paragraph people actually read: the
   title introduces, the paragraph does the work. Applies to every inner page
   on every theme (the homepage hero is the one deliberate exception). */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.page-hero{padding-block:clamp(2rem,4vw,3rem) clamp(1.5rem,2.6vw,2.25rem);}
.page-hero h1{font-size:clamp(1.9rem,1.35rem + 1.7vw,2.9rem);line-height:1.12;max-width:34ch;margin-bottom:.55em;}
.page-hero .lede{color:var(--ink);font-size:clamp(1.14rem,1.06rem + .34vw,1.34rem);line-height:1.6;max-width:62ch;}
.band-ink .page-hero .lede,.page-hero.band-ink .lede{color:var(--on-navy);}
@media (max-width:640px){
  .page-hero{padding-block:1.5rem 1.35rem;}
  .page-hero h1{font-size:clamp(1.7rem,7.4vw,2.1rem);}
}
/* homepage books band: the banner and its Amazon link, no title */
/* and the section right after a page title starts close under it, so the
   page's content is already in view when it opens */
.page-hero + section{padding-top:var(--sec-sm);}
/* opening paragraphs read in full body ink, not the faded secondary grey */
.lede{color:var(--ink);}
.band-ink .lede{color:var(--on-navy);}

/* --- Ask form as one email-style box, 2026-10-15 ---------------------------
   Email, then name, then the question, inside a single frame that reads like
   a message being written. Hairlines separate the lines; the fields
   themselves carry no boxes of their own. */
.mail-form{max-width:none;}
.mail{border:1px solid var(--rule-dark);border-radius:var(--radius);background:var(--field-bg);
  transition:border-color .2s ease,background .2s ease;}
.mail:focus-within{border-color:var(--on-navy-accent);background:var(--field-bg-2);}
.mail-row{display:grid;grid-template-columns:7.5rem 1fr;align-items:center;
  border-bottom:1px solid var(--rule-dark);padding-inline:1.1rem;}
.mail-row label,.mail-count{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-navy-soft);}
.mail input,.mail textarea{font:inherit;font-family:var(--serif);font-size:1.05rem;color:var(--on-navy);
  background:transparent;border:0;border-radius:0;width:100%;outline:none;box-shadow:none;}
.mail input{padding:1rem 0;min-height:54px;}
.mail textarea{display:block;padding:1.1rem 1.1rem .4rem;min-height:15rem;resize:vertical;line-height:1.6;}
.mail input::placeholder,.mail textarea::placeholder{color:var(--on-navy-faint);}
.mail input:focus-visible,.mail textarea:focus-visible{outline:none;}
.mail-row:focus-within label{color:var(--on-navy-accent);}
.mail-count{margin:0;padding:0 1.1rem .8rem;text-align:right;letter-spacing:.06em;font-variant-numeric:tabular-nums;max-width:none;}
.mail-count.near{color:var(--on-navy-accent);}
@media (max-width:520px){
  .mail-row{grid-template-columns:5.6rem 1fr;padding-inline:.9rem;}
  .mail textarea{padding-inline:.9rem;min-height:13rem;}
  .mail-count{padding-inline:.9rem;}
}

/* --- "As seen on" strip: Fat Fiction's poster sits in the row as an icon,
   the height of two lines of names (Jonny, 2026-10-04) --------------------- */
.hero-press .press-art img{display:block;height:34px;width:auto;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.35);}
@media (min-width:761px){ .hero-press-logos{column-gap:clamp(.8rem,1.25vw,1.45rem);} }
@media (max-width:1100px){ .hero-press .press-art img{height:28px;} }
@media (min-width:761px) and (max-height:820px){ .hero-press .press-art img{height:clamp(18px,4svh,34px);} }
@media (max-width:760px){ .hero-press .press-art img{height:24px;} }

/* --- Header on every page, 2026-10-17 --------------------------------------
   The near-clear look it has over the homepage photo, kept site-wide: a faint
   shade fading down from the top and a light blur, no solid bar. Its type
   always stands out: the theme's ink with a soft halo on light ground, white
   with a soft shadow over the photo, a dark band or the footer. The open
   phone menu keeps a solid bar. */
:root #siteHeader.hdr-glass.hdr-glass .site-head{
  background:linear-gradient(to bottom, color-mix(in srgb, var(--paper) 82%, transparent), color-mix(in srgb, var(--paper) 30%, transparent)) border-box no-repeat;
  border-color:transparent;box-shadow:none;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
:root[data-theme^="modern-"] #siteHeader.hdr-glass.hdr-glass .site-head{
  background:color-mix(in srgb, var(--paper) 55%, transparent);
  border-color:color-mix(in srgb, var(--ink) 14%, transparent);}
:root #siteHeader.hdr-glass.hdr-dark .site-head{
  background:linear-gradient(to bottom, rgba(8,10,14,.34), rgba(8,10,14,.08)) border-box no-repeat;}
:root[data-theme^="modern-"] #siteHeader.hdr-glass.hdr-dark .site-head{
  background:rgba(8,10,14,.24);border-color:rgba(255,255,255,.22);}
@media (max-width:900px){ :root[data-theme^="modern-"] #siteHeader.hdr-glass.hdr-glass .site-head{border-color:transparent;} }

:root #siteHeader.hdr-glass .brand,
:root #siteHeader.hdr-glass .brand-sub,
:root #siteHeader.hdr-glass .nav a:not(.btn){color:var(--ink);
  text-shadow:none;}
:root #siteHeader.hdr-glass .mono-mark{filter:none;}
:root #siteHeader.hdr-glass .burger{background:color-mix(in srgb, var(--paper) 40%, transparent);}

:root #siteHeader.hdr-glass.hdr-dark .brand,
:root #siteHeader.hdr-glass.hdr-dark .brand-sub,
:root #siteHeader.hdr-glass.hdr-dark .nav a:not(.btn),
:root #siteHeader.hdr-glass.hdr-dark .nav a[aria-current="page"]:not(.btn){color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35);}
:root #siteHeader.hdr-glass.hdr-dark .mono-mark{filter:drop-shadow(0 1px 6px rgba(0,0,0,.35));}
:root #siteHeader.hdr-glass.hdr-dark .burger{border-color:rgba(255,255,255,.5);background:transparent;}
:root #siteHeader.hdr-glass.hdr-dark .burger span{background:#fff;}

/* over the photo the earlier rules still apply; restate the type so the
   site-wide ink rule above cannot win there */
:root #siteHeader.hdr-glass.hdr-hero .brand,
:root #siteHeader.hdr-glass.hdr-hero .brand-sub,
:root #siteHeader.hdr-glass.hdr-hero .nav a:not(.btn){color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35);}
:root #siteHeader.hdr-glass.hdr-hero .mono-mark{filter:drop-shadow(0 1px 6px rgba(0,0,0,.3));}
:root #siteHeader.hdr-glass.hdr-hero .burger{border-color:rgba(255,255,255,.5);background:transparent;}

/* phone menu open: a solid bar above the solid menu panel */
:root #siteHeader.hdr-glass:has(.burger[aria-expanded="true"]) .site-head{
  background:var(--head-bg);backdrop-filter:saturate(120%) blur(6px);-webkit-backdrop-filter:saturate(120%) blur(6px);}

/* --- About page: nothing waits to fade in --------------------------------- */
.about-lab-root .reveal{opacity:1;transform:none;}

/* --- Sempre Discens and other long chapters with a side photo, 2026-10-17 --
   The large-type, photo-beside layout is for one-paragraph chapters only; a
   long chapter flows in two columns with the photo set into the first, and
   its short one-line paragraphs sit close together as a stack. */
@media (min-width:900px){
  [data-about-layout="classic"] .as-ch--aside.as-ch--long .as-body,
  [data-about-layout="gallery"] .as-ch--aside.as-ch--long .as-body{display:block;columns:2;column-gap:clamp(2rem,4.5vw,4rem);}
  [data-about-layout="classic"] .as-ch--aside.as-ch--long .as-body::after,
  [data-about-layout="gallery"] .as-ch--aside.as-ch--long .as-body::after{content:"";}
  [data-about-layout="classic"] .as-ch--aside.as-ch--long .as-aside,
  [data-about-layout="gallery"] .as-ch--aside.as-ch--long .as-aside{float:right;width:min(44%,230px);margin:.3rem 0 .75rem 1.25rem;}
  [data-about-layout="classic"] .as-ch--aside.as-ch--long .as-body p,
  [data-about-layout="gallery"] .as-ch--aside.as-ch--long .as-body p{font-family:inherit;font-size:1.06rem;line-height:1.6;}
}
.as-body p.as-short{margin-bottom:.35em;}
.as-body p.as-short + p:not(.as-short){margin-top:.8em;}

/* --- homepage Watch, smaller: the big video beside the four others -------- */
@media (min-width:900px){
  .tmhs-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.25rem;align-items:start;margin-top:.5rem;}
  .tmhs-row .tmhs-big .vid{max-width:none;}
  .tmhs-row .tmhs-big .vid-cap{text-align:left;}
  .tmhs-row .tmhs-small-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-top:0;}
}

/* --- Ask form: browser autofill and the sent state, 2026-10-18 -------------
   Chrome and Safari paint autofilled fields in their own pale blue/yellow,
   which turned the email row into a white bar on the dark band. The delay
   keeps that paint from ever showing; the text keeps the form's colour. */
.mail input:-webkit-autofill,.mail input:-webkit-autofill:hover,
.mail input:-webkit-autofill:focus,.mail textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--on-navy);caret-color:var(--on-navy);
  -webkit-box-shadow:0 0 0 1000px transparent inset;
  transition:background-color 600000s 0s,color 600000s 0s;}
.mail input:autofill{background:transparent;}

/* Sent: the form steps aside and a confirmation takes its place. */
.mail-form.is-sent > :not(.sent-panel){display:none;}
.sent-panel{display:grid;justify-items:center;text-align:center;gap:.75rem;
  padding:clamp(2rem,5vw,3.25rem) 1.5rem;border:1px solid var(--on-navy-accent);
  border-radius:var(--radius-lg);background:var(--field-bg-2);color:var(--on-navy);}
.sent-panel[hidden]{display:none;}
.sent-panel:focus{outline:none;}
.sent-mark{width:56px;height:56px;border-radius:50%;background:var(--on-navy-accent);position:relative;}
.sent-mark::after{content:"";position:absolute;left:20px;top:13px;width:12px;height:24px;
  border:solid var(--band);border-width:0 4px 4px 0;transform:rotate(45deg);}
.sent-title{font-family:var(--font-h);font-weight:var(--h-weight);letter-spacing:var(--h-track);
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2;margin:.5rem 0 0;max-width:none;}
.sent-text{color:var(--on-navy-soft);margin:0 0 .75rem;max-width:44ch;}

/* =============================================================================
   MOBILE PASS, 2026-10-18 — phones, tablets and narrow windows only.
   Every rule below sits inside the same query site.js calls mobileMQ, so a
   desktop browser with a mouse never sees any of it.
   ============================================================================= */
@media (max-width:900px), (hover:none) and (pointer:coarse){
  /* The header keeps ONE footprint in the page. The bar inside still
     condenses on scroll, but the space it takes in the layout never changes,
     so the page under it no longer jumps 24px every time it does. The empty
     strip left under a condensed bar lets taps fall through to the page. */
  #siteHeader{height:var(--hdrBox,auto);pointer-events:none;}
  #siteHeader .site-head,#siteHeader .skip{pointer-events:auto;}
  .mobile-nav{top:var(--hdrBox,var(--head-h,64px));}
  #siteHeader.hdr-snap,#siteHeader.hdr-snap *{transition:none !important;}

  /* The header is drawn by site.js. Until it is, hold its space (and the
     photo hero's pull-up under it) at the size it will be, so the page does
     not paint once and then drop 72px when the header arrives. */
  #siteHeader:empty{height:calc(var(--nav-h) + 2px);}
  :root{--headH:calc(var(--nav-h) + 2px);}

  /* nothing can ever nudge the page sideways (clip, not hidden, so the
     sticky header keeps working) */
  html,body{overflow-x:clip;}

  /* a video poster that can't load shows a plain frame, not its alt text */
  .vid img{color:transparent;}

  /* small type floor: nothing a visitor has to read drops under ~12px */
  .kicker,.sr-h2,.vid-cap,.foot-h,.form-note,.mail-row label,.mail-count,.acc-trigger .num,
  .disclaimer,.foot-legal,.foot-legal p,
  .site-foot .foot-h,.tmhs-small-grid .vid-cap{font-size:12px;}
  .hero-photo .hero-photo-copy .kicker{font-size:11.5px;}
  .hero-press-label{font-size:11px;}
  .hero-press-photos figcaption{font-size:11px;}
}

/* Entrance animations on load: the pieces that animate in are held hidden
   from the very first paint (html.js is set by a one-line script in <head>)
   until site.js has set their starting state. Without this a slow phone
   paints the headline, hides it, then fades it back in — a visible flicker.
   If the script never runs, they appear after 3s regardless. Visitors who
   ask for reduced motion are never held. */
@media (prefers-reduced-motion:no-preference) and (max-width:900px),
       (prefers-reduced-motion:no-preference) and (hover:none) and (pointer:coarse){
  html.js:not(.motion-ready) #heroHeadline,
  html.js:not(.motion-ready) .hero-photo-copy .kicker,
  html.js:not(.motion-ready) .hero-photo-copy .lede,
  html.js:not(.motion-ready) .hero-photo-copy .btn-row,
  html.js:not(.motion-ready) .hero-press .hero-press-label,
  html.js:not(.motion-ready) .hero-press .press-cell,
  html.js:not(.motion-ready) .hero-press-photos figure,
  html.js:not(.motion-ready) .page-hero:not(.al-hero) .wrap :is(.kicker,h1,.lede){
    opacity:0;animation:jbShowLate 0s linear 3s forwards;}
}
@keyframes jbShowLate{to{opacity:1;}}

/* Everything below the first section, and the footer, is filled in by
   site.js. On a tall tablet the browser can paint before that happens, and
   the sections then jump down as the lists and videos arrive. Holding them
   (still laid out, just not shown) until the script is done means they
   appear once, in place. Same 3s safety net. */
@media (max-width:900px), (hover:none) and (pointer:coarse){
  html.js:not(.motion-ready) main > :not(:first-child),
  html.js:not(.motion-ready) .about-lab-root > :not(:first-child),
  html.js:not(.motion-ready) #siteFooter{visibility:hidden;animation:jbShowLateV 0s linear 3s forwards;}
  /* the photo hero runs up under the header from the first paint, not only
     once site.js has tagged the page */
  .hero-wrap:has(> .hero-photo){margin-top:calc(-1 * var(--headH, 64px));}
}
@media (min-width:761px) and (max-width:900px), (min-width:761px) and (hover:none) and (pointer:coarse){
  .hero-wrap > .hero-photo{padding-top:var(--headH,64px);}
}
@keyframes jbShowLateV{to{visibility:visible;}}

/* tablets wide enough for the full menu: the Modern bar floats 12px clear of
   the top, so its reserved space and the hero's height include that offset;
   and the menu links get a thumb-sized hit area */
@media (min-width:901px) and (hover:none) and (pointer:coarse){
  [data-theme^="modern-"]{--headH:calc(var(--nav-h) + 14px);--headOff:12px;}
  .nav a:not(.btn){padding-block:12px;}
}