/* ============================================================
   Federal-classical editorial folio — light-only.
   Parchment field, iron-gall ink, Old Glory Blue accents,
   Old Glory Red reserved for link hover states.
   ============================================================ */

/* ---------- Fonts (self-hosted, SIL OFL — see assets/fonts/) ---------- */

@font-face {
  font-family: "Libre Caslon Display";
  src: url("../fonts/LibreCaslonDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/LibreCaslonText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/LibreCaslonText-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/LibreCaslonText-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Metric-adjusted local fallbacks: while the webfonts load, Georgia and
   Tahoma render at the webfonts' own advance widths and vertical metrics,
   so the swap causes no layout shift. Values chosen empirically against
   the shipped WOFF2s over representative strings. Note the Public Sans
   files are the USWDS v2.001 static webfonts (not Google Fonts' build);
   metrics derived from other cuts of Public Sans will not match them. */
@font-face {
  font-family: "Libre Caslon Display Fallback";
  src: local("Georgia");
  size-adjust: 83.89%;
  ascent-override: 115.62%;
  descent-override: 31.71%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Libre Caslon Text Fallback";
  src: local("Georgia");
  size-adjust: 107.22%;
  ascent-override: 90.47%;
  descent-override: 24.25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Public Sans Fallback";
  src: local("Tahoma");
  font-weight: 400;
  size-adjust: 108.03%;
  ascent-override: 87.94%;
  descent-override: 21.29%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Public Sans Fallback";
  src: local("Tahoma Bold"), local("Tahoma");
  font-weight: 600;
  size-adjust: 95.71%;
  ascent-override: 99.26%;
  descent-override: 24.03%;
  line-gap-override: 0%;
}

/* ---------- System ---------- */

:root {
  /* Field and ink */
  --parchment: #F8F5EB;
  --parchment-deep: #F2EDDE;   /* reserved media frames, quiet fills */
  --ink: #1A1A17;
  --ink-muted: #5B584C;        /* metadata; ≥4.5:1 on parchment */

  /* Accents */
  --navy: #0A3161;             /* links, focus, principal rule, one ornament */
  --red: #B31942;              /* link hover only */

  /* Structure */
  --rule: #DAD3C0;             /* engraved hairlines */
  --rule-ink: #1A1A17;         /* terminal footer rule */

  /* Type */
  --font-serif-display: "Libre Caslon Display", "Libre Caslon Display Fallback", Georgia, "Times New Roman", serif;
  --font-serif-text: "Libre Caslon Text", "Libre Caslon Text Fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Public Sans", "Public Sans Fallback", "Franklin Gothic Medium", "Segoe UI", Tahoma, Verdana, sans-serif;

  /* Modular scale, fluid */
  --size-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --size-h1: clamp(2.75rem, 1.9rem + 4.2vw, 5.25rem);
  --size-h2: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
  --size-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --size-label: 0.75rem;
  --size-small: 0.875rem;

  /* 8px spacing grid */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-section: clamp(4rem, 3rem + 4vw, 7rem);

  --measure: 66ch;
  --header-h: 4rem;
}

/* OKLCH refinements of the derived tones, where supported */
@supports (color: oklch(50% 0.02 100)) {
  :root {
    --parchment-deep: oklch(94% 0.023 96);
    --ink-muted: oklch(44% 0.019 100);
    --rule: oklch(86% 0.022 95);
  }
}

/* ---------- Base ---------- */

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

html {
  background: var(--parchment);
  -webkit-text-size-adjust: 100%;
  /* Keeps both anchor targets and keyboard-focused elements clear of
     the sticky header (WCAG 2.2 SC 2.4.11). */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-serif-text);
  font-size: var(--size-body);
  line-height: 1.6;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums;
}

h1, h2, h3 {
  font-family: var(--font-serif-display);
  font-weight: 400;
  font-variant-numeric: lining-nums;
}

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


/* ---------- Links and focus ---------- */

a { color: var(--navy); }

a:hover { color: var(--red); }

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

@media (prefers-reduced-motion: no-preference) {
  a, .nav-toggle { transition: color 150ms ease-out, border-color 150ms ease-out; }
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--parchment);
  border: 1px solid var(--navy);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-4)));
}

.skip-link:focus {
  transform: none;
}

/* ---------- Header and navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--parchment);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: min(100% - 3rem, 75rem);
  margin-inline: auto;
  min-height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}

.wordmark img {
  display: block;
  width: 3rem;
  height: 3rem;
}

@media (prefers-reduced-motion: no-preference) {
  .wordmark img { transition: opacity 150ms ease-out; }
}

.wordmark:hover img { opacity: 0.8; }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--size-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.nav-list a:hover {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-2);
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle:hover { color: var(--red); border-color: var(--red); }

.nav-toggle[aria-expanded="true"] { border-color: var(--ink); }

/* Narrow widths: an accessible disclosure. Without JavaScript the list
   simply stays visible and the button stays hidden. */
@media (max-width: 59.9375em) {
  .js .nav-toggle { display: inline-flex; }

  .js .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-1) 0 var(--space-2);
    background: var(--parchment);
    border-bottom: 1px solid var(--rule);
  }

  .js .nav-list.open { display: flex; }

  .js .nav-list a {
    display: flex;
    min-height: 44px;
    padding: 0 var(--space-3);
  }

  .no-js .header-inner {
    flex-wrap: wrap;
    padding-block: var(--space-1);
  }
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  /* The svh variant must live in @supports: a var()-bearing declaration
     with an unknown unit is not discarded at parse time, so it would
     silently void this fallback in browsers without svh. */
  min-height: calc(80vh - var(--header-h));
  padding-block: var(--space-8);
  padding-inline: var(--space-3);
}

@supports (height: 1svh) {
  .hero { min-height: calc(80svh - var(--header-h)); }
}

.hero-name {
  margin: 0;
  font-family: var(--font-serif-display);
  font-size: var(--size-h1);
  line-height: 1.1;
  text-wrap: balance;
  letter-spacing: 0.01em;
  max-width: 18ch;
}

.hero-ornament {
  margin: var(--space-3) 0 0;
  color: var(--navy);
  line-height: 0;
}

.hero-tagline {
  margin: var(--space-3) 0 0;
  max-width: 44ch;
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  font-style: italic; /* epigraph convention for the Latin motto */
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-wrap: balance;
}


/* ---------- Sections ---------- */

.section {
  width: min(100% - 3rem, 75rem);
  margin-inline: auto;
  padding-block: var(--space-section);
}


.section-head {
  text-align: center;
  margin-bottom: var(--space-8);
}

.section-folio {
  margin: 0 0 var(--space-2);
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: var(--size-label);
  letter-spacing: 0.35em;
  text-indent: 0.35em; /* recenters the letterspaced numeral */
}

.section-head h2 {
  margin: 0;
  font-size: var(--size-h2);
  line-height: 1.2;
}

.section-head h2::after {
  content: "";
  display: block;
  width: 4rem;
  height: 1px;
  margin: var(--space-3) auto 0;
  background: var(--rule);
}

.section-subhead {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: var(--size-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Prose (About, Beyond Work) ---------- */

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

.prose p { margin: 0 0 var(--space-3); }

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

.prose a,
.bibliography a,
.service-list a,
.ledger a,
.contact-details a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.prose a:hover,
.bibliography a:hover,
.service-list a:hover,
.ledger a:hover,
.contact-details a:hover { color: var(--red); }

/* ---------- Selected Work ledger ---------- */

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

.ledger-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "index"
    "body"
    "media";
  gap: var(--space-3);
  padding-block: var(--space-6);
}

/* Engraved rules separate entries; they never enclose them. */
.ledger-entry + .ledger-entry { border-top: 1px solid var(--rule); }

.ledger-index {
  grid-area: index;
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: var(--size-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.ledger-body { grid-area: body; max-width: var(--measure); }

.ledger-title {
  margin: 0 0 var(--space-2);
  font-size: var(--size-h3);
  line-height: 1.25;
}

.ledger-blurb { margin: 0 0 var(--space-2); }

.ledger-link {
  margin: 0;
  font-size: var(--size-small);
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}

.ledger-media {
  grid-area: media;
  margin: 0;
  max-width: 20rem;
}

.ledger-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

.ledger-plate { display: block; }

.ledger-plate:hover img { border-color: var(--red); }

.ledger-media-reserved {
  aspect-ratio: 4 / 3;
  background: var(--parchment-deep);
  border: 1px solid var(--rule);
}

.ledger-token {
  margin: 0;
  color: var(--ink-muted);
  font-style: italic;
}

@media (min-width: 64em) {
  .ledger-entry {
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 26rem);
    grid-template-areas: "index body media";
    gap: var(--space-4) var(--space-6);
    align-items: start;
  }

  /* Alternate the plate to the inner column on even rows; the DOM
     reading order (title, blurb, link, image) is unchanged. */
  .ledger-entry:nth-child(even) {
    grid-template-columns: 4rem minmax(0, 26rem) minmax(0, 1fr);
    grid-template-areas: "index media body";
  }
}

/* ---------- Bibliography and service record ---------- */

.bibliography,
.service-list {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.bibliography li,
.service-list li {
  padding: var(--space-3) 0;
}

.bibliography li + li,
.service-list li + li { border-top: 1px solid var(--rule); }

.bibliography cite { font-style: normal; }

.bib-meta {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: var(--size-small);
  letter-spacing: 0.02em;
}

/* ---------- Correspondence ---------- */

.contact-details {
  max-width: var(--measure);
  margin-inline: auto;
  font-style: normal;
}

.contact-list {
  margin: 0;
}

.contact-row {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.contact-row dt {
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 0.25rem;
}

.contact-row dd { margin: 0; }

@media (max-width: 30em) {
  .contact-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* ---------- Motion ---------- */

/* Hero reveal: opacity and transform only, staggered, ease-out.
   Runs only when JavaScript is present and motion is not reduced;
   otherwise everything is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    animation: rise 320ms ease-out both;
  }
  .js .hero-ornament.reveal { animation-delay: 80ms; }
  .js .hero-tagline.reveal { animation-delay: 140ms; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(0.75rem); }
    to { opacity: 1; transform: none; }
  }

  /* Below the fold: progressive enhancement only where scroll-driven
     animations exist; content is fully visible without them. */
  @supports (animation-timeline: view()) {
    .js .section-head {
      animation: settle both ease-out;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    @keyframes settle {
      from { opacity: 0.2; transform: translateY(0.5rem); }
      to { opacity: 1; transform: none; }
    }
  }
}

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

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

@media print {
  .site-header { position: static; }
  .skip-link, .site-nav { display: none; }
}