/* THEME B — Broadsheet
   Overrides on top of style.css. Printed page feel: rules, square corners,
   uppercase labels, one ink plus one red. */

:root{
  --paper:#fbf9f3;
  --paper-2:#f2ecdf;
  --ink:#17130e;
  --muted:#4b453a;
  --accent:#e8503a;
  --blue:#2f4a38;
  --line:#cbc1ae;
  --card:transparent;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Libre Franklin","Helvetica Neue",Helvetica,Arial,sans-serif;
  --max:1160px;
  --read:62ch;
}

body{font-size:16.5px;line-height:1.62}

h1,h2,h3,.wordmark,.big-serif,.formula-line,.price,.offer-price,.foot-name,.acc summary{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.015em;
}
h1{font-size:clamp(2.6rem,6.4vw,5rem);line-height:.99;margin-bottom:.42em}
h2{font-size:clamp(1.9rem,3.6vw,2.85rem);line-height:1.02;margin-bottom:1rem}
h3{font-size:1.45rem;line-height:1.15}
.lede{font-size:1.12rem;line-height:1.58;color:var(--muted)}
.big-serif{font-size:clamp(1.7rem,3.1vw,2.5rem);line-height:1.14}
.big-question{font-family:var(--serif);font-weight:600;font-size:1.55rem;line-height:1.22}

/* masthead */
.site-head{
  background:var(--paper);
  border-bottom:1px solid var(--ink);
  border-top:3px solid var(--ink);
  backdrop-filter:none;
}
.head-inner{padding:1.05rem 0;gap:1.8rem}
.wordmark{font-size:1.6rem}
.wordmark .dot{color:var(--accent)}
.nav{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;gap:1.7rem}
.nav a{border-bottom:0;padding-bottom:3px;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--ink)}
.nav a.on{border-color:var(--accent)}

/* buttons: square, stamped */
.btn{
  border-radius:0;background:var(--ink);border:1px solid var(--ink);
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  padding:.9rem 1.5rem;
}
.btn:hover{background:var(--accent);border-color:var(--accent);transform:none}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-small{padding:.6rem 1rem;font-size:.7rem}
.link-arrow{border-bottom:1px solid var(--ink);font-size:.84rem;letter-spacing:.1em;text-transform:uppercase}

.eyebrow{
  font-size:.68rem;letter-spacing:.22em;color:var(--accent);
  padding-bottom:.6rem;border-bottom:2px solid var(--ink);display:inline-block;margin-bottom:1.4rem;
}

/* printed columns instead of floating cards */
.section{padding:4.4rem 0}
.page-head{padding:3.6rem 0 .6rem}
.hero{padding:3.8rem 0 3rem}
.hero-art img{filter:contrast(1.06) saturate(.92)}
.tape{
  background:var(--accent);color:#fff;transform:rotate(-1.4deg);
  font-size:.74rem;letter-spacing:.03em;text-transform:none;font-weight:500;
  padding:.45rem .8rem;box-shadow:0 2px 0 rgba(0,0,0,.12);
}

.var,.card,.essay,.offer,.formula-box{background:transparent;border:0;border-top:1px solid var(--ink)}
.var{padding:1.5rem 0 0}
.var h3{font-size:1.6rem;margin:.6rem 0 .45rem}
.var p{font-size:.94rem;color:var(--muted)}
.var-num{color:var(--accent);font-size:.68rem;letter-spacing:.2em}
a.var:hover{transform:none;box-shadow:none}
.four.wide .var{border-top-width:2px}
.ask{color:var(--accent)!important}

.card{padding:1.6rem 0 1.9rem;gap:.6rem}
.card.door{border-top-color:var(--ink)}
.essay{padding:1.6rem 0 1.8rem}
.essay:hover{transform:none;box-shadow:none}
.essay:hover h3{color:var(--accent)}

.tag{
  background:transparent;border:1px solid var(--ink);color:var(--ink);
  font-size:.62rem;letter-spacing:.18em;padding:.24rem .55rem;
}

.offers{gap:2.4rem}
.offer{padding:1.8rem 0 0}
.offer.featured{border-top:3px solid var(--accent);padding-top:1.8rem}
.offer.featured:after{
  content:"practice, not a course";background:var(--accent);color:#fff;
  font-size:.6rem;letter-spacing:.16em;top:-.1rem;right:0;
}
.offer h2{font-size:1.7rem}
.offer-price{font-size:2.15rem}

.formula-box{padding:2.6rem 0 0;border-bottom:1px solid var(--ink);padding-bottom:2.4rem;text-align:left}
.formula-line{font-size:clamp(1.8rem,4.4vw,3.2rem)}
.formula-sub{margin:.9rem 0 1.6rem}
.formula-plain{max-width:56ch;margin:0;border-top:0;padding-top:0;border-left:2px solid var(--ink);padding-left:1.2rem}
.price{font-size:1.9rem}
.strip-img{box-shadow:none;border:1px solid var(--ink);padding:6px;background:#fff}
.inline-product img{box-shadow:none;border:1px solid var(--line)}

.checks li:before{content:"\2014";color:var(--accent)}
.checks li{padding-left:1.5rem;font-size:.94rem}

.magnet{background:var(--ink);color:#f6f1e6;border-top:0}
.magnet .eyebrow{color:#e7a877;border-color:#f6f1e6}
.magnet .muted{color:#c8c0b0}
.signup input{background:#241f19;border:1px solid #4d453a;border-radius:0}
.signup .btn{background:var(--accent);border-color:var(--accent);border-radius:0}

.steps li:before{font-family:var(--serif);font-weight:600;color:var(--accent)}
.plain-list li:before{content:"\00B7"}
.acc summary{font-family:var(--serif);font-weight:600}

.site-foot{background:var(--ink);color:#c8c0b0;border-top:3px solid var(--ink)}
.foot-name{font-size:1.5rem}
.foot-legal{border-color:#453d31}

.previewbar{background:#17130e;color:#f6f1e6;letter-spacing:.14em;text-transform:uppercase;font-size:.68rem}
.previewbar a{color:#ffb9ab}

@media (max-width:960px){
  .four,.grid-cards,.offers{grid-template-columns:repeat(2,1fr)}
  .offers{gap:1.6rem}
}
@media (max-width:720px){
  body{font-size:16px}
  .nav{background:var(--paper);border-top:1px solid var(--ink)}
  .nav a{border-bottom:1px solid var(--line);text-transform:none;letter-spacing:0;font-size:.9rem}
  .section{padding:3.2rem 0}
  h1{font-size:clamp(2.15rem,8.8vw,2.9rem)}
}

/* honeypot: hidden from people, visible to bots */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* --- mobile polish, 2026-10-28 ------------------------------------------- */
.previewbar a{white-space:nowrap}
@media (max-width:720px){
  .hero .actions{display:grid;gap:.6rem}
  .hero .actions .btn{width:100%;text-align:center}
  .link-arrow{display:inline-block;margin-top:1.4rem}
}

/* video embed */
.video-frame{position:relative;width:100%;aspect-ratio:16/9;margin:1.6rem 0 .7rem;background:#111;border:1px solid rgba(0,0,0,.14);overflow:hidden}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@supports not (aspect-ratio:16/9){.video-frame{height:0;padding-bottom:56.25%}}

/* inline paragraph links need to look like links */
.muted a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.muted a:hover{color:var(--accent);text-decoration-color:var(--accent)}