/* ============================================================
   Tail & Tonic — Information Authority · shared design system
   "In Motion" direction · brand-true (teal/gold/cream, Lora+Nunito)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900&display=swap');

:root{
  --teal:#1A6B5C; --teal-deep:#0F3D35; --teal-ink:#0B2C27;
  --gold:#D4A847; --gold-soft:#E6C879; --cream:#FFFAF5; --cream-2:#F6EEE3;
  --serif:'Lora',Georgia,serif; --sans:'Nunito Sans',system-ui,sans-serif;
  --line:rgba(255,255,255,.1); --muted:#a9c4bc; --sage:#88a89f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--teal-ink);color:#eaf3f0;overflow-x:hidden;line-height:1.5}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
em{font-style:italic;color:var(--gold)}
.wrap{max-width:1200px;margin:0 auto;padding:0 6vw}

.btn{font-family:var(--sans);font-weight:800;letter-spacing:.3px;cursor:pointer;border:none;border-radius:999px;transition:.2s;display:inline-flex;align-items:center;gap:9px;font-size:15px}
.btn-gold{background:var(--gold);color:var(--teal-ink);padding:15px 28px}
.btn-gold:hover{background:var(--gold-soft)}
.btn-out{border:1.5px solid rgba(255,255,255,.35);color:#fff;background:transparent;padding:15px 26px}
.btn-out:hover{border-color:var(--gold)}
.kicker{font-family:var(--sans);font-weight:800;letter-spacing:2.6px;text-transform:uppercase;font-size:12px;color:var(--gold-soft)}

/* ---------- shared nav ---------- */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:16px 6vw;background:rgba(11,44,39,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .logo{font-family:var(--serif);font-weight:700;font-size:23px;color:#fff;letter-spacing:1px}
/* Brand ampersand — one definition, used by the nav logo, the footer logo and
   the hero wordmark. The header logo is the brand standard for this glyph. */
.logo .amp,.wordmark .amp{color:var(--gold);font-style:italic;font-weight:500}
.nav ul{display:flex;gap:24px;list-style:none;font-weight:700;font-size:13.5px;color:var(--muted);letter-spacing:.3px}
.nav ul a:hover{color:var(--gold-soft)}
.nav .btn{padding:10px 18px;font-size:13.5px}

/* hamburger (JS-free, checkbox-driven) — hidden on desktop */
.nav-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;padding:8px 9px;margin-left:12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:rgba(255,255,255,.03)}
.hamburger span{display:block;height:2px;width:100%;background:#eaf3f0;border-radius:2px;transition:.25s}
.nav-toggle:checked ~ .nav-right .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked ~ .nav-right .hamburger span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .nav-right .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-right{display:flex;align-items:center}

@media(max-width:900px){
  .hamburger{display:flex}
  .nav ul{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(11,44,39,.98);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 6vw}
  .nav-toggle:checked ~ ul{max-height:70vh;padding:8px 6vw 18px}
  .nav ul li{width:100%;border-top:1px solid var(--line)}
  .nav ul li a{display:block;padding:15px 2px;font-size:16px}
  .nav ul li:first-child{border-top:none}
}

/* ---------- glows ---------- */
.glow{position:absolute;border-radius:50%;filter:blur(85px);animation:float 15s ease-in-out infinite;pointer-events:none}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(0,0,0,.16);padding:16px 0}
.marquee .track{display:flex;gap:48px;white-space:nowrap;animation:scroll 30s linear infinite;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--sage)}
.marquee .track b{color:var(--gold-soft);font-style:normal;font-weight:700}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
.section{padding:64px 6vw}
.shead{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.shead h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3.4vw,36px);color:#fff}
.shead .sub{color:var(--muted);font-size:15px;margin-top:6px;max-width:60ch;line-height:1.55}
.shead a.more{color:var(--gold-soft);font-weight:800;font-size:13.5px;letter-spacing:.4px;white-space:nowrap}

/* ---------- category grid ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}}
.cat{border:1px solid var(--line);border-radius:14px;padding:22px 20px;background:rgba(255,255,255,.03);transition:.2s;display:block}
.cat:hover{border-color:var(--gold);transform:translateY(-3px);background:rgba(255,255,255,.05)}
.cat .cn{font-family:var(--serif);font-weight:600;font-size:19px;color:#fff}
.cat .cd{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.5}
.cat .cs{margin-top:14px;font-size:11px;font-weight:800;letter-spacing:1px;color:var(--gold-soft);text-transform:uppercase}

/* ---------- films ---------- */
.filmgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.filmgrid{grid-template-columns:1fr}}
/* A tile is a <button>: it opens the player, it is not a link to a page.
   Hence the reset. Its gradient comes from the .g-* class beside it, which is
   defined further down and so wins over `background:none` here. */
.film{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:9/11;cursor:pointer;transition:.3s;border:1px solid rgba(255,255,255,.08);display:block;width:100%;margin:0;padding:0;font:inherit;color:inherit;text-align:left;background:none;-webkit-appearance:none;appearance:none}
.film:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* Crop the 9:16 clip low in the 9:11 tile. Centred, the tile's top edge lands
   mid-way through the caption bubble these videos burn into their opening
   seconds and shows half of it; 72% drops below the caption band. */
.film video.bg{width:100%;height:100%;object-fit:cover;object-position:center 72%;display:block}
.film .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,44,39,.18),rgba(11,44,39,.62))}
.film:hover{transform:translateY(-6px)}
.film .bg{position:absolute;inset:0}
.film .play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--teal-ink);font-size:19px;transition:.3s}
.film:hover .play{transform:scale(1.12);background:var(--gold)}
.film .info{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.82))}
/* .dur, .species and .tag are unused: Video Posts records carry no duration,
   species or pillar, so the tiles show none. Kept for the day that metadata
   exists — see the note in content/videos.json. */
.film .dur{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:6px}
.film .species{position:absolute;top:14px;left:14px;background:rgba(255,250,245,.92);color:var(--teal-ink);font-size:10.5px;font-weight:800;letter-spacing:.6px;padding:4px 10px;border-radius:999px;text-transform:uppercase}
.film .tag{font-size:10.5px;font-weight:800;letter-spacing:1.2px;color:var(--gold-soft);text-transform:uppercase}
.film h3{font-family:var(--serif);font-weight:600;font-size:17px;color:#fff;margin-top:5px;line-height:1.22}

/* ---------- article cards ---------- */
.artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.artgrid{grid-template-columns:1fr}}
.artcard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.03);transition:.25s;display:flex;flex-direction:column}
.artcard:hover{transform:translateY(-5px);border-color:rgba(212,168,71,.5)}
.artcard .thumb{aspect-ratio:16/10;position:relative}
.artcard .thumb .cat{position:absolute;top:12px;left:12px;background:rgba(11,44,39,.72);backdrop-filter:blur(4px);color:var(--gold-soft);font-weight:800;font-size:10.5px;letter-spacing:.8px;padding:5px 11px;border-radius:999px;text-transform:uppercase}
.artcard .body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.artcard h3{font-family:var(--serif);font-weight:600;font-size:20px;color:#fff;line-height:1.25}
.artcard p{color:var(--muted);font-size:14px;margin-top:10px;line-height:1.55;flex:1}
.artcard .meta{margin-top:16px;font-size:12px;font-weight:700;color:#7fa298;display:flex;align-items:center;gap:8px}
.artcard .meta .vet{color:var(--gold-soft)}

/* thumbnail gradient palette (deterministic, brand hues) */
.g-joint{background:linear-gradient(200deg,#2E8B76,#0B2C27)}
.g-calm{background:linear-gradient(200deg,#3a7fa8,#0f2f3d)}
.g-gut{background:linear-gradient(200deg,#D4A847,#7a5a16)}
.g-skin{background:linear-gradient(200deg,#5a9d5a,#123f2a)}
.g-aller{background:linear-gradient(200deg,#c98a52,#3d2410)}
.g-dental{background:linear-gradient(200deg,#2aa39a,#0b2c27)}
.g-urin{background:linear-gradient(200deg,#3f8fa0,#0f2c33)}
.g-enrich{background:linear-gradient(200deg,#a98cc4,#2c1f3d)}
.g-general{background:linear-gradient(200deg,#1A6B5C,#08211d)}

/* ---------- body/mind split ---------- */
.halves{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:820px){.halves{grid-template-columns:1fr}}
.half{position:relative;border-radius:20px;overflow:hidden;padding:38px 34px;min-height:260px;border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:flex-end}
.half.body{background:linear-gradient(160deg,#1f8c76,#0B2C27)}
.half.mind{background:linear-gradient(160deg,#3a7fa8,#0d1f2a)}
.half .k{font-family:var(--sans);font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:12px;color:rgba(255,255,255,.85)}
.half h3{font-family:var(--serif);font-weight:700;font-size:28px;color:#fff;margin:8px 0 10px}
.half p{color:rgba(255,255,255,.92);font-size:15px;line-height:1.6;max-width:42ch}
.half .tags{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.half .tags span{background:rgba(0,0,0,.24);color:#fff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px}

/* ---------- species dual ---------- */
.species-band{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:720px){.species-band{grid-template-columns:1fr}}
.sp{border:1px solid var(--line);border-radius:18px;padding:30px 32px;background:rgba(255,255,255,.03)}
.sp .k{font-family:var(--sans);font-weight:800;letter-spacing:1.6px;text-transform:uppercase;font-size:11px;color:var(--gold-soft)}
.sp h3{font-family:var(--serif);font-weight:700;font-size:22px;color:#fff;margin:4px 0 6px}
.sp p{color:var(--muted);font-size:14px;line-height:1.55}

/* ---------- method pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}
.pillar{border:1px solid var(--line);border-radius:16px;padding:28px;background:rgba(255,255,255,.03)}
.pillar .pn{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--gold-soft);letter-spacing:1px}
.pillar h3{font-family:var(--serif);font-weight:600;font-size:21px;margin:8px 0 10px;color:#fff}
.pillar p{color:var(--muted);font-size:14.5px;line-height:1.62}

/* ---------- promise / band ---------- */
.band{position:relative;overflow:hidden;padding:88px 6vw;text-align:center}
.band .inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
/* The homepage hero is an <h1> (it was an <h2>, leaving the page with no h1 at
   all). Both are styled here so the promotion changed no pixels: the explicit
   margin is the browser default for h2, which h1 does not share. */
.band h1,.band h2{font-family:var(--serif);font-weight:700;font-size:clamp(28px,4.4vw,50px);color:#fff;line-height:1.1;margin:.83em 0}
.band p{color:#c3d9d1;max-width:60ch;margin:22px auto 0;font-size:18px;line-height:1.65}
.band .indie{margin-top:26px;display:inline-flex;gap:20px;flex-wrap:wrap;justify-content:center;color:#8fb0a7;font-weight:800;font-size:13px;letter-spacing:.4px}
.band .indie b{color:var(--gold-soft)}

/* ---------- subscribe ---------- */
.subscribe{border-top:1px solid var(--line);padding:64px 6vw;text-align:center;background:rgba(0,0,0,.18)}
.subscribe .kicker{margin-bottom:14px}
.subscribe h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3.6vw,40px);color:#fff}
.subscribe p{color:var(--muted);max-width:52ch;margin:14px auto 0;font-size:16px;line-height:1.6}
.subform{margin:28px auto 0;display:flex;gap:10px;max-width:480px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:7px 7px 7px 18px}
.subform input{flex:1;border:none;background:transparent;outline:none;color:#fff;font-family:var(--sans);font-size:15px}
.subform input::placeholder{color:#7fa298}
.subform .btn-gold{padding:13px 22px;font-size:14px}
.subscribe .fine{margin-top:12px;font-size:12px;color:#6f8d84}

/* ---------- footer ---------- */
.site-foot{padding:52px 6vw 40px;border-top:1px solid var(--line)}
.site-foot .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px}
.site-foot .logo{font-family:var(--serif);font-weight:700;font-size:26px;color:#fff;letter-spacing:1px}
.site-foot .logo .t{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:14px;color:#8fb0a7;margin-top:6px;letter-spacing:0}
.site-foot .cols{display:flex;gap:52px;flex-wrap:wrap}
.site-foot .cols b{display:block;color:#fff;font-size:13px;letter-spacing:.4px;margin-bottom:10px}
.site-foot .cols a{display:block;color:var(--muted);font-size:13px;font-weight:600;margin-bottom:7px}
.site-foot .cols a:hover{color:var(--gold-soft)}
.site-foot .disc{color:#6f8d84;font-size:12px;line-height:1.7;max-width:92ch;margin-top:30px;border-top:1px solid var(--line);padding-top:22px}

/* ---------- vet-review placeholder chip ---------- */
.vet-review{display:inline-flex;align-items:center;gap:9px;border:1px dashed rgba(212,168,71,.55);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--gold-soft)}
.vet-review .tick{width:16px;height:16px;border-radius:50%;background:var(--gold);color:var(--teal-ink);display:grid;place-items:center;font-size:10px;font-weight:900}
.vet-review .ph{color:#7fa298;font-weight:600;font-style:italic}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.article-hero{position:relative;overflow:hidden;padding:60px 6vw 40px;border-bottom:1px solid var(--line)}
.article-hero .glow{width:520px;height:520px;background:#1f8c76;opacity:.34;top:-180px;right:-80px}
.article-hero .inner{position:relative;z-index:2;max-width:820px;margin:0 auto;text-align:center}
.article-hero .crumb{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-soft)}
.article-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,4.4vw,52px);color:#fff;line-height:1.1;margin:16px 0 18px;letter-spacing:-.4px}
.article-hero .dek{color:#c3d9d1;font-size:19px;line-height:1.6;max-width:60ch;margin:0 auto}
.byline{margin:26px auto 0;display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;color:#8fb0a7;font-size:13px;font-weight:700}
.byline .sep{opacity:.4}

.article-body{max-width:720px;margin:0 auto;padding:48px 6vw 20px;font-size:18px;line-height:1.75;color:#dbe8e3}
.article-body p{margin:0 0 22px}
.article-body h2{font-family:var(--serif);font-weight:700;font-size:28px;color:#fff;margin:40px 0 16px;line-height:1.2}
.article-body h3{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--gold-soft);margin:30px 0 12px}
.article-body ul{margin:0 0 24px;padding-left:0;list-style:none}
.article-body ul li{position:relative;padding-left:28px;margin-bottom:12px}
.article-body ul li::before{content:"";position:absolute;left:6px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.article-body a{color:var(--gold-soft);border-bottom:1px solid rgba(212,168,71,.4)}
.article-body a:hover{color:#fff}
.article-body .lead{font-size:20px;color:#eef6f3}
.article-body blockquote{border-left:3px solid var(--gold);padding:6px 0 6px 22px;margin:28px 0;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold-soft);line-height:1.4}
.article-body blockquote p{margin:0}

.callout{max-width:720px;margin:10px auto 30px;background:rgba(31,140,118,.12);border:1px solid rgba(46,139,118,.4);border-left:4px solid var(--gold);border-radius:12px;padding:26px 30px}
.callout .k{font-family:var(--sans);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:11px;color:var(--gold-soft);margin-bottom:12px}
.callout ul{list-style:none;padding:0;margin:0}
.callout li{position:relative;padding-left:26px;margin-bottom:10px;color:#eaf3f0;font-size:15.5px;line-height:1.55}
.callout li::before{content:"→";position:absolute;left:0;color:var(--gold);font-weight:800}

.picks{max-width:720px;margin:34px auto;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.03)}
.picks .ph{padding:22px 26px 14px}
.picks .ph .k{font-family:var(--sans);font-weight:800;letter-spacing:1.4px;text-transform:uppercase;font-size:11px;color:var(--gold-soft)}
.picks .ph h3{font-family:var(--serif);font-weight:700;font-size:22px;color:#fff;margin-top:8px}
.picks .ph p{color:var(--muted);font-size:13.5px;margin-top:8px;line-height:1.55;font-style:italic}
.pick{display:grid;grid-template-columns:40px 1fr auto;gap:16px;align-items:center;padding:18px 26px;border-top:1px solid var(--line)}
.pick .rank{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--gold)}
.pick .pn{font-weight:800;font-size:15px;color:#fff}
.pick .pn small{display:block;font-weight:600;color:var(--muted);font-size:12.5px;margin-top:2px;font-style:italic}
.pick .claim{font-size:12.5px;color:#7fa298;text-align:right;max-width:22ch}
.picks .note{padding:16px 26px 22px;color:#6f8d84;font-size:12px;line-height:1.6;font-style:italic;border-top:1px solid var(--line)}

.sources{max-width:720px;margin:0 auto;padding:22px 6vw 0}
.sources .k{font-family:var(--sans);font-weight:800;letter-spacing:1.4px;text-transform:uppercase;font-size:11px;color:var(--gold-soft);margin-bottom:10px}
.sources p{color:#8fb0a7;font-size:13px;line-height:1.65}

.related{padding:56px 6vw}
.related h2{font-family:var(--serif);font-weight:700;font-size:26px;color:#fff;margin-bottom:26px;text-align:center}

/* ============================================================
   METHOD / ABOUT PAGE
   ============================================================ */
.page-hero{position:relative;overflow:hidden;padding:60px 6vw 40px;text-align:center;border-bottom:1px solid var(--line)}
.page-hero .glow{width:520px;height:520px;background:#1f8c76;opacity:.32;top:-180px;left:50%;transform:translateX(-50%)}
.page-hero .inner{position:relative;z-index:2;max-width:820px;margin:0 auto}
.page-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,4.4vw,52px);color:#fff;line-height:1.1;margin:16px 0 18px;letter-spacing:-.4px}
.page-hero p{color:#c3d9d1;font-size:19px;line-height:1.6;max-width:60ch;margin:0 auto}

.prose-narrow{max-width:720px;margin:0 auto;padding:44px 6vw 0}
.prose-narrow h2{font-family:var(--serif);font-weight:700;font-size:28px;color:#fff;margin:40px 0 16px;line-height:1.2}
.prose-narrow p{font-size:18px;line-height:1.75;color:#dbe8e3;margin:0 0 22px}
.prose-narrow .lead{font-size:19px;color:#eef6f3}
.prose-narrow blockquote{border-left:3px solid var(--gold);padding:6px 0 6px 22px;margin:26px 0;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--gold-soft);line-height:1.42}

/* method/about document layout — left-aligned, matches the site rhythm */
.doc{padding:40px 6vw 0}
.doc h2{font-family:var(--serif);font-weight:700;font-size:clamp(24px,3vw,32px);color:#fff;margin:0 0 16px;line-height:1.2}
.doc .lead{font-size:20px;color:#eef6f3}
.doc p{font-size:18px;line-height:1.75;color:#dbe8e3;margin:0 0 20px;max-width:74ch}
.doc blockquote{border-left:3px solid var(--gold);padding:6px 0 6px 22px;margin:24px 0;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold-soft);line-height:1.4;max-width:62ch}
.doc blockquote p{margin:0;font-size:inherit;color:inherit;max-width:none}
.doc ul.points{list-style:none;padding:0;margin:0 0 22px;max-width:74ch}
.doc ul.points li{position:relative;padding-left:26px;margin-bottom:12px;font-size:16.5px;color:#eaf3f0;line-height:1.55}
.doc ul.points li::before{content:"\2192";position:absolute;left:0;color:var(--gold);font-weight:800}
.doc .panel{border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:14px;padding:26px 30px 22px;background:rgba(31,140,118,.10);max-width:74ch;margin:4px 0 24px}
.doc .panel h2{font-size:clamp(22px,2.6vw,30px);margin:0 0 12px}
.doc .panel p{margin:0 0 16px;max-width:none}
.doc .panel .indie{display:flex;gap:14px;flex-wrap:wrap;color:#8fb0a7;font-weight:800;font-size:12.5px;letter-spacing:.3px}
.doc .panel .indie b{color:var(--gold-soft)}

.advisory{max-width:720px;margin:34px auto;border:1px dashed rgba(212,168,71,.5);border-radius:16px;padding:28px 30px;background:rgba(212,168,71,.05)}
.advisory .k{font-family:var(--sans);font-weight:800;letter-spacing:1.4px;text-transform:uppercase;font-size:11px;color:var(--gold-soft);margin-bottom:10px}
.advisory h3{font-family:var(--serif);font-weight:600;font-size:22px;color:#fff;margin-bottom:8px}
.advisory p{color:var(--muted);font-size:15px;line-height:1.6}
.advisory .flag{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#7fa298}

/* ---------- two-layer claim structure (method page) ---------- */
.claim-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 24px;max-width:1000px}
@media(max-width:820px){.claim-layers{grid-template-columns:1fr}}
.layer{border:1px solid var(--line);border-radius:16px;padding:24px 24px 26px;background:rgba(255,255,255,.03);position:relative;border-top:3px solid var(--teal)}
.layer.ours{border-top-color:var(--teal)}
.layer.theirs{border-top-color:#7fa298}
.layer.judgment{border-top-color:var(--gold)}
.layer .tag{font-family:var(--sans);font-weight:800;letter-spacing:.8px;text-transform:uppercase;font-size:10.5px;color:var(--gold-soft)}
.layer.theirs .tag{color:#9fbbb2}
.layer h3{font-family:var(--serif);font-weight:600;font-size:19px;color:#fff;margin:8px 0 10px}
.layer p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}
.layer p em{color:var(--gold-soft);font-style:italic}

/* ---------- "Body & mind" wordmark ----------
   Follows the HEADER LOGO lockup (.nav .logo), which is the brand standard —
   Lora, weight 700, letter-spacing 1px — not the marquee strip, whose ampersand
   is upright/700/--gold-soft and whose words are both italic. The ampersand here
   is the logo's own .amp rule, shared above rather than copied. Both words are
   white/upright/700 exactly as the logo's own words are — the logo draws no
   distinction between "Tail" and "Tonic", so neither does this. The hero
   instance inherits its parent's display size, so it scales with the headline
   clamp instead of fixing a size. */
.wordmark{font-family:var(--serif);font-weight:700;letter-spacing:1px;color:#fff;font-style:normal}

/* ---------- nav search (client-side, no backend) ----------
   Collapsed to an icon until focused/opened, so the nav keeps its spacing.
   Below 900px it sits inside the hamburger panel rather than the top strip. */
.nav-search{position:relative;display:flex;align-items:center;margin-left:18px}
.nav-search .ns-toggle{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;transition:.2s;flex:none}
.nav-search .ns-toggle:hover{color:var(--gold-soft);border-color:var(--gold)}
.nav-search .ns-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.nav-search input{width:0;opacity:0;padding:0;border:1px solid transparent;background:rgba(0,0,0,.25);
  border-radius:999px;color:#eaf3f0;font-family:var(--sans);font-size:13.5px;font-weight:600;
  transition:width .22s ease,opacity .18s ease,padding .22s ease;pointer-events:none}
.nav-search input::placeholder{color:#6f8d84}
.nav-search input:focus{outline:none}
.nav-search.open input{width:210px;opacity:1;padding:9px 14px;border-color:var(--line);pointer-events:auto;margin-left:8px}
.nav-search.open input:focus{border-color:var(--gold)}
.nav-search.open .ns-toggle{color:var(--gold-soft)}

.ns-results{position:absolute;top:calc(100% + 10px);right:0;width:min(420px,86vw);max-height:min(60vh,420px);
  overflow-y:auto;background:rgba(11,44,39,.98);backdrop-filter:blur(12px);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.45);padding:6px;display:none;z-index:80}
.ns-results.show{display:block}
.ns-results li{list-style:none}
.ns-results a{display:block;padding:10px 13px;border-radius:9px;color:#eaf3f0}
.ns-results a small{display:block;color:var(--muted);font-size:12px;margin-top:3px;font-weight:600}
.ns-results a .ns-kind{font-family:var(--sans);font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  font-size:10px;color:var(--gold-soft);display:block;margin-bottom:4px}
.ns-results a:hover,.ns-results a:focus,.ns-results li.sel a{background:rgba(212,168,71,.14);outline:none}
.ns-empty{padding:14px 13px;color:var(--muted);font-size:13.5px}

@media(max-width:900px){
  /* Keep the compact icon in the top strip; expanding drops a full-width bar
     beneath the nav instead of widening it, so the strip can never overflow.
     .nav-search goes static so .ns-results resolves against .nav. */
  .nav-search{position:static;margin-left:auto;margin-right:6px}
  .nav-search.open input{position:absolute;top:100%;left:0;right:0;width:auto;margin:0;
    padding:14px 6vw;border-radius:0;border-left:none;border-right:none;background:rgba(11,44,39,.98)}
  .ns-results{top:calc(100% + 52px);left:0;right:0;width:auto;border-radius:0;border-left:none;
    border-right:none;max-height:50vh}
}

/* The results list is inside <nav>, so the .nav ul rules would otherwise capture
   it — flex row on desktop, and (worse) the collapsed max-height:0 drawer on
   mobile, which hid results entirely. Re-assert list layout at higher specificity. */
.nav .ns-results ul{display:block;position:static;flex-direction:column;gap:0;max-height:none;
  overflow:visible;padding:0;margin:0;background:none;border:none;backdrop-filter:none;
  font-size:14px;font-weight:600;color:#eaf3f0;letter-spacing:normal}
.nav .ns-results ul li{width:auto;border-top:none}
.nav .ns-results ul li a{display:block;padding:10px 13px;font-size:14px;line-height:1.35}

/* ---------- video lightbox ---------- */
/* The clips are vertical 1080x1920. The player is sized off max-height so a
   portrait video fills the screen top-to-bottom instead of being letterboxed
   into a 16:9 box. public/videos.js builds this markup on the first click. */
html.vlb-open{overflow:hidden}
.vlb{position:fixed;inset:0;z-index:200;display:grid;place-items:center}
.vlb[hidden]{display:none}
.vlb-back{position:absolute;inset:0;background:rgba(4,20,17,.88);backdrop-filter:blur(6px)}
.vlb-box{position:relative;display:grid;justify-items:center;gap:14px;padding:24px;max-width:100%}
.vlb-v{display:block;width:auto;max-width:min(92vw,430px);max-height:76vh;border-radius:14px;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.vlb-t{max-width:min(92vw,430px);margin:0;text-align:center;font-family:var(--serif);font-size:17px;line-height:1.3;color:#fff}
.vlb-x{position:fixed;top:16px;right:18px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,250,245,.92);color:var(--teal-ink);font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center}
.vlb-x:hover{background:var(--gold)}
.vlb-x:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:640px){.vlb-v{max-height:70vh}.vlb-box{padding:16px}}