/* --- Self-hosted fonts ----------------------------------------------------
   Served from our own origin rather than the Google Fonts CDN: loading fonts
   from Google transmits the visitor's IP to a third party, which a German
   court has held to breach the GDPR. Same-origin also removes a DNS lookup
   and TLS handshake from the critical path.

   All three families are SIL Open Font License 1.1 — see assets/fonts/OFL.txt.
   unicode-range keeps latin-ext off the wire unless a page actually contains
   those characters (author names with diacritics will pull it in).
   Add the vietnamese/cyrillic/greek subsets here if author names ever need them.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/archivo-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/archivo-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/eb-garamond-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/eb-garamond-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/libre-caslon-display-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/libre-caslon-display-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   The International Secondary Scholarship Review (TISSR)
   Design system. Rules and type only: no cards, no shadows, no gradients.
   The page should read as a printed record, not as a product.

   To rename the journal, replace all three across the .html files (plus the
   favicon's aria-label): the three .masthead__line spans "The International" /
   "Secondary Scholarship" / "Review", the full name "The International
   Secondary Scholarship Review", and the acronym "TISSR". If the new name is
   short enough to fit two lines, drop back to two spans — see the .toc__entry
   git history for that layout — but verify at 375px first; a wrapped span
   silently becomes three visual lines even though it's written as one.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Paper & ink. Never pure #FFF or #000 — both read as screen, not page.
     Values sampled from the broadsheet reference: the ink is near-identical
     to a neutral near-black, but grounding it on warm cream instead of a
     near-white is what stops it reading as aggressive. */
  --paper:        #F4F1E9;
  --paper-raised: #FBFAF5;
  --paper-sunk:   #EAE4D5;
  --ink:          #16140F;
  --ink-muted:    #45413A;
  /* 4.97:1 on cream — headroom kept for 11px uppercase metadata. */
  --ink-faint:    #6E6759;
  /* Three weights of rule, all warm grey rather than ink. The structural
     rules carry the masthead, so they need presence — but drawn in near-black
     at 2px full-width they were the largest block of black on the page, and
     read heavier than the text they framed. */
  --rule-strong:  #756D5D;
  --rule:         #D3CBB8;
  --rule-hair:    #E1DACA;

  /* Used surgically: discipline tags, links, the rare mark of emphasis.
     A press red rather than an oxblood — warmer, and it reads as editorial
     rather than funereal. 5.8:1 on cream. */
  --claret:       #A6382C;
  --claret-lift:  #C9503F;

  --font-display: 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --font-text:    'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-meta:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* 4/8 rhythm */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-6: 1.5rem;  --s-8: 2rem;    --s-12: 3rem;   --s-16: 4rem;
  --s-24: 6rem;   --s-32: 8rem;

  --measure: 34rem;      /* ~68ch of EB Garamond — the reading column */
  --page:    76rem;      /* outer container */

  --dur: 200ms;
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #14120E;
    --paper-raised: #1C1914;
    --paper-sunk:   #1F1B15;
    --ink:          #F2EFE6;
    --ink-muted:    #C0B9A9;
    --ink-faint:    #8F8878;
    --rule-strong:  #6B6355;
    --rule:         #38322A;
    --rule-hair:    #26221C;
    /* Lifted toward the same hue as the light-mode press red. 7:1 on ink. */
    --claret:       #E0917F;
    --claret-lift:  #ECA695;
  }
}

/* --- Reset ---------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  /* Oldstyle figures in running text — numerals should sit in the line,
     not stand above it like a spreadsheet. */
  font-feature-settings: "onum" 1, "kern" 1, "liga" 1;
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

/* --- Skip link ------------------------------------------------------------ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-meta);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

/* --- Focus ---------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--claret);
  outline-offset: 3px;
}

/* --- Layout --------------------------------------------------------------- */

.page {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

@media (min-width: 48rem)  { .page { padding-inline: var(--s-12); } }
@media (min-width: 90rem)  { .page { padding-inline: var(--s-8); } }

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

/* --- Masthead ------------------------------------------------------------- */
/* Double rule above and below, per broadsheet convention: a heavy rule
   paired with a hairline. This is the single most load-bearing detail. */

.masthead {
  padding-top: var(--s-6);
}

.masthead__brow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--rule-strong);
}

.masthead__brow span:nth-child(2) { display: none; }

@media (min-width: 48rem) {
  .masthead__brow span:nth-child(2) { display: block; }
}

/* Wrapper so the cover wordmark can be an h1 without inheriting heading margins */
.masthead__title { margin: 0; font-size: inherit; font-weight: inherit; }

.masthead__wordmark {
  display: block;
  margin: var(--s-8) 0 var(--s-6);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  /* Wide tracking is what makes a wordmark read as an institution rather
     than as a heading. Held to 0.18em here rather than the 0.3em a single
     short word could carry — at this length, wider breaks the line apart. */
  letter-spacing: 0.18em;
  /* Compensate for the trailing letterspace so each line stays optically centred */
  text-indent: 0.18em;
  text-align: center;
  line-height: 1.24;
  font-size: clamp(1.0625rem, 4vw, 2.5rem);
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--s-1);   /* clears 44px at the smallest clamp size */
}

/* A long institutional name is set as a stacked block, the way a real
   journal masthead breaks across lines. Each line is an explicit span so
   the break never lands somewhere arbitrary at an odd viewport width. */
.masthead__line { display: block; }

.masthead__tagline {
  margin: 0;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-meta);
  font-size: clamp(0.625rem, 1.6vw, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-muted);
}

/* Dateline strip — VOL. I · NO. 1 · SPRING 2026 */
.dateline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Hidden until the strip fits on one line — a wrapped dateline otherwise
   leaves a separator dangling at the end of a row. The flex gap carries
   the separation on small screens. */
/* Mixed rather than set to --rule: at rule weight the separators all but
   vanished on cream. ~2.7:1 keeps them visible but clearly subordinate to
   the metadata they divide, and the mix follows the theme automatically. */
.dateline__sep {
  display: none;
  color: color-mix(in srgb, var(--ink-faint) 62%, var(--paper));
}

@media (min-width: 60rem) {
  .dateline__sep { display: inline; }
}

/* Compact running head for interior pages. A journal shows its full masthead
   on the cover and a reduced one on every page after it. */

.masthead--compact .masthead__wordmark {
  margin: var(--s-6) 0 var(--s-3);
  font-size: clamp(0.8125rem, 2.2vw, 1.1875rem);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  line-height: 1.3;
}

.masthead--compact .masthead__tagline {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  padding-bottom: var(--s-3);
}

/* --- Page header (interior pages) ----------------------------------------- */

.page-header {
  padding-block: var(--s-16) var(--s-12);
  border-bottom: 1px solid var(--rule);
}

.page-header__kicker {
  margin: 0 0 var(--s-4);
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.page-header h1 {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  margin-bottom: var(--s-6);
}

.page-header .lede { max-width: 42rem; margin-bottom: 0; }

/* --- Archive -------------------------------------------------------------- */

.issue {
  padding-block: var(--s-12);
  border-bottom: 1px solid var(--rule-hair);
}

.issue__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}

.issue__title {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
}

.issue__meta {
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Forthcoming issues are stated plainly rather than hidden. An empty archive
   is the honest condition of a new journal; pretending otherwise reads worse. */
.issue--forthcoming { opacity: 0.72; }

.issue--forthcoming .issue__title { color: var(--ink-muted); }

.notice {
  padding: var(--s-6);
  border: 1px solid var(--rule);
  background: var(--paper-sunk);
  font-size: 1rem;
  color: var(--ink-muted);
  max-width: var(--measure);
}

.notice strong { color: var(--ink); font-weight: 600; }

/* --- Ordered prose list --------------------------------------------------- */

.list-plain {
  margin: 0 0 var(--s-4);
  padding-left: var(--s-6);
  max-width: var(--measure);
  color: var(--ink-muted);
}

.list-plain li { margin-bottom: var(--s-3); }

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

/* --- Navigation ----------------------------------------------------------- */

.nav {
  border-bottom: 2px solid var(--rule-strong);
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Row gap must exceed the invisible hit-area expansion below (28px total)
     so that stacked rows on mobile never overlap each other's targets. */
  gap: var(--s-8) var(--s-8);
  margin: 0;
  padding: var(--s-4) 0;
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  cursor: pointer;
}

/* Expand the tap target to 44px without moving the underline away from the
   text. A padded link would push the rule too far below the word and lose
   the tight editorial set. */
.nav__link::before {
  content: "";
  position: absolute;
  inset: -14px -10px;
}

.nav__link:hover { border-bottom-color: var(--ink); }

.nav__link[aria-current="page"] {
  border-bottom-color: var(--claret);
  color: var(--claret);
}

/* --- Section headings ----------------------------------------------------- */

.section {
  padding-block: var(--s-16);
  border-bottom: 1px solid var(--rule-hair);
}

.section:last-of-type { border-bottom: none; }

.section__label {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: 0 0 var(--s-8);
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The rule that runs off to the right of a section label */
.section__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* --- Typography ----------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
}

.display {
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  line-height: 1.14;
}

.display em {
  font-family: var(--font-text);
  font-style: italic;
}

h2 { font-size: clamp(1.5rem, 3.2vw, 2.125rem); }
h3 { font-size: clamp(1.1875rem, 2.2vw, 1.4375rem); }

.prose h3 { font-weight: 600; }

p { margin: 0 0 var(--s-4); }

.lede {
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink-muted);
}

.prose p { max-width: var(--measure); }

/* :not(.button) is load-bearing — `.prose a` outranks `.button` on
   specificity, so without it a button placed inside prose loses its own
   colour and renders accent-on-ink. */
.prose a:not(.button),
.link {
  color: var(--claret);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--claret) 40%, transparent);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  cursor: pointer;
}

.prose a:not(.button):hover,
.link:hover { color: var(--claret-lift); border-bottom-color: var(--claret-lift); }

/* Drop-style opening: small caps on the first line of an editorial statement */
.opening::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
}

/* --- Table of contents ---------------------------------------------------- */
/* The hero of the homepage. For a journal, the proof is the work itself —
   so the current issue's contents sit above the fold, not a pitch. */

.toc {
  border-top: 1px solid var(--rule-strong);
  margin: 0;
}

.toc__entry {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--rule-hair);
  transition: background-color var(--dur) var(--ease);
}

@media (min-width: 60rem) {
  .toc__entry {
    grid-template-columns: 3rem minmax(0, 1fr) 17rem;
    gap: var(--s-6);
    align-items: baseline;
  }
}

/* Full-row hover: bleeds slightly past the container so the wash reads
   as a page band rather than a box. */
.toc__entry:hover {
  background: var(--paper-sunk);
  box-shadow: -0.75rem 0 0 var(--paper-sunk), 0.75rem 0 0 var(--paper-sunk);
}

.toc__num {
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-variant-numeric: normal;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  padding-top: 0.35em;
}

/* Same reasoning as the process numerals: the period keeps "I" a numeral. */
.toc__num::after { content: "."; }

.toc__title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  line-height: 1.24;
  margin: 0;
}

.toc__title a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
  cursor: pointer;
}

.toc__entry:hover .toc__title a { border-bottom-color: var(--ink); }

.toc__discipline {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-text);
  font-style: italic;
  font-size: 1rem;
  color: var(--claret);
}

.toc__byline {
  grid-column: 2 / -1;
  font-family: var(--font-meta);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ink-muted);
  font-variant-numeric: normal;
}

@media (min-width: 60rem) {
  .toc__byline {
    grid-column: 3;
    text-align: right;
    margin-top: 0;
  }
}

.toc__author { display: block; color: var(--ink); font-weight: 500; }
.toc__school { display: block; }
.toc__place  { display: block; color: var(--ink-faint); }

/* --- Numbered process (peer review) --------------------------------------- */

.process {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  border-top: 1px solid var(--rule);
}

.process__step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding: var(--s-8) 0;
  border-bottom: 1px solid var(--rule-hair);
}

@media (min-width: 48rem) {
  .process__step {
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }
}

/* The trailing period is load-bearing: a bare roman "I" at display size
   reads as a stray rule rather than a numeral. */
.process__step::before {
  content: counter(step, upper-roman) ".";
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1;
  color: var(--ink-faint);
}

/* h4 appears where a process list is nested under an h3 (the waiver steps),
   so it must carry the same weight as an h3 step title. */
.process__step h3,
.process__step h4 {
  margin-bottom: var(--s-2);
  font-size: clamp(1.1875rem, 2.2vw, 1.4375rem);
}
.process__step p  { max-width: var(--measure); margin-bottom: 0; color: var(--ink-muted); }
.process__step .list-plain { color: var(--ink-muted); }

/* --- Statement block ------------------------------------------------------ */
/* A pulled editorial line, set large. Used once per page at most. */

.statement {
  margin: 0;
  padding: var(--s-12) 0;
}

.statement blockquote {
  margin: 0;
  max-width: 46rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3.4vw, 2.25rem);
  line-height: 1.28;
}

.statement cite {
  display: block;
  margin-top: var(--s-6);
  font-family: var(--font-meta);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Two-column editorial ------------------------------------------------- */

.columns {
  display: grid;
  gap: var(--s-8);
}

@media (min-width: 60rem) {
  .columns {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--s-16);
    align-items: start;
  }
}

.columns__aside {
  font-family: var(--font-meta);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

@media (min-width: 60rem) {
  .columns__aside { position: sticky; top: var(--s-8); }
}

/* --- Definition list (specs, deadlines) ----------------------------------- */

.specs {
  margin: 0;
  border-top: 1px solid var(--rule);
}

.specs > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule-hair);
}

@media (min-width: 48rem) {
  .specs > div {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--s-6);
    align-items: baseline;
  }
}

.specs dt {
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.specs dd {
  margin: 0;
  color: var(--ink);
}

/* --- Roster (institution list) -------------------------------------------- */
/* Names only, set as a ledger. Deliberately no logos: reproducing university
   marks would imply exactly the endorsement this section must not claim, and
   those marks are trademarked. */

.roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0 var(--s-8);
  border-top: 1px solid var(--rule);
}

.roster li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule-hair);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
}

.roster__note {
  margin: var(--s-6) 0 0;
  max-width: var(--measure);
  font-family: var(--font-meta);
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--ink-faint);
}

/* --- Buttons -------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;              /* touch target */
  padding: var(--s-3) var(--s-6);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-meta);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  cursor: pointer;
}

.button:hover { background: transparent; color: var(--ink); }

.button--quiet {
  background: transparent;
  color: var(--ink);
}

.button--quiet:hover { background: var(--ink); color: var(--paper); }

.button__arrow { transition: transform var(--dur) var(--ease); }
.button:hover .button__arrow { transform: translateX(3px); }

/* --- Footer --------------------------------------------------------------- */

.footer {
  border-top: 2px solid var(--rule-strong);
  padding-block: var(--s-12) var(--s-8);
  margin-top: var(--s-16);
}

.footer__grid {
  display: grid;
  gap: var(--s-8);
  margin-bottom: var(--s-12);
}

@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-12); }
}

@media (min-width: 60rem) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}

.footer__heading {
  margin: 0 0 var(--s-4);
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: var(--s-1); }

/* Footer links get 26px targets — above the WCAG 2.2 target-size minimum of
   24px. A full 44px per link would balloon the footer out of proportion. */
.footer__list a {
  display: inline-block;
  padding-block: 5px;
  font-family: var(--font-meta);
  font-size: 0.8125rem;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  cursor: pointer;
}

.footer__list a:hover { color: var(--ink); border-bottom-color: var(--rule); }

.footer__colophon {
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule-hair);
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
}

/* --- Submission form ------------------------------------------------------ */
/* Same materials as the rest of the paper: hairline rules, no radius, meta
   face for labels, claret only where the eye needs to land. Fields are sunk
   rather than raised so the form reads as something written into the page. */

.form {
  max-width: 46rem;
  margin-top: var(--s-8);
}

.form__group {
  border: 0;
  min-inline-size: 0;
  border-top: 1px solid var(--rule);
  padding: var(--s-8) 0 0;
  margin: 0 0 var(--s-12);
}

.form__legend {
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--claret);
  padding: 0 var(--s-4) 0 0;
}

.form__row { display: grid; gap: var(--s-6); margin-bottom: var(--s-6); }

@media (min-width: 40rem) {
  .form__row { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}

.field { margin-bottom: var(--s-6); }
.form__row .field { margin-bottom: 0; }

.field__label {
  display: block;
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
}

.field__input,
.field__select {
  width: 100%;
  min-height: 44px;
  padding: var(--s-3);
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.4;
  border: 1px solid var(--rule);
  border-radius: 0;
  transition: border-color var(--dur) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

/* The select needs its chevron back after appearance:none. Drawn in CSS so
   nothing new is fetched and the mark follows the ink colour in dark mode. */
.field__select {
  padding-right: var(--s-8);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) calc(50% + 1px),
    calc(100% - 0.85rem) calc(50% + 1px);
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

.field__input:hover,
.field__select:hover { border-color: var(--rule-strong); }

.field__input:focus,
.field__select:focus,
.field__file:focus {
  outline: 2px solid var(--claret);
  outline-offset: 2px;
  border-color: var(--claret);
}

.field__input:user-invalid,
.field__select:user-invalid { border-color: var(--claret); }

.field__file {
  display: block;
  width: 100%;
  padding: var(--s-3);
  background: var(--paper-sunk);
  color: var(--ink-muted);
  font-family: var(--font-meta);
  font-size: 0.875rem;
  border: 1px dashed var(--rule-strong);
}

.field__file::file-selector-button {
  margin-right: var(--s-4);
  padding: var(--s-2) var(--s-4);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
}

.field__hint {
  max-width: var(--measure);
  margin: var(--s-2) 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.field__note {
  max-width: var(--measure);
  margin: var(--s-2) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-hair);
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

/* --- Confirmations -------------------------------------------------------- */

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  max-width: var(--measure);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule-hair);
  cursor: pointer;
}

.check:first-of-type { border-top: 1px solid var(--rule-hair); }

.check input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.3rem;
  accent-color: var(--claret);
}

.check span { color: var(--ink-muted); line-height: 1.5; }
.check:hover span { color: var(--ink); }

/* --- Foot ----------------------------------------------------------------- */

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6);
  padding-top: var(--s-4);
}

.form__foot-note {
  flex: 1 1 18rem;
  max-width: 26rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* Off-canvas rather than display:none, which some automated submitters skip. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Reference on the confirmation page ----------------------------------- */
/* Hidden until main.js finds a reference to put in it, so the page never
   shows an empty frame to someone arriving without one. */

.receipt[hidden] { display: none; }

.receipt {
  max-width: var(--measure);
  margin-bottom: var(--s-8);
  padding: var(--s-6);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--claret);
}

.receipt__label {
  margin: 0 0 var(--s-2);
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.receipt__ref {
  margin: 0;
  font-family: var(--font-meta);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  word-break: break-all;
}

/* --- Editors' dashboard --------------------------------------------------- */
/* Only ever rendered on /admin. Same rules and meta face as everything else,
   so the internal page does not feel like a different product. */

.admin-table-wrap { overflow-x: auto; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.admin-table th {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  white-space: nowrap;
}

.admin-table td {
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--rule-hair);
  color: var(--ink);
  vertical-align: top;
}

.admin-table__muted { color: var(--ink-faint); font-size: 0.8125rem; }

.admin-table__ref {
  font-family: var(--font-meta);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  white-space: nowrap;
}

.admin-status {
  display: inline-block;
  padding: 0.15em 0.6em;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Paid and waived both mean the paper is ready to go to referees; an unpaid
   one is the only row an editor needs to act on, so it stays quiet. */
.admin-status--paid,
.admin-status--waived {
  border-color: var(--claret);
  color: var(--claret);
}

/* --- Motion --------------------------------------------------------------- */
/* Restrained by design: entries settle in, they don't perform.
   Elements are visible by default and only animate when JS confirms
   motion is wanted — so no-JS and reduced-motion never hide content. */

.js-reveal { opacity: 1; }

html.has-motion .js-reveal {
  opacity: 0;
  transform: translateY(12px);
}

html.has-motion .js-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

/* --- Print ---------------------------------------------------------------- */

@media print {
  .nav, .footer__grid, .button { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .toc__entry { break-inside: avoid; }
}