/* ============================================================
   THEME: BONE DUST — Antique Linen
   Palette: cool warm-neutral light on near-black ground
   Font system: Cinzel / Cormorant Garamond / Spectral / IBM Plex Mono
   ============================================================ */

/* ── Local Font Declarations ── */

/* Cinzel — 400 normal */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cinzel-400-normal-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: "Cinzel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cinzel-400-normal-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;
}

/* Cinzel 700 was declared here but `cinzel-700-normal-latin-ext.woff2` was
   never added to assets/fonts, and the latin block pointed at the 400 file
   under a 700 label. Nothing in this stylesheet asks for Cinzel 700, so the
   declarations are removed rather than repaired. Re-add both weights together
   if a bold Cinzel is ever wanted. */

/* Cormorant Garamond — 300 italic */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-300-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: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-300-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;
}

/* Cormorant Garamond 400 italic was declared here but neither woff2 file was
   ever added, so `.prose-atmospheric` — the artist-statement body style — was
   asking for a face that could not load and getting a browser-synthesised
   slant instead. The declarations are removed and `.prose-atmospheric` now
   uses the 300 italic we actually ship. Add the 400 italic files and restore
   this block if the heavier italic is wanted. */

/* Cormorant Garamond — 400 normal */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-400-normal-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: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-400-normal-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;
}

/* IBM Plex Mono — 300 normal */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-300-normal-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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-300-normal-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;
}

/* Spectral — 300 normal */
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/spectral-300-normal-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: "Spectral";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/spectral-300-normal-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;
}

/* Spectral — 400 normal */
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/spectral-400-normal-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: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/spectral-400-normal-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;
}

/* ── Colour tokens ── */
:root {
  --ground: #0b0b0a; /* near-black, faintly warm */
  --ground-raised: #0e0e0c; /* slightly lifted surface */
  --rule: #1c1c18; /* dividers, borders */
  --ground-hero: #090806;  /* hero zone — deepest value on the page */

  --primary: #e8e8e0; /* site title, impact headings */
  --nav: #a8a898; /* navigation, section heads */
  --work-title: #b0b0a0; /* work titles */
  --pull: #c0c0b0; /* pull quotes, statement opening */
  --body-prose: #989888; /* Cormorant body — artist statement, work descriptions */
  --body-extended: #888878; /* Spectral body — blog, journal */
  --caption: #707068; /* captions, small notes */
  --sub: #585858; /* sub-labels, secondary nav */

  --meta-key: #484840; /* IBM Plex Mono keys */
  --meta-value: #686858; /* IBM Plex Mono values */
  --meta-dim: #303028; /* provenance, edition — most recessive */

  --grim-red: #5c1a1a; /* grim red */
}

/* ── Base ── */
html {
  height: 100%;
}
body {
  background-color: var(--ground);
  color: var(--body-extended);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  margin: 0;
  min-height: 100vh;
  display: grid;
  /* Four rows to match the four rows of grid-template-areas below. `main`
     takes the 1fr so the footer is pushed to the bottom on short pages. */
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 1fr min(65ch, 100% - 2rem) 1fr;
  grid-template-areas:
    "header header header"
    "hero   hero   hero"
    ".      main   ."
    "footer footer footer";
}

header {
  grid-area: header;
  display: grid;
  grid-template-columns: 1fr auto; 
  align-items: center;
  grid-template-areas:
    "title    title"
    "subtitle subtitle"
    "nav nav";
  background-color: var(--ground-raised); /* #0e0e0c */
  border-bottom: 0.5px solid var(--rule);
  padding: 24px 40px;
}
.main {
  grid-area: main;
}
footer {
  grid-area: footer;
  border-top: 0.5px solid var(--rule);
  padding: 24px 40px;
  background-color: var(--ground-raised);
}

.footer-inner {
  display: flex;
  /* Wraps only when the row does not fit, as on a phone once the signing
     address is shown, rather than pushing the page wider than the screen. */
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
}

/* The signing address. Forty hex digits do not break on their own, so allow
   a break anywhere rather than overflow a narrow screen. */
.footer-anchor {
  min-width: 0;
  overflow-wrap: anywhere;
}

.footer-address {
  letter-spacing: 0.05em;
}

.footer-link {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--meta-value);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--nav);
}


/* ── IDENTITY LAYER — Cinzel ──────────────────────────────── */

/* Site name / logo */
.site-title {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grim-red);
  line-height: 1;
  grid-area: title;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap; /*stops the title from wrapping when the browser is resized*/
}

.site-title:hover,
.site-title.active {
  color: var(--primary);
}

/* Site subtitle / discipline line */
.site-subtitle {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--sub);
  grid-area: subtitle;
  align-self: center;
}

.site-nav {
  grid-area: nav;
  display: flex;
  /* Wrap whole items onto a second line when the row does not fit, rather
     than pushing the page wider than the screen. */
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: flex-end;
  margin-top: 1.5rem; /*add a gap between the sub heading and the menu*/
}

/* Navigation items */
.nav-item {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--nav);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap; /* "WORKS ON PAPER" wraps as one item, never mid-label */
}

.nav-item:hover,
.nav-item.active {
  color: var(--primary);
}

/* Section headings (Works, Statement, Journal) */
.section-heading {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 18px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--nav);
  line-height: 1.3;
}

/* Work titles */
.work-title {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--work-title);
  line-height: 1.4;
}

/* ── HERO ZONE ───────────────────────────────────────────── */

/* The hero subtitle block sinks below — darker than header  */
.hero {
  grid-area: hero;
  background: linear-gradient(
    to bottom,
    #0c0a08 0%,
    #090806 40%
  );
  display: grid;
  /* Three symmetric cells — one work per medium. The dark ground bleeds
     through the 3px gap so the works read as contiguous. */
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  border-bottom: 0.5px solid var(--rule);
  padding: 32px 40px;
  text-align: center;
}

.hero-grid-cell {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.hero-grid-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-single {
  grid-template-columns: 1fr;
}

.hero-single .hero-grid-cell {
  aspect-ratio: auto;
  overflow: visible;
}

.hero-single .hero-grid-cell img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  object-fit: contain;
}


/* Mobile — stack vertically. Previously targeted `.hero-grid`, a class that
   appears nowhere in the markup, so the hero never collapsed on phones. */
@media (max-width: 640px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

/* ── GALLERY — section pages and work pages ───────────────── */

/* Section pages (painting, paper, studies) and work pages set
   `fullBleed: true`, so they sit directly in the body grid and take the
   hero row across the full width rather than the 65ch reading column. */
.gallery,
.work {
  grid-area: hero;
  padding: 32px 40px 64px;
}

/* The section heading and grid share one centred measure. 1200px gives
   three columns of about 380px on a large screen: a gallery wall rather than
   a row of full-screen views, with a whole row and its titles in view.
   Narrower screens are below this width already, so nothing changes there. */
.gallery .section-heading,
.gallery .work-grid,
.gallery .work-grid-empty {
  max-width: 1200px;
  margin-inline: auto;
}

.gallery .section-heading {
  margin-top: 0;
  margin-bottom: 32px;
}

/* Three columns, then two, then one (see the media queries below). */
.work-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 24px;
}

/* Each card spans two rows of the grid, an image row and a caption row, and
   shares them with the other cards on its line (subgrid). The image row is as
   tall as the tallest work on that line and every image sits on its bottom
   edge, so titles line up across the line directly beneath the pictures. A
   landscape work no longer floats in a tall frame with a gap under it.

   The link is a subgrid too, so the whole card stays one link. */
.work-card,
.work-card a {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}

.work-card a {
  row-gap: 14px;
  text-decoration: none;
}

.work-card picture {
  align-self: end;
}

/* The whole work shows, never cropped, always the full width of its column.
   Do not cap the height: a capped portrait shrinks narrower than its column
   and leaves a wider gap on one side than between the other works. */
.work-card img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

.work-caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* The catalogue's note, under the title. Cormorant italic, as on the work
   page, but small enough to sit quietly in a grid. */
.work-card .work-note {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--body-prose);
}

/* On the work page the note follows the title directly. */
.work-details .work-note {
  margin: 8px 0 0;
}

.work-card a:hover img,
.work-card a:focus-visible img {
  opacity: 0.85;
}

.work-card a:hover .work-title,
.work-card a:focus-visible .work-title {
  color: var(--primary);
}

/* Individual work page: image first, details beneath. */
.work {
  display: grid;
  justify-items: center;
  gap: 32px;
}

.work-image {
  margin: 0;
}

.work-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 85vh;
}

.work-details {
  width: min(65ch, 100%);
}

.work-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 24px;
  align-items: baseline;
  margin: 16px 0 24px;
}

.work-meta dd {
  margin: 0;
}

@media (max-width: 1024px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .gallery,
  .work {
    padding: 24px 16px 48px;
  }

  .work-grid {
    grid-template-columns: 1fr;
  }
}

/* Phones — the header was wider than the screen: a 32px minimum title with
   wide letter-spacing, a 16px subtitle spaced at 0.55em, and 40px padding
   all overflowed a 400px screen, so every page scrolled sideways. Here the
   title scales with the screen, spacing tightens and the nav wraps. */
@media (max-width: 640px) {
  header {
    padding: 20px 16px;
  }

  .site-title {
    font-size: 7vw;
    letter-spacing: 0.12em;
  }

  .site-subtitle {
    font-size: 11px;
    letter-spacing: 0.32em;
    margin-top: 6px;
  }

  .site-nav {
    gap: 0.6rem 1.25rem;
    margin-top: 1rem;
  }

  .nav-item {
    font-size: 13px;
    letter-spacing: 0.2em;
  }
}

/* Wide screens — nav next to title */
  @media (min-width: 1550px) {
    header {
      grid-template-areas:
        "title    nav"
        "subtitle subtitle";
    }
  }

/* ── ATMOSPHERIC PROSE — Cormorant Garamond ───────────────── */

/* Pull quote / statement opening */
.pull-quote {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 2.5vw, 24px);
  letter-spacing: 0.02em;
  color: var(--pull);
  line-height: 1.65;
  text-align: justify;
}

/* Artist statement body / per-work descriptions */
.prose-atmospheric {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300; /* 300 is the only italic weight shipped — see note above */
  font-style: italic;
  font-size: clamp(15px, 1.8vw, 18px);
  letter-spacing: 0.015em;
  color: var(--body-prose);
  line-height: 1.75;
  max-width: 60ch;
}

/* ── EXTENDED READING — Spectral ─────────────────────────── */

/* Blog posts, journal, news */
.prose-extended {
  font-family: "Spectral", Georgia, serif;
  font-weight: 400;
  font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: 0.01em;
  color: var(--body-extended);
  line-height: 1.85;
  max-width: 65ch;
}

/* Blog post title */
.post-title {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 400;
  font-size: clamp(16px, 2.2vw, 22px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--work-title);
  line-height: 1.3;
}

/* ── READING PAGES — verify, contact, about ─────────────── */

/* Practical reading pages are set as extended prose (Spectral) with Cinzel
   headings from the classes in their markup. These rules cover what those
   classes cannot reach: the column, spacing, and the inline elements.

   Each page sets `fullBleed: true` and makes its own centred column, because
   the shared reading column and .prose-extended both measure 65ch, and a
   "ch" (the width of a zero) is narrow in these fonts: about 520px, a thin
   ribbon on a large screen. 52rem is about 830px, roughly 100 characters a
   line: wide enough to use a large screen, still comfortable for short,
   practical text. 16px of margin is kept either side on a phone. */
/* Must stay after .prose-extended, whose 65ch max-width it overrides. */
.reading-page {
  grid-area: hero;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(52rem + 32px);
  margin-inline: auto;
  padding: 48px 16px 64px;
}

.reading-page .post-title {
  margin: 0 0 24px;
}

/* Links in the text: the browser's default blue is unreadable on the dark
   ground, so they take the lighter prose colour with a quiet underline. */
.reading-page a {
  color: var(--pull);
  text-decoration-color: var(--sub);
  text-underline-offset: 3px;
}

.reading-page a:hover,
.reading-page a:focus-visible {
  color: var(--primary);
  text-decoration-color: currentColor;
}

.reading-page .section-heading {
  margin: 48px 0 12px;
}

.reading-page .work-title {
  margin: 32px 0 8px;
}

.reading-page ol {
  padding-left: 1.4em;
}

.reading-page li {
  margin-bottom: 8px;
}

/* Contract function names and the published address. IBM Plex Mono is the
   site's face for machine-readable values; only the 300 weight is shipped. */
.reading-page code {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 300;
  font-size: 0.9em;
  color: var(--meta-value);
  overflow-wrap: anywhere;
}

/* Spectral ships no bold and no italic, so a browser would fake both.
   Emphasis is carried by colour instead. */
.reading-page strong {
  font-weight: 400;
  color: var(--pull);
}

.reading-page em {
  font-style: normal;
  color: var(--pull);
}

/* The code lookup on /verify/. The code is machine-readable, so it is typed
   in IBM Plex Mono, spaced wide enough that 8 and B, or 0 and D, are easy to
   tell apart when copying from a torch-lit canvas. The button borrows the
   navigation's Cinzel so it reads as part of the site, not a web form.
   Colours are chosen for contrast on the dark ground: text at 5:1 or more,
   and the field and button edges at 3:1, so they can be seen at all. */
.code-lookup {
  margin: 24px 0 12px;
}

.code-lookup-label {
  display: block;
  margin-bottom: 8px;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body-prose);
}

.code-lookup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.code-lookup-input {
  flex: 1 1 14rem;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--ground-raised);
  border: 1px solid var(--caption);
  border-radius: 0;
}

.code-lookup-button {
  flex: 0 0 auto;
  padding: 12px 20px;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--nav);
  background: transparent;
  border: 1px solid var(--caption);
  border-radius: 0;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.code-lookup-button:hover {
  color: var(--primary);
  border-color: var(--nav);
}

.code-lookup-input:focus-visible,
.code-lookup-button:focus-visible {
  outline: 2px solid var(--pull);
  outline-offset: 2px;
}

.code-lookup-note {
  font-size: 15px;
  color: var(--body-extended);
}

/* The about page is continuous prose meant to be read end to end, not
   scanned like verify or contact, so its column is narrower: about 600px,
   roughly 75 characters a line of Spectral, the upper end of the comfortable
   range for sustained reading. Only the opening pull quote is italic; the
   body stays upright, because long runs of italic slow reading down. */
.reading-page.about {
  max-width: calc(37.5rem + 32px);
}

/* Left-aligned here: justified, the large italic opens wide gaps between
   words on a line this short ("is  mostly  taken  by  the  dark"). */
.about .pull-quote {
  margin: 0 0 32px;
  text-align: left;
}

.about p {
  margin: 0 0 1.4em;
}

.about .rule {
  margin: 40px 0;
}

.about-portrait {
  margin: 40px 0;
}

.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.about-links {
  font-size: 15px;
  line-height: 1.8;
  color: var(--body-extended);
}

/* Captions, small notes */
.caption {
  font-family: "Spectral", Georgia, serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--caption);
  line-height: 1.7;
}

/* ── METADATA LAYER — IBM Plex Mono ──────────────────────── */

/* Metadata key labels (Medium, Size, Year…) */
.meta-key {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--meta-key);
}

/* Metadata values */
.meta-value {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--meta-value);
}

/* Provenance / edition / QR reference — most recessive */
.meta-provenance {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--meta-dim);
}

/* Post date */
.post-date {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--meta-key);
}

/* ── Utility ─────────────────────────────────────────────── */

hr,
.rule {
  border: none;
  height: 0.5px;
  background-color: var(--rule);
  margin: 24px 0;
}