/* ============================================================
   MONOTROPIC MIND
   Aesthetic: late-night editorial. Warm near-black ground,
   one hot amber signal, display serif with wonk.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..700&display=swap');

:root{
  --ink:      #0B0A09;
  --ground:   #121010;
  --raise:    #1A1715;
  --rule:     #2C2724;
  --cream:    #F3EBDF;
  --cream-dim:#B8AC9C;
  --muted:    #7E7367;
  --amber:    #F2A93B;
  --amber-hot:#FFC066;
  --jade:     #7E9B87;
  --red:      #E04B34;

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --measure: 34rem;
  --narrow: 44rem;
  --page: 76rem;
  --ease: cubic-bezier(.16,.84,.44,1);
}

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

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

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.62;
  letter-spacing:.005em;
  overflow-x:hidden;
  /* warm pool of light up top, like a desk lamp at 1am */
  background-image:
    radial-gradient(120% 70% at 50% -12%, rgba(242,169,59,.10) 0%, rgba(242,169,59,.03) 38%, transparent 68%),
    radial-gradient(90% 50% at 88% 8%, rgba(126,155,135,.06), transparent 60%);
  background-attachment:fixed;
}

/* film grain */
body::after{
  content:''; position:fixed; inset:-50%; z-index:9999; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:400; margin:0; line-height:1.02;
  font-variation-settings:'SOFT' 30,'WONK' 1; letter-spacing:-.022em; }
h1{ font-size:clamp(2.9rem,1.5rem + 6vw,6.4rem); }
h2{ font-size:clamp(2rem,1.2rem + 3.2vw,3.6rem); line-height:1.06; }
h3{ font-size:clamp(1.3rem,1.05rem + .9vw,1.7rem); line-height:1.2; }
p{ margin:0 0 1.15em; }
em{ font-style:italic; }
strong{ font-weight:600; color:#fff; }

a{ color:var(--amber); text-decoration:none;
   text-decoration-color:rgba(242,169,59,.32); text-underline-offset:.24em; }
a:hover{ text-decoration:underline; color:var(--amber-hot); }

.eyebrow{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted); margin:0 0 1.6rem;
  display:flex; align-items:center; gap:.85rem;
}
.eyebrow::after{ content:''; height:1px; flex:1; background:var(--rule); max-width:7rem; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ content:''; height:1px; flex:1; background:var(--rule); max-width:5rem; }

.lede{ font-size:clamp(1.15rem,1.02rem + .55vw,1.42rem); line-height:1.52;
  color:var(--cream-dim); font-weight:400; }
.dim{ color:var(--cream-dim); }
.amber{ color:var(--amber); }
.serif-it{ font-family:var(--display); font-style:italic; font-weight:300; }

/* ---------- layout ---------- */
.wrap{ width:min(var(--page),calc(100% - 3rem)); margin-inline:auto; }
.narrow{ max-width:var(--narrow); }
.narrow > p{ max-width:var(--measure); }
section{ padding-block:clamp(4.5rem,9vw,8.5rem); position:relative; }
.rule-top{ border-top:1px solid var(--rule); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 0; backdrop-filter:blur(14px);
  background:linear-gradient(to bottom,rgba(11,10,9,.94),rgba(11,10,9,.72));
  border-bottom:1px solid var(--rule);
}
.brand{ font-family:var(--mono); font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cream); text-decoration:none; white-space:nowrap; }
.brand:hover{ color:var(--amber); text-decoration:none; }
.brand .dot{ color:var(--amber); }
.nav-links{ display:flex; gap:1.5rem; align-items:center; }
.nav-links a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--cream-dim); text-decoration:none;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--amber); text-decoration:none; }
@media(max-width:720px){ .nav-links{ gap:1rem; } .nav-links .hide-sm{ display:none; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.15em; text-transform:uppercase;
  padding:.95rem 1.6rem; border-radius:2px; border:1px solid var(--amber);
  background:var(--amber); color:#140F06; text-decoration:none; font-weight:500;
  transition:transform .25s var(--ease), background .25s, box-shadow .25s; cursor:pointer;
}
.btn:hover{ background:var(--amber-hot); color:#140F06; text-decoration:none;
  transform:translateY(-2px); box-shadow:0 10px 30px -12px rgba(242,169,59,.6); }
.btn-ghost{ background:transparent; color:var(--cream); border-color:var(--rule); }
.btn-ghost:hover{ background:transparent; color:var(--amber); border-color:var(--amber); box-shadow:none; }

/* ============================================================
   HERO — the glasses
   ============================================================ */
.hero{ padding-block:clamp(3.5rem,7vw,6rem) clamp(4rem,8vw,7rem); position:relative; }
.hero-inner{ max-width:52rem; }

.hero-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media(max-width:940px){
  .hero-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .specs-stage{ order:-1; width:min(20rem,72%); }
}

.specs-stage{ position:relative; width:100%; max-width:27rem; margin-inline:auto; }
/* warm glow behind */
.specs-stage::before{
  content:''; position:absolute; inset:-16%; pointer-events:none; filter:blur(16px);
  background:radial-gradient(closest-side,rgba(242,169,59,.22),transparent 72%);
}
.specs-video{
  position:relative; width:100%; height:auto; display:block;
  -webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 44%,
      #000 30%, rgba(0,0,0,.55) 62%, transparent 88%);
          mask-image:radial-gradient(ellipse 60% 58% at 50% 44%,
      #000 30%, rgba(0,0,0,.55) 62%, transparent 88%);
}
/* scrim — melts the frame edges into the page whether or not mask-image lands */
.specs-stage::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 56% 54% at 50% 44%,
    transparent 28%, rgba(11,10,9,.26) 50%, rgba(11,10,9,.70) 68%,
    rgba(11,10,9,.94) 82%, var(--ink) 92%);
}

.headline-swap{ position:relative; }
/* staggered swap: the outgoing line clears before the incoming one lands,
   so the two never overlap into mush */
.line-on{ position:relative;
  transition:opacity .35s var(--ease) .30s, transform .35s var(--ease) .30s; }
.line-off{ position:absolute; inset:0; opacity:0; transform:translateY(16px);
  pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease); }
body.specs-off .line-on{ opacity:0; transform:translateY(-16px);
  pointer-events:none; transition-delay:0s; }
body.specs-off .line-off{ opacity:1; transform:none;
  pointer-events:auto; transition-delay:.30s; }


.hero-sub{ margin-top:2rem; max-width:33rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; margin-top:2.2rem; }
.hero-note{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--muted); }

/* ---------- marquee strip ---------- */
.strip{ border-block:1px solid var(--rule); padding:.9rem 0; overflow:hidden;
  background:rgba(26,23,21,.4); }
.strip-track{ display:flex; gap:3rem; width:max-content;
  animation:slide 155s linear infinite; }
.strip-track span{ font-family:var(--mono); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.strip-track span b{ color:var(--amber); font-weight:400; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- the six ---------- */
.six-grid{ display:grid; gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin-top:3rem;
  grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:900px){ .six-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px){ .six-grid{ grid-template-columns:1fr; } }
.six-cell{ background:var(--ground); padding:2rem 1.7rem 2.2rem; position:relative;
  transition:background .35s var(--ease); }
.six-cell:hover{ background:var(--raise); }
.six-cell .num{ font-family:var(--mono); font-size:.68rem; letter-spacing:.2em;
  color:var(--amber); display:block; margin-bottom:1.4rem; }
.six-cell h3{ margin-bottom:.7rem; }
.six-cell p{ color:var(--cream-dim); font-size:.945rem; line-height:1.58; margin:0; }

/* ---------- topic list ---------- */
.topics{ list-style:none; padding:0; margin:2.5rem 0 0;
  border-top:1px solid var(--rule); }
.topics li{ border-bottom:1px solid var(--rule); padding:1.15rem .2rem;
  display:flex; gap:1.4rem; align-items:baseline;
  transition:padding-left .3s var(--ease), color .3s; }
.topics li:hover{ padding-left:1rem; color:#fff; }
.topics li .k{ font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  color:var(--muted); flex:0 0 2.2rem; }

/* ---------- signup ---------- */
.signup{ border:1px solid var(--rule); background:var(--ground);
  padding:clamp(2rem,4.5vw,3.4rem); position:relative; overflow:hidden; }
.signup::before{ content:''; position:absolute; inset:0;
  background:radial-gradient(80% 130% at 12% -20%,rgba(242,169,59,.12),transparent 62%);
  pointer-events:none; }
.signup > *{ position:relative; }
.embed-slot{ margin-top:1.8rem; min-height:64px; }
.embed-slot iframe{ max-width:100%; border:0; }
.form-row{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.7rem; }
.form-row input{
  flex:1 1 16rem; background:var(--ink); border:1px solid var(--rule); color:var(--cream);
  font-family:var(--body); font-size:1rem; padding:.95rem 1.05rem; border-radius:2px;
}
.form-row input::placeholder{ color:var(--muted); }
.form-row input:focus{ outline:none; border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(242,169,59,.14); }
.fineprint{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em;
  color:var(--muted); margin-top:1.1rem; line-height:1.7; }

/* ---------- membership card ---------- */
.card{
  border:1px solid var(--amber); background:
    linear-gradient(145deg,rgba(242,169,59,.11),rgba(242,169,59,.02) 55%),var(--raise);
  padding:1.6rem 1.7rem; border-radius:3px; max-width:23rem;
  box-shadow:0 24px 50px -28px rgba(242,169,59,.5); transform:rotate(-1.4deg);
}
.card .cardhead{ display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--amber); margin-bottom:1.6rem; }
.card .name{ font-family:var(--display); font-size:1.7rem; line-height:1.1;
  font-variation-settings:'SOFT' 40,'WONK' 1; }
.card .no{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  color:var(--cream-dim); margin-top:1.5rem; display:flex; justify-content:space-between; }

/* ---------- prose (essays / about) ---------- */
.prose{ max-width:var(--measure); }
.prose h2{ margin:3.2rem 0 1.1rem; }
.prose h3{ margin:2.4rem 0 .8rem; }
.prose p{ color:var(--cream-dim); margin-bottom:.82em; }
/* this page leans on short one-line paragraphs as beats; at the default 1.15em the
   page reads as a list of isolated lines rather than prose */
.prose p.first::first-letter{
  font-family:var(--display); font-size:3.6em; float:left; line-height:.82;
  padding:.06em .1em 0 0; color:var(--amber); font-weight:400;
}
.prose blockquote{ margin:2.2rem 0; padding-left:1.5rem;
  border-left:2px solid var(--amber); font-family:var(--display); font-style:italic;
  font-size:1.28rem; line-height:1.42; color:var(--cream); }
.prose ul{ color:var(--cream-dim); padding-left:1.1rem; }
.prose li{ margin-bottom:.5rem; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--rule); padding-block:3.2rem 4rem; margin-top:2rem; }
.foot-grid{ display:flex; flex-wrap:wrap; gap:2.5rem; justify-content:space-between; }
.foot-links{ display:flex; flex-direction:column; gap:.55rem; }
.foot-links a,.foot-links span{ font-family:var(--mono); font-size:.7rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.foot-links a:hover{ color:var(--amber); text-decoration:none; }
.foot-mark{ font-family:var(--display); font-size:1.5rem; font-style:italic; color:var(--cream); }

/* ---------- reveal on load / scroll ---------- */
.rise{ opacity:0; transform:translateY(22px);
  animation:rise .85s var(--ease) forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
.d1{animation-delay:.06s}.d2{animation-delay:.16s}.d3{animation-delay:.28s}
.d4{animation-delay:.40s}.d5{animation-delay:.54s}.d6{animation-delay:.68s}

.obs{ opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease); }
.obs.in{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-delay:0ms!important;
    transition-duration:.01ms!important; }
  .rise,.obs{ opacity:1!important; transform:none!important; }
  .strip-track{ animation:none; }
}

:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; position:fixed; z-index:200; background:var(--amber);
  color:#140F06; padding:.7rem 1rem; border-radius:2px; }

/* ---------- split layout ---------- */
.split{ display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:start; }
@media(max-width:860px){
  .split{ grid-template-columns:1fr; }
  .card{ transform:none; margin-inline:auto; }
}


/* ---------- selection ---------- */
::selection{ background:rgba(242,169,59,.30); color:#fff; }
::-moz-selection{ background:rgba(242,169,59,.30); color:#fff; }


/* ---------- the intro list, and the correction ---------- */
.intro-list{ list-style:none; padding:0; margin:1.15rem 0 1.35rem; }
.intro-list li{ position:relative; padding-left:1.4rem; margin-bottom:.42rem;
  color:var(--cream-dim); font-size:1.02rem; line-height:1.5; }
.intro-list li::before{ content:''; position:absolute; left:0; top:.78em;
  width:.72rem; height:1px; background:var(--amber); opacity:.8; }

/* struck through in red, then corrected — the joke is the edit */
.struck{ position:relative; color:var(--muted); margin-right:.55em; }
.struck::after{
  content:''; position:absolute; left:-.10em; right:-.12em; top:.36em;
  height:3px; border-radius:2px; background:var(--red);
  transform-origin:left center; transform:rotate(-1.5deg) scaleX(0);
  animation:strike .45s var(--ease) 1.7s forwards;
}
@keyframes strike{ to{ transform:rotate(-1.5deg) scaleX(1); } }

.fix{ font-family:var(--display); font-style:italic; font-size:1.14em;
  color:var(--amber); opacity:0;
  animation:fadein .45s var(--ease) 2.05s forwards; }
@keyframes fadein{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }

/* In a card the text wraps, and an absolutely-positioned rule can't follow wrapped
   lines — so use real text-decoration there. No timed animation either; it's below the fold. */
.six-cell .struck{ color:var(--muted);
  text-decoration:line-through; text-decoration-color:var(--red);
  -webkit-text-decoration-color:var(--red); text-decoration-thickness:3px;
  margin-right:.3em; }
.six-cell .struck::after{ display:none; }
.six-cell .fix{ animation:none; opacity:1; display:inline; }

/* ---------- the join form ---------- */
.join{ margin-top:1.7rem; }
.field-pair{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media(max-width:520px){ .field-pair{ grid-template-columns:1fr; } }
.field{ display:block; margin-bottom:.75rem; }
.field > span{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }
.field.cool > span{ color:var(--amber); }
.field input{ width:100%; background:var(--ink); border:1px solid var(--rule);
  color:var(--cream); font-family:var(--body); font-size:1rem;
  padding:.85rem 1rem; border-radius:2px; }
.field input::placeholder{ color:var(--muted); }
.field input:focus{ outline:none; border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(242,169,59,.14); }
.join .btn{ margin-top:.55rem; }

/* ============================================================
   MOBILE
   ============================================================ */
@media(max-width:640px){
  /* fixed backgrounds jank badly on iOS scroll */
  body{ background-attachment:scroll; }

  /* measured: "Let's make it official." is ~356px at the old size,
     but a 375px phone only has 327px of content width */
  h1{ font-size:clamp(2.15rem,1.2rem + 4.6vw,3.2rem); }
  h2{ font-size:clamp(1.72rem,1.1rem + 2.6vw,2.4rem); }
  h1,h2,h3{ overflow-wrap:break-word; }

  /* brand + three links won't sit on one line; let them take a second row */
  .nav{ flex-wrap:wrap; gap:.45rem 1rem; padding:.8rem 0; }
  .nav-links{ width:100%; gap:1.35rem; }

  section{ padding-block:3.25rem; }
  .hero{ padding-block:1.75rem 2.75rem; }
  .specs-stage{ width:min(17rem,70%); }
  .hero-cta{ gap:.65rem; }
  .hero-cta .btn{ flex:1 1 auto; justify-content:center; }
  .lede{ font-size:1.06rem; }
  .signup{ padding:1.6rem 1.35rem 1.9rem; }
  .strip-track{ gap:2rem; }
  .card{ max-width:none; }
  .prose blockquote{ padding-left:1.1rem; font-size:1.14rem; }
  .topics li{ gap:.9rem; }
}
@media(max-width:400px){
  .brand{ font-size:.64rem; letter-spacing:.13em; }
  .nav-links{ gap:1rem; }
  .nav-links a{ font-size:.64rem; letter-spacing:.09em; }
}

/* page headings: a class, not an inline style, so the mobile rule can reach them */
.page-title{ font-size:clamp(2.2rem,1.3rem + 3.4vw,3.8rem); }
@media(max-width:640px){
  .page-title{ font-size:clamp(1.9rem,1rem + 4.2vw,2.9rem); }
  .br-lg{ display:none; }   /* let long headings wrap naturally instead of forcing a break */
}

/* sticky nav must not sit on top of an anchored section */
[id]{ scroll-margin-top:5.5rem; }

/* ============================================================
   THE COOL PEOPLE LIST
   ============================================================ */
.roster{ border:1px solid var(--rule); background:var(--ground);
  padding:clamp(1.6rem,3.5vw,2.4rem); }
.roster-count{ font-family:var(--display); line-height:.92; margin:.6rem 0 0;
  font-size:clamp(3.2rem,2rem + 6vw,5.5rem); color:var(--amber);
  font-variation-settings:'SOFT' 40,'WONK' 1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; }
.roster-label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-top:.5rem; }
.roster-list{ list-style:none; padding:0; margin:1.9rem 0 0;
  border-top:1px solid var(--rule); }
.roster-list li{ border-bottom:1px solid var(--rule); padding:.95rem 0;
  display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap; }
.roster-no{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  color:var(--amber); flex:0 0 4.8rem; white-space:nowrap; }
.roster-who{ font-weight:600; color:var(--cream); }
.roster-cool{ color:var(--cream-dim); flex:1 1 12rem; }
.roster-when{ font-family:var(--mono); font-size:.64rem; letter-spacing:.1em;
  color:var(--muted); margin-left:auto; }
@media(max-width:520px){
  .roster-when{ margin-left:0; flex-basis:100%; }
  .roster-no{ flex-basis:auto; }
}


/* opening passage under the page lede */
.hero-intro{ max-width:var(--measure); margin-top:1.9rem; }
.hero-intro p{ color:var(--cream-dim); margin-bottom:.82em; }
.hero-intro p:last-child{ margin-bottom:0; }
/* the hero already carries weight here, so don't stack two full section paddings under it */
.hero-lead{ padding-bottom:clamp(2.5rem,4vw,3.5rem); }
/* the article follows straight on from the hero; it doesn't need a full section pad above it */
.prose-lead{ padding-top:clamp(2.75rem,4.5vw,4rem); }

/* the easter egg: the glasses are the way in */
.specs-link{ display:block; position:relative; text-decoration:none; cursor:pointer; }
/* a <video> swallows the click instead of passing it to the parent anchor,
   so the whole easter egg silently did nothing. it is decorative; let clicks through. */
.specs-link .specs-video{ pointer-events:none; }
.specs-link:hover{ text-decoration:none; }
.specs-hint{
  position:absolute; left:50%; bottom:4%; transform:translate(-50%,6px);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber); white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.specs-link:hover .specs-hint,
.specs-link:focus-visible .specs-hint{ opacity:1; transform:translate(-50%,0); }
/* no hover on touch, so show it quietly there instead */
@media(hover:none){ .specs-hint{ opacity:.75; transform:translate(-50%,0); } }

/* the other way in: a small pair of glasses in the footer */
.specs-mark{ display:block; width:86px; align-self:center; opacity:.28;
  transition:opacity .3s var(--ease), transform .3s var(--ease); }
.specs-mark svg{ width:100%; height:auto; display:block;
  fill:none; stroke:var(--cream); stroke-width:11;
  stroke-linejoin:round; stroke-linecap:round; }
.specs-mark:hover,.specs-mark:focus-visible{ opacity:1; transform:translateY(-2px); }
.specs-mark:hover svg,.specs-mark:focus-visible svg{ stroke:var(--amber); }
@media(max-width:640px){ .specs-mark{ align-self:flex-start; opacity:.45; } }

/* honeypot — off-screen for people, visible to bots that fill every field */
.hp{ position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none; }

/* the cool field is the one that gets printed on their certificate, so it earns more room */
.field textarea{ width:100%; background:var(--ink); border:1px solid var(--rule);
  color:var(--cream); font-family:var(--body); font-size:1rem; line-height:1.5;
  padding:.85rem 1rem; border-radius:2px; resize:vertical; min-height:4.4rem; }
.field textarea::placeholder{ color:var(--muted); }
.field textarea:focus{ outline:none; border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(242,169,59,.14); }
.field .req{ font-style:normal; color:var(--muted); letter-spacing:.12em; }
.counter{ display:block; margin-top:.4rem; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.14em; color:var(--muted); }
.counter.ok{ color:var(--jade); }

/* beehiiv renders the form in its own iframe; give it room and let it size itself */
.beehiiv-embed{ margin-top:1.6rem; min-height:5rem; }
.beehiiv-embed iframe{ width:100%!important; border:0; display:block; }