/* ─────────────────────────────────────────────────────────────────────────
   Shared styling for essay pages. Same tokens as the homepage, retuned for
   long-form reading: bigger type, looser leading, a narrower measure.
   Every essay page links this file, so type changes happen in one place.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --void:      #0B0B0C;
  --void-lift: #121214;
  --bone:      #EDE9E1;
  --bone-dim:  rgba(237,233,225,.66);
  --bone-faint:rgba(237,233,225,.34);
  --brass:     #A98B52;
  --rule:      rgba(237,233,225,.13);

  --display: "Bodoni Moda","Didot","Bodoni 72","Bodoni MT",Georgia,serif;
  --sans:    "Jost","Futura","Avenir Next","Helvetica Neue",-apple-system,sans-serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 36rem;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--void); color:var(--bone);
  font-family:var(--sans); font-weight:300;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{ background:var(--brass); color:var(--void); }

.wrap{ width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }

/* ── masthead ─────────────────────────────────────────────────────────── */
.essay-top{
  border-bottom:1px solid var(--rule);
  padding-block:1.75rem;
  margin-bottom:clamp(3.5rem,9vh,6rem);
}
.essay-top .inner{
  width:100%; max-width:64rem; margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.essay-top .name{
  font-family:var(--display); font-size:.95rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone); text-decoration:none;
}
.essay-top .back{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-dim); text-decoration:none; transition:color .4s ease;
}
.essay-top .back:hover{ color:var(--brass); }

/* ── title block ──────────────────────────────────────────────────────── */
.essay-head{ margin-bottom:clamp(3rem,7vh,4.5rem); }
.essay-kicker{
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brass); margin-bottom:1.5rem;
}
h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.3rem,1.5rem + 3.4vw,3.6rem); line-height:1.08;
  letter-spacing:-.018em; text-wrap:balance;
}
.essay-meta{
  margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--rule);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-faint);
  display:flex; gap:1.5rem; flex-wrap:wrap;
}

/* ── body ─────────────────────────────────────────────────────────────── */
.essay-body{
  font-size:clamp(1.08rem,1.03rem + .28vw,1.2rem);
  line-height:1.85; color:var(--bone-dim);
}
.essay-body p{ text-wrap:pretty; }
.essay-body p + p{ margin-top:1.5rem; }

/* Her rhythm depends on short standalone lines. Tighten the gap between
   consecutive one-liners so they read as a stanza, not as separate blocks. */
.essay-body p.beat + p.beat{ margin-top:.6rem; }

.essay-body h2{
  font-family:var(--display); font-weight:400; color:var(--bone);
  font-size:clamp(1.55rem,1.25rem + 1.3vw,2.1rem); line-height:1.2;
  letter-spacing:-.01em; margin-top:clamp(3.5rem,8vh,5rem); margin-bottom:1.75rem;
}
.essay-body strong{ color:var(--bone); font-weight:400; }
.essay-body em{ color:var(--bone); font-style:italic; }

/* A pulled line, for the sentence that carries the section. */
.essay-body .lift{
  font-family:var(--display); color:var(--bone);
  font-size:clamp(1.3rem,1.1rem + .9vw,1.6rem); line-height:1.45;
  margin-block:2.25rem; padding-left:1.5rem; border-left:1px solid var(--brass);
}

/* section divider — her ⸻ */
.brk{
  border:0; height:1px; background:var(--rule);
  width:4rem; margin:clamp(3.5rem,8vh,5rem) auto;
}

/* ── foot ─────────────────────────────────────────────────────────────── */
.essay-foot{
  margin-top:clamp(4rem,10vh,7rem); padding-block:clamp(2.5rem,6vh,4rem) 4rem;
  border-top:1px solid var(--rule); text-align:center;
}
.essay-foot p{ color:var(--bone-faint); font-size:.85rem; margin-bottom:1.75rem; }
.btn{
  display:inline-block; font-family:var(--sans); font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  color:var(--bone); border:1px solid var(--brass);
  padding:1rem 2.25rem; background:transparent;
  transition:background .5s ease, color .5s ease;
}
.btn:hover{ background:var(--brass); color:var(--void); }

a:focus-visible, button:focus-visible{ outline:1px solid var(--brass); outline-offset:4px; }

@media (prefers-reduced-motion:reduce){
  .btn, .essay-top .back{ transition:none; }
}