/* ==========================================================================
   NourFide: the one handwritten stylesheet.
   Warm light on warm paper. Refined editorial minimalism. When in doubt, remove.
   Tokens and component specs follow 05-brand-and-assets/website-design-system.txt
   exactly. Mobile-first; verified at 375px. One layout breakpoint at 48em (768px).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color (design system section 1) */
  --paper: #F7F3EA;
  --paper-deep: #EFE9DB;
  --ink: #1A1611;
  --ink-soft: #4A433A;
  --ink-faint: #8A8275;
  --light: #C08A2D;
  --light-bright: #E0A93D;
  --line: #DDD5C4;
  /* Gold AS TEXT is darkened to pass AA on paper. Bright gold stays non-text. */
  --light-text: #9A6E1F;
  /* The button's hover lift (design system section 6). */
  --ink-lift: #2A241D;
  /* Error border: ink darkened, never red-only (the message carries the meaning). */
  --error: #7A2E1A;

  /* Type (section 2) */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --text-display: clamp(2.5rem, 6vw, 4.25rem);   /* hero H1 */
  --text-h1: clamp(2rem, 4vw, 3rem);             /* page H1 */
  --text-h2: clamp(1.5rem, 3vw, 2rem);
  --text-h3: 1.375rem;
  --text-body: clamp(1.125rem, 1.2vw, 1.25rem);  /* 18 to 20px */
  --text-lead: 1.375rem;
  --text-small: 0.9375rem;
  --text-meta: 0.8125rem;

  --leading-display: 1.05;
  --leading-h1: 1.1;
  --leading-h2: 1.15;
  --leading-h3: 1.2;
  --leading-body: 1.65;
  --leading-lead: 1.55;
  --tracking-display: -0.02em;
  --tracking-h1: -0.015em;
  --tracking-mono: 0.08em;
  --measure: 68ch;

  /* Space (section 3: 4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --gutter: var(--space-4);   /* 16px side gutter at phone width */
  --section-gap: var(--space-7);
  --touch: 44px;

  /* Shape (section 4) */
  --radius: 4px;
  --hairline: 1px;

  /* The glow (section 5): --light at 10 to 14% opacity, fading out. */
  --glow-core: rgba(192, 138, 45, 0.14);
  --glow-mid: rgba(192, 138, 45, 0.10);
  --glow-edge: rgba(192, 138, 45, 0);

  /* Motion (section 7) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 200ms;
  --reveal-step: 100ms;   /* staggered hero reveal, 80 to 120ms per step */
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*,
*::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(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1 0 auto;
  outline: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
  font-variation-settings: "opsz" 96;
}

h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
  font-variation-settings: "opsz" 144;
}

h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
}

p {
  margin: 0 0 var(--space-5);
}

ul, ol {
  margin: 0 0 var(--space-5);
  padding-left: 1.25em;
}

li::marker {
  color: var(--ink-faint);
}

li {
  margin-bottom: var(--space-2);
}

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

/* Text links (section 6): ink text, a gold underline that draws in on hover.
   Visited stays ink. Never a raw blue link. */
a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--light), var(--light));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

a:visited {
  color: var(--ink);
}

a:hover,
a:focus-visible {
  background-size: 100% 1px;
}

/* Focus (section 7): a visible 2px gold ring on every interactive element, never removed. */
:focus-visible {
  outline: 2px solid var(--light);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::selection {
  background: rgba(192, 138, 45, 0.25);
}

hr {
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure {
  max-width: var(--measure);
  margin-inline: auto;
}

.section {
  padding-block: var(--section-gap);
}

.section--deep {
  background: var(--paper-deep);
}

.section--closing {
  padding-bottom: var(--space-8);
}

.section__heading {
  margin-bottom: var(--space-5);
}

.section__link,
.section__empty {
  color: var(--ink-soft);
}

.page-title {
  margin-bottom: var(--space-5);
}

.kicker {
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}

/* Meta / labels / issue numbers (section 2) */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lede {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--ink-soft);
}

.small {
  font-size: var(--text-small);
  color: var(--ink-soft);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  background-image: none;
}

.skip-link:focus {
  top: var(--space-3);
}

/* The gold hairline (section 4): a 1px --light rule at 30% opacity full-width,
   or a short solid 40px --light rule for section breaks inside reading pages. */
.hairline {
  height: var(--hairline);
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  background: rgba(192, 138, 45, 0.30);
}

.hairline--short {
  width: 40px;
  max-width: 40px;
  margin-inline: 0;
  margin-block: 0 var(--space-5);
  background: var(--light);
}

.prose .hairline--short {
  margin-block: var(--space-7) var(--space-5);
}

/* --------------------------------------------------------------------------
   4. Prose (the reading experience)
   -------------------------------------------------------------------------- */
.prose > :last-child {
  margin-bottom: 0;
}

.prose h2,
.prose h3 {
  margin-top: var(--space-7);
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

/* Blockquote / pull-quote (section 6): 2px gold left border, --space-5 left
   padding, Fraunces italic, slightly larger, ink-soft. Sparingly. */
.prose blockquote,
blockquote {
  margin: var(--space-6) 0;
  padding: 0 0 0 var(--space-5);
  border-left: 2px solid var(--light);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15em;
  line-height: 1.5;
  font-variation-settings: "opsz" 48;
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose--reading {
  line-height: var(--leading-body);
}

/* --------------------------------------------------------------------------
   5. Header and footer
   -------------------------------------------------------------------------- */
.site-header {
  padding-block: var(--space-5);
  border-bottom: var(--hairline) solid var(--line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  background-image: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  font-variation-settings: "opsz" 48;
}

/* The single small light mark. Restrained, flat, no shadow. */
.wordmark__mark {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--light);
}

.site-nav__list,
.footer-nav__list,
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
}

.site-nav__list li,
.footer-nav__list li,
.link-list li {
  margin: 0;
}

/* Slim nav in IBM Plex Sans ~1rem; each link is a 44px touch target. */
.site-nav a,
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-size: 1rem;
  color: var(--ink-soft);
  background-position: 0 calc(50% + 0.75em);
}

.site-nav a:hover,
.site-nav a:focus-visible,
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--ink);
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
  background-size: 100% 1px;
}

/* Footer (section 6): paper-deep, the form, a minimal link column, mono copyright. */
.site-footer {
  background: var(--paper-deep);
  padding-block: var(--space-8) var(--space-7);
  margin-top: var(--space-8);
}

.site-footer .hairline--short {
  margin-bottom: var(--space-6);
}

.site-footer__subscribe {
  max-width: var(--measure);
  margin-bottom: var(--space-7);
}

.footer-nav__list {
  flex-direction: column;
  gap: 0;
}

.site-footer__meta {
  margin: var(--space-6) 0 0;
}

.link-list {
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.link-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
}

/* --------------------------------------------------------------------------
   6. Links and buttons
   -------------------------------------------------------------------------- */
.link--arrow::after {
  content: " \2192";
  color: var(--light);
}

/* Primary button (section 6): ink fill, paper text, 4px radius, padding
   --space-3/--space-5. Hover lifts to #2A241D. Focus: 2px gold ring, offset.
   Gold is the accent, never the fill. */
.button {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  min-height: var(--touch);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
  background-image: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button--primary {
  background-color: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.button--primary:hover {
  background-color: var(--ink-lift);
  border-color: var(--ink-lift);
  transform: translateY(-1px);
}

.button--primary:focus-visible {
  outline: 2px solid var(--light);
  outline-offset: 2px;
}

.button:active {
  transform: none;
}

/* Disabled / pending (section 7): 50% opacity, no pointer. */
.button[disabled],
.button[aria-busy="true"] {
  opacity: 0.5;
  pointer-events: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   7. Forms (section 6)
   -------------------------------------------------------------------------- */
.input {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  min-height: var(--touch);
  width: 100%;
  transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.section--deep .input,
.site-footer .input {
  background: var(--paper);
}

.input::placeholder {
  color: var(--ink-faint);
}

.input:hover {
  border-color: var(--ink-faint);
}

/* Focus: border --light plus a 2px --light ring. */
.input:focus {
  outline: none;
  border-color: var(--light);
  box-shadow: 0 0 0 2px var(--light);
}

/* Error: the border darkens; the inline message in ink carries the meaning. */
.input--error,
.input[aria-invalid="true"] {
  border-color: var(--error);
}

.textarea {
  resize: vertical;
  min-height: 9rem;
}

.field {
  margin-bottom: var(--space-5);
}

.field__label,
.subscribe__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}

.form__actions {
  margin-bottom: var(--space-4);
}

.form__microcopy,
.subscribe__consent {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0;
  margin: var(--space-3) 0 0;
}

.contact__direct {
  margin-top: var(--space-6);
}

/* Subscribe component (single source) */
.subscribe {
  max-width: 34rem;
}

.subscribe__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.subscribe__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.subscribe__message {
  margin: var(--space-3) 0 0;
  color: var(--ink);
}

.subscribe__message--success {
  padding-left: var(--space-4);
  border-left: 2px solid var(--light);
}

.subscribe__message--error {
  color: var(--ink);
}

.subscribe__message--error::before {
  content: "\2715\00a0";
  color: var(--error);
}

/* Visible marker for copy slots not yet filled. Never ships. */
.copy-placeholder {
  font-family: var(--font-mono);
  font-size: 0.8em;
  letter-spacing: 0.02em;
  color: var(--error);
  background: rgba(122, 46, 26, 0.08);
  border: 1px dashed rgba(122, 46, 26, 0.5);
  border-radius: var(--radius);
  padding: 0.1em 0.4em;
}

/* --------------------------------------------------------------------------
   8. Hero and the light motif (section 5)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
}

.hero__inner {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
}

/* The signature: one radial glow behind the hero H1, --light at 10 to 14%
   at the center fading to transparent, radius about 120% of the headline box,
   offset to the upper-left. CSS only, used once on the home page. */
.hero__glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(120%, 60rem);
  max-width: 60rem;
  aspect-ratio: 1.3 / 1;
  transform: translate(-62%, -28%);
  pointer-events: none;
  background: radial-gradient(
    ellipse at 42% 40%,
    var(--glow-core) 0%,
    var(--glow-mid) 28%,
    var(--glow-edge) 68%
  );
}

.hero__kicker {
  color: var(--light-text);
  margin-bottom: var(--space-4);
}

.hero__headline {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-5);
}

.hero__subhead {
  margin-bottom: var(--space-6);
}

/* The much fainter echo at the top of About. Nowhere else. */
.reading {
  position: relative;
  overflow: hidden;
}

.reading__glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(120%, 60rem);
  aspect-ratio: 1.3 / 1;
  transform: translate(-62%, -40%);
  pointer-events: none;
  background: radial-gradient(
    ellipse at 42% 40%,
    rgba(192, 138, 45, 0.07) 0%,
    rgba(192, 138, 45, 0.04) 28%,
    var(--glow-edge) 68%
  );
}

.reading__header {
  position: relative;
  padding-top: var(--space-7);
  margin-bottom: var(--space-6);
}

.reading__title {
  font-size: var(--text-h1);
}

.reading__links {
  position: relative;
  margin-top: var(--space-6);
}

.reading__cta {
  position: relative;
  margin-top: var(--space-7);
}

/* --------------------------------------------------------------------------
   9. Archive list (section 6, "ARCHIVE LIST ITEM"): typographic rows, no cards
   -------------------------------------------------------------------------- */
.issue-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.issue-list__item {
  padding-block: var(--space-5);
  border-top: var(--hairline) solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  margin: 0;
}

.issue-list__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.issue-list__number {
  padding-top: 0.5em;
}

.issue-list__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-h3);
  color: var(--ink);
  grid-column: 2;
  font-variation-settings: "opsz" 48;
  background-position: 0 calc(100% - 0.1em);
}

.issue-list__hook {
  grid-column: 2;
  color: var(--ink-soft);
  margin: var(--space-2) 0 0;
}

.issue-list__date {
  grid-column: 2;
  display: block;
  margin: var(--space-2) 0 0;
}

.issue-list--sample {
  margin-bottom: var(--space-5);
}

/* --------------------------------------------------------------------------
   10. Issue (article) page (section 6, "ISSUE (ARTICLE) PAGE"). Step 03 renders it.
   -------------------------------------------------------------------------- */
.issue__header {
  padding-top: var(--space-7);
  margin-bottom: var(--space-7);
}

.issue__number {
  display: block;
  margin-bottom: var(--space-3);
}

.issue__title {
  font-size: var(--text-h1);
  margin-bottom: var(--space-3);
}

.issue__date {
  display: block;
}

.issue__body {
  max-width: var(--measure);
  margin-inline: auto;
  line-height: var(--leading-body);
}

.issue__body h2,
.issue__body h3 {
  margin-top: var(--space-7);
}

.issue__body .hairline--short {
  margin-block: var(--space-7) var(--space-6);
}

.issue__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--line);
}

.issue__cta {
  margin-top: var(--space-8);
}

/* --------------------------------------------------------------------------
   11. Motion: the one orchestrated hero reveal (section 7)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: reveal 600ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * var(--reveal-step));
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: none;
  }
}

/* The off switch: no non-essential motion when the reader asked for none. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .button--primary:hover {
    transform: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   12. Responsive: the one breakpoint (768px)
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
  :root {
    --gutter: var(--space-6);
    --section-gap: var(--space-8);
  }

  .site-header {
    padding-block: var(--space-6);
  }

  .site-nav__list {
    gap: 0 var(--space-5);
  }

  .subscribe__row {
    flex-direction: row;
    align-items: flex-end;
  }

  .subscribe__input {
    flex: 1 1 auto;
  }

  .subscribe__field {
    flex: 1 1 auto;
  }

  .subscribe__button {
    flex: 0 0 auto;
  }

  .hero {
    padding-block: var(--space-9) var(--space-8);
  }

  .section--closing {
    padding-bottom: var(--space-9);
  }

  .site-footer {
    padding-block: var(--space-9) var(--space-8);
    margin-top: var(--space-9);
  }

  .site-footer__subscribe {
    margin-bottom: var(--space-8);
  }

  .footer-nav__list {
    flex-direction: row;
    gap: 0 var(--space-5);
  }

  .wordmark {
    font-size: 1.625rem;
  }
}

/* --------------------------------------------------------------------------
   13. Optional dark mode (section 9): warm near-black, ivory ink, same gold,
       the glow dialed down. Never cold grey.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15120C;
    --paper-deep: #1C1810;
    --ink: #F0EAD9;
    --ink-soft: #C9C0AC;
    --ink-faint: #8A8275;
    --line: #2E2819;
    --light-text: #E0A93D;
    --ink-lift: #FFF7E3;
    --error: #D98A6E;
    --glow-core: rgba(192, 138, 45, 0.10);
    --glow-mid: rgba(192, 138, 45, 0.06);
  }
}

:root[data-theme="dark"] {
  --paper: #15120C;
  --paper-deep: #1C1810;
  --ink: #F0EAD9;
  --ink-soft: #C9C0AC;
  --ink-faint: #8A8275;
  --line: #2E2819;
  --light-text: #E0A93D;
  --ink-lift: #FFF7E3;
  --error: #D98A6E;
  --glow-core: rgba(192, 138, 45, 0.10);
  --glow-mid: rgba(192, 138, 45, 0.06);
}

/* --------------------------------------------------------------------------
   Step 03: archive and issue
   Archive bottom copy, issue page chrome (breadcrumb, header, related,
   prev/next), the reader gate, the reading-link form, and the body split.
   Appended by the Step 03 build; the sections above are owned by Steps 01/02.
   -------------------------------------------------------------------------- */

/* Archive */
.archive__bottom {
  color: var(--ink-soft);
  margin-bottom: var(--space-5);
}

.issue-list__meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-2) 0 0;
}

.issue-list__meta .issue-list__date {
  margin: 0;
}

.issue-list__access {
  color: var(--ink-faint);
}

/* Issue page: the reading experience */
.issue {
  padding-block: 0 var(--space-7);
}

.breadcrumb {
  margin-bottom: var(--space-6);
}

.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--ink-faint);
}

.breadcrumb__list li + li::before {
  content: "\203A";
  margin-right: var(--space-2);
  color: var(--light);
}

.breadcrumb__list a {
  color: var(--ink-faint);
}

.breadcrumb__list a:hover,
.breadcrumb__list a:focus-visible {
  color: var(--ink);
}

.issue__meta {
  margin: 0;
}

.issue__meta .issue__date {
  display: inline;
}

/* The gated remainder stays in the HTML for indexing; CSS hides it. */
.issue-gated {
  display: none;
}

.issue-open ul,
.issue-open ol,
.issue-gated ul,
.issue-gated ol {
  padding-left: 1.25em;
}

.issue-open li,
.issue-gated li {
  margin-bottom: var(--space-3);
}

.issue-open li::marker,
.issue-gated li::marker {
  color: var(--ink-faint);
}

/* The gate: gold hairline, Fraunces heading, one line, the shared form,
   then the reading-link form. No modal, overlay, blur or countdown. */
.gate {
  margin-block: var(--space-7);
  padding-block: var(--space-6) var(--space-7);
  border-bottom: var(--hairline) solid var(--line);
}

.gate .hairline--short {
  margin-block: 0 var(--space-5);
}

.gate__heading {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  margin-bottom: var(--space-3);
}

.gate__line {
  color: var(--ink-soft);
  margin-bottom: var(--space-5);
}

.gate .subscribe {
  max-width: none;
}

/* Reading-link form: a <details> that expands inline, no JS required. */
.reading-link {
  margin-top: var(--space-5);
}

.reading-link__summary {
  display: inline;
  cursor: pointer;
  list-style: none;
  color: var(--light-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--duration) var(--ease-out);
}

.reading-link__summary::-webkit-details-marker {
  display: none;
}

.reading-link__summary:hover,
.reading-link__summary:focus-visible,
.reading-link[open] .reading-link__summary {
  text-decoration-color: var(--light);
}

.reading-link__body {
  margin-top: var(--space-4);
}

/* Related issues (hub-and-spoke) */
.related {
  margin-top: var(--space-8);
}

.related .hairline--short {
  margin-block: 0 var(--space-5);
}

.related__heading {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  margin-bottom: var(--space-4);
}

.related__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.related__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: var(--hairline) solid var(--line);
}

.related__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.related__number {
  color: var(--ink-faint);
  padding-top: 0.35em;
}

.related__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  font-variation-settings: "opsz" 48;
}

/* Prev / next */
.issue-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--line);
}

.issue-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--ink);
  text-decoration: none;
}

.issue-nav__link--next {
  text-align: right;
}

.issue-nav__label {
  color: var(--ink-faint);
}

.issue-nav__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  font-variation-settings: "opsz" 48;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--duration) var(--ease-out);
}

.issue-nav__link:hover .issue-nav__title,
.issue-nav__link:focus-visible .issue-nav__title {
  text-decoration-color: var(--light);
}

.issue__archive-link {
  margin-top: var(--space-6);
}

.issue__cta .hairline--short {
  margin-block: 0 var(--space-5);
}

@media (min-width: 48em) {
  .issue-nav {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .issue-nav__link--next {
    grid-column: 2;
  }
}

/* Step 04/05 */
.contact .subscribe__message--error {
  margin-bottom: var(--space-4);
}

.contact--success .subscribe__message--success {
  margin-top: 0;
}

.page--confirm .section--first .prose {
  margin-top: var(--space-4);
}

/* ==========================================================================
   Step 06-10: fonts, CSP-safe reveal, legal pages, accessibility
   ========================================================================== */

/* Fraunces is self-hosted (public/assets/fonts, SIL OFL 1.1), subset to
   Latin, opsz 9 to 144 and wght 100 to 900 live, SOFT/WONK pinned at the
   defaults Google Fonts serves. font-display: swap so text never waits on
   it; head-meta preloads this file. The local() names let a system copy win. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Fraunces"), url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The hero reveal order used to be an inline style (--i). Under a CSP with no
   'unsafe-inline' for styles that attribute is blocked, so the order is a
   data attribute mapped here. Same stagger, same tokens. */
.reveal[data-reveal="0"] { --i: 0; }
.reveal[data-reveal="1"] { --i: 1; }
.reveal[data-reveal="2"] { --i: 2; }
.reveal[data-reveal="3"] { --i: 3; }
.reveal[data-reveal="4"] { --i: 4; }

/* Legal pages (Step 10): the reading page, quiet. The DRAFT nf_reader
   paragraphs render as ordinary prose; nothing marks them visually. */
.legal__body h2 {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  margin-top: var(--space-7);
}

.legal__body ul {
  padding-left: 1.1em;
}

.legal__nav {
  margin-top: var(--space-8);
}

.legal__nav .footer-nav__list {
  padding: 0;
  margin: 0;
}

.footer-nav__list--legal {
  margin-top: var(--space-3);
}

/* Footer: the two rows (site pages, legal pages). */
.footer-nav__list--legal a {
  color: var(--ink-faint);
}

.footer-nav__list--legal a:hover,
.footer-nav__list--legal a:focus-visible {
  color: var(--ink);
}

/* Accessibility: a visible gold focus ring on controls whose own focus style
   replaced the outline (the input ring above is gold already). Windows High
   Contrast / forced-colors keeps a system outline. */
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid CanvasText;
  }
}

/* Decorative glows never intercept pointer or focus. */
.hero__glow,
.reading__glow {
  pointer-events: none;
}

/* Fixed-dimension images never overflow a 375px viewport. */
img {
  max-width: 100%;
  height: auto;
}

/* Step 11/12 */
/* The 500 page reference line (request id) so a reader can quote it. */
.error__reference {
  margin: var(--space-4) 0 var(--space-5);
  text-transform: none;
  user-select: all;
}

/* Step 13-17 */

/* The SVG wordmark (Step 16): paths from Fraunces, currentColor so it is ink
   on paper and ivory in dark mode; the light stays gold. Height is set in em
   so the header and footer scales stay where the text wordmark was. The
   viewBox is 661.2 x 107.7 (about 6.14:1), so 1.1em tall is about 6.75em wide. */
.wordmark__svg {
  display: block;
  height: 1.1em;
  width: auto;
  fill: currentColor;
}

.wordmark--footer {
  margin-bottom: var(--space-5);
  font-size: 1.25rem;
}

/* /links: one centred column, big tappable rows, the glow once. */
.links {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8) var(--space-9);
}

.links__glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(120%, 48rem);
  aspect-ratio: 1.3 / 1;
  transform: translate(-60%, -34%);
  pointer-events: none;
  background: radial-gradient(
    ellipse at 42% 40%,
    var(--glow-core) 0%,
    var(--glow-mid) 28%,
    var(--glow-edge) 68%
  );
}

.links__inner {
  position: relative;
  max-width: 30rem;
  margin-inline: auto;
}

.links__header {
  text-align: center;
  margin-bottom: var(--space-7);
}

.wordmark--links {
  font-size: 2rem;
  justify-content: center;
}

.links__tagline {
  color: var(--light-text);
  margin: var(--space-3) 0 0;
}

.links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.links__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: var(--touch);
  padding: var(--space-4) var(--space-5);
  border: var(--hairline) solid var(--line);
  border-radius: 6px;
  background: var(--paper-deep);
  color: var(--ink);
  text-decoration: none;
  background-image: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.links__link:hover,
.links__link:focus-visible {
  border-color: var(--light);
  background-image: none;
}

.links__link--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.links__link--primary:hover,
.links__link--primary:focus-visible {
  background: var(--ink-lift);
  border-color: var(--light);
}

.links__label {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  font-variation-settings: "opsz" 48;
}

.links__note {
  font-size: var(--text-small);
  color: var(--ink-soft);
}

.links__link--primary .links__note {
  color: var(--paper);
  opacity: 0.8;
}

/* /brand: the asset list with a small preview per file. */
.brand-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.brand-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.brand-list__preview {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 80px;
  padding: var(--space-2);
  border: var(--hairline) solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  background-image: none;
}

.brand-list__preview--ink {
  background: #1A1611;
}

.brand-list__preview img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.brand-list__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.brand-list__meta {
  color: var(--ink-faint);
}

@media (min-width: 768px) {
  .wordmark--links {
    font-size: 2.5rem;
  }
}

/* Integration review: long bare URLs pasted into an issue must wrap on phones. */
.prose a, .issue__body a { overflow-wrap: anywhere; }

/* The N mark (Thaer's logo, 2026-11-03) sits before the wordmark in the header only. */
.wordmark__n { display: inline-block; height: 1.15em; width: auto; vertical-align: -0.18em; margin-right: 0.42em; color: inherit; }
/* With the N mark present, the wordmark's own gold dot would double the light. Hide it. */
.wordmark__n + .wordmark__svg .wordmark__light { display: none; }