/* ==========================================================================
   ChalkHandoff design system
   Chalk green board, cream paper, pencil yellow.
   Bitter over Nunito Sans. Notebook rules, index cards, hand drawn arrows.
   ========================================================================== */

:root{
  /* core palette from the brief */
  --paper:#FDFBF4;
  --surface:#FFFFFF;
  --ink:#20302A;
  --primary:#2E6B4F;
  --accent:#F0B429;
  --muted:#5F7268;

  /* derived greens: the chalkboard */
  --board:#254B3A;
  --board-deep:#1B3A2C;
  --board-edge:#132A20;
  --primary-800:#1F4B37;
  --primary-700:#265A43;
  --primary-400:#5B9377;
  --primary-200:#AECDBC;
  --primary-100:#DCEAE1;
  --primary-050:#EEF5F0;

  /* pencil yellow and the pencil red margin rule */
  --accent-800:#8C5E08;
  --accent-700:#B4820F;
  --accent-300:#F7D682;
  --accent-100:#FCF0D3;
  --pencil-red:#C05C48;
  --pencil-red-soft:rgba(192,92,72,.42);

  /* chalk */
  --chalk:#F2F6EE;
  --chalk-dim:rgba(242,246,238,.80);
  --chalk-faint:rgba(242,246,238,.55);

  /* paper furniture */
  --rule:rgba(46,107,79,.14);
  --rule-strong:rgba(46,107,79,.24);
  --hairline:#E4DFCF;
  --card-edge:#E7E2D3;

  /* spacing scale */
  --s-1:.25rem;
  --s-2:.5rem;
  --s-3:.75rem;
  --s-4:1rem;
  --s-5:1.5rem;
  --s-6:2rem;
  --s-7:3rem;
  --s-8:4rem;
  --s-9:6rem;
  --s-10:8rem;

  /* radii: index cards are barely rounded */
  --r-1:3px;
  --r-2:6px;
  --r-3:10px;
  --r-pill:999px;

  /* shadows: paper lying on a desk */
  --sh-1:0 1px 0 rgba(32,48,42,.06), 0 2px 6px rgba(32,48,42,.06);
  --sh-2:0 2px 2px rgba(32,48,42,.05), 0 10px 22px -10px rgba(32,48,42,.28);
  --sh-3:0 6px 10px -6px rgba(32,48,42,.24), 0 26px 44px -22px rgba(32,48,42,.40);
  --sh-board:inset 0 0 90px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.05);

  /* type */
  --font-display:"Bitter", Georgia, "Times New Roman", serif;
  --font-body:"Nunito Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fs-100:.78rem;
  --fs-200:.875rem;
  --fs-300:1rem;
  --fs-400:1.0625rem;
  --fs-500:1.25rem;
  --fs-600:1.5rem;
  --fs-700:2rem;
  --fs-800:2.6rem;
  --fs-900:3.4rem;

  --wrap:1180px;
  --rule-gap:32px;
}

/* --------------------------------------------------------------- base -- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-400);
  line-height:1.68;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* the whole page sits on ruled notebook paper */
.paper{
  position:relative;
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rule-gap) - 1px),
    var(--rule) calc(var(--rule-gap) - 1px),
    var(--rule) var(--rule-gap)
  );
  background-position:0 12px;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.012em;
  margin:0 0 var(--s-4);
  color:var(--ink);
}
h1{font-size:clamp(2.1rem,1.35rem + 3.1vw,var(--fs-900))}
h2{font-size:clamp(1.7rem,1.15rem + 2.1vw,var(--fs-800))}
h3{font-size:clamp(1.15rem,1rem + .55vw,var(--fs-600))}
h4{font-size:var(--fs-500)}
p{margin:0 0 var(--s-4)}
ul,ol{margin:0 0 var(--s-4);padding-left:1.15rem}
li{margin-bottom:.4rem}
strong{font-weight:800;color:var(--primary-800)}

a{color:var(--primary-700);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--primary-800)}

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
.board :focus-visible{outline-color:var(--accent-300)}

::selection{background:var(--accent-300);color:var(--ink)}

/* --------------------------------------------------------- utilities -- */

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.wrap-narrow{max-width:820px}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;top:-64px;left:var(--s-4);z-index:200;
  background:var(--accent);color:var(--ink);
  font-family:var(--font-display);font-weight:700;
  padding:.7rem 1.1rem;border-radius:var(--r-1);
  box-shadow:var(--sh-2);transition:top .18s ease-out;
}
.skip-link:focus{top:12px}

.section{padding-block:clamp(3.2rem,2rem + 5vw,6.2rem)}
.section-tight{padding-block:clamp(2.4rem,1.6rem + 3vw,4rem)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-100);letter-spacing:.16em;text-transform:uppercase;
  color:var(--primary-700);margin:0 0 var(--s-3);
}
.eyebrow::before{
  content:"";width:26px;height:0;
  border-top:2px solid var(--accent);
  transform:rotate(-1.4deg);
}
.board .eyebrow{color:var(--accent-300)}
.board .eyebrow::before{border-top-color:var(--accent)}

.lede{font-size:clamp(1.05rem,1rem + .45vw,var(--fs-500));color:var(--muted);max-width:62ch}
.board .lede{color:var(--chalk-dim)}

.section-head{max-width:66ch;margin-bottom:var(--s-6)}

/* a hand drawn underline scribbled under a heading */
.scribble{position:relative;display:inline-block}
.scribble::after{
  content:"";
  position:absolute;left:-2px;right:-4px;bottom:-.24em;height:.42em;
  background:
    radial-gradient(120% 100% at 0 50%, transparent 40%, var(--accent) 41%, var(--accent) 62%, transparent 63%),
    linear-gradient(93deg, transparent 0 2%, var(--accent) 3%, var(--accent) 96%, transparent 98%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 5%, #000 94%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 5%, #000 94%, transparent 100%);
  clip-path:polygon(0 46%,7% 22%,26% 58%,48% 24%,70% 60%,88% 28%,100% 52%,100% 82%,72% 96%,44% 66%,20% 94%,0 74%);
  opacity:.85;
}

.reveal{opacity:0;transform:translateY(20px)}
.reveal.is-visible{opacity:1;transform:none;transition:opacity .62s ease-out, transform .62s cubic-bezier(.22,.72,.28,1)}
.reveal.d1.is-visible{transition-delay:.07s}
.reveal.d2.is-visible{transition-delay:.14s}
.reveal.d3.is-visible{transition-delay:.21s}
.reveal.d4.is-visible{transition-delay:.28s}

/* ----------------------------------------------------------- buttons -- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-300);
  line-height:1;padding:.92rem 1.5rem;border-radius:var(--r-1);
  border:2px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out, color .18s ease-out;
}
.btn:hover{transform:translateY(-2px) rotate(-.35deg)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:var(--accent);color:#2A2005;
  border-color:var(--accent-700);
  box-shadow:0 3px 0 var(--accent-700), var(--sh-1);
}
.btn-primary:hover{background:var(--accent-300);color:#2A2005;box-shadow:0 5px 0 var(--accent-700), var(--sh-2)}

.btn-ink{
  background:var(--primary);color:#FFFFFF;border-color:var(--primary-800);
  box-shadow:0 3px 0 var(--primary-800), var(--sh-1);
}
.btn-ink:hover{background:var(--primary-700);color:#FFFFFF}

.btn-outline{
  background:transparent;color:var(--primary-700);
  border-color:var(--primary-200);
  border-style:dashed;
}
.btn-outline:hover{background:var(--primary-050);color:var(--primary-800);border-style:solid}

.board .btn-outline{color:var(--chalk);border-color:var(--chalk-faint)}
.board .btn-outline:hover{background:rgba(242,246,238,.10);color:var(--chalk)}

.btn-block{width:100%}
.btn-sm{font-size:var(--fs-200);padding:.68rem 1.05rem}

/* ------------------------------------------------------------ header -- */

.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(253,251,244,.94);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--hairline);
  transition:box-shadow .2s ease-out, padding .2s ease-out, background-color .2s ease-out;
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 22px,transparent 22px 30px);
  opacity:.65;
}
.site-header.is-stuck{box-shadow:0 10px 26px -18px rgba(32,48,42,.55);background:rgba(253,251,244,.985)}

.header-inner{display:flex;align-items:center;gap:var(--s-5);min-height:74px}
.site-header.is-stuck .header-inner{min-height:64px}

.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand svg{width:38px;height:38px;flex:0 0 auto}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:1.22rem;letter-spacing:-.02em}
.brand-name em{font-style:normal;color:var(--primary)}

.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-5)}
.nav-list{display:flex;align-items:center;gap:var(--s-5);list-style:none;margin:0;padding:0}
.nav-list a{
  position:relative;color:var(--ink);text-decoration:none;font-weight:700;font-size:var(--fs-200);
  padding:.35rem 0;
}
.nav-list a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease-out;
}
.nav-list a:hover::after,.nav-list a:focus-visible::after{transform:scaleX(1)}

.nav-toggle{
  display:none;margin-left:auto;background:var(--surface);border:2px solid var(--primary-200);
  border-radius:var(--r-1);width:46px;height:42px;align-items:center;justify-content:center;cursor:pointer;
}
.nav-toggle svg{width:22px;height:22px;stroke:var(--primary-800)}
.nav-toggle[aria-expanded="true"]{background:var(--primary);border-color:var(--primary-800)}
.nav-toggle[aria-expanded="true"] svg{stroke:#FFFFFF}

/* ------------------------------------------------------- chalkboard -- */

.board{
  position:relative;
  color:var(--chalk);
  background-color:var(--board);
  background-image:
    radial-gradient(140% 90% at 10% 4%, rgba(255,255,255,.075), transparent 58%),
    radial-gradient(80% 70% at 88% 16%, rgba(255,255,255,.055), transparent 62%),
    radial-gradient(60% 55% at 52% 104%, rgba(0,0,0,.28), transparent 70%),
    repeating-linear-gradient(101deg, rgba(255,255,255,.03) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(9deg, rgba(0,0,0,.055) 0 3px, transparent 3px 11px);
  box-shadow:var(--sh-board);
}
.board::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38% 26% at 22% 72%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(30% 20% at 78% 38%, rgba(255,255,255,.045), transparent 72%);
  mix-blend-mode:screen;
}
.board h2,.board h3,.board h1{color:var(--chalk)}
.board a{color:var(--accent-300)}
.board .scribble::after{opacity:.95}

/* chalk lettering: soft dusty edges */
.chalk-text{
  text-shadow:0 0 1px rgba(242,246,238,.5), 0 1px 0 rgba(0,0,0,.22);
}

.chalk-tray{
  height:16px;
  background:linear-gradient(180deg,#C79B57 0%,#A87C3B 46%,#8A6229 100%);
  border-top:1px solid rgba(255,255,255,.18);
  position:relative;
}
.chalk-tray::before,.chalk-tray::after{
  content:"";position:absolute;top:4px;height:7px;border-radius:4px;
  background:linear-gradient(180deg,#FBFDF7,#DCE3D5);
  box-shadow:0 1px 2px rgba(0,0,0,.28);
}
.chalk-tray::before{left:12%;width:64px;transform:rotate(-.6deg)}
.chalk-tray::after{left:24%;width:38px;background:linear-gradient(180deg,#FBEFC8,#E7D294)}

/* -------------------------------------------------------------- hero -- */

.hero{position:relative;padding-block:clamp(3rem,2rem + 5vw,5.6rem) 0;overflow:hidden}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:center;
}
.hero-kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(240,180,41,.16);
  border:1px dashed var(--accent-300);
  color:var(--accent-300);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-100);
  letter-spacing:.12em;text-transform:uppercase;
  padding:.4rem .8rem;border-radius:var(--r-pill);margin-bottom:var(--s-4);
}
.hero h1{color:var(--chalk);max-width:19ch}
.hero h1 .under{
  background-image:linear-gradient(90deg,var(--accent),var(--accent-300));
  background-repeat:no-repeat;background-position:0 92%;background-size:100% 5px;
  padding-bottom:.06em;
}
.hero-lede{color:var(--chalk-dim);font-size:clamp(1.03rem,.98rem + .5vw,1.22rem);max-width:56ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:var(--s-5) 0 var(--s-6)}

.hero-figure{position:relative}
.hero-figure img{
  border-radius:var(--r-2);
  border:9px solid var(--paper);
  box-shadow:var(--sh-3);
  transform:rotate(1.05deg);
  aspect-ratio:1600/1067;object-fit:cover;
}
.hero-figure figcaption{
  position:absolute;left:-14px;bottom:-26px;
  background:var(--surface);color:var(--ink);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-200);
  padding:.65rem .95rem;border-radius:var(--r-1);
  border-left:4px solid var(--pencil-red);
  box-shadow:var(--sh-2);transform:rotate(-1.6deg);max-width:16rem;line-height:1.35;
}
.tape{
  position:absolute;top:-16px;left:50%;width:104px;height:30px;
  transform:translateX(-50%) rotate(-2.4deg);
  background:rgba(240,180,41,.5);
  border-left:1px dashed rgba(255,255,255,.5);
  border-right:1px dashed rgba(255,255,255,.5);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

.trust-strip{
  list-style:none;padding-left:0;
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);
  padding-top:var(--s-5);margin-top:var(--s-5);
  border-top:1px dashed rgba(242,246,238,.28);
}
.trust-item{display:flex;align-items:center;gap:.6rem;color:var(--chalk-dim);font-size:var(--fs-200);font-weight:700}
.trust-item svg{width:22px;height:22px;stroke:var(--accent);flex:0 0 auto}

.hero-bottom{padding-block:var(--s-7) var(--s-6)}

/* --------------------------------------------------------- the cards -- */

/* an index card: white stock, a red header rule, faint blue rules below */
.card{
  position:relative;background:var(--surface);
  border:1px solid var(--card-edge);border-radius:var(--r-1);
  box-shadow:var(--sh-1);
  padding:46px var(--s-5) var(--s-5) calc(var(--s-5) + 10px);
  background-image:repeating-linear-gradient(
    to bottom, transparent 0 25px, rgba(46,107,79,.08) 25px 26px);
  background-position:0 46px;
}
.card::before{
  content:"";position:absolute;left:0;right:0;top:34px;height:1px;
  background:var(--pencil-red-soft);
}
.card::after{
  content:"";position:absolute;left:18px;top:0;bottom:0;width:1px;
  background:var(--pencil-red-soft);opacity:.55;
}

/* the flip: cards tip up like an index card lifted out of the box */
.flip{
  transform-origin:50% 60%;
  transition:transform .42s cubic-bezier(.2,.72,.28,1), box-shadow .42s ease-out, border-color .3s;
  will-change:transform;
}
.flip:hover,.flip:focus-within{
  transform:perspective(1100px) rotateY(-7deg) rotateX(4deg) translateY(-7px);
  box-shadow:var(--sh-3);
  border-color:var(--primary-200);
}

.grid{display:grid;gap:var(--s-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))}

/* ----------------------------------------------------------- problem -- */

#problem{background:linear-gradient(180deg,var(--paper) 0%, #F7F3E6 100%)}

.pain-card h3{margin-bottom:.5rem}
.pain-card .cost{
  display:inline-block;margin-top:.4rem;
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-500);
  color:var(--pencil-red);
}
.pain-card .cost small{display:block;font-size:var(--fs-100);font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.pain-card p{margin-bottom:0;color:var(--muted)}
.pain-num{
  position:absolute;right:16px;top:4px;
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  color:var(--primary-100);
}

.pull-note{
  margin-top:var(--s-6);padding:var(--s-5);
  background:var(--accent-100);
  border:1px dashed var(--accent-700);border-radius:var(--r-2);
  font-family:var(--font-display);font-size:var(--fs-500);color:var(--primary-800);
  transform:rotate(-.35deg);
}
.pull-note p{margin:0}

/* ------------------------------------------------------------- steps -- */

.steps{list-style:none;padding-left:0;display:grid;gap:var(--s-6);grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.step{position:relative;padding-left:76px}
.step-num{
  position:absolute;left:0;top:-4px;width:56px;height:56px;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--paper);
  background:var(--primary);
  border-radius:52% 48% 51% 49% / 49% 52% 48% 51%;
  box-shadow:0 3px 0 var(--primary-800);
}
.step h3{margin-bottom:.4rem}
.step p{color:var(--muted);margin-bottom:.6rem}
.step .step-detail{
  font-size:var(--fs-200);color:var(--primary-800);font-weight:700;
  display:flex;gap:.5rem;align-items:flex-start;
}
.step .step-detail svg{width:18px;height:18px;stroke:var(--accent-700);flex:0 0 auto;margin-top:2px}

.arrow{display:block;color:var(--primary-400);opacity:.85;max-width:340px;margin:2.4rem auto 0}
.arrow svg{width:100%;height:auto;stroke:currentColor;fill:none}

.how-figure{position:relative;margin-top:var(--s-7)}
.how-figure img{
  border-radius:var(--r-2);border:10px solid var(--surface);
  box-shadow:var(--sh-3);transform:rotate(-.7deg);
  aspect-ratio:1600/1067;object-fit:cover;
}
.how-figure figcaption{
  margin-top:var(--s-4);font-size:var(--fs-200);color:var(--muted);
  font-family:var(--font-display);text-align:center;
}

/* ---------------------------------------------------------- features -- */

.feature-card .tagline{white-space:nowrap}
.feature-icon{
  width:52px;height:52px;display:grid;place-items:center;margin-bottom:var(--s-4);
  background:var(--primary-050);
  border:1.5px solid var(--primary-200);
  border-radius:58% 42% 47% 53% / 46% 55% 45% 54%;
}
.feature-icon svg{width:27px;height:27px;stroke:var(--primary);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feature-card h3{margin-bottom:.45rem;font-size:1.18rem}
.feature-card p{margin-bottom:0;color:var(--muted);font-size:var(--fs-300)}
.feature-card .tagline{
  display:inline-block;margin-top:var(--s-3);font-size:var(--fs-100);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-800);
}

/* ---------------------------------------------------------- outcomes -- */

.outcome{
  padding:var(--s-5);
  border:1px dashed rgba(242,246,238,.30);
  border-radius:var(--r-2);
  background:rgba(255,255,255,.035);
  transition:transform .35s cubic-bezier(.2,.72,.28,1), background-color .35s;
}
.outcome:hover{transform:perspective(900px) rotateX(4deg) translateY(-5px);background:rgba(255,255,255,.07)}
.outcome .big{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.3rem,1.7rem + 2.4vw,3.2rem);line-height:1;color:var(--accent);
  margin-bottom:.35rem;
}
.outcome h3{font-size:var(--fs-500);margin-bottom:.4rem}
.outcome p{color:var(--chalk-dim);font-size:var(--fs-300);margin-bottom:0}

/* ------------------------------------------------------ social proof -- */

.testimonial{
  position:relative;margin:0;background:var(--surface);
  border:1px solid var(--card-edge);border-radius:var(--r-1);
  padding:var(--s-6) var(--s-5) var(--s-5);
  box-shadow:var(--sh-2);
  background-image:repeating-linear-gradient(to bottom, transparent 0 26px, rgba(46,107,79,.07) 26px 27px);
  background-position:0 88px;
}
.testimonial:nth-child(1){transform:rotate(-.9deg)}
.testimonial:nth-child(2){transform:rotate(.5deg)}
.testimonial:nth-child(3){transform:rotate(-.4deg)}
.testimonial::before{
  content:"";position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(3deg);
  width:78px;height:26px;background:rgba(240,180,41,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.16);
}
.testimonial blockquote{margin:0 0 var(--s-4);font-size:var(--fs-400);line-height:1.62}
.testimonial blockquote p:last-child{margin-bottom:0}
.testimonial figcaption{border-top:1px dashed var(--card-edge);padding-top:var(--s-3);font-size:var(--fs-200)}
.testimonial .who{font-family:var(--font-display);font-weight:800;color:var(--primary-800);display:block}
.testimonial .where{color:var(--muted);display:block}
.stars{display:flex;gap:2px;margin-bottom:var(--s-3)}
.stars svg{width:16px;height:16px;fill:var(--accent);stroke:none}

.results{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);
  margin-top:var(--s-7);padding:var(--s-5);
  background:var(--primary-050);border:1px solid var(--primary-100);border-radius:var(--r-2);
}
.result{text-align:center}
.result .big{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.8rem,1.4rem + 1.5vw,2.4rem);color:var(--primary);line-height:1.1;
}
.result span.label{display:block;font-size:var(--fs-200);color:var(--muted);margin-top:.25rem}

/* ----------------------------------------------------------- pricing -- */

#pricing{background:linear-gradient(180deg,#F7F3E6 0%, var(--paper) 55%)}

.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);align-items:start}
.tier{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--surface);border:1px solid var(--card-edge);border-radius:var(--r-2);
  padding:var(--s-6) var(--s-5) var(--s-5);
  box-shadow:var(--sh-1);
}
.tier::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  border-radius:var(--r-2) var(--r-2) 0 0;
  background:repeating-linear-gradient(90deg,var(--primary-200) 0 14px,transparent 14px 22px);
}
.tier.is-recommended{
  border:2px solid var(--primary);box-shadow:var(--sh-3);
  transform:translateY(-8px);
}
.tier.is-recommended::before{background:var(--accent)}
.tier-tab{
  position:absolute;top:-16px;right:18px;
  background:var(--primary);color:#FFFFFF;
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-100);
  letter-spacing:.1em;text-transform:uppercase;
  padding:.4rem .75rem;border-radius:var(--r-1);
  box-shadow:0 3px 0 var(--primary-800);transform:rotate(1.6deg);
}
.tier h3{margin-bottom:.2rem;font-size:var(--fs-600)}
.tier .who{color:var(--muted);font-size:var(--fs-200);margin-bottom:var(--s-4);min-height:2.8em}
.tier .price{display:flex;align-items:baseline;gap:.4rem;margin-bottom:var(--s-4)}
.tier .amount{font-family:var(--font-display);font-weight:800;font-size:2.9rem;line-height:1;color:var(--primary-800)}
.tier .per{font-size:var(--fs-200);color:var(--muted);font-weight:700}
.tier ul{list-style:none;padding:0;margin:0 0 var(--s-5);border-top:1px dashed var(--card-edge);padding-top:var(--s-4)}
.tier li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-300);margin-bottom:.62rem;color:var(--ink)}
.tier li svg{width:18px;height:18px;flex:0 0 auto;margin-top:4px;stroke:var(--primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tier .btn{margin-top:auto}
.billing-note{
  margin-top:var(--s-6);text-align:center;color:var(--muted);font-size:var(--fs-300);
  max-width:64ch;margin-inline:auto;
}
.billing-note strong{color:var(--primary-800)}

/* --------------------------------------------------------------- faq -- */

.faq-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
.faq-list{border-top:1px solid var(--rule-strong)}
.faq-aside{position:sticky;top:104px}
.faq-aside h3{font-size:var(--fs-500);margin-bottom:.5rem}
.faq-aside p{color:var(--muted);font-size:var(--fs-200);margin-bottom:var(--s-4)}
.faq-aside .aside-mail{margin-top:var(--s-4);margin-bottom:0}
.faq-item{border-bottom:1px solid var(--rule-strong)}
.faq-item h3{margin:0}
.faq-q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);
  color:var(--ink);padding:1.15rem .25rem;line-height:1.4;
}
.faq-q:hover{color:var(--primary-700)}
.faq-icon{
  flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;margin-top:2px;
  border:1.5px solid var(--primary-200);border-radius:54% 46% 49% 51% / 47% 53% 47% 53%;
  transition:transform .3s ease-out,background-color .3s;
}
.faq-icon svg{width:15px;height:15px;stroke:var(--primary);stroke-width:2.2;stroke-linecap:round;fill:none}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(135deg);background:var(--accent-100)}
.faq-a{padding:0 3rem .4rem .25rem}
.faq-a[hidden]{display:none}
.faq-a p{color:var(--muted);margin-bottom:1rem}

/* ----------------------------------------------------------- contact -- */

#contact{position:relative}
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,4vw,3.4rem);align-items:start}
.contact-copy p{color:var(--chalk-dim)}
.contact-copy ul{list-style:none;padding:0;margin-top:var(--s-5)}
.contact-copy li{display:flex;gap:.65rem;align-items:flex-start;color:var(--chalk-dim);font-size:var(--fs-300);margin-bottom:.7rem}
.contact-copy li svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8;flex:0 0 auto;margin-top:3px}

.form-card{
  background:var(--surface);border-radius:var(--r-2);
  padding:clamp(1.4rem,1rem + 1.6vw,2.2rem);
  box-shadow:var(--sh-3);
  border-top:8px solid var(--accent);
  position:relative;
}
.form-card::after{
  content:"";position:absolute;left:26px;top:8px;bottom:16px;width:1px;
  background:var(--pencil-red-soft);
}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.field{display:flex;flex-direction:column;gap:.32rem}
.field-full{grid-column:1 / -1}
.field label{font-family:var(--font-display);font-weight:700;font-size:var(--fs-200);color:var(--primary-800)}
.field .hint{font-size:var(--fs-100);color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:var(--fs-300);color:var(--ink);
  background:#FFFEF9;
  border:1px solid var(--card-edge);border-bottom:2px solid var(--primary-200);
  border-radius:var(--r-1);padding:.68rem .8rem;width:100%;
  transition:border-color .18s, box-shadow .18s;
}
.field textarea{min-height:128px;resize:vertical;line-height:1.6}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--primary) 50%),linear-gradient(135deg,var(--primary) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.2rem}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--primary-200)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--primary);box-shadow:0 2px 0 rgba(46,107,79,.18)}
.field [aria-invalid="true"]{border-color:var(--pencil-red);border-bottom-color:var(--pencil-red);background:#FFF7F5}
.err{color:#9B3B29;font-size:var(--fs-100);font-weight:700;min-height:1.1em}
.err:empty{min-height:0}

.consent{display:flex;flex-direction:row;gap:.65rem;align-items:flex-start;grid-column:1 / -1;font-size:var(--fs-200);color:var(--muted)}
.consent input{width:20px;height:20px;flex:0 0 auto;margin-top:3px;accent-color:var(--primary)}
.form-foot{margin-top:var(--s-4);font-size:var(--fs-200);color:var(--muted)}
.form-foot a{font-weight:700}

/* ------------------------------------------------------------ footer -- */

.site-footer{background:var(--board-deep);color:var(--chalk);padding-top:var(--s-8)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:var(--s-6)}
.footer-brand .brand{color:var(--chalk)}
.footer-brand .brand-name em{color:var(--accent)}
.footer-brand p{color:var(--chalk-faint);font-size:var(--fs-200);margin-top:var(--s-4);max-width:34ch}
.social{display:flex;gap:.55rem;margin-top:var(--s-5);padding:0;list-style:none}
.social a{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(242,246,238,.28);border-radius:52% 48% 47% 53% / 48% 52% 48% 52%;
  transition:background-color .2s, border-color .2s, transform .2s;
}
.social a:hover{background:rgba(240,180,41,.18);border-color:var(--accent);transform:translateY(-2px) rotate(-3deg)}
.social svg{width:19px;height:19px;stroke:var(--chalk);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.footer-col h2{font-size:var(--fs-200);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-300);margin-bottom:var(--s-4)}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:.55rem}
.footer-col a{color:var(--chalk-dim);text-decoration:none;font-size:var(--fs-200)}
.footer-col a:hover{color:var(--chalk);text-decoration:underline;text-decoration-color:var(--accent)}
.footer-col .publisher{color:var(--chalk-faint);font-size:var(--fs-100);margin-top:var(--s-4)}
.footer-base{
  margin-top:var(--s-7);border-top:1px dashed rgba(242,246,238,.22);
  padding-block:var(--s-5);display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);
  justify-content:space-between;color:var(--chalk-faint);font-size:var(--fs-100);
}
.footer-base a{color:var(--chalk-faint)}
.footer-base p{margin:0}

/* ------------------------------------------------------ author strip -- */

.byline{
  display:flex;gap:var(--s-4);align-items:center;flex-wrap:wrap;
  margin-top:var(--s-7);padding:var(--s-5);
  background:var(--surface);border:1px solid var(--card-edge);
  border-left:5px solid var(--accent);border-radius:var(--r-1);
  box-shadow:var(--sh-1);
}
.byline p{margin:0;font-size:var(--fs-200);color:var(--muted);max-width:64ch}
.byline strong{font-family:var(--font-display)}

/* -------------------------------------------------------- inner page -- */

.page-head{
  background:var(--board);color:var(--chalk);
  padding-block:clamp(2.6rem,2rem + 3vw,4.4rem);
}
.page-head h1{color:var(--chalk);max-width:20ch}
.page-head p{color:var(--chalk-dim);max-width:62ch;margin-bottom:0}
.crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0 0 var(--s-4);font-size:var(--fs-100)}
.crumbs li{color:var(--chalk-faint)}
.crumbs li + li::before{content:"/";margin-right:.5rem;color:var(--accent)}
.crumbs a{color:var(--accent-300);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.prose{max-width:74ch}
.prose h2{margin-top:var(--s-7);font-size:clamp(1.35rem,1.15rem + .9vw,1.8rem)}
.prose h3{margin-top:var(--s-6);font-size:var(--fs-500)}
.prose p,.prose li{color:#2C3F37}
.prose ul,.prose ol{padding-left:1.3rem}
.prose .meta{font-size:var(--fs-200);color:var(--muted)}
.prose table{width:100%;border-collapse:collapse;margin-bottom:var(--s-5);font-size:var(--fs-300)}
.prose th,.prose td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--card-edge)}
.prose th{font-family:var(--font-display);color:var(--primary-800)}

.fact-card{
  background:var(--surface);border:1px solid var(--card-edge);border-left:5px solid var(--primary);
  border-radius:var(--r-1);padding:var(--s-5);box-shadow:var(--sh-1);margin-bottom:var(--s-5);
}
.fact-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.45rem var(--s-5)}
.fact-card dt{font-family:var(--font-display);font-weight:700;color:var(--primary-800);font-size:var(--fs-200)}
.fact-card dd{margin:0;font-size:var(--fs-300)}

.author-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(1.6rem,3vw,3rem);align-items:start}
.author-portrait img{
  border-radius:var(--r-2);border:8px solid var(--surface);box-shadow:var(--sh-3);
  transform:rotate(-1.4deg);width:100%;
}
.author-portrait .card{margin-top:var(--s-6);font-size:var(--fs-200)}
.author-portrait .card p{margin-bottom:.5rem}

.map-group{margin-bottom:var(--s-6)}
.map-group ul{list-style:none;padding:0;margin:0}
.map-group li{padding:.7rem 0;border-bottom:1px dashed var(--card-edge)}
.map-group a{font-family:var(--font-display);font-weight:700;text-decoration:none}
.map-group a:hover{text-decoration:underline}
.map-group .desc{display:block;color:var(--muted);font-size:var(--fs-200)}

.notice-page{display:grid;place-items:center;min-height:58vh;text-align:center;padding-block:var(--s-8)}
.notice-page .big-num{
  font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,3rem + 8vw,8rem);
  line-height:.9;color:var(--primary-100);margin-bottom:var(--s-4);
}
.notice-page .actions{display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:center;margin-top:var(--s-5)}
.stamp{
  display:inline-block;border:3px double var(--primary);color:var(--primary);
  font-family:var(--font-display);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:.5rem 1rem;border-radius:var(--r-1);transform:rotate(-4deg);font-size:var(--fs-200);
  margin-bottom:var(--s-5);
}

/* ------------------------------------------------------- responsive -- */

@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr}
  .hero-figure{max-width:640px;margin-inline:auto}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-5)}
  .author-layout{grid-template-columns:1fr;max-width:680px}
  .author-portrait{max-width:300px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .tier.is-recommended{transform:none}
}

@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:2px solid var(--primary-200);
    box-shadow:var(--sh-3);
    flex-direction:column;align-items:stretch;gap:0;padding:var(--s-4) clamp(1rem,4vw,2rem) var(--s-5);
    display:none;
  }
  .nav.is-open{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list li{border-bottom:1px dashed var(--card-edge)}
  .nav-list a{display:block;padding:.85rem 0;font-size:var(--fs-400)}
  .nav .btn{margin-top:var(--s-4)}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .faq-aside{position:static}
  .steps{grid-template-columns:1fr}
  .results{grid-template-columns:1fr;gap:var(--s-4)}
  .form-grid{grid-template-columns:1fr}
  .testimonial{transform:none!important}
}

@media (max-width:560px){
  :root{--rule-gap:30px}
  .grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-figure img{border-width:6px;transform:none}
  .hero-figure figcaption{position:static;transform:none;margin-top:var(--s-4);max-width:none}
  .faq-a{padding-right:1rem}
  .step{padding-left:0;padding-top:68px}
  .step-num{top:0}
}

/* --------------------------------------------------- reduced motion -- */

@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}
  .flip:hover,.flip:focus-within,.outcome:hover,.btn:hover{transform:none}
}

/* --------------------------------------------------------------- print */

@media print{
  .site-header,.site-footer,.nav,.skip-link,.hero-figure,.how-figure{display:none}
  body{background:#FFFFFF;color:#000000}
  .board{background:#FFFFFF;color:#000000;box-shadow:none}
}

/* ------------------------------------- board context color overrides -- */

.board .step p{color:var(--chalk-dim)}
.board .step .step-detail{color:var(--accent-300)}
.board .step .step-detail svg{stroke:var(--accent)}
.board .how-figure figcaption{color:var(--chalk-dim)}
.board .arrow{color:var(--chalk-faint);opacity:1}
.board .card,.board .form-card{color:var(--ink)}
.board .card p,.board .form-card p{color:var(--muted)}

/* ==========================================================================
   The Sub Folder: the magazine
   Same index cards, notebook rules and chalkboard as the rest of the site.
   ========================================================================== */

/* ------------------------------------------------- article and index head */

.mag-hero{padding-block:clamp(2.2rem,1.7rem + 2.6vw,3.6rem) clamp(2.6rem,2rem + 3vw,4rem)}
.mag-hero .crumbs{margin-bottom:var(--s-5)}
.mag-crumbs .crumbs{margin-bottom:var(--s-4)}
.mag-crumbs .crumbs li:last-child{max-width:44ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mag-kicker{
  display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;
  margin:0 0 var(--s-4);
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-100);
  letter-spacing:.14em;text-transform:uppercase;
}
.mag-kicker a{color:var(--accent);text-decoration:none}
.mag-kicker a:hover{text-decoration:underline}
.mag-tag{
  display:inline-block;padding:.28rem .7rem;
  border:1px dashed var(--accent-300);border-radius:var(--r-pill);
  background:rgba(240,180,41,.14);color:var(--accent-300);
  letter-spacing:.1em;
}

.mag-hero h1{max-width:22ch}
.mag-index-hero h1{max-width:14ch}
.mag-index-hero .mag-standfirst{font-size:clamp(1.1rem,1rem + .7vw,1.4rem);max-width:52ch}
.mag-standfirst{
  color:var(--chalk-dim);
  font-size:clamp(1.06rem,1rem + .5vw,1.28rem);
  line-height:1.55;max-width:60ch;margin-bottom:0;
}
.mag-index-note{
  color:var(--chalk-faint);font-size:var(--fs-300);
  max-width:62ch;margin-top:var(--s-4);margin-bottom:0;
}

.mag-byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem var(--s-5);
  margin-top:var(--s-5);padding-top:var(--s-4);
  border-top:1px dashed rgba(242,246,238,.28);
}
.mag-byline p{margin:0}
.mag-byline-who{
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-300);color:var(--chalk);
}
.mag-byline-who a{color:var(--accent-300)}
.mag-byline-meta{
  display:flex;flex-wrap:wrap;gap:.35rem var(--s-4);
  font-size:var(--fs-200);color:var(--chalk-faint);
}
.mag-byline-meta span{display:inline-flex;align-items:center;gap:.4rem}
.mag-byline-meta span + span::before{
  content:"";width:14px;height:0;border-top:1px solid var(--accent);
  transform:rotate(-3deg);opacity:.8;
}

/* ------------------------------------------------------- featured photo */

.mag-figure{
  position:relative;max-width:980px;
  margin:calc(var(--s-6) * -1) auto var(--s-7);
}
.mag-figure img{
  width:100%;aspect-ratio:1536/1024;object-fit:cover;
  border:10px solid var(--surface);border-radius:var(--r-2);
  box-shadow:var(--sh-3);transform:rotate(-.55deg);
}

/* ----------------------------------------------------------- the column */

.mag-shell{max-width:840px}

.mag-body{
  max-width:70ch;margin-inline:auto;
  font-size:clamp(1.06rem,1.03rem + .18vw,1.14rem);
  line-height:1.72;
}
.mag-body > *:first-child{margin-top:0}
.mag-body p{margin-bottom:var(--s-5);color:#2C3F37}
.mag-body h2{
  position:relative;margin-top:var(--s-7);margin-bottom:var(--s-4);
  padding-top:var(--s-5);border-top:1px dashed var(--rule-strong);
  font-size:clamp(1.42rem,1.2rem + 1vw,2rem);
}
.mag-body h2::after{
  content:"";position:absolute;left:0;top:-2px;width:58px;height:4px;
  background:var(--accent);transform:rotate(-.5deg);opacity:.9;
}
.mag-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.mag-body h2:first-child::after{display:none}
.mag-body h3{
  margin-top:var(--s-6);margin-bottom:var(--s-3);
  font-size:clamp(1.12rem,1.05rem + .4vw,1.32rem);color:var(--primary-800);
}
.mag-body ul,.mag-body ol{margin-bottom:var(--s-5);padding-left:1.35rem}
.mag-body li{margin-bottom:.55rem;color:#2C3F37}
.mag-body li::marker{color:var(--primary-400)}
.mag-body strong{color:var(--primary-800)}
.mag-body a{font-weight:700}
.mag-body blockquote{
  margin:var(--s-6) 0;padding:var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 8px);
  background:var(--surface);border:1px solid var(--card-edge);
  border-left:5px solid var(--accent);border-radius:var(--r-1);
  box-shadow:var(--sh-1);font-family:var(--font-display);font-size:var(--fs-500);
  line-height:1.5;color:var(--primary-800);
}
.mag-body blockquote p:last-child{margin-bottom:0}
.mag-body table{
  width:100%;border-collapse:collapse;margin-bottom:var(--s-6);
  font-size:var(--fs-300);background:var(--surface);
  border:1px solid var(--card-edge);
}
.mag-body th,.mag-body td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--card-edge)}
.mag-body th{font-family:var(--font-display);color:var(--primary-800);background:var(--primary-050)}
.mag-body tbody tr:last-child td{border-bottom:0}

/* the contextual reading links the magazine drops between sections */
.inline-read{
  position:relative;margin:var(--s-6) 0;
  padding:.9rem 1.1rem .9rem 3rem;
  background:var(--accent-100);border:1px dashed var(--accent-700);
  border-radius:var(--r-1);transform:rotate(-.3deg);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-300);
  color:var(--primary-800);line-height:1.45;
}
.inline-read::before{
  content:"";position:absolute;left:1.15rem;top:1.35rem;
  width:12px;height:12px;
  border-right:2px solid var(--accent-800);border-bottom:2px solid var(--accent-800);
  transform:rotate(-45deg);
}
.inline-read a{color:var(--primary-800);text-decoration-color:var(--accent-700)}
.inline-read a:hover{color:var(--primary)}

/* -------------------------------------------------------- call to action */

.mag-cta{
  max-width:70ch;margin:var(--s-8) auto 0;
  padding:clamp(1.5rem,1.1rem + 1.8vw,2.4rem);
  border-radius:var(--r-2);box-shadow:var(--sh-board), var(--sh-3);
  overflow:hidden;
}
.mag-cta h2{font-size:clamp(1.4rem,1.2rem + .9vw,1.9rem);margin-bottom:var(--s-4);max-width:24ch}
.mag-cta p{color:var(--chalk-dim);max-width:56ch;margin-bottom:var(--s-5)}
.mag-cta .eyebrow{margin-bottom:var(--s-3)}

/* ------------------------------------------------------------ author box */

.mag-author{
  display:flex;gap:var(--s-5);align-items:flex-start;
  max-width:70ch;margin:var(--s-7) auto 0;
  padding:var(--s-5);
  background:var(--surface);border:1px solid var(--card-edge);
  border-left:5px solid var(--primary);border-radius:var(--r-1);
  box-shadow:var(--sh-1);
}
.mag-author-photo{
  width:110px;height:110px;flex:0 0 auto;object-fit:cover;
  border:6px solid var(--paper);border-radius:var(--r-1);
  box-shadow:var(--sh-2);transform:rotate(-1.8deg);
}
.mag-author-name{
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-500);
  margin-bottom:.35rem;color:var(--ink);
}
.mag-author-text p{color:var(--muted);font-size:var(--fs-300);margin-bottom:.6rem}
.mag-author-link{margin-bottom:0;font-weight:700}
.mag-author-link a{font-family:var(--font-display)}

/* -------------------------------------------------------------- read also */

.mag-also{background:linear-gradient(180deg,var(--paper) 0%, #F7F3E6 100%)}
.mag-also h2{font-size:clamp(1.5rem,1.25rem + 1.1vw,2.1rem);margin-bottom:var(--s-6)}
.mag-also-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.mag-also-note{margin-top:var(--s-6);margin-bottom:0;color:var(--muted);font-size:var(--fs-200)}

.mag-mini{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--card-edge);border-radius:var(--r-1);
  box-shadow:var(--sh-1);overflow:hidden;
  transition:transform .42s cubic-bezier(.2,.72,.28,1), box-shadow .42s ease-out, border-color .3s;
}
.mag-mini:hover,.mag-mini:focus-within{
  transform:perspective(1100px) rotateY(-4deg) translateY(-6px);
  box-shadow:var(--sh-3);border-color:var(--primary-200);
}
.mag-mini-media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.mag-mini-body{
  padding:var(--s-4) var(--s-4) var(--s-5) calc(var(--s-4) + 12px);
  background-image:
    linear-gradient(to right, transparent 0 14px, var(--pencil-red-soft) 14px 15px, transparent 15px),
    repeating-linear-gradient(to bottom, transparent 0 25px, rgba(46,107,79,.07) 25px 26px);
  background-position:0 0, 0 8px;
  background-size:100% 100%, 100% 100%;
}
.mag-mini-date{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-100);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem;
}
.mag-mini-title{font-size:1.06rem;line-height:1.28;margin-bottom:.5rem}
.mag-mini-title a{color:var(--ink);text-decoration:none}
.mag-mini-title a::after{content:"";position:absolute;inset:0}
.mag-mini:hover .mag-mini-title a{color:var(--primary-700);text-decoration:underline;text-decoration-color:var(--accent)}
.mag-mini-dek{
  font-size:var(--fs-200);color:var(--muted);margin-bottom:0;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

/* ----------------------------------------------------- the index of cards */

.mag-index{padding-top:clamp(2.4rem,1.8rem + 2.4vw,3.6rem)}
.mag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--s-5)}

.mag-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--card-edge);border-radius:var(--r-1);
  box-shadow:var(--sh-1);overflow:hidden;
  transition:transform .42s cubic-bezier(.2,.72,.28,1), box-shadow .42s ease-out, border-color .3s;
}
.mag-card:hover,.mag-card:focus-within{
  transform:perspective(1200px) rotateY(-5deg) rotateX(3deg) translateY(-7px);
  box-shadow:var(--sh-3);border-color:var(--primary-200);
}
.mag-card-media{position:relative;overflow:hidden;background:var(--primary-050)}
.mag-card-media img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease-out}
.mag-card:hover .mag-card-media img{transform:scale(1.03)}
.mag-card-body{
  flex:1 1 auto;
  padding:var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 14px);
  background-image:
    linear-gradient(to right, transparent 0 18px, var(--pencil-red-soft) 18px 19px, transparent 19px),
    repeating-linear-gradient(to bottom, transparent 0 26px, rgba(46,107,79,.07) 26px 27px);
  background-position:0 0, 0 10px;
  background-size:100% 100%, 100% 100%;
}
.mag-card-tag{
  display:inline-block;margin-bottom:.5rem;
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-100);
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-800);
}
.mag-card-title{font-size:1.2rem;line-height:1.26;margin-bottom:.55rem}
.mag-card-title a{color:var(--ink);text-decoration:none}
.mag-card-title a::after{content:"";position:absolute;inset:0}
.mag-card:hover .mag-card-title a{color:var(--primary-700)}
.mag-card-dek{
  color:var(--muted);font-size:var(--fs-300);margin-bottom:var(--s-4);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.mag-card-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  margin-bottom:0;padding-top:var(--s-3);
  border-top:1px dashed var(--card-edge);
  font-size:var(--fs-100);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.mag-sep{width:16px;height:0;border-top:1px solid var(--accent);transform:rotate(-3deg)}

/* the lead story: a full width index card with the photo alongside */
.mag-card.lead{grid-column:1 / -1;flex-direction:row;align-items:stretch;overflow:visible}
.mag-card.lead .mag-card-media{border-radius:var(--r-1) 0 0 var(--r-1);overflow:hidden}
.mag-card.lead::before{
  content:"";position:absolute;top:-14px;left:52px;z-index:2;
  width:96px;height:28px;transform:rotate(-2.6deg);
  background:rgba(240,180,41,.55);
  border-left:1px dashed rgba(255,255,255,.55);
  border-right:1px dashed rgba(255,255,255,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.16);
}
.mag-card.lead .mag-card-media{flex:1 1 54%;min-height:100%}
.mag-card.lead .mag-card-media img{height:100%;aspect-ratio:auto;min-height:280px}
.mag-card.lead .mag-card-body{
  flex:1 1 46%;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.4rem,1rem + 1.6vw,2.2rem);
  padding-left:calc(clamp(1.4rem,1rem + 1.6vw,2.2rem) + 14px);
}
.mag-card.lead .mag-card-title{font-size:clamp(1.4rem,1.15rem + 1.1vw,2rem);line-height:1.16}
.mag-card.lead .mag-card-dek{font-size:var(--fs-400);-webkit-line-clamp:5}
.mag-card.lead:hover,.mag-card.lead:focus-within{transform:translateY(-6px) rotate(-.35deg)}

/* ---------------------------------------------- magazine on the home page */

#magazine{background:linear-gradient(180deg,var(--paper) 0%, #F7F3E6 100%)}

.mag-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mag-home-more{margin-top:var(--s-6);display:flex;justify-content:center}

/* ---------------------------------------------------- magazine responsive */

@media (max-width:1020px){
  .mag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mag-also-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mag-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mag-card.lead{flex-direction:column}
  .mag-card.lead .mag-card-media{border-radius:var(--r-1) var(--r-1) 0 0}
  .mag-card.lead .mag-card-media img{min-height:0;aspect-ratio:3/2}
  .mag-figure{max-width:820px}
}

@media (max-width:760px){
  .mag-grid,.mag-also-grid,.mag-grid-3{grid-template-columns:1fr}
  .mag-figure{margin-top:calc(var(--s-5) * -1)}
  .mag-figure img{border-width:7px;transform:none}
  .mag-body{font-size:1.04rem}
  .mag-author{flex-direction:column;gap:var(--s-4)}
  .mag-author-photo{width:92px;height:92px}
  .mag-mini-dek{-webkit-line-clamp:3}
}

@media (max-width:420px){
  .mag-hero h1{font-size:clamp(1.68rem,1.2rem + 3.6vw,2.1rem)}
  .mag-crumbs .crumbs li:last-child{max-width:20ch}
  .mag-byline{gap:.45rem var(--s-4)}
  .mag-card-body{padding:var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 12px)}
  .mag-card-body::before{left:14px}
  .mag-card.lead .mag-card-body{padding:var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 12px)}
  .mag-card.lead::before{left:24px;width:78px}
  .mag-cta,.mag-author{padding:var(--s-4)}
  .inline-read{padding-left:2.6rem}
  .mag-body blockquote{padding:var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 6px);font-size:var(--fs-400)}
  .mag-body th,.mag-body td{padding:.5rem .55rem;font-size:var(--fs-200)}
}

@media (prefers-reduced-motion: reduce){
  .mag-card:hover,.mag-card:focus-within,
  .mag-mini:hover,.mag-mini:focus-within,
  .mag-card:hover .mag-card-media img{transform:none}
}

/* the run of published articles on the author page */
.mag-post-list{list-style:none;padding:0;margin:0 0 var(--s-5)}
.mag-post-list li{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.25rem var(--s-4);padding:.7rem 0;border-bottom:1px dashed var(--card-edge);
}
.mag-post-list a{font-family:var(--font-display);font-weight:700;text-decoration:none;max-width:46ch}
.mag-post-list a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.mag-post-list time{
  font-size:var(--fs-100);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}



/* Network strip: five sibling products, rotated so every site is linked the same
   number of times. Spans the full footer grid rather than adding a fifth column,
   because each footer declares a fixed column count and a fifth item would wrap. */
.site-network { grid-column: 1 / -1; flex-basis: 100%; width: 100%; min-width: 0;
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
/* The strip sits on the chalkboard footer (--board-deep), so heading and links take
   the same pencil yellow and chalk the other footer headings and links already use.
   With no colour of its own the link fell through to the global a{color:
   var(--primary-700)}, a dark green that is all but invisible on that background. */
.site-network h2 { font: inherit; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; margin: 0 0 0.7rem;
  color: var(--accent-300); opacity: 1; }
/* One row, never wrapped. Where the footer column is too narrow for all five names,
   this row alone scrolls sideways instead of breaking onto further lines. */
.site-network ul { list-style: none; margin: 0; padding: 0 0 0.2rem;
  display: flex; flex-wrap: nowrap; gap: 1.5rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.site-network li { flex: 0 0 auto; }
.site-network li + li { margin-top: 0; }
.site-network a { font-size: 0.86rem; font-weight: 700; text-decoration: none;
  color: var(--chalk); opacity: 1; white-space: nowrap;
  border-bottom: 1px solid transparent; }
.site-network a:hover, .site-network a:focus-visible { border-bottom-color: var(--accent); }
@media (max-width: 620px) { .site-network ul { gap: 1.1rem; } }


/* Decorative bleed guard. Several sections intentionally hang a rotated or offset
   pseudo element past the viewport edge. overflow-x: clip contains them without
   creating a scroll container, so position: sticky keeps working, unlike overflow
   hidden. Genuine content overflow is still reported by the element level check in
   the browser pass. */
html { overflow-x: clip; }
body { overflow-x: clip; }


/* Wide content on phones. Class names for the prose wrapper differ from site to site,
   so this targets tables and pre blocks directly: they scroll inside their own box
   rather than pushing cells past the right edge, per the build contract. */
@media (max-width: 700px) {
  table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { overflow-wrap: anywhere; }
  pre { overflow-x: auto; max-width: 100%; }
}