/* ==================================================================
   Howdy — shared styles for the journal
   Same tokens as the main page, minus everything the home page needs.
   ================================================================== */
:root{
  --ground:#EFEBE5; --ground-2:#F7F4EF; --ink:#1A1412; --ink-soft:#55483F;
  --ink-faint:#A2938A; --rule:#D6CEC3; --band:#3A1512; --band-ink:#F3E9E4;
  --band-soft:#BFA098; --band-rule:#57241F; --band-accent:#FF8B79;
  --accent:#D8342B; --accent-hot:#F03D36; --accent-wash:#F6E2DE;
  --sans:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(20px,5vw,76px); --maxw:1340px;
  --ease:cubic-bezier(.2,.75,.25,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#191110; --ground-2:#231817; --ink:#EFE6E1; --ink-soft:#B9A79F;
    --ink-faint:#75605A; --rule:#392A27; --band:#F3E9E4; --band-ink:#2A0D0B;
    --band-soft:#7A5B54; --band-rule:#D3BDB6; --band-accent:#C4342A;
    --accent:#FF564A; --accent-hot:#FF564A; --accent-wash:#2E1815;
  }
}
:root[data-theme="dark"]{
  --ground:#191110; --ground-2:#231817; --ink:#EFE6E1; --ink-soft:#B9A79F;
  --ink-faint:#75605A; --rule:#392A27; --band:#F3E9E4; --band-ink:#2A0D0B;
  --band-soft:#7A5B54; --band-rule:#D3BDB6; --band-accent:#C4342A;
  --accent:#FF564A; --accent-hot:#FF564A; --accent-wash:#2E1815;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--serif); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--accent-hot); color:#fff; }
a{ color:inherit; }
img{ max-width:100%; height:auto; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.vh{ position:absolute!important; width:1px!important; height:1px!important; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
:where(a,button):focus-visible{ outline:2px solid var(--accent-hot); outline-offset:3px; border-radius:4px; }

/* ---------------- nav ---------------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--ground) 95%, transparent);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--rule);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand svg{ width:42px; height:auto; aspect-ratio:620/316; color:var(--accent-hot); display:block; }
.brand-name{ font-family:var(--sans); font-weight:800; font-size:19px; letter-spacing:-.03em; }
.brand-sub{ display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-top:1px; }
.nav-links{ display:none; gap:28px; align-items:center; }
@media (min-width:880px){ .nav-links{ display:flex; } }
.nav-links a{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft); }
.nav-links a:hover{ color:var(--ink); }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; padding:12px 22px; border-radius:999px; color:#fff;
  border:1px solid var(--accent-hot); white-space:nowrap; overflow:hidden;
  background-color:var(--accent-hot);
  background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat; background-position:50% 100%; background-size:100% 0%;
  transition:background-size .45s var(--ease), color .3s ease;
}
.btn:hover{ background-size:100% 100%; color:var(--ground); }
@media (max-width:600px){
  .brand-sub{ display:none; } .brand svg{ width:34px; }
  .nav .btn{ font-size:10.5px; padding:10px 15px; }
}

/* ---------------- shared bits ---------------- */
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:0; }
.crumbs{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 26px; }
.crumbs a{ color:var(--ink-faint); text-decoration:none; }
.crumbs a:hover{ color:var(--accent); }

/* ---------------- listing ---------------- */
.jhead{ padding-block:clamp(48px,7vw,96px) clamp(28px,4vw,48px); display:grid; gap:16px; }
.jtitle{
  font-family:var(--sans); font-weight:600; font-size:clamp(34px,6vw,72px);
  line-height:1; letter-spacing:-.035em; margin:0; max-width:16ch; text-wrap:balance;
}
.jsub{ margin:0; color:var(--ink-soft); font-size:clamp(16px,1.5vw,19px); max-width:52ch; }
.jlist{ border-top:1px solid var(--rule); padding-bottom:clamp(48px,7vw,90px); }
.jitem{
  display:grid; gap:8px 40px; grid-template-columns:minmax(0,1fr);
  padding-block:clamp(24px,3vw,38px); border-bottom:1px solid var(--rule);
  text-decoration:none; position:relative; transition:padding-left .4s var(--ease);
}
@media (min-width:860px){
  .jitem{ grid-template-columns:132px minmax(0,1fr) 150px; align-items:baseline; }
  .jitem:hover{ padding-left:16px; }
}
.jdate{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.jname{
  font-family:var(--sans); font-weight:600; font-stretch:92%;
  font-size:clamp(20px,2.4vw,30px); line-height:1.12; letter-spacing:-.028em; margin:0;
  transition:color .3s ease;
}
.jitem:hover .jname{ color:var(--accent); }
.jdek{ grid-column:1/-1; margin:0; color:var(--ink-soft); font-size:16.5px; max-width:64ch; }
@media (min-width:860px){ .jdek{ grid-column:2/3; } }
.jtag{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.jread{ display:none; }
@media (min-width:860px){ .jread{ display:block; text-align:right; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); } }

/* ---------------- article ---------------- */
.art{ padding-block:clamp(40px,6vw,80px) clamp(48px,7vw,96px); }
.art-head{ max-width:22ch; }
.art h1{
  font-family:var(--sans); font-weight:600; font-stretch:94%;
  font-size:clamp(32px,5.4vw,64px); line-height:1.02; letter-spacing:-.035em;
  margin:0 0 22px; max-width:20ch; text-wrap:balance;
}
.art-meta{
  display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); padding-bottom:clamp(26px,3.5vw,44px); border-bottom:1px solid var(--rule);
}
.art-body{ max-width:68ch; padding-top:clamp(28px,4vw,48px); }
.art-body > .lede{
  font-size:clamp(19px,1.9vw,23px); line-height:1.5; color:var(--ink);
  margin:0 0 34px; letter-spacing:-.005em;
}
.art-body h2{
  font-family:var(--sans); font-weight:600; font-stretch:94%;
  font-size:clamp(22px,2.6vw,32px); line-height:1.15; letter-spacing:-.028em;
  margin:48px 0 14px; text-wrap:balance;
}
.art-body h3{
  font-family:var(--sans); font-weight:600; font-size:clamp(17px,1.8vw,21px);
  letter-spacing:-.02em; margin:34px 0 10px;
}
.art-body p{ margin:0 0 20px; color:var(--ink-soft); }
.art-body p strong, .art-body li strong{ color:var(--ink); font-weight:400; }
.art-body .lede strong{ font-family:var(--sans); font-weight:600; letter-spacing:-.02em; }
.art-body a{ color:var(--accent); text-underline-offset:3px; }
.art-body ul, .art-body ol{ margin:0 0 22px; padding-left:20px; color:var(--ink-soft); }
.art-body li{ margin-bottom:9px; }
.art-body blockquote{
  margin:30px 0; padding:4px 0 4px 22px; border-left:3px solid var(--accent-hot);
  font-style:italic; font-size:clamp(18px,1.8vw,21px); color:var(--ink);
}
.tablewrap{ overflow-x:auto; margin:0 0 26px; border:1px solid var(--rule); }
table{ border-collapse:collapse; width:100%; min-width:440px; background:var(--ground-2); }
th, td{ text-align:left; padding:12px 15px; border-bottom:1px solid var(--rule); font-size:15.5px; }
th{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:400; background:var(--ground);
}
td{ color:var(--ink-soft); }
td:first-child{ color:var(--ink); }
tr:last-child td{ border-bottom:0; }
th:nth-child(n+3), td:nth-child(n+3){ white-space:nowrap; }
.callout{
  border:1px solid var(--rule); border-left:3px solid var(--accent-hot);
  background:var(--ground-2); padding:clamp(20px,2.6vw,28px); margin:32px 0;
}
.callout p{ margin:0 0 12px; }
.callout p:last-child{ margin:0; }
.faqblock{ margin-top:52px; border-top:1px solid var(--rule); }
.faqblock details{ border-bottom:1px solid var(--rule); }
.faqblock summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; padding-block:18px; font-family:var(--sans); font-weight:600;
  font-size:clamp(16px,1.8vw,20px); letter-spacing:-.02em; line-height:1.3;
}
.faqblock summary::-webkit-details-marker{ display:none; }
.faqblock summary::after{ content:"+"; font-family:var(--mono); color:var(--accent-hot); font-size:20px; transition:transform .4s var(--ease); }
.faqblock details[open] summary::after{ transform:rotate(45deg); }
.faqblock .a{ margin:0; padding:0 0 20px; color:var(--ink-soft); font-size:16.5px; max-width:64ch; }

.endcta{
  margin-top:clamp(48px,6vw,80px); padding:clamp(26px,3.4vw,40px);
  background:var(--band); color:var(--band-ink);
  --accent-hot:var(--band-accent); --accent:var(--band-accent);
}
.endcta h2{ font-family:var(--sans); font-weight:600; font-size:clamp(21px,2.4vw,30px); letter-spacing:-.025em; margin:0 0 10px; }
.endcta p{ margin:0 0 22px; color:var(--band-soft); max-width:52ch; }
.endcta .btn{ background-color:var(--band-accent); border-color:var(--band-accent); color:#2A0D0B; background-image:linear-gradient(var(--band-ink),var(--band-ink)); }
.endcta .btn:hover{ color:var(--band); }

/* ---------------- footer ---------------- */
.foot{
  border-top:1px solid var(--rule); padding-block:30px 44px;
  display:flex; flex-wrap:wrap; gap:14px 32px; align-items:center; justify-content:space-between;
}
.foot small{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.foot a{ color:var(--ink-faint); text-decoration:none; }
.foot a:hover{ color:var(--accent); }

/* ==================================================================
   LEGAL + 404
   ================================================================== */
.legal{ padding-block:clamp(40px,6vw,80px) clamp(48px,7vw,96px); }
.legal h1{
  font-family:var(--sans); font-weight:600; font-stretch:94%;
  font-size:clamp(32px,5vw,58px); line-height:1.02; letter-spacing:-.035em;
  margin:0 0 16px; max-width:18ch;
}
.legal .updated{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); padding-bottom:clamp(24px,3vw,40px); border-bottom:1px solid var(--rule);
}
.legal-body{ max-width:68ch; padding-top:clamp(26px,3.5vw,44px); }
.legal-body h2{
  font-family:var(--sans); font-weight:600; font-size:clamp(19px,2.2vw,26px);
  letter-spacing:-.025em; margin:44px 0 12px;
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ font-family:var(--sans); font-weight:600; font-size:17px; letter-spacing:-.015em; margin:26px 0 8px; }
.legal-body p{ margin:0 0 18px; color:var(--ink-soft); }
.legal-body strong{ color:var(--ink); font-weight:400; }
.legal-body a{ color:var(--accent); text-underline-offset:3px; }
.legal-body ul{ margin:0 0 20px; padding-left:20px; color:var(--ink-soft); }
.legal-body li{ margin-bottom:9px; }
.legal-body .fill{
  color:var(--accent); font-family:var(--mono); font-size:.86em;
  background:var(--accent-wash); padding:1px 6px; border-radius:3px;
}
.summary{
  border:1px solid var(--rule); border-left:3px solid var(--accent-hot);
  background:var(--ground-2); padding:clamp(20px,2.6vw,30px); margin:0 0 40px;
}
.summary p{ margin:0 0 12px; }
.summary p:last-child{ margin:0; }

/* 404 */
.nf{ min-height:62vh; display:flex; flex-direction:column; justify-content:center; padding-block:clamp(56px,9vw,120px); }
.nf-code{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px;
}
.nf h1{
  font-family:var(--sans); font-weight:800; font-stretch:92%;
  font-size:clamp(44px,9vw,120px); line-height:.92; letter-spacing:-.045em;
  margin:0 0 20px; max-width:14ch;
}
.nf p{ margin:0 0 34px; color:var(--ink-soft); font-size:clamp(17px,1.6vw,20px); max-width:46ch; }
.nf-links{ display:flex; flex-wrap:wrap; gap:10px; }
.nf-links a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); border:1px solid var(--rule);
  border-radius:999px; padding:12px 18px; transition:all .3s ease;
}
.nf-links a:hover{ color:var(--ink); border-color:var(--ink); }
.nf-hat{ width:clamp(80px,12vw,150px); color:var(--accent-hot); margin-bottom:30px; opacity:.9; }