/* --- 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);
}

/* --- Forms ------------------------------------------------------------ */
/* Blanks on a form, not app-style inputs: no fill, no radius, no shadow.
   A single rule marks the writing line; hover/focus thicken and darken it. */

.form { max-width: var(--measure); margin-top: var(--s-4); }

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

@media (min-width: 34rem) {
  .form__row { grid-template-columns: 1fr 1fr; }
}

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

.field label,
.field-group legend {
  display: block;
  margin-bottom: var(--s-2);
  padding: 0;
  font-family: var(--font-meta);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field input[type="text"],
.field input[type="email"],
.field select {
  display: block;
  width: 100%;
  padding: var(--s-2) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease);
}

.field select { appearance: none; cursor: pointer; }

.field input[type="text"]:hover,
.field input[type="email"]:hover,
.field select:hover { border-bottom-color: var(--ink); }

.field input[type="text"]:focus-visible,
.field input[type="email"]:focus-visible,
.field select:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--claret);
  padding-bottom: calc(var(--s-2) - 1px);
}

.field input[type="file"] {
  display: block;
  width: 100%;
  padding: var(--s-3) 0;
  font-family: var(--font-meta);
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.field-hint {
  margin: var(--s-2) 0 0;
  font-family: var(--font-meta);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.field-group { margin: 0 0 var(--s-6); padding: 0; border: none; }

.field-waiver {
  margin-bottom: var(--s-6);
  padding-top: var(--s-2);
  border-top: 1px solid var(--rule-hair);
}

.field-waiver summary {
  padding: var(--s-2) 0;
  font-family: var(--font-meta);
  font-size: 0.8125rem;
  color: var(--claret);
  cursor: pointer;
}
.field-waiver summary:hover { color: var(--claret-lift); }

/* Track choice — two plain bordered options, not cards with shadow */
.track-option {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.track-option:hover { border-color: var(--rule-strong); }
.track-option:has(input:checked) { border-color: var(--ink); }
.track-option input { margin-top: 0.3em; accent-color: var(--claret); }
.track-option__name {
  display: block;
  font-family: var(--font-meta);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}
.track-option__desc {
  display: block;
  margin-top: var(--s-1);
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.checkbox {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-bottom: var(--s-3);
  font-size: 0.9375rem;
  color: var(--ink-muted);
  cursor: pointer;
}
.checkbox input { margin-top: 0.3em; accent-color: var(--claret); flex-shrink: 0; }

.form .notice { margin-bottom: var(--s-6); }

/* --- Admin table ------------------------------------------------------ */

.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-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-muted);
  white-space: nowrap;
}

.admin-status--paid,
.admin-status--submitted,
.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; }
}