/* ===========================================================
   DouglasChildsLaNier.com
   Editorial type system. Composition and whitespace carry the
   design: no cards, boxes, banners or contrasting panels.
   =========================================================== */

:root {
  --paper:        #f7f5f0;
  --paper-deep:   #f1eee7;
  --ink:          #16150f;
  --ink-soft:     #3b382e;
  --muted:        #6f6a5c;
  --muted-light:  #918b7c;
  --rule:         #ddd7c9;
  --rule-faint:   #e8e3d8;
  --mark:         #f0e6c8;

  --serif:  "Libre Caslon Text", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --display:"Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid spacing scale */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.75rem;
  --s4: clamp(2rem, 4vw, 3.25rem);
  --s5: clamp(2.25rem, 4.5vw, 4rem);
  --s6: clamp(3rem, 6.5vw, 6rem);
  --s7: clamp(4rem, 9vw, 8.5rem);

  --page-x: clamp(1.5rem, 6vw, 6.5rem);
  --measure: 34em;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.55vw + 0.94rem, 1.1875rem);
  line-height: 1.72;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Links ---------- */

a { color: inherit; }

p a,
li a,
.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 160ms ease;
}
p a:hover, li a:hover, .prose a:hover { text-decoration-color: var(--ink); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

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

.page {
  padding-inline: var(--page-x);
  max-width: 78rem;
  margin-inline: auto;
}

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

/* Reading column, slightly indented from the page edge so it does not
   sit flush with wider elements. */
.prose {
  max-width: var(--measure);
  margin-inline-start: clamp(0rem, 6vw, 7rem);
}
.prose > p { margin: 0 0 1.2em; }
.prose > p:last-child { margin-bottom: 0; }

/* A deliberately narrower, uninterrupted column for passages the notes
   ask to be carried by prose alone. */
.prose--narrow { max-width: 30em; }

/* ---------- Masthead ---------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  padding-block: clamp(1.5rem, 3.5vw, 2.5rem) 0;
}

.masthead__name {
  font-family: var(--display);
  font-size: clamp(1rem, 1.3vw + 0.7rem, 1.3rem);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.masthead__name:hover { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

.nav {
  display: flex;
  gap: clamp(1.1rem, 2.6vw, 2.4rem);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav a { text-decoration: none; padding-block: 0.35rem; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }

/* On the home page the composed name carries the identity, so the
   masthead wordmark is suppressed and the nav sits alone. */
.masthead--home { justify-content: flex-end; }

/* ---------- Headings ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.14;
  margin: 0;
  letter-spacing: -0.005em;
}

/* Libre Caslon Display has no italic. Book titles set in display type
   borrow the companion text italic rather than a synthesised oblique. */
h1 em, h2 em, h3 em,
.headline__text em, .headline__deck em,
.tl-event__title em,
.lede em, .jacket__line em {
  font-family: var(--serif);
  font-style: italic;
}

.h-page {
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  line-height: 1.06;
}

.h-section {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.12;
}

/* The History page headline carries a book title and runs two lines, so it
   sits a step below the other pages' rather than above them. */
.h-page--history { font-size: clamp(1.9rem, 4.2vw, 3rem); }

.nobr { white-space: nowrap; }

.h-sub {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* A new visual chapter: heading with generous air around it. */
.chapter {
  margin-block: var(--s4) var(--s3);
}
.chapter .h-section { max-width: 18ch; }

/* ---------- Standalone sentences ---------- */
/* Lines the notes ask to stand alone: serif, restrained, no box,
   no quotation marks, no oversized display treatment. */

/* The notes rule out "oversized display type" and "oversized treatment"
   for these lines and name space as the device instead. So they are set
   in the reading face at reading size; isolation, a short measure and
   the air around them do the work. */
.standalone {
  font-family: var(--serif);
  font-size: 1em;
  /* Short enough that each sentence reads as composed rather than as
     another paragraph; balance keeps the lines even. */
  max-width: 40ch;
  text-wrap: pretty;
  margin: var(--s3) 0 var(--s3) clamp(0rem, 6vw, 7rem);
  color: var(--ink);
}

/* Wide enough that this line holds together as one phrase. */
.standalone--wide { max-width: 56ch; }

/* The line a section actually ends on. The notes distinguish a passage
   given "additional breathing room" from the one that is "the visual
   and emotional conclusion" - so the conclusion gets the larger type
   and the larger air, and the others stay below it. */
/* Every composed line is set identically; only the air around it says
   which one ends a section. A size step here read as a second typeface
   rather than as hierarchy. */
.standalone--final { margin-block: var(--s3) var(--s4); }  /* top matches a normal
   .standalone; only the air below is enlarged. Douglas asked for the extra space
   above it to go. Sole user is about.html's "I am only getting started." */

/* ---------- Figures ---------- */

figure { margin: 0; }

/* One normal line of space above and below an image, no more. */
.fig { margin-block: 1.2em; }

.fig img {
  width: 100%;
  background: var(--paper-deep);
}

.fig figcaption,
.caption {
  font-family: var(--sans);
  font-size: 0.775rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 0.45rem;
  letter-spacing: 0.005em;
}

/* Captions run the full width of the illustration they sit under; the
   ones too short to fill it are centred instead. */
.fig--caption-center figcaption { text-align: center; }

/* Widths — sizes vary deliberately so the page never settles into a
   repeating image-and-text rhythm. */
.fig--xs   { max-width: min(15rem, 34%); }
.fig--sm   { max-width: min(22rem, 46%); }
.fig--md   { max-width: min(30rem, 62%); }
.fig--lg   { max-width: min(42rem, 78%); }
.fig--full { max-width: 100%; }

/* Placement */
.fig--indent { margin-inline-start: clamp(0rem, 10vw, 11rem); }
.fig--right  { margin-inline-start: auto; }
.fig--off    { margin-inline-start: clamp(0rem, 4vw, 5rem); }

@media (max-width: 40em) {
  .fig--xs, .fig--sm, .fig--md, .fig--lg { max-width: 100%; }
  .fig--indent, .fig--off { margin-inline-start: 0; }
}

/* Copy set alongside an image rather than under it. Scoped to the wider
   screens the notes ask for; below that everything stacks as before. */
.runaround {
  max-width: 62rem;
  /* The floated figure leaves the flow, so the block carries its own line
     of space top and bottom. */
  margin-block: 1.2em;
  margin-inline-start: clamp(0rem, 6vw, 7rem);
}
.runaround::after { content: ""; display: table; clear: both; }
.runaround .prose { max-width: none; margin-inline-start: 0; }

.fig--float-left  { float: left;  margin: 0.3em 2.5rem 1.2em 0; }
.fig--float-right { float: right; margin: 0.3em 0 1.2em 2.5rem; }

@media (max-width: 52em) {
  .fig--float-left, .fig--float-right {
    float: none;
    margin-inline: 0;
    max-width: 100%;
  }
}

/* Clippings keep the character of the original newsprint: no frames,
   no drop shadows, no simulated aging. */
.fig--clipping img { mix-blend-mode: multiply; }

/* The clippings are held small by the notes, but the newsprint is worth
   reading, so the scan opens at full resolution. */
.fig__zoom { display: block; cursor: zoom-in; }
.fig__zoom:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ---------- Home ---------- */

.jacket {
  min-height: min(88vh, 54rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: var(--s5) var(--s6);
}

.jacket__type { position: relative; z-index: 2; }

.jacket__name {
  font-family: var(--display);
  font-size: clamp(2.6rem, 8.2vw, 6.4rem);
  line-height: 0.94;
  letter-spacing: -0.018em;
  margin: 0 0 var(--s4);
  max-width: 9ch;
}
.jacket__name span { display: block; }
.jacket__name span:nth-child(2) { margin-inline-start: clamp(0.5rem, 3vw, 2.6rem); }
.jacket__name span:nth-child(3) { margin-inline-start: clamp(1rem, 6vw, 5.2rem); }

.jacket__line {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.36;
  max-width: 26ch;
  margin: 0 0 var(--s4);
}

.jacket__book {
  max-width: 34ch;
  margin: 0 0 var(--s4);
  color: var(--ink-soft);
  font-size: 0.97em;
}

.jacket__portrait {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  /* The portrait runs past the page padding and off the right edge. */
  margin-inline-end: calc(var(--page-x) * -1);
  margin-block-end: calc(var(--s6) * -1);
  overflow: hidden;
}

.jacket__portrait img {
  width: 100%;
  max-width: 34rem;
  object-fit: cover;
  object-position: 50% 28%;
  aspect-ratio: 3 / 4;
}

@media (max-width: 56em) {
  .jacket {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: var(--s4) var(--s5);
  }
  .jacket__portrait {
    order: -1;
    margin-inline: calc(var(--page-x) * -1) calc(var(--page-x) * -1);
    margin-block-end: var(--s4);
    justify-content: flex-start;
  }
  .jacket__portrait img {
    max-width: none;
    aspect-ratio: 4 / 3;
    object-position: 50% 24%;
  }
  .jacket__name { max-width: none; }
}

/* ---------- Quiet editorial links ---------- */
/* Deliberately not buttons. */

.editorial-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 1px solid var(--rule);
  transition: border-color 160ms ease;
}
.editorial-link:hover { border-bottom-color: var(--ink); }

.editorial-link--lead { margin-top: var(--s2); }

.text-link {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--rule);
}
.text-link:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ---------- About: opening spread ---------- */

.spread {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-block: var(--s5) var(--s6);
}
.spread__figure { margin: 0; }
.spread__figure img { width: 100%; }
.spread__text { padding-top: clamp(0rem, 4vw, 4rem); }
.spread__text .h-section { margin-bottom: var(--s3); }
.spread__text p { margin: 0 0 1.35em; }
.spread__text p:last-child { margin-bottom: 0; }

@media (max-width: 56em) {
  .spread { grid-template-columns: 1fr; padding-block: var(--s4) var(--s5); }
  .spread__text { padding-top: 0; }
}

/* ---------- Books: cover presentation ---------- */

.book-open {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
  padding-block: var(--s4) var(--s5);
}

.book-open__cover img {
  width: 100%;
  /* Flat, as supplied — not a three-dimensional mockup. */
  border: 1px solid var(--rule-faint);
}

.lede {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  line-height: 1.32;
  margin: 0 0 var(--s3);
}

.book-open__more { margin: var(--s3) 0 0; }

/* A section heading opens on var(--s4) of space, whatever precedes it.
   .spread and .book-open end in PADDING, and padding does not collapse with
   the following margin the way two margins do - it stacks, which put the
   About and Books headings at ~146px and ~116px against everyone else's 52px.
   Dropping the trailing padding leaves .chapter's own margin as the one
   control. */
.spread:has(+ .chapter),
.book-open:has(+ .chapter) {
  padding-block-end: 0;
}

@media (max-width: 52em) {
  .book-open { grid-template-columns: 1fr; }
  .book-open__cover { max-width: 15rem; }
}

/* Publication status / genre / length */
.meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) clamp(2rem, 5vw, 4rem);
  margin-block: var(--s4) 0;
  padding: 0;
  list-style: none;
}
.meta-list div { min-width: 0; }
.meta-list dt {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 0.35rem;
}
.meta-list dd { margin: 0; font-size: 0.97em; }

/* ---------- Statistics and slogans (Books) ---------- */
/* Emphasis through type and spacing only — no charts, logos or panels. */

/* Statistics: emphasis by spacing alone. The paragraph stays whole and
   in the reading face at reading size, exactly as written. Only the air
   around it and a slight extra indent set it apart. */
.prose > .figures {
  margin-block: var(--s4);
  margin-inline: clamp(0rem, 2.5vw, 2.75rem);
  padding-block: var(--s3);
  border-block: 1px solid var(--rule-faint);
  font-variant-numeric: lining-nums;
}

.slogans {
  margin: var(--s5) 0 var(--s5) clamp(0rem, 6vw, 7rem);
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.3vw, 1.7rem);
  line-height: 1.6;
}
.slogans span { display: block; }
/* The registration marks ride high and small against display type. */
.slogans sup { font-size: 0.45em; }

/* ---------- Media page ---------- */

.jump-nav {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block: var(--s3) var(--s4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
}
.jump-nav a { text-decoration: none; }
.jump-nav a:hover { color: var(--ink); }
.jump-nav span[aria-hidden] { color: var(--rule); }

.media-section { margin-block: var(--s4); }
.media-section > .h-section { margin-bottom: var(--s3); }

.copy-bio {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: var(--s3);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.35rem 0;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.copy-bio:hover { color: var(--ink); border-bottom-color: var(--ink); }
.copy-bio[data-copied="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.asset {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: start;
}
.asset--cover { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
.asset__meta { font-size: 0.95em; }
.asset__meta p { margin: 0 0 0.8em; }
.asset__credit {
  font-family: var(--sans);
  font-size: 0.775rem;
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 52em) {
  .asset, .asset--cover { grid-template-columns: 1fr; }
  .asset__figure { max-width: 20rem; }
}

/* Interview questions — numbered, no cards or boxes. */
.questions {
  list-style: none;
  counter-reset: q;
  margin: var(--s4) 0 0;
  padding: 0;
  max-width: 40em;
}
/* Hanging indent, not grid: a grid container would turn every inline
   child (an <em> book title, a link) into its own grid item and break
   the sentence apart. */
.questions li {
  counter-increment: q;
  padding-inline-start: 3.25rem;
  text-indent: -3.25rem;
  margin-bottom: var(--s3);
  font-size: 1.02em;
  line-height: 1.55;
}
.questions li::before {
  content: counter(q, decimal-leading-zero);
  display: inline-block;
  width: 3.25rem;
  text-indent: 0;
  vertical-align: baseline;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted-light);
}

/* ---------- History: headlines ---------- */

.headlines { margin-block: var(--s3) var(--s4); }

.headline {
  max-width: 46ch;
  margin-block: 0;
}
/* Spacing and indentation vary subtly so the run reads as curated
   rather than mechanically repeated. */
.headline + .headline { margin-top: var(--s3); }
.headline:nth-child(3n+2) { margin-inline-start: clamp(0rem, 7vw, 8rem); }
.headline:nth-child(4n+4) { margin-inline-start: clamp(0rem, 3.5vw, 4rem); }

.headline__text {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  line-height: 1.2;
  margin: 0;
}
.headline__deck {
  font-family: var(--display);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.35;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}
.headline__source {
  font-family: var(--sans);
  font-size: 0.775rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0.85rem 0 0;
}

/* Superscript citation markers */
.cite {
  font-family: var(--sans);
  font-size: 0.5em;
  font-weight: 500;
  vertical-align: super;
  line-height: 0;
  margin-inline-start: 0.15em;
  color: var(--muted);
  text-decoration: none;
  padding: 0 0.1em;
}
.cite:hover { color: var(--ink); }
.headline__text .cite { font-size: 0.36em; }

/* ---------- Disclosure: Sources ---------- */

.disclosure { margin-block: var(--s3) 0; }

.disclosure__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.35rem 0;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.disclosure__toggle:hover { color: var(--ink); border-bottom-color: var(--ink); }
.disclosure__toggle .chev {
  display: inline-block;
  transition: transform 200ms ease;
  font-size: 0.85em;
}
.disclosure__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.disclosure__panel { padding-top: var(--s3); }
.disclosure__panel[hidden] { display: none; }

.sources-note {
  font-family: var(--sans);
  font-size: 0.775rem;
  color: var(--muted);
  margin: 0 0 var(--s3);
}

.sources {
  list-style: none;
  counter-reset: src;
  margin: 0;
  padding: 0;
  max-width: 46em;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* Hanging indent for the same reason as the questions above: each
   citation is one continuous sentence containing a <span> and a link.
   The negative indent places the numeral inside the start padding, so
   the jump highlight still covers it. */
.sources li {
  counter-increment: src;
  padding: 0.15rem 0.4rem 0.15rem 3rem;
  text-indent: -3rem;
  margin-bottom: 0.45rem;
  scroll-margin-top: 7rem;
  border-radius: 2px;
  transition: background-color 900ms ease;
}
.sources li::before {
  content: counter(src) ".";
  display: inline-block;
  width: 3rem;
  text-indent: 0;
  vertical-align: baseline;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted-light);
}
.sources .pub { font-style: italic; }
.sources a {
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--rule);
  color: var(--muted);
}
.sources a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* Brief, subtle distinction when a citation is jumped to. */
.sources li.is-target { background-color: var(--mark); transition: background-color 120ms ease; }

/* ---------- History: timeline ---------- */

.timeline {
  position: relative;
  margin-block: var(--s4) 0;
  padding-inline-start: clamp(1.5rem, 5vw, 3.5rem);
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 0.7rem 0;
  inset-inline-start: 0;
  width: 1px;
  background: var(--rule);
}

.tl-event {
  position: relative;
  max-width: 40em;
  margin-bottom: var(--s3);
}
.tl-event::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(clamp(1.5rem, 5vw, 3.5rem) * -1);
  top: 0.72rem;
  width: 9px;
  height: 1px;
  background: var(--rule);
}

.tl-event__date {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.tl-event__title {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  line-height: 1.2;
  margin: 0 0 0.7rem;
}
.tl-event__body { margin: 0; font-size: 0.97em; }

/* Every entry is set identically - same type size, same spacing, same
   line breaks. Events of greater consequence are marked only by a longer
   tick on the rule and a darker date. */
.tl-event--major .tl-event__date { color: var(--ink-soft); }
.tl-event--major::before { width: 20px; background: var(--ink-soft); }

/* The closing entry reads as an epilogue. */
.tl-event--coda { margin-bottom: var(--s4); }

/* Subordinate explanatory context inside an entry. */
/* Subordinate context, indented equally on both sides so it sits centred
   beneath the paragraph above it. */
.tl-aside {
  margin: 1.1rem 1.75rem 0;
  font-size: 0.87rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- Contact form ---------- */
/* No card, box or panel; fields defined by a single baseline rule. */

.form {
  max-width: 32rem;
  margin-top: var(--s5);
}

.field { margin-bottom: 1.9rem; }

.field label {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 160ms ease;
}
.field textarea { resize: vertical; min-height: 4.5rem; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.field input:focus-visible,
.field textarea:focus-visible { outline: none; }

.form__send {
  margin-top: 0.6rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.45rem 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms ease;
}
.form__send:hover { border-bottom-color: var(--ink); }
.form__send[disabled] { opacity: 0.45; cursor: default; }

/* Submission result. No box, no banner: the message simply appears
   in the reading face, one line of space below the button. */
.form__status {
  margin: var(--s3) 0 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 32rem;
}
.form__status[data-state="error"] { color: var(--muted); }

.direct {
  margin-top: var(--s4);
}
.direct h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.7rem;
}
.direct a {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
}
.direct__note {
  margin: 0.7rem 0 0;
  font-family: var(--sans);
  font-size: 0.775rem;
  color: var(--muted);
}

/* ---------- Footer ---------- */
/* Quiet, consistent, a natural conclusion — never a banner. */

.site-footer {
  margin-top: var(--s7);
  padding-block: var(--s3) var(--s5);
  font-family: var(--sans);
  font-size: 0.73rem;
  line-height: 1.8;
  color: var(--muted-light);
  letter-spacing: 0.02em;
}
.site-footer p { margin: 0; max-width: 52em; }
.site-footer p + p { margin-top: 0.5rem; }

/* ---------- Utilities ---------- */

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

.space-above  { margin-top: var(--s5); }
.space-below  { margin-bottom: var(--s5); }
.space-above--half { margin-top: calc(var(--s5) / 2); }
.section      { margin-block: var(--s6); }
.section--tight { margin-block: var(--s5); }

hr.rule {
  border: 0;
  border-top: 1px solid var(--rule-faint);
  margin-block: var(--s5);
  max-width: 6rem;
  margin-inline-start: 0;
}

@media print {
  .nav, .jump-nav, .copy-bio, .disclosure__toggle { display: none; }
  body { background: #fff; }
  .disclosure__panel[hidden] { display: block !important; }
}