/* ══════════════════════════════════════════════════════════════════════
   SPAMBUSTER — THE BROADSHEET
   Long-form editorial layer for spambuster.app/blog

   The marketing page is a postal counter: fast, transactional, stamped.
   The blog is the newspaper someone reads while queuing at it. Same ink,
   same stamps, same airmail bands — but set for twenty minutes of
   reading instead of five seconds of scanning.

   Inherits the site palette exactly. Adds one thing: a reading serif
   (Newsreader), because Bricolage Grotesque is a display face and long
   body copy set in it fights the reader.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: only light;

  /* ── inherited from the marketing site, unchanged ── */
  --paper:#f4eff8;
  --paper-deep:#e5d9ee;
  --card:#ffffff;
  --ink:#2a1039;
  --ink-soft:#5d4b6d;
  --ink-faint:rgba(42,16,57,.5);
  --line:rgba(42,16,57,.14);
  --red:#c2352b;
  --red-deep:#9c2921;
  --coral:#f8554f;
  --purple:#8e24aa;
  --purple-deep:#6d1a85;

  /* ── broadsheet additions ── */
  --paper-warm:#faf7fc;
  --green:#2f8f5b;
  --amber:#b5850f;

  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Menlo,monospace;
  --disp:'Bricolage Grotesque',Georgia,serif;
  --read:'Newsreader',Georgia,'Times New Roman',serif;

  --measure:66ch;
  --rail:150px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}

body{
  font-family:var(--read);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
  overflow-x:hidden;
}

/* paper grain — same texture as the marketing page */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
::selection{background:var(--purple);color:#fff}

a{color:inherit}
img{max-width:100%;height:auto}

.airmail{
  height:8px;
  background:repeating-linear-gradient(135deg,
    var(--red) 0 14px, var(--paper) 14px 26px,
    var(--purple) 26px 40px, var(--paper) 40px 52px);
}
.perf{
  height:14px;position:relative;
  background:radial-gradient(circle at 7px 7px, var(--paper-deep) 4.5px, transparent 5px);
  background-size:22px 14px;background-repeat:repeat-x;background-position:center;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}

/* ── reading progress: the airmail band fills as you read ───────────── */
.progress{
  position:fixed;top:0;left:0;height:4px;width:100%;z-index:90;
  background:transparent;pointer-events:none;
}
.progress i{
  display:block;height:100%;width:0;
  background:repeating-linear-gradient(135deg,
    var(--red) 0 10px, var(--coral) 10px 20px);
  transition:width .1s linear;
}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:rgba(244,239,248,.93);backdrop-filter:blur(8px);border-bottom:1.5px solid var(--ink)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 24px;max-width:1120px;margin:0 auto}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.01em;text-decoration:none;flex-shrink:0}
.brand-mark{
  width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  background:var(--purple);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  transform:rotate(-8deg);
}
.brand-mark svg{width:20px;height:20px;display:block}
.brand .sub{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);border-left:1.5px solid var(--line);
  padding-left:11px;margin-left:2px;
}
.nav-links{display:flex;gap:24px;align-items:center;font-family:var(--disp);font-size:14.5px;font-weight:500}
.nav-links a{text-decoration:none;color:var(--ink-soft)}
.nav-links a:hover{color:var(--purple)}
/* the nav CTA is an <a> inside .nav-links, so it loses to the rule above on
   specificity unless we re-assert it here. Same fix as the marketing page. */
.nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:#fff}
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:11px 20px;
  font-family:var(--disp);font-weight:700;font-size:14.5px;text-decoration:none;
  border:2px solid var(--ink);border-radius:8px;cursor:pointer;
  transition:transform .12s,box-shadow .12s;
}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red);box-shadow:3.5px 3.5px 0 var(--ink)}
.btn-primary:hover{color:#fff;transform:translate(-1.5px,-1.5px);box-shadow:5px 5px 0 var(--ink)}
.btn-outline{background:var(--card);color:var(--ink);box-shadow:3.5px 3.5px 0 rgba(42,16,57,.2)}
.btn-outline:hover{transform:translate(-1.5px,-1.5px);box-shadow:5px 5px 0 rgba(42,16,57,.3)}
.btn.lg{padding:15px 26px;font-size:16px}
@media(max-width:860px){.nav-links a:not(.btn){display:none}.brand .sub{display:none}}

/* ── article masthead — a franked cover sheet ────────────────────────── */
.masthead{
  position:relative;overflow:hidden;
  padding:66px 0 54px;
  background:
    radial-gradient(ellipse 66% 62% at 12% 0%, rgba(142,36,170,.15), transparent 62%),
    radial-gradient(ellipse 44% 46% at 94% 10%, rgba(194,53,43,.09), transparent 60%);
}
.masthead .wrap{position:relative;max-width:900px}
.routing{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--purple);
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:22px;
}
.routing::before{content:"";width:26px;height:1.5px;background:var(--purple);flex-shrink:0}
.routing .via{color:var(--ink-faint)}
.routing .via::before{content:"·";margin-right:11px}

.masthead h1{
  font-family:var(--disp);
  font-size:clamp(36px,5.6vw,66px);line-height:1.0;letter-spacing:-.032em;
  font-weight:800;margin:0 0 24px;max-width:19ch;
}
.masthead h1 em{font-style:normal;position:relative;color:var(--red);white-space:nowrap}
.masthead h1 em::after{
  content:"";position:absolute;left:-2%;right:-2%;top:56%;height:5px;
  background:var(--red);transform:rotate(-1.1deg);opacity:.9;
}
.standfirst{
  font-family:var(--read);font-size:clamp(18px,2.1vw,21.5px);line-height:1.5;
  color:var(--ink-soft);max-width:60ch;margin:0 0 34px;
}
.standfirst strong{color:var(--ink);font-weight:600}

/* postmark byline block */
.byline{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-top:1.5px dashed var(--line);padding-top:20px;
}
.byline .postmark{
  position:relative;width:74px;height:74px;flex-shrink:0;
  display:grid;place-items:center;transform:rotate(-9deg);
}
.byline .postmark svg{width:100%;height:100%;display:block}
.byline .meta{font-family:var(--mono);font-size:12px;color:var(--ink-soft);line-height:1.85}
.byline .meta b{color:var(--ink);font-weight:600}
.byline .meta .dot{opacity:.35;margin:0 7px}

/* ── the reading grid ────────────────────────────────────────────────── */
.prose{
  display:grid;
  grid-template-columns:
    [full-start] minmax(24px,1fr)
    [wide-start] minmax(0,var(--rail))
    [main-start] min(var(--measure), calc(100% - 48px)) [main-end]
    minmax(0,var(--rail)) [wide-end]
    minmax(24px,1fr) [full-end];
  padding:62px 0 30px;
}
.prose > *{grid-column:main}
.prose > .wide{grid-column:wide}
.prose > .full{grid-column:full}

/* ── body typography ─────────────────────────────────────────────────── */
.prose p{
  font-family:var(--read);
  font-size:19.5px;line-height:1.68;letter-spacing:-.002em;
  margin:0 0 1.35em;color:#361847;
}
.prose p strong{font-weight:600;color:var(--ink)}
.prose p em{font-style:italic}
.prose a:not(.btn){
  color:var(--purple-deep);text-decoration:none;
  background-image:linear-gradient(var(--coral),var(--coral));
  background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:1px;transition:background-size .18s ease,color .18s ease;
}
.prose a:not(.btn):hover{color:var(--red);background-size:100% 100%;
  background-image:linear-gradient(rgba(248,85,79,.16),rgba(248,85,79,.16))}

.prose h2{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(27px,3.4vw,36px);line-height:1.1;letter-spacing:-.026em;
  margin:2.1em 0 .55em;position:relative;
}
.prose h2::before{
  content:attr(data-no);position:absolute;left:-58px;top:.34em;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--coral);
}
@media(max-width:1080px){.prose h2::before{position:static;display:block;margin-bottom:8px}}
.prose h3{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(19px,2.2vw,23px);line-height:1.22;letter-spacing:-.016em;
  margin:2em 0 .5em;
}
.prose h4{
  font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--purple);margin:2em 0 .7em;
}

/* the franked drop cap */
.prose .lede::first-letter{
  float:left;font-family:var(--disp);font-weight:800;
  font-size:76px;line-height:.78;margin:6px 12px 0 0;
  color:#fff;background:var(--purple);
  padding:12px 13px 14px;border-radius:4px;
  box-shadow:3px 3px 0 var(--ink);
}
.prose .lede{font-size:21px;line-height:1.6}

.prose ul,.prose ol{
  font-family:var(--read);font-size:19.5px;line-height:1.62;color:#361847;
  margin:0 0 1.4em;padding-left:0;list-style:none;
}
.prose ol{counter-reset:ol}
.prose li{position:relative;padding-left:34px;margin-bottom:.7em}
.prose ul > li::before{
  content:"";position:absolute;left:6px;top:.62em;
  width:9px;height:9px;background:var(--coral);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.prose ol > li{counter-increment:ol}
.prose ol > li::before{
  content:counter(ol,decimal-leading-zero);position:absolute;left:0;top:.24em;
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--purple);
}
.prose li strong{font-weight:600;color:var(--ink)}

.prose code{
  font-family:var(--mono);font-size:.83em;
  background:var(--paper-deep);border:1px solid var(--line);border-radius:4px;
  padding:1.5px 5px;color:var(--purple-deep);
}
.prose hr{
  border:none;height:14px;margin:3em 0;
  background:radial-gradient(circle at 7px 7px, var(--paper-deep) 4.5px, transparent 5px);
  background-size:22px 14px;background-repeat:repeat-x;background-position:center;
}

/* ── marginalia — annotations in the customs-declaration rail ────────── */
.margin-note{
  grid-column:main;
  font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--ink-soft);
  border-left:2.5px solid var(--coral);padding:2px 0 2px 15px;
  margin:0 0 1.6em;
}
.margin-note b{display:block;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:5px;color:var(--red)}
/* Note: an earlier version floated this into the right rail. Floats are
   ignored on grid items, so it silently fell back into the column at an
   odd width. Kept as an inset annotation instead — works at every width. */
@media(min-width:900px){
  .margin-note{
    margin-left:-15px;padding-left:22px;
    border-left-width:3px;
  }
}

/* ── pull quote — a rubber stamp pressed into the column ─────────────── */
.pull{
  grid-column:wide;position:relative;
  margin:2.4em 0;padding:34px 30px 34px 44px;
}
.pull::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:5px;
  background:var(--coral);
}
.pull p{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(23px,3vw,31px);line-height:1.2;letter-spacing:-.022em;
  color:var(--ink);margin:0;position:relative;z-index:2;
}
.pull .ring{
  position:absolute;right:6px;top:50%;transform:translateY(-50%) rotate(-13deg);
  width:150px;height:150px;opacity:.13;pointer-events:none;z-index:1;
}
.pull .ring circle{fill:none;stroke:var(--red);stroke-width:3}
.pull .ring circle.d{stroke-dasharray:6 6}
@media(max-width:860px){.pull .ring{display:none}}

/* ── block quotation — sourced, attributed, the way a reporter uses one ── */
.quote-block{
  margin:2.2em 0;padding:20px 24px;
  background:var(--card);border:1.5px solid var(--line);border-left:4px solid var(--purple);
  border-radius:0 10px 10px 0;
}
.quote-block p{
  font-family:var(--read) !important;font-size:18.5px !important;line-height:1.55 !important;
  color:var(--ink) !important;margin:0 0 12px !important;font-style:italic;
}
.quote-block cite{
  display:block;font-family:var(--mono);font-size:11.5px;line-height:1.6;
  font-style:normal;color:var(--ink-faint);
}
.quote-block cite em{font-style:italic}

/* ── figure / docket frames ──────────────────────────────────────────── */
figure{margin:2.6em 0}
.docket{
  position:relative;background:var(--card);
  border:2px solid var(--ink);border-radius:14px;
  box-shadow:8px 8px 0 rgba(42,16,57,.12);
  overflow:hidden;
}
.docket-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 18px;border-bottom:2px solid var(--ink);background:var(--paper-deep);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);
}
.docket-head .no{color:var(--red)}
.docket-body{padding:26px 22px}
@media(max-width:600px){.docket-body{padding:20px 15px}}
figcaption{
  font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--ink-faint);
  margin-top:14px;padding-left:15px;border-left:2px solid var(--line);
}
figcaption b{color:var(--red);font-weight:600}

/* ── ledger tables ───────────────────────────────────────────────────── */
.ledger{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13.5px}
.ledger caption{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);text-align:left;padding-bottom:12px;
}
.ledger th{
  text-align:left;font-weight:600;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);
  padding:0 12px 10px 0;border-bottom:2px solid var(--ink);vertical-align:bottom;
}
.ledger td{
  padding:13px 12px 13px 0;border-bottom:1.5px dashed var(--line);
  vertical-align:top;color:var(--ink-soft);line-height:1.5;
}
.ledger tr:last-child td{border-bottom:none}
.ledger td:first-child{color:var(--ink);font-weight:500}
/* secondary label inside a ledger cell — must break to its own line, or it
   runs on: "None" + "Baseline healthy list" reads as "NoneBaseline…" */
.ledger .note{
  display:block;font-size:10.5px;line-height:1.4;font-weight:400;
  color:var(--ink-faint);margin-top:3px;
}
.ledger .yes{color:var(--green);font-weight:600}
.ledger .no{color:var(--red);font-weight:600}
.ledger .part{color:var(--amber);font-weight:600}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── advisory callouts ───────────────────────────────────────────────── */
.advisory{
  position:relative;margin:2.4em 0;padding:22px 24px 22px 26px;
  border-radius:12px;border:1.5px solid;
  font-family:var(--read);font-size:17.5px;line-height:1.58;
}
.advisory b.lab{
  display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px;
}
.advisory p{font-size:17.5px !important;line-height:1.58 !important;margin:0 0 .8em !important}
.advisory p:last-child{margin-bottom:0 !important}
.advisory.warn{background:rgba(248,85,79,.075);border-color:rgba(248,85,79,.42);color:#4b1a2a}
.advisory.warn b.lab{color:var(--red)}
.advisory.note{background:rgba(142,36,170,.07);border-color:rgba(142,36,170,.3);color:#331a44}
.advisory.note b.lab{color:var(--purple)}

/* ── inline CTA — a franked reply card ───────────────────────────────── */
.reply-card{
  grid-column:wide;position:relative;margin:3em 0;
  background:var(--ink);color:var(--paper);border-radius:14px;overflow:hidden;
  padding:34px 32px;
}
.reply-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,
    rgba(194,53,43,.5) 0 12px, transparent 12px 24px,
    rgba(142,36,170,.5) 24px 36px, transparent 36px 48px);
  height:7px;
}
.reply-card .lab{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:#d9a7ec;margin-bottom:12px;display:block;
}
.reply-card h3{
  font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.7vw,28px);
  line-height:1.14;letter-spacing:-.022em;margin:0 0 12px;color:#fff;
}
.reply-card p{
  font-family:var(--read);font-size:16.5px !important;line-height:1.55 !important;
  color:rgba(244,239,248,.72) !important;margin:0 0 22px !important;max-width:52ch;
}
.reply-card .btn-primary{box-shadow:3.5px 3.5px 0 var(--coral)}
.reply-card .btn-primary:hover{box-shadow:5px 5px 0 var(--coral)}
.reply-card .fine{
  font-family:var(--mono);font-size:11.5px;color:rgba(244,239,248,.5);
  margin-top:16px;display:flex;gap:9px;flex-wrap:wrap;align-items:center;
}
.reply-card .fine b{color:#fff;font-weight:600}
.reply-card .fine .sep{opacity:.4}

/* ── the route: table of contents as an itinerary ────────────────────── */
.itinerary{
  grid-column:wide;margin:0 0 3em;
  background:var(--card);border:2px solid var(--ink);border-radius:14px;
  box-shadow:6px 6px 0 rgba(42,16,57,.1);padding:24px 26px;
}
.itinerary .lab{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--red);margin-bottom:16px;display:block;
}
.itinerary ol{margin:0;padding:0;list-style:none;counter-reset:it;
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px 26px;font-family:var(--disp)}
@media(max-width:700px){.itinerary ol{grid-template-columns:1fr}}
.itinerary li{counter-increment:it;position:relative;padding:8px 0 8px 34px;margin:0;
  border-bottom:1.5px dashed var(--line);font-size:15.5px;line-height:1.35}
.itinerary li::before{
  content:counter(it,decimal-leading-zero);position:absolute;left:0;top:11px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--purple);
}
.itinerary a{text-decoration:none;color:var(--ink-soft);font-weight:500}
.itinerary a:hover{color:var(--purple)}

/* ── author / trust footer ───────────────────────────────────────────── */
.colophon{
  grid-column:wide;margin:3.4em 0 0;padding:26px 0 0;border-top:2px solid var(--ink);
  display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;
}
.colophon .seal{
  width:56px;height:56px;border-radius:12px;background:var(--purple);
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  display:grid;place-items:center;flex-shrink:0;transform:rotate(-6deg);
}
.colophon .seal svg{width:30px;height:30px}
.colophon .txt{flex:1;min-width:260px}
.colophon .txt b{font-family:var(--disp);font-size:16px;display:block;margin-bottom:5px}
.colophon .txt p{
  font-family:var(--mono) !important;font-size:12.5px !important;line-height:1.7 !important;
  color:var(--ink-faint) !important;margin:0 !important;
}

/* ── related — postcards ─────────────────────────────────────────────── */
.related{background:linear-gradient(180deg,var(--paper),#efe6f6);padding:70px 0 78px}
.related h2{
  font-family:var(--disp);font-weight:800;font-size:clamp(25px,3.2vw,34px);
  letter-spacing:-.025em;margin:0 0 6px;
}
.related .sub{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint);margin:0 0 34px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{
  position:relative;display:block;text-decoration:none;
  background:var(--card);border:2px solid var(--ink);border-radius:12px;
  padding:26px 22px 22px;box-shadow:6px 6px 0 rgba(42,16,57,.12);
  transition:transform .17s ease,box-shadow .17s ease;
}
.card:nth-child(odd){transform:rotate(-.7deg)}
.card:nth-child(even){transform:rotate(.5deg)}
.card:hover{transform:translateY(-5px) rotate(0);box-shadow:9px 9px 0 rgba(42,16,57,.16)}
.card .franking{
  position:absolute;top:-13px;right:18px;font-family:var(--mono);font-weight:600;
  font-size:10.5px;letter-spacing:.13em;color:var(--paper);background:var(--ink);
  padding:5px 11px;border-radius:4px;transform:rotate(3deg);
}
.card h3{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.2;
  letter-spacing:-.015em;margin:6px 0 9px;color:var(--ink)}
.card p{font-family:var(--read);font-size:15px;line-height:1.5;color:var(--ink-soft);margin:0 0 16px}
.card .go{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red)}

/* ── final CTA strip ─────────────────────────────────────────────────── */
.cta-strip{background:var(--ink);color:var(--paper);text-align:center;padding:80px 0;position:relative;overflow:hidden}
.cta-strip .ring2{
  position:absolute;left:50%;top:50%;width:480px;height:480px;
  transform:translate(-50%,-50%);border:3px dashed rgba(217,167,236,.15);
  border-radius:50%;pointer-events:none;
}
.cta-strip h2{font-family:var(--disp);font-weight:800;font-size:clamp(28px,4vw,42px);
  letter-spacing:-.028em;margin:0 0 14px;color:var(--paper);position:relative}
.cta-strip p{font-family:var(--read);font-size:17px;line-height:1.55;
  color:rgba(244,239,248,.68);max-width:52ch;margin:0 auto 28px;position:relative}
.cta-strip .btn-primary{box-shadow:3.5px 3.5px 0 var(--coral);position:relative}
.cta-strip .btn-primary:hover{box-shadow:5px 5px 0 var(--coral)}
.cta-strip .fine{
  font-family:var(--mono);font-size:12px;color:rgba(244,239,248,.55);
  margin-top:20px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative;
}
.cta-strip .fine b{color:#fff;font-weight:600}
.cta-strip .fine .sep{opacity:.4}

/* ── footer ──────────────────────────────────────────────────────────── */
footer{padding:50px 0 40px;border-top:1.5px solid var(--ink)}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:26px;flex-wrap:wrap}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--disp);font-size:14px}
.foot-links a{text-decoration:none;color:var(--ink-soft)}
.foot-links a:hover{color:var(--purple)}
.foot-copy{width:100%;font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);line-height:1.8;margin-top:8px}

/* ── scroll reveal ───────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

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