@font-face {
  font-family: "XB Niloofar";
  src: local("XB Niloofar"), local("XBNiloofar"), url("../fonts/XBNiloofar.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Far Mashin Tahrir";
  src: url("../fonts/FarMashinTahrir.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #dedbd4;
  color: #191817;
  font-family: "XB Niloofar", Tahoma, serif;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
::selection { background: var(--accent-soft, #dfe7e4); color: var(--ink, #191817); }

.site {
  --accent: #c65a2d;
  --accent-soft: #ead8ce;
  --secondary: #b79040;
  --ink: #191817;
  --paper: #efede7;
  --season-art: none;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 5%, rgba(255,255,255,.65), transparent 25rem),
    linear-gradient(rgba(255,255,255,.13), rgba(255,255,255,.13)),
    var(--paper);
  position: relative;
  overflow: hidden;
}

.site::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(0deg, rgba(58,45,31,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 5px);
  z-index: 20;
}

.shell { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }

.siteHeader {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  min-height: 96px;
  display: grid;
  grid-template-columns: 90px 1fr 40px;
  gap: 24px;
  align-items: center;
  position: relative;
  z-index: 10;
}
.brandMini img { object-fit: contain; border-radius: 50%; display:block; }
.desktopNav { display:flex; justify-content:flex-start; gap: clamp(20px, 3vw, 45px); font-size:14px; }
.desktopNav a { padding: 35px 0 17px; border-bottom: 2px solid transparent; }
.desktopNav a:hover, .desktopNav a.active { color: var(--accent); border-color: var(--accent); }
.mobileMenu { display:none; direction:rtl; }
.mobileMenu summary { list-style:none; cursor:pointer; font-size:22px; }
.mobileMenu summary::-webkit-details-marker { display:none; }
.mobileMenu > div { position:absolute; left:0; right:0; top:78px; background:rgba(239,237,231,.98); border:1px solid rgba(25,24,23,.15); padding:18px; display:grid; gap:10px; box-shadow:0 18px 50px rgba(0,0,0,.12); }

.hero {
  min-height: 500px;
  display:grid;
  grid-template-columns: .95fr 1.2fr;
  gap: 56px;
  align-items:center;
  position:relative;
  padding: 30px 0 55px;
}
.heroPainting {
  height: 420px;
  background-image: var(--season-art);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  filter: saturate(.93) contrast(1.04);
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse 86% 80% at 48% 48%, #000 58%, transparent 96%);
  opacity:.95;
}
.heroText { max-width: 660px; justify-self:end; }
.brandLockup { display:flex; gap:25px; align-items:center; }
.heroLogo { border-radius: 50%; object-fit:contain; flex:none; }
h1 { font-family: "XB Niloofar", Tahoma, serif; font-size: clamp(24px, 2.2vw, 28px); line-height:1.45; margin:0 0 8px; font-weight:700; }
.englishName { font-family: Georgia, serif; font-size: clamp(13px, 1.35vw, 17px); color: var(--accent); margin:0; letter-spacing:.02em; direction:ltr; text-align:right; }
.manifesto { font-size:19px; line-height:2.1; max-width:620px; margin:34px 0 12px; }
.blood { font-size:30px; font-weight:800; margin:0; }
.blood::first-letter { color:var(--accent); }
.seasonStamp { display:inline-block; margin-top:20px; color:var(--accent); border-top:1px solid var(--accent); padding-top:7px; font-size:12px; letter-spacing:.08em; }

.sectionBlock { padding: 36px 0; border-top:1px solid rgba(25,24,23,.13); }
.sectionHeading { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:12px; margin-bottom:22px; }
.sectionHeading .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }
.sectionHeading h2 { font-size:30px; margin:0; white-space:nowrap; }
.sectionHeading .rule { height:1px; background:linear-gradient(to left, rgba(25,24,23,.24), transparent); }

.poemGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.poemCard {
  min-height:190px;
  border:1px solid rgba(25,24,23,.18);
  padding:24px 25px 20px;
  position:relative;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.poemCard:hover { transform:translateY(-3px); border-color:var(--accent); background:rgba(255,255,255,.34); }
.paintCorner { position:absolute; width:80px; height:80px; top:-25px; left:-22px; background-image:var(--season-art); background-size:240px; mix-blend-mode:multiply; opacity:.45; transform:rotate(20deg); }
.poemCard h3 { font-size:23px; margin:0 0 8px; position:relative; }
.poetName { color:var(--accent); font-weight:650; margin:0 0 18px; }
.poemCard > p:not(.poetName) { color:#504c46; line-height:1.9; font-size:14px; }
.readMore { position:absolute; bottom:18px; right:24px; color:var(--accent); font-size:13px; }

.portraitGrid { display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }

/* Monthly people grids keep the five-card rhythm for complete rows, while an
   incomplete final row is centered as a balanced group. */
.monthlyPortraitGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.monthlyPortraitGrid > .portraitCard {
  flex: 0 0 calc((100% - 88px) / 5);
  max-width: calc((100% - 88px) / 5);
}
.portraitCard { display:grid; gap:10px; text-align:center; min-width:0; }
.portraitFrame { position:relative; aspect-ratio: 4 / 3; overflow:hidden; background:#d2d0ca; border:1px solid rgba(25,24,23,.16); }
.portraitFrame img { width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.04); transition:filter .25s ease, transform .25s ease; }
.portraitCard:hover .portraitFrame img { filter:grayscale(100%) contrast(1.13); transform:scale(1.025); }
.portraitCard strong { font-size:17px; }
.portraitCard small { direction:ltr; font-family:Georgia,serif; color:#66615b; font-size:12px; }
.portraitFallback { position:absolute; inset:0; display:grid; place-items:center; font-size:48px; color:#8c8983; }
.translatorsGrid .portraitFrame { aspect-ratio: 1 / 1; }
.translatorsGrid .portraitFrame img { object-position:center; }

.bottomGrid { display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; }
.podcastPanel, .editorialPanel { border:1px solid rgba(25,24,23,.18); padding:25px; background:rgba(255,255,255,.11); position:relative; overflow:hidden; }
.editorialPanel::after { content:""; position:absolute; width:190px; height:190px; left:-35px; bottom:-45px; background-image:var(--season-art); background-size:cover; mix-blend-mode:multiply; opacity:.25; border-radius:50%; }
.editorialPanel h3 { font-size:27px; margin:10px 0 12px; position:relative; z-index:1; }
.editorialPanel p { line-height:2; color:#4a4742; position:relative; z-index:1; }
.podcastList { display:grid; }
.podcastRow { display:grid; grid-template-columns:42px 1fr minmax(90px,auto); align-items:center; gap:13px; padding:16px 0; border-bottom:1px solid rgba(25,24,23,.1); }
.play { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:white; background:var(--accent); font-size:12px; direction:ltr; }
.wave { height:24px; opacity:.48; background:repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 7px); mask-image:linear-gradient(transparent 12%, black 38%, black 62%, transparent 88%); }
.textLink { display:inline-block; color:var(--accent); margin-top:18px; font-weight:700; position:relative; z-index:1; }

.contactFollow { border-top:1px solid rgba(25,24,23,.13); border-bottom:1px solid rgba(25,24,23,.13); padding:32px 0; display:grid; grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr); gap:34px; align-items:center; }
.contactIntro h2 { margin:0; font-size:24px; line-height:1.8; font-weight:500; }
.contactLinks { display:flex; align-items:center; justify-content:flex-start; gap:14px; direction:ltr; }
.contactIconLink { width:46px; height:46px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(25,24,23,.18); border-radius:50%; color:#4e4a45; background:rgba(255,255,255,.08); text-decoration:none; transition:transform .18s ease, color .18s ease, border-color .18s ease, background-color .18s ease; }
.contactIconLink svg { width:21px; height:21px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.contactIconLink svg .iconDot { fill:currentColor; stroke:none; }
.contactIconLink svg .iconPlay { fill:currentColor; stroke:none; }
.contactIconLink:hover { transform:translateY(-2px); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 52%, transparent); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.contactIconLink:focus-visible { color:var(--accent); border-color:var(--accent); outline:1px solid var(--accent); outline-offset:4px; }

.footer { min-height:135px; display:flex; align-items:center; justify-content:space-between; gap:30px; color:#514d47; font-size:13px; }
.footerBrand { display:flex; align-items:center; gap:14px; }
.footerBrand img { border-radius:50%; object-fit:contain; }
.footerBrand div { display:grid; gap:3px; }
.footerBrand small { font-family:Georgia,serif; direction:ltr; }


/* --------------------------------------------------------------------------
   Seasonal art direction
   --------------------------------------------------------------------------
   The information architecture stays stable while the emotional field changes.
   All decorative imagery comes from the four supplied abstract artworks.
*/

.season-spring {
  background:
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.78), transparent 28rem),
    radial-gradient(circle at 92% 72%, rgba(43,120,104,.055), transparent 26rem),
    var(--paper);
}
.season-spring .heroPainting {
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  filter: saturate(.82) brightness(1.02) contrast(1.03);
  opacity:.86;
  mask-image: radial-gradient(ellipse 86% 82% at 48% 50%, #000 58%, transparent 96%);
}
.season-spring .paintCorner { opacity:.34; background-size:190px; }
.season-spring .editorialPanel::after { opacity:.18; border-radius:44% 56% 52% 48%; }

/* Autumn is the original approved second concept: black + burnt orange. */
.season-autumn {
  background:
    radial-gradient(circle at 18% 7%, rgba(255,255,255,.68), transparent 26rem),
    radial-gradient(circle at 87% 58%, rgba(198,92,48,.045), transparent 26rem),
    var(--paper);
}
.season-autumn .heroPainting {
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  filter: saturate(.84) contrast(1.05);
  opacity:.94;
  mask-image: radial-gradient(ellipse 86% 82% at 48% 50%, #000 58%, transparent 96%);
}
.season-autumn .paintCorner { opacity:.42; }

.season-winter {
  background:
    radial-gradient(circle at 15% 7%, rgba(255,255,255,.72), transparent 28rem),
    linear-gradient(180deg, rgba(68,90,106,.025), transparent 45%),
    var(--paper);
}
.season-winter .heroPainting {
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  filter: grayscale(100%) contrast(1.10);
  opacity:.82;
  mix-blend-mode:multiply;
  mask-image: radial-gradient(ellipse 90% 84% at 46% 49%, #000 60%, transparent 98%);
}
.season-winter .paintCorner { filter:grayscale(100%); opacity:.27; }
.season-winter .seasonStamp,
.season-winter .englishName { color:#445A6A; }
.season-winter .editorialPanel::after { filter:grayscale(100%); opacity:.16; }

.season-summer {
  background:
    radial-gradient(circle at 18% 4%, rgba(255,255,255,.84), transparent 27rem),
    radial-gradient(circle at 84% 48%, rgba(36,93,148,.045), transparent 30rem),
    var(--paper);
}
.season-summer .heroPainting {
  filter: saturate(.8) contrast(1.02) brightness(1.04);
  opacity:.72;
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 86%, transparent 100%);
}
.season-summer .paintCorner { opacity:.30; background-size:270px; }
.season-summer .editorialPanel::after { opacity:.17; width:235px; height:145px; border-radius:50%; }

@media (max-width: 900px) {
  .shell, .siteHeader { width:min(100% - 32px, 720px); }
  .siteHeader { grid-template-columns:64px 1fr 34px; min-height:78px; }
  .brandMini img { width:62px; height:62px; }
  .desktopNav { display:none; }
  .mobileMenu { display:block; }
  .hero { grid-template-columns:1fr; gap:5px; padding-top:12px; }
  .heroText { order:1; justify-self:stretch; }
  .heroPainting { order:2; height:250px; margin:0 -16px; opacity:.72; }
  .brandLockup { gap:14px; align-items:flex-start; }
  .heroLogo { width:92px; height:92px; }
  h1 { font-size:27px; line-height:1.42; }
  .manifesto { font-size:16px; line-height:2; margin-top:22px; }
  .blood { font-size:24px; }
  .poemGrid { grid-template-columns:1fr 1fr; }
  .portraitGrid { grid-template-columns:repeat(2,1fr); gap:17px; }
  .monthlyPortraitGrid { gap:17px; }
  .monthlyPortraitGrid > .portraitCard {
    flex-basis: calc((100% - 17px) / 2);
    max-width: calc((100% - 17px) / 2);
  }
  .portraitCard:last-child { grid-column:auto; }
  .bottomGrid { grid-template-columns:1fr; }
  .contactFollow { grid-template-columns:1fr; gap:14px; align-items:stretch; }
  .contactLinks { justify-content:flex-start; }
  .footer { align-items:flex-start; flex-direction:column; padding-block:25px; }
}

@media (max-width: 560px) {
  .contentTypeBook .articleBody > ul,
  .contentTypeBook .articleBody > ol { padding: 18px 18px 14px; border-radius: 18px; }
  .contentTypeBook .articleBody > ul > li { padding-right: 24px; }
  .contentTypeBook .articleBody > ol > li { padding-right: 36px; }
  .contentTypeBook .articleBody > ul::before,
  .contentTypeBook .articleBody > ol::before { font-size: 11px; }
  .contentTypeBook .articleBody > ul,
  .contentTypeBook .articleBody > ol { padding: 18px 18px 14px; border-radius: 18px; }
  .contentTypeBook .articleBody > ul > li { padding-right: 24px; }
  .contentTypeBook .articleBody > ol > li { padding-right: 36px; }
  .contentTypeBook .articleBody > ul::before,
  .contentTypeBook .articleBody > ol::before { font-size: 11px; }
  .shell, .siteHeader { width:calc(100% - 24px); }
  .siteHeader { grid-template-columns:58px 1fr 30px; }
  .brandMini img { width:54px; height:54px; }
  .hero { min-height:auto; }
  .brandLockup { display:grid; grid-template-columns:72px 1fr; }
  .heroLogo { width:72px; height:72px; }
  h1 { font-size:24px; line-height:1.5; }
  .englishName { font-size:14px; }
  .heroPainting { height:190px; }
  .sectionHeading h2 { font-size:25px; }
  .poemGrid { grid-template-columns:1fr; }
  .poemCard { min-height:160px; }
  .portraitGrid { grid-template-columns:1fr 1fr; }
  .monthlyPortraitGrid > .portraitCard {
    flex-basis: calc((100% - 17px) / 2);
    max-width: calc((100% - 17px) / 2);
  }
  .portraitCard strong { font-size:15px; }
  .bottomGrid { gap:18px; }
  .podcastPanel, .editorialPanel { padding:18px; }
  .podcastRow { grid-template-columns:36px 1fr; }
  .podcastRow strong { grid-column:1 / -1; padding-right:49px; }
  .contactLinks { justify-content:center; gap:12px; }
  .contactIconLink { width:44px; height:44px; }
}


/* ==========================================================================
   Single WordPress content page
   ========================================================================== */

.articlePage { min-height: 100vh; }
.singleContent { position: relative; }

.articleHero {
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(280px, 430px) minmax(330px, 520px);
  grid-template-areas: "art title";
  direction: ltr;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.5vw, 34px);
  position: relative;
  border-bottom: 1px solid rgba(25,24,23,.14);
  padding-block: 46px 54px;
}
.articleHeroArt {
  grid-area: art;
  min-height: 280px;
  width: min(100%, 410px);
  display: grid;
  align-items: center;
  justify-self: end;
}
.articleHeroArt.hasFeaturedImage {
  background: transparent;
  mix-blend-mode: normal;
  mask-image: none;
  opacity: 1;
  filter: none;
}
.articleHeroImageFrame {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 16px;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(25,24,23,.10);
  border-radius: 2px;
}
.articleHeroImageFrame::before,
.articleHeroImageFrame::after {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
}
.articleHeroImageFrame::before {
  border-top: 1px solid rgba(25,24,23,.22);
  border-right: 1px solid rgba(25,24,23,.22);
  width: 26%;
  height: 28%;
  inset: 10px 10px auto auto;
}
.articleHeroImageFrame::after {
  border-bottom: 1px solid rgba(25,24,23,.22);
  border-left: 1px solid rgba(25,24,23,.22);
  width: 26%;
  height: 28%;
  inset: auto auto 10px 10px;
}
.articleHeroImage {
  display: block;
  width: 100%;
  height: clamp(230px, 23vw, 315px);
  object-fit: contain;
}
.frameOrnament {
  position: absolute;
  z-index: 2;
  width: 84px;
  height: 84px;
  pointer-events: none;
}
.frameOrnament::before,
.frameOrnament::after {
  content: "";
  position: absolute;
  background: var(--accent);
  opacity: .62;
}
.frameOrnamentTop {
  top: -8px;
  right: -8px;
}
.frameOrnamentTop::before {
  top: 0;
  right: 0;
  width: 64px;
  height: 1px;
}
.frameOrnamentTop::after {
  top: 0;
  right: 0;
  width: 1px;
  height: 64px;
}
.frameOrnamentBottom {
  bottom: -8px;
  left: -8px;
}
.frameOrnamentBottom::before {
  bottom: 0;
  left: 0;
  width: 64px;
  height: 1px;
}
.frameOrnamentBottom::after {
  bottom: 0;
  left: 0;
  width: 1px;
  height: 64px;
}
.articleHeroSeasonArt {
  height: 300px;
  background-image: var(--season-art);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: .78;
  filter: saturate(.82) contrast(1.03);
  mask-image: radial-gradient(ellipse 83% 80% at center, #000 54%, transparent 96%);
}
.articleTitleBlock {
  grid-area: title;
  position: relative;
  z-index: 2;
  direction: rtl;
  text-align: left;
  justify-self: start;
  width: min(100%, 520px);
}
.articleEyebrow {
  color: var(--accent);
  font-size: 13px;
  font-weight: 650;
  display: inline-block;
  margin-bottom: 18px;
}
.articleTitleBlock h1 {
  font-size: clamp(29px, 3.1vw, 40px);
  line-height: 1.54;
  max-width: 520px;
  letter-spacing: 0;
  font-weight: 400;
  text-wrap: balance;
}
.articlePath {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  direction: rtl;
  color: #746f68;
  font-size: 13px;
  line-height: 1.8;
}
.articlePath a { color: var(--accent); }
.articlePath a:hover { text-decoration: underline; text-underline-offset: 4px; }
.articleCreator {
  margin: 15px 0 0;
  color: var(--accent);
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 650;
}
.articleMeta {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: #625e58;
  font-size: 13px;
  align-items: center;
  justify-content: flex-end;
  direction: rtl;
  text-align: left;
}
.articleMeta span { position: relative; }
.articleMeta span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  position: absolute;
  inset-inline-start: -13px;
  top: 50%;
}
.seasonPill { color: var(--accent); font-weight: 700; }

.articleCanvas {
  display: grid;
  grid-template-columns: 210px minmax(0, 760px);
  justify-content: center;
  gap: clamp(45px, 7vw, 110px);
  align-items: start;
  padding-block: 72px 100px;
}
.articleRail {
  position: sticky;
  top: 28px;
  display: grid;
  gap: 0;
  color: #58544e;
  font-size: 13px;
}
.railLogo {
  width: 74px;
  height: 74px;
  object-fit: contain;
  border-radius: 50%;
  margin-bottom: 26px;
}
.railItem {
  display: grid;
  gap: 5px;
  padding: 16px 0;
  border-top: 1px solid rgba(25,24,23,.12);
}
.railItem small { color: #8a847c; font-size: 11px; }
.railItem strong { color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.8; }
.sourceLink {
  margin-top: 16px;
  color: var(--accent);
  line-height: 1.8;
  font-weight: 650;
}
.articleReadingColumn { min-width: 0; }

.articleBody {
  font-size: clamp(20px, 1.45vw, 23px);
  line-height: 2.18;
  color: #22201e;
  overflow-wrap: break-word;
  word-break: normal;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
}
.articleBody > *:first-child { margin-top: 0; }
.articleBody p {
  margin: 0 0 1.32em;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
}
.articleBody li {
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
}
.articleBody br { line-height: inherit; }
.articleBody h2,
.articleBody h3,
.articleBody h4 {
  font-family: "XB Niloofar", Tahoma, serif;
  line-height: 1.65;
  margin: 2.5em 0 1em;
  color: var(--ink);
}
.articleBody h2 { font-size: 31px; }
.articleBody h3 {
  font-size: 24px;
  padding-top: 28px;
  border-top: 1px solid rgba(25,24,23,.13);
}
.articleBody h3::before { content: "•"; color: var(--accent); margin-left: 10px; }
.articleBody h4 { font-size: 20px; }
.articleBody a { color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
.articleBody blockquote {
  margin: 2.2em 0;
  padding: 8px 28px 8px 0;
  border-right: 3px solid var(--accent);
  color: #504b45;
  font-size: 1.05em;
}
.articleBody hr {
  border: 0;
  border-top: 1px solid rgba(25,24,23,.18);
  margin: 2.2em 0;
}
.articleBody strong { font-weight: 700; }
.articleBody em { font-style: italic; }
.articleBody ul, .articleBody ol { padding-right: 1.4em; }
.articleBody img {
  max-width: 100%;
  height: auto;
  filter: grayscale(100%) contrast(1.03);
  margin-block: 1.5em;
}
.articleBody figure { margin: 2em 0; }
.articleBody figcaption { color: #77716a; font-size: 12px; text-align: center; }
.articleBody iframe, .articleBody video, .articleBody audio { max-width: 100%; }
.articleBody pre { white-space: pre-wrap; }

.contentTypePoem .articleReadingColumn { max-width: 710px; }
.contentTypePoem .articleBody {
  font-size: clamp(21px, 1.65vw, 25px);
  line-height: 1.65;
}
.contentTypePoem .articleBody p { margin: 0; }
.contentTypeProse .articleReadingColumn { max-width: 790px; }
.contentTypeProse .articleBody { line-height: 2.12; }

/* Fast 48: book entries keep a richer editorial treatment for tables of
   contents and audiobook/navigation blocks while the rest of the archive
   stays typographically minimal. */
.contentTypeBook .articleReadingColumn { max-width: 820px; }
.contentTypeBook .articleBody > ul,
.contentTypeBook .articleBody > ol {
  margin: 2.3em 0 2.8em;
  padding: 22px 26px 18px;
  list-style: none;
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(247,244,239,.96));
  border: 1px solid rgba(25,24,23,.12);
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(25,24,23,.06);
  position: relative;
}
.contentTypeBook .articleBody > ul::before,
.contentTypeBook .articleBody > ol::before {
  content: "فهرست مطالب";
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(25,24,23,.045);
  border: 1px solid rgba(25,24,23,.08);
  color: #3b342e;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
}
.contentTypeBook .articleBody > ul::after,
.contentTypeBook .articleBody > ol::after {
  content: "";
  position: absolute;
  inset: 12px 12px auto 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(25,24,23,.08), transparent);
}
.contentTypeBook .articleBody > ul > li,
.contentTypeBook .articleBody > ol > li {
  margin: 0;
  padding: 12px 0;
  position: relative;
}
.contentTypeBook .articleBody > ul > li + li,
.contentTypeBook .articleBody > ol > li + li {
  border-top: 1px solid rgba(25,24,23,.08);
}
.contentTypeBook .articleBody > ul > li {
  padding-right: 28px;
}
.contentTypeBook .articleBody > ul > li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 1.28em;
  right: 4px;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(25,24,23,.05);
}
.contentTypeBook .articleBody > ol {
  counter-reset: booktoc;
}
.contentTypeBook .articleBody > ol > li {
  counter-increment: booktoc;
  padding-right: 42px;
}
.contentTypeBook .articleBody > ol > li::before {
  content: counter(booktoc, decimal-leading-zero);
  position: absolute;
  top: .92em;
  right: 0;
  min-width: 28px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 760;
  text-align: right;
}
.contentTypeBook .articleBody > ul > li > a,
.contentTypeBook .articleBody > ol > li > a {
  display: inline-block;
  color: #27211d;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.contentTypeBook .articleBody > ul > li > a:hover,
.contentTypeBook .articleBody > ul > li > a:focus-visible,
.contentTypeBook .articleBody > ol > li > a:hover,
.contentTypeBook .articleBody > ol > li > a:focus-visible {
  color: var(--accent);
  border-bottom-color: rgba(25,24,23,.28);
  transform: translateX(-2px);
  outline: none;
}
.contentTypeBook .articleBody > ul ul,
.contentTypeBook .articleBody > ul ol,
.contentTypeBook .articleBody > ol ul,
.contentTypeBook .articleBody > ol ol {
  margin: 10px 0 6px;
  padding-right: 1.25em;
  list-style: disc;
}
.contentTypeBook .articleBody > ul ul li,
.contentTypeBook .articleBody > ul ol li,
.contentTypeBook .articleBody > ol ul li,
.contentTypeBook .articleBody > ol ol li {
  padding: 4px 0;
  border: 0;
}
.contentTypeBook .articleBody .soundcloudPlayer,
.contentTypeBook .articleBody .videoEmbed {
  margin: 1.6em 0 2.1em;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(25,24,23,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(247,244,239,.92));
}

.articleEnd {
  margin-top: 68px;
  padding-top: 36px;
  border-top: 1px solid rgba(25,24,23,.14);
  position: relative;
}
.articleEndMark {
  width: 170px;
  height: 66px;
  position: absolute;
  top: -31px;
  left: -24px;
  background-image: var(--season-art);
  background-position: center;
  background-size: cover;
  mix-blend-mode: multiply;
  opacity: .22;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.articleEnd p { font-size: 21px; font-weight: 800; margin: 0 0 22px; }
.articleActions { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.articleActions a { color: var(--accent); font-size: 13px; font-weight: 650; }
.articleSiteFooter { border-top: 1px solid rgba(25,24,23,.13); }

/* Let each season alter the emotional field of the reading page without
   changing the typography or reading measure. */
.season-spring .articleHeroSeasonArt { opacity: .72; }
.season-autumn .articleHeroSeasonArt { opacity: .76; }
.season-winter .articleHeroSeasonArt { filter: grayscale(100%) contrast(1.12); opacity: .60; }
.season-summer .articleHeroSeasonArt { opacity: .58; background-size: cover; }

@media (max-width: 900px) {
  .articleHero { grid-template-columns: 1fr; grid-template-areas: "title" "art"; gap: 18px; min-height: auto; padding-block: 28px 44px; direction: rtl; }
  .articleTitleBlock { order: initial; justify-self: stretch; width: 100%; text-align: right; }
  .articleMeta, .articlePath { justify-content: flex-start; text-align: right; }
  .articleHeroArt { order: initial; min-height: 190px; width: min(100%, 430px); justify-self: center; margin-inline: auto; }
  .articleHeroImageFrame { padding: 12px; }
  .articleHeroImage { height: 220px; }
  .articleHeroSeasonArt { height: 190px; opacity: .56; }
  .articleTitleBlock h1 { font-size: clamp(30px, 6vw, 42px); }
  .articleCanvas { grid-template-columns: 1fr; gap: 35px; padding-block: 46px 78px; }
  .articleRail {
    position: static;
    grid-template-columns: 58px repeat(3, minmax(0, 1fr));
    gap: 0 18px;
    align-items: start;
    border-bottom: 1px solid rgba(25,24,23,.12);
    padding-bottom: 22px;
  }
  .railLogo { width: 58px; height: 58px; margin: 0; }
  .railItem { padding: 3px 0; border-top: 0; }
  .sourceLink { grid-column: 2 / -1; margin-top: 13px; }
  .articleReadingColumn { width: min(100%, 760px); margin-inline: auto; }
}

@media (max-width: 560px) {
  .articleHero { padding-top: 16px; }
  .articleEyebrow { margin-bottom: 14px; }
  .articleTitleBlock h1 { font-size: 31px; line-height: 1.48; }
  .articleCreator { font-size: 20px; }
  .articleMeta { gap: 8px 18px; margin-top: 17px; }
  .articlePath { margin-top: 7px; font-size: 12px; }
  .articleHeroArt { min-height: 140px; }
  .articleHeroSeasonArt { height: 140px; }
  .frameOrnament { width: 54px; height: 54px; }
  .frameOrnamentTop::before, .frameOrnamentBottom::before { width: 40px; }
  .frameOrnamentTop::after, .frameOrnamentBottom::after { height: 40px; }
  .articleCanvas { padding-top: 32px; }
  .articleRail { grid-template-columns: 48px 1fr 1fr; gap: 12px; }
  .railLogo { width: 48px; height: 48px; }
  .railItem:nth-of-type(n+3) { display: none; }
  .sourceLink { grid-column: 1 / -1; }
  .articleBody { font-size: 20px; line-height: 2.08; }
  .contentTypePoem .articleBody { font-size: 21px; line-height: 1.70; }
  .articleBody h3 { font-size: 21px; }
  .articleFeaturedImage { margin-bottom: 32px; }
  .articleEnd { margin-top: 48px; }
}

.notFound {
  min-height: calc(100vh - 96px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding-block: 60px;
}
.notFoundArt {
  height: 420px;
  background: var(--season-art) center / contain no-repeat;
  mix-blend-mode: multiply;
  opacity: .65;
  mask-image: radial-gradient(ellipse at center, #000 55%, transparent 96%);
}
.notFound img { border-radius: 50%; object-fit: contain; }
.notFound h1 { font-size: clamp(42px, 6vw, 74px); }
.notFound p:not(.articleEyebrow) { line-height: 2; color: #625e58; }
@media (max-width: 760px) {
  .notFound { grid-template-columns: 1fr; min-height: auto; gap: 10px; }
  .notFoundArt { height: 210px; order: 2; }
}

/* Smart media frames: preserve the complete source image without changing the
   established frame proportions. A soft monochrome copy fills unused space
   behind the contained foreground image, so portraits and unusual aspect
   ratios no longer lose heads/faces to object-fit: cover. */
.smartMedia {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 88%, var(--ink));
  isolation: isolate;
}
.smartMediaBackdrop,
.smartMediaPrimary {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.smartMediaBackdrop {
  z-index: 0;
  object-fit: cover;
  transform: scale(1.09);
  filter: grayscale(100%) blur(15px) contrast(.92);
  opacity: .20;
}
.smartMediaPrimary {
  z-index: 1;
  object-fit: contain;
  object-position: center;
  filter: grayscale(100%) contrast(1.04);
}
.articleSmartMedia { height: clamp(230px, 23vw, 315px); }
.articleSmartMedia .smartMediaBackdrop { opacity: .14; }
.articleSmartMedia .smartMediaPrimary { padding: 2px; }

/* ==========================================================================
   Homepage / Special feature — ویژه‌نامه
   ========================================================================== */

/* Homepage masthead: mechanical typewriter treatment.
   Only the bilingual site title is affected; reading typography stays XB Niloofar. */
.hero .brandLockup > div {
  width: min(430px, 100%);
  min-width: 0;
}
.hero .brandLockup h1 {
  font-family: "Far Mashin Tahrir", "XB Niloofar", Tahoma, serif;
  font-size: 34px;
  line-height: 1.5;
  font-weight: 400;
  direction: rtl;
  text-align: right;
  margin: 0 0 7px;
  text-shadow: .22px 0 currentColor;
}
.hero .englishName {
  font-family: "Courier New", Courier, "Nimbus Mono PS", "Liberation Mono", monospace;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.45;
  font-weight: 400;
  direction: ltr;
  text-align: left;
  letter-spacing: .025em;
  color: color-mix(in srgb, var(--ink) 72%, var(--accent));
  opacity: .88;
  font-variant-ligatures: none;
  text-shadow: .18px 0 currentColor;
}

/* Homepage introduction: Persian mechanical typewriter face.
   This changes only the manifesto beneath the bilingual title. */
.hero .manifesto {
  font-family: "Far Mashin Tahrir", "XB Niloofar", Tahoma, serif;
  font-weight: 400;
  text-shadow: .16px 0 currentColor;
}

.featureSection { overflow: visible; }
.featureShowcase { display: grid; gap: 28px; }
.featureSlider {
  position: relative;
  width: 100%;
  border-top: 1px solid rgba(25,24,23,.16);
  border-bottom: 1px solid rgba(25,24,23,.16);
  background: rgba(255,255,255,.10);
}
.featureSlide {
  min-height: 390px;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
  grid-template-areas: "visual copy";
  direction: ltr;
  align-items: stretch;
}
.featureVisual {
  grid-area: visual;
  min-height: 390px;
  position: relative;
  overflow: hidden;
  background: rgba(25,24,23,.07);
}
.featureVisual .smartMedia { min-height: 390px; }
.featureVisual .smartMediaPrimary {
  min-height: 390px;
  transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.featureVisual:hover .smartMediaPrimary { transform: scale(1.012); filter: grayscale(100%) contrast(1.09); }
.featureVisualFallback {
  position: absolute;
  inset: 0;
  background-image: var(--season-art);
  background-position: center;
  background-size: cover;
  filter: grayscale(100%) contrast(1.04);
  opacity: .48;
  mix-blend-mode: multiply;
}
.featureVisualTrace {
  position: absolute;
  width: 120px;
  height: 120px;
  inset: auto -36px -42px auto;
  background-image: var(--season-art);
  background-size: 280px;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: .46;
  border-radius: 48% 52% 45% 55%;
  pointer-events: none;
}
.featureCopy {
  grid-area: copy;
  direction: rtl;
  text-align: right;
  padding: clamp(34px, 4.5vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  position: relative;
}
.featureCopy::before {
  content: "";
  position: absolute;
  right: 0;
  top: 15%;
  bottom: 15%;
  width: 2px;
  background: linear-gradient(transparent, var(--accent) 18%, var(--accent) 82%, transparent);
  opacity: .72;
}
.featureTopline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  margin-bottom: 28px;
  font-size: 12px;
  color: #736e67;
}
.featureCount { font-family: Georgia, serif; direction: ltr; color: var(--accent); letter-spacing: .06em; }
.featureTopics b { color: var(--ink); font-weight: 650; }
.featureCopy h3 {
  margin: 0;
  max-width: 510px;
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.58;
  font-weight: 400;
}
.featurePoet { margin: 12px 0 0; color: var(--accent); font-size: 18px; }
.featureExcerpt {
  margin: 26px 0 0;
  color: #4e4943;
  font-size: 16px;
  line-height: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featureRead {
  margin-top: 30px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.featureRead svg,
.featurePoemArrow svg,
.featureBrowseIcon svg,
.featureControls svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.featureControls {
  position: absolute;
  inset: auto 22px 18px auto;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  direction: ltr;
}
.featureControls > button {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid rgba(25,24,23,.18);
  background: rgba(239,237,231,.82);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.featureControls > button:hover { border-color: var(--accent); color: var(--accent); background: var(--paper); }
.featureDots {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 0 4px;
  max-width: min(42vw, 330px);
  overflow-x: auto;
  scrollbar-width: none;
}
.featureDots::-webkit-scrollbar { display: none; }
.featureDots button {
  width: 5px;
  height: 5px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(25,24,23,.25);
  cursor: pointer;
}
.featureDots button.active { width: 17px; border-radius: 999px; background: var(--accent); }

.featurePoemList {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(25,24,23,.13);
  border-bottom: 1px solid rgba(25,24,23,.13);
}
.featurePoemItem {
  min-height: 108px;
  padding: 18px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 18px;
  gap: 11px;
  align-items: start;
  position: relative;
}
.featurePoemItem:not(:nth-child(5n + 1)) { border-right: 1px solid rgba(25,24,23,.10); }
.featurePoemItem:nth-child(n + 6) { border-top: 1px solid rgba(25,24,23,.10); }
.featurePoemNumber {
  font-family: Georgia, serif;
  font-size: 10px;
  color: var(--accent);
  padding-top: 5px;
  direction: ltr;
}
.featurePoemText { display: grid; gap: 4px; min-width: 0; }
.featurePoemText strong {
  font-size: 15px;
  line-height: 1.7;
  font-weight: 650;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.featurePoemText small { color: #77716a; font-size: 11px; line-height: 1.7; }
.featurePoemArrow {
  color: rgba(25,24,23,.28);
  align-self: center;
  transition: transform .2s ease, color .2s ease;
}
.featurePoemItem:hover .featurePoemArrow { transform: translateX(-3px); color: var(--accent); }
.featurePoemItem:hover .featurePoemText strong { color: var(--accent); }

.featureBrowseWrap { display: flex; justify-content: flex-end; }
.featureBrowse {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.featureBrowseIcon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  transition: background .2s ease, color .2s ease;
}
.featureBrowse:hover .featureBrowseIcon { background: var(--accent); color: var(--paper); }
.featureBrowse > span:last-child { display: grid; gap: 1px; }
.featureBrowse strong { font-size: 14px; }
.featureBrowse small { font-size: 10px; color: #7a746d; }

@media (max-width: 1000px) {
  .featureSlide { grid-template-columns: minmax(0, 1fr) minmax(310px, .88fr); }
  .featurePoemList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featurePoemItem:not(:nth-child(5n + 1)) { border-right: 0; }
  .featurePoemItem:nth-child(n + 6) { border-top: 0; }
  .featurePoemItem:nth-child(even) { border-right: 1px solid rgba(25,24,23,.10); }
  .featurePoemItem:nth-child(n + 3) { border-top: 1px solid rgba(25,24,23,.10); }
}

@media (max-width: 760px) {
  .hero h1 { font-size: 30px; }
  .featureSlide {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-areas: "visual" "copy";
  }
  .featureVisual, .featureVisual .smartMedia, .featureVisual .smartMediaPrimary { min-height: 260px; height: 260px; }
  .featureCopy { padding: 28px 24px 68px; }
  .featureCopy::before { top: 0; bottom: auto; left: 10%; right: 10%; width: auto; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
  .featureCopy h3 { font-size: 27px; }
  .featureExcerpt { font-size: 15px; margin-top: 18px; }
  .featureTopline { margin-bottom: 18px; }
  .featureControls { inset: auto 20px 18px auto; }
}

@media (max-width: 520px) {
  .hero h1 { font-size: 28px; }
  .featurePoemList { grid-template-columns: 1fr; }
  .featurePoemItem:nth-child(even) { border-right: 0; }
  .featurePoemItem:nth-child(n + 2) { border-top: 1px solid rgba(25,24,23,.10); }
  .featureVisual, .featureVisual .smartMedia, .featureVisual .smartMediaPrimary { min-height: 220px; height: 220px; }
  .featureCopy h3 { font-size: 24px; }
  .featureTopline { align-items: flex-start; flex-direction: column; }
}

/* ==========================================================================
   Headless WordPress shell: monthly grids, archive and special-issue pages
   ========================================================================== */

/* Monthly config can contain 5, 10, 15, 20 or more people without changing
   the component. Cards keep a humane minimum width and wrap naturally. */
.monthlyPortraitGrid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.monthlyPortraitGrid .portraitFrame { aspect-ratio: 1 / 1; }
.monthlyPortraitGrid .portraitFrame img { width:100%; height:100%; object-fit:cover; }

.archiveHero {
  min-height: 250px;
  padding-block: 48px 54px;
  border-bottom: 1px solid rgba(25,24,23,.14);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: flex-end;
  gap: 50px;
  direction: rtl;
}
.archiveHero > div:first-child { max-width: 760px; }
.archiveEyebrow {
  margin: 0 0 13px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.archiveHero h1 {
  margin: 0;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.55;
  font-weight: 400;
}
.archiveHero p:not(.archiveEyebrow) {
  margin: 15px 0 0;
  color: #625e58;
  font-size: 15px;
  line-height: 2;
}
.archiveHeroMark {
  height: 145px;
  background: var(--season-art) center / contain no-repeat;
  mix-blend-mode: multiply;
  opacity: .42;
  mask-image: radial-gradient(ellipse 82% 78% at center, #000 48%, transparent 96%);
}
.specialHero .archiveHeroMark { opacity: .58; }
.specialSliderSection { padding-top: 50px; }

.archiveSection { padding-top: 48px; }
.archiveSectionHeader {
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 25px;
}
.archiveSectionHeader h2 { margin:0; font-size:28px; font-weight:400; }
.archiveSectionHeader span { color:#827c75; font-size:12px; }
.archiveGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(30px, 5vw, 72px);
  row-gap: 0;
  border-top: 1px solid rgba(25,24,23,.14);
}
.archiveCard {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(25,24,23,.13);
  min-width: 0;
  direction: rtl;
}
.archiveImage {
  height: 156px;
  overflow: hidden;
  display:block;
  position:relative;
  background: rgba(25,24,23,.06);
}
.archiveImage img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(100%) contrast(1.04);
  transition: transform .45s ease, filter .25s ease;
}
.archiveCard:hover .archiveImage img { transform:scale(1.025); filter:grayscale(100%) contrast(1.11); }
.archiveImageFallback {
  position:absolute; inset:0;
  background: var(--season-art) center / cover no-repeat;
  mix-blend-mode:multiply;
  opacity:.22;
  filter:grayscale(100%);
}
.archiveCardBody { min-width:0; }
.archiveMeta { display:flex; flex-wrap:wrap; gap:7px 11px; color:var(--accent); font-size:10px; min-height:18px; }
.archiveMeta span + span::before { content:"•"; color:#aaa49c; margin-left:8px; }
.archiveCard h2 { margin:8px 0 5px; font-size:21px; line-height:1.65; font-weight:400; }
.archiveAuthor { margin:0 0 9px; color:var(--accent); font-size:13px; }
.archiveExcerpt {
  margin:0;
  color:#5a554f;
  font-size:13px;
  line-height:1.9;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.archiveRead { margin-top:13px; display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-size:11px; }
.archiveRead svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.archiveStatic { max-width: 790px; margin-inline:auto; padding-block: 18px 50px; }
.archiveEmpty { min-height:240px; display:grid; place-items:center; color:#716c65; }

.pagination {
  display:grid;
  grid-template-columns: 90px 1fr 90px;
  align-items:center;
  gap:16px;
  margin-top:42px;
  padding-top:22px;
  border-top:1px solid rgba(25,24,23,.12);
  font-size:12px;
  color:#68635d;
}
.pagination > div { display:flex; justify-content:center; align-items:center; gap:5px; direction:ltr; }
.pagination > div span { display:flex; align-items:center; gap:5px; }
.pagination a { min-width:31px; height:31px; display:grid; place-items:center; border-radius:50%; }
.pagination a.active { background:var(--accent); color:var(--paper); }
.pagination i { font-style:normal; color:#aaa49c; }

@media (max-width: 980px) {
  .archiveGrid { grid-template-columns: 1fr; }
  .archiveCard { grid-template-columns: 170px minmax(0,1fr); }
}

@media (max-width: 700px) {
  /* Fast 27: keep archive/special hero copy and seasonal mark on one row. */
  .archiveHero {
    grid-template-columns: minmax(0, 1fr) clamp(78px, 26vw, 120px);
    gap: clamp(12px, 4vw, 20px);
    align-items: center;
    padding-block: 30px 38px;
  }
  .archiveHero > div:first-child { min-width: 0; }
  .archiveHeroMark {
    width: 100%;
    height: 82px;
    justify-self: stretch;
    align-self: center;
  }
  .archiveCard { grid-template-columns: 105px minmax(0,1fr); gap:16px; padding:22px 0; }
  .archiveImage { height:118px; }
  .archiveCard h2 { font-size:18px; }
  .archiveExcerpt { -webkit-line-clamp:3; font-size:12px; }
  .archiveSectionHeader { align-items:flex-start; flex-direction:column; gap:5px; }
  .pagination { grid-template-columns:60px 1fr 60px; }
  .monthlyPortraitGrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ==========================================================================
   Draft 10 — editorial listings inspired by PTC + Lyrikline
   ========================================================================== */

/* Special issue: a quiet card field after the full-width feature slider.
   Cards borrow PTC's clear visual hierarchy but keep our monochrome/seasonal
   identity rather than imitating its palette. */

/* --------------------------------------------------------------------------
   Archive search and filters
   Fast 25: collapsed by default so the archive content stays visually primary.
   -------------------------------------------------------------------------- */
.archiveFilters {
  margin: 0 0 42px;
  border-top: 1px solid rgba(25,24,23,.14);
  border-bottom: 1px solid rgba(25,24,23,.14);
  direction: rtl;
}
.archiveFiltersToggle {
  list-style: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0 12px;
  cursor: pointer;
  color: #6f6a63;
  user-select: none;
  transition: color .18s ease;
}
.archiveFiltersToggle::-webkit-details-marker { display: none; }
.archiveFiltersToggle::marker { content: ""; }
.archiveFiltersToggle:hover,
.archiveFilters[open] > .archiveFiltersToggle { color: var(--ink); }
.archiveFiltersToggleLabel {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
}
.archiveFiltersActiveDot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(25,24,23,.24);
  flex: 0 0 auto;
}
.archiveFilters.hasActiveFilters .archiveFiltersActiveDot { background: var(--accent); }
.archiveFilters.hasActiveFilters .archiveFiltersToggleLabel { color: var(--ink); }
.archiveFiltersToggleMeta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}
.archiveFiltersToggleMeta small {
  color: #8b857d;
  font-size: 11px;
  white-space: nowrap;
}
.archiveFiltersToggleIcon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.archiveFiltersToggleIcon::before,
.archiveFiltersToggleIcon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .18s ease, opacity .18s ease;
}
.archiveFiltersToggleIcon::before { width: 11px; height: 1px; }
.archiveFiltersToggleIcon::after { width: 1px; height: 11px; }
.archiveFilters[open] .archiveFiltersToggleIcon::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}
.archiveFiltersBody {
  padding: 21px 0 28px;
  border-top: 1px solid rgba(25,24,23,.08);
}
.archiveFiltersIntro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.filterKicker {
  display: block;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.archiveFiltersIntro h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 400;
}
.filterCount {
  color: #77716a;
  font-size: 12px;
  white-space: nowrap;
}
.archiveFilterGrid {
  display: grid;
  grid-template-columns: minmax(210px, 1.35fr) repeat(3, minmax(150px, 1fr));
  gap: 18px 22px;
}
.archiveFilterField {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.archiveFilterFieldWide { grid-column: auto; }
.archiveFilterField > span {
  color: #77716a;
  font-size: 11px;
}
.archiveFilterField input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(25,24,23,.20);
  background: transparent;
  color: var(--ink);
  padding: 8px 0 9px;
  outline: none;
  font-size: 15px;
  direction: rtl;
  border-radius: 0;
  transition: border-color .18s ease, padding-right .18s ease;
}
.archiveFilterField input::placeholder { color: #aaa49b; opacity: 1; }
.archiveFilterField input:focus {
  border-color: var(--accent);
  padding-right: 5px;
}
.archiveFilterActions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
}
.archiveFilterSubmit {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  min-width: 104px;
  padding: 9px 18px 10px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.archiveFilterSubmit:hover {
  background: transparent;
  color: var(--accent);
}
.archiveFilterReset {
  color: #6f6a63;
  font-size: 12px;
  border-bottom: 1px solid rgba(25,24,23,.22);
  padding-bottom: 2px;
}
.archiveFilterReset:hover { color: var(--accent); border-color: var(--accent); }
.archiveEmpty {
  min-height: 180px;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 8px;
  color: #77716a;
  border-top: 1px solid rgba(25,24,23,.12);
  border-bottom: 1px solid rgba(25,24,23,.12);
}
.archiveEmpty strong { color: var(--ink); font-size: 20px; font-weight: 400; }
.archiveEmpty span { font-size: 13px; }

@media (max-width: 900px) {
  .archiveFilterGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archiveFilterFieldWide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .archiveFilters { margin-bottom: 30px; }
  .archiveFiltersToggle { min-height: 46px; gap: 12px; }
  .archiveFiltersToggleMeta { gap: 9px; }
  .archiveFiltersToggleMeta small { font-size: 10px; }
  .archiveFiltersBody { padding: 18px 0 24px; }
  .archiveFiltersIntro { align-items: start; }
  .archiveFilterGrid { grid-template-columns: 1fr; gap: 15px; }
  .archiveFilterFieldWide { grid-column: auto; }
  .archiveFilterActions { justify-content: space-between; }
}

.specialCardGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 42px) clamp(20px, 2.8vw, 34px);
}
.specialIssueCard {
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(25,24,23,.12);
  transition: transform .28s ease, border-color .28s ease, background .28s ease;
}
.specialIssueCard::after {
  content: "";
  position: absolute;
  inset: auto 18px 0 18px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .32s cubic-bezier(.2,.75,.2,1);
}
.specialIssueCard:hover {
  transform: translateY(-4px);
  border-color: rgba(25,24,23,.22);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
}
.specialIssueCard:hover::after { transform: scaleX(1); }

.specialCardImage,
.archiveListImage {
  position: relative;
  display: block;
  isolation: isolate;
}
.specialCardImage {
  margin: 14px 14px 0;
  aspect-ratio: 4 / 3;
}
.listingImageInner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: rgba(25,24,23,.055);
}
.listingImageInner .smartMedia { width:100%; height:100%; }
.listingImageInner .smartMediaPrimary {
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .25s ease;
}
.specialIssueCard:hover .listingImageInner .smartMediaPrimary,
.archiveListItem:hover .listingImageInner .smartMediaPrimary {
  transform: scale(1.018);
  filter: grayscale(100%) contrast(1.12);
}
.listingImageCorner {
  position: absolute;
  z-index: 2;
  width: 30px;
  height: 30px;
  pointer-events: none;
  opacity: .7;
  transition: width .28s ease, height .28s ease, opacity .28s ease;
}
.listingImageCorner::before,
.listingImageCorner::after {
  content: "";
  position: absolute;
  background: var(--accent);
}
.listingImageCorner.cornerTop { top: -5px; right: -5px; }
.listingImageCorner.cornerTop::before { top:0; right:0; width:100%; height:1px; }
.listingImageCorner.cornerTop::after { top:0; right:0; width:1px; height:100%; }
.listingImageCorner.cornerBottom { bottom: -5px; left: -5px; }
.listingImageCorner.cornerBottom::before { bottom:0; left:0; width:100%; height:1px; }
.listingImageCorner.cornerBottom::after { bottom:0; left:0; width:1px; height:100%; }
.specialIssueCard:hover .listingImageCorner,
.archiveListItem:hover .listingImageCorner { width: 40px; height: 40px; opacity: .95; }

.specialCardBody {
  padding: 23px 22px 25px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.specialCardMeta { min-height: 17px; margin-bottom: 7px; }
.specialIssueCard h2 {
  margin: 0;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.75;
  font-weight: 400;
}
.specialIssueCard h2 a { transition: color .2s ease; }
.specialIssueCard:hover h2 a { color: var(--accent); }
.specialIssueCard .archiveAuthor { margin-top: 7px; }
.specialCardExcerpt {
  margin-top: 13px;
  line-height: 2;
  -webkit-line-clamp: 3;
}
.specialCardRead {
  margin-top: auto;
  padding-top: 19px;
  width: fit-content;
}


/* Archive metadata is intentionally split into distinct semantic lines.
   Poet/author and taxonomy labels never share an undifferentiated line. */
.archiveMetaLine {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  direction: rtl;
  text-align: right;
}
.archiveMetaLine span + span::before { content: none; margin: 0; }
.archiveMetaLabel {
  color: #77716a;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}
.archiveTagValues {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px 7px;
  color: #625d56;
  font-size: 12px;
}
.archiveTagValue {
  display: inline-flex;
  gap: 7px;
  align-items: baseline;
}
.archiveTagValue i {
  color: color-mix(in srgb, var(--accent) 70%, #77716a);
  font-family: Georgia, serif;
  font-style: normal;
  opacity: .68;
}
.specialIssueCard .archiveAuthor.archiveMetaLine,
.archiveListItem .archiveAuthor.archiveMetaLine {
  color: var(--accent);
  margin: 8px 0 3px;
}
.specialCardMeta.archiveMetaLine,
.archiveListMeta.archiveMetaLine {
  margin: 0 0 10px;
}

/* Generic archive/menu listings: a more typographic, Lyrikline-inspired row.
   The content itself is the visual emphasis; frames separate rather than box. */
.archiveList {
  border-top: 1px solid rgba(25,24,23,.18);
}
.archiveListItem {
  position: relative;
  display: grid;
  grid-template-columns: 36px 174px minmax(0, 1fr) 42px;
  grid-template-areas: "number image copy arrow";
  direction: rtl;
  gap: clamp(18px, 2.7vw, 34px);
  align-items: center;
  padding: 31px 8px 31px 0;
  border-bottom: 1px solid rgba(25,24,23,.14);
  transition: background .24s ease, padding-right .24s ease;
}
.archiveListItem::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width .35s cubic-bezier(.2,.75,.2,1);
}
.archiveListItem:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  padding-right: 8px;
}
.archiveListItem:hover::before { width: min(190px, 24%); }
.archiveListNumber {
  grid-area: number;
  align-self: start;
  margin-top: 10px;
  font-family: Georgia, serif;
  direction: ltr;
  font-size: 10px;
  color: #9a948c;
}
.archiveListImage {
  grid-area: image;
  width: 174px;
  height: 132px;
}
.archiveListBody {
  grid-area: copy;
  min-width: 0;
  align-self: center;
}
.archiveListMeta {
  margin-bottom: 7px;
  min-height: auto;
}
.archiveListItem h2 {
  margin: 0;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.65;
  font-weight: 400;
  max-width: 800px;
}
.archiveListItem h2 a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.archiveListItem:hover h2 a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.archiveListItem .archiveAuthor {
  margin: 6px 0 8px;
  font-size: 14px;
}
.archiveListExcerpt {
  max-width: 820px;
  line-height: 1.95;
  -webkit-line-clamp: 2;
}
.archiveListArrow {
  grid-area: arrow;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(25,24,23,.17);
  border-radius: 50%;
  color: rgba(25,24,23,.5);
  transition: color .22s ease, border-color .22s ease, transform .22s ease, background .22s ease;
}
.archiveListArrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.archiveListItem:hover .archiveListArrow {
  color: var(--paper);
  border-color: var(--accent);
  background: var(--accent);
  transform: translateX(-3px);
}

/* Fallback season art inside missing thumbnails stays very quiet. */
.specialCardImage .archiveImageFallback,
.archiveListImage .archiveImageFallback {
  position: absolute;
  inset: 0;
  background: var(--season-art) center / cover no-repeat;
  filter: grayscale(100%) contrast(1.04);
  opacity: .19;
  mix-blend-mode: multiply;
}

@media (max-width: 980px) {
  .specialCardGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archiveListItem { grid-template-columns: 30px 150px minmax(0,1fr) 38px; }
  .archiveListImage { width:150px; height:116px; }
}

@media (max-width: 700px) {
  .specialCardGrid { grid-template-columns: 1fr; gap: 22px; }
  .specialCardImage { aspect-ratio: 16 / 10; }
  .archiveListItem {
    grid-template-columns: 96px minmax(0,1fr) 32px;
    grid-template-areas:
      "image copy arrow"
      "number copy arrow";
    gap: 13px 16px;
    align-items: start;
    padding: 23px 0;
  }
  .archiveListItem:hover { padding-right: 0; }
  .archiveListImage { width:96px; height:96px; }
  .archiveListNumber { margin:0; align-self:end; padding-right:3px; }
  .archiveListItem h2 { font-size: 19px; line-height:1.7; }
  .archiveListExcerpt { font-size:12px; -webkit-line-clamp:3; }
  .archiveListArrow { width:31px; height:31px; margin-top:3px; }
}

@media (max-width: 460px) {
  .archiveListItem {
    grid-template-columns: 78px minmax(0,1fr);
    grid-template-areas:
      "image copy"
      "number copy";
  }
  .archiveListImage { width:78px; height:86px; }
  .archiveListArrow { display:none; }
  .archiveListMeta { gap:5px 8px; }
  .archiveListMeta span:nth-child(n+3) { display:none; }
}

/* Draft 14: metadata readability fix — preserve the existing card/list design,
   but force author, categories and tags onto distinct, clearly separated rows. */
.archiveMetadataBlock {
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 7px 0 10px;
}
.archiveMetaRow {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px;
  align-items: baseline;
  width: 100%;
  direction: rtl;
  text-align: right;
  color: #625d56;
  font-size: 12px;
  line-height: 1.8;
}
.archiveMetaRowAccent .archiveMetaValues { color: var(--accent); }
.archiveMetaRow + .archiveMetaRow {
  border-top: 1px solid rgba(25,24,23,.085);
  padding-top: 4px;
  margin-top: 1px;
}
.archiveMetaValues {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 7px;
  min-width: 0;
}
.archiveMetaValue {
  display: inline-flex;
  gap: 7px;
  align-items: baseline;
}
.archiveMetaValue i {
  color: color-mix(in srgb, var(--accent) 68%, #77716a);
  font-family: Georgia, serif;
  font-style: normal;
  opacity: .72;
}
.specialCardMeta.archiveMetadataBlock,
.archiveListMeta.archiveMetadataBlock { min-height: 0; }

@media (max-width: 560px) {
  .archiveMetaRow { grid-template-columns: 1fr; gap: 0; }
}

/* Draft 17: poets.ir taxonomy semantics. Every listing uses four distinct
   metadata lines: poet, translator, folder/category, creators/tags. */
.archiveMetadataBlock { gap: 0; }
.archiveMetaRow { padding-block: 5px; }
.archiveMetaRow + .archiveMetaRow {
  border-top: 1px solid rgba(25,24,23,.11);
  margin-top: 0;
}
.archiveMetaLabel { font-weight: 700; color: #77716a; }
.archiveMetaRowAccent .archiveMetaLabel,
.archiveMetaRowAccent .archiveMetaValues { color: var(--accent); }


/* Draft 18: hover states stay within the active seasonal palette.
   The tint is intentionally quiet so the page remains a reading interface. */
.specialIssueCard:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
}
.archiveListItem:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}

/* Draft 25: balanced incomplete rows for monthly poets/translators.
   Five equal cards fill a desktop row; any remainder is centered. */
.monthlyPortraitGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.monthlyPortraitGrid > .portraitCard {
  flex: 0 0 calc((100% - 88px) / 5);
  max-width: calc((100% - 88px) / 5);
}

@media (max-width: 900px) {
  .monthlyPortraitGrid { gap: 17px; }
  .monthlyPortraitGrid > .portraitCard {
    flex-basis: calc((100% - 17px) / 2);
    max-width: calc((100% - 17px) / 2);
  }
}


/* ========================================================================== 
   Perceived loading / static-host transition
   --------------------------------------------------------------------------
   The static frontend fetches WordPress in the browser. We never show a
   literal loading message: the first paint is a quiet structural placeholder,
   and later route changes preserve the current page while data arrives.
   ========================================================================== */

#app { min-height: 100vh; position: relative; }
#app.isNavigating > .site,
#app.isNavigating > .notFoundPage {
  opacity: .72;
  transition: opacity .18s ease;
  pointer-events: none;
}
#app.isNavigating::before {
  content: "";
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  height: 2px;
  width: 38%;
  background: var(--accent, #9b948b);
  opacity: .72;
  transform-origin: right;
  animation: quietProgress 1.15s ease-in-out infinite alternate;
}
#app.routeEntered > * {
  animation: routeReveal .24s ease both;
}
@keyframes quietProgress {
  from { transform: scaleX(.18); opacity: .28; }
  to { transform: scaleX(1); opacity: .72; }
}
@keyframes routeReveal {
  from { opacity: .74; }
  to { opacity: 1; }
}


/* First paint: real brand identity, not an anonymous loading screen. */
.initialStaticSite {
  min-height: 100vh;
  --accent: #c65a2d;
  --accent-soft: #ead8ce;
  --secondary: #b79040;
  --ink: #191817;
  --paper: #efede7;
  --season-art: none;
}
.initialStaticHeader { border-bottom: 1px solid rgba(25,24,23,.065); }
.initialStaticNav a { pointer-events: auto; }
.initialMenuMark { display:none; font-size:22px; justify-self:start; }
.initialHomeFrame, .initialInnerFrame { display:none; }
html.initial-route-home .initialHomeFrame { display:block; }
html.initial-route-inner .initialInnerFrame { display:block; }
.initialRealHero { min-height:500px; }
.initialRealPainting { opacity:.9; }
.initialSeasonStamp { width:72px; height:1px; margin-top:28px; background:var(--accent); opacity:.72; }
.initialPreviewSection { padding-bottom:50px; }
.initialInnerHero { min-height:250px; }
.initialInnerPreview { display:grid; gap:18px; min-height:330px; }
.initialInnerLine {
  height:16px;
  width:100%;
  border-radius:2px;
  background:rgba(25,24,23,.055);
  overflow:hidden;
  position:relative;
}
.initialInnerLineShort { width:38%; }
.initialInnerLineMid { width:67%; }

html.initial-season-spring .initialStaticSite {
  --accent:#2B7868; --accent-soft:#DDEBE5; --paper:#F1F0EA;
  --season-art:url("../art/spring-source.jpeg");
}
html.initial-season-summer .initialStaticSite {
  --accent:#245D94; --accent-soft:#DFEAF3; --paper:#F3F1EC;
  --season-art:url("../art/summer-source.webp");
}
html.initial-season-autumn .initialStaticSite {
  --cover-ratio: 400 / 500;
  --accent:#C65C30; --accent-soft:#EEDDD3; --paper:#EFECE6;
  --season-art:url("../art/autumn-source.jpeg");
}
html.initial-season-winter .initialStaticSite {
  --cover-ratio: 374 / 521;
  --accent:#445A6A; --accent-soft:#E1E5E7; --paper:#EEEEEA;
  --season-art:url("../art/winter-source.jpeg");
}

/* Quiet content placeholders: they preserve layout and disappear section by
   section as WordPress answers. No text tells the visitor to wait. */
.homeAsyncSlot { min-width:0; }
.homeAsyncReady { animation: asyncSlotReveal .28s ease both; }
@keyframes asyncSlotReveal { from { opacity:.45; } to { opacity:1; } }
.homeSkeletonGrid { pointer-events:none; }
.homeSkeletonCard {
  min-height:190px;
  border:1px solid rgba(25,24,23,.08);
  padding:25px;
  display:grid;
  align-content:start;
  gap:14px;
  background:rgba(255,255,255,.06);
}
.homeSkeletonCard span,
.homeSkeletonCard i,
.homeFeatureMedia,
.homeFeatureCopy span,
.homeFeatureCopy i,
.homePodcastSkeleton span,
.homePodcastSkeleton i,
.homeEditorialSkeleton span,
.homeEditorialSkeleton i,
.initialInnerLine {
  display:block;
  background:rgba(25,24,23,.06);
  position:relative;
  overflow:hidden;
}
.homeSkeletonCard span { height:22px; width:68%; }
.homeSkeletonCard i { height:9px; width:92%; }
.homeSkeletonCard i:nth-child(3) { width:78%; }
.homeSkeletonCard i:nth-child(4) { width:54%; }
.homeFeatureSkeleton {
  min-height:390px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:34px;
  align-items:center;
  border:1px solid rgba(25,24,23,.07);
  padding:24px;
  background:rgba(255,255,255,.045);
}
.homeFeatureMedia { height:330px; }
.homeFeatureCopy { display:grid; gap:18px; }
.homeFeatureCopy span { height:30px; width:72%; }
.homeFeatureCopy i { height:10px; width:94%; }
.homeFeatureCopy i:nth-child(3) { width:80%; }
.homeFeatureCopy i:nth-child(4) { width:58%; }
.homePodcastSkeleton { display:grid; }
.homePodcastSkeleton > div { display:grid; grid-template-columns:42px 1fr; gap:14px; align-items:center; min-height:66px; border-bottom:1px solid rgba(25,24,23,.07); }
.homePodcastSkeleton span { width:34px; height:34px; border-radius:50%; }
.homePodcastSkeleton i { height:10px; width:68%; }
.homeEditorialSkeleton { display:grid; gap:16px; padding-top:8px; }
.homeEditorialSkeleton span { height:28px; width:58%; }
.homeEditorialSkeleton i { height:10px; width:96%; }
.homeEditorialSkeleton i:nth-child(3) { width:83%; }
.homeEditorialSkeleton i:nth-child(4) { width:61%; }
.homeQuietEmpty { color:#6d6861; opacity:.72; padding:18px 0; }

.homeSkeletonCard > *::after,
.homeFeatureMedia::after,
.homeFeatureCopy > *::after,
.homePodcastSkeleton span::after,
.homePodcastSkeleton i::after,
.homeEditorialSkeleton > *::after,
.initialInnerLine::after {
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(110%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation:skeletonDrift 2.2s ease-in-out infinite;
}
@keyframes skeletonDrift { to { transform:translateX(-110%); } }

@media (prefers-reduced-motion: reduce) {
  .homeSkeletonCard > *::after,
  .homeFeatureMedia::after,
  .homeFeatureCopy > *::after,
  .homePodcastSkeleton span::after,
  .homePodcastSkeleton i::after,
  .homeEditorialSkeleton > *::after,
  .initialInnerLine::after,
  #app.isNavigating::before,
  #app.routeEntered > *,
  .homeAsyncReady { animation:none !important; }
}
@media (max-width:900px) {
  .initialStaticHeader { grid-template-columns:64px 1fr 34px; min-height:78px; }
  .initialStaticNav { display:none; }
  .initialMenuMark { display:block; }
  .homeFeatureSkeleton { grid-template-columns:1fr; min-height:auto; }
  .homeFeatureMedia { height:250px; }
}
@media (max-width:560px) {
  .homeSkeletonGrid { grid-template-columns:1fr; }
  .homeSkeletonCard:nth-child(n+3) { display:none; }
  .homeFeatureSkeleton { padding:14px; }
  .homeFeatureMedia { height:190px; }
  .initialRealHero { min-height:auto; }
}

.portraitLateImage { opacity: 0; transition: opacity .28s ease, transform .25s ease; }
.portraitLateImage.isLoaded { opacity: 1; }


/* V3 fast-3: quiet infinite-scroll sentinel for the special issue. */
.specialInfiniteSentinel {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.specialInfiniteSentinel span {
  display: block;
  width: 44px;
  height: 2px;
  background: var(--accent);
  opacity: .18;
  transform-origin: center;
}
.specialInfiniteSentinel.isLoading span {
  animation: specialQuietLoad 1.15s ease-in-out infinite;
}
@keyframes specialQuietLoad {
  0%, 100% { opacity: .12; transform: scaleX(.55); }
  50% { opacity: .48; transform: scaleX(1); }
}

/* Poet/translator names are navigational taxonomy links throughout the site. */
.personLink {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.personLink:hover,
.personLink:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}
.personSeparator {
  color: color-mix(in srgb, var(--accent) 68%, #77716a);
  font-family: Georgia, serif;
  font-style: normal;
  opacity: .72;
  margin-inline: 7px;
}
.poemCardTitle { color: inherit; }
.featurePoemText strong > a { color: inherit; }
.featurePoemText small .personLink { color: inherit; }
.articleCreator .personLink { color: inherit; }
.articleMeta .personLink { color: inherit; }
.railItem .personLink { color: inherit; }


/* Typewriter masthead responsive tuning. */
@media (max-width: 900px) {
  .hero .brandLockup > div { width: min(390px, 100%); }
  .hero .brandLockup h1 { font-size: 34px; }
}
@media (max-width: 560px) {
  .hero .brandLockup > div { width: 100%; }
  .hero .brandLockup h1 { font-size: 31px; line-height: 1.5; }
  .hero .englishName { font-size: 12.5px; line-height: 1.5; }
}

/* ==========================================================================
   Fast 8 — Persian typewriter copy refinement
   ========================================================================== */
/* Slightly larger homepage introduction, retaining the same reading measure. */
.hero .manifesto {
  font-size: 21px;
  line-height: 2.12;
}

/* The recurring anthology motto now shares the Persian mechanical type face. */
.hero .blood,
.articleEnd p {
  font-family: "Far Mashin Tahrir", "XB Niloofar", Tahoma, serif;
  font-weight: 400;
  text-shadow: .18px 0 currentColor;
}

@media (max-width: 720px) {
  .hero .manifesto {
    font-size: 18px;
    line-height: 2.05;
  }
}


/* ========================================================================== 
   Fast 13 — true typewriter baseline + left-anchored motto
   ========================================================================== */
/* Use the SAME machine-type face for the dotted leader and the Persian copy.
   The leader is no longer clipped; JS supplies only as many dots as fit, which
   preserves the font's natural baseline. */
.hero .manifesto {
  overflow: visible;
}
.hero .manifestoCopy {
  display: inline;
}
.hero .manifestoDots {
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  vertical-align: baseline;
  position: static;
  overflow: visible;
  font-family: "Far Mashin Tahrir", "XB Niloofar", Tahoma, serif;
  font-size: 1em;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: .045em;
  color: color-mix(in srgb, var(--ink) 64%, var(--accent));
  opacity: .68;
  text-shadow: .12px 0 currentColor;
}

/* The motto is genuinely left aligned now: the phrase begins at the left edge
   and ALL manuscript dots live on its right side. */
.hero .blood {
  direction: ltr;
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: .38em;
  width: 100%;
}
.bloodCopy {
  direction: rtl;
  unicode-bidi: isolate;
  white-space: nowrap;
  justify-self: start;
}
.bloodSideRight {
  min-width: 0;
  display: flex;
  align-items: baseline;
  overflow: hidden;
  white-space: nowrap;
  font-family: "Far Mashin Tahrir", "XB Niloofar", Tahoma, serif;
  color: color-mix(in srgb, var(--ink) 67%, var(--accent));
}
.bloodRightFill {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: inherit;
  font-size: .78em;
  line-height: inherit;
  letter-spacing: .065em;
  opacity: .72;
}
.bloodLeadOpening {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 1.42em;
  line-height: .78;
  letter-spacing: .025em;
  color: var(--accent);
  text-shadow: .12px 0 currentColor;
  margin-left: .10em;
}

@media (max-width: 560px) {
  .hero .blood {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .24em;
  }
  .bloodLeadOpening { font-size: 1.32em; }
  .bloodRightFill { font-size: .70em; }
}


/* ========================================================================== 
   Fast 15 — circular route progress
   ========================================================================== */
/* The older top-edge progress trace is replaced by one compact circular cue. */
#app.isNavigating::before { content: none !important; animation: none !important; }

.routeProgress {
  --route-progress: 0;
  --route-progress-accent: #c65a2d;
  --route-progress-paper: #efede7;
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease, visibility 0s linear .14s;
}
.routeProgress.isVisible {
  opacity: 1;
  visibility: visible;
  transition: opacity .14s ease;
}
.routeProgressRing {
  width: 52px;
  height: 52px;
  padding: 3px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    from -90deg,
    var(--route-progress-accent) calc(var(--route-progress) * 1%),
    color-mix(in srgb, var(--route-progress-accent) 14%, transparent) 0
  );
  box-shadow: 0 7px 24px rgba(20, 18, 15, .08);
  transform: scale(.94);
  transition: transform .16s ease, background .12s linear, opacity .16s ease;
}
.routeProgress.isVisible .routeProgressRing { transform: scale(1); }
.routeProgressInner {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--route-progress-paper) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--route-progress-accent) 12%, transparent);
  backdrop-filter: blur(3px);
}
.routeProgressMark {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--route-progress-accent);
  opacity: .74;
}
.routeProgress.isComplete .routeProgressRing {
  transform: scale(1.04);
  opacity: .82;
}

@media (max-width: 560px) {
  .routeProgressRing { width: 46px; height: 46px; padding: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .routeProgress,
  .routeProgressRing { transition: none !important; }
}

/* ==========================================================================
   Fast 19 — mobile hero logo as a small moon-like mark
   --------------------------------------------------------------------------
   Desktop is intentionally unchanged. On mobile, the second/in-page logo is
   detached from the title lockup, reduced, and anchored to the physical left
   so it reads as a quiet mark overlooking the text instead of repeating the
   header brand beside the menu.
   ========================================================================== */
@media (max-width: 900px) {
  .hero .brandLockup {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }

  .hero .heroLogo {
    width: 50px;
    height: 50px;
    margin: 0 0 1px 0;
    margin-right: auto;
    margin-left: 0;
    opacity: .82;
    flex: none;
  }

  .hero .brandLockup > div {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .hero .heroLogo {
    width: 42px;
    height: 42px;
    margin-bottom: -1px;
    opacity: .78;
  }
}

/* ==========================================================================
   Fast 22 — native 1050×525 / 2:1 media treatment
   WordPress supplies the cropped derivative when available. The frontend then
   uses the same 2:1 geometry instead of blurring/letterboxing a full-size image.
   ========================================================================== */
.ratioMedia {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.ratioMediaImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%) contrast(1.04);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .25s ease;
}

/* The feature photograph itself is now a true 2:1 frame. */
.featureSlide {
  min-height: 0;
  align-items: center;
}
.featureVisual {
  min-height: 0;
  height: auto;
  aspect-ratio: 2 / 1;
  align-self: center;
  background: transparent;
}
.featureVisual .ratioMedia,
.featureVisual .ratioMediaImage {
  width: 100%;
  height: 100%;
}
.featureVisual:hover .ratioMediaImage {
  transform: scale(1.012);
  filter: grayscale(100%) contrast(1.09);
}

/* Special cards and archive thumbnails follow the same crop ratio. */
.specialCardImage {
  aspect-ratio: 2 / 1;
}
.listingImageInner .ratioMedia {
  width: 100%;
  height: 100%;
}
.specialIssueCard:hover .listingImageInner .ratioMediaImage,
.archiveListItem:hover .listingImageInner .ratioMediaImage {
  transform: scale(1.018);
  filter: grayscale(100%) contrast(1.12);
}
.archiveListImage {
  width: 180px;
  height: 90px;
}

/* Single-content featured image uses the same WordPress derivative and ratio. */
.articleHeroArt.hasFeaturedImage {
  min-height: 0;
}
.articleHeroImageFrame {
  aspect-ratio: 2 / 1;
  padding: 12px;
}
.articleRatioMedia {
  width: 100%;
  height: 100%;
}
.articleHeroImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 980px) {
  .archiveListImage { width: 150px; height: 75px; }
}

@media (max-width: 760px) {
  .featureVisual {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 2 / 1;
  }
  .featureVisual .ratioMedia,
  .featureVisual .ratioMediaImage { height: 100%; }
  .articleHeroArt.hasFeaturedImage { min-height: 0; }
  .articleHeroImage { height: 100%; }
}

@media (max-width: 700px) {
  .specialCardImage { aspect-ratio: 2 / 1; }
  .archiveListImage { width: 110px; height: 55px; }
}

@media (max-width: 520px) {
  .featureVisual {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 2 / 1;
  }
}

@media (max-width: 460px) {
  .archiveListImage { width: 92px; height: 46px; }
}

/* ==========================================================================
   Fast 22 — restore the original ornamental image framing on 2:1 media.
   The 1050×525 / 2:1 image-selection strategy from Fast 21 remains unchanged.
   ========================================================================== */

/* Slider: keep the photograph full-bleed inside its 2:1 slot, then draw the
   same restrained opposing-corner language used elsewhere in the site. */
.featureVisual {
  isolation: isolate;
}
.featureVisual::before,
.featureVisual::after {
  content: "";
  position: absolute;
  z-index: 4;
  width: 58px;
  height: 58px;
  pointer-events: none;
  opacity: .72;
  transition: width .28s ease, height .28s ease, opacity .28s ease;
}
.featureVisual::before {
  top: 12px;
  right: 12px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}
.featureVisual::after {
  bottom: 12px;
  left: 12px;
  border-bottom: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
}
.featureVisual:hover::before,
.featureVisual:hover::after {
  width: 72px;
  height: 72px;
  opacity: .95;
}

/* Special and archive thumbnails: explicitly preserve the original external
   corner marks around the new 2:1 frame. */
.specialCardImage,
.archiveListImage {
  overflow: visible;
}
.listingImageInner {
  overflow: hidden;
}
.listingImageCorner {
  display: block;
  z-index: 5;
}

/* Single-content image: reinforce the original paper/frame construction. */
.articleHeroImageFrame {
  position: relative;
  overflow: visible;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(25,24,23,.10);
  border-radius: 2px;
}
.articleHeroImageFrame::before,
.articleHeroImageFrame::after {
  display: block;
  z-index: 3;
}
.articleHeroImageFrame .frameOrnament {
  display: block;
  z-index: 5;
}

@media (max-width: 700px) {
  .featureVisual::before,
  .featureVisual::after {
    width: 42px;
    height: 42px;
    top: auto;
  }
  .featureVisual::before { top: 9px; right: 9px; }
  .featureVisual::after { bottom: 9px; left: 9px; }
  .featureVisual:hover::before,
  .featureVisual:hover::after { width: 52px; height: 52px; }
}

/* ========================================================================== 
   Fast 23 — single-content featured image frame only.
   Restrained asymmetric corner frame: no full decorative border, no paper
   mount, no changes to the 1050×525 / 2:1 image treatment elsewhere.
   ========================================================================== */
.articleHeroImageFrame {
  position: relative;
  overflow: visible;
  padding: 10px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Inner, shorter corner pair. */
.articleHeroImageFrame::before,
.articleHeroImageFrame::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
  display: block;
  opacity: .58;
  background: transparent;
}
.articleHeroImageFrame::before {
  top: 4px;
  right: 4px;
  left: auto;
  bottom: auto;
  width: 44px;
  height: 38px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 72%, var(--ink));
  border-right: 1px solid color-mix(in srgb, var(--accent) 72%, var(--ink));
  border-bottom: 0;
  border-left: 0;
}
.articleHeroImageFrame::after {
  left: 4px;
  bottom: 4px;
  top: auto;
  right: auto;
  width: 34px;
  height: 30px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 58%, var(--ink));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 58%, var(--ink));
  border-top: 0;
  border-right: 0;
}

/* Outer, longer corner pair. The unequal lengths create the selected
   asymmetric editorial frame without introducing ornament elsewhere. */
.articleHeroImageFrame .frameOrnament {
  position: absolute;
  z-index: 5;
  display: block;
  pointer-events: none;
  background: transparent;
  opacity: .78;
}
.articleHeroImageFrame .frameOrnament::before,
.articleHeroImageFrame .frameOrnament::after {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--accent) 78%, var(--ink));
}
.articleHeroImageFrame .frameOrnamentTop {
  top: -5px;
  right: -5px;
  width: 82px;
  height: 70px;
}
.articleHeroImageFrame .frameOrnamentTop::before {
  top: 0;
  right: 0;
  width: 82px;
  height: 1px;
}
.articleHeroImageFrame .frameOrnamentTop::after {
  top: 0;
  right: 0;
  width: 1px;
  height: 70px;
}
.articleHeroImageFrame .frameOrnamentBottom {
  left: -5px;
  bottom: -5px;
  width: 64px;
  height: 54px;
}
.articleHeroImageFrame .frameOrnamentBottom::before {
  left: 0;
  bottom: 0;
  width: 64px;
  height: 1px;
}
.articleHeroImageFrame .frameOrnamentBottom::after {
  left: 0;
  bottom: 0;
  width: 1px;
  height: 54px;
}

/* Keep the photograph itself untouched; only the surrounding frame changes. */
.articleHeroImageFrame .articleRatioMedia {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

@media (max-width: 700px) {
  .articleHeroImageFrame { padding: 8px; }
  .articleHeroImageFrame::before {
    top: 3px;
    right: 3px;
    width: 34px;
    height: 29px;
  }
  .articleHeroImageFrame::after {
    left: 3px;
    bottom: 3px;
    width: 27px;
    height: 23px;
  }
  .articleHeroImageFrame .frameOrnamentTop {
    top: -4px;
    right: -4px;
    width: 62px;
    height: 52px;
  }
  .articleHeroImageFrame .frameOrnamentTop::before { width: 62px; }
  .articleHeroImageFrame .frameOrnamentTop::after { height: 52px; }
  .articleHeroImageFrame .frameOrnamentBottom {
    left: -4px;
    bottom: -4px;
    width: 48px;
    height: 40px;
  }
  .articleHeroImageFrame .frameOrnamentBottom::before { width: 48px; }
  .articleHeroImageFrame .frameOrnamentBottom::after { height: 40px; }
}

/* ========================================================================== 
   Fast 24 — mobile archive/search readability only.
   Add breathing room between the listing thumbnail (including its external
   corner marks) and the title/metadata copy. Desktop/tablet remain unchanged.
   ========================================================================== */
@media (max-width: 700px) {
  .archiveListItem {
    column-gap: 24px;
  }
}

@media (max-width: 460px) {
  .archiveListItem {
    column-gap: 20px;
  }
}

/* ========================================================================== 
   Fast 26 — stronger mobile separation for archive/search result rows only.
   Keep thumbnail and copy visually distinct on phones without touching the
   desktop/tablet composition or thumbnail dimensions.
   ========================================================================== */
@media (max-width: 700px) {
  .archiveListItem {
    column-gap: 36px;
  }
  .archiveListBody {
    padding-inline-start: 10px;
  }
}

@media (max-width: 460px) {
  .archiveListItem {
    column-gap: 30px;
  }
  .archiveListBody {
    padding-inline-start: 8px;
  }
}


/* ==========================================================================
   Fast 29 — titleless literary hero experiment
   --------------------------------------------------------------------------
   Visual-only homepage change. The bilingual hero title is intentionally
   removed; the manifesto becomes the masthead voice. SEO metadata, footer
   identity, navigation, seasonal artwork and every non-home page stay intact.
   ========================================================================== */
.hero .heroText {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 48px;
}

.hero .heroIntroLockup {
  display: block;
  width: 100%;
  max-width: 650px;
}

.hero .heroIntroLockup .manifesto {
  max-width: none;
  margin: 0;
  padding-top: 4px;
}

.hero .heroTrailMark {
  position: relative;
  width: 100%;
  height: 74px;
  margin: 0 0 -36px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.hero .heroTrailMark::before {
  content: "";
  position: absolute;
  left: 22%;
  top: -4px;
  width: 448px;
  height: 152px;
  background-image: url("../art/snail-trail.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left top;
  opacity: .74;
  filter: grayscale(100%) brightness(.95) contrast(1.08);
}

/* Preserve the motto as the closing separator at the bottom of the hero. */
.hero .blood {
  position: relative;
  z-index: 1;
  margin-top: auto;
  margin-bottom: 8px;
  padding-top: 12px;
}

@media (max-width: 900px) {
  .hero .heroText {
    padding-top: 12px;
  }
  .hero .heroIntroLockup {
    max-width: none;
  }
  .hero .heroIntroLockup .manifesto {
    padding-top: 0;
  }
  .hero .heroTrailMark {
    width: 100%;
    height: 48px;
    margin: 0 0 -24px;
  }
  .hero .heroTrailMark::before {
    left: 15%;
    width: 286px;
    height: 100px;
    top: -4px;
    transform: none;
  }
  .hero .blood {
    margin-top: 18px;
    padding-top: 0;
    margin-bottom: 0;
  }
  .heroPainting {
    margin-top: 16px;
  }
}

@media (max-width: 560px) {
  .hero .heroTrailMark {
    width: 100%;
    height: 40px;
    margin: 0 0 -20px;
  }
  .hero .heroTrailMark::before {
    left: 12%;
    width: 238px;
    height: 82px;
    top: -2px;
    transform: none;
  }
  .hero .blood {
    margin-top: 22px;
    margin-bottom: 26px;
  }
  .heroPainting {
    margin-top: 26px;
  }
}


/* ============================================================
   Fast 30 Parastoo typography test
   Only single-page reading content and excerpt/blurb copy change.
   ============================================================ */
@font-face {
  font-family: "Parastoo Reading";
  src: url("/fonts/Parastoo.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Parastoo Reading";
  src: url("/fonts/Parastoo-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.articleBody,
.featureExcerpt,
.archiveExcerpt,
.poemCard > p:not(.poetName),
.editorialPanel p {
  font-family: "Parastoo Reading", "XB Niloofar", Tahoma, sans-serif;
}

/* Fast 53: use the real Parastoo Bold face for semantic emphasis.
   Weight synthesis is disabled so interviews render the supplied 700 face
   rather than a browser-manufactured approximation. */
.articleBody,
.featureExcerpt,
.archiveExcerpt,
.poemCard > p:not(.poetName),
.editorialPanel p { font-synthesis: style; }
.articleBody strong,
.articleBody b { font-weight: 700; }


/* ============================================================
   Fast 31 — Parastoo reading refinement
   Scope: single-entry body size + blurb alignment only.
   ============================================================ */

/* About 25% smaller than the previous single-entry reading size. */
.articleBody {
  font-size: clamp(15px, 1.0875vw, 17.25px);
}

.contentTypePoem .articleBody {
  font-size: clamp(15.75px, 1.2375vw, 18.75px);
}

/* Blurbs/excerpts remain fully justified with their final line anchored right. */
.featureExcerpt,
.archiveExcerpt,
.poemCard > p:not(.poetName),
.editorialPanel p {
  direction: rtl;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
}

@media (max-width: 560px) {
  .articleBody {
    font-size: 15px;
  }

  .contentTypePoem .articleBody {
    font-size: 15.75px;
  }
}


/* Fast 37: podcast-only SoundCloud exception to the minimal content sanitizer. */
.articleBody .bialty-container { width: 100%; margin: 1.2em 0; overflow: hidden; }
.articleBody .bialty-container iframe { display: block; width: 100%; max-width: 100%; border: 0; }


/* Fast 38: safe YouTube/Vimeo media exceptions. Arbitrary iframe hosts remain blocked. */
.articleBody .poesies-video-embed {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 1.35em 0;
  border: 0;
}


/* ============================================================
   Fast 43 — unified reading rhythm
   Poetry uses the same line-height ratio as prose. Verse-line
   separation is controlled structurally by the sanitizer; genuine
   stanza gaps remain explicit double breaks.
   ============================================================ */


/* Fast 45 — true single verse breaks + prose reading rhythm */
.contentTypePoem .articleBody { line-height: 2.12; }
.contentTypePoem .articleBody p { margin: 0; }
.contentTypePoem .articleBody br { line-height: inherit; }
@media (max-width: 560px) { .contentTypePoem .articleBody { line-height: 2.08; } }

/* ============================================================
   Fast 54 — tablet special-issue layout containment
   701–1100px keeps the two-column editorial composition, but
   explicitly contains card media and gives slider navigation its
   own centered row so it cannot collide with the read link.
   ============================================================ */
@media (min-width: 701px) and (max-width: 1100px) {
  /* Safari/tablet flex sizing can let the stretched media anchor visually
     outrun the card. Give it an explicit inset width instead. */
  .specialIssueCard .specialCardImage {
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
    margin: 14px auto 0;
    align-self: center;
    flex: 0 0 auto;
    box-sizing: border-box;
  }
  .specialIssueCard .listingImageInner,
  .specialIssueCard .listingImageInner .ratioMedia,
  .specialIssueCard .listingImageInner .ratioMediaImage {
    max-width: 100%;
  }

  /* Keep ornamental corners within the inset image area on tablets. */
  .specialIssueCard .listingImageCorner.cornerTop {
    top: 0;
    right: 0;
  }
  .specialIssueCard .listingImageCorner.cornerBottom {
    bottom: 0;
    left: 0;
  }

  /* Tablet slider controls: use a dedicated centered row rather than an
     absolute overlay inside the copy column. */
  .featureControls {
    position: static;
    inset: auto;
    width: 100%;
    justify-content: center;
    padding: 15px 20px 18px;
    margin: 0;
    border-top: 1px solid rgba(25,24,23,.10);
    background: rgba(255,255,255,.08);
    box-sizing: border-box;
  }
  .featureDots {
    max-width: min(38vw, 240px);
  }
  .featureRead {
    margin-top: 24px;
    margin-bottom: 4px;
  }
}


/* ==========================================================================
   Fast 71 — New-poem card framing prototype
   Visual experiment only: no markup/data changes. The goal is to make the
   four landing-page poem cards read as restrained printed poem sheets rather
   than generic bordered web cards.
   ========================================================================== */
.poemGrid .poemCard {
  padding: 29px 27px 62px;
  border-color: rgba(25,24,23,.16);
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

/* A short asymmetric editorial frame in the reading-side corner. */
.poemGrid .poemCard::before,
.poemGrid .poemCard::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--accent);
  opacity: .72;
}
.poemGrid .poemCard::before {
  width: 54px;
  height: 1px;
}
.poemGrid .poemCard::after {
  width: 1px;
  height: 58px;
}

/* Keep the seasonal fragment, but make it feel like a cropped print mark. */
.poemGrid .poemCard .paintCorner {
  width: 92px;
  height: 96px;
  top: -24px;
  left: -17px;
  background-size: 205px;
  background-position: 42% 38%;
  opacity: .34;
  transform: rotate(12deg);
  clip-path: polygon(0 0, 100% 0, 82% 76%, 26% 100%, 0 72%);
}

.poemGrid .poemCard h3 {
  margin: 0 0 9px;
  line-height: 1.55;
}

.poemGrid .poemCard .poetName {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.7;
}

.poemGrid .poemCard > p:not(.poetName) {
  margin: 0;
  line-height: 2.04;
}

/* Treat the CTA as a quiet footer rather than another line of card copy. */
.poemGrid .poemCard .readMore {
  right: 27px;
  bottom: 21px;
  line-height: 1.4;
}
.poemGrid .poemCard .readMore::before {
  content: "";
  position: absolute;
  width: 34px;
  height: 1px;
  right: 0;
  top: -11px;
  background: var(--accent);
  opacity: .42;
}

.poemGrid .poemCard:hover {
  transform: translateY(-2px);
  border-color: rgba(25,24,23,.25);
  background: rgba(255,255,255,.20);
}

@media (max-width: 560px) {
  .poemGrid .poemCard {
    padding: 25px 23px 58px;
  }
  .poemGrid .poemCard::before { width: 46px; }
  .poemGrid .poemCard::after { height: 50px; }
  .poemGrid .poemCard .readMore { right: 23px; }
}


/* ========================================================================== 
   Fast 72 — reversible Special Issue cover + identity hero prototype
   --------------------------------------------------------------------------
   Hero only. The current artwork becomes the entry point to the active
   Special Issue; manifesto, censored/silent leader and snail are composed as
   one editorial identity field. Everything below the hero remains Fast 71.
   ========================================================================== */
.heroCover {
  position: relative;
  align-self: center;
  justify-self: center;
  display: block;
  color: inherit;
  text-decoration: none;
  overflow: visible;
  outline-offset: 8px;
}
.heroCoverFrame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  isolation: isolate;
  line-height: 0;
}
.heroCover .heroPainting {
  display: block;
  width: auto;
  height: 420px;
  max-width: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  transition: opacity .28s ease, filter .28s ease, transform .28s ease;
}
.heroCoverFrame::before,
.heroCoverFrame::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 58px;
  height: 42px;
  pointer-events: none;
  opacity: .72;
  transition: width .28s ease, height .28s ease, opacity .28s ease;
}
.heroCoverFrame::before {
  top: -8px;
  right: -10px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 74%, var(--ink));
  border-right: 1px solid color-mix(in srgb, var(--accent) 74%, var(--ink));
}
.heroCoverFrame::after {
  bottom: -8px;
  left: -10px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 56%, var(--ink));
  border-left: 1px solid color-mix(in srgb, var(--accent) 56%, var(--ink));
  opacity: .45;
}
.heroCoverMeta {
  position: absolute;
  right: 0;
  bottom: -34px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  white-space: nowrap;
  direction: rtl;
  font-family: "Parastoo Reading", "XB Niloofar", Tahoma, serif;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .01em;
  opacity: .68;
  transition: opacity .25s ease;
}
.heroCoverLabel { color: var(--accent); }
.heroCoverTitle { color: color-mix(in srgb, var(--ink) 78%, var(--paper)); }
.heroCoverArrow {
  direction: ltr;
  color: var(--accent);
  transform: translateX(0);
  transition: transform .25s ease;
}
.heroCover:hover .heroPainting,
.heroCover:focus-visible .heroPainting {
  opacity: 1;
  filter: saturate(.9) contrast(1.06);
  transform: translateY(-1px);
}
.heroCover:hover .heroCoverFrame::before,
.heroCover:focus-visible .heroCoverFrame::before {
  width: 76px;
  height: 54px;
  opacity: .95;
}
.heroCover:hover .heroCoverMeta,
.heroCover:focus-visible .heroCoverMeta { opacity: 1; }
.heroCover:hover .heroCoverArrow,
.heroCover:focus-visible .heroCoverArrow { transform: translateX(-4px); }

@media (min-width: 901px) {
  .hero .heroText {
    position: relative;
    padding-top: 34px;
    padding-bottom: 18px;
  }
  .hero .heroIntroLockup {
    max-width: 610px;
    margin-inline-start: auto;
  }
  .hero .manifesto { line-height: 2.18; }
  /* The trail is now anchored to the motto baseline, so its far-right end
     enters the final portion of the censored dotted silence instead of
     floating as an unrelated illustration between the two texts. */
  .hero .heroTrailMark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    width: 100%;
    height: 172px;
    margin: 0;
    z-index: 2;
    pointer-events: none;
  }
  .hero .heroTrailMark::before {
    left: auto;
    right: 7%;
    top: auto;
    bottom: -3px;
    width: 472px;
    height: 162px;
    background-position: right bottom;
    opacity: .72;
  }
  .hero .blood {
    margin-top: auto;
    margin-bottom: 10px;
    padding-top: 0;
    z-index: 1;
  }
}

@media (max-width: 900px) {
  .heroCover {
    order: 2;
    margin-top: 16px;
    margin-bottom: 28px;
  }
  .heroCover .heroPainting {
    width: auto;
    height: 250px;
    max-width: 100%;
    margin: 0;
  }
  .heroCoverMeta {
    bottom: -28px;
    font-size: 11.5px;
  }
}

@media (max-width: 560px) {
  .heroCover { margin-top: 24px; margin-bottom: 30px; }
  .heroCover .heroPainting { height: 190px; }
  .heroCoverMeta { bottom: -27px; font-size: 11px; }
}


/* ==========================================================================
   Fast 75 — compact, vertically centered identity hero prototype
   --------------------------------------------------------------------------
   Desktop hero only. The manifesto, snail/trail and slogan are treated as one
   compact composition centered against the 420px cover artwork. Mobile/tablet
   stacking remains unchanged.
   ========================================================================== */
@media (min-width: 901px) {
  .hero .heroText {
    align-self: center;
    min-height: 420px;
    padding-top: 0;
    padding-bottom: 0;
    justify-content: center;
  }

  /* Bring the slogan materially closer to the manifesto while preserving the
     snail as the visual bridge between declaration and censored silence. */
  .hero .heroTrailMark {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 112px;
    margin: 2px 0 -26px;
    flex: 0 0 112px;
  }

  .hero .heroTrailMark::before {
    left: auto;
    right: 7%;
    top: auto;
    bottom: -10px;
    width: 472px;
    height: 162px;
  }

  .hero .blood {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
  }
}

/* ========================================================================== 
   Fast 84 — quiet architectural identity frame + larger manifesto
   --------------------------------------------------------------------------
   Homepage hero only. The manifesto / snail / censored slogan composition
   rests inside one low-contrast editorial field. The frame is intentionally
   simple and slightly asymmetric, with a single short seasonal accent stroke.
   It sits outside the existing layout box, so no hero geometry is moved.
   The 20% larger Fast 83 manifesto size is preserved.
   ========================================================================== */
.hero .heroText {
  position: relative;
  isolation: isolate;
}

/* One quiet hairline frame: architectural rather than decorative. */
.hero .heroText::before {
  content: "";
  position: absolute;
  inset: -16px -22px -14px -18px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--ink) 19%, var(--paper));
  border-radius: 2px;
  opacity: .78;
}

/* A single short accent rule gives the field identity without ornament. */
.hero .heroText::after {
  content: "";
  position: absolute;
  top: -16px;
  right: -22px;
  width: 68px;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--accent) 68%, var(--ink));
  opacity: .72;
}

/* Preserve the approved 20% larger manifesto size from Fast 83. */
.hero .manifesto {
  font-size: 25.2px;
}

@media (max-width: 900px) {
  .hero .heroText::before {
    inset: -10px -8px -9px -7px;
    opacity: .68;
  }
  .hero .heroText::after {
    top: -10px;
    right: -8px;
    width: 52px;
    opacity: .64;
  }
}

/* Fast 82 mobile baseline was 18px; keep the approved +20% size. */
@media (max-width: 720px) {
  .hero .manifesto {
    font-size: 21.6px;
  }
}


/* ========================================================================== 
   Fast 85 — homepage editorial rhythm prototype
   --------------------------------------------------------------------------
   Visual-only landing-page refinement. No content, archive, search, cache or
   routing semantics change. The homepage becomes less modular and more like a
   continuous literary spread: an ellipsis-based heading language, a quiet
   full-bleed Special Issue interruption, adaptable monthly portrait rhythm,
   and a calmer colophon-like lower section. Mobile prioritizes the issue cover.
   ========================================================================== */

/* A recurring ellipsis becomes the homepage's quiet editorial punctuation.
   It echoes the site's language of silence without adding another icon system. */
.homeEditorialRefresh .sectionHeading {
  grid-template-columns: 28px auto minmax(0,1fr);
  gap: 13px;
  margin-bottom: 26px;
}
.homeEditorialRefresh .sectionHeading .dot {
  position: relative;
  width: 28px;
  height: 18px;
  border-radius: 0;
  background: none;
}
.homeEditorialRefresh .sectionHeading .dot::before {
  content: "…";
  position: absolute;
  inset: -4px 0 auto 0;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: .05em;
}
.homeEditorialRefresh .sectionHeading .rule {
  height: 1px;
  background:
    linear-gradient(to left,
      rgba(25,24,23,.22) 0 68%,
      transparent 68% 73%,
      color-mix(in srgb, var(--accent) 58%, transparent) 73% 79%,
      transparent 79% 100%);
}

/* Give sections breathing rhythm without turning each one into another box. */
.homeEditorialRefresh > .sectionBlock {
  padding-top: 46px;
  padding-bottom: 48px;
}

/* The current Special Issue acts as the deliberate visual interruption in the
   homepage sequence: a very quiet full-bleed paper wash, not another card. */
.homeEditorialRefresh .featureSection {
  position: relative;
  isolation: isolate;
  border-top: 0;
  padding-top: 62px;
  padding-bottom: 62px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.homeEditorialRefresh .featureSection::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--accent) 4.2%, var(--paper)) 0%,
      color-mix(in srgb, var(--paper) 96%, transparent) 52%,
      color-mix(in srgb, var(--accent) 2.4%, var(--paper)) 100%);
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.homeEditorialRefresh .featureSection .featureSlider {
  box-shadow: 0 18px 44px rgba(25,24,23,.035);
}

/* Monthly lists may contain any number of people. The existing flex model is
   retained because it naturally centres incomplete rows; a small alternating
   offset gives the portraits an editorial rather than directory-like rhythm. */
@media (min-width: 901px) {
  .homeEditorialRefresh .monthlyPortraitGrid {
    padding-top: 4px;
    padding-bottom: 16px;
  }
  .homeEditorialRefresh .monthlyPortraitGrid > .portraitCard:nth-child(even) {
    transform: translateY(12px);
  }
}
.homeEditorialRefresh .monthlyPortraitGrid .portraitFrame::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 0;
  width: 38px;
  height: 1px;
  background: var(--accent);
  opacity: .58;
  pointer-events: none;
}

/* The lower editorial area reads more like a colophon/spread and less like a
   pair of independent boxed widgets. */
.homeEditorialRefresh .bottomGrid {
  gap: clamp(34px, 4vw, 58px);
}
.homeEditorialRefresh .bottomGrid .podcastPanel,
.homeEditorialRefresh .bottomGrid .editorialPanel {
  border: 0;
  background: transparent;
  overflow: visible;
}
.homeEditorialRefresh .bottomGrid .podcastPanel {
  padding: 24px 0 24px 30px;
  border-left: 1px solid rgba(25,24,23,.13);
}
.homeEditorialRefresh .bottomGrid .editorialPanel {
  padding: 24px 6px 24px 0;
}
.homeEditorialRefresh .bottomGrid .editorialPanel::after {
  width: 150px;
  height: 150px;
  left: -12px;
  bottom: -18px;
  opacity: .12;
}

/* Mobile/tablet: the Special Issue cover is the first visual encounter. The
   manifesto/snail/slogan follows as the interpretive identity field. */
@media (max-width: 900px) {
  .homeEditorialRefresh .hero {
    gap: 22px;
  }
  .homeEditorialRefresh .heroCover {
    order: 1;
    margin-top: 4px;
    margin-bottom: 34px;
  }
  .homeEditorialRefresh .heroText {
    order: 2;
  }
  .homeEditorialRefresh > .sectionBlock {
    padding-top: 40px;
    padding-bottom: 42px;
  }
  .homeEditorialRefresh .featureSection {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .homeEditorialRefresh .bottomGrid .podcastPanel,
  .homeEditorialRefresh .bottomGrid .editorialPanel {
    padding: 24px 0;
    border: 0;
  }
  .homeEditorialRefresh .bottomGrid .editorialPanel {
    border-top: 1px solid rgba(25,24,23,.13);
  }
}

@media (max-width: 560px) {
  .homeEditorialRefresh .heroCover {
    margin-top: 0;
    margin-bottom: 32px;
  }
  .homeEditorialRefresh .sectionHeading {
    grid-template-columns: 24px auto minmax(0,1fr);
    gap: 10px;
    margin-bottom: 22px;
  }
  .homeEditorialRefresh .sectionHeading .dot {
    width: 24px;
  }
  .homeEditorialRefresh .sectionHeading .dot::before {
    font-size: 20px;
  }
  .homeEditorialRefresh .featureSection {
    padding-top: 42px;
    padding-bottom: 44px;
  }
}


/* ========================================================================== 
   Fast 86 — editorial-note / identity swap + restrained seasonal color flow
   --------------------------------------------------------------------------
   Homepage only. The current issue cover now shares the opening spread with
   the editors' note; the complete manifesto / snail / censored motto identity
   field moves intact beside the podcast block. Color remains structural: slow
   movement through hairlines, interruptions and washes, never reading text.
   ========================================================================== */

.homeColorFlow {
  --flow-a: var(--accent);
  --flow-b: var(--secondary);
  --flow-soft: var(--accent-soft);
}

/* Hero: cover + current editorial voice. */
.homeColorFlow .homeHeroEditorial {
  align-items: center;
}
.homeColorFlow .heroEditorialPanel {
  position: relative;
  align-self: center;
  justify-self: stretch;
  min-height: 330px;
  padding: 36px 34px 34px;
  border: 0;
  background:
    radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--flow-a) 7%, transparent), transparent 31%),
    radial-gradient(circle at 16% 82%, color-mix(in srgb, var(--flow-b) 5%, transparent), transparent 34%);
  background-size: 135% 135%, 145% 145%;
  background-position: 82% 12%, 12% 86%;
  overflow: visible;
  isolation: isolate;
  animation: poesiesQuietWash 24s ease-in-out infinite alternate;
}
.homeColorFlow .heroEditorialPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--flow-a) 28%, var(--paper));
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
.homeColorFlow .heroEditorialPanel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(72px, 18%, 118px);
  height: 2px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--flow-a), var(--flow-b), var(--flow-a));
  background-size: 220% 100%;
  opacity: .72;
  filter: none;
  animation: poesiesLineDrift 15s linear infinite;
}
.homeColorFlow .heroEditorialPanel .sectionHeading {
  margin-bottom: 28px;
}
.homeColorFlow .heroEditorialPanel h3 {
  font-size: clamp(25px, 2.2vw, 31px);
  line-height: 1.65;
  margin-top: 4px;
}
.homeColorFlow .heroEditorialPanel p {
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 2.08;
}

/* The identity object is moved intact beside podcasts. It keeps the quiet
   Fast 84 frame language, now with a very slow accent migration in one edge. */
.homeColorFlow .homeIdentityPanel {
  position: relative;
  isolation: isolate;
  align-self: stretch;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 28px 28px;
  background:
    linear-gradient(118deg,
      color-mix(in srgb, var(--flow-soft) 12%, transparent) 0%,
      transparent 36%,
      color-mix(in srgb, var(--flow-b) 3.5%, transparent) 100%);
}
.homeColorFlow .homeIdentityPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, var(--paper));
  border-radius: 2px;
  opacity: .82;
}
.homeColorFlow .homeIdentityPanel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 82px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--flow-a), var(--flow-b), var(--flow-a));
  background-size: 220% 100%;
  opacity: .75;
  animation: poesiesLineDrift 17s linear infinite reverse;
}
.homeColorFlow .homeIdentityPanel .heroIntroLockup {
  display: block;
  width: 100%;
  max-width: none;
}
.homeColorFlow .homeIdentityPanel .manifesto {
  overflow: visible;
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: 25.2px;
  line-height: 2.18;
}
.homeColorFlow .homeIdentityPanel .manifestoCopy { display: inline; }
.homeColorFlow .homeIdentityPanel .manifestoDots {
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  vertical-align: baseline;
  overflow: visible;
  font-family: "Far Mashin Tahrir", "XB Niloofar", Tahoma, serif;
  font-size: 1em;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: .045em;
  color: color-mix(in srgb, var(--ink) 64%, var(--flow-a));
  opacity: .68;
  text-shadow: .12px 0 currentColor;
}
.homeColorFlow .homeIdentityPanel .heroTrailMark {
  position: relative;
  width: 100%;
  height: 112px;
  margin: 2px 0 -26px;
  flex: 0 0 112px;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}
.homeColorFlow .homeIdentityPanel .heroTrailMark::before {
  content: "";
  position: absolute;
  right: 7%;
  bottom: -10px;
  width: min(472px, 88%);
  height: 162px;
  background-image: url("../art/snail-trail.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  opacity: .72;
  filter: grayscale(100%) brightness(.95) contrast(1.08);
}
.homeColorFlow .homeIdentityPanel .blood {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  width: 100%;
  direction: ltr;
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: baseline;
  column-gap: .38em;
  font-family: "Far Mashin Tahrir", "XB Niloofar", Tahoma, serif;
  font-size: 30px;
  font-weight: 400;
  text-shadow: .18px 0 currentColor;
}

/* Structural color movement. The neutral line always remains dominant; color
   drifts through only a narrow part of the interruption. */
.homeColorFlow .sectionHeading .rule {
  background:
    linear-gradient(90deg,
      rgba(25,24,23,.18) 0 43%,
      transparent 43% 48%,
      color-mix(in srgb, var(--flow-a) 66%, transparent) 48% 54%,
      color-mix(in srgb, var(--flow-b) 56%, transparent) 54% 59%,
      transparent 59% 64%,
      rgba(25,24,23,.13) 64% 100%);
  background-size: 210% 100%;
  animation: poesiesLineDrift 21s linear infinite;
}
.homeColorFlow .sectionHeading .dot::before {
  color: color-mix(in srgb, var(--flow-a) 82%, var(--flow-b));
  transition: color .35s ease;
}
.homeColorFlow .sectionHeading:hover .dot::before {
  color: color-mix(in srgb, var(--flow-b) 78%, var(--flow-a));
}

.homeColorFlow .featureSection::before {
  background:
    radial-gradient(circle at 18% 32%, color-mix(in srgb, var(--flow-a) 6%, transparent), transparent 31%),
    radial-gradient(circle at 82% 68%, color-mix(in srgb, var(--flow-b) 5%, transparent), transparent 34%),
    linear-gradient(100deg,
      color-mix(in srgb, var(--flow-a) 3.2%, var(--paper)) 0%,
      color-mix(in srgb, var(--paper) 97%, transparent) 52%,
      color-mix(in srgb, var(--flow-b) 2.2%, var(--paper)) 100%);
  background-size: 135% 135%, 140% 140%, 100% 100%;
  background-position: 0% 18%, 100% 82%, 0 0;
  animation: poesiesQuietWash 28s ease-in-out infinite alternate;
}
.homeColorFlow .monthlyPortraitGrid .portraitFrame::after {
  background: linear-gradient(90deg, var(--flow-a), var(--flow-b), var(--flow-a));
  background-size: 220% 100%;
  animation: poesiesLineDrift 18s linear infinite;
}

/* Give the existing poem-card corner rule the same living palette only on
   hover/focus; resting cards remain as restrained as Fast 71. */
.homeColorFlow .poemGrid .poemCard:hover::before,
.homeColorFlow .poemGrid .poemCard:focus-within::before,
.homeColorFlow .poemGrid .poemCard:hover::after,
.homeColorFlow .poemGrid .poemCard:focus-within::after {
  border-color: color-mix(in srgb, var(--flow-b) 68%, var(--flow-a));
}

@keyframes poesiesLineDrift {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}
@keyframes poesiesQuietWash {
  0% { background-position: 0% 20%, 100% 80%, 0 0; }
  100% { background-position: 18% 34%, 82% 66%, 0 0; }
}

@media (max-width: 900px) {
  .homeColorFlow .homeHeroEditorial {
    gap: 26px;
  }
  .homeColorFlow .homeHeroEditorial .heroCover {
    order: 1;
    margin-top: 4px;
    margin-bottom: 34px;
  }
  .homeColorFlow .heroEditorialPanel {
    order: 2;
    min-height: 0;
    padding: 28px 22px 25px;
  }
  .homeColorFlow .bottomGrid .podcastPanel,
  .homeColorFlow .bottomGrid .homeIdentityPanel {
    padding-top: 26px;
    padding-bottom: 26px;
  }
  .homeColorFlow .homeIdentityPanel {
    padding-inline: 20px;
    margin-top: 0;
  }
  .homeColorFlow .homeIdentityPanel .manifesto {
    font-size: 21.6px;
    line-height: 2.05;
  }
  .homeColorFlow .homeIdentityPanel .heroTrailMark {
    height: 48px;
    margin: 0 0 -24px;
    flex-basis: 48px;
  }
  .homeColorFlow .homeIdentityPanel .heroTrailMark::before {
    left: 15%;
    right: auto;
    top: -4px;
    bottom: auto;
    width: 286px;
    max-width: 84%;
    height: 100px;
    background-position: left top;
  }
  .homeColorFlow .homeIdentityPanel .blood {
    margin-top: 18px;
    font-size: 24px;
  }
}

@media (max-width: 560px) {
  .homeColorFlow .heroEditorialPanel {
    padding: 24px 17px 22px;
  }
  .homeColorFlow .homeIdentityPanel {
    padding: 25px 16px 23px;
  }
  .homeColorFlow .homeIdentityPanel .heroTrailMark {
    height: 40px;
    margin: 0 0 -20px;
    flex-basis: 40px;
  }
  .homeColorFlow .homeIdentityPanel .heroTrailMark::before {
    left: 12%;
    width: 238px;
    max-width: 84%;
    height: 82px;
    top: -2px;
  }
  .homeColorFlow .homeIdentityPanel .blood {
    margin-top: 22px;
    grid-template-columns: auto minmax(0,1fr);
    column-gap: .24em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homeColorFlow .heroEditorialPanel,
  .homeColorFlow .heroEditorialPanel::after,
  .homeColorFlow .homeIdentityPanel::after,
  .homeColorFlow .sectionHeading .rule,
  .homeColorFlow .featureSection::before,
  .homeColorFlow .monthlyPortraitGrid .portraitFrame::after {
    animation: none !important;
  }
}

/* ========================================================================== 
   Fast 87 — relocated identity typography correction
   --------------------------------------------------------------------------
   The manifesto/slogan identity block moved outside .hero in Fast 86. Keep
   its established mechanical Persian typeface explicit at the new location,
   including the JS-generated dotted/slogan spans.
   ========================================================================== */
.homeColorFlow .homeIdentityPanel .manifesto,
.homeColorFlow .homeIdentityPanel .manifestoCopy,
.homeColorFlow .homeIdentityPanel .manifestoDots,
.homeColorFlow .homeIdentityPanel .blood,
.homeColorFlow .homeIdentityPanel .bloodCopy,
.homeColorFlow .homeIdentityPanel .bloodSideRight,
.homeColorFlow .homeIdentityPanel .bloodRightFill,
.homeColorFlow .homeIdentityPanel .bloodLeadOpening {
  font-family: "Far Mashin Tahrir", "XB Niloofar", Tahoma, serif;
  font-weight: 400;
}