/* ============================================================
   DOUG KRIEGEL — "EBBETS FIELD, MODERNIZED" brand system
   Ink #101613 · Cream #F5EEDD · Schaefer Red #B02E24
   Brass #C9A227 · Heritage Blue #005596 (accent only) · Stone #8A8378
   ============================================================ */
:root{
  --ink:#101613; --ink2:#1a211c; --cream:#F5EEDD; --cream2:#efe4c8;
  --red:#B02E24; --red-d:#8e231b; --brass:#C9A227; --brass-l:#e3c566;
  --blue:#005596; --stone:#8A8378; --chalk:#FBF8F1;
  --serif:"Playfair Display",Georgia,serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --cond:"Oswald","Arial Narrow",sans-serif;
  --script:"Yellowtail",cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{background:var(--cream);color:var(--ink);font-family:var(--body);
  font-size:19px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--red-d)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--serif);font-weight:800;line-height:1.12;color:var(--ink)}
.eyebrow{font-family:var(--cond);letter-spacing:.24em;text-transform:uppercase;
  font-size:.82rem;font-weight:600;color:var(--red)}
.eyebrow.on-dark{color:var(--brass-l)}
.script{font-family:var(--script);font-weight:400;color:var(--red)}
.lede{font-size:1.28rem;line-height:1.6}
/* ---------- buttons: ONE system on every page ----------
   Primary = Schaefer red solid. Secondary = outline (ink on light,
   chalk on dark). Every button: 56px min-height, 16/30 padding, 4px radius,
   Oswald uppercase letterspaced. */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--cond);font-weight:600;letter-spacing:.12em;line-height:1.25;
  text-transform:uppercase;font-size:1.02rem;text-decoration:none;cursor:pointer;
  padding:16px 30px;min-height:56px;border-radius:4px;border:2px solid transparent;
  transition:transform .18s ease,background .18s ease,color .18s ease}
.btn-red{background:var(--red);color:var(--chalk)}
.btn-red:hover{background:var(--red-d);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-ghost.on-dark{color:var(--chalk);border-color:var(--chalk)}
.btn-ghost.on-dark:hover{background:var(--chalk);color:var(--ink)}
.btn-group{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.center .btn-group{justify-content:center}

/* ---------- line-score scroll progress (integrated in the sticky header) ---------- */
.linescore{background:var(--ink);color:var(--chalk);font-family:var(--cond);
  border-top:1px solid #2c352f}
.linescore .ls-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;
  gap:2px;padding:4px 14px;font-size:.78rem;letter-spacing:.08em}
.ls-team{font-weight:700;color:var(--brass-l);margin-right:8px;white-space:nowrap}
.ls-cell{flex:1;text-align:center;padding:3px 0;border-left:1px solid #2c352f;color:#9fb3a4}
.ls-cell.lit{color:var(--ink);background:var(--brass);font-weight:700}
.ls-rhe{color:var(--chalk);font-weight:700}
@media(max-width:640px){.ls-team{display:none}.linescore .ls-in{font-size:.72rem}}

/* ---------- header / nav ---------- */
header.site{position:sticky;top:0;z-index:100;background:var(--ink);
  border-bottom:3px solid var(--brass)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1300px;margin:0 auto;padding:12px 22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand .mono{width:48px;height:48px;border:2px solid var(--brass);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);
  font-weight:900;color:var(--brass-l);font-size:1.05rem;flex:none}
.brand .bname{font-family:var(--serif);font-weight:800;color:var(--chalk);
  font-size:1.28rem;letter-spacing:.02em;line-height:1.05}
.brand .bsub{font-family:var(--cond);color:var(--brass-l);font-size:.68rem;
  letter-spacing:.26em;text-transform:uppercase}
nav.main{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
nav.main a{font-family:var(--cond);color:var(--chalk);text-decoration:none;
  letter-spacing:.08em;text-transform:uppercase;font-size:.92rem;font-weight:500;
  padding:12px 9px;min-height:48px;display:inline-flex;align-items:center;border-radius:3px}
nav.main a:hover{color:var(--brass-l)}
nav.main a[aria-current="page"]{color:var(--brass-l);box-shadow:inset 0 -3px 0 var(--brass)}
.nav a.nav-cta{background:var(--red);color:var(--chalk);font-weight:600;margin-left:10px;
  font-family:var(--cond);text-decoration:none;letter-spacing:.1em;text-transform:uppercase;
  font-size:.92rem;padding:12px 16px;min-height:48px;display:inline-flex;align-items:center;border-radius:4px}
.nav a.nav-cta:hover{background:var(--red-d);color:var(--chalk)}
@media(max-width:820px){ nav.main a{padding:10px 8px;font-size:.84rem} .brand .bsub{display:none} }

/* ---------- compact phone header: slim bar + one scrollable nav row ---------- */
@media(max-width:700px){
  .nav{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand cta" "nav nav";
    align-items:center;gap:1px 12px;padding:7px 14px 3px}
  .brand{grid-area:brand;gap:9px;min-height:44px}
  .brand .mono{width:36px;height:36px;font-size:.85rem}
  .brand .bname{font-size:1.04rem}
  .nav a.nav-cta{grid-area:cta;margin-left:0;padding:10px 15px;min-height:44px;font-size:.85rem}
  nav.main{grid-area:nav;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;max-width:100%}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{white-space:nowrap;padding:9px 10px;min-height:44px;font-size:.84rem}
  .linescore .ls-in{padding:3px 12px;font-size:.7rem}
}

/* ---------- generic sections ---------- */
section{padding:100px 0}
.sec-dark{background:var(--ink);color:var(--chalk)}
.sec-dark h1,.sec-dark h2,.sec-dark h3{color:var(--chalk)}
.sec-paper{background:var(--cream)}
.sec-paper2{background:var(--cream2)}
.sec-red{background:var(--red);color:var(--chalk)}
.sec-red h2{color:var(--chalk)}
.kicker-rule{width:74px;height:4px;background:var(--brass);margin:16px 0 26px}
/* section headings: ONE scale — eyebrow/script sits 12px above,
   18px of air below, on every page */
.h-sec{font-size:clamp(1.9rem,4vw,2.6rem);margin:12px 0 18px}
.h-sec-lg{font-size:clamp(2rem,4.4vw,3rem);margin:12px 0 18px}
.h-sec-sm{font-size:clamp(1.8rem,3.6vw,2.4rem);margin:12px 0 18px}
.h-finale{font-size:clamp(2.1rem,5vw,3.4rem);margin:12px 0 18px}
.center{text-align:center}
.center .kicker-rule{margin-left:auto;margin-right:auto}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
@media(max-width:860px){.two-col{grid-template-columns:1fr} section{padding:72px 0}}
.duo{filter:sepia(.42) contrast(1.05) brightness(.97);border:6px solid var(--chalk);
  box-shadow:0 18px 44px rgba(16,22,19,.28)}
.caption{font-family:var(--cond);font-size:.85rem;letter-spacing:.1em;color:var(--stone);
  text-transform:uppercase;margin-top:12px}
.sec-dark .caption{color:#b9c4ba}

/* ---------- page hero (inner pages) ---------- */
.page-hero{background:var(--ink);color:var(--chalk);padding:74px 0 64px;position:relative;overflow:hidden}
.page-hero:before{content:"";position:absolute;inset:0;opacity:.14;
  background-image:radial-gradient(var(--chalk) 1px,transparent 1.4px);background-size:22px 22px}
.page-hero .wrap{position:relative}
.page-hero h1{color:var(--chalk);font-size:clamp(2.3rem,5.4vw,3.9rem);max-width:16ch}
.page-hero .lede{color:#e8e2cd;max-width:56ch;margin-top:18px}
.page-hero .script{font-size:clamp(1.7rem,3.4vw,2.5rem);color:var(--brass-l)}

/* ---------- HERO (home): static editorial — the real 1913 photograph
   over a newspaper title panel. No scroll tricks, no pinned sections. ---------- */
.hero{background:var(--cream)}
.hero-photo{display:block;width:100%;height:clamp(250px,54vw,540px);object-fit:cover;
  object-position:50% 32%;filter:sepia(.42) contrast(1.05) brightness(.98)}
/* desktop/tablet: show the full 1913 rotunda photograph as a mounted plate —
   the cover-crop at laptop widths cut the building to a middle slice (Xavier, 2026-11-08) */
@media(min-width:701px){
  .hero-photo{width:min(1024px,100%);height:auto;margin:0 auto}
}
.hero-panel{text-align:center;max-width:900px;margin:0 auto;padding:44px 22px 48px}
.hero-panel .script{font-size:clamp(1.9rem,4.6vw,3.1rem);display:block}
.hero-panel h1{font-size:clamp(2.4rem,6.8vw,4.8rem);letter-spacing:.01em;
  text-transform:uppercase;line-height:.98;margin-top:6px}
.hero-panel h1 .thin{display:block;font-size:.42em;letter-spacing:.34em;font-weight:700;
  font-family:var(--cond);color:var(--red);margin-top:16px}
.hero-panel .lede{max-width:56ch;margin:20px auto 28px}
.hero-panel .btn-group{justify-content:center}

/* ---------- stat band ---------- */
.statband{background:var(--ink);border-top:4px solid var(--brass);border-bottom:4px solid var(--brass)}
.statband .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding-top:38px;padding-bottom:38px}
.stat{text-align:center;color:var(--chalk);padding:6px 4px}
.stat .num{font-family:var(--serif);font-weight:900;font-size:clamp(2rem,4.6vw,3.2rem);
  color:var(--brass-l);line-height:1}
.stat .lbl{font-family:var(--cond);letter-spacing:.16em;text-transform:uppercase;
  font-size:.8rem;color:#cfd6c9;margin-top:9px;text-wrap:balance}
.eyebrow,.c-k,.t-no,.caption{text-wrap:balance}
.nb{white-space:nowrap}
@media(max-width:860px){.statband .wrap{grid-template-columns:repeat(2,1fr);gap:24px}
  .stat:last-child{grid-column:1/-1}}

/* ---------- chapter reveal ---------- */
.chapter-lines{max-width:760px;margin:0 auto;font-size:1.24rem;line-height:1.85}
.chapter-lines p{margin-bottom:1.3em}
.chapter-lines .beat{font-family:var(--script);font-size:2rem;color:var(--red);
  text-align:center;margin:1.1em 0 .7em;line-height:1.2}
.dropcap:first-letter{font-family:var(--serif);font-weight:900;font-size:3.4em;
  float:left;line-height:.82;padding:8px 12px 0 0;color:var(--red)}

/* ---------- masthead strip (home): the frame for everything Doug does ---------- */
.masthead{background:var(--ink);color:var(--chalk);text-align:center;
  padding:36px 22px;border-top:4px solid var(--brass);border-bottom:4px solid var(--brass)}
.mast-line{font-family:var(--serif);font-weight:800;line-height:1.15;
  font-size:clamp(1.55rem,3.8vw,2.4rem);color:var(--chalk)}
.mast-sub{margin:12px auto 0;max-width:62ch;font-size:1.06rem;color:#e8e2cd}

/* ---------- the hub: Everything Doug Publishes (home) ---------- */
.hub-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.hub-grid{grid-template-columns:1fr}}
.hub-card img{height:215px}
/* typographic slate for the Films hub card — no truthful production photo exists in Doug's uploads */
.hub-card .film-slate{margin:-26px -24px 18px;height:215px;background:var(--ink);color:var(--chalk);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px}
.film-slate .fs-script{font-family:var(--script);font-weight:400;font-size:2.1rem;line-height:1.1;color:var(--brass-l)}
.film-slate .fs-rule{width:56px;height:3px;background:var(--red)}
.film-slate .fs-name{font-family:var(--cond);letter-spacing:.22em;text-transform:uppercase;font-size:.82rem;color:#cfd6c9}

/* ---------- how Doug gets paid (subscribe) ---------- */
.pay-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
@media(max-width:980px){.pay-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pay-steps{grid-template-columns:1fr}}
.pay-step{border-top:3px solid var(--brass);padding-top:18px;text-align:left}
.pay-step .p-num{font-family:var(--serif);font-weight:900;font-size:2.4rem;
  color:var(--brass-l);line-height:1}
.pay-step h3{font-size:1.22rem;margin:10px 0 8px;color:var(--chalk)}
.pay-step p{font-size:1rem;line-height:1.55;color:#cfd6c9}
/* home subscribe: three steps, bigger plainer type */
.pay-steps.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.pay-steps.three{grid-template-columns:1fr}}
.pay-steps.three .pay-step h3{font-size:1.35rem}
.pay-steps.three .pay-step p{font-size:1.12rem;line-height:1.6}
/* vendor credential line (home) — the old stat band, folded into one line */
.cred-line{font-family:var(--cond);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:1.02rem;color:var(--red-d);margin-top:22px;line-height:1.7}
/* Doug's Other Work (home): compact link rows instead of hub cards */
.work-rows{max-width:880px;margin:6px auto 0;text-align:left}
.work-row{display:flex;align-items:baseline;gap:20px;padding:24px 8px;
  border-top:2px solid rgba(16,22,19,.16);text-decoration:none;color:var(--ink)}
.work-row:last-child{border-bottom:2px solid rgba(16,22,19,.16)}
.work-row:hover .w-name{color:var(--red-d)}
.w-name{font-family:var(--serif);font-weight:800;font-size:1.4rem;flex:none;min-width:220px}
.w-desc{flex:1;font-size:1.06rem;line-height:1.55}
.w-go{font-family:var(--cond);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  font-size:.98rem;color:var(--red-d);flex:none;white-space:nowrap}
@media(max-width:700px){.work-row{flex-wrap:wrap;gap:4px 16px;padding:20px 4px}
  .w-name{min-width:0;font-size:1.3rem}.w-desc{flex-basis:100%}}

/* ---------- ticket stubs ---------- */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;margin-top:40px}
.ticket{background:var(--chalk);border:2px solid var(--ink);border-radius:8px;position:relative;
  padding:24px 22px 20px;text-align:left;cursor:pointer;width:100%;font-family:var(--body);
  box-shadow:4px 5px 0 rgba(16,22,19,.85);transition:transform .16s ease,box-shadow .16s ease}
.ticket:hover{transform:translateY(-4px);box-shadow:6px 10px 0 rgba(16,22,19,.85)}
.ticket:before,.ticket:after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;
  background:var(--cream);border:2px solid var(--ink);top:50%;transform:translateY(-50%)}
.ticket:before{left:-13px}.ticket:after{right:-13px}
.sec-dark .ticket:before,.sec-dark .ticket:after{background:var(--ink)}
.ticket .t-no{font-family:var(--cond);letter-spacing:.2em;font-size:.75rem;color:var(--stone);text-transform:uppercase}
.ticket h3{font-size:1.28rem;margin:8px 0 8px;line-height:1.25}
.ticket p{font-size:.98rem;line-height:1.5;color:#3c443d}
.ticket .t-foot{margin-top:14px;display:flex;justify-content:space-between;align-items:center;
  border-top:2px dashed var(--stone);padding-top:12px}
.badge{font-family:var(--cond);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 10px;border-radius:3px}
.badge.free{background:var(--blue);color:var(--chalk)}
.badge.sub{background:var(--brass);color:var(--ink)}
.ticket .t-open{font-family:var(--cond);font-size:.82rem;letter-spacing:.1em;color:var(--red);
  text-transform:uppercase;font-weight:600}

/* ---------- modal reader ---------- */
.modal-back{position:fixed;inset:0;background:rgba(10,14,11,.82);z-index:200;
  display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:26px 14px}
.modal-back.open{display:flex}
.modal{background:var(--cream);max-width:760px;width:100%;border-radius:8px;
  border-top:10px solid var(--red);padding:44px clamp(22px,5vw,54px);position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.modal .m-close{position:absolute;top:12px;right:12px;width:52px;height:52px;border-radius:50%;
  border:2px solid var(--ink);background:var(--chalk);font-size:1.35rem;cursor:pointer;line-height:1}
.modal h2{font-size:clamp(1.7rem,4vw,2.4rem);margin:6px 0 4px}
.modal .m-by{font-family:var(--cond);letter-spacing:.16em;text-transform:uppercase;
  font-size:.82rem;color:var(--stone);margin-bottom:22px}
.modal .m-body{font-size:1.16rem;line-height:1.8}
.modal .m-body p{margin-bottom:1.15em}
.modal .m-body .beat{font-family:var(--script);font-size:1.8rem;color:var(--red);text-align:center;margin:1em 0 .5em}
.modal .m-cta{margin-top:28px;border-top:2px dashed var(--stone);padding-top:24px;text-align:center}
@media(max-width:640px){.modal-back{padding:16px 8px}.modal{padding:40px 20px 30px}}

/* ---------- timeline (about) ---------- */
.timeline{position:relative;max-width:860px;margin:0 auto;padding-left:34px}
.timeline:before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:4px;
  background:linear-gradient(180deg,var(--brass),var(--red))}
.tstop{position:relative;padding:22px 0 22px 18px}
.tstop:before{content:"";position:absolute;left:-34px;top:32px;width:22px;height:22px;
  border-radius:50%;background:var(--cream);border:4px solid var(--red)}
.tstop .t-year{font-family:var(--cond);font-weight:700;letter-spacing:.14em;color:var(--red);
  font-size:1rem;text-transform:uppercase}
.tstop h3{font-size:1.55rem;margin:4px 0 8px}
.tstop p{max-width:62ch}

/* ---------- cards (stories / film) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:40px}
.card{background:var(--chalk);border:1px solid #ddd2b2;border-top:6px solid var(--brass);
  border-radius:6px;padding:26px 24px;text-decoration:none;color:var(--ink);display:flex;
  flex-direction:column;transition:transform .16s ease,box-shadow .16s ease}
a.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(16,22,19,.18)}
.card .c-k{font-family:var(--cond);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.card h3{font-size:1.35rem;margin:9px 0 9px;line-height:1.3}
.card p{font-size:1rem;line-height:1.55;color:#3c443d;flex:1}
.card .c-go{margin-top:16px;font-family:var(--cond);letter-spacing:.1em;font-size:.85rem;
  text-transform:uppercase;font-weight:600;color:var(--red)}
.card img{margin:-26px -24px 18px;width:calc(100% + 48px);max-width:none;height:170px;object-fit:cover;
  filter:sepia(.35) contrast(1.04)}

/* ---------- compare (subscribe) ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
@media(max-width:820px){.compare{grid-template-columns:1fr}}
.plan{background:var(--chalk);color:var(--ink);border:2px solid var(--ink);border-radius:8px;padding:34px 30px}
.plan.paid{border-color:var(--brass);box-shadow:8px 10px 0 rgba(201,162,39,.35)}
.plan h3{font-size:1.6rem;color:var(--ink)}
.plan .price{font-family:var(--serif);font-weight:900;font-size:2.3rem;margin:10px 0 4px}
.plan ul{list-style:none;margin:18px 0 6px}
.plan li{padding:9px 0 9px 30px;position:relative;border-bottom:1px dashed #d8cc9f;font-size:1.05rem}
.plan li:before{content:"◆";position:absolute;left:2px;color:var(--brass);font-size:.8rem;top:14px}
.plan li:last-child{border-bottom:none}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#cfd6c9;padding:56px 0 40px;border-top:4px solid var(--brass)}
footer.site .f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
@media(max-width:820px){footer.site .f-grid{grid-template-columns:1fr}}
footer.site h4{font-family:var(--cond);color:var(--brass-l);letter-spacing:.2em;
  text-transform:uppercase;font-size:.85rem;margin-bottom:14px}
footer.site a{color:var(--chalk);text-decoration:none}
footer.site a:hover{color:var(--brass-l)}
footer.site li{list-style:none}
footer.site li a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0}
footer.site .f-brand{font-family:var(--serif);color:var(--chalk);font-size:1.5rem;font-weight:800}
footer.site .f-fine{margin-top:36px;border-top:1px solid #2c352f;padding-top:18px;
  font-size:.9rem;color:#93a294}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001s!important;transition-duration:.001s!important}
}

/* ---------- ticket stubs used as links ---------- */
a.ticket{display:block;color:var(--ink);text-decoration:none}

/* ---------- IO scroll reveals (transform/opacity only) ---------- */
html.io [data-fade]{opacity:0;transform:translateY(30px);
  transition:opacity .7s ease,transform .7s ease}
html.io [data-fade].in{opacity:1;transform:none}
html.io [data-reveal-lines] p{opacity:.14;transform:translateY(22px);
  transition:opacity .7s ease,transform .7s ease}
html.io [data-reveal-lines] p.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.io [data-fade],html.io [data-reveal-lines] p{opacity:1;transform:none;transition:none}
}

/* ---------- phone hero: compact title panel under the photograph ---------- */
@media(max-width:700px){
  .hero-panel{padding:32px 18px 36px}
  .hero-panel .script{font-size:1.6rem}
  .hero-panel h1{font-size:2.15rem}
  .hero-panel h1 .thin{margin-top:10px;letter-spacing:.22em}
  .hero-panel .lede{font-size:1.1rem;line-height:1.55;margin:16px auto 24px}
}

/* ---------- phone spacing tightening (client: "too much blank space")
   Mobile only (<=700px); desktop rules untouched. Whitespace values cut
   roughly a third. Kept last in the sheet for cascade safety.
   The section !important beats the two inline padding-top:56px section
   styles (about/film) at phone widths only. ---------- */
@media(max-width:700px){
  section{padding:40px 0 !important}
  .page-hero{padding:46px 0 40px}
  .page-hero .lede{margin-top:12px}
  .kicker-rule{margin:12px 0 18px}
  .two-col{gap:30px}
  .caption{margin-top:8px}
  .statband .wrap{padding-top:25px;padding-bottom:25px;gap:16px}
  .stat .lbl{margin-top:6px}
  .masthead{padding:28px 18px}
  .hub-card img{height:190px}
  .hub-card .film-slate{margin:-20px -18px 14px;height:190px}
  .pay-steps{margin-top:28px;gap:18px}
  .chapter-lines p{margin-bottom:1.05em}
  .chapter-lines .beat{margin:.85em 0 .55em}
  .shelf{margin-top:28px;gap:18px}
  .ticket{padding:18px 18px 15px}
  .ticket .t-foot{margin-top:10px;padding-top:9px}
  .cards{margin-top:28px;gap:18px}
  .card{padding:20px 18px}
  .card img{margin:-20px -18px 14px;width:calc(100% + 36px)}
  .card .c-go{margin-top:12px}
  .tstop{padding:14px 0 14px 16px}
  .tstop:before{top:24px}
  .tstop h3{margin:3px 0 6px}
  .compare{margin-top:28px;gap:18px}
  /* buttons on phone: groups stack full-width with even 12px gaps;
     lone page CTAs span their container — no half-width orphans */
  .btn-group{flex-direction:column;align-items:stretch;width:100%}
  section .btn,.modal-back .btn{display:flex;width:100%}
  .plan{padding:24px 20px}
  .plan ul{margin:12px 0 4px}
  footer.site{padding:38px 0 28px}
  footer.site .f-grid{gap:24px}
  footer.site .f-fine{margin-top:24px;padding-top:14px}
  .modal{padding:32px 18px 24px}
  .modal .m-by{margin-bottom:16px}
  .modal .m-cta{margin-top:20px;padding-top:18px}
}

/* ================= PRODUCTION ADDITIONS (2026-11-10) ================= */
/* Photo gallery (stories.html) */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:40px}
.gallery figure{margin:0;background:#fffdf6;border:1px solid #e3d9bd;padding:12px 12px 16px;box-shadow:0 2px 10px rgba(16,22,19,.08)}
.gallery img{width:100%;height:220px;object-fit:cover;display:block}
.gallery figcaption{margin-top:12px;font-size:1rem;line-height:1.5;color:#3c443d}
/* Video-link blocks (film.html) — Doug sends watch links; slots swap to anchors */
.video-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:40px;text-align:left}
.vslot{background:#fffdf6;border:1px solid #e3d9bd;border-top:4px solid var(--red,#B02E24);padding:24px}
.vslot h3{margin:8px 0 10px}
.vslot p{font-size:1.05rem;line-height:1.6}
.v-state{display:inline-block;margin-top:14px;font-family:var(--cond,'Oswald',sans-serif);letter-spacing:.06em;
  font-size:.95rem;color:var(--red,#B02E24);border:1px dashed var(--red,#B02E24);padding:6px 12px;border-radius:3px}
a.v-watch{display:inline-block;margin-top:14px;font-family:var(--cond,'Oswald',sans-serif);letter-spacing:.06em;
  font-size:1rem;color:#fff;background:var(--red,#B02E24);padding:10px 18px;border-radius:3px;text-decoration:none;min-height:44px}
@media (prefers-reduced-motion: reduce){.gallery figure,.vslot{transition:none}}
@media(max-width:700px){.hero-panel .lede{font-size:1.15rem}}