/* ============================================================
   Off the Clock — production stylesheet
   Palette per XSITE Brand Guidelines 2025 (MedVal Capital):
     Mint Blue     #1AC6D9
     Cyan Blue     #18818C
     Bright Orange #F28E13
     Strong Orange #D9580D
     Velvet Red    #BF2C47
     Ground        #F2F2F2 (guidelines cover neutral)
   Where a shade differs from the brand hex it is a darkened or
   lightened variant of that hex, chosen for WCAG contrast; the
   base color is noted beside it.
   ============================================================ */
:root{
  --bg:#F2F2F2;
  --bg-alt:#E8EAEA;
  --surface:#FBFBFB;
  --fg:#13282C;
  --fg-mid:#42585C;
  --fg-faint:#6F8589;
  --rule:rgba(19,64,70,.16);
  --rule-hi:rgba(19,64,70,.33);
  --accent:#D9580D;              /* Strong Orange */
  --accent-text:#A64207;         /* Strong Orange, darkened for text on light */
  --accent-wash:rgba(217,88,13,.10);
  --data:#136973;                /* Cyan Blue #18818C, darkened for small text */
  --red:#BF2C47;                 /* Velvet Red */
  --deep:#0C2024;
  --deep-fg:#EFF2F1;
  --shadow:0 1px 0 rgba(19,64,70,.06), 0 10px 30px -18px rgba(12,32,36,.35);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0C1719;
    --bg-alt:#101E21;
    --surface:#152528;
    --fg:#EAF0EF;
    --fg-mid:#9FB4B4;
    --fg-faint:#68807F;
    --rule:rgba(242,242,242,.13);
    --rule-hi:rgba(242,242,242,.30);
    --accent:#F28E13;            /* Bright Orange */
    --accent-text:#F7A947;       /* Bright Orange, lifted for text on dark */
    --accent-wash:rgba(242,142,19,.13);
    --data:#1AC6D9;              /* Mint Blue */
    --red:#E4576F;               /* Velvet Red, lifted for dark ground */
    --deep:#0E2327;
    --deep-fg:#EFF2F1;
    --shadow:0 1px 0 rgba(0,0,0,.35), 0 12px 34px -20px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --bg:#0C1719; --bg-alt:#101E21; --surface:#152528;
  --fg:#EAF0EF; --fg-mid:#9FB4B4; --fg-faint:#68807F;
  --rule:rgba(242,242,242,.13); --rule-hi:rgba(242,242,242,.30);
  --accent:#F28E13; --accent-text:#F7A947; --accent-wash:rgba(242,142,19,.13);
  --data:#1AC6D9; --red:#E4576F; --deep:#0E2327; --deep-fg:#EFF2F1;
  --shadow:0 1px 0 rgba(0,0,0,.35), 0 12px 34px -20px rgba(0,0,0,.85);
}
:root[data-theme="light"]{
  --bg:#F2F2F2; --bg-alt:#E8EAEA; --surface:#FBFBFB;
  --fg:#13282C; --fg-mid:#42585C; --fg-faint:#6F8589;
  --rule:rgba(19,64,70,.16); --rule-hi:rgba(19,64,70,.33);
  --accent:#D9580D; --accent-text:#A64207; --accent-wash:rgba(217,88,13,.10);
  --data:#136973; --red:#BF2C47; --deep:#0C2024; --deep-fg:#EFF2F1;
  --shadow:0 1px 0 rgba(19,64,70,.06), 0 10px 30px -18px rgba(12,32,36,.35);
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--accent);color:#140A02;font-weight:700;font-size:14px;
  padding:10px 16px;border-radius:0 0 3px 0;text-decoration:none;
}
.skip:focus{left:0}

.mono{
  font-family:'Fragment Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;
}
.eyebrow{
  font-family:'Fragment Mono',ui-monospace,Menlo,monospace;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-faint);
}

.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.measure{max-width:63ch}

/* ============================================================
   THE RECORD GRID — faint ruled field behind the page
   ============================================================ */
.field{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--rule) 1px,transparent 1px);
  background-size:min(9vw,110px) 100%;
  opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
}
main,.stage,footer.foot{position:relative;z-index:1}

/* ============================================================
   STAGE — nav + hero over the ward film
   ============================================================ */
.stage{
  position:relative;overflow:hidden;background:#0C2024;
  display:flex;flex-direction:column;
  min-height:min(90vh,880px);
  color:var(--fg);
  /* the stage is always deep teal, in both themes */
  --fg:#F2F5F4;--fg-mid:#CBD9D8;--fg-faint:#9AB0B0;
  --rule:rgba(242,245,244,.22);--rule-hi:rgba(242,245,244,.45);
  --accent:#F28E13;--accent-text:#F28E13;--accent-wash:rgba(242,142,19,.16);
  --data:#1AC6D9;
}
@supports (min-height:90svh){.stage{min-height:min(90svh,880px)}}
.stage__video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
}
.stage__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to bottom,rgba(12,32,36,.62) 0%,rgba(12,32,36,.30) 38%,rgba(12,32,36,.88) 92%),
    linear-gradient(100deg,rgba(12,32,36,.90) 0%,rgba(12,32,36,.60) 46%,rgba(12,32,36,.22) 100%);
}
.stage header.nav,.stage .hero{position:relative;z-index:2}
.stage header.nav{z-index:6}   /* open menu must paint above the hero copy */

/* ============================================================
   NAV
   ============================================================ */
header.nav{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:1120px;margin:0 auto;padding:22px 28px;width:100%;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand svg{display:block;flex:none}
.brand b{font-weight:900;font-size:16.5px;letter-spacing:-.035em;line-height:1;text-transform:uppercase}
.brand .sub{
  font-family:'Fragment Mono',monospace;font-size:9.5px;letter-spacing:.13em;
  color:var(--fg-faint);text-transform:uppercase;display:block;margin-top:3px;
}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-links{display:flex;gap:18px}
.nav-links a{
  font-size:14px;font-weight:500;text-decoration:none;color:var(--fg-mid);
  transition:color .18s ease;
}
.nav-links a:hover{color:var(--accent-text)}
.nav-links a[aria-current="page"]{color:var(--accent-text)}
.nav-links a.ext::after{
  content:"\2197";font-size:10px;margin-left:4px;opacity:.7;
  position:relative;top:-1px;
}

/* mobile / tablet menu */
.menu-btn{
  display:none;align-items:center;justify-content:center;
  width:31px;height:31px;padding:0;flex:none;
  background:transparent;border:1px solid var(--rule);border-radius:2px;
  color:var(--fg-mid);cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}
.menu-btn:hover{border-color:var(--fg-mid);color:var(--fg)}
.menu-btn svg{display:block}
.menu-btn .x{display:none}
header.nav.open .menu-btn .bars{display:none}
header.nav.open .menu-btn .x{display:block}

@media (max-width:1000px){
  .nav-right{gap:12px}
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  header.nav{position:relative}
  /* the open menu is always a deep-teal panel, in either theme, on either page */
  header.nav.open .nav-links{
    display:flex;flex-direction:column;
    position:absolute;top:calc(100% - 10px);left:28px;right:28px;z-index:40;
    background:#0E2226;border:1px solid rgba(242,245,244,.16);border-radius:3px;
    box-shadow:0 18px 40px -18px rgba(0,0,0,.6);padding:6px;
  }
  header.nav.open .nav-links a{color:#CBD9D8;font-size:15px;padding:13px 14px}
  header.nav.open .nav-links a + a{border-top:1px solid rgba(242,245,244,.09)}
  header.nav.open .nav-links a:hover,
  header.nav.open .nav-links a[aria-current="page"]{color:#F28E13}
}

/* ============================================================
   HERO
   ============================================================ */
.stage .hero{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-top:46px;padding-bottom:150px;
}
.hero h1{
  font-size:clamp(2.5rem,6.4vw,4.65rem);
  margin:20px 0 0;
  max-width:15ch;
}
.hero h1 .turn{color:var(--accent-text);display:block}
.hero .eyebrow{color:#8FD8E1}   /* Mint Blue #1AC6D9, lifted over the film */
.hero .lede{
  margin-top:26px;font-size:clamp(1.02rem,1.6vw,1.2rem);
  color:var(--fg-mid);max-width:56ch;
}
.hero .lede strong{color:var(--fg);font-weight:700}
.cta-row{display:flex;flex-wrap:wrap;gap:13px;align-items:center;margin-top:34px}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:-.01em;
  padding:13px 22px;border-radius:3px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.btn--primary{background:var(--accent);color:#140A02;border-color:var(--accent)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--primary[disabled]{opacity:.6;cursor:default;transform:none}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--rule-hi)}
.btn--ghost:hover{border-color:var(--fg-mid);transform:translateY(-1px)}

/* ============================================================
   RECORD CHART — rises out of the film
   ============================================================ */
.record-wrap{position:relative;z-index:2;margin-top:-92px}
.record{
  border:1px solid var(--rule);background:var(--surface);
  border-radius:3px;box-shadow:var(--shadow);overflow:hidden;margin:0;
}
.record__head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 16px;border-bottom:1px solid var(--rule);flex-wrap:wrap;
}
.record__head .eyebrow{color:var(--fg-mid)}
.legend{display:flex;gap:18px;flex-wrap:wrap}
.legend span{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Fragment Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg-faint);
}
.legend i{width:15px;height:0;border-top:3px solid currentColor;display:block}
.legend .k-on{color:var(--fg-mid)}
.legend .k-off{color:var(--accent-text)}
.record canvas{display:block;width:100%;height:290px}

/* ============================================================
   ENTRY — timestamped section on the rail
   ============================================================ */
.entry{
  display:grid;grid-template-columns:104px minmax(0,1fr);
  gap:0 38px;padding-top:74px;   /* longhand — must not clobber .wrap's side padding */
}
.entry__time{text-align:right;padding-top:5px;position:sticky;top:26px;align-self:start}
.entry__time .t{
  display:block;font-family:'Fragment Mono',monospace;font-size:15px;
  font-variant-numeric:tabular-nums;color:var(--accent-text);letter-spacing:-.01em;
}
.entry__time .tl{
  display:block;font-family:'Fragment Mono',monospace;font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--fg-faint);margin-top:6px;
}
.entry__body{border-left:1px solid var(--rule);padding-left:38px;position:relative}
.entry__body::before{
  content:"";position:absolute;left:-4.5px;top:12px;
  width:8px;height:8px;background:var(--accent);border-radius:50%;
}
.entry h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:18px;max-width:19ch}
.entry .body-copy{color:var(--fg-mid);margin-top:16px}
.entry .body-copy + .body-copy{margin-top:14px}

/* ============================================================
   STATS
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:34px;border-radius:3px;overflow:hidden}
.stat{background:var(--surface);padding:22px 20px}
.stat .n{
  display:block;font-size:clamp(1.75rem,3.6vw,2.5rem);font-weight:900;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;
}
.stat .l{display:block;margin-top:12px;font-size:13.5px;line-height:1.45;color:var(--fg-mid)}
.stat .src{
  display:block;margin-top:9px;font-family:'Fragment Mono',monospace;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);
}
.stat:nth-child(3) .n{color:var(--red)}   /* the stream that stops — Velvet Red */

/* ============================================================
   TOOL CARDS
   ============================================================ */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:36px;border-radius:3px;overflow:hidden}
.tool{background:var(--surface);padding:24px 22px 26px;transition:background .2s ease}
.tool:hover{background:var(--bg-alt)}
.tool .num{
  font-family:'Fragment Mono',monospace;font-size:10px;letter-spacing:.14em;
  color:var(--data);display:block;margin-bottom:13px;
}
.tool h3{font-size:1.06rem;letter-spacing:-.02em;line-height:1.25}
.tool p{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--fg-mid)}

/* ============================================================
   MEDIA FIGURE — silent looping film in a chart frame
   ============================================================ */
.media{
  margin:36px 0 0;border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow);
}
.media video{display:block;width:100%;height:auto;aspect-ratio:960/506;object-fit:cover}
.media figcaption{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 16px;border-top:1px solid var(--rule);
}

/* ============================================================
   EDWIN
   ============================================================ */
.who{
  display:grid;grid-template-columns:1fr 268px;gap:38px;align-items:start;margin-top:30px;
}
.who-side{display:flex;flex-direction:column;gap:18px}
.who-photo{
  margin:0;border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  box-shadow:var(--shadow);background:#0C2024;
}
.who-photo img{display:block;width:100%;height:auto}
.who .card{
  border:1px solid var(--rule);background:var(--surface);border-radius:3px;
  padding:22px;box-shadow:var(--shadow);
}
.who .card .eyebrow{display:block;margin-bottom:16px}
.holding{padding:13px 0;border-top:1px solid var(--rule)}
.holding:first-of-type{border-top:0;padding-top:0}
.holding .h-n{font-weight:700;font-size:14.5px;letter-spacing:-.015em;display:block}
.holding .h-d{
  font-family:'Fragment Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  color:var(--fg-faint);display:block;margin-top:5px;
}
.pull{border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin:26px 0 0}
.pull blockquote{
  margin:0;font-size:clamp(1.1rem,2.1vw,1.35rem);font-weight:700;
  letter-spacing:-.025em;line-height:1.35;max-width:34ch;
}
.pull-by{display:flex;align-items:center;gap:12px;margin-top:16px}
.pull-by img{
  width:44px;height:44px;border-radius:50%;flex:none;
  object-fit:cover;object-position:top;
  background:var(--accent-wash);border:1px solid var(--rule);
}
.pull-by b{display:block;font-size:13.5px;letter-spacing:-.01em}
.pull-by i{
  display:block;font-style:normal;font-family:'Fragment Mono',monospace;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-faint);margin-top:3px;
}

/* ============================================================
   IS / ISN'T
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:32px;border-radius:3px;overflow:hidden}
.col{background:var(--surface);padding:24px 22px}
.col.no{background:var(--bg-alt)}
.col h3{
  font-family:'Fragment Mono',monospace;font-weight:400;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:16px;
}
.col.yes h3{color:var(--data)}
.col.no h3{color:var(--red)}
.col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.col li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.5}
.col.yes li{color:var(--fg)}
.col.no li{color:var(--fg-mid)}
.col li::before{
  position:absolute;left:0;top:0;
  font-family:'Fragment Mono',monospace;font-size:13px;
}
.col.yes li::before{content:"+";color:var(--data)}
.col.no li::before{content:"–";color:var(--red)}

/* ============================================================
   LEGACY — full bleed dark, the night shift of money
   ============================================================ */
.legacy{
  background:var(--deep);color:var(--deep-fg);margin-top:96px;
  padding:88px 0;position:relative;overflow:hidden;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.legacy__video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  opacity:.16;filter:saturate(.55);
}
.legacy::before{
  content:"";position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(to right,rgba(242,242,242,.07) 1px,transparent 1px);
  background-size:min(9vw,110px) 100%;
}
.legacy .wrap{position:relative;z-index:2}
.legacy h2{font-size:clamp(1.85rem,4.4vw,3.1rem);max-width:20ch}
.legacy h2 em{font-style:normal;color:#F28E13}   /* Bright Orange */
.legacy p{margin-top:24px;color:#A9BCBB;max-width:58ch;font-size:1.03rem}
.legacy .eyebrow{color:#7E9A98}

/* ============================================================
   JOIN + EMBEDDED FORMS (TenthAvenue)
   ============================================================ */
.join{margin-top:0;padding-top:88px}
.embed-card{
  border:1px solid var(--rule);background:var(--surface);border-radius:3px;
  box-shadow:var(--shadow);overflow:hidden;max-width:640px;margin-top:30px;
}
.embed-card__head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--rule);
}
.embed-card__head .eyebrow{color:var(--fg-mid)}
.embed-card__body{padding:26px 24px}

/* TenthAvenue form markup (copied from the embed endpoints), styled to brand.
   Keep the ta-form class names — re-copied markup stays styled. */
.ta-form__title,.ta-form__desc{display:none}   /* the card head plays that role */
.ta-form__field{display:flex;flex-direction:column;gap:7px;margin-bottom:17px}
.ta-form__label{
  font-family:'Fragment Mono',monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-mid);
}
.ta-form input,.ta-form select{
  font-family:inherit;font-size:15px;color:var(--fg);
  background:var(--bg);border:1px solid var(--rule-hi);border-radius:2px;
  padding:11px 13px;width:100%;transition:border-color .16s ease;
}
.ta-form input:focus,.ta-form select:focus{border-color:var(--accent);outline:none}
.ta-form input::placeholder{color:var(--fg-faint)}
.ta-form__phone{display:flex;gap:8px}
.ta-form__phone-country{flex:0 0 clamp(120px,34%,178px);min-width:0}
.ta-form__phone input{flex:1;min-width:0}
.ta-form__helper{display:block;font-size:12px;line-height:1.5;color:var(--fg-faint)}
.ta-form__submit{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:-.01em;
  padding:13px 22px;border-radius:3px;margin-top:4px;
  border:1px solid var(--accent);background:var(--accent);color:#140A02;
  cursor:pointer;transition:transform .16s ease;
}
.ta-form__submit:hover{transform:translateY(-1px)}
.ta-form__submit[disabled]{opacity:.6;cursor:default;transform:none}
.ta-err{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--red)}

/* success panel — the WhatsApp door opens only after the form is sent */
.ta-ok{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border:1px solid var(--data);background:var(--accent-wash);
  border-radius:3px;padding:18px 20px;
}
.ta-ok[hidden]{display:none}
.ta-ok p{font-size:14px;line-height:1.5;color:var(--fg-mid);max-width:36ch}
.ta-ok p b{color:var(--fg)}
.ta-ok .btn{flex:none}

/* ============================================================
   COMMUNITY — the room
   ============================================================ */
.kicker{
  border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin-top:30px;
  font-size:clamp(1.05rem,1.9vw,1.25rem);font-weight:700;
  letter-spacing:-.02em;line-height:1.4;max-width:44ch;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{padding-top:88px}
.contact-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:3px;
  overflow:hidden;margin-top:30px;
}
a.channel{
  display:block;background:var(--surface);padding:22px;
  text-decoration:none;transition:background .2s ease;
}
a.channel:hover{background:var(--bg-alt)}
.channel .ch-k{
  font-family:'Fragment Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--data);display:block;margin-bottom:12px;
}
.channel h3{font-size:1.02rem;letter-spacing:-.02em}
.channel p{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--fg-mid)}

/* ============================================================
   NEWSLETTER PAGE
   ============================================================ */
.page-head{padding-top:64px}
.page-head h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-top:18px;max-width:17ch}
.page-head h1 .turn{color:var(--accent-text);display:block}
.page-head .lede{
  margin-top:22px;font-size:clamp(1rem,1.5vw,1.15rem);
  color:var(--fg-mid);max-width:58ch;
}
.page-head .lede strong{color:var(--fg);font-weight:700}
.promise{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px}
.promise span{
  font-family:'Fragment Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-faint);
  display:inline-flex;align-items:center;gap:8px;
}
.promise i{width:8px;height:8px;background:var(--accent);border-radius:50%;display:block}

.issues{margin-top:34px;border-top:1px solid var(--rule);max-width:760px}
.issue{border-bottom:1px solid var(--rule);padding:28px 0}
.issue h3{font-size:1.35rem;letter-spacing:-.025em;margin-top:9px}
.issue .body-copy{color:var(--fg-mid);margin-top:12px;max-width:63ch}
.issue .body-copy + .body-copy{margin-top:12px}

/* ============================================================
   FOOTER
   ============================================================ */
footer.foot{margin-top:88px;border-top:1px solid var(--rule);padding:36px 0 56px}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.disclaim{
  font-size:12px;line-height:1.62;color:var(--fg-faint);max-width:62ch;
}
.disclaim + .disclaim{margin-top:12px}
.disclaim b{color:var(--fg-mid);font-weight:700}
.foot-meta{flex:none}
.foot-meta .disclaim{margin-top:14px}
.foot-meta a{color:var(--fg-mid)}

/* ============================================================
   REVEAL
   ============================================================ */
/* progressive enhancement: hidden only once JS confirms it is running,
   so a script failure can never leave the page blank */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .who{grid-template-columns:1fr;gap:26px}
  .stats{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}
@media (max-width:760px){
  .entry{grid-template-columns:1fr;gap:0;padding-top:60px}
  .entry__time{
    text-align:left;position:static;display:flex;align-items:baseline;gap:12px;
    padding:0 0 14px;
  }
  .entry__time .tl{margin-top:0}
  .entry__body{border-left:0;padding-left:0}
  .entry__body::before{display:none}
  .record canvas{height:240px}
  .record-wrap{margin-top:-56px}
  .stage .hero{padding-top:24px;padding-bottom:104px}
  .legacy{padding:64px 0}
  .field{background-size:16vw 100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js .rv{opacity:1;transform:none}
}

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:31px;height:31px;padding:0;flex:none;
  background:transparent;border:1px solid var(--rule);border-radius:2px;
  color:var(--fg-mid);cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}
.theme-btn:hover{border-color:var(--fg-mid);color:var(--fg)}
.theme-btn svg{display:block}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}