/* ==========================================================================
   ORPHEUS — A Journal of Philosophy
   Design system: pure black & white. Burgundy is rationed to the cards and
   the article pages only. Didone display type, hairline rules, Substack-style
   cards, museum-label micro typography.
   --------------------------------------------------------------------------
   01. Fonts            07. Hero              13. Categories
   02. Tokens           08. Feature card      14. Footer
   03. Reset / base     09. Post cards        15. Article page
   04. Type utilities   10. Interlude quote   16. Essays page
   05. Layout           11. Byline/avatar     17. About page
   06. Header & menu    12. Archive rows      18. Motion & details
   19. Desktop polish
   ========================================================================== */

/* ------------------------------------------------------------------ 01. Fonts */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/bodoni-moda-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/bodoni-moda-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ 02. Tokens */

:root {
  /* Grounds — pure black page, premium black surfaces */
  --bg:        #000000;
  --bg-raise:  #070707;
  --bg-card:   #0E0D0D;
  --bg-panel:  #0B0B0B;
  --card-rgb:  14, 13, 13;

  /* Ink — pure white, rationed by opacity */
  --ink:    #FFFFFF;
  --ink-2:  rgba(255, 255, 255, .64);
  --ink-3:  rgba(255, 255, 255, .5);
  --ink-4:  rgba(255, 255, 255, .3);

  /* Burgundy — the single accent, rationed to small ceremonies */
  --wine:        #7D2432;
  --wine-bright: #BA4A5E;
  --wine-deep:   #521520;
  --wine-dim:    rgba(186, 74, 94, .38);

  /* Structure */
  --line:        rgba(255, 255, 255, .11);
  --line-strong: rgba(255, 255, 255, .24);

  /* Type */
  --font-display: "Bodoni Moda", "Didot", "Playfair Display", "Times New Roman", serif;
  --font-text:    "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-label:   "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Shape & rhythm */
  --radius: 10px;
  --measure: 33.5rem;
  --gutter: clamp(22px, 5.4vw, 76px);
  --sec-pad: clamp(72px, 12.5vw, 168px);

  /* Motion */
  --ease:      cubic-bezier(.22, .61, .21, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ 03. Reset / base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

main { flex: 1 0 auto; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

::selection { background: #fff; color: #000; }

:focus-visible {
  outline: 1px solid rgba(255, 255, 255, .7);
  outline-offset: 3px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #262626; border: 3px solid var(--bg); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3A3A3A; }

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 3000;
  background: #fff;
  color: #000;
  font-family: var(--font-label);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 16px;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------ 04. Type utilities */

/* Museum label — the workhorse micro-caps of the whole system */
.label {
  font-family: var(--font-label);
  font-weight: 560;
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-stretch: 96%;
}

.label--wine  { color: var(--wine-bright); }
.label--dim   { color: var(--ink-3); }
.label--quiet { color: var(--ink-4); }

/* Display sizes */
.display-l  { font-family: var(--font-display); font-weight: 640; font-size: clamp(2.35rem, 8.2vw, 5.4rem); line-height: 1.02; letter-spacing: -.008em; text-wrap: balance; }
.display-m  { font-family: var(--font-display); font-weight: 620; font-size: clamp(1.5rem, 4.6vw, 2.15rem); line-height: 1.12; letter-spacing: 0; text-wrap: balance; }
.display-s  { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.18rem, 3vw, 1.42rem); line-height: 1.2; }

.serif-italic { font-style: italic; font-weight: 480; }

/* ------------------------------------------------------------------ 05. Layout */

.container { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 1080px; }
.measure { max-width: var(--measure); }

.section { padding-block: var(--sec-pad); position: relative; }
.section--raise { background: var(--bg-raise); }
.section--tight { padding-block: clamp(64px, 10vw, 120px); }

.section-head { margin-bottom: clamp(44px, 7vw, 88px); }

.section-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 5.4vw, 64px);
}

/* Short hairline — punctuation, not decoration */
.rule-short { width: 56px; height: 1px; background: var(--line-strong); margin: 26px auto 0; }

/* Text link with growing underline */
.tlink {
  font-family: var(--font-label);
  font-weight: 560;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 5px;
  background-image: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size .45s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.tlink:hover, .tlink:focus-visible { background-size: 100% 1px; }
.tlink .arr { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; font-size: .95rem; transition: transform .4s var(--ease); }
.tlink:hover .arr { transform: translateX(5px); }

/* ------------------------------------------------------------------ 06. Buttons — always filled, never ghost */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-label);
  font-weight: 620;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #000;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 15px 30px;
  min-height: 48px;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .15s var(--ease);
}
.btn:hover, .btn:focus-visible {
  background: var(--bg);
  border-color: #fff;
  color: #fff;
}
.btn:active { transform: scale(.97); }
.btn .arr { font-family: var(--font-display); font-weight: 400; font-size: .95rem; letter-spacing: 0; }

@media (max-width: 560px) {
  .btn { width: 100%; padding: 11px 20px; min-height: 42px; font-size: .62rem; letter-spacing: .18em; gap: 8px; }
}

/* ------------------------------------------------------------------ 07. Header & menu */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  transition: background-color .45s var(--ease), border-color .45s var(--ease), padding .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border-bottom-color: var(--line);
  padding-block: 14px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 640;
  font-size: 1.02rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink);
}
.wordmark svg { width: 26px; height: auto; color: var(--ink); flex: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink);
  min-height: 44px;
  padding-left: 12px;
}
.menu-toggle .bars { display: inline-grid; gap: 5px; }
.menu-toggle .bars i { display: block; width: 26px; height: 1px; background: var(--ink); transition: transform .45s var(--ease), opacity .3s; }
.menu-toggle[aria-expanded="true"] .bars i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars i:last-child  { transform: translateY(-3px) rotate(-45deg); }
.menu-toggle .menu-label--close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-label--open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-label--close { display: inline; }

/* Full-screen menu — the reading room */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: #050505;
  transform: translateY(-102%);
  transition: transform .75s var(--ease), visibility 0s .75s;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
}
.site-menu.is-open { transform: translateY(0); transition: transform .75s var(--ease); visibility: visible; }

.menu-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(96px, 15vh, 130px) var(--gutter) 48px;
}

.menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: clamp(30px, 5vh, 70px);
}

.menu-grid { flex: 1; display: grid; gap: clamp(40px, 6vw, 80px); }
@media (min-width: 1080px) {
  .menu-grid { grid-template-columns: 1.2fr .8fr; align-items: start; }
}

.menu-nav { display: flex; flex-direction: column; }

.menu-link {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 28px);
  padding: clamp(11px, 1.9vh, 22px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .5s var(--ease);
}
.menu-link:hover, .menu-link:focus-visible { padding-left: 14px; }
.menu-link .word {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.9rem, 6.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: .01em;
  transition: color .4s;
}
.menu-link .word em { font-style: italic; font-weight: 480; color: var(--ink-2); }
.menu-link:hover .word { color: var(--ink); }

.menu-foot {
  margin-top: clamp(48px, 8vh, 96px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  align-items: center;
  justify-content: space-between;
}

.menu-foot .mcontact { font-family: var(--font-text); font-style: italic; font-size: .98rem; color: var(--ink-2); }

.social-row { display: flex; gap: 26px; }
.social-row a {
  font-family: var(--font-label);
  font-size: .64rem;
  letter-spacing: .22em;
  color: var(--ink-3);
  text-transform: uppercase;
  transition: color .3s;
  padding: 8px 0;
}
.social-row a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ 08. Hero */

.hero { padding-top: clamp(104px, 14vh, 144px); position: relative; }
.hero .container { position: relative; }
.hero-copy { position: relative; }

.hero-title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
}

.hero-title .ht-l1 {
  display: block;
  font-style: italic;
  font-weight: 440;
  font-size: clamp(1.6rem, 6.8vw, 3.2rem);
  line-height: 1.04;
  color: var(--ink-2);
  letter-spacing: .005em;
  margin-left: .04em;
  white-space: nowrap;
}
.hero-title .ht-l2 {
  display: block;
  font-weight: 730;
  font-size: clamp(3rem, 15.5vw, 9.5rem);
  line-height: .9;
  letter-spacing: -.015em;
  margin-left: -.035em;
  white-space: nowrap;
}
.hero-title .ht-l3 {
  display: block;
  font-style: italic;
  font-weight: 440;
  font-size: clamp(2.05rem, 9.6vw, 6.4rem);
  line-height: .98;
  margin-left: clamp(10px, 7vw, 130px);
  padding-left: .06em;
}
.hero-title .ht-l4 {
  display: block;
  font-weight: 640;
  font-size: clamp(2.4rem, 12.2vw, 7.2rem);
  line-height: .9;
  letter-spacing: .012em;
  margin-left: clamp(-2px, -0.4vw, -8px);
  white-space: nowrap;
}

/* Desktop: the hero column is ~55% of the viewport, so the display
   sizes must track the column, not the window. These keep every
   line on one line. */
@media (min-width: 1080px) {
  .hero-title .ht-l1 { font-size: clamp(1.9rem, 3.2vw, 3rem); }
  .hero-title .ht-l2 { font-size: clamp(5rem, 10.6vw, 8.8rem); }
  .hero-title .ht-l3 { font-size: clamp(2.4rem, 5.2vw, 4.5rem); }
  .hero-title .ht-l4 { font-size: clamp(4.5rem, 7vw, 6.7rem); }
}

.hero-dek {
  margin: clamp(26px, 3.4vw, 38px) 0 0;
  font-size: clamp(1.06rem, 2.6vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 34rem;
}
.hero-dek em { color: var(--ink); }

.hero-cta {
  margin-top: clamp(24px, 3vw, 36px);
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .tlink { justify-content: center; }
}

/* The hero image: clean, borderless, no captions */
.hero-figure { margin-top: clamp(48px, 8vw, 96px); }
.hero-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 16%;
  border-radius: var(--radius);
}

/* Mobile collage — two artworks surrounding the hero copy */
.hero-deco { display: none; }
@media (max-width: 1079px) {
  .hero-figure { display: none; }
  .hero-copy { display: flow-root; }
  .hero-deco {
    display: block;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card);
  }
  .hero-deco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.9);
  }
  .hd-1 { position: absolute; top: 2px; right: 0; width: 21%; aspect-ratio: 3 / 4; z-index: 1; }
  .hd-1 img { object-position: 50% 30%; }
  .hd-2 { float: left; width: 32%; aspect-ratio: 4 / 5; margin: 8px 20px 12px 0; }
  .hero-dek { font-size: 1rem; }
  .hero-cta { clear: left; }
}

/* Phones: fixed-size hd-2 chip, the dek wrapping beside it */
@media (max-width: 560px) {
  .hero { padding-top: 17vh; }
  .hd-1 { width: 20%; top: 0; }
  .hd-2 { width: 115px; height: 100px; aspect-ratio: auto; margin: 6px 16px 10px 0; }
  .hero-dek { font-size: .98rem; line-height: 1.58; }
  .hero-title { margin-left: 55px; }
}

/* Questions Without Answers — sixteen words in orbit around why? */
.questions {
  position: relative;
  padding-block: clamp(80px, 11vw, 150px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.q-orbit {
  position: relative;
  height: clamp(480px, 92vh, 860px);
  overflow: hidden;
}
.q-orbit svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.q-bg { fill: #000; }
.q-bg--r { fill: #fff; }
.q-guide { fill: none; stroke-width: 1; }
.q-side--l .q-guide { stroke: rgba(255, 255, 255, .13); }
.q-side--r .q-guide { stroke: rgba(0, 0, 0, .13); }
.q-side--l .q-marks circle { fill: rgba(255, 255, 255, .42); }
.q-side--r .q-marks circle { fill: rgba(0, 0, 0, .42); }
.qt {
  font-family: var(--font-label);
  font-weight: 740;
  font-size: 17px;
  letter-spacing: var(--ls, 2.2px);
  text-transform: uppercase;
}
.qr-1 { --ls: 2.1px; }
.qr-2 { --ls: 2px; }
.qr-3 { --ls: 2.3px; }
.qr-4 { --ls: 2.1px; }
.qr-5 { --ls: 2.5px; }
.q-side--l .qt { fill: rgba(255, 255, 255, .92); }
.q-side--r .qt { fill: rgba(0, 0, 0, .85); }
.q-ring {
  transform-box: view-box;
  transform-origin: center;
  animation: q-spin var(--dur, 130s) linear infinite;
}
.q-ring--rev { animation-direction: reverse; }
@keyframes q-spin { to { transform: rotate(1turn); } }
.q-core { fill: #000; }
.q-core-word {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 470;
  font-size: 64px;
  letter-spacing: .01em;
  fill: #fff;
}
/* Wall labels around the orbit poster — a desktop-only ceremony, hidden on phones */
.q-eyebrow, .q-cap { display: none; }
/* Phones: a tighter, calmer poster — the section keeps a small footprint,
   and the stronger zoom leaves only the innermost rings in frame so the
   edges read clean instead of cropped-mid-word */
@media (max-width: 560px) {
  .questions { padding-block: clamp(64px, 15vw, 96px); }
  .q-orbit { height: clamp(350px, 64vh, 430px); }
  .q-orbit svg { transform: scale(1.5); }
}

@media (min-width: 1080px) {
  .hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 4.5vw; align-items: center; }
  .hero-copy { padding-top: 0; }
  .hero-figure { margin-top: 0; }
}

/* ------------------------------------------------------------------ 09. Feature — the latest essay, editorial front page */

.feature {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.feature-media { position: relative; overflow: hidden; order: -1; border-radius: var(--radius); }
.feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .68) 100%);
  pointer-events: none;
}
.feature-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.92);
  transition: transform 1.1s var(--ease-out);
}
.feature:hover .feature-media img { transform: scale(1.035); }
.feature-rank {
  position: absolute;
  z-index: 2;
  left: 22px;
  bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  pointer-events: none;
}
.rank-label {
  font-family: var(--font-label);
  font-weight: 560;
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.feature-body { display: flex; flex-direction: column; align-items: flex-start; padding-top: clamp(24px, 4.5vw, 40px); }
.feature-title {
  margin: clamp(16px, 2.2vw, 20px) 0 0;
  font-family: var(--font-display);
  font-weight: 660;
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.005em;
  text-wrap: balance;
  transition: color .45s var(--ease);
}
.feature-title em { font-style: italic; font-weight: 480; }
.feature:hover .feature-title { color: var(--wine-bright); }
.feature-dek {
  margin: clamp(14px, 2vw, 20px) 0 0;
  font-size: clamp(1rem, 2.2vw, 1.14rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 32rem;
}
.feature-byline { margin-top: clamp(20px, 3vw, 28px); }
.feature-cta { margin-top: clamp(22px, 3vw, 30px); }
/* The feature is a card: it keeps the accent ceremony */
.feature .tlink { background-image: linear-gradient(var(--wine-bright), var(--wine-bright)); }

/* Phones: the framed card — image in its 16 / 10 mat.
   Editorial overlap: the image drops its bottom 30% into the body below it,
   the title sitting on the darkened fade like a magazine spread. */
@media (max-width: 959px) {
  .feature { border: 0; padding: 0; }
  .feature-media { margin-inline: 0; border-radius: 0; }
  .feature-rank { left: 22px; bottom: auto; top: 22px; }
  .feature-body { position: relative; z-index: 1; margin-top: -30%; }
  .feature-media::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .78) 66%, rgba(0, 0, 0, .94) 100%);
  }
}

@media (min-width: 960px) {
  .feature-grid {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: clamp(28px, 3.4vw, 56px);
    align-items: stretch; /* the picture takes the card's full height */
  }
  .feature-media { order: 0; border-radius: 0; }
  .feature-media img { height: 100%; } /* cover: fills the column, edges flush */
  .feature-body { order: 0; padding: clamp(24px, 3vw, 44px) clamp(24px, 3.4vw, 48px) 0 0; }
}

/* ------------------------------------------------------------------ 10. Post cards — the Substack pattern */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 780px) {
  .cards--2 { grid-template-columns: 1fr 1fr; }
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
}

.post-card {
  border-radius: 16px;
  background: var(--bg-card);
  overflow: hidden;
  transition: transform .6s var(--ease);
}
.post-card:hover { transform: translateY(-5px); }

.pc-link { display: flex; flex-direction: column; height: 100%; }

.pc-media { position: relative; overflow: hidden; }
.pc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--card-rgb), 0) 34%, rgba(var(--card-rgb), .72) 66%, rgba(var(--card-rgb), 1) 94%);
  pointer-events: none;
}
.pc-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.92);
  transition: transform 1.1s var(--ease-out);
}
.post-card:hover .pc-media img { transform: scale(1.05); }

.pc-body {
  position: relative;
  margin-top: -54px;
  padding: 0 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}

.pc-author {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pc-name {
  font-family: var(--font-label);
  font-weight: 560;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--ink);
}
.pc-cat {
  font-family: var(--font-label);
  font-weight: 560;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wine-bright);
}

.pc-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 620;
  font-size: clamp(1.32rem, 2.4vw, 1.58rem);
  line-height: 1.12;
  text-wrap: balance;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .45s var(--ease);
}
.pc-title em { font-style: italic; font-weight: 480; }
.post-card:hover .pc-title { text-decoration-color: var(--ink); }

.pc-excerpt {
  margin: 0;
  font-size: .96rem;
  line-height: 1.6;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pc-meta {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Read-more hand-off below the homepage cards */
.cards-more { margin-top: clamp(38px, 5.4vw, 60px); display: flex; justify-content: center; }

/* ------------------------------------------------------------------ 11. Byline & avatar — the monogram seal */

.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.avatar {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--wine);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .05em;
}
.avatar--sm { width: 26px; height: 26px; font-size: .54rem; }
.avatar--lg { width: 46px; height: 46px; font-size: .84rem; }
.byline .who { font-family: var(--font-label); font-weight: 540; font-size: .72rem; letter-spacing: .08em; color: var(--ink); }
/* The avatar + name sit on one link — both open the About page */
.byline a.who {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--ink);
  text-decoration: none;
}
.byline .who-n { transition: opacity .3s var(--ease); }
.byline a.who:hover .who-n {
  text-decoration: underline;
  text-decoration-color: var(--wine-dim);
  text-underline-offset: 4px;
}
.byline .meta { font-family: var(--font-label); font-weight: 480; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ------------------------------------------------------------------ 12. Interlude quote */

.interlude { text-align: center; background: var(--bg-raise); }
.interlude blockquote {
  margin: 0 auto;
  max-width: 26ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 460;
  font-size: clamp(1.62rem, 5.4vw, 3.05rem);
  line-height: 1.28;
  letter-spacing: .002em;
  color: var(--ink);
  text-wrap: balance;
}
.interlude .qm { color: rgba(255, 255, 255, .4); }
.interlude .attr {
  margin-top: clamp(28px, 4.4vw, 44px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.interlude .attr .rule { width: 34px; height: 1px; background: var(--line-strong); }

/* Quote rotator — fades into the next quote on its own, no controls */
.interlude blockquote, .interlude .attr { transition: opacity .65s var(--ease); }
.interlude.is-fading blockquote, .interlude.is-fading .attr { opacity: 0; }

/* ------------------------------------------------------------------ 13. Categories (home) */

.cat-rows { border-top: 1px solid var(--line); }
.category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "name count arrow";
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(26px, 4vw, 42px) 0;
  border-bottom: 1px solid var(--line);
}
.cat-name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 620;
  font-size: clamp(1.5rem, 4.8vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: .012em;
  text-transform: uppercase;
  transition: color .4s var(--ease), transform .5s var(--ease);
  display: inline-block;
}
.cat-count { grid-area: count; font-family: var(--font-label); font-weight: 540; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.cat-arrow {
  grid-area: arrow;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--ink-3);
  transition: transform .5s var(--ease), color .4s;
}
.category-row:hover .cat-name { color: var(--ink); transform: translateX(8px); }
.category-row:hover .cat-arrow { color: var(--ink); transform: translateX(6px); }

/* ------------------------------------------------------------------ 14. Footer — three links and one giant name */

.site-footer { border-top: 1px solid var(--line); background: var(--bg); overflow: hidden; padding-top: clamp(44px, 6vw, 72px); }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px clamp(26px, 5vw, 56px);
}
.foot-links a {
  font-family: var(--font-label);
  font-weight: 560;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  min-height: 44px;
  transition: color .3s var(--ease);
}
.foot-links a:hover { color: var(--ink); }
.foot-links .toup { color: var(--ink-3); }

/* Giant outlined wordmark — stroke only, transparent fill, full width */
.foot-word {
  display: block;
  margin-top: clamp(30px, 4.5vw, 56px);
  user-select: none;
}
.foot-word svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.foot-word text {
  font-family: var(--font-display);
  font-weight: 780;
  font-size: 118px;
  fill: none;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 1.4;
  paint-order: stroke;
  letter-spacing: 0;
}

/* ------------------------------------------------------------------ 15. Article page */

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 1500;
  background: transparent;
  pointer-events: none;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--wine-bright);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.article { padding-top: clamp(110px, 18vh, 180px); }

.a-back { display: inline-block; margin-bottom: clamp(20px, 3vw, 30px); }

.a-header { max-width: 60rem; }
.a-eyebrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.a-title {
  margin: clamp(24px, 3.6vw, 40px) 0 0;
  font-family: var(--font-display);
  font-weight: 680;
  font-size: clamp(2.5rem, 8.6vw, 5.6rem);
  line-height: 1;
  letter-spacing: -.008em;
  text-wrap: balance;
}
.a-title em { font-style: italic; font-weight: 460; }
.a-dek {
  margin: clamp(24px, 3.4vw, 36px) 0 0;
  font-size: clamp(1.08rem, 2.6vw, 1.3rem);
  line-height: 1.62;
  font-style: italic;
  color: var(--ink-2);
  max-width: 36rem;
}
.a-meta {
  margin-top: clamp(30px, 4.4vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.a-meta .byline { gap: 13px; }

/* Share cluster — WhatsApp, Facebook, Instagram, copy */
.a-share {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-btn {
  width: 42px; height: 42px;
  border-radius: 999px;
  background: #1E1E1E;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .35s var(--ease), transform .35s var(--ease), color .35s var(--ease);
}
.share-btn:not(.share-btn--copy) svg { width: 16px; height: 16px; fill: currentColor; }
.share-btn:hover, .share-btn:focus-visible {
  background: var(--wine);
  color: #fff;
  transform: translateY(-2px);
}
.share-btn.is-copied { background: var(--wine); }
.share-btn--copy {
  width: auto;
  padding: 0 20px;
  gap: 9px;
  font-family: var(--font-label);
  font-weight: 560;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.share-btn--copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; }

.a-hero-figure { margin-top: clamp(44px, 7vw, 84px); }
.a-hero-figure img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  filter: saturate(.92);
}
.a-hero-cap {
  margin-top: 14px;
  display: flex;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.a-hero-cap strong { color: var(--ink-2); font-weight: 600; }
.a-hero-cap .cr { font-family: var(--font-text); font-style: italic; font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--ink-3); }

/* — Reading body: the quiet room — */
.article-body {
  margin: clamp(48px, 7vw, 84px) auto 0;
  max-width: var(--measure);
  font-size: clamp(1.14rem, .6rem + 1.5vw, 1.29rem);
  line-height: 1.76;
  font-weight: 380;
  letter-spacing: .002em;
  color: rgba(255, 255, 255, .88);
}
.article-body p { margin: 0 0 1.4em; text-wrap: pretty; }
.article-body p:last-child { margin-bottom: 0; }
.article-body em { font-style: italic; }
.article-body strong { font-weight: 560; color: var(--ink); }
.article-body a {
  color: var(--wine-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--wine-dim);
  transition: text-decoration-color .3s;
}
.article-body a:hover { text-decoration-color: var(--wine-bright); }

/* Drop cap — the burgundy ceremony */
.article-body .dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.15em;
  line-height: .76;
  float: left;
  padding: .09em .14em 0 0;
  color: var(--wine-bright);
}

/* Section heads inside essay: roman numeral + small caps */
.a-section {
  margin: clamp(52px, 7vw, 76px) 0 clamp(24px, 3vw, 34px);
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.a-section .rn {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--wine-bright);
}
.a-section .st {
  font-family: var(--font-label);
  font-weight: 620;
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink);
}
.a-section::after { content: ""; flex: 1; height: 1px; background: var(--line); align-self: center; }

/* Pull quote */
.a-pull {
  margin: clamp(52px, 7vw, 80px) auto;
  padding: clamp(30px, 4vw, 44px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.a-pull p {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 470;
  font-size: clamp(1.45rem, 4.6vw, 2.1rem);
  line-height: 1.3;
  color: var(--ink);
}
.a-pull .who {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-label);
  font-weight: 540;
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.a-pull .who::before { content: ""; width: 26px; height: 1px; background: var(--wine-dim); }

/* Plates — figures with museum captions */
.plate { margin: clamp(48px, 6vw, 72px) 0; }
.plate .frame img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  filter: saturate(.92);
}
.plate--wide { margin-inline: calc(var(--gutter) * -1); }
@media (min-width: 900px) {
  .plate--wide { margin-inline: calc(-22vw - var(--gutter)); }
  .plate--wide img { aspect-ratio: 16/9; }
}
.plate-caption {
  margin-top: 14px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}
.plate-caption .pl {
  font-family: var(--font-label);
  font-weight: 620;
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--wine-bright);
  white-space: nowrap;
}
.plate-caption .cap {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.8;
}
.plate-caption .cr { font-family: var(--font-text); font-style: italic; font-size: .82rem; color: var(--ink-3); letter-spacing: 0; text-transform: none; }

/* Finial — the end mark */
.finial {
  margin: clamp(56px, 8vw, 88px) auto 0;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--measure);
}
.finial::before, .finial::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.finial i { width: 8px; height: 8px; background: var(--wine-bright); transform: rotate(45deg); display: block; }

/* Filed-under */
.after-essay { max-width: var(--measure); margin: clamp(48px, 7vw, 72px) auto 0; }

.filed-under {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Next essay — the hand-off */
.next-essay {
  margin-top: clamp(72px, 10vw, 120px);
  border-top: 1px solid var(--line);
  padding-top: clamp(48px, 7vw, 80px);
}
.next-essay .ne-inner {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 900px) { .next-essay .ne-inner { grid-template-columns: minmax(0,5fr) minmax(0,7fr); } }
.next-essay .ne-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  filter: saturate(.92);
  transition: transform .7s var(--ease-out);
}
.next-essay a:hover .ne-media img { transform: scale(1.02); }
.next-essay .ne-title {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 660;
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  line-height: 1.04;
  text-wrap: balance;
  transition: color .4s;
}
.next-essay .ne-title em { font-style: italic; font-weight: 470; }
.next-essay a:hover .ne-title { color: var(--wine-bright); }
.next-essay .ne-dek { margin: 18px 0 0; color: var(--ink-2); font-style: italic; font-size: 1.02rem; line-height: 1.6; max-width: 28rem; }
.next-essay .tlink { margin-top: 24px; }

/* Related */
.related { margin-top: clamp(64px, 9vw, 104px); }

/* ------------------------------------------------------------------ 16. Essays page */

.page-head { padding-top: clamp(110px, 18vh, 190px); }
.page-head .display-l { max-width: 15ch; margin: clamp(22px, 3.4vw, 34px) 0 0; }
.page-head .page-intro {
  margin: clamp(24px, 3.6vw, 40px) 0 0;
  max-width: 32rem;
  font-size: clamp(1.04rem, 2.4vw, 1.2rem);
  line-height: 1.66;
  color: var(--ink-2);
}

/* Category anchor pills — quick scanning */
.cat-nav {
  margin-top: clamp(30px, 4.4vw, 46px);
  margin-bottom: clamp(44px, 6.5vw, 76px); /* air below the capsules, before the first room */
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cat-nav a {
  font-family: var(--font-label);
  font-weight: 560;
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 20px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: color .3s, border-color .3s;
}
.cat-nav a:hover, .cat-nav a:focus-visible { color: var(--ink); border-color: var(--line-strong); }

.coll-section { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line); }
.coll-section-head {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 3vw, 34px);
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.coll-section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 640;
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: 1;
}
.coll-section-head .count { margin-left: auto; }

/* ------------------------------------------------------------------ 17. About page */

.manifesto { max-width: var(--measure); }
.manifesto p { font-size: clamp(1.06rem, 2.5vw, 1.24rem); line-height: 1.74; color: var(--ink-2); margin: 0 0 1.5em; }
.manifesto p:first-child { font-size: clamp(1.28rem, 3.4vw, 1.6rem); color: var(--ink); line-height: 1.6; }
.manifesto p:first-child::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.6em;
  line-height: .78;
  float: left;
  padding: .1em .14em 0 .04em;
  color: var(--ink);
}

.manifesto a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--wine-dim);
  text-underline-offset: 3px;
  transition: text-decoration-color .3s var(--ease);
}
.manifesto a:hover { text-decoration-color: var(--wine-bright); }

/* About page — the founder's text left and the watchman right on desktop;
   on phones the picture drops below the text, at the foot of the page */
.about-grid { display: grid; gap: clamp(30px, 5vw, 56px); }
.about-figure { margin: 0; }
.about-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  filter: saturate(.92);
}
.about-figure figcaption { margin-top: 14px; }
@media (min-width: 960px) {
  .about-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

.masthead { display: grid; gap: clamp(28px, 4vw, 44px); }
@media (min-width: 820px) { .masthead { grid-template-columns: 1fr 1fr; } }
.masthead .m-block { border-top: 1px solid var(--line-strong); padding-top: 20px; }
.masthead h3 { margin: 0 0 14px; font-family: var(--font-label); font-weight: 620; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); }
.masthead ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.masthead li { font-family: var(--font-text); font-size: .98rem; color: var(--ink-2); display: flex; justify-content: space-between; gap: 12px 18px; border-bottom: 1px dotted var(--line); padding-bottom: 10px; align-items: baseline; }
.masthead li b { font-weight: 560; color: var(--ink); }
.masthead li span { font-family: var(--font-label); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
@media (max-width: 640px) {
  .masthead li { flex-direction: column; align-items: flex-start; gap: 5px; }
  .masthead li span { text-align: left; }
}

.about-portrait { max-width: 380px; }
.about-portrait img { width: 100%; border-radius: var(--radius); filter: saturate(.92); }
.about-portrait figcaption {
  margin-top: 12px;
  font-family: var(--font-text);
  font-style: italic;
  font-size: .84rem;
  color: var(--ink-3);
  text-align: center;
}

/* ------------------------------------------------------------------ 18. Motion & details */

/* Reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* Image lazy-fade */
img[data-fade] { opacity: 0; transition: opacity .8s var(--ease); }
img[data-fade].is-loaded { opacity: 1; }
.no-js img[data-fade] { opacity: 1; }

/* Skeleton loading — while a picture is still on its way, its mat breathes
   with a quiet shimmer instead of sitting empty. The script hangs
   .sk-loading on the wrapper of every img[data-fade] that is not cached
   yet, and lifts it the moment the picture is decoded or has failed. */
.sk-loading {
  background-color: rgba(255, 255, 255, .05);
  background-image: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, .09) 50%,
    rgba(255, 255, 255, 0) 66%);
  background-size: 260% 100%;
  background-position: 140% 0;
  animation: sk-sweep 1.5s var(--ease) infinite;
}
@keyframes sk-sweep {
  from { background-position: 140% 0; }
  to   { background-position: -140% 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  [data-reveal] { opacity: 1; transform: none; }
  img[data-fade] { opacity: 1; }
  .q-ring { animation: none; }
}

/* Horizontal overflow guard for display type */
.display-l { overflow-wrap: break-word; }

/* ==========================================================================
   19. Desktop exhibition polish — wide screens only; phones stay as shipped
   ========================================================================== */
@media (min-width: 960px) {

  /* The orbit becomes a centred gallery poster: square, fully in frame,
     with a quiet wall label above and below */
  .q-eyebrow, .q-cap { display: block; text-align: center; }
  .q-eyebrow { margin-bottom: clamp(24px, 3vw, 38px); }
  .q-cap { margin-top: clamp(22px, 2.6vw, 32px); }
  .q-orbit {
    height: auto;
    width: min(720px, 100%);
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    border-radius: var(--radius);
  }

  /* Feature card: the title drops its hard break and balances itself */
  .feature-title br { display: none; }

  /* Eyebrow label rows breathe apart */
  .page-head p .label--quiet { margin-left: 16px; }
  .a-eyebrow .label--quiet { margin-left: 16px; }

  /* Interlude: a touch more theatre on the big screen */
  .interlude blockquote { max-width: 30ch; font-size: clamp(2.3rem, 3.6vw, 3.55rem); }
  .interlude .attr .rule { width: 46px; }

  /* The essay's hero plate hangs like a museum piece — the art left, its
     wall label standing in a right-hand rail */
  .a-hero-figure {
    display: grid;
    grid-template-columns: minmax(0, 8.2fr) minmax(0, 2.9fr);
    column-gap: clamp(26px, 3vw, 46px);
    align-items: start;
  }
  .a-hero-figure img {
    height: min(74vh, 730px);
    object-position: 50% 28%;
  }
  .a-hero-cap {
    grid-column: 2;
    grid-row: 1;
    margin-top: 10px;
    display: block;
    border-left: 1px solid var(--line);
    padding-left: clamp(16px, 1.8vw, 24px);
  }
  .a-hero-cap span { display: block; }
  .a-hero-cap .cr { margin-top: 12px; max-width: 34ch; }
}

/* ==========================================================================
   20. WordPress — core markup, block-editor content, comments, pagination
   ========================================================================== */

/* Screen-reader text (WP accessibility helper) */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px; width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: #fff;
  color: #000;
  clip-path: none;
  width: auto; height: auto;
  padding: 14px 18px;
  position: fixed !important;
  left: 14px; top: 14px;
  font-family: var(--font-label);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  z-index: 1600;
}

/* Custom logo replaces the wordmark gracefully */
.site-header .custom-logo-link { display: inline-flex; align-items: center; }
.site-header .custom-logo-link img { max-height: 30px; width: auto; }

/* ── Block-editor content inside the article body and the manifesto ── */

.article-body h2,
.entry-content h2 {
  margin: clamp(44px, 6.5vw, 72px) 0 clamp(14px, 2vw, 20px);
  padding-top: clamp(24px, 3.4vw, 34px);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 620;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -.005em;
}
.article-body h2 em, .entry-content h2 em { font-style: italic; font-weight: 470; }

.article-body h3,
.entry-content h3 {
  margin: clamp(30px, 4.5vw, 44px) 0 12px;
  font-family: var(--font-label);
  font-weight: 620;
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
}

.article-body h4, .entry-content h4 {
  margin: 24px 0 10px;
  font-family: var(--font-label);
  font-weight: 560;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.article-body ul, .article-body ol,
.entry-content ul, .entry-content ol {
  margin: 18px 0 18px;
  padding-left: 1.3em;
}
.article-body li, .entry-content li {
  margin: 8px 0;
  line-height: 1.7;
}
.article-body li::marker, .entry-content li::marker { color: rgba(255, 255, 255, .44); }

.article-body blockquote,
.entry-content blockquote {
  margin: clamp(34px, 5vw, 52px) 0;
  padding: 0 clamp(4px, 2vw, 16px);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 460;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.42;
  color: var(--ink);
}
.article-body blockquote p, .entry-content blockquote p { margin: 0 0 10px; font-size: inherit; line-height: inherit; }
.article-body blockquote cite, .entry-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-label);
  font-style: normal;
  font-weight: 560;
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.article-body img, .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.wp-block-image figcaption, figcaption.wp-caption-text {
  margin-top: 12px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.wp-caption, .wp-block-image { max-width: 100%; }
.alignleft { float: left; margin: 8px clamp(20px, 3vw, 34px) 18px 0; }
.alignright { float: right; margin: 8px 0 18px clamp(20px, 3vw, 34px); }
.aligncenter { margin-inline: auto; text-align: center; }
.alignwide { max-width: none; width: min(100%, 1000px); margin-inline: auto; }
.alignfull { max-width: none; margin-inline: calc(var(--gutter) * -1); width: calc(100% + var(--gutter) * 2); }

.manifesto a,
.page-intro a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--wine-dim);
  text-underline-offset: 3px;
  transition: text-decoration-color .3s var(--ease);
}
.manifesto a:hover, .page-intro a:hover { text-decoration-color: var(--wine-bright); }

/* The first paragraph of a hand-written essay keeps the burgundy ceremony */
.article-body > p:first-of-type::first-letter,
.article-body > .wp-block-paragraph:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 640;
  font-size: 3.4em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--wine-bright);
}

/* The author’s name in the byline opens the About page */
.byline a.who { color: var(--ink); transition: color .3s var(--ease); }
.byline a.who:hover, .byline a.who:focus-visible { color: var(--wine-bright); }

/* ── Pagination ── */
.orpheus-pagination { margin-top: clamp(48px, 7vw, 80px); }
.orpheus-pagination ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.orpheus-pagination a,
.orpheus-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  font-family: var(--font-label);
  font-weight: 560;
  font-size: .66rem;
  letter-spacing: .18em;
  color: var(--ink-2);
  transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.orpheus-pagination a:hover, .orpheus-pagination a:focus-visible { border-color: #fff; color: #fff; }
.orpheus-pagination .current { background: #fff; border-color: #fff; color: #000; }

/* ── Comments — the quiet correspondence ── */
.orpheus-comments { max-width: var(--measure); margin: clamp(56px, 8vw, 90px) auto 0; }
.comment-list { list-style: none; margin: clamp(22px, 3.6vw, 36px) 0 0; padding: 0; }
.comment-list .comment { border-top: 1px solid var(--line); padding: 26px 0; }
.comment-list .children { list-style: none; margin: 22px 0 0; padding-left: 24px; }
.comment-list .avatar { border-radius: 50%; margin-right: 12px; vertical-align: middle; background: var(--wine); }
.comment-author { font-family: var(--font-label); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.comment-metadata { margin-top: 6px; font-family: var(--font-label); font-weight: 500; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.comment-metadata a { color: var(--ink-3); }
.comment-metadata a:hover { color: var(--ink); }
.comment-metadata .edit-link { display: none; }
.comment-content { margin-top: 12px; font-size: 1rem; line-height: 1.7; color: var(--ink-2); }
.comment-content a { color: var(--ink); text-decoration-color: var(--wine-dim); }
.comment-reply-link { font-family: var(--font-label); font-weight: 560; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wine-bright); }
.bypostauthor > .comment-body .comment-author { color: var(--ink); }

.comment-form-wrap { margin-top: clamp(40px, 6vw, 64px); }
.comment-reply-title { margin: 0 0 18px; font-family: var(--font-label); font-weight: 620; font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; }
.comment-form p { margin: 0 0 18px; }
.comment-form label { display: block; margin-bottom: 8px; font-family: var(--font-label); font-weight: 560; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 0;
  color: #fff;
  padding: 14px 16px;
  font-family: var(--font-text);
  font-size: 1rem;
  transition: border-color .3s var(--ease);
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: rgba(255, 255, 255, .5); }
.comment-form .submit { width: auto; }
.comment-notes, .logged-in-as { font-size: .9rem; color: var(--ink-3); }

/* Post edit link — quiet, for the author's eyes only */
.post-edit-link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-label);
  font-weight: 560;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.post-edit-link:hover { color: var(--ink); }