/* ==========================================================================
   The SEO Godfather: phone layer (r9)
   Loaded after site.css and pages.css. Phones only. Larger type, brighter
   secondary text, clear section breaks, and cards where lists used to run
   together. Desktop is untouched.
   ========================================================================== */
@media (max-width:768px){

/* ---------- tokens: brighter secondary text, taller header ---------- */
:root{--bone2:#ddd4c4;--muted:#aca395;--hair:rgba(236,228,214,.16);--header-h:72px}
body{font-size:17px;line-height:1.65}

/* ---------- header: bigger logo ---------- */
.brand img,.site-header.is-scrolled .brand img{height:52px}
.site-header.is-scrolled{height:var(--header-h)}
.icon-btn{width:46px;height:46px}

/* ---------- type scale ---------- */
.h2,.cta-band h2{font-size:clamp(42px,11.8vw,52px);line-height:1.02;margin-bottom:20px}
.lede{font-size:18.5px;line-height:1.6;color:var(--bone2)}
.eyebrow{font-size:13.5px;letter-spacing:.22em;color:var(--gold-hi);margin-bottom:18px;gap:12px}
.eyebrow::before{width:26px}
h3{letter-spacing:0}

/* every small-caps label: up from 9 to 11px */
.glance dd,.glance-dl dt,.fact h3,.frame figcaption,.vol__go,.wcard__go,.wcard__meta,.aud__cap,.fam__tag,
.split__tag,.rec__ko-cap,.foot h4,.aud__quote cite,.oath cite,.askai__link,.code__foot small,.dossier__head,
.making__reel b,.svc b,.toolbar b,.src b,.vcard__top,.details__lbl,.f label,.vcount,.game__bar,.rank small,
.pb-hero__count span,.dossier__label,.town__label-illus,.town__empty,.dossier__score span,.legal,.marker,
.town__q span,.town__go span,.dossier__head span,.phone__note,.split__handle span{
  font-size:12.5px;letter-spacing:.16em}
.glance dd,.glance-dl dt,.frame figcaption,.foot h4,.wcard__meta,.vcount,.dossier__score span{color:var(--bone2)}
.town__label-illus,.town__empty{color:var(--muted)}

/* body copy inside components */
.svc p,.fact p,.wcard p,.vcard__why,.making__reel span,.sit__list li,.game__why,.qlist p,.leaks li{font-size:16.5px;line-height:1.55}
.vol__meta{font-size:15.5px}
.glance-dl dd{font-size:16.5px}
.qa summary{font-size:22px;padding:24px 0}
.qa details p{font-size:17px;line-height:1.65}
.hero__sub,.pb-hero__sub{font-size:17.5px;line-height:1.55;color:var(--bone)}
.aud__quote{font-size:23px}
.foot ul{gap:12px;font-size:16.5px}
.foot__tag{font-size:16px}

/* buttons: easier to hit, easier to read */
.btn{min-height:56px;font-size:13px;letter-spacing:.17em;padding:0 22px}
.btn--sm{min-height:48px;font-size:12.5px}
.runrow .btn{min-height:52px;font-size:12.5px}

/* ---------- section rhythm and visual breaks ---------- */
.ch,.tool{padding:96px 0}
.tool--page{padding-top:calc(var(--header-h) + 48px)}
.ch--first{padding-top:calc(var(--header-h) + 48px)}
.cta-band{padding:96px 0}

/* every section after the first gets a gold hairline and a diamond on the seam */
main > section + section{border-top:1px solid rgba(217,164,65,.22)}
main > section + section::before{content:"";position:absolute;top:0;left:50%;z-index:5;width:9px;height:9px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--gold);
  box-shadow:0 0 0 6px var(--ink),0 0 18px rgba(217,164,65,.55);pointer-events:none}
main > section{position:relative}
/* sections without their own background alternate between two tones */
main > section.ch:nth-child(even):not(.making):not(.sit):not(.fam):not(.code):not(.oath),
main > section.tool:not(.tool--alt):nth-child(even){background:#0f0e0c}

/* ---------- hero: legible copy over video ---------- */
.hero__media::after{background:linear-gradient(0deg,rgba(6,6,6,.97) 0%,rgba(6,6,6,.82) 30%,rgba(6,6,6,.25) 52%,rgba(6,6,6,0) 64%)}
.hero__sub{text-shadow:0 2px 16px rgba(0,0,0,1)}

/* ---------- at a glance: bigger numbers, clear rows ---------- */
.glance{padding:40px 0}
.glance dt{font-size:36px}
.glance dl{row-gap:26px}

/* ---------- services: cards instead of one long list ---------- */
.svc{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;border-top:0}
.svc article,.svc article:not(:nth-child(3n+1)),.svc article:nth-child(even){
  padding:22px 20px 24px;border:1px solid rgba(217,164,65,.18);border-left:3px solid var(--gold);
  background:linear-gradient(160deg,#151310,#0b0a09)}
.svc article::before{display:none}
.svc h3{font-size:27px;margin:8px 0 8px}

/* ---------- facts, reels, cards ---------- */
.fact b{font-size:54px}
.making__reel{gap:28px}
.making__reel strong{font-size:24px}
.wgrid{gap:0}
.wcard{padding:28px 0 30px}
.wcard h3{font-size:25px}
.wcard__img{margin-bottom:16px}
.vol h3{font-size:22px}
.shelf{row-gap:34px}
.arm,.arm:hover{padding:30px 24px;transform:none;box-shadow:0 0 0 1px rgba(217,164,65,.38)}   /* same border on every card; a tap no longer leaves one card lit */
.vcard,.vcard:hover{transform:none;box-shadow:0 0 0 1px rgba(217,164,65,.22)}

/* ---------- the town tool ---------- */
.town__line{font-size:24px}
.dos{padding:12px 0}
.dos__n{font-size:17px}
.dossier__verdict{font-size:19px}

/* ---------- the record and the oath ---------- */
.rec__ko-cap{letter-spacing:.32em;text-indent:.32em}
.oath blockquote{font-size:32px}

/* ---------- inner pages ---------- */
.pb-hero h1{font-size:clamp(54px,15vw,72px)}
.tool__head{gap:4px}
.toolbar strong{font-size:21px}
.toolbar span{font-size:15px}
.toolbar a{padding:24px 18px}
.bookcopy p{font-size:17.5px}
.bookcopy h3{font-size:28px;margin-top:40px}

/* ---------- Chapter II: on phones the letterbox is a plain open frame, not a thin strip ---------- */
.fam{height:auto}
.fam__stage{position:relative;height:auto;overflow:visible;display:flex;flex-direction:column;gap:26px;padding:96px 0}
.fam__line,.fam__line--top,.fam__line--bot{position:static;left:auto;right:auto;padding:0 var(--edge);font-size:clamp(30px,8.6vw,38px)}
.fam__line--bot{opacity:1;transform:none;align-items:flex-start;text-align:left;justify-content:flex-start}
.fam__slit{position:relative;top:auto;left:auto;right:auto;height:auto;aspect-ratio:4/5;clip-path:none!important}

/* ---------- tool controls ---------- */
.mini{font-size:12.5px;min-height:44px;padding:0 14px}
.seg button{font-size:12.5px;min-height:44px}
.bull__msg{font-size:12.5px}
.mark{font-size:11px}
.split__pre{font-size:12.5px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid rgba(217,164,65,.22)}
.foot{row-gap:34px}
.legal{font-size:14px}
}
@media (max-width:768px){.svc__media{margin:-22px -20px 18px -20px;box-shadow:none}}