/* ═══════════════════════════════════════════════════════════
   Still June — essay pages
   Literata for presence · Newsreader for reading · Mono for scaffolding
   Bone is the space · Indigo is the air · Terracotta is what's near
   ═══════════════════════════════════════════════════════════ */

:root{
  --bone:#F6F1E8; --bone-deep:#EDE5D5; --bone-light:#FAF6EE;
  --ink:#2B2622; --ink-soft:#524940; --ink-faint:#847A6E;
  --terracotta:#A8705E; --terracotta-deep:#8A5746;
  --indigo:#4F6173; --indigo-soft:#7C8D9E; --indigo-faint:#B0BBC6;
  --display:'Literata', Georgia, serif;
  --serif:'Newsreader', Georgia, serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --measure:34rem;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--serif);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  position:relative;
  min-height:100vh;
}

/* the page is paper, lit from a window */
.paper{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 900px 700px at 12% 8%, rgba(248,230,200,0.30), transparent 60%),
    radial-gradient(ellipse 800px 900px at 92% 82%, rgba(79,97,115,0.09), transparent 62%);
}
body > *:not(.paper){ position:relative; z-index:1; }

::selection{ background:rgba(168,112,94,0.18); }

/* ── masthead ───────────────────────────────────────────── */
.masthead{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:24px;
  padding:36px clamp(24px,5vw,64px) 0;
  max-width:1180px; margin:0 auto;
}
.mh-wm{
  font-family:var(--display); font-weight:470; font-size:23px;
  letter-spacing:-0.02em; color:var(--ink); text-decoration:none;
}
.mh-wm em{ font-style:italic; font-weight:400; color:var(--terracotta-deep); }
.mh-nav{ display:flex; gap:28px; }
.mh-nav a{
  font-family:var(--mono); font-size:10.5px; font-weight:400;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--indigo); text-decoration:none;
  padding-bottom:2px; border-bottom:0.5px solid transparent;
  transition:border-color .25s, color .25s;
}
.mh-nav a:hover{ color:var(--terracotta-deep); border-bottom-color:var(--terracotta); }

/* ── essay — the v11 spread: byline · prose · pull ────── */
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(24px,5vw,64px);
}
.essay{ padding:clamp(48px,7vw,90px) 0 0; }

/* running head — the publication band */
.essay__masthead{
  border-top:1px solid var(--ink);
  border-bottom:0.5px solid var(--indigo);
  padding:14px 0;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--ink);
  margin-bottom:clamp(48px,7vw,96px);
}
.essay__masthead .terra{ color:var(--terracotta-deep); }
.essay__masthead .indigo{ color:var(--indigo); }
.essay__masthead .ink-soft{ color:var(--ink-soft); }

/* head — number, title, vertical edition mark */
.essay__head{
  display:grid; grid-template-columns:0.6fr 1.5fr 0.4fr;
  gap:clamp(20px,3vw,56px);
  margin-bottom:clamp(40px,6vw,72px);
}
.essay__num{
  font-family:var(--display); font-weight:380;
  font-size:clamp(98px,13vw,172px); line-height:0.84;
  letter-spacing:-0.03em; color:var(--terracotta);
}
.essay__num small{
  font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:0.18em; text-transform:uppercase;
  display:block; color:var(--ink-faint); margin-top:14px;
}
.essay__head-center{ padding-top:clamp(20px,3vw,40px); }
.essay__pretitle{
  font-family:var(--mono); font-size:10px;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--indigo); margin-bottom:16px;
}
.essay__title{
  font-family:var(--display); font-weight:420;
  font-size:clamp(38px,5.5vw,68px); line-height:1.04;
  letter-spacing:-0.022em; color:var(--ink);
  margin-bottom:clamp(20px,3vw,32px);
}
.essay__title em{ font-style:italic; font-weight:400; color:var(--terracotta-deep); }
.essay__deck{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(19px,2.2vw,24px); line-height:1.42;
  color:var(--terracotta-deep); max-width:30ch;
}
.essay__head-right{
  padding-top:clamp(40px,6vw,96px);
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--indigo); line-height:1.8;
  writing-mode:vertical-rl; text-orientation:mixed;
}

/* body — the three-column spread */
.essay__body{
  display:grid; grid-template-columns:1fr 1.8fr 0.8fr;
  gap:clamp(28px,4vw,64px);
  margin-top:clamp(36px,5vw,64px);
}
.essay__byline{
  font-family:var(--mono); font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase;
  line-height:1.7; color:var(--ink-soft);
  align-self:start;
  position:sticky; top:40px;
}
.essay__byline strong{
  display:block; color:var(--terracotta-deep);
  font-weight:500; margin-bottom:6px;
}
.essay__byline .distance{ color:var(--indigo); display:block; margin-top:12px; }

.essay__pull{
  align-self:start; padding-top:22px;
  position:sticky; top:40px;
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(18px,2.1vw,24px); line-height:1.35;
  letter-spacing:-0.015em; color:var(--terracotta-deep);
}
.essay__pull::before{
  content:''; display:block; width:40px; height:0.5px;
  background:var(--terracotta); margin-bottom:18px; opacity:0.7;
}
.essay__pull--empty::before{ display:none; }
.essay__pull small{
  display:block; margin-top:16px;
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--indigo); font-style:normal;
}

/* prose — Newsreader, quiet beneath the display */
.essay__prose{
  font-family:var(--serif); font-optical-sizing:auto;
  font-weight:400; font-size:17.5px; line-height:1.74;
  color:var(--ink);
  min-width:0;
}
.essay__prose p{ margin-bottom:1.15em; }
.essay__prose p:last-child{ margin-bottom:0; }
.essay__prose > p:first-of-type{ font-size:19px; line-height:1.6; }

.essay__prose em{ font-style:italic; }
.essay__prose strong{ font-weight:600; color:var(--ink); }

.essay__prose a{
  color:var(--terracotta-deep); text-decoration:none;
  border-bottom:0.5px solid var(--indigo-faint);
  transition:border-color .2s;
  overflow-wrap:anywhere;
}
.essay__prose a:hover{ border-bottom-color:var(--terracotta); }

.essay__prose h2, .essay__prose h3, .essay__prose h4{
  font-family:var(--display); font-weight:450;
  line-height:1.24; letter-spacing:-0.02em; color:var(--ink);
  margin:2.1em 0 0.7em;
}
.essay__prose h2{ font-size:1.62em; }
.essay__prose h3{ font-size:1.34em; }
.essay__prose h4{ font-size:1.15em; }
.essay__prose h2 em, .essay__prose h3 em, .essay__prose h4 em{ color:var(--terracotta-deep); }

.essay__prose h5{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:1.06em; line-height:1.62; color:var(--ink-soft);
  margin:0 0 0.5em; max-width:34ch;
}
.essay__prose h5 strong{ font-style:normal; font-weight:600; color:var(--ink); }
.essay__prose h5 em{ color:var(--terracotta-deep); }

/* the slug lines — the archive conceit, kept */
.essay__prose .slug{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 14px;
  font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--indigo);
  padding:16px 0;
  border-top:0.5px solid var(--indigo-faint);
  border-bottom:0.5px solid var(--indigo-faint);
  margin:clamp(38px,5vw,58px) 0;
}
.essay__prose .slug span:not(:last-child)::after{
  content:"·"; margin-left:14px; color:var(--indigo-faint);
}
.essay__prose .slug span:first-child{ color:var(--terracotta-deep); }

.essay__prose blockquote{
  margin:1.9em 0; padding:4px 0 4px 26px;
  border-left:2px solid var(--terracotta);
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:1.2em; line-height:1.48; color:var(--terracotta-deep);
}
.essay__prose blockquote p{ margin-bottom:0.5em; }
.essay__prose blockquote p:last-child{ margin-bottom:0; }
.essay__prose blockquote strong{ font-weight:500; color:var(--terracotta-deep); }

.essay__prose ul, .essay__prose ol{ margin:1.3em 0 1.5em 1.15em; }
.essay__prose li{ margin-bottom:0.62em; line-height:1.68; }
.essay__prose li::marker{ color:var(--indigo-soft); }

.essay__prose hr{
  border:0; height:1px; max-width:150px;
  background:linear-gradient(90deg, var(--indigo-faint), transparent);
  margin:clamp(40px,5vw,60px) 0;
}

.essay-img{ margin:clamp(34px,4vw,50px) 0; }
.essay-img img{
  display:block; width:100%; height:auto;
  border:0.5px solid var(--indigo-faint);
}

/* ── essay foot ─────────────────────────────────────────── */
.essay-foot{ margin-top:clamp(56px,7vw,84px); }
.ef-rule{
  height:1px;
  background:linear-gradient(90deg, var(--indigo-soft), var(--indigo-faint) 58%, transparent);
  margin-bottom:18px;
}
.ef-colophon{
  display:flex; gap:22px; flex-wrap:wrap;
  font-family:var(--mono); font-size:9.5px; font-weight:300;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-faint);
}

/* ── prev / next ────────────────────────────────────────── */
.prevnext{
  max-width:1180px; margin:clamp(64px,8vw,100px) auto 0;
  padding:0 clamp(24px,5vw,64px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,40px);
}
.pn-link{
  display:flex; flex-direction:column; gap:7px;
  padding:26px 0 0;
  border-top:0.5px solid var(--indigo-faint);
  text-decoration:none;
  transition:border-color .25s;
}
.pn-link:hover{ border-top-color:var(--terracotta); }
.pn-next{ text-align:right; }
.pn-dir{
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--indigo);
}
.pn-num{
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--ink-faint);
}
.pn-title{
  font-family:var(--display); font-weight:450; font-size:19px;
  line-height:1.22; letter-spacing:-0.02em; color:var(--ink);
  transition:color .25s;
}
.pn-link:hover .pn-title{ color:var(--terracotta-deep); }
.pn-empty{ display:block; }

/* ── subscribe ──────────────────────────────────────────── */
.subscribe{
  max-width:1180px; margin:clamp(72px,9vw,120px) auto 0;
  padding:0 clamp(24px,5vw,64px);
}
.sub-inner{
  background:var(--bone-deep);
  padding:clamp(38px,5vw,60px) clamp(28px,4vw,56px);
  border-left:2px solid var(--terracotta);
  max-width:var(--measure);
}
.sub-label{
  font-family:var(--mono); font-size:10px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--indigo); margin-bottom:16px;
}
.sub-h{
  font-family:var(--display); font-weight:450;
  font-size:clamp(24px,3vw,32px); line-height:1.2;
  letter-spacing:-0.022em; color:var(--ink); margin-bottom:12px;
}
.sub-note{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:16px; line-height:1.6; color:var(--ink-soft); margin-bottom:26px;
}
.sub-form{ display:flex; gap:10px; flex-wrap:wrap; }
.sub-input{
  flex:1 1 240px; min-width:0;
  background:var(--bone-light);
  border:0.5px solid var(--indigo-soft);
  padding:13px 15px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em;
  color:var(--ink);
}
.sub-input::placeholder{ color:var(--ink-faint); }
.sub-input:focus{ outline:none; border-color:var(--terracotta); }
.sub-btn{
  background:var(--ink); color:var(--bone-light);
  border:0.5px solid var(--ink);
  padding:13px 26px; cursor:pointer;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:0.22em; text-transform:uppercase;
  transition:background .25s, border-color .25s;
}
.sub-btn:hover{ background:var(--terracotta-deep); border-color:var(--terracotta-deep); }
.hp{ position:absolute; left:-9999px; }
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ── site foot ──────────────────────────────────────────── */
.site-foot{
  max-width:1180px; margin:clamp(72px,8vw,110px) auto 0;
  padding:0 clamp(24px,5vw,64px) clamp(48px,6vw,72px);
}
.sf-inner{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:22px;
  border-top:0.5px solid var(--indigo-faint);
  font-family:var(--mono); font-size:9.5px; font-weight:300;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-faint);
}

/* ── narrow ─────────────────────────────────────────────── */
@media (max-width:1080px){
  .essay__body{ grid-template-columns:1fr 1.7fr; }
  .essay__pull{
    grid-column:2; position:static;
    padding-top:26px; margin-top:22px;
    border-top:0.5px solid var(--indigo-faint);
    max-width:34ch;
  }
  .essay__pull--empty{ display:none; }
  .essay__head{ grid-template-columns:0.5fr 1.6fr; }
  .essay__head-right{ display:none; }
}

@media (max-width:760px){
  .essay__body{ grid-template-columns:1fr; gap:0; }
  .essay__byline{
    position:static; margin-bottom:34px; padding-bottom:22px;
    border-bottom:0.5px solid var(--indigo-faint);
  }
  .essay__pull{ grid-column:1; }
  .essay__head{ grid-template-columns:1fr; gap:8px; }
  .essay__num{ font-size:clamp(72px,18vw,110px); }
  .essay__num small{ margin-top:8px; }
  .essay__head-center{ padding-top:8px; }
  .essay__masthead{ font-size:9.5px; letter-spacing:.14em; gap:10px; }
  .essay__prose{ font-size:16.5px; line-height:1.72; }
  .essay__prose > p:first-of-type{ font-size:17.5px; }
  .prevnext{ grid-template-columns:1fr; gap:0; }
  .pn-next{ text-align:left; }
  .pn-link{ padding-top:22px; }
  .mh-nav{ gap:18px; }
}

@media print{
  .paper, .masthead, .prevnext, .subscribe, .site-foot{ display:none; }
  body{ background:#fff; }
  .essay{ padding:0; }
  .essay__byline, .essay__pull, .essay__head-right, .essay__masthead{ display:none; }
  .essay__body{ display:block; }
}