/* ==========================================================================
   Samuel Fisher — shared site stylesheet
   ========================================================================== */

:root{
  --ink:#141414;
  --ink-soft:#1e1e1e;
  --gray-800:#232323;
  --cream:#FFFEF1;
  --lime:#DEFF13;
  --pink:#EF007A;
  --gray-600:#6E6E6E;
  --gray-400:#969696;

  --font-display:'Anton','Arial Narrow',sans-serif;
  --font-mono:'Space Mono','Courier New',monospace;

  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:3rem;
  --space-6:4rem;
  --space-7:6rem;
  --space-8:8rem;

  --nav-h:4.75rem;
  --max-w:1200px;
  --max-w-article:44rem;

  --text-display:clamp(3rem, 5.6vw + 1rem, 6.5rem);
  --text-h2:clamp(2.25rem, 4vw + .5rem, 3.75rem);
  --text-h3:clamp(1.375rem, 1vw + 1rem, 1.75rem);
  --text-body:clamp(1rem, .3vw + .9rem, 1.125rem);
  --text-eyebrow:.8125rem;
  --text-caption:.75rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:var(--text-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3,h4,p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

section{ scroll-margin-top:var(--nav-h); }

.wrap{
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 5vw, 3rem);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:var(--text-eyebrow);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.highlight{
  background:var(--lime);
  color:var(--ink);
  padding:0 .18em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
}

/* ---------- Reveal-on-scroll (progressive enhancement) ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
html:not(.js) .reveal{ opacity:1; transform:none; }

/* Hero content: deterministic entrance, no IntersectionObserver dependency
   (above-the-fold content must never depend on scroll timing to appear) */
.hero-enter{
  opacity:0;
  transform:translateY(14px);
  animation:hero-in .6s ease forwards;
  animation-delay:var(--d, 0s);
}
@media (prefers-reduced-motion: reduce){
  .hero-enter{ animation:none; opacity:1; transform:none; }
}
@keyframes hero-in{
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; }
  .blob{ animation:none !important; }
}

/* ---------- Nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--ink);
  color:var(--cream);
}
.nav .wrap{
  min-height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-2);
  padding-block:var(--space-2);
}
.nav-mark{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.04em;
  text-decoration:none;
  white-space:nowrap;
}
.nav-mark span{ color:var(--lime); }
.nav-links{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  flex-wrap:wrap;
}
.nav-links a{
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--cream);
  opacity:.85;
  transition:opacity .15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ opacity:1; }
.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  background:var(--lime);
  color:var(--ink);
  font-weight:700;
  font-size:.8125rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.65em 1.1em;
  border:1px solid var(--lime);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nav-cta:hover{
  background:var(--ink);
  color:var(--lime);
  border-color:var(--lime);
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.nav-toggle-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:2.25rem;
  height:2.25rem;
  cursor:pointer;
  flex:none;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--cream);
  transition:transform .25s ease, opacity .2s ease;
}
@media(max-width:899px){
  .nav-toggle{ display:flex; }
  .nav .wrap{ flex-wrap:nowrap; gap:var(--space-1); }
  .nav-mark{ font-size:.875rem; }
  .nav-actions{ gap:var(--space-2); flex:none; }
  .nav-cta{ padding:.6em .85em; font-size:.75rem; white-space:nowrap; }
  .nav-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:5;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--ink);
    border-top:1px solid rgba(255,254,241,.12);
    padding:0 clamp(1.25rem, 5vw, 3rem) var(--space-3);
    max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav-links a{
    width:100%;
    padding:var(--space-2) 0;
    border-bottom:1px solid rgba(255,254,241,.08);
    font-size:1rem;
  }
  .nav-toggle-input:checked ~ .wrap .nav-links{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .nav-toggle-input:checked ~ .wrap .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle-input:checked ~ .wrap .nav-toggle span:nth-child(2){ opacity:0; }
  .nav-toggle-input:checked ~ .wrap .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce){
  .nav-links, .nav-toggle span{ transition:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:var(--cream);
  padding-block: var(--space-7) var(--space-8);
  isolation:isolate;
}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  will-change:transform;
}
.blob-lime{
  width:min(60vw,620px);
  height:min(60vw,620px);
  top:-15%;
  left:-10%;
  background:radial-gradient(circle at 30% 30%, var(--lime), transparent 70%);
  opacity:.55;
  animation:drift-a 24s ease-in-out infinite;
}
.blob-pink{
  width:min(46vw,460px);
  height:min(46vw,460px);
  bottom:-18%;
  right:-8%;
  background:radial-gradient(circle at 60% 40%, var(--pink), transparent 70%);
  opacity:.35;
  animation:drift-b 30s ease-in-out infinite;
}
.blob-ghost{
  width:min(38vw,380px);
  height:min(38vw,380px);
  top:35%;
  right:18%;
  background:radial-gradient(circle, var(--gray-400), transparent 70%);
  opacity:.16;
  animation:drift-c 26s ease-in-out infinite;
}
@keyframes drift-a{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(4%,6%) scale(1.08); }
}
@keyframes drift-b{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-5%,-4%) scale(1.1); }
}
@keyframes drift-c{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(-6%,4%); }
}
.hero-veil{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(20,20,20,.15), rgba(20,20,20,.65) 80%);
}
.hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  gap:var(--space-6);
}
.hero-eyebrow{ color:var(--lime); }
.hero-eyebrow::before{ content:"// "; }
.hero h1{
  margin-top:var(--space-3);
  font-family:var(--font-display);
  font-size:var(--text-display);
  line-height:1.02;
  letter-spacing:-.02em;
  text-transform:uppercase;
  max-width:16ch;
}
.hero h1 .highlight{ display:inline-block; }

/* Hand-drawn swash underline */
.swash-word{
  position:relative;
  display:inline-block;
}
.swash-word .swash{
  position:absolute;
  left:-.02em;
  right:-.02em;
  bottom:-.1em;
  width:calc(100% + .04em);
  height:.24em;
  overflow:visible;
  pointer-events:none;
}
.swash-word .swash path{
  fill:none;
  stroke:var(--lime);
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:220;
  stroke-dashoffset:220;
  animation:draw-swash .9s .6s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes draw-swash{
  to{ stroke-dashoffset:0; }
}
@media (prefers-reduced-motion: reduce){
  .swash-word .swash path{
    animation:none;
    stroke-dashoffset:0;
  }
}

/* By the numbers band */
.stats-band{
  background:var(--ink);
  border-top:1px solid rgba(255,254,241,.12);
  padding-block:var(--space-6);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-5) var(--space-4);
}
@media(min-width:768px){
  .stats-grid{ grid-template-columns:repeat(4,1fr); }
}
.stat{ display:grid; gap:.4em; }
.stat-num{
  font-family:var(--font-display);
  font-size:clamp(2.25rem, 4vw + 1rem, 3.5rem);
  line-height:1;
  color:var(--lime);
  text-transform:uppercase;
}
.stat-label{
  font-size:var(--text-caption);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gray-400);
}
.hero-sub{
  margin-top:var(--space-4);
  max-width:46ch;
  font-size:var(--text-body);
  color:var(--cream);
  opacity:.82;
}

.glass{
  margin-top:var(--space-5);
  max-width:30rem;
  background:rgba(255,254,241,.06);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,254,241,.18);
  padding:var(--space-4);
  display:grid;
  gap:var(--space-3);
}
.glass-tag{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  color:var(--pink);
  font-size:var(--text-caption);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.glass-tag .dot{
  width:.5em;
  height:.5em;
  border-radius:50%;
  background:var(--pink);
  flex:none;
}
.glass-list{
  display:grid;
  gap:.6em;
  font-size:.9375rem;
}
.glass-list li{
  display:flex;
  gap:.65em;
}
.glass-list li::before{
  content:"→";
  color:var(--lime);
  flex:none;
}
.glass-actions{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  flex-wrap:wrap;
}
.text-link{
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:underline;
  text-underline-offset:.25em;
  color:var(--cream);
  opacity:.75;
}
.text-link:hover{ opacity:1; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  width:fit-content;
  background:var(--lime);
  color:var(--ink);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.875rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.9em 1.4em;
  border:1px solid var(--lime);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover{
  transform:translate(-3px,-3px);
  box-shadow:5px 5px 0 var(--cream);
}
.btn-ghost{
  background:transparent;
  color:var(--cream);
  border-color:rgba(255,254,241,.4);
}
.btn-ghost:hover{
  background:transparent;
  box-shadow:5px 5px 0 var(--lime);
  border-color:var(--lime);
  color:var(--cream);
}
.btn-outline{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}
.btn-outline:hover{
  background:var(--ink);
  color:var(--lime);
  box-shadow:5px 5px 0 var(--lime);
}

/* ---------- As-seen-in trust strip ---------- */
.trust-strip{
  background:var(--ink);
  border-top:1px solid rgba(255,254,241,.12);
  padding-block:var(--space-4);
}
.trust-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3) var(--space-5);
}
.trust-label{
  color:var(--gray-400);
  font-size:var(--text-caption);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
.trust-marks{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4) var(--space-5);
  align-items:center;
}
.trust-marks span{
  font-family:var(--font-display);
  font-size:1.25rem;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--cream);
  opacity:.9;
}

/* ---------- Section shell ---------- */
.section{ padding-block:var(--space-7); }
.section-head{
  display:grid;
  gap:var(--space-2);
  margin-bottom:var(--space-6);
  max-width:42rem;
}
.section-head .eyebrow{ color:var(--gray-600); }
.section-head h2{
  font-family:var(--font-display);
  font-size:var(--text-h2);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-.005em;
}
.section-lede{
  margin-top:var(--space-2);
  color:var(--gray-600);
  font-size:var(--text-body);
}
.section-head-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-3);
}
.on-dark .section-head .eyebrow{ color:var(--lime); }

/* ---------- Grid / cards ---------- */
.grid-3{
  display:grid;
  gap:var(--space-4);
  grid-template-columns:1fr;
}
@media(min-width:640px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media(min-width:1024px){
  .grid-3{ grid-template-columns:repeat(3,1fr); }
}

.work{ background:var(--cream); }
.card{
  background:var(--cream);
  border:1px solid var(--ink);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  transform:translate(-4px,-4px);
  box-shadow:8px 8px 0 var(--lime);
}
.card-thumb{
  aspect-ratio:4/3;
  background-color:var(--ink);
  background-image:radial-gradient(var(--gray-600) 1px, transparent 1.6px);
  background-size:11px 11px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid var(--ink);
}
.card-thumb svg{
  width:56px;
  height:56px;
  stroke:var(--lime);
}
.card-body{
  padding:var(--space-3);
  display:grid;
  gap:.55em;
}
.card-tag{
  font-size:var(--text-caption);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gray-600);
}
.card h3{
  font-family:var(--font-display);
  font-size:var(--text-h3);
  text-transform:uppercase;
  line-height:1.05;
}
.card-stat{
  font-weight:700;
  color:var(--ink);
  background:var(--lime);
  display:inline-block;
  padding:.15em .4em;
  width:fit-content;
  font-size:.875rem;
}
.card p.desc{
  color:var(--gray-600);
  font-size:.9375rem;
}

/* ---------- Blog cards ---------- */
.blog{ background:var(--cream); }
.post-card{
  display:flex;
  flex-direction:column;
  background:var(--cream);
  border:1px solid var(--ink);
  padding:var(--space-3);
  text-decoration:none;
  color:var(--ink);
  gap:.75em;
  transition:transform .2s ease, box-shadow .2s ease;
}
.post-card:hover{
  transform:translate(-4px,-4px);
  box-shadow:8px 8px 0 var(--lime);
}
.post-meta{
  display:flex;
  gap:.75em;
  align-items:center;
  font-size:var(--text-caption);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gray-600);
}
.post-meta .cat{ color:var(--pink); }
.post-card h3{
  font-family:var(--font-display);
  font-size:1.5rem;
  line-height:1.08;
  text-transform:uppercase;
}
.post-card .excerpt{
  color:var(--gray-600);
  font-size:.9375rem;
}
.post-card .read-more{
  margin-top:auto;
  padding-top:.5em;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink);
}

.view-all-row{
  margin-top:var(--space-5);
  display:flex;
  justify-content:center;
}

/* ---------- About ---------- */
.about{ background:var(--ink); color:var(--cream); }
.about .eyebrow{ color:var(--lime); }
.about-grid{
  display:grid;
  gap:var(--space-5);
}
@media(min-width:900px){
  .about-grid{ grid-template-columns:1fr 1fr; align-items:start; }
}
.about p{
  color:var(--cream);
  opacity:.85;
  font-size:var(--text-body);
}
.about p + p{ margin-top:var(--space-3); }
.about-close{
  margin-top:var(--space-4);
  font-weight:700;
  color:var(--cream);
  opacity:1 !important;
  border-left:3px solid var(--lime);
  padding-left:var(--space-2);
}
.about-heading{
  font-family:var(--font-display);
  font-size:var(--text-h2);
  text-transform:uppercase;
  line-height:1;
  margin-top:var(--space-2);
  max-width:14ch;
}

/* ---------- Newsletter ---------- */
.newsletter{
  background:var(--gray-800);
  color:var(--cream);
  border-top:1px solid rgba(255,254,241,.1);
}
.newsletter .eyebrow{ color:var(--lime); }
.newsletter h2{
  font-family:var(--font-display);
  font-size:var(--text-h2);
  text-transform:uppercase;
  line-height:1;
  max-width:16ch;
  margin-top:var(--space-2);
}
.newsletter p{
  margin-top:var(--space-3);
  max-width:42ch;
  color:var(--cream);
  opacity:.8;
}
.newsletter-form{
  margin-top:var(--space-4);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  max-width:32rem;
}
.newsletter-form input[type="email"]{
  flex:1 1 14rem;
  background:transparent;
  border:1px solid rgba(255,254,241,.35);
  color:var(--cream);
  font-family:var(--font-mono);
  font-size:.9375rem;
  padding:.9em 1em;
}
.newsletter-form input[type="email"]::placeholder{ color:var(--gray-400); }
.newsletter-form input[type="email"]:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }
.newsletter-note{
  margin-top:var(--space-2);
  font-size:var(--text-caption);
  color:var(--gray-400);
  opacity:1;
  max-width:none;
}

/* ---------- Contact ---------- */
.contact{
  background:var(--lime);
  color:var(--ink);
}
.contact .eyebrow{ color:var(--ink); opacity:.7; }
.contact h2{
  font-family:var(--font-display);
  font-size:var(--text-h2);
  line-height:1;
  text-transform:uppercase;
  max-width:18ch;
}
.contact p{
  margin-top:var(--space-3);
  max-width:40ch;
  font-size:var(--text-body);
}
.contact .btn{
  margin-top:var(--space-5);
  background:var(--ink);
  color:var(--lime);
  border-color:var(--ink);
}
.contact .btn:hover{
  box-shadow:5px 5px 0 var(--ink);
  background:var(--ink);
}

/* ---------- Footer ---------- */
footer.site-footer{
  background:var(--ink);
  color:var(--gray-400);
  padding-block:var(--space-6) var(--space-4);
}
.footer-grid{
  display:grid;
  gap:var(--space-5);
  padding-bottom:var(--space-5);
  border-bottom:1px solid rgba(255,254,241,.12);
}
@media(min-width:768px){
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; }
}
.footer-brand .nav-mark{ color:var(--cream); }
.footer-brand p{
  margin-top:var(--space-2);
  max-width:32ch;
  font-size:.875rem;
  color:var(--gray-400);
}
.footer-social{
  display:flex;
  gap:var(--space-2);
  margin-top:var(--space-3);
}
.footer-social a{
  width:2.25rem;
  height:2.25rem;
  border:1px solid rgba(255,254,241,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s ease, background-color .15s ease;
}
.footer-social a:hover{ border-color:var(--lime); background:rgba(222,255,19,.08); }
.footer-social svg{ width:16px; height:16px; stroke:var(--cream); }
.footer-col h4{
  font-size:var(--text-caption);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:var(--space-2);
}
.footer-col ul{ display:grid; gap:.6em; }
.footer-col a{
  font-size:.875rem;
  text-decoration:none;
  color:var(--gray-400);
  transition:color .15s ease;
}
.footer-col a:hover{ color:var(--lime); }
.footer-bottom{
  padding-top:var(--space-4);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  justify-content:space-between;
  font-size:var(--text-caption);
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* ==========================================================================
   Blog listing page
   ========================================================================== */
.page-header{
  background:var(--ink);
  color:var(--cream);
  padding-block:var(--space-6);
}
.page-header .eyebrow{ color:var(--lime); }
.page-header h1{
  font-family:var(--font-display);
  font-size:var(--text-h2);
  text-transform:uppercase;
  line-height:1;
  margin-top:var(--space-2);
}
.page-header p{
  margin-top:var(--space-3);
  max-width:46ch;
  color:var(--cream);
  opacity:.8;
}
.breadcrumb{
  font-size:var(--text-caption);
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gray-400);
  display:flex;
  gap:.5em;
  flex-wrap:wrap;
}
.breadcrumb a{ text-decoration:none; color:var(--gray-400); }
.breadcrumb a:hover{ color:var(--lime); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color:var(--cream); }

/* ==========================================================================
   Article page
   ========================================================================== */
.article-header{
  background:var(--ink);
  color:var(--cream);
  padding-block:var(--space-6) var(--space-5);
}
.article-header .breadcrumb{ margin-bottom:var(--space-4); }
.article-cat{ color:var(--pink); }
.article-header h1{
  font-family:var(--font-display);
  font-size:clamp(2rem, 4.5vw + .5rem, 4rem);
  text-transform:uppercase;
  line-height:1.05;
  margin-top:var(--space-2);
  max-width:20ch;
}
.article-byline{
  margin-top:var(--space-4);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
  font-size:.875rem;
  color:var(--gray-400);
}
.article-byline strong{ color:var(--cream); }
.article-byline .dot-sep::before{ content:"·"; margin-right:var(--space-2); }

.article-body{
  padding-block:var(--space-6);
}
.article-body .wrap{ max-width:var(--max-w-article); }
.prose{
  font-size:1.0625rem;
  line-height:1.8;
  color:var(--ink);
}
.prose > * + *{ margin-top:var(--space-3); }
.prose p{ max-width:70ch; }
.prose h2{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 2.5vw + .5rem, 2.25rem);
  text-transform:uppercase;
  line-height:1.1;
  margin-top:var(--space-6) !important;
}
.prose h3{
  font-size:1.0625rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  margin-top:var(--space-5) !important;
}
.prose ul, .prose ol{
  display:grid;
  gap:.6em;
  padding-left:1.4em;
}
.prose ul{ list-style:none; }
.prose ul li{ position:relative; }
.prose ul li::before{
  content:"→";
  color:var(--lime);
  position:absolute;
  left:-1.4em;
}
.prose ol{ list-style:decimal; }
.prose ol li::marker{ color:var(--pink); font-weight:700; }
.prose blockquote{
  border-left:3px solid var(--lime);
  padding-left:var(--space-3);
  font-weight:700;
  font-size:1.1875rem;
}
.prose strong{ background:var(--lime); padding:0 .18em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.prose a{ text-decoration-color:var(--lime); text-decoration-thickness:2px; text-underline-offset:.2em; }

.author-box{
  margin-top:var(--space-7);
  border:1px solid var(--ink);
  padding:var(--space-4);
  display:grid;
  gap:.75em;
  max-width:70ch;
}
.author-box .eyebrow{ color:var(--gray-600); }
.author-box h4{
  font-family:var(--font-display);
  font-size:1.375rem;
  text-transform:uppercase;
}
.author-box p{ color:var(--gray-600); font-size:.9375rem; }

.post-nav{
  margin-top:var(--space-6);
  padding-top:var(--space-4);
  border-top:1px solid var(--ink);
  display:flex;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap;
}
.post-nav a{
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
}

/* ==========================================================================
   Scroll progress bar
   ========================================================================== */
.scroll-progress{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:3px;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:0 50%;
  z-index:100;
  will-change:transform;
}

/* ==========================================================================
   Nav CTA — pulse + shine
   ========================================================================== */
.nav-cta{
  position:relative;
  overflow:hidden;
  animation:cta-pulse 3.4s ease-in-out infinite;
}
.nav-cta::after{
  content:"";
  position:absolute;
  top:0; left:-60%;
  width:35%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(20,20,20,.4), transparent);
  transform:skewX(-20deg);
  animation:cta-shine 3.4s ease-in-out infinite;
}
@keyframes cta-pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.035); }
}
@keyframes cta-shine{
  0%,25%{ left:-60%; }
  60%,100%{ left:130%; }
}
@media (prefers-reduced-motion: reduce){
  .nav-cta{ animation:none; }
  .nav-cta::after{ animation:none; display:none; }
}

/* ==========================================================================
   Sparkle on button hover
   ========================================================================== */
.btn{ position:relative; }
.btn .spark{
  position:absolute;
  width:5px; height:5px;
  background:var(--ink);
  border-radius:50%;
  opacity:0;
  transform:scale(0) translate(0,0);
  transition:transform .45s ease, opacity .45s ease;
  pointer-events:none;
}
.btn .spark:nth-child(1){ top:15%; left:12%; }
.btn .spark:nth-child(2){ top:20%; right:14%; }
.btn .spark:nth-child(3){ bottom:18%; left:45%; }
.btn:hover .spark:nth-child(1){ opacity:1; transform:scale(1) translate(-6px,-6px); }
.btn:hover .spark:nth-child(2){ opacity:1; transform:scale(1) translate(6px,-8px); }
.btn:hover .spark:nth-child(3){ opacity:1; transform:scale(1) translate(0,8px); }
.btn.btn-ghost .spark, .contact .btn .spark{ background:var(--lime); }

/* ==========================================================================
   Hero — two column with media
   ========================================================================== */
.hero-grid{
  display:grid;
  gap:var(--space-6);
  align-items:center;
}
@media(min-width:960px){
  .hero-grid{ grid-template-columns:1.3fr .7fr; }
}
.hero-media{
  position:relative;
}
.hero-media-frame{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:
    radial-gradient(circle at 25% 15%, var(--pink), transparent 60%),
    radial-gradient(circle at 75% 85%, var(--lime), transparent 55%),
    var(--ink);
  border:1px solid rgba(255,254,241,.15);
}
.hero-media-frame img{
  position:absolute;
  top:-8%;
  left:-2%;
  width:104%;
  max-width:104%;
  height:116%;
  object-fit:cover;
  will-change:transform;
}
.hero-photo-credit{
  position:absolute;
  bottom:.6em;
  right:.7em;
  font-size:.625rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(255,254,241,.6);
}
.hero-float-card{
  background:var(--ink);
  border:1px solid var(--lime);
  padding:var(--space-3);
  display:grid;
  gap:.5em;
  margin-top:-2.5rem;
  margin-inline:var(--space-3);
  position:relative;
  z-index:2;
}
@media(min-width:640px){
  .hero-float-card{
    position:absolute;
    left:-1.25rem;
    bottom:-1.5rem;
    margin-top:0;
    margin-inline:0;
    max-width:15rem;
  }
}
.hero-float-card .glass-tag{ color:var(--pink); }
.hero-float-card strong{ color:var(--cream); font-size:.9375rem; }
.hero-float-card span.muted{ color:var(--gray-400); font-size:.8125rem; }

/* ==========================================================================
   How It Works
   ========================================================================== */
.how{ background:var(--ink); color:var(--cream); border-top:1px solid rgba(255,254,241,.12); }
.how .eyebrow{ color:var(--lime); }
.step{
  border:1px solid rgba(255,254,241,.15);
  padding:var(--space-4);
  display:grid;
  gap:.6em;
  transition:transform .2s ease, border-color .2s ease;
}
.step:hover{ transform:translate(-4px,-4px); border-color:var(--lime); }
.step-icon{
  width:44px;
  height:44px;
  stroke:var(--lime);
  animation:bob 3.2s ease-in-out infinite;
}
.step:nth-child(2) .step-icon{ animation-delay:.2s; }
.step:nth-child(3) .step-icon{ animation-delay:.4s; }
.step:nth-child(4) .step-icon{ animation-delay:.6s; }
@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
.step-num{
  font-size:var(--text-caption);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--gray-400);
}
.step h3{
  font-family:var(--font-display);
  font-size:1.375rem;
  text-transform:uppercase;
  color:var(--cream);
}
.step p{ color:var(--gray-400); font-size:.9375rem; }
@media (prefers-reduced-motion: reduce){
  .step-icon{ animation:none; }
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing{ background:var(--cream); }
.pricing-grid{
  display:grid;
  gap:var(--space-4);
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .pricing-grid{ grid-template-columns:repeat(3,1fr); align-items:stretch; }
}
.price-card{
  position:relative;
  border:1px solid var(--ink);
  padding:var(--space-4);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  background:var(--cream);
  transition:transform .2s ease, box-shadow .2s ease;
}
.price-card:hover{ transform:translate(-4px,-4px); box-shadow:8px 8px 0 var(--lime); }
.price-card.is-featured{
  border-color:var(--ink);
  border-width:2px;
  animation:breathe 4.5s ease-in-out infinite;
}
.price-card.is-featured::before{
  content:"";
  position:absolute;
  inset:-8px;
  border:1px solid var(--lime);
  z-index:-1;
  animation:breathe-glow 4.5s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.015); }
}
@keyframes breathe-glow{
  0%,100%{ opacity:.35; }
  50%{ opacity:.85; }
}
@media (prefers-reduced-motion: reduce){
  .price-card.is-featured, .price-card.is-featured::before{ animation:none; }
}
.price-tag{
  position:absolute;
  top:-.85em;
  left:var(--space-3);
  background:var(--lime);
  color:var(--ink);
  font-size:var(--text-caption);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.3em .7em;
}
.price-name{
  font-family:var(--font-display);
  font-size:1.5rem;
  text-transform:uppercase;
}
.price-amount{
  font-family:var(--font-display);
  font-size:2.5rem;
  line-height:1;
}
.price-amount span{
  font-family:var(--font-mono);
  font-size:.875rem;
  font-weight:700;
  color:var(--gray-600);
}
.price-desc{ color:var(--gray-600); font-size:.9375rem; }
.price-list{ display:grid; gap:.65em; flex:1; }
.price-list li{
  display:flex;
  align-items:flex-start;
  gap:.6em;
  font-size:.9375rem;
}
.price-check{
  width:18px; height:18px;
  flex:none;
  margin-top:.15em;
  stroke:var(--pink);
}
.price-check path{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:24;
  stroke-dashoffset:24;
  animation:draw-check .4s ease forwards;
  animation-delay:calc(var(--i, 0) * 90ms + .4s);
}
@media (prefers-reduced-motion: reduce){
  .price-check path{ animation:none; stroke-dashoffset:0; }
}
@keyframes draw-check{ to{ stroke-dashoffset:0; } }
.price-card .btn{ width:100%; justify-content:center; margin-top:auto; }

/* ==========================================================================
   Offer band
   ========================================================================== */
.offer-band{
  background:var(--lime);
  color:var(--ink);
  padding-block:var(--space-5);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.offer-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
}
.offer-text h3{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 3vw + .5rem, 2.25rem);
  text-transform:uppercase;
  line-height:1.05;
}
.offer-text p{ margin-top:.35em; font-size:.9375rem; }
.offer-band .btn{
  background:var(--ink);
  color:var(--lime);
  border-color:var(--ink);
}
.offer-band .btn:hover{ box-shadow:5px 5px 0 var(--ink); }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews{ background:var(--cream); }
.review-card{
  border:1px solid var(--ink);
  padding:var(--space-4);
  display:grid;
  gap:.75em;
  transition:transform .2s ease, box-shadow .2s ease;
}
.review-card:hover{ transform:translate(-4px,-4px); box-shadow:8px 8px 0 var(--lime); }
.review-stars{ color:var(--lime); letter-spacing:.1em; font-size:.9375rem; }
.review-quote{ font-size:.9375rem; color:var(--ink); }
.review-name{ font-size:.8125rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-600); }

/* ==========================================================================
   Guarantee
   ========================================================================== */
.guarantee{ background:var(--ink); color:var(--cream); }
.guarantee .eyebrow{ color:var(--lime); }
.guarantee-grid{ display:grid; gap:var(--space-5); }
@media(min-width:900px){ .guarantee-grid{ grid-template-columns:1fr 1fr; align-items:center; } }
.guarantee h2{
  font-family:var(--font-display);
  font-size:var(--text-h2);
  text-transform:uppercase;
  line-height:1;
  margin-top:var(--space-2);
  max-width:14ch;
}
.guarantee p{ color:var(--cream); opacity:.85; margin-top:var(--space-3); }
.guarantee p + p{ margin-top:var(--space-2); }
.guarantee-badge{
  border:1px solid var(--lime);
  padding:var(--space-4);
  display:grid;
  gap:.4em;
  justify-items:start;
}
.guarantee-badge .big{
  font-family:var(--font-display);
  font-size:2.75rem;
  color:var(--lime);
  line-height:1;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ background:var(--cream); }
.faq-list{ display:grid; gap:var(--space-2); max-width:48rem; }
.faq-item{
  border:1px solid var(--ink);
  padding:var(--space-3) var(--space-4);
}
.faq-item summary{
  cursor:pointer;
  font-weight:700;
  font-size:1.0625rem;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--lime);
  flex:none;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ content:"−"; }
.faq-item p{
  margin-top:var(--space-2);
  color:var(--gray-600);
  font-size:.9375rem;
}

/* ==========================================================================
   Sticky book bar (CSS-only dismiss)
   ========================================================================== */
.book-bar-toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.book-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:90;
  background:var(--ink);
  color:var(--cream);
  border-top:1px solid var(--lime);
  padding-block:var(--space-2);
  transition:transform .3s ease, opacity .3s ease;
}
.book-bar-toggle:checked ~ .book-bar{
  transform:translateY(100%);
  opacity:0;
  pointer-events:none;
}
.book-bar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap;
}
.book-bar-text{ font-size:.875rem; }
.book-bar-text strong{ color:var(--lime); }
.book-bar-actions{ display:flex; align-items:center; gap:var(--space-3); }
.btn-sm{ padding:.6em 1em; font-size:.75rem; }
.book-bar-close{
  cursor:pointer;
  font-size:1.25rem;
  line-height:1;
  color:var(--gray-400);
  padding:.2em .4em;
}
.book-bar-close:hover{ color:var(--cream); }
body.has-book-bar{ padding-bottom:3.75rem; }
@media(max-width:640px){
  body.has-book-bar{ padding-bottom:5rem; }
}

/* ==========================================================================
   Slide-in nudge
   ========================================================================== */
.nudge{
  position:fixed;
  right:1.25rem;
  bottom:5.5rem;
  z-index:95;
  max-width:16rem;
  background:var(--ink);
  color:var(--cream);
  border:1px solid var(--lime);
  padding:var(--space-3);
  display:grid;
  gap:.5em;
  opacity:0;
  transform:translateY(12px) scale(.98);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.nudge.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.nudge-close{
  position:absolute;
  top:.4em; right:.6em;
  background:none;
  border:none;
  color:var(--gray-400);
  font-size:1.1rem;
  cursor:pointer;
  padding:.2em;
}
.nudge-close:hover{ color:var(--cream); }
.nudge-title{ font-family:var(--font-display); font-size:1.125rem; text-transform:uppercase; }
.nudge-text{ font-size:.8125rem; color:var(--gray-400); }
.nudge .btn{ width:fit-content; }
@media(max-width:640px){
  .nudge{ right:.75rem; left:.75rem; max-width:none; bottom:5.5rem; }
}