/* ==========================================================================
   ESSAYS - long-form reading layout
   Loaded after style.css on the essays index and on each essay page.

   The essay pages keep the site chrome (header, drawer, footer) exactly as it
   is everywhere else, and scope a separate reading palette to the article body.
   That is deliberate: the notes for this section specify a warmer paper and a
   muted red that differ from the site's gold, and the site already runs a
   second red accent on the TxP pages, so a red-accented reading surface sits
   inside the existing system rather than beside it.
   ========================================================================== */

.essay-scope{
  --ink:#0b0908;
  --ink-raised:#141110;
  --paper:#ece6dc;
  --paper-dim:#a89f92;
  --essay-red:#9a2b1f;
  --essay-red-bright:#c4573f;
  --hairline:#2a2422;
  --ff-read:'Newsreader',Georgia,'Times New Roman',serif;
}

/* ------------------------------------------------------ reading progress ---
   Sits above the site header's bar so it stays visible while reading, and is
   hidden behind the nav drawer, which lives inside the header's stacking
   context and so cannot paint over it.

   It animates transform, not width, so the browser never re-lays-out the bar
   while the page is scrolling - the difference is very visible on a phone. */
.reading-progress{
  position:fixed;top:0;left:0;right:0;height:2px;
  z-index:201;
  background:var(--essay-red-bright,#c4573f);
  transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
  will-change:transform;
}
.site-header.nav-open ~ .reading-progress{opacity:0;}
@media(prefers-reduced-motion:reduce){
  .reading-progress{transition:none;}
}

/* ----------------------------------------------------------- essay hero ---
   Mirrors .post-hero on the blog so an essay opens the same way a post does:
   fixed site header, breadcrumb, category line, title. The accents are the
   essay red rather than the blog's gold, which is what keeps the two sections
   distinguishable while the structure stays identical. */
.essay-hero{
  padding:150px 0 60px;
  border-bottom:1px solid var(--hairline);
  position:relative;
}
@media(max-width:768px){.essay-hero{padding:120px 0 44px;}}

.essay-hero .eh-kicker{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--essay-red-bright);
  display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px;
}
.essay-hero .eh-kicker .sep{color:var(--paper-dim);opacity:.55;}

.essay-hero h1{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(30px,4.6vw,52px);line-height:1.12;
  max-width:900px;color:var(--paper);
}

.essay-hero .eh-dek{
  font-family:var(--ff-read);font-style:italic;
  font-size:clamp(16.5px,2.2vw,20px);line-height:1.5;
  color:var(--paper-dim);max-width:720px;margin-top:22px;
}

.essay-hero .eh-meta{
  display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--paper-dim);
}
.essay-hero .eh-meta b{color:var(--paper);font-weight:500;}

/* Pills. Deliberately not the site's square mono buttons - these belong to the
   reading surface, and the shape is what the essay template specified. */
.essay-pill{
  font-family:var(--ff-body);font-size:13px;font-weight:500;line-height:1;
  padding:11px 20px;border-radius:100px;
  display:inline-flex;align-items:center;gap:.3em;
  border:1px solid transparent;background:transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
button.essay-pill{cursor:pointer;}
.essay-pill-outline{border-color:var(--essay-red);color:var(--essay-red-bright);}
.essay-pill-outline:hover{background:var(--essay-red);color:var(--paper);}
.essay-pill-ghost{border-color:var(--hairline);color:var(--paper-dim);}
.essay-pill-ghost:hover{color:var(--paper);border-color:var(--paper-dim);}

/* ---------------------------------------------------------- listen panel ---
   "Listen instead" opens an audio reading in place rather than sending the
   reader somewhere else. The disc is the supplied animation, masked into a
   record: it turns while the audio runs and stops the moment it pauses, so the
   page never animates something the reader did not ask for.

   Nothing preloads. Even at 10MB and 0.7MB these must not land on a phone just
   because someone opened an essay - both are fetched on the first press of
   play.
   ========================================================================== */
.essay-actions{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:32px;
}

.listen-panel{
  margin-top:34px;
  max-width:820px;
  border:1px solid var(--hairline);border-radius:6px;
  background:
    radial-gradient(ellipse 60% 120% at 12% 0%, rgba(196,87,63,0.10), transparent 60%),
    var(--ink-raised);
  padding:26px;
  /* Collapsed height is animated rather than display toggled, so opening and
     closing reads as one movement. */
  overflow:hidden;
}
.listen-panel[hidden],.essay-pill[hidden]{display:none;}
@media(max-width:560px){.listen-panel{padding:20px 16px;}}

.lp-top{
  display:flex;gap:24px;align-items:center;
}
/* ------------------------------------------------------------------ disc --- */
.lp-disc{
  position:relative;flex-shrink:0;
  width:210px;height:210px;border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.035) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 50%, #241d1a 0 34%, #16110f 34% 100%);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.95), inset 0 0 0 1px rgba(242,237,228,0.07);
  display:grid;place-items:center;
  overflow:hidden;
}

/* The animation is the record's label - a disc inside the disc, the way a
   centre label sits on vinyl. */
.lp-disc-media{
  width:62%;height:62%;border-radius:50%;
  object-fit:cover;display:block;
  background:linear-gradient(140deg,#3a2a20,#1a1412);
  box-shadow:0 0 0 1px rgba(196,87,63,0.35);
}
.lp-spindle{
  position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--ink);box-shadow:inset 0 0 0 1px rgba(242,237,228,0.12);
}
/* Rotation lives on a wrapper so the spindle stays still while the record
   turns around it. */
.lp-disc-spin{
  width:100%;height:100%;display:grid;place-items:center;
  animation:lp-rotate 8s linear infinite;
  animation-play-state:paused;
}
.listen-panel.is-playing .lp-disc-spin{animation-play-state:running;}
@keyframes lp-rotate{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){
  .lp-disc-spin{animation:none;}
}

/* A ring that only appears while playing, so the state is readable without
   relying on the rotation alone. */
.lp-disc::after{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1px solid transparent;
  transition:border-color .3s var(--ease);
  pointer-events:none;
}
.listen-panel.is-playing .lp-disc::after{border-color:rgba(196,87,63,0.55);}

/* -------------------------------------------------------------- controls --- */
.lp-meta{min-width:0;flex:1;}
.lp-kicker{
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--essay-red-bright);margin-bottom:8px;
}
.lp-title{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(17px,2.4vw,21px);line-height:1.25;color:var(--paper);
  margin:0 0 4px;
}
.lp-sub{
  font-family:var(--ff-read);font-size:14px;line-height:1.5;
  color:var(--paper-dim);margin:0 0 18px;
}

.lp-transport{display:flex;align-items:center;gap:14px;}
.lp-btn{
  display:inline-grid;place-items:center;flex-shrink:0;
  border-radius:50%;cursor:pointer;background:transparent;
  border:1px solid var(--hairline);color:var(--paper-dim);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.lp-btn:hover{color:var(--paper);border-color:var(--paper-dim);}
.lp-btn svg{width:15px;height:15px;fill:currentColor;}
.lp-btn.lp-skip{width:36px;height:36px;}
.lp-btn.lp-play{
  width:52px;height:52px;
  border-color:var(--essay-red);color:var(--essay-red-bright);
}
.lp-btn.lp-play:hover{background:var(--essay-red);color:var(--paper);border-color:var(--essay-red);}
.lp-btn.lp-play svg{width:21px;height:21px;}
.lp-btn:disabled{opacity:.4;cursor:default;}

/* The play/pause icons are swapped in CSS, not by toggling the hidden
   attribute on them. `hidden` does nothing to an <svg>: browsers scope the
   user-agent [hidden]{display:none} rule to the HTML namespace, so it never
   matches an SVG element and both icons render at once. Both sit in the same
   grid cell so whichever is showing is centred in the button. */
.lp-btn.lp-play > svg{grid-area:1/1;}
.lp-btn.lp-play > [data-icon-pause]{display:none;}
.listen-panel.is-playing .lp-btn.lp-play > [data-icon-play]{display:none;}
.listen-panel.is-playing .lp-btn.lp-play > [data-icon-pause]{display:block;}

/* Track and time sit on their own row so a 21 minute duration never squeezes
   the buttons on a narrow screen. */
.lp-track-row{
  display:flex;align-items:center;gap:12px;width:100%;margin-top:16px;
}
.lp-time{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:0.1em;
  color:var(--paper-dim);flex-shrink:0;font-variant-numeric:tabular-nums;
}
.lp-seek{
  -webkit-appearance:none;appearance:none;
  flex:1;min-width:0;height:3px;border-radius:2px;
  background:linear-gradient(to right, var(--essay-red-bright) 0%, var(--essay-red-bright) var(--pct,0%), rgba(242,237,228,0.13) var(--pct,0%), rgba(242,237,228,0.13) 100%);
  cursor:pointer;
}
.lp-seek::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:13px;height:13px;border-radius:50%;
  background:var(--essay-red-bright);border:2px solid var(--ink-raised);
  cursor:pointer;
}
.lp-seek::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;border:2px solid var(--ink-raised);
  background:var(--essay-red-bright);cursor:pointer;
}
.lp-seek:focus-visible{outline:2px solid var(--essay-red-bright);outline-offset:4px;}

.lp-status{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--paper-dim);margin-top:12px;min-height:1em;
}
.lp-status.is-error{color:var(--essay-red-bright);}

/* ------------------------------------------------------------ transcript --- */
.lp-transcript{
  margin-top:24px;padding-top:22px;border-top:1px solid var(--hairline);
}
.lp-tr-toggle{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:none;border:none;padding:0;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--paper-dim);
  transition:color .2s var(--ease);
}
.lp-tr-toggle:hover{color:var(--essay-red-bright);}
.lp-tr-toggle .chev{transition:transform .25s var(--ease);display:inline-block;}
.lp-tr-toggle[aria-expanded="true"] .chev{transform:rotate(180deg);}

/* Stacked, the panel reads as one centred column: disc, then what it is, then
   the controls directly under it. Left-aligning the transport under a centred
   disc left the play button floating off to one side. */
@media(max-width:620px){
  .lp-top{flex-direction:column;gap:22px;align-items:stretch;}
  .lp-meta{text-align:center;}
  .lp-transport{justify-content:center;}
  .lp-sub{margin-bottom:22px;}
  /* Comfortably past the 44px touch target guideline, which the 36px skip
     buttons were under. */
  .lp-btn.lp-skip{width:46px;height:46px;}
  .lp-btn.lp-skip svg{width:17px;height:17px;}
  .lp-btn.lp-play{width:62px;height:62px;}
  .lp-btn.lp-play svg{width:24px;height:24px;}
  .lp-track-row{margin-top:20px;}
  .lp-disc{width:200px;height:200px;margin:0 auto;}
}
@media(max-width:380px){.lp-disc{width:170px;height:170px;}}

.lp-tr-body{
  margin-top:18px;
  font-family:var(--ff-read);font-size:16px;line-height:1.62;
  color:var(--paper-dim);
  /* Two states. Idle it is a transcript you can read and scan; following, it
     shrinks to a window holding roughly two exchanges around the line being
     spoken, which is the point of a follow view. */
  max-height:430px;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 10px 18px 0;
  scroll-behavior:smooth;
  transition:max-height .45s var(--ease);
  /* Lines fade in and out at the edges rather than being sliced off, so the
     panel reads as a window onto a longer text. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
}
.lp-tr-body.is-following{
  max-height:182px;
  /* A gentler fade: over 430px an 11% edge is a soft vignette, over 182px it
     would eat most of the two lines on show. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.lp-tr-body[hidden]{display:none;}

.lp-line{
  position:relative;
  max-width:64ch;
  margin:0 0 10px;padding:8px 14px 8px 62px;
  border-left:2px solid transparent;border-radius:4px;
  cursor:pointer;
  /* transform, not font-size: scaling the active line up would reflow every
     line beneath it and fight the auto-scroll. */
  transform-origin:left center;
  transition:opacity .35s var(--ease),color .35s var(--ease),
             transform .35s var(--ease),border-color .25s var(--ease),
             background .25s var(--ease);
}
.lp-line:hover{background:rgba(242,237,228,0.035);}
/* Section headings, when the essay text itself is the transcript. */
.lp-line.lp-line-head{
  font-family:var(--ff-display);font-weight:600;color:var(--paper);
  margin-top:18px;
}
.lp-line:focus-visible{outline:2px solid var(--essay-red-bright);outline-offset:2px;}

/* Before anything is playing the transcript is simply a transcript: full
   contrast, readable top to bottom. The follow-along dimming only applies once
   there is a position to follow. */
.lp-tr-body.is-following .lp-line{opacity:.3;}
.lp-tr-body.is-following .lp-line.is-past{opacity:.22;}
.lp-tr-body.is-following .lp-line.is-active{
  opacity:1;color:var(--paper);
  transform:scale(1.015);
  border-left-color:var(--essay-red);
  background:rgba(196,87,63,0.05);
}
.lp-tr-body.is-following .lp-line:hover{opacity:.7;}
.lp-tr-body.is-following .lp-line.is-active:hover{opacity:1;}

.lp-stamp{
  position:absolute;left:14px;top:11px;
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:0.08em;
  color:var(--paper-dim);opacity:0;
  font-variant-numeric:tabular-nums;
  transition:color .2s var(--ease),opacity .2s var(--ease);
}
/* The stamps are navigation, not furniture - they appear when you reach for
   them, and on the line currently being spoken. */
.lp-line:hover .lp-stamp{opacity:.75;}
.lp-line.is-active .lp-stamp{color:var(--essay-red-bright);opacity:1;}

@media(prefers-reduced-motion:reduce){
  .lp-tr-body{scroll-behavior:auto;}
  .lp-tr-body.is-following .lp-line.is-active{transform:none;}
}

@media(max-width:620px){
  .lp-tr-body{font-size:15.5px;line-height:1.7;max-height:340px;}
  .lp-tr-body.is-following{max-height:168px;}
  .lp-line{padding:8px 12px;max-width:none;}
  .lp-stamp{position:static;display:block;margin-bottom:5px;opacity:.45;}
  .lp-line:hover .lp-stamp{opacity:.7;}
}

/* --------------------------------------------------------------- article --- */
.essay-article{
  background:var(--ink);
  padding:64px 0 0;
}
@media(max-width:768px){.essay-article{padding:46px 0 0;}}

.essay-wrap{
  max-width:720px;
  margin:0 auto;
  padding:0 24px;
}

.essay-kicker{
  font-family:var(--ff-mono);
  font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--essay-red-bright);
  margin-bottom:18px;
  /* Matches .eyebrow on every other page - the rule is the site's signature
     and its absence is what made this section look unfinished. */
  display:flex;align-items:center;gap:12px;
}
.essay-kicker::before{content:'';width:34px;height:1px;background:var(--essay-red);flex-shrink:0;}

/* ------------------------------------------------------------ essay body ---
   16.5px on a phone rather than the 17px the template used, with a longer
   line-height: the measure on a 360px screen is already short, and the extra
   leading is what makes a 20-minute read tolerable on a handset. */
.essay-body{
  font-family:var(--ff-read);
  font-size:clamp(16.5px,1.9vw,19px);
  line-height:1.78;
  color:var(--paper);
}
.essay-body p{margin:0 0 26px;}

.essay-body .lede::first-letter{
  font-family:var(--ff-display);
  font-size:4.6em;font-weight:600;
  float:left;line-height:0.82;
  padding:0.06em 0.12em 0 0;
  color:var(--essay-red-bright);
}

.essay-body h2{
  font-family:var(--ff-display);font-weight:600;
  font-size:clamp(22px,3.4vw,28px);line-height:1.25;
  color:var(--paper);
  margin:56px 0 24px;
  /* An in-page jump or a back-forward restore must not drop a heading under
     the fixed header. */
  scroll-margin-top:112px;
}

/* Lists, links and emphasis in the body. The first two essays were unbroken
   prose and never needed these; anything argued in points does. */
.essay-body ul,.essay-body ol{margin:0 0 26px;padding:0;list-style:none;}
.essay-body li{position:relative;padding-left:30px;margin:0 0 14px;}
.essay-body ul>li::before{
  content:'';position:absolute;left:4px;top:0.78em;
  width:12px;height:1px;background:var(--essay-red);
}
/* Numbered because the eight conditions are referred to by number. */
.essay-body ol{counter-reset:essay-ol;}
.essay-body ol>li{counter-increment:essay-ol;}
.essay-body ol>li::before{
  content:counter(essay-ol);position:absolute;left:0;top:0.16em;
  font-family:var(--ff-mono);font-size:11.5px;color:var(--essay-red-bright);
}
.essay-body strong{font-weight:600;color:var(--paper);}
.essay-body a{
  color:var(--essay-red-bright);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--essay-red);
  transition:text-decoration-color .2s var(--ease);
}
.essay-body a:hover{text-decoration-color:var(--essay-red-bright);}

/* Figures. The charts are drawn on white, so rather than pretend otherwise
   they sit on a white plate with a little breathing room - a deliberate sheet
   laid on the page, not an image that failed to load its background. */
.essay-body figure{margin:44px 0;}
.essay-body figure img{
  width:100%;height:auto;display:block;
  background:#fff;padding:14px;
  border:1px solid var(--hairline);border-radius:3px;
}
.essay-body figcaption{
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:0.16em;
  text-transform:uppercase;line-height:1.75;
  color:var(--paper-dim);padding-top:12px;
}

/* The Civilisational Engine, set as a chain rather than a sentence so the
   sequence reads as a sequence. Wraps to as many lines as the screen needs. */
.essay-body .engine-chain{
  font-family:var(--ff-mono);font-size:clamp(11.5px,1.6vw,13.5px);
  letter-spacing:0.1em;line-height:2.1;text-transform:uppercase;
  color:var(--essay-red-bright);
  margin:36px 0;padding:22px 24px;
  border:1px solid var(--hairline);border-left:2px solid var(--essay-red);
  background:var(--ink-raised);
}

.essay-body blockquote{
  font-family:var(--ff-display);font-style:italic;font-weight:500;
  font-size:clamp(20px,3.2vw,27px);line-height:1.4;
  color:var(--essay-red-bright);
  margin:44px 0;padding:0 0 0 20px;
  border-left:2px solid var(--essay-red);
}

/* The × divider ties to the 1×1=1 motif. Decorative only, so it is hidden from
   assistive technology rather than read out as a letter between sections. */
.essay-divider{
  text-align:center;color:var(--essay-red);
  font-size:18px;letter-spacing:0.4em;opacity:.7;
  margin:52px 0;
}

/* --------------------------------------------------------- further reading ---
   Smaller and dimmer than the body: it is apparatus for checking the argument,
   not part of it. */
.essay-refs{
  margin-top:72px;padding-top:8px;
  border-top:1px solid var(--hairline);
  font-size:15.5px;line-height:1.6;color:var(--paper-dim);
}
.essay-refs h3{
  font-family:var(--ff-mono);font-weight:500;
  font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--essay-red-bright);
  margin:34px 0 14px;
}
.essay-refs ul{margin:0;padding:0 0 0 18px;}
.essay-refs li{margin:0 0 12px;}

.essay-signal p a{color:var(--essay-red-bright);text-decoration:underline;text-underline-offset:3px;}

/* -------------------------------------------------------------- end block --- */
.essay-end{
  padding:0 0 100px;
}
.essay-signal{
  background:var(--ink-raised);
  border:1px solid var(--hairline);border-radius:4px;
  padding:32px 28px;
  margin-top:72px;
}
@media(max-width:560px){.essay-signal{padding:26px 22px;}}
.essay-signal h3{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(19px,2.6vw,22px);line-height:1.3;
  color:var(--paper);margin:0 0 10px;
}
.essay-signal p{
  font-family:var(--ff-read);font-size:15.5px;line-height:1.6;
  color:var(--paper-dim);margin:0 0 22px;
}
.essay-signal .essay-actions{margin-top:0;}

/* ===================================================== essays index page === */
.essays-hero{
  padding:150px 0 0;
}
@media(max-width:768px){.essays-hero{padding:124px 0 0;}}

.essays-hero h1{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(38px,7vw,76px);line-height:1.04;
  color:var(--paper);
}
.essays-hero h1 em{font-style:italic;font-weight:300;color:var(--essay-red-bright);}
.essays-hero .essays-lead{
  font-family:var(--ff-read);
  font-size:clamp(16.5px,2.1vw,19px);line-height:1.65;
  color:var(--paper-dim);max-width:620px;margin-top:22px;
}

/* ---------------------------------------------------------- featured -----
   One essay presented as something to open, not a line of text to read past.
   The first entry gets this treatment; everything after it falls through to
   the compact rows below. */
.essay-feature{
  display:block;position:relative;
  margin-top:30px;
  padding:40px 40px 34px;
  border:1px solid var(--hairline);border-radius:4px;
  background:
    radial-gradient(ellipse 72% 95% at 88% 0%, rgba(196,87,63,0.13), transparent 62%),
    var(--ink-raised);
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.essay-feature:hover{transform:translateY(-4px);border-color:rgba(154,43,31,0.75);}
.essay-feature h2{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(26px,4.4vw,40px);line-height:1.14;
  color:var(--paper);margin:0 0 14px;letter-spacing:-0.01em;
  transition:color .25s var(--ease);
}
.essay-feature:hover h2{color:var(--essay-red-bright);}
.essay-feature .ef-dek{
  font-family:var(--ff-read);font-style:italic;
  font-size:clamp(16px,2.1vw,18.5px);line-height:1.55;
  color:var(--paper-dim);margin:0;max-width:560px;
}
.essay-feature .ef-cta{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:28px;padding-top:24px;
  border-top:1px solid var(--hairline);
  width:100%;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--essay-red-bright);
}
.essay-feature .ef-cta .arr{display:inline-block;transition:transform .3s var(--ease);}
.essay-feature:hover .ef-cta .arr{transform:translateX(5px);}
@media(max-width:560px){
  .essay-feature{padding:28px 24px 24px;margin-top:24px;}
  .essay-feature .ef-cta{margin-top:22px;padding-top:20px;}
}
/* Touch devices get no hover, so the card must not depend on it. */
@media(hover:none){
  .essay-feature:hover{transform:none;border-color:var(--hairline);}
  .essay-feature:hover h2{color:var(--paper);}
}

/* A shared meta line: category, then a deliberate dot. The brand's "x" was
   being set at 10px in hairline grey, where it rendered as a speck of dust
   rather than a separator. */
.e-meta{
  font-family:var(--ff-mono);
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--paper-dim);
  display:flex;flex-wrap:wrap;gap:9px 13px;align-items:center;
  margin-bottom:16px;
}
.e-meta .e-cat{color:var(--essay-red-bright);}
.e-meta .e-dot{
  width:3px;height:3px;border-radius:50%;
  background:var(--essay-red);flex-shrink:0;
}

/* No thumbnail grid, by design - an essay index is a reading list, so later
   rows carry title, dek and meta and nothing else. */
.essay-list{
  margin:54px 0 0;
}
.essay-list:empty{display:none;}
.essay-row{
  display:block;
  padding:34px 0;
  border-bottom:1px solid var(--hairline);
  transition:background .25s var(--ease),padding-left .25s var(--ease);
}
.essay-row:hover{
  background:rgba(196,87,63,0.05);
  padding-left:14px;
}
.essay-row h2{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(22px,3.6vw,32px);line-height:1.2;
  color:var(--paper);margin:0 0 12px;
  transition:color .25s var(--ease);
}
.essay-row:hover h2{color:var(--essay-red-bright);}
.essay-row .r-dek{
  font-family:var(--ff-read);font-style:italic;
  font-size:clamp(15.5px,2vw,17.5px);line-height:1.55;
  color:var(--paper-dim);margin:0;max-width:640px;
}

/* A touch device gets no hover, so the affordance has to be visible at rest. */
@media(hover:none){
  .essay-row:hover{background:none;padding-left:0;}
  .essay-row:hover h2{color:var(--paper);}
}

.essays-note{
  margin-top:0;padding:44px 0 110px;
  font-family:var(--ff-read);font-size:15.5px;line-height:1.65;
  color:var(--paper-dim);max-width:620px;
}

/* A link inside running prose reads as prose, not as a site CTA. */
.essays-note a{
  color:var(--essay-red-bright);
  border-bottom:1px solid rgba(196,87,63,0.4);
  transition:border-color .2s var(--ease);
}
.essays-note a:hover{border-bottom-color:var(--essay-red-bright);}