/* Site styles. Imports the design tokens. */
@import url("tokens.css?v=13");

/* ====================================================================
   Reset and root
   ==================================================================== */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--head-h) + var(--space-md));
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  padding-inline-end: env(safe-area-inset-right);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  /* Functional motion keeps running, just slower. */
  .btn__spinner {
    animation-duration: 1400ms !important;
    animation-iteration-count: infinite !important;
  }
}

::selection { background: var(--color-accent); color: var(--color-accent-ink); }

:focus { outline: none; }
:focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Small caps labels, set in the grotesque so they read as furniture
   rather than as another voice. */
.label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Dates, citations and identifiers. */
.data {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.skip {
  position: absolute;
  inset-inline-start: var(--space-md);
  inset-block-start: -4rem;
  z-index: var(--z-toast);
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-sm) var(--space-md);
  white-space: nowrap;
}
.skip:focus-visible { inset-block-start: var(--space-md); }

/* ====================================================================
   Headings: roman only. No italic display anywhere.
   ==================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-display); letter-spacing: -0.015em; line-height: 1.08; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-md); line-height: 1.3; letter-spacing: 0; }
h4 { font-size: var(--text-base); letter-spacing: 0; }

p { text-wrap: pretty; }

/* Justified with hyphenation, and only above the width where justification
   stops opening rivers between words. Narrow columns stay ragged-right. */
@media (min-width: 48rem) {
  .prose p, .entry__body, .pending, .plainlist li {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: auto;
  }
}
p + p { margin-block-start: var(--space-md); }

em { font-style: italic; }
b, strong { font-weight: 600; }

/* ====================================================================
   Links: accent is a highlighter, not a fill. One hover signal.
   ==================================================================== */

a { color: inherit; }

.lnk {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .lnk:hover { text-decoration-color: var(--color-accent); }
}
.lnk:active { color: var(--color-accent-2); }

/* ====================================================================
   Fixed header: logo, name, sections, back to top
   ==================================================================== */

.head {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-sticky);
  background: var(--color-paper);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  padding-inline: max(var(--space-lg), env(safe-area-inset-left)) max(var(--space-lg), env(safe-area-inset-right));
}

.head__bar {
  max-width: 100rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}

.head__id {
  grid-column: 2;
  justify-self: center;
  display: grid;
  gap: var(--space-3xs);
  justify-items: center;
  min-width: 0;
}
.head__name {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 2.14rem + 1.24vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.head__creds {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
  line-height: 1.4;
}

.head__logo {
  grid-column: 1;
  justify-self: center;
  display: flex;
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-paper-2);
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .head__logo:hover { border-color: var(--color-accent); } }
.el {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 0.4rem 0.9rem 0.5rem;
  min-width: 5rem;
  font-family: var(--font-ui);
  line-height: 1;
  text-align: start;
}
.el + .el { border-inline-start: var(--rule-hair) solid var(--color-rule-2); }
.el__z   { font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.el__sym { font-family: var(--font-display); font-size: 3.25rem; font-weight: 700; color: var(--color-accent); line-height: 1.05; }

.head__end {
  grid-column: 3;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.head__top,
.head__menu {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding-inline: var(--space-xl);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .head__top:hover, .head__menu:hover { background: var(--color-paper-3); border-color: var(--color-ink-2); }
}
.head__menu { display: none; }

.head__nav {
  max-width: 100rem;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding-block: var(--space-xs) var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.head__nav a {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-3xs);
  border-block-end: var(--rule-thick) solid transparent;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .head__nav a:hover { color: var(--color-ink); } }
.head__nav a[aria-current="true"] { color: var(--color-accent); border-block-end-color: var(--color-accent); }

@media (max-width: 61.99rem) {
  /* The name cannot sit on one line beside the logo and the menu button at
     phone widths, so it is allowed to wrap here. */
  .head__name { font-size: 1.125rem; white-space: normal; }
  .head__creds { font-size: 0.5625rem; letter-spacing: 0.06em; }
  .el { min-width: 2.5rem; padding: 0.25rem 0.45rem 0.3rem; }
  .el__sym { font-size: 1.25rem; }
  .el__z { font-size: 0.5rem; }
  .head__menu { font-size: 0.75rem; min-height: 2.5rem; padding-inline: var(--space-md); }
  .head__logo { justify-self: start; }
  .head__end { justify-self: end; }
  .head__menu { display: inline-flex; }
  .head__top  { display: none; }
  .head__nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 0;
  }
  .head__nav.is-open { display: flex; }
  .head__nav a {
    padding-block: var(--space-sm);
    border-block-end: var(--rule-hair) solid var(--color-rule);
  }
  .head__nav a[aria-current="true"] { border-block-end-color: var(--color-rule); }
}

/* ====================================================================
   Document shell
   ==================================================================== */

.doc {
  max-width: none;
  padding-block-start: calc(var(--head-h) + var(--space-xl));
  margin-inline: auto;
  padding-inline: max(var(--space-lg), env(safe-area-inset-left));
  padding-block-end: var(--space-2xl);
}

.sec { padding-block-start: var(--space-2xl); }
.sec--open { padding-block-start: 0; padding-block-end: var(--space-lg); }
/* Deliberately uneven rhythm: the record runs tighter, contact gets air */
.sec--record  { padding-block-start: var(--space-2xl); }
.sec--contact { padding-block-start: var(--space-2xl); }

/* Section heads stack vertically in one column. No hanging labels. */
.sec__head { margin-block-end: var(--space-lg); }
.sec__head h2 { max-width: 22ch; }
.sec__note {
  margin-block-start: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.prose { max-width: var(--measure); }
.prose p { margin-block-end: 0; }

.lede {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-ink-2);
  max-width: 56ch;
}

.hr {
  border: 0;
  border-block-start: var(--rule-hair) solid var(--color-rule);
  margin-block: var(--space-xl);
}

/* ====================================================================
   Opening
   ==================================================================== */



.open__creds {
  margin-block-start: var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.open__lede { margin-block-start: var(--space-lg); }
.open__body { margin-block-start: var(--space-xl); }

.seeking {
  margin-block-start: var(--space-lg);
  padding-inline-start: var(--space-md);
  border-inline-start: var(--rule-thick) solid var(--color-accent);
}
.seeking__label {
  display: block;
  color: var(--color-accent);
  margin-block-end: var(--space-2xs);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

/* ====================================================================
   Buttons: all eight states, one hover signal
   ==================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding-inline: var(--space-lg);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}

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

@media (hover: hover) and (pointer: fine) {
  .btn:hover          { background: var(--color-paper-3); }
  .btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
}
.btn:active          { background: var(--color-rule); }
.btn--primary:active { background: var(--color-accent-2); border-color: var(--color-accent-2); color: var(--color-accent-ink); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.btn[data-state="loading"] { cursor: progress; }
.btn[data-state="loading"] .btn__spinner { display: inline-block; }
.btn[data-state="error"]   { border-color: var(--color-error); background: var(--color-paper); color: var(--color-error); }
.btn[data-state="success"] { border-color: var(--color-success); background: var(--color-success); color: var(--color-accent-ink); }

.btn__spinner {
  display: none;
  width: 0.75em;
  height: 0.75em;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (pointer: coarse) { .btn { min-height: 48px; } }

/* ====================================================================
   Publications
   ==================================================================== */

.pubs { list-style: none; }

.pub {
  padding-block: var(--space-xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
/* Text stays at measure; the figure uses the full column. */
.pub > :not(.pub__fig) { max-width: var(--measure); }
.pub:first-child { border-block-start: 0; padding-block-start: 0; }

/* Figure sits below the citation at full measure, so the chemistry is legible
   and the licence credit sits directly beneath the thing it covers. */
.pub__fig { margin: 0; margin-block-start: var(--space-lg); min-width: 0; }
.pub__figlink {
  display: inline-block;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.pub__figlink img { transition: border-color var(--dur-micro) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pub__figlink:hover img { border-color: var(--color-accent); }
}

.pub__fig img {
  display: block;
  max-width: 100%;
  max-height: 18rem;    /* one height for all three, so they read as a set */
  width: auto;
  height: auto;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
}
.pub__credit {
  margin-block-start: var(--space-xs);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-muted);
}
.pub__credit a {
  color: var(--color-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-2);
  text-underline-offset: 2px;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .pub__credit a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }
}

/* Placeholder for a paper whose figure is not yet cleared for reuse. */
.pub__slot {
  display: grid;
  place-content: center;
  gap: var(--space-2xs);
  aspect-ratio: 16 / 9;
  padding: var(--space-sm);
  border: var(--rule-hair) dashed var(--color-rule-2);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  text-align: center;
}
.pub__slot-title { color: var(--color-muted); }
.pub__slot-path {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  color: var(--color-muted);
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.pub__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.28;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.pub__authors {
  margin-block-start: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.6;
}
.pub__authors .me { color: var(--color-ink); font-weight: 600; }
.pub__cite {
  margin-block-start: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  overflow-wrap: anywhere;
}
.pub__meta {
  margin-block-start: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.tag {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  white-space: nowrap;
}
.tag--oa { color: var(--color-accent); border-color: var(--color-accent); }

.pending {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ====================================================================
   Record entries: research
   ==================================================================== */

/* Institution marks. Shown at natural colour, sized to a common optical
   height. Trademarks of their owners; identification only. */
.orgs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg) var(--space-xl);
  padding-block: var(--space-lg);
  margin-block-end: var(--space-lg);
  border-block: var(--rule-hair) solid var(--color-rule);
}
/* Crests and wordmarks are wildly different shapes, so they are balanced by
   optical area rather than by a single shared height. */
.orgs img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  max-height: 3.25rem;   /* tall crests: Durham, York, Glasgow */
  max-width: 6rem;
}
.orgs img.orgs__wordmark      { max-height: 2rem;   max-width: 6.5rem; }
.orgs img.orgs__wordmark--xw  { max-width: 8rem; }

@media (min-width: 40rem) {
  .orgs img                     { max-height: 4rem; max-width: 7rem; }
  .orgs img.orgs__wordmark      { max-height: 2.5rem; max-width: 7.5rem; }
  .orgs img.orgs__wordmark--xw  { max-width: 9.5rem; }
}

/* Two places, level with each other, at text measure. Not decoration:
   they anchor the institutions named in the entries above. */
.places {
  display: grid;
  gap: var(--space-xl);
  margin-block-start: var(--space-2xl);
}
@media (min-width: 44rem) {
  .places { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
}
.place { margin: 0; min-width: 0; }
.place img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: var(--rule-hair) solid var(--color-rule);
}
.place__cap {
  margin-block-start: var(--space-xs);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-muted);
}
.place__credit { display: block; margin-block-start: var(--space-3xs); }
.place__credit a {
  color: var(--color-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-2);
  text-underline-offset: 2px;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .place__credit a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }
}

.entries { list-style: none; }

.entry {
  padding-block: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  max-width: var(--measure);
}
.entry:first-child { border-block-start: 0; padding-block-start: 0; }

.entry__when {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-accent);
}
.entry__role  { margin-block-start: var(--space-2xs); }
.entry__where { font-size: var(--text-sm); color: var(--color-muted); margin-block-start: var(--space-3xs); }
.entry__body  { margin-block-start: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ====================================================================
   Record tables
   ==================================================================== */

.tablewrap { overflow-x: auto; }
.tablewrap--gap { margin-block-start: var(--space-xl); }
.prose--gap { margin-block-start: var(--space-xl); }

.rec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.rec caption {
  text-align: start;
  color: var(--color-muted);
  padding-block-end: var(--space-sm);
}
.rec th, .rec td {
  text-align: start;
  vertical-align: baseline;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-block-end: var(--rule-hair) solid var(--color-rule);
}
.rec th {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-ink);
}
.rec td { color: var(--color-ink-2); }
.rec td:last-child {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
  padding-inline-end: 0;
}

.plainlist { list-style: none; max-width: var(--measure); margin-block-start: var(--space-lg); }
.plainlist li {
  padding-block: var(--space-sm);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.plainlist li:last-child { border-block-end: 0; }

/* ====================================================================
   Writing
   ==================================================================== */

.posts { list-style: none; max-width: var(--measure); }
.post {
  padding-block: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.post:first-child { border-block-start: 0; padding-block-start: 0; }
.post__when {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.post__title { margin-block-start: var(--space-2xs); }
.post__title a { text-decoration-color: var(--color-rule-2); }
.post__dek   { margin-block-start: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.post__where { margin-block-start: var(--space-xs); color: var(--color-accent); }

/* ====================================================================
   Contact
   ==================================================================== */

.contact { display: grid; gap: var(--space-2xl); }
@media (min-width: 56rem) {
  .contact { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: start; }
}


/* The portrait closes the contact column. It sits flush to the column and
   carries the same hairline as the rows above, so it reads as the last block
   of that list rather than an image dropped on top of the layout. */
.contact__side { display: grid; gap: 0; align-content: start; }
.shot { margin: 0; }
.portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 32%;
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.direct { list-style: none; }
.direct li { border-block-end: var(--rule-hair) solid var(--color-rule); }
/* Narrow: value and tag stack, so neither ever wraps mid-string.
   Wide enough: they sit on one baseline with the tag flushed right. */
.direct a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
  padding-block: var(--space-sm);
  font-size: var(--text-sm);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur-micro) var(--ease-out);
}
@media (min-width: 26rem) {
  .direct a {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
  }
}
@media (hover: hover) and (pointer: fine) { .direct a:hover { color: var(--color-accent); } }
.direct__tag { color: var(--color-muted); white-space: nowrap; }

/* ---- Form. Border width is constant across every state. ---- */

.form { display: grid; gap: var(--space-lg); }
.frow { display: grid; gap: var(--space-lg); }
@media (min-width: 30rem) { .frow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.field { display: grid; gap: var(--space-2xs); }
.field__label { color: var(--color-ink-2); }
.field__req { color: var(--color-accent); }

.input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-md);
  padding-inline-end: var(--space-xl);          /* reserved right-edge slot */
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  outline: var(--rule-thick) solid transparent; /* reserved, no shift on focus */
  outline-offset: 1px;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.input::placeholder { color: var(--color-muted); opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .input:hover:not([disabled]) { background: var(--color-paper-2); }
}
.input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
.input[disabled] { opacity: 0.55; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.input[data-state="success"] { border-color: var(--color-success); }

textarea.input { resize: vertical; min-height: 7rem; padding-inline-end: var(--space-md); }
select.input { cursor: pointer; }

/* Helper reserves a line so validation never shifts the page */
.field__help {
  min-height: 1lh;
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: 1.5;
}
.field__help[data-state="error"] { color: var(--color-error); }

.form__status {
  font-size: var(--text-sm);
  line-height: 1.6;
  padding: var(--space-sm) var(--space-md);
  border-inline-start: var(--rule-thick) solid var(--color-rule-2);
}
.form__status:empty { display: none; }
.form__status[data-state="error"]   { color: var(--color-error);  border-inline-start-color: var(--color-error); }
.form__status[data-state="success"] { color: var(--color-accent); border-inline-start-color: var(--color-accent); }

.form__fallback { font-size: var(--text-xs); color: var(--color-muted); }

/* ====================================================================
   Colophon
   ==================================================================== */

.colophon {
  margin-block-start: var(--space-3xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}
.colophon__inner {
  max-width: none;
  margin-inline: auto;
  padding: var(--space-xl) max(var(--space-lg), env(safe-area-inset-left));
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: 1.85;
  color: var(--color-muted);
  text-wrap: pretty;
}

.colophon__inner p + p { margin-block-start: var(--space-md); }
.colophon__inner a {
  color: var(--color-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-2);
  text-underline-offset: 2px;
  white-space: nowrap;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .colophon__inner a:hover { text-decoration-color: var(--color-accent); }
}

/* ====================================================================
   Rail activates at desktop width
   ==================================================================== */

/* The rail is fixed, so the body is inset by its width and the document is
   centred in what remains. The reading column stays at measure; figures,
   tables and the logo strip take the extra width instead. */
@media (min-width: 60rem) {
  .doc, .colophon__inner { padding-inline: var(--space-2xl); }
}

/* ====================================================================
   Section reveal. Applied only when JS is running, so the page is never
   left invisible if the script fails, and skipped entirely for anyone
   who prefers reduced motion.
   ==================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal .sec {
    /* The opening never hides: it is the first thing a reader sees, and it
       must not depend on a script running to become visible. */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
  }
  .js-reveal .sec.is-in,
  .js-reveal .sec--open { opacity: 1; transform: none; }
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}