/* Nervous System Regulation — design system
   Plus Jakarta Sans on parchment with grain.
   Rust is the accent and is used sparingly. Rules and whitespace do the
   dividing; there are no cards and no shadows. */

:root{
  --parch:#f7f1e4; --parch-2:#f1e8d6; --ink:#241f18; --ink-2:#544a3c;
  --dim:#706454; --rule:#ded1b8; --rule-2:#e9dfca;
  --rust:#b4502a; --forest:#2c5347; --rust-15:rgba(180,80,42,.22);
  --card:#f2ebda; --card-edge:#e4d8bf; --card-hover:#efe7d3;
  --moss:#5c7a4a; --clay:#b4802a; --brick:#93392c;
  /* One family throughout. The previous display serif carried a "wonky" axis and
     the small labels were set in a monospace, which together read as old and as a
     lab report. A single warm sans does both jobs without either signal. */
  --display:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  --body:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  --mono:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  --wide:1180px; --text:680px;
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:16.5px;
  line-height:1.72;background:var(--parch);max-width:100%;overflow-x:hidden}
main,.wrap,.grid{min-width:0}
img,svg,video{max-width:100%}
code{overflow-wrap:anywhere}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}
body>*{position:relative;z-index:2}
::selection{background:#e8c9b6}

@keyframes rise{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
.r{animation:rise .72s cubic-bezier(.2,.7,.3,1) both}
.r1{animation-delay:.04s}.r2{animation-delay:.12s}.r3{animation-delay:.2s}
.r4{animation-delay:.3s}.r5{animation-delay:.4s}
@media(prefers-reduced-motion:reduce){
  .r{animation:none}
  .studies .study,.study-link,.study-link .arrow{transition:none}
  .studies .study:hover{transform:none}
}

/* ── masthead ── */
header{border-bottom:1px solid var(--rule)}
.mast{max-width:var(--wide);margin:0 auto;padding:26px 34px 22px;display:flex;
  align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap}
.logo{font-family:var(--display);font-size:24px;line-height:1;letter-spacing:-.035em;
  font-weight:700;color:inherit;text-decoration:none;background-image:none}
.logo em{display:block;font-family:var(--mono);font-size:9.5px;font-style:normal;
  letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-top:9px;font-weight:600}
nav{font-size:14px;font-weight:500}
/* No rules under the nav. The current page is carried by colour plus
   aria-current, which is what a screen reader reads anyway. */
nav a{text-decoration:none;background-image:none;color:var(--ink-2);
  margin-left:22px;transition:color .2s ease}
nav a:hover{color:var(--rust)}
nav a[aria-current]{color:var(--ink);font-weight:700}
@media(max-width:620px){nav a{margin:0 18px 0 0}}

/* ── layout ── */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 34px}
.grid{max-width:var(--wide);margin:0 auto;padding:0 34px 130px;
  display:grid;grid-template-columns:1fr 214px;gap:64px}
@media(max-width:980px){.grid{grid-template-columns:1fr;gap:0;padding-bottom:80px}}
main{padding-top:56px;max-width:var(--text);grid-column:1}
.prose{max-width:var(--text)}

.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-bottom:24px;
  display:flex;align-items:center;gap:12px;font-weight:600}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}
.eyebrow a{color:var(--dim);text-decoration:none;background-image:none}
.eyebrow a:hover{color:var(--rust)}

h1{font-family:var(--display);font-size:clamp(36px,5vw,52px);line-height:1.06;
  letter-spacing:-.035em;font-weight:600;margin:0 0 22px;text-wrap:balance}
.deck{font-family:var(--display);font-size:20px;line-height:1.55;font-weight:400;
  font-style:italic;color:var(--ink-2);margin:0 0 30px;max-width:54ch}
h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);font-weight:500;margin:52px 0 16px;display:flex;align-items:center;gap:13px}
h2::after{content:"";flex:1;height:1px;background:var(--rule-2)}
h3{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.02em;
  margin:32px 0 10px}
p{font-size:17.5px;line-height:1.78;margin:0 0 18px}
p.small,.small{font-size:15.5px;color:var(--ink-2)}
.muted{color:var(--dim)}
.lead::first-letter{font-family:var(--display);float:left;font-size:64px;line-height:.82;
  padding:8px 11px 0 0;font-weight:500;color:var(--rust)}

a{color:var(--forest);text-decoration:none;
  background-image:linear-gradient(var(--forest),var(--forest));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s}
a:hover{background-size:100% 2px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--rust);outline-offset:3px;border-radius:2px}
a.plain,.plain a{background-image:none}
.gloss{border-bottom:1px dotted var(--dim);color:inherit;background-image:none}
.gloss:hover{border-bottom-color:var(--rust)}

ul{margin:0 0 18px;padding-left:20px}
ul li{margin-bottom:9px;font-size:17.5px;line-height:1.7}
ol{margin:0 0 18px;padding:0;list-style:none;counter-reset:c}
ol li{counter-increment:c;position:relative;padding-left:52px;margin-bottom:16px;
  font-size:17.5px;line-height:1.66}
ol li::before{content:counter(c,decimal-leading-zero);position:absolute;left:0;top:-2px;
  font-family:var(--display);font-size:23px;color:var(--rust);opacity:.5}

.assess{background:var(--parch-2);padding:26px 30px 28px;margin-bottom:44px;
  position:relative;border-left:3px solid var(--dim)}
.aline{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.alab{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.ascount{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-2)}
.assess p{font-size:17.5px;line-height:1.62;margin:0}

/* ── tables ── */
table{width:100%;border-collapse:collapse;margin:8px 0;font-size:15.5px}
th{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--dim);font-weight:500;text-align:left;padding:0 12px 12px 0;
  border-bottom:1px solid var(--ink)}
th.n,td.n{text-align:right;padding-right:0;font-variant-numeric:tabular-nums}
td{padding:14px 12px 14px 0;border-bottom:1px solid var(--rule-2);vertical-align:top}
tr{transition:background .25s}
tbody tr:hover{background:rgba(222,209,184,.3)}
td.n{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);white-space:nowrap}
td .t{font-size:16.5px;line-height:1.4}
td .s{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:4px}
.nm{font-family:var(--display);font-size:20px;letter-spacing:-.018em;font-weight:400}
.nm a{color:inherit;background-image:none}
tbody tr:hover .nm a{color:var(--rust)}
.stat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;color:var(--dim)}
.stat.rec{color:var(--moss)}.stat.end{color:var(--rust)}
.tablewrap{overflow-x:auto}
.table-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 10px}
.table-tools label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
.table-tools input{min-width:min(320px,100%);padding:9px 10px;border:1px solid var(--rule);
  background:var(--parch);color:var(--ink);font:inherit}
.table-tools .count{font-family:var(--mono);font-size:10px;color:var(--dim)}
.table-tools button{border:1px solid var(--rust);background:transparent;color:var(--rust);
  padding:8px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer}
[hidden]{display:none!important}

/* ── figures, callouts ── */
figure{margin:40px 0;padding:0}
.ctitle{font-family:var(--display);font-size:21px;font-weight:400;letter-spacing:-.02em;
  margin-bottom:4px}
.csub{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.06em;margin-bottom:30px}
.chart{display:flex;align-items:flex-end;gap:12px;height:132px;border-bottom:1px solid var(--ink)}
.chart div{flex:1;background:#e2d3b8;position:relative;transition:background .3s}
.chart div.hi{background:var(--rust);opacity:.85}
.chart div:hover{background:var(--rust)}
.chart span{position:absolute;bottom:-24px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:10px;color:var(--dim)}
figcaption{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.05em;
  margin-top:38px;padding-top:13px;border-top:1px solid var(--rule-2)}

.caution{margin:32px 0;padding-left:24px;border-left:1px solid var(--rust)}
.caution .h{font-family:var(--display);font-size:21px;font-weight:400;margin-bottom:7px;
  letter-spacing:-.02em}
.caution p{font-size:17px;margin:0;color:var(--ink-2)}
.note{background:var(--parch-2);padding:20px 24px;margin:26px 0;border-left:3px solid var(--forest)}
.note p:last-child{margin-bottom:0}
.note .t{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--forest);font-weight:500;margin-bottom:8px}

details{border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  margin:28px 0;padding:15px 0}
summary{cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--rust);list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+  ";color:var(--dim)}
details[open] summary::before{content:"–  "}
details p{font-size:16.5px;color:var(--ink-2);margin-top:14px}

/* ── rail ── */
.rail{padding-top:60px;font-family:var(--mono);font-size:11.5px;line-height:1.6;grid-column:2}
.rail .stick{position:sticky;top:32px}
.rtitle{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--rust);
  padding-bottom:10px;border-bottom:1px solid var(--rust);margin-bottom:4px}
.rail dl{margin:0 0 30px}
.rail dt{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
  margin-top:16px;padding-top:9px;border-top:1px solid var(--rule-2)}
.rail dd{margin:5px 0 0;color:var(--ink)}
.rail dd a{color:var(--forest);background-image:none;border-bottom:1px solid #b6c8c1}
.rail .warn{color:var(--rust)}
.toc a{display:block;color:var(--dim);background-image:none;padding:5px 0 5px 12px;
  border-left:1px solid var(--rule);transition:border-color .25s,color .25s}
.toc a:hover{color:var(--ink);border-left-color:var(--rust)}
@media(max-width:980px){
  .rail{grid-column:1;padding:8px 0 26px;border-bottom:1px solid var(--rule);order:2}
  .rail .stick{position:static}
  .rail dl{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
  .toc{display:none}
}

/* ── homepage ── */
.hero{padding:76px 0 56px;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:1fr 340px;gap:70px;align-items:end}
@media(max-width:980px){.hero{grid-template-columns:1fr;gap:38px;padding:52px 0 40px}}
.hero h1{font-size:clamp(38px,5.4vw,62px);line-height:1.03;letter-spacing:-.032em;max-width:15ch}
.hero h1 i{font-style:italic;color:var(--rust)}
.hero p{font-size:19.5px;line-height:1.62;color:var(--ink-2);max-width:48ch;margin:0}
.promise{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);border-top:1px solid var(--rule);padding-top:16px;line-height:2}
.promise b{color:var(--rust);font-weight:500}
.sec{padding:56px 0;border-bottom:1px solid var(--rule)}
.shead{display:flex;align-items:baseline;gap:16px;margin-bottom:30px}
.shead h2{margin:0;white-space:nowrap}
.shead h2::after{display:none}
.shead .line{flex:1;height:1px;background:var(--rule-2)}
.shead a{background-image:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rust);white-space:nowrap;background-image:none}
.shead a:hover{text-decoration:underline}
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:760px){.track{grid-template-columns:repeat(2,1fr);gap:26px 0}}
.tcell{padding:4px 22px 4px 22px;border-left:1px solid var(--rule-2)}
.tcell:first-child{border-left:0;padding-left:0}
.tnum{font-family:var(--display);font-size:44px;line-height:1;color:var(--rust);
  font-weight:400;letter-spacing:-.03em}
.tlab{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim);
  margin-top:9px;line-height:1.5}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
@media(max-width:860px){.how{grid-template-columns:1fr;gap:30px}}
.how .n{font-family:var(--display);font-size:26px;color:var(--rust);opacity:.5;line-height:1;margin-bottom:12px}
.how h3{font-family:var(--display);font-size:21px;font-weight:400;margin:0 0 9px;
  letter-spacing:-.02em}
.how p{font-size:16px;line-height:1.68;color:var(--ink-2);margin:0}

/* ── index lists ── */
.stack a.item{display:block;background-image:none;color:inherit;padding:17px 0;
  border-bottom:1px solid var(--rule-2);transition:padding-left .3s cubic-bezier(.2,.7,.3,1)}
.stack a.item:hover{padding-left:8px}
.stack a.item:hover .item-heading{color:var(--rust)}
.stack .item-heading{font-family:var(--display);font-size:18.5px;line-height:1.32;font-weight:600;
  margin:6px 0;letter-spacing:-.018em;
  color:inherit;text-transform:none;display:block}
.stack .item-heading::after{display:none}
.kick{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);font-weight:600}
.kick b{color:var(--rust);font-weight:500}
.cols{columns:2;column-gap:44px}
@media(max-width:700px){.cols{columns:1}}
.cols a{display:block;break-inside:avoid;padding:9px 0;border-bottom:1px solid var(--rule-2);
  background-image:none;color:inherit}
.cols a:hover{color:var(--rust)}
.cols .term{font-family:var(--display);font-size:18px}
.cols .def{font-size:14px;color:var(--dim);line-height:1.5}

/* ── condition interpretation and research dispatches ── */
.condition-reading{margin:42px 0 48px;padding:0 0 2px 24px;border-left:1px solid var(--rust)}
.condition-reading h2{margin-top:0}
.condition-reading p:last-child{margin-bottom:0}
.dispatch-list{margin-top:36px}
.dispatch-list .item p{max-width:58ch;margin:8px 0 0}
.dispatch-status{display:flex;flex-wrap:wrap;gap:8px 24px;margin:30px 0 42px;
  padding:13px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.dispatch-body>h2:first-child{margin-top:0}
.dispatch-actions{display:flex;flex-wrap:wrap;gap:12px 24px;margin:22px 0 0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.dispatch-actions a{color:var(--rust);background-image:none}
.dispatch-actions a:hover{text-decoration:underline}

/* ── subscribe ── */
.sub{margin-top:60px;background:var(--parch-2);padding:30px 32px 32px;border-top:3px solid var(--rust)}
.sub h3{font-family:var(--display);font-size:27px;font-weight:500;margin:0 0 7px;
  letter-spacing:-.022em}
.sub p{font-size:16px;color:var(--ink-2);margin:0 0 20px;max-width:44ch}
.sub form{display:flex;max-width:410px;border-bottom:1.5px solid var(--ink)}
.sub input{flex:1;padding:10px 2px;border:0;background:none;font-family:var(--body);
  font-size:16px;color:var(--ink);outline:none}
.sub input::placeholder{color:var(--dim)}
.sub button{border:0;background:none;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--rust);cursor:pointer;
  padding:0 2px;transition:transform .25s}
.sub button:hover{transform:translateX(3px)}
.fine{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:14px;letter-spacing:.04em;font-weight:600}

.colophon{margin-top:52px;padding-top:18px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:10.5px;line-height:1.9;color:var(--dim);letter-spacing:.03em}
.colophon a{color:var(--rust);background-image:none}
.colophon b{color:var(--ink-2);font-weight:500}

/* ── footer ── */
footer{border-top:1px solid var(--rule);background:var(--parch-2)}
.fw{max-width:var(--wide);margin:0 auto;padding:28px 34px;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--dim)}
.fw a{color:var(--dim);background-image:none}
.fw a:hover{color:var(--rust)}
.disclaimer{border-top:1px solid var(--rule-2);padding:16px 34px;background:var(--parch-2)}
.dw{max-width:var(--wide);margin:0 auto;font-family:var(--mono);font-size:10px;
  line-height:1.8;color:var(--dim);letter-spacing:.03em}

.trust-banner{background:#efe1c8;border-bottom:1px solid #cdbb99;color:var(--ink-2)}
.trust-banner>div{max-width:var(--wide);margin:0 auto;padding:11px 34px;
  font-size:14px;line-height:1.5}
.trust-banner b{color:var(--ink)}
.trust-banner a{margin-left:6px}

@media(max-width:620px){
  .mast,.wrap,.grid,.fw{padding-left:20px;padding-right:20px}
  .disclaimer{padding-left:20px;padding-right:20px}
  .trust-banner>div{padding-left:20px;padding-right:20px}
  .mast{align-items:flex-start}
  nav{display:flex;flex-wrap:wrap;gap:8px 16px}
  nav a{margin:0;padding:4px 0}
  h1{font-size:clamp(33px,10vw,44px)}
  .assess{padding:22px 20px}
  .ascale{width:100%;margin-left:0;white-space:normal}
  .condition-reading{padding-left:18px}
}


/* ── charts ────────────────────────────────────────────────────────────────
   Single-series magnitude, so one hue and no legend: the title names the
   series. Recessive axis, direct label only on the peak, and every chart has
   a table view one click away on the studies page. */
.fig{margin:38px 0}
.fig .ftitle{font-family:var(--display);font-size:20px;font-weight:400;
  letter-spacing:-.02em;margin-bottom:3px}
.fig .fsub{font-family:var(--mono);font-size:10.5px;color:var(--dim);
  letter-spacing:.06em;margin-bottom:18px}
.fig svg{display:block;width:100%;height:auto;overflow:visible}
.fig .bar{fill:var(--rust);opacity:.85;transition:opacity .2s}
.fig .bar:hover{opacity:1}
.fig .bar-dim{fill:#d9c9a9}
.fig .axis{stroke:var(--ink);stroke-width:1}
.fig .tick{font-family:var(--mono);font-size:9px;fill:var(--dim)}
.fig .val{font-family:var(--mono);font-size:9px;fill:var(--ink-2)}
.fig figcaption{font-family:var(--mono);font-size:10px;color:var(--dim);
  letter-spacing:.05em;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-2)}
.fig .lbl{font-family:var(--body);font-size:12.5px;fill:var(--ink)}
.fig .rlbl{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase}

.fig .key{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--ink-2)}
.fig .key i{display:inline-block;width:10px;height:10px;border-radius:2px;
  margin-right:7px;vertical-align:-1px}
.profile{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-2);
  border:1px solid var(--rule-2);margin:26px 0}
@media(max-width:760px){.profile{grid-template-columns:repeat(2,1fr)}}
.profile div{background:var(--parch);padding:14px 16px}
.profile .pv{font-family:var(--display);font-size:26px;line-height:1;color:var(--ink)}
.profile .pk{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--dim);
  margin-top:7px;line-height:1.5;text-transform:uppercase}

/* Reviewed and deliberately unrated: a state, not a point on the rating scale,
   so it reads as neutral ink rather than borrowing a rating colour. */
.rate.insufficient,.aval.insufficient,.rt-insufficient{color:var(--ink-2)}
.assess.insufficient{border-left-color:var(--rule-2)}
.rate.insufficient{border-color:var(--rule-2)}

/* Retracted work: kept visible, never quiet. Uses the strongest step on the
   rating ramp because this is the one status a reader must not miss. */
.retracted{color:var(--brick);letter-spacing:.08em;font-family:var(--mono);font-size:9.5px}

/* Entry changelog: a dated record, styled as a log rather than as prose so a
   reader can scan for whether anything moved. */
.clog{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:14px 0;
  border-top:1px solid var(--rule-2)}
.clog:first-of-type{border-top:1px solid var(--rule)}
.cl-date{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim);
  padding-top:2px}
.cl-change{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rust);margin-bottom:5px}
@media(max-width:620px){.clog{grid-template-columns:1fr;gap:4px}}

/* ════════════════════════════════════════════════════════════════════════
   THE WEEKLY ISSUE
   The essay reads first, at one comfortable measure. The week's studies sit
   beneath it as cards, tinted by topic. They used to run in a column beside
   the essay: two columns of unrelated prose is a hard read, and on a phone the
   column became a tail nobody reached.
   ════════════════════════════════════════════════════════════════════════ */

.issue{padding-top:54px;max-width:var(--text);margin:0 auto}
.issue-head{padding-bottom:30px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.issue-head h1{margin:14px 0 18px}
.issue-head .dek{font-family:var(--display);font-size:20px;line-height:1.55;
  font-weight:400;font-style:italic;color:var(--ink-2);margin:0}
.draft-flag{color:var(--rust)}

/* ── the essay ──
   More air than the rest of the site, and real headings rather than the small
   tracked section labels h2 carries elsewhere. */
.essay{padding-top:36px}
.essay p{font-size:18px;line-height:1.82;margin:0 0 22px}
.essay h2{font-family:var(--display);font-size:23px;line-height:1.25;font-weight:600;
  letter-spacing:-.025em;text-transform:none;color:var(--ink);margin:44px 0 14px;
  display:block}
.essay h2::after{display:none}
.essay h3{font-size:19px;font-weight:600;margin:32px 0 10px}
.essay blockquote{margin:30px 0;padding-left:24px;border-left:2px solid var(--rust);
  font-style:italic;font-size:18px;color:var(--ink-2)}
.essay > :first-child{margin-top:0}
.essay ul,.essay ol{padding-left:22px;margin:0 0 22px}
.essay li{font-size:18px;line-height:1.78;margin-bottom:9px}

/* ── the week's research ── */
.research{max-width:var(--wide);margin:0 auto;padding:64px 0 10px}
.research-head{max-width:var(--text);margin:0 auto 30px;text-align:center}
.research-head h2{font-family:var(--display);font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rust);font-weight:700;margin:0 0 12px;
  display:block;justify-content:center}
.research-head h2::after{display:none}
.research-note{font-size:17px;line-height:1.6;color:var(--ink-2);margin:0}
.research-foot{text-align:center;margin-top:26px}

/* Flex rather than grid so a partial last row centres itself. Five studies in
   three columns leaves two over, and auto-fit would strand them on the left. */
.studies{list-style:none;margin:0;padding:0;counter-reset:none;
  display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:stretch}
.studies li{counter-increment:none;margin-bottom:0}
.studies li::before{content:none}

/* Paper laid on the parchment: a shade lighter than the page, with a warm
   hairline edge. No shadow, and no colour-coding by topic — six tints made the
   grid look like a filing system rather than five things worth reading. */
.studies .study{flex:0 1 calc(33.333% - 14px);min-width:288px;
  background:var(--card);border:1px solid var(--card-edge);
  padding:26px;border-radius:8px;display:flex;flex-direction:column;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),
             border-color .22s ease, background-color .22s ease}
.studies .study:hover{transform:translateY(-3px);
  background:var(--card-hover);border-color:var(--rust-15)}
.studies .study:hover .study-link{color:var(--rust)}
.studies .study:focus-within{border-color:var(--rust-15)}
.topic{font-family:var(--display);font-size:10px;letter-spacing:.16em;font-weight:700;
  text-transform:uppercase;color:var(--rust);margin-bottom:10px}
.study h3{font-family:var(--display);font-size:18px;line-height:1.36;font-weight:600;
  letter-spacing:-.02em;margin:0 0 10px}
.study p{font-size:15.5px;line-height:1.68;margin:0 0 12px;color:var(--ink-2)}
.study .means{font-size:15px;color:var(--ink)}
.study .means b{font-weight:600;color:var(--forest)}
.study .limit{font-size:15px;color:var(--ink-2)}
.study .limit b{font-weight:600;color:var(--ink-2)}
.study-foot{margin-top:auto;padding-top:12px}
.facts{font-family:var(--display);font-size:11.5px;letter-spacing:.02em;color:var(--dim);
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-weight:500}
/* An abstract-only card is a weaker claim than a full-text one and says so. */
.facts .depth{color:var(--rust)}
.study-link{display:inline-block;margin-top:10px;font-size:14.5px;font-weight:600;
  color:var(--forest);text-decoration:none;background-image:none;
  transition:color .22s ease}
.study-link:hover{color:var(--rust)}
/* The arrow steps forward rather than the whole label moving, so the line of
   links across a row stays put. */
.study-link .arrow{display:inline-block;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.studies .study:hover .study-link .arrow{transform:translateX(4px)}

.issue-nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  max-width:var(--text);margin:0 auto;padding:34px 0 10px;border-top:1px solid var(--rule);
  font-family:var(--display);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600}
.issue-nav a{color:var(--ink-2);text-decoration:none;background-image:none}
.issue-nav a:hover{color:var(--rust)}
.issue-nav a:only-child:last-child{margin-left:auto}

.previous{border-bottom:0}
.month{margin-top:44px}
.month h2{margin-bottom:8px}

@media(max-width:900px){
  .issue{padding-top:34px}
  .research{padding-top:48px}
  .studies{gap:16px}
  .study{flex:1 1 100%;min-width:0}
  .essay p,.essay li{font-size:17px}
}

/* ── signup ──
   Placed where the reading ends, because that is the only moment intent is
   real. Never a modal: the thing this site offers is calm, and an overlay
   spends it. */
.subscribe{background:var(--parch-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);margin-top:20px}
.sw{max-width:640px;margin:0 auto;padding:56px 34px 50px;text-align:center}
.sw h2{font-family:var(--display);font-size:27px;line-height:1.2;font-weight:600;
  letter-spacing:-.03em;text-transform:none;color:var(--ink);margin:0 0 12px;
  display:block}
.sw h2::after{display:none}
.sw p{font-size:16.5px;line-height:1.66;color:var(--ink-2);margin:0 auto 26px;max-width:46ch}
/* beehiiv's loader injects the field and button; the site styles the band they
   sit in and nothing inside it. */
.sw [data-beehiiv-form],.sw iframe{max-width:100%}

.nav-sub{margin-left:26px;color:var(--rust)!important}
.nav-sub:hover{opacity:.72}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── evening reading ──
   Warm dark, not a neutral grey one. The grain is multiplied on parchment,
   which would crush a dark ground, so it switches to a soft overlay. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --parch:#1b1815; --parch-2:#221e19; --ink:#ece2d1; --ink-2:#c2b6a2;
    --dim:#94897a; --rule:#3a332b; --rule-2:#2f2921;
    --rust:#e08155; --forest:#7fb39d;
    --moss:#8fb37a; --clay:#d4a44a; --brick:#e0776a;
    --rust-15:rgba(224,129,85,.28);
    --card:#211d18; --card-edge:#352e25; --card-hover:#262119;
  }
  :root:not([data-theme=light]) body::before{mix-blend-mode:overlay;opacity:.28}
  :root:not([data-theme=light]) ::selection{background:#57392a}
}
:root[data-theme=dark]{
  --parch:#1b1815; --parch-2:#221e19; --ink:#ece2d1; --ink-2:#c2b6a2;
  --dim:#94897a; --rule:#3a332b; --rule-2:#2f2921;
  --rust:#e08155; --forest:#7fb39d;
  --rust-15:rgba(224,129,85,.28);
  --card:#211d18; --card-edge:#352e25; --card-hover:#262119;
}
:root[data-theme=dark] body::before{mix-blend-mode:overlay;opacity:.28}