/* BeadInvoice design system: jeweler's bench, pearl white, warm gold, engraved rules.
   Light only. Contrast comes from type scale, engraved rules and facet geometry. */

:root{
  --bg:#FAF8F4;
  --surface:#FFFFFF;
  --ink:#1A1815;
  --primary:#8A6B22;
  --accent:#D8CBB0;
  --muted:#6A6459;

  --gold-01:#FBF7EE;
  --gold-02:#F4ECDC;
  --gold-03:#EADFC6;
  --gold-04:#E2D3B4;
  --pearl:#FEFDFB;
  --rule:#E3DCCB;
  --rule-strong:#CDBF9F;

  --ink-90:rgba(26,24,21,.90);
  --ink-70:rgba(26,24,21,.70);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:88px; --sp-10:120px;

  --r-xs:2px; --r-sm:4px; --r-md:8px; --r-lg:14px; --r-pill:999px;

  --shadow-1:0 1px 2px rgba(26,24,21,.06);
  --shadow-2:0 10px 30px rgba(26,24,21,.08);
  --shadow-3:0 24px 60px rgba(26,24,21,.10);

  --f-display:"Cinzel", "Times New Roman", Georgia, serif;
  --f-body:"Manrope", "Segoe UI", Helvetica, Arial, sans-serif;

  --t-xs:.78rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.075rem;
  --t-lg:1.35rem; --t-xl:1.7rem; --t-2xl:2.1rem; --t-3xl:2.7rem; --t-4xl:3.4rem;

  --wrap:1180px;
  --facet: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.68;
  letter-spacing:.005em;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(64deg, rgba(138,107,34,.030) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-64deg, rgba(138,107,34,.022) 0 1px, transparent 1px 46px);
}
main,header,footer{position:relative; z-index:1}

img{max-width:100%; height:auto; display:block}
a{color:var(--primary); text-underline-offset:3px}
a:hover{color:var(--ink)}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.14;
  letter-spacing:.012em;
  margin:0 0 var(--sp-4);
  color:var(--ink);
}
h1{font-size:clamp(2.1rem,5.2vw,var(--t-4xl)); letter-spacing:.008em}
h2{font-size:clamp(1.65rem,3.6vw,var(--t-3xl))}
h3{font-size:var(--t-lg)}
p{margin:0 0 var(--sp-4)}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--sp-5)}
.section{padding:var(--sp-9) 0; position:relative}
.section--tint{background:var(--gold-01); border-block:1px solid var(--rule)}
.section--pearl{background:var(--pearl); border-block:1px solid var(--rule)}

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:var(--sp-4); top:-60px; z-index:60;
  background:var(--surface); color:var(--ink); font-weight:700;
  padding:var(--sp-3) var(--sp-5); border:1px solid var(--ink); border-radius:var(--r-sm);
  transition:top .18s ease;
}
.skip:focus{top:var(--sp-4)}

:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

/* ---------- engraved rule motif ---------- */
.eyebrow{
  font-family:var(--f-display);
  font-size:var(--t-xs);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--primary);
  margin:0 0 var(--sp-3);
  display:flex; align-items:center; gap:var(--sp-3);
}
.eyebrow::after{
  content:""; flex:1 1 auto; height:3px;
  background-image:linear-gradient(var(--rule-strong),var(--rule-strong)),linear-gradient(var(--rule),var(--rule));
  background-size:100% 1px, 100% 1px;
  background-position:0 0, 0 3px;
  background-repeat:no-repeat;
}
.lede{font-size:var(--t-md); color:var(--muted); max-width:62ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--f-body); font-weight:700; font-size:var(--t-sm);
  letter-spacing:.06em; text-transform:uppercase;
  padding:14px 26px; border-radius:var(--r-sm); text-decoration:none;
  border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn--primary{background:var(--primary); color:var(--pearl); box-shadow:var(--shadow-1)}
.btn--primary::after{
  content:""; position:absolute; top:-60%; left:-40%; width:34%; height:220%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform:rotate(14deg);
  animation:glint 5.4s ease-in-out infinite;
}
@keyframes glint{0%,64%{left:-45%} 88%,100%{left:125%}}
.btn--primary:hover{transform:translateY(-1px); box-shadow:var(--shadow-2)}
.btn--ghost{background:var(--surface); color:var(--ink); border-color:var(--rule-strong)}
.btn--ghost:hover{border-color:var(--primary); color:var(--primary)}
.btn--wide{width:100%}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:var(--pearl);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.site-header.is-stuck{box-shadow:var(--shadow-1); border-bottom-color:var(--rule-strong)}
.header-in{display:flex; align-items:center; gap:var(--sp-5); padding:var(--sp-3) 0; min-height:66px}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand svg{flex:0 0 auto}
.brand b{font-family:var(--f-display); font-size:1.16rem; letter-spacing:.09em; font-weight:600}
.nav{margin-left:auto}
.nav ul{display:flex; gap:var(--sp-5); list-style:none; margin:0; padding:0}
.nav a{
  color:var(--ink); text-decoration:none; font-size:var(--t-sm); font-weight:600;
  letter-spacing:.03em; padding:6px 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--primary); transition:right .22s ease;
}
.nav a:hover::after,.nav a:focus-visible::after{right:0}
.header-cta{display:inline-flex}
.nav-toggle{
  display:none; background:var(--surface); border:1px solid var(--rule-strong);
  border-radius:var(--r-sm); padding:9px 11px; margin-left:auto; cursor:pointer;
}
.nav-toggle span{display:block; width:20px; height:1.5px; background:var(--ink); margin:4px 0}

/* ---------- hero ---------- */
.hero{padding:var(--sp-9) 0 var(--sp-8); position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; right:-140px; top:-120px; width:420px; height:420px;
  background:var(--gold-02);
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  opacity:.6; z-index:0;
}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:var(--sp-8); align-items:center; position:relative; z-index:1}
.hero p.lede{font-size:1.13rem; color:var(--ink-70)}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:var(--sp-6) 0 var(--sp-6)}
.trust{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4);
  border-top:1px solid var(--rule); padding-top:var(--sp-5);
}
.trust div strong{display:block; font-family:var(--f-display); font-size:1.02rem; letter-spacing:.02em}
.trust div span{font-size:var(--t-xs); color:var(--muted); letter-spacing:.04em}
.hero-figure{position:relative}
.hero-figure img{
  clip-path:var(--facet);
  border:1px solid var(--rule-strong);
  box-shadow:var(--shadow-3);
}
.hero-figure figcaption{
  margin-top:var(--sp-3); font-size:var(--t-xs); color:var(--muted); letter-spacing:.05em;
  text-transform:uppercase;
}

/* ---------- cards ---------- */
.grid{display:grid; gap:var(--sp-5)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  padding:var(--sp-6);
  position:relative;
  box-shadow:var(--shadow-1);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover{border-color:var(--rule-strong); box-shadow:var(--shadow-2); transform:translateY(-2px)}
.card::before{
  content:""; position:absolute; top:0; left:0; width:16px; height:16px;
  border-top:1px solid var(--primary); border-left:1px solid var(--primary);
}
.card h3{margin-bottom:var(--sp-2)}
.card p{margin:0; color:var(--muted); font-size:var(--t-sm)}
.cost{
  display:inline-block; margin-top:var(--sp-4); font-family:var(--f-display);
  font-size:var(--t-sm); letter-spacing:.08em; color:var(--primary);
  border-top:1px solid var(--rule); padding-top:var(--sp-3);
}

/* ---------- steps ---------- */
.steps{counter-reset:step; display:grid; gap:var(--sp-5)}
.step{display:grid; grid-template-columns:64px 1fr; gap:var(--sp-5); align-items:start}
.step-num{
  counter-increment:step; width:56px; height:56px;
  display:grid; place-items:center;
  font-family:var(--f-display); font-size:1.2rem; color:var(--primary);
  background:var(--gold-01); border:1px solid var(--rule-strong);
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
}
.step-num::before{content:counter(step,decimal-leading-zero)}
.step h3{margin-bottom:var(--sp-2)}
.step p{color:var(--muted); margin:0}
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center}
.split img{clip-path:var(--facet); border:1px solid var(--rule-strong); box-shadow:var(--shadow-2)}

/* ---------- feature icons ---------- */
.feature-ico{
  width:44px; height:44px; display:grid; place-items:center; margin-bottom:var(--sp-4);
  border:1px solid var(--rule-strong); background:var(--gold-01);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.feature-ico svg{width:22px; height:22px; stroke:var(--primary); fill:none; stroke-width:1.2}

/* ---------- outcomes ---------- */
.outcome{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-sm);
  padding:var(--sp-6); border-top:3px solid var(--primary);
}
.outcome .big{
  font-family:var(--f-display); font-size:2.5rem; line-height:1; color:var(--primary);
  display:block; margin-bottom:var(--sp-3);
}
.outcome h3{font-size:var(--t-base); text-transform:uppercase; letter-spacing:.1em}
.outcome p{color:var(--muted); font-size:var(--t-sm); margin:0}

/* ---------- testimonials ---------- */
.testimonial{
  background:var(--surface); border:1px solid var(--rule); padding:var(--sp-6);
  border-radius:var(--r-sm); margin:0; position:relative;
}
.testimonial::after{
  content:""; position:absolute; right:0; bottom:0; width:22px; height:22px;
  border-bottom:1px solid var(--rule-strong); border-right:1px solid var(--rule-strong);
}
.testimonial p{font-size:var(--t-md); line-height:1.62}
.testimonial footer{border-top:1px solid var(--rule); padding-top:var(--sp-3); font-size:var(--t-sm)}
.testimonial footer strong{display:block; font-family:var(--f-display); letter-spacing:.03em}
.testimonial footer span{color:var(--muted); font-size:var(--t-xs)}
.results{
  margin-top:var(--sp-7); display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--rule-strong); background:var(--gold-01);
}
.results div{padding:var(--sp-5); text-align:center; border-right:1px solid var(--rule)}
.results div:last-child{border-right:0}
.results strong{display:block; font-family:var(--f-display); font-size:1.9rem; color:var(--primary)}
.results span{font-size:var(--t-xs); color:var(--muted); letter-spacing:.06em; text-transform:uppercase}

/* ---------- pricing ---------- */
.tier{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-sm);
  padding:var(--sp-6); display:flex; flex-direction:column;
}
.tier--best{border:1px solid var(--primary); box-shadow:var(--shadow-2); position:relative}
.tag{
  position:absolute; top:-13px; left:var(--sp-6);
  background:var(--primary); color:var(--pearl);
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  padding:5px 12px; font-weight:700;
}
.tier h3{font-size:var(--t-lg); margin-bottom:var(--sp-2)}
.price{font-family:var(--f-display); font-size:2.6rem; line-height:1; color:var(--ink)}
.price small{font-family:var(--f-body); font-size:var(--t-sm); color:var(--muted); letter-spacing:.04em}
.tier ul{list-style:none; margin:var(--sp-5) 0; padding:0; flex:1 1 auto}
.tier li{
  font-size:var(--t-sm); color:var(--muted); padding:8px 0 8px 22px;
  border-bottom:1px dotted var(--rule); position:relative;
}
.tier li::before{
  content:""; position:absolute; left:0; top:16px; width:8px; height:8px;
  background:var(--accent); transform:rotate(45deg);
}
.billing-note{margin-top:var(--sp-5); font-size:var(--t-sm); color:var(--muted); text-align:center}

/* ---------- faq ---------- */
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--f-display); font-size:1.06rem; color:var(--ink);
  padding:var(--sp-5) 34px var(--sp-5) 0; position:relative; letter-spacing:.01em;
}
.faq-q::after{
  content:""; position:absolute; right:6px; top:50%; width:9px; height:9px;
  border-right:1.5px solid var(--primary); border-bottom:1.5px solid var(--primary);
  transform:translateY(-70%) rotate(45deg); transition:transform .22s ease;
}
.faq-q[aria-expanded="true"]::after{transform:translateY(-25%) rotate(-135deg)}
.faq-a{display:none; padding:0 0 var(--sp-5); color:var(--muted); max-width:80ch}
.faq-a.is-open{display:block}

/* ---------- form ---------- */
.form-shell{
  background:var(--surface); border:1px solid var(--rule-strong);
  padding:var(--sp-7); border-radius:var(--r-sm); box-shadow:var(--shadow-2);
}
.field{margin-bottom:var(--sp-5)}
.field label{display:block; font-size:var(--t-sm); font-weight:700; margin-bottom:6px; letter-spacing:.03em}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--f-body); font-size:var(--t-base); color:var(--ink);
  background:var(--pearl); border:1px solid var(--rule-strong); border-radius:var(--r-sm);
  padding:12px 14px;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary); outline:none}
.field [aria-invalid="true"]{border-color:#A33417}
.err{display:none; color:#A33417; font-size:var(--t-xs); margin-top:5px}
.err.is-shown{display:block}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:var(--t-sm)}
.consent input{width:18px; height:18px; margin-top:3px; flex:0 0 auto}
.form-note{margin-top:var(--sp-4); font-size:var(--t-sm); color:var(--muted)}

/* ---------- footer ---------- */
.site-footer{background:var(--gold-01); border-top:1px solid var(--rule-strong); padding:var(--sp-8) 0 var(--sp-5)}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:var(--sp-6)}
.foot-grid h4{font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--primary)}
.foot-grid ul{list-style:none; margin:0; padding:0}
.foot-grid li{margin-bottom:8px}
.foot-grid a{color:var(--ink); text-decoration:none; font-size:var(--t-sm)}
.foot-grid a:hover{color:var(--primary); text-decoration:underline}
.foot-tagline{color:var(--muted); font-size:var(--t-sm); max-width:34ch}
.socials{display:flex; gap:10px; margin-top:var(--sp-4)}
.socials a{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--rule-strong); background:var(--surface);
}
.socials a:hover{border-color:var(--primary)}
.socials svg{width:17px; height:17px; stroke:var(--ink); fill:none; stroke-width:1.3}
.base-bar{
  margin-top:var(--sp-7); border-top:1px solid var(--rule); padding-top:var(--sp-4);
  display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:space-between;
  font-size:var(--t-xs); color:var(--muted);
}

/* ---------- prose pages ---------- */
.prose{max-width:76ch}
.prose h2{margin-top:var(--sp-7); font-size:var(--t-xl)}
.prose h3{margin-top:var(--sp-5)}
.prose ul{padding-left:20px}
.prose li{margin-bottom:8px}
.byline{
  margin-top:var(--sp-8); border-top:1px solid var(--rule-strong); padding-top:var(--sp-4);
  font-size:var(--t-sm); color:var(--muted);
}
.author-head{display:grid; grid-template-columns:220px 1fr; gap:var(--sp-6); align-items:start}
.author-head img{border:1px solid var(--rule-strong); clip-path:var(--facet)}
.crumbs{font-size:var(--t-xs); color:var(--muted); letter-spacing:.06em; margin-bottom:var(--sp-4)}
.crumbs a{color:var(--muted)}

/* ---------- reveal motion ---------- */
.reveal{opacity:0; transform:translateY(16px); clip-path:polygon(0 12px,12px 0,100% 0,100% 100%,0 100%)}
.reveal.is-visible{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid,.split,.author-head{grid-template-columns:1fr}
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav{
    position:absolute; left:0; right:0; top:100%; background:var(--pearl);
    border-bottom:1px solid var(--rule-strong); padding:var(--sp-4) var(--sp-5); display:none;
  }
  .nav.is-open{display:block}
  .nav ul{flex-direction:column; gap:var(--sp-3)}
  .nav-toggle{display:block}
  .header-cta{display:none}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4,.results,.trust{grid-template-columns:1fr}
  .results div{border-right:0; border-bottom:1px solid var(--rule)}
  .foot-grid{grid-template-columns:1fr}
  .section{padding:var(--sp-8) 0}
  .form-shell{padding:var(--sp-5)}
  .step{grid-template-columns:1fr}
}

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

/* ================================================================
   MAGAZINE: The Bench Ledger
   Built from the same tokens as the rest of the site. Light only.
   ================================================================ */

/* ---------- breadcrumb ---------- */
.mag-crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.mag-crumbs li{display:flex; align-items:center; gap:var(--sp-2)}
.mag-crumbs li + li::before{content:"/"; color:var(--rule-strong)}
.mag-crumbs span[aria-current]{color:var(--ink); font-weight:600}

/* ---------- magazine index ---------- */
.mag-index-head{padding-bottom:var(--sp-6)}
.mag-index-head h1{max-width:18ch}
.mag-index-note{max-width:66ch; color:var(--muted); font-size:var(--t-sm); margin-top:var(--sp-5)}
.mag-index-grid-wrap{padding-top:var(--sp-5)}
.mag-standfirst{
  font-family:var(--f-body); font-size:var(--t-md); line-height:1.6;
  color:var(--ink-70); max-width:64ch; margin-top:var(--sp-4);
}

.mag-grid{
  display:grid; gap:var(--sp-6);
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule-strong); padding-top:var(--sp-7);
}
.mag-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-sm);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  box-shadow:var(--shadow-1);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mag-card:hover{border-color:var(--rule-strong); box-shadow:var(--shadow-2); transform:translateY(-2px)}
.mag-card-img{display:block; border-bottom:1px solid var(--rule); background:var(--gold-01)}
.mag-card-img img{width:100%; aspect-ratio:3/2; object-fit:cover}
.mag-card-body{padding:var(--sp-5) var(--sp-5) var(--sp-6); display:flex; flex-direction:column; flex:1 1 auto}
.mag-kicker{
  font-family:var(--f-display); font-size:var(--t-xs); letter-spacing:.2em;
  text-transform:uppercase; color:var(--primary); margin:0 0 var(--sp-3);
}
.mag-card h3{font-size:1.16rem; line-height:1.24; margin:0 0 var(--sp-3)}
.mag-card h3 a{color:var(--ink); text-decoration:none}
.mag-card h3 a:hover{color:var(--primary); text-decoration:underline}
.mag-card-dek{color:var(--muted); font-size:var(--t-sm); margin:0 0 var(--sp-5)}
.mag-card-meta{
  margin:auto 0 0; padding-top:var(--sp-3); border-top:1px solid var(--rule);
  font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:var(--sp-3);
}
.mag-dot{width:6px; height:6px; background:var(--accent); transform:rotate(45deg); display:inline-block}

.mag-card.lead{
  grid-column:1 / -1;
  display:grid; grid-template-columns:1.15fr .85fr; align-items:stretch;
  border-color:var(--rule-strong);
}
.mag-card.lead .mag-card-img{border-bottom:0; border-right:1px solid var(--rule); height:100%}
.mag-card.lead .mag-card-img img{height:100%; aspect-ratio:auto; min-height:280px}
.mag-card.lead .mag-card-body{padding:var(--sp-7); justify-content:center}
.mag-card.lead h3{font-size:clamp(1.5rem,2.6vw,var(--t-2xl)); line-height:1.16}
.mag-card.lead .mag-card-dek{font-size:var(--t-base); max-width:52ch}
.mag-card.lead::before{
  content:""; position:absolute; top:0; right:0; width:18px; height:18px;
  border-top:1px solid var(--primary); border-right:1px solid var(--primary); z-index:1;
}
.mag-index-cta{margin-top:var(--sp-7); font-size:var(--t-sm); color:var(--muted); text-align:center}

/* ---------- article page ---------- */
.mag-article{padding:var(--sp-7) 0 var(--sp-8)}
.mag-head{max-width:74ch; margin-top:var(--sp-4)}
.mag-head h1{font-size:clamp(1.9rem,4.2vw,3rem); margin-bottom:var(--sp-4)}
.mag-byline{
  margin-top:var(--sp-6); padding-top:var(--sp-4);
  border-top:1px solid var(--rule-strong);
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5);
  font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.mag-byline .mag-by{color:var(--ink); font-weight:700}
.mag-byline a{color:var(--primary)}
.mag-figure{margin:var(--sp-7) 0 var(--sp-7)}
.mag-figure img{
  width:100%; clip-path:var(--facet);
  border:1px solid var(--rule-strong); box-shadow:var(--shadow-2);
}
.mag-figure figcaption{
  margin-top:var(--sp-3); font-size:var(--t-xs); letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted);
}

/* ---------- article body typography ---------- */
.mag-body{max-width:68ch; font-size:var(--t-md); line-height:1.72}
.mag-body > p{margin:0 0 var(--sp-5)}
.mag-body h2{
  font-size:clamp(1.45rem,2.6vw,var(--t-xl));
  margin:var(--sp-8) 0 var(--sp-4); padding-top:var(--sp-4);
  border-top:1px solid var(--rule);
}
.mag-body h3{font-size:1.14rem; margin:var(--sp-6) 0 var(--sp-3)}
.mag-body ul,.mag-body ol{padding-left:22px; margin:0 0 var(--sp-5)}
.mag-body li{margin-bottom:var(--sp-3)}
.mag-body blockquote{
  margin:var(--sp-6) 0; padding:var(--sp-5) var(--sp-6);
  background:var(--gold-01); border-left:3px solid var(--primary);
  font-family:var(--f-display); font-size:1.08rem; line-height:1.5;
}
.mag-body blockquote p:last-child{margin:0}
.mag-body table{
  width:100%; border-collapse:collapse; margin:var(--sp-6) 0;
  font-size:var(--t-sm); background:var(--surface);
}
.mag-body th,.mag-body td{border:1px solid var(--rule); padding:10px 12px; text-align:left; vertical-align:top}
.mag-body th{background:var(--gold-02); font-family:var(--f-display); font-weight:600; letter-spacing:.03em}
.mag-body a{color:var(--primary)}

.inline-read{
  margin:var(--sp-6) 0; padding:var(--sp-4) var(--sp-5);
  background:var(--gold-01); border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  font-size:var(--t-sm); color:var(--muted); letter-spacing:.01em;
}
.inline-read a{font-weight:700; color:var(--primary)}

/* ---------- call to action ---------- */
.mag-cta{
  margin:var(--sp-8) 0 0; padding:var(--sp-7);
  background:var(--gold-02); border:1px solid var(--rule-strong);
  clip-path:var(--facet);
}
.mag-cta h2{font-size:var(--t-lg); margin:0 0 var(--sp-3); border:0; padding:0}
.mag-cta p{margin:0 0 var(--sp-4); font-size:var(--t-sm); color:var(--ink-70)}
.mag-cta p:last-child{margin:0}

/* ---------- author box ---------- */
.mag-author{
  margin-top:var(--sp-7); padding-top:var(--sp-6);
  border-top:1px solid var(--rule-strong);
  display:grid; grid-template-columns:160px 1fr; gap:var(--sp-6); align-items:start;
}
.mag-author img{
  width:160px; height:160px; object-fit:cover;
  border:1px solid var(--rule-strong); clip-path:var(--facet); background:var(--gold-01);
}
.mag-author h2{font-size:var(--t-lg); margin:0 0 var(--sp-3); border:0; padding:0}
.mag-author p{font-size:var(--t-sm); color:var(--muted); margin:0 0 var(--sp-3)}

/* ---------- read also ---------- */
.mag-related{margin-top:var(--sp-8)}
.mag-related-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5);
  margin-top:var(--sp-6);
}
.mag-rel{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-sm);
  padding:0 0 var(--sp-5); overflow:hidden; position:relative;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mag-rel:hover{border-color:var(--rule-strong); box-shadow:var(--shadow-2)}
.mag-rel-img{display:block; border-bottom:1px solid var(--rule); background:var(--gold-01)}
.mag-rel-img img{width:100%; aspect-ratio:3/2; object-fit:cover}
.mag-rel h3{font-size:1.02rem; line-height:1.26; margin:var(--sp-5) var(--sp-5) var(--sp-3)}
.mag-rel h3 a{color:var(--ink); text-decoration:none}
.mag-rel h3 a:hover{color:var(--primary); text-decoration:underline}
.mag-rel-dek{margin:0 var(--sp-5) var(--sp-4); font-size:var(--t-sm); color:var(--muted)}
.mag-rel-meta{
  margin:0 var(--sp-5); font-size:var(--t-xs); letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.mag-related-all{margin-top:var(--sp-6); font-size:var(--t-sm)}

/* ---------- home page magazine strip ---------- */
.mag-home-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5); margin-top:var(--sp-7)}
.mag-home-all{margin-top:var(--sp-6); font-size:var(--t-sm)}

/* ---------- author page and site map lists ---------- */
.mag-list{list-style:none; margin:var(--sp-5) 0 0; padding:0; max-width:80ch}
.mag-list li{padding:var(--sp-4) 0; border-bottom:1px solid var(--rule)}
.mag-list a{font-weight:600}
.mag-list time,.mag-list span{display:block; font-size:var(--t-xs); color:var(--muted); margin-top:6px; letter-spacing:.04em}

/* ---------- magazine responsive ---------- */
@media (max-width:1000px){
  .mag-grid,.mag-related-grid,.mag-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mag-card.lead{grid-template-columns:1fr}
  .mag-card.lead .mag-card-img{border-right:0; border-bottom:1px solid var(--rule)}
  .mag-card.lead .mag-card-img img{min-height:0; aspect-ratio:3/2}
  .mag-card.lead .mag-card-body{padding:var(--sp-6)}
}
@media (max-width:640px){
  .mag-grid,.mag-related-grid,.mag-home-grid{grid-template-columns:1fr; gap:var(--sp-5)}
  .mag-grid{padding-top:var(--sp-6)}
  .mag-body{font-size:var(--t-base)}
  .mag-body h2{margin-top:var(--sp-7)}
  .mag-figure{margin:var(--sp-6) 0}
  .mag-cta{padding:var(--sp-5); clip-path:none}
  .mag-author{grid-template-columns:1fr; gap:var(--sp-4)}
  .mag-author img{width:120px; height:120px}
  .mag-byline{gap:var(--sp-2) var(--sp-4)}
  .mag-body table{display:block; overflow-x:auto}
}


/* Network column: five sibling products, rotated so every site is linked the same
   number of times. Sits in the footer link grid and inherits its type and colour. */
.site-network ul { list-style: none; margin: 0; padding: 0; }
.site-network li + li { margin-top: 0.4rem; }
.site-network a { text-decoration: none; border-bottom: 1px solid transparent; }
.site-network a:hover, .site-network a:focus-visible { border-bottom-color: currentColor; }