/* ==========================================================================
   The Human Quest — "Manuscript" theme
   An alternative to style.css: the page as a leaf of an illuminated
   manuscript. Gold-ruled panels (jadval), flat perspective — no depth, no
   shadow, only stacked registers of colour — and illustrated margins.

   Same class contract as style.css, so a page switches theme by swapping one
   stylesheet link. All ornament is CSS background art; the HTML is untouched.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap");

:root {
  /* Pigments. Ground colours first, then the palette of a Pahari miniature:
     gold leaf, lapis lazuli, vermilion, malachite. */
  --paper:      #F7EFDE;
  --paper-deep: #EFE3C6;
  --paper-warm: #F2E6CC;

  --ink:        #2B1D12;
  --ink-soft:   rgba(43, 29, 18, .74);

  --gold:       #C08A2E;
  --gold-deep:  #8A5E1C;
  --gold-pale:  #E7D2A0;

  --lapis:      #22406B;
  --lapis-deep: #172C4C;
  --vermilion:  #A8341F;
  --malachite:  #2F5D46;

  --on-lapis:       #F4EBD8;
  --on-lapis-muted: rgba(244, 235, 216, .78);

  /* Kept so the old token names still resolve if any inline style uses them. */
  --cream: var(--paper);
  --tan: var(--paper-deep);
  --dark: var(--lapis);
  --terracotta: var(--vermilion);
  --amber: var(--gold);
  --border: var(--gold-pale);
  --on-dark: var(--on-lapis);
  --on-dark-muted: var(--on-lapis-muted);

  --display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --serif:   "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --container: 1040px;
  --band:      1140px;
  --leaf:      1240px;   /* the ruled page itself */
  --header-h:  84px;

  /* How far the watercolour plates sit back from the text. They share the page
     with running copy, so they are held quiet at the theme level and not left
     to whatever saturation the painting arrived with. */
  --plate-mute: .82;

  /* The margin vine, the lotus divider and the corner floret: three pieces of
     illumination reused everywhere. */
  --vine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='180' viewBox='0 0 38 180'%3E%3Cg stroke='%23C08A2E' stroke-width='1' fill='none'%3E%3Cpath d='M13 0V180'/%3E%3Cpath d='M25 0V180'/%3E%3C/g%3E%3Ccircle cx='19' cy='90' r='13' fill='%23F7EFDE'/%3E%3Cg fill='none' stroke='%23C08A2E' stroke-width='1.1'%3E%3Cg%3E%3Cpath d='M19 78C24 83 24 87 19 90C14 87 14 83 19 78Z'/%3E%3Cpath d='M19 78C24 83 24 87 19 90C14 87 14 83 19 78Z' transform='rotate(60 19 90)'/%3E%3Cpath d='M19 78C24 83 24 87 19 90C14 87 14 83 19 78Z' transform='rotate(120 19 90)'/%3E%3Cpath d='M19 78C24 83 24 87 19 90C14 87 14 83 19 78Z' transform='rotate(180 19 90)'/%3E%3Cpath d='M19 78C24 83 24 87 19 90C14 87 14 83 19 78Z' transform='rotate(240 19 90)'/%3E%3Cpath d='M19 78C24 83 24 87 19 90C14 87 14 83 19 78Z' transform='rotate(300 19 90)'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='19' cy='90' r='2.6' fill='%23A8341F'/%3E%3Ccircle cx='19' cy='18' r='1.8' fill='%23C08A2E'/%3E%3Ccircle cx='19' cy='162' r='1.8' fill='%2322406B'/%3E%3C/svg%3E");

  --divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='20' viewBox='0 0 168 20'%3E%3Cg fill='none' stroke='%23C08A2E' stroke-width='1.2'%3E%3Cpath d='M0 10H56M112 10H168'/%3E%3Cpath d='M84 2L92 10L84 18L76 10Z'/%3E%3Cpath d='M64 10C68 4 73 4 73 10C73 16 68 16 64 10Z'/%3E%3Cpath d='M104 10C100 4 95 4 95 10C95 16 100 16 104 10Z'/%3E%3C/g%3E%3Ccircle cx='84' cy='10' r='2.4' fill='%23A8341F'/%3E%3C/svg%3E");

  --floret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg fill='none' stroke='%23C08A2E' stroke-width='1.2'%3E%3Cpath d='M11 1C14.5 4.5 14.5 7.5 11 11C7.5 7.5 7.5 4.5 11 1Z'/%3E%3Cpath d='M11 21C7.5 17.5 7.5 14.5 11 11C14.5 14.5 14.5 17.5 11 21Z'/%3E%3Cpath d='M1 11C4.5 7.5 7.5 7.5 11 11C7.5 14.5 4.5 14.5 1 11Z'/%3E%3Cpath d='M21 11C17.5 14.5 14.5 14.5 11 11C14.5 7.5 17.5 7.5 21 11Z'/%3E%3C/g%3E%3Ccircle cx='11' cy='11' r='1.6' fill='%23A8341F'/%3E%3C/svg%3E");

  /* The headpiece that opens a leaf: the title, drawn. One figure, a long
     road, a sun still ahead of them — the human quest, and nothing else in
     the frame.

     Drawn flat in side elevation, the way a miniature puts someone on a road:
     no perspective, no receding horizon, which the rest of this theme forbids
     anyway. The distance between the walker and the sun is the point, so it
     is left empty.

     Line ornament rather than a painting, deliberately. It sits directly above
     a title, where a watercolour would compete with the type, and as line art
     it stays crisp at any size for no image request. */
  --headpiece: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='68' viewBox='0 0 300 68'%3E%3Cg stroke='%23C08A2E' stroke-width='1' opacity='0.8' stroke-linecap='round'%3E%3Cpath d='M243.00 32.00L247.00 32.00'/%3E%3Cpath d='M240.99 24.50L244.45 22.50'/%3E%3Cpath d='M235.50 19.01L237.50 15.55'/%3E%3Cpath d='M228.00 17.00L228.00 13.00'/%3E%3Cpath d='M220.50 19.01L218.50 15.55'/%3E%3Cpath d='M215.01 24.50L211.55 22.50'/%3E%3Cpath d='M213.00 32.00L209.00 32.00'/%3E%3Cpath d='M215.01 39.50L211.55 41.50'/%3E%3Cpath d='M220.50 44.99L218.50 48.45'/%3E%3Cpath d='M228.00 47.00L228.00 51.00'/%3E%3Cpath d='M235.50 44.99L237.50 48.45'/%3E%3Cpath d='M240.99 39.50L244.45 41.50'/%3E%3C/g%3E%3Ccircle cx='228.0' cy='32.0' r='12.0' fill='none' stroke='%23C08A2E' stroke-width='1.4'/%3E%3Ccircle cx='228.0' cy='32.0' r='3' fill='%23A8341F'/%3E%3Ccircle cx='104.0' cy='42.0' r='2.0' fill='%2322406B'/%3E%3Cpath d='M102.5 45.0L105.5 45.0L105.3 53.0L107.7 58.0L105.9 58.0L104.1 53.5L102.9 58.0L101.1 58.0L102.6 52.0Z' fill='%2322406B'/%3E%3Cpath d='M103.0 46.5L107.2 48.5' stroke='%2322406B' stroke-width='1.3' stroke-linecap='round' fill='none'/%3E%3Cpath d='M24 58H276' fill='none' stroke='%23C08A2E' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M24 58L28 54L24 50L20 54Z' fill='%23A8341F'/%3E%3Cpath d='M276 58L280 54L276 50L272 54Z' fill='%23A8341F'/%3E%3C/svg%3E");
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Illustrated margins: a gold vine runs the full height of both margins,
   fixed so it borders every screenful the way it borders every leaf. */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 38px;
  background-image: var(--vine);
  background-repeat: repeat-y;
  background-position: center top;
  opacity: .7;
  pointer-events: none;
  z-index: 1;
}
body::before { left: 14px; }
body::after  { right: 14px; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* --------------------------------------------------------------- layout -- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.container--wide {
  max-width: 100%;
  padding-inline: clamp(24px, 4vw, 56px);
}

/* The leaf. Everything between header and footer sits inside one ruled
   frame — two gold rules with a paper gutter between them. */
main {
  flex: 1 0 auto;
  width: calc(100% - clamp(36px, 8vw, 128px));
  max-width: var(--leaf);
  margin: clamp(26px, 4vw, 52px) auto;
  padding: clamp(14px, 2vw, 22px);
  background: var(--paper);
  border: 1px solid var(--gold-deep);
  box-shadow:
    inset 0 0 0 4px var(--paper),
    inset 0 0 0 7px var(--gold),
    inset 0 0 0 8px var(--gold-deep);
}

/* Registers: flat bands of colour stacked down the leaf, ruled in gold. */
.band {
  width: 100%;
  max-width: var(--band);
  margin-inline: auto;
  padding: clamp(46px, 5.5vw, 74px) clamp(24px, 5vw, 64px);
  border: 1px solid var(--gold-deep);
  background-image: var(--floret), var(--floret), var(--floret), var(--floret);
  background-repeat: no-repeat;
  background-position:
    left 12px top 12px, right 12px top 12px,
    left 12px bottom 12px, right 12px bottom 12px;
}
.band + .band { margin-top: clamp(26px, 3vw, 40px); }
.band--tan  { background-color: var(--paper-deep); }
.band--dark {
  background-color: var(--lapis);
  color: var(--on-lapis);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 5px var(--lapis), inset 0 0 0 6px var(--gold);
}

.section { padding-block: clamp(46px, 6vw, 82px); }
.section--tight { padding-block: clamp(34px, 4vw, 56px); }

/* ---------------------------------------------------------------- type --- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
  letter-spacing: 0;
}

h1, .h1 {
  font-size: clamp(40px, 5vw, 70px);
  line-height: 1.02;
}
h2, .h2 {
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
}
h3, .h3 {
  font-size: clamp(23px, 2vw, 29px);
  line-height: 1.14;
}

p { margin: 0; }

/* Rubric: the small red-and-gold label that opens a passage. */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--vermilion);
  margin: 0;
}
.eyebrow--amber { color: var(--gold); }

.lede {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.24;
  color: var(--vermilion);
}

.body-text {
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
}
.body-text + .body-text { margin-top: 18px; }
.body-text--lg { font-size: 19px; line-height: 1.58; }

.measure { max-width: 700px; }
.center  { text-align: center; }
.center .measure { margin-inline: auto; }

.accent { color: var(--vermilion); }

/* -------------------------------------------------------------- buttons -- */

/* Flat, ruled, no radius and no shadow — a gilded label, not a pill. */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  line-height: 1;
  padding: 16px 30px;
  border: 1px solid var(--gold-deep);
  background: var(--vermilion);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--vermilion), inset 0 0 0 2px var(--gold-pale);
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: #8E2917; }

.btn--light {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--paper), inset 0 0 0 2px var(--gold);
}
.btn--light:hover { background: #fff; }

.btn--sm { font-size: 11px; padding: 11px 18px; letter-spacing: 1.6px; }

/* --------------------------------------------------------------- header -- */

/* The colophon line: brand centred between ruled nav, gold rule beneath. */
.site-header {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--gold-deep);
  box-shadow: 0 3px 0 -1px var(--gold), 0 4px 0 -1px var(--gold-deep);
  z-index: 2;
}
.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .4px;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
}

.nav { display: flex; align-items: center; gap: 26px; margin-inline: auto; }
.header-cta { flex: none; }
.nav a {
  font-family: var(--sans);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--vermilion); border-bottom-color: var(--gold); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--gold-deep);
  background: transparent;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px; height: 1.5px;
  margin-inline: auto;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after  { transform: translateY(4.5px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(1.5px); }

/* ----------------------------------------------------------------- hero -- */

.hero { padding-block: clamp(44px, 6vw, 84px) clamp(44px, 5vw, 76px); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .74fr);
  gap: clamp(36px, 5vw, 60px);
  align-items: center;
}

.hero__eyebrow { margin-bottom: 20px; }
.hero h1 { margin-bottom: 20px; }
.hero .lede { margin-bottom: 22px; }
.hero .body-text { max-width: 600px; }
.hero .btn { margin-top: 30px; }

/* The opening leaf carries the headpiece above the rubric. */
.hero--center { text-align: center; }
.hero--center .container::before {
  content: "";
  display: block;
  width: 300px;
  height: 68px;
  margin: 0 auto 26px;
  background: var(--headpiece) no-repeat center / contain;
}
.hero--center .lede,
.hero--center .body-text { margin-inline: auto; }
.hero--center h1 { margin-bottom: 18px; }
.hero--center .btn { margin-top: 34px; }

/* Flat perspective: pictures are inlaid in gold rules, never floated on a
   shadow. */
.cover-card {
  background: var(--paper-deep);
  padding: 12px;
  border: 1px solid var(--gold-deep);
  box-shadow:
    inset 0 0 0 4px var(--paper-deep),
    inset 0 0 0 5px var(--gold),
    inset 0 0 0 6px var(--gold-deep);
}
.cover-card img { border: 1px solid var(--gold-deep); }
.cover-card--frame { background: var(--paper-warm); }
.cover-card figcaption {
  margin-top: 14px;
  text-align: center;
  font-family: var(--display);
  font-size: 18px;
  font-style: italic;
  line-height: 1.25;
  color: var(--ink);
}

.feature-img {
  border: 1px solid var(--gold-deep);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--gold), 0 0 0 6px var(--gold-deep);
  margin: 6px;
}

/* ---------------------------------------------------------------- cards -- */

.band__head { text-align: center; }
.band__head .eyebrow { margin-bottom: 16px; }
.band__head h2 { margin-bottom: 0; }
/* Lotus divider under every register heading. */
.band__head h2::after {
  content: "";
  display: block;
  width: 168px;
  height: 20px;
  margin: 20px auto 22px;
  background: var(--divider) no-repeat center;
}
.band--dark .band__head h2::after { filter: brightness(1.25); }
.band__head .body-text { max-width: 640px; margin-inline: auto; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 44px;
}

/* Each card is its own ruled panel — a cartouche. */
.card {
  background: var(--paper);
  border: 1px solid var(--gold-deep);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--gold-pale);
  padding: 28px 26px 30px;
}
.card__num {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--gold-deep);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-deep);
  background: var(--paper-deep);
  margin-bottom: 20px;
}
.card h3 { margin-bottom: 10px; }
.card .body-text { color: var(--ink-soft); font-size: 16px; }

.cards--tan .card { background: var(--paper-deep); }
.cards--tan .card__num { background: var(--paper); }

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.card__link:hover { color: var(--vermilion); }
.card__link svg { flex: none; color: var(--vermilion); }

/* ---------------------------------------------------- lapis register ----- */

.band--dark .band__head h2 { color: var(--on-lapis); }
.band--dark .body-text { color: var(--on-lapis-muted); }
.band--dark .eyebrow { color: var(--gold-pale); }

.quote-lg {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(30px, 3.3vw, 46px);
  line-height: 1.14;
  text-wrap: balance;
}

.h2--lg { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.1; }

.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 52px);
  margin-top: 38px;
}

/* --------------------------------------------------------- pull quote --- */

.pullquote {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(25px, 2.7vw, 36px);
  line-height: 1.26;
  text-align: center;
  text-wrap: balance;
  margin: 0;
  max-width: 900px;
  margin-inline: auto;
}
.pullquote::before {
  content: "";
  display: block;
  width: 168px;
  height: 20px;
  margin: 0 auto 26px;
  background: var(--divider) no-repeat center;
}
.pullquote__note {
  margin-top: 24px;
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 14px;
}

/* ------------------------------------------------------------- 2-col md -- */

.split {
  display: grid;
  grid-template-columns: minmax(0, .44fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}
.split__aside .eyebrow { margin-bottom: 14px; }

/* ------------------------------------------------------------- archives -- */

.archive-list { margin-top: 30px; border-top: 1px solid var(--gold); }

.archive-item {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 38px);
  padding-block: 26px;
  border-bottom: 1px solid var(--gold-pale);
  text-align: left;
}
.archive-item:hover { background: rgba(192, 138, 46, .07); }
.archive-item__meta {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--vermilion);
  padding-top: 8px;
}
.archive-item__title {
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.16;
  margin-bottom: 8px;
}
.archive-item__title a { text-decoration: none; }
.archive-item__title a:hover { color: var(--vermilion); }
.archive-item .body-text { color: var(--ink-soft); font-size: 16px; }

.archive-empty {
  padding-block: 28px;
  border-bottom: 1px solid var(--gold-pale);
  color: var(--ink-soft);
  font-style: italic;
  text-align: left;
}

.archive-section + .archive-section { margin-top: clamp(50px, 6vw, 80px); }
.archive-section__head { text-align: left; }
.archive-section__head .eyebrow { margin-bottom: 12px; }
.archive-section__head h2 { margin-bottom: 14px; }
.archive-section__head h2::after { display: none; }

/* ---------------------------------------------------------- issue prose -- */

.prose { max-width: 660px; margin-inline: auto; text-align: left; }
.prose > * + * { margin-top: 22px; }
.prose p { font-size: 19px; line-height: 1.66; }

/* Illuminated initial: gold letter on a lapis ground opens the text. */
.prose > p:first-of-type::first-letter {
  float: left;
  margin: 6px 14px 0 0;
  padding: 10px 12px;
  background: var(--lapis);
  border: 1px solid var(--gold);
  color: var(--gold-pale);
  font-family: var(--display);
  font-weight: 600;
  font-size: 54px;
  line-height: .82;
}

.prose h2 {
  font-size: clamp(26px, 2.3vw, 33px);
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid var(--gold);
  color: var(--vermilion);
}
.prose h3 { font-size: 23px; margin-top: 30px; }
.prose ul, .prose ol { padding-left: 24px; font-size: 19px; line-height: 1.66; }
.prose li + li { margin-top: 8px; }
.prose blockquote {
  margin: 32px 0;
  padding: 24px 28px;
  border: 1px solid var(--gold-deep);
  background: var(--paper-deep);
  font-family: var(--display);
  font-style: italic;
  font-size: 23px;
  line-height: 1.32;
}
.prose a { color: var(--vermilion); text-decoration-color: var(--gold); }

.issue-head { text-align: center; }
.issue-head::before {
  content: "";
  display: block;
  width: 300px;
  height: 68px;
  margin: 0 auto 24px;
  background: var(--headpiece) no-repeat center / contain;
}
.issue-head .eyebrow { margin-bottom: 14px; }
.issue-head h1 { font-size: clamp(34px, 4vw, 56px); margin-bottom: 16px; }
.issue-head .lede { margin-bottom: 0; }

.issue-foot {
  margin-top: clamp(44px, 5vw, 68px);
  padding-top: 32px;
  border-top: 1px solid var(--gold);
  text-align: center;
}
.issue-foot::before {
  content: "";
  display: block;
  width: 168px;
  height: 20px;
  margin: -42px auto 26px;
  background: var(--divider) no-repeat center;
  background-color: var(--paper);
}

/* ----------------------------------------------------------- subscribe --- */

.subscribe {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: min(100%, 580px);
  margin: 30px auto 0;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--gold-deep);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--gold-pale);
}
.subscribe input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 16px 20px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
}
.subscribe input[type="email"]::placeholder { color: rgba(43, 29, 18, .48); font-style: italic; }
.subscribe input[type="email"]:focus { outline: none; }
.subscribe .btn { margin: 5px; }
.subscribe:focus-within { border-color: var(--vermilion); }

.form-note {
  margin-top: 20px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 16px;
}
.form-status {
  margin-top: 14px;
  text-align: center;
  font-weight: 600;
  color: var(--vermilion);
  min-height: 1.5em;
}

/* --------------------------------------------------------------- footer -- */

/* The colophon: lapis ground, gold rule above, the way a manuscript closes. */
.site-footer {
  background: var(--lapis);
  color: var(--on-lapis);
  padding-block: 30px;
  border-top: 1px solid var(--gold);
  box-shadow: 0 -4px 0 -1px var(--gold-deep);
  position: relative;
  z-index: 2;
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.site-footer__tagline {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
.site-footer a {
  color: var(--on-lapis);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.site-footer a:hover { color: var(--gold-pale); }

/* ----------------------------------------------------------- utilities --- */

.stack-24 > * + * { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- breakpoints --- */

/* The margins carry illumination only when there are margins to spare. */
@media (max-width: 1340px) {
  body::before, body::after { display: none; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__media { order: -1; max-width: 330px; margin-inline: auto; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .two-col, .split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1010px) and (min-width: 951px) {
  .nav { gap: 18px; }
  .nav a { font-size: 11px; letter-spacing: 1.2px; }
}

@media (max-width: 950px) {
  main { width: calc(100% - 20px); padding: 10px; }
  .band { padding-inline: 20px; }
  /* Brand, subscribe and toggle have to share one row at 390px. */
  .site-header__inner { flex-wrap: wrap; gap: 10px; }
  .brand { margin-right: auto; font-size: 21px; }
  .header-cta { order: 2; font-size: 10px; padding: 9px 12px; letter-spacing: 1.2px; }
  .nav-toggle { display: block; order: 3; margin-left: 0; }
  .nav {
    display: none;
    order: 4;
    width: 100%;
    margin-inline: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-bottom: 16px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 10px 0; border-bottom-color: transparent; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .hero--center .container::before,
  .issue-head::before { width: 220px; height: 50px; }
}

@media (max-width: 700px) {
  .archive-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .archive-item__meta { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* --------------------------------------------------------- illustration --
   Watercolour plates sit *on* the paper rather than above it. Two treatments:

   Dissolved — margins, spots, inline plates. `multiply` drops the white
   paper the painting was made on, a soft mask eats the rectangle's edges,
   and what is left reads as pigment soaked into the leaf. No frame.

   Mounted — the wide register plate. Gold jadval, hard edges, caption
   beneath: a painting pasted into an album page, which is exactly what a
   muraqqa is.
   ------------------------------------------------------------------------ */

/* The illuminated margin. A page opts in by naming two plates:

     <style>
       main::before { background-image: url(assets/img/illustrations/margin-chariot.jpg) }
       main::after  { background-image: url(assets/img/illustrations/margin-lamp.jpg) }
     </style>

   Nothing else changes, and a page that names none keeps the plain vine.

   The URLs go straight into the rule rather than through a custom property.
   A relative url() inside a custom property is resolved against the stylesheet
   that *uses* the variable in Chrome, and against the stylesheet that declares
   it per spec — so the same declaration silently points at two different files
   depending on how deep the page sits. Not worth the tidiness. */
main { position: relative; }

/* One plate per margin, hung at the opening of the leaf and scrolling with
   it — absolute, not fixed, and masked with a single radial gradient. Two
   composited mask layers on a fixed, blended element is enough to stall a
   compositor, and it bought nothing a radial fade does not. */
main::before,
main::after {
  content: "";
  position: absolute;
  top: clamp(40px, 6vw, 96px);
  height: min(860px, 72vh);
  width: min(200px, calc((100vw - var(--leaf)) / 2 - 10px));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  filter: saturate(var(--plate-mute));
  opacity: .88;
  pointer-events: none;
  display: none;
}
/* The mask is centred, not anchored to the outer edge: these paintings put
   their subject in the middle of the sheet, and an edge-anchored fade erased
   exactly the part worth showing. Fading on all four sides also lets the vine
   cross the plate without a seam. */
main::before,
main::after {
  -webkit-mask-image: radial-gradient(86% 56% at 50% 46%, #000 34%, transparent 100%);
  mask-image: radial-gradient(86% 56% at 50% 46%, #000 34%, transparent 100%);
}
main::before { right: calc(100% + 4px); }
main::after  { left:  calc(100% + 4px); }

/* The margin is only illuminated where there is margin to spare. The plates
   and the vine deliberately overlap: ruling drawn over painted margins is
   what an album leaf actually looks like. */
@media (min-width: 1500px) {
  main::before, main::after { display: block; }
}

/* A painting mounted on the leaf: gold rules, hard edges, verse beneath. */
.plate-wide {
  max-width: var(--band);
  /* Even margins: an uncaptioned plate needs the same air beneath it that the
     caption used to occupy, or the next register crowds the painting. */
  margin: clamp(30px, 4vw, 48px) auto;
  padding: 12px;
  border: 1px solid var(--gold-deep);
  background: var(--paper-deep);
  box-shadow:
    inset 0 0 0 4px var(--paper-deep),
    inset 0 0 0 5px var(--gold),
    inset 0 0 0 6px var(--gold-deep);
}
.plate-wide img {
  width: 100%;
  border: 1px solid var(--gold-deep);
  mix-blend-mode: multiply;
  filter: saturate(var(--plate-mute));
}
.plate-wide figcaption {
  margin-top: 14px;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink-soft);
}
.plate-wide figcaption cite {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--vermilion);
}

/* A spot painting at the head of a card, in place of the numeral. */
.spot {
  width: 92px;
  height: 92px;
  margin-bottom: 18px;
  object-fit: cover;
  mix-blend-mode: multiply;
  filter: saturate(var(--plate-mute));
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 76%);
}

/* A plate set into running text, wrapped by the prose. */
.plate-inline {
  float: right;
  width: clamp(150px, 26%, 230px);
  margin: 6px 0 20px 28px;
}
.plate-inline img {
  width: 100%;
  mix-blend-mode: multiply;
  filter: saturate(var(--plate-mute));
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 46%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 50%, #000 46%, transparent 78%);
}
.plate-inline figcaption {
  margin-top: 4px;
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--vermilion);
}

@media (max-width: 700px) {
  .plate-inline { float: none; width: 100%; margin: 24px 0; }
  .plate-wide { padding: 8px; }
}

/* Multiply needs a light ground to sit on; on lapis it would go muddy. */
.band--dark .plate-wide img,
.band--dark .spot { mix-blend-mode: normal; }