/* ============================================================
   leslielstevens.net
   Essay pages — /essays/{slug}

   The reading design for the individual essays, taken from
   essay-template.html without alteration. It is deliberately a
   room of its own: paper rather than the dark of the rest of the
   site, because these pages are read end to end rather than
   looked over.

   The essay pages load this file and css/fonts.css. They do not
   load css/styles.css, so nothing here can reach the other pages
   and nothing there can reach these.

   Contents
   1.  Tokens
   2.  Base
   3.  Filing strip
   4.  Shell
   5.  Masthead — kicker, title, deck, dateline
   6.  Cover image
   7.  Dossier
   8.  Body — measure, drop cap, headings, rules, quotes
   9.  Verdict lines — the signature element
   10. Names, seam, correction, sources
   11. Colophon
   12. Rail, small screens, motion, print
   ============================================================ */

:root{
  --paper:#E7E6DF;
  --paper-warm:#EFEEE8;
  --ink:#15181A;
  --ink-soft:#4E5457;
  --ink-faint:#7C8285;
  --rule:#C6C1B5;
  --rule-faint:#D6D2C8;
  --field:#14161B;
  --field-soft:#9AA0A6;
  --mark:#7B2E26;

  --display:"Fraunces",Georgia,serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --measure:34rem;
  --rail:11rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.0625rem,0.98rem + 0.42vw,1.1875rem);
  line-height:1.68;
  font-weight:400;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--field);color:#fff;padding:.6rem 1rem;font-family:var(--mono);font-size:.75rem}
a:focus-visible,button:focus-visible{outline:2px solid var(--mark);outline-offset:3px}

/* ---------- FILING STRIP ---------- */
.strip{
  background:var(--field);
  color:var(--field-soft);
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:.85rem 0;
}
.strip-in{
  max-width:var(--measure);
  margin:0 auto;
  padding:0 1.5rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.strip a{color:var(--field-soft);text-decoration:none;border-bottom:1px solid #333941;padding-bottom:1px}
.strip a:hover{color:#fff;border-color:#fff}

/* ---------- SHELL ---------- */
.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.5rem}

/* ---------- MASTHEAD ---------- */
header.piece{padding:4.5rem 0 0}
.kicker{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mark);
  margin:0 0 1.5rem;
}
h1{
  font-family:var(--display);
  font-variation-settings:"opsz" 120,"SOFT" 30,"WONK" 1;
  font-weight:400;
  font-size:clamp(2.35rem,1.7rem + 2.9vw,3.6rem);
  line-height:1.04;
  letter-spacing:-.022em;
  margin:0 0 1.4rem;
  text-wrap:balance;
}
.deck{
  font-family:var(--body);
  font-size:1.24em;
  line-height:1.44;
  font-weight:300;
  font-style:italic;
  color:var(--ink-soft);
  margin:0 0 2.4rem;
  max-width:30rem;
  text-wrap:pretty;
}
.dateline{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding-top:1.1rem;
  border-top:1px solid var(--rule);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.dateline strong{color:var(--ink);font-weight:500}

/* ---------- COVER ---------- */
figure.cover{margin:3rem 0 0;max-width:none}
figure.cover img{width:100%;height:auto;display:block;background:var(--rule-faint)}
figure.cover .ph{
  width:100%;aspect-ratio:2/1;background:var(--field);
  display:flex;align-items:center;justify-content:center;
  color:#3A4048;font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
}
figcaption{
  font-family:var(--mono);
  font-size:.6875rem;
  line-height:1.6;
  color:var(--ink-faint);
  margin-top:.85rem;
  padding-left:.9rem;
  border-left:2px solid var(--rule);
}

/* ---------- DOSSIER ---------- */
.dossier{
  margin:3.25rem 0 0;
  padding:1.6rem 0;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
  font-size:.8125rem;
  line-height:1.85;
}
.dossier dl{margin:0;display:grid;grid-template-columns:6.5rem 1fr;gap:.15rem 1.1rem}
.dossier dt{
  color:var(--ink-faint);
  font-size:.6875rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  padding-top:.34rem;
}
.dossier dd{margin:0;color:var(--ink)}

/* ---------- BODY ---------- */
main{padding:3.25rem 0 0}
main p{margin:0 0 1.5rem;text-wrap:pretty}
main p a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--mark);padding-bottom:1px}
main p a:hover{background:rgba(123,46,38,.07)}

.lede::first-letter{
  font-family:var(--display);
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  float:left;
  font-size:3.9em;
  line-height:.82;
  padding:.06em .1em 0 0;
  color:var(--mark);
}

h2{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink);
  margin:3.6rem 0 1.7rem;
  padding-top:1.1rem;
  border-top:1px solid var(--rule);
  position:relative;
}
h2::after{
  content:"";position:absolute;top:-1px;left:0;width:3.5rem;height:3px;background:var(--mark);
}

/* ---------- RULES BETWEEN MOVEMENTS ---------- */
/* A section heading already draws its own rule, so a horizontal
   rule is only used where a movement breaks with no heading —
   most often a scene break in the two Desert Transactions
   stories. */
hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:3.2rem 0;
}

/* ---------- BLOCK QUOTES ---------- */
blockquote{
  margin:2.4rem 0;
  padding-left:1.35rem;
  border-left:2px solid var(--rule);
  color:var(--ink-soft);
  font-style:italic;
}
blockquote p{margin:0}
blockquote p+p{margin-top:.6rem}

/* ---------- THE SIGNATURE: VERDICT LINES ---------- */
.verdict{
  font-family:var(--display);
  font-variation-settings:"opsz" 60,"SOFT" 20,"WONK" 1;
  font-size:1.42em;
  line-height:1.3;
  letter-spacing:-.012em;
  margin:2.1rem 0 2.1rem;
  position:relative;
}
.verdict::before{
  content:"";
  position:absolute;
  left:-2.75rem;
  top:.72em;
  width:1.65rem;
  height:2px;
  background:var(--mark);
}

/* ---------- NAMES ---------- */
.names{
  font-family:var(--display);
  font-variation-settings:"opsz" 40,"SOFT" 20,"WONK" 0;
  font-size:1.16em;
  line-height:1.62;
  margin:2.2rem 0;
  padding:1.4rem 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  text-wrap:pretty;
}

/* ---------- SEAM ---------- */
.seam{
  font-family:var(--mono);
  font-size:.8125rem;
  line-height:1.7;
  color:var(--ink-soft);
  background:var(--paper-warm);
  border-left:3px solid var(--mark);
  padding:1.15rem 1.3rem;
  margin:0 0 2.2rem;
}

/* ---------- CORRECTION ---------- */
.correction{
  font-family:var(--mono);
  font-size:.75rem;
  line-height:1.75;
  color:var(--ink-soft);
  border:1px solid var(--rule);
  padding:1.15rem 1.3rem;
  margin:3rem 0 0;
}
.correction b{
  display:block;
  color:var(--mark);
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-size:.6875rem;
  margin-bottom:.5rem;
}

/* ---------- SOURCE NOTES (optional) ---------- */
.sources{
  margin:3.25rem 0 0;
  padding-top:1.25rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:.75rem;
  line-height:1.85;
  color:var(--ink-soft);
}
.sources h2{
  margin:0 0 .9rem;
  padding-top:0;
  border-top:0;
  font-size:.6875rem;
  color:var(--ink-faint);
}
.sources h2::after{display:none}
.sources ul{margin:0;padding:0;list-style:none}
.sources li{padding-left:1.1rem;position:relative;margin-bottom:.5rem}
.sources li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:.45rem;height:1px;background:var(--rule);
}
.sources a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule)}
.sources a:hover{color:var(--ink);border-color:var(--mark)}

/* ---------- COLOPHON ---------- */
.colophon{
  margin-top:5rem;
  background:var(--field);
  color:var(--field-soft);
  padding:3.25rem 0;
}
.colophon .wrap{display:grid;gap:1.6rem}
.colophon .sig{
  font-family:var(--display);
  font-variation-settings:"opsz" 40,"SOFT" 40,"WONK" 1;
  font-size:1.32rem;
  line-height:1.4;
  color:var(--paper);
  margin:0;
  font-style:italic;
}
.colophon .meta{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;line-height:1.9;margin:0}
.colophon a{color:var(--paper);text-decoration:none;border-bottom:1px solid #3A4048}
.colophon a:hover{border-color:var(--paper)}

/* ---------- RAIL (desktop only) ---------- */
@media (min-width:1000px){
  :root{--measure:36rem}
  .wrap,.strip-in{max-width:calc(var(--measure) + var(--rail));padding-left:var(--rail)}
}
@media (max-width:999px){
  .verdict::before{left:0;top:0;width:2px;height:100%}
  .verdict{padding-left:1.15rem}
}
@media (max-width:520px){
  header.piece{padding-top:2.75rem}
  .dossier dl{grid-template-columns:1fr;gap:0}
  .dossier dt{padding-top:.9rem}
}
@media (prefers-reduced-motion:no-preference){
  header.piece>*{animation:rise .7s cubic-bezier(.2,.7,.3,1) backwards}
  header.piece>*:nth-child(2){animation-delay:.06s}
  header.piece>*:nth-child(3){animation-delay:.12s}
  header.piece>*:nth-child(4){animation-delay:.18s}
  @keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
}
@media print{
  .strip,.colophon{background:none;color:#000}
  body{background:#fff}
}