/* ÆDRE — authored site layer (bounded adaptive composition).
   Foundation: approved Palace Personal palette, consumed through the documented
   --farris-* variables with local fallbacks mirroring DESIGN_DIRECTION.md.
   ÆDRE-local names use --aedre-*.

   Responsive model — bounded adaptive composition:
   - Fixed human root (16px). Browser zoom stays fully enabled; the page answers
     the changed CSS viewport with bounded scaling and composition states.
   - Every size that scales carries explicit bounds (clamp/min/max). Nothing
     grows or shrinks without a limit; no viewport-driven root font scaling.
   - Composition states, keyed to viewport width (zoom narrows it naturally):

     STANDARD  > 60rem    primary designed state; fluid within bounds
     WIDE      ≥ 112.5rem sheet marks appear; clamps hold their ceilings
     MEDIUM    ≤ 75rem    index regroups 2×2, secondary guide retires,
                          vertical bands compress
     COMPACT   ≤ 60rem    brand bound tightens, bands compress further,
                          threshold thins
     EXTREME   ≤ 45rem    deliberate recomposition: structured two-row
                          masthead, stacked route index, wave-only geometry

   - Geometry degrades in order: full → reduced guides → arc + key guide →
     wave signature. Essential content is normal flow; decorative layers are
     aria-hidden SVG and may be removed per state. */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

:root {
  --aedre-ink: var(--farris-ink, #28231e);
  --aedre-muted: var(--farris-muted, #6f675d);
  /* darker step of the approved muted tone; small UI text must pass AA on paper */
  --aedre-muted-strong: #625a50;
  --aedre-paper: var(--farris-paper, #f3eee4);
  --aedre-backdrop: var(--farris-backdrop, #eee7da);
  --aedre-line-soft: var(--farris-line-soft, #d8cdbd);
  --aedre-line-strong: #b8aa96;
  --aedre-metal: var(--farris-metal, #684d24);
  --aedre-metal-deep: #846331;
  --aedre-bronze: #c8a968;
  --aedre-depth-ink: #f1ede4;
  --aedre-depth-muted: #aaa398;
  --aedre-serif: Georgia, "Times New Roman", serif;
  --aedre-sans: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* bounded fluid values — every one has a floor and a ceiling */
  --aedre-pad-x: clamp(1.25rem, 5vw, 8.5rem);
  --aedre-frame: min(100vw, calc(58vw + 520px), 132rem);
  --aedre-navgap: clamp(0.875rem, 2.2vw, 2.25rem);
  --aedre-brand: clamp(3.25rem, min(8vw, 17vh), 10rem);
  --aedre-brand-rule: clamp(2.75rem, 4.5vw, 4.5rem);
  --aedre-lede: clamp(1.0625rem, 1vw + .55rem, 1.3125rem);
  --aedre-identity-h: clamp(19rem, 47vh, 27rem);
  --aedre-ih-pt: clamp(1.5rem, 4vh, 3rem);
  --aedre-ih-pb: clamp(2.5rem, 8vh, 5.5rem);
  --aedre-depth-h: clamp(11rem, 30vh, 26rem);
  --aedre-idx-gap: clamp(1rem, 2.5vw, 2.5rem);
  --aedre-idx-pt: clamp(1.25rem, 2.8vh, 1.75rem);
  --aedre-idx-pb: clamp(1.875rem, 5.5vh, 3.5rem);
  --aedre-slim-h: clamp(19rem, 42vh, 27rem);
  --aedre-ph-pt: clamp(2.5rem, 7vh, 4.5rem);
  --aedre-ph-pb: clamp(3rem, 9vh, 5.5rem);
}

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

html,
body { overflow-x: clip; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--aedre-ink);
  font-family: var(--aedre-sans);
  font-size: 1rem;
  line-height: 1.6;
  background-color: var(--aedre-paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.16 0 0 0 0 0.14 0 0 0 0 0.11 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 30%, rgba(184, 170, 150, .12) 78%),
    linear-gradient(170deg, #f7f3ea 0%, var(--aedre-paper) 52%, #e6ddcc 100%);
}

/* the desktop states approximate one composed screen; shorter or narrow
   viewports flow naturally, nothing is ever hidden behind overflow.
   The identity band is bounded (never stretches into a void); the subsurface
   is the elastic element — spare viewport height deepens the dark field. */
main {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

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

:focus-visible {
  outline: 1px solid var(--aedre-metal-deep);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0.75rem;
  z-index: 50;
  padding: 0.625rem 1rem;
  background: var(--aedre-paper);
  color: var(--aedre-ink);
  border: 1px solid var(--aedre-line-strong);
  font-size: 0.8125rem;
}

.skip-link:focus-visible {
  left: 0.75rem;
}

/* ---------- frame: capped structural width ---------- */

.frame {
  width: 100%;
  max-width: var(--aedre-frame);
  margin-inline: auto;
  padding-inline: var(--aedre-pad-x);
}

/* ---------- decorative geometry (aria-hidden layers) ---------- */

.geo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.geo-frame {
  position: absolute;
  inset: 0;
  margin-inline: auto;
  max-width: var(--aedre-frame);
}

[data-depth] {
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

/* ---------- masthead ---------- */

.masthead {
  position: relative;
  z-index: 3;
  border-bottom: 1px solid var(--aedre-line-soft);
}

.masthead-frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* the compact wordmark sits a step left of the hero identity — a deliberate
     offset, not an alignment (floor keeps it inside narrow viewports) */
  padding-left: max(0.75rem, calc(var(--aedre-pad-x) - 1.5rem));
  padding-top: 1.125rem;
  padding-bottom: 1rem;
}

.mark {
  font-family: var(--aedre-serif);
  font-size: 1.0625rem;
  letter-spacing: .2em;
  color: var(--aedre-ink);
  white-space: nowrap;
}

.primary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aedre-navgap);
}

.primary-nav a {
  font-size: 0.875rem;
  letter-spacing: .055em;
  color: var(--aedre-muted-strong);
  padding: 0.375rem 0.125rem;
  transition: color .18s ease;
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--aedre-ink);
}

.primary-nav a[aria-current="page"] {
  color: var(--aedre-ink);
  border-bottom: 1px solid var(--aedre-line-strong);
}

/* ---------- identity (light surface) ---------- */

.identity {
  position: relative;
  display: flex;
  /* height follows the lockup content, bounded by the clamp floor — the
     surface never stretches into a void; surplus height goes to the depth */
  align-items: flex-end;
  min-height: var(--aedre-identity-h);
  /* the surface begins to deepen toward the threshold: a gradient with no edge */
  background: linear-gradient(180deg, rgba(184, 170, 150, 0) 55%, rgba(184, 170, 150, .16) 100%);
}

/* construction geometry keeps a bounded scale above the horizon */
.identity .geo-frame {
  inset: auto 0 0 0;
  height: min(100%, 35rem);
}

.identity-frame {
  position: relative;
  z-index: 2;
  padding-top: var(--aedre-ih-pt);
  padding-bottom: var(--aedre-ih-pb);
}

.lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 36rem;
}

.seal {
  font-family: var(--aedre-serif);
  font-size: 0.9375rem;
  letter-spacing: .1em;
  color: var(--aedre-metal-deep);
}

.brand {
  margin: 0.75rem 0 0;
  font-family: var(--aedre-serif);
  font-weight: 400;
  font-size: var(--aedre-brand);
  line-height: .95;
  letter-spacing: .045em;
  /* warm ink settling into a bronze undertone: depth without gloss */
  background: linear-gradient(180deg, #221d17 0%, #2c251d 48%, #46351f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-rule {
  width: var(--aedre-brand-rule);
  height: 1px;
  margin-top: clamp(1.125rem, 2.6vh, 1.875rem);
  background: var(--aedre-metal-deep);
}

.lede {
  margin: clamp(1rem, 2.2vh, 1.625rem) 0 0;
  font-family: var(--aedre-serif);
  font-style: italic;
  font-size: var(--aedre-lede);
  line-height: 1.55;
  color: var(--aedre-muted-strong);
  max-width: 34ch;
}

.lockup .quiet-link {
  margin-top: clamp(1.25rem, 2.8vh, 2rem);
}

.quiet-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.84375rem;
  letter-spacing: .1em;
  color: var(--aedre-ink);
  border-bottom: 1px solid var(--aedre-line-strong);
  padding-bottom: 0.3125rem;
  transition: color .18s ease, border-color .18s ease;
}

.quiet-link .arrow {
  color: var(--aedre-metal);
  transition: transform .18s ease;
}

.quiet-link:hover,
.quiet-link:focus-visible {
  color: var(--aedre-metal-deep);
  border-color: var(--aedre-metal-deep);
}

.quiet-link:hover .arrow {
  transform: translateX(2px);
}

/* threshold: layered mineral planes whose dark wave is the depth top color,
   so the subsurface begins as a soft geological edge, not a straight seam;
   the wave rises higher on the right, where the main arc descends */
.geo-threshold {
  height: 10rem;
  inset: auto 0 0 0;
  z-index: 1;
}

/* ---------- depth (subsurface) ---------- */

.depth {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: var(--aedre-depth-h);
  color: var(--aedre-depth-ink);
  background: linear-gradient(180deg, #262722 0%, #161713 55%, #10110e 100%);
}

/* the subsurface is the elastic field: when spare viewport height deepens it,
   its geometry anchors to the route index instead of stretching */
.depth .geo-frame {
  inset: auto 0 0 0;
  height: min(100%, 26rem);
}

.depth-frame {
  position: relative;
  z-index: 2;
  margin-top: auto;
}

/* route index: the lower composition — an annotated section index, not a
   footer stripe. Content in normal flow; states regroup it. */
.index-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--aedre-idx-gap);
  border-top: 1px solid rgba(241, 237, 228, .1);
  padding-top: var(--aedre-idx-pt);
  padding-bottom: var(--aedre-idx-pb);
}

.index-nav a {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  padding: 0.25rem 0;
  transition: color .18s ease;
}

.idx-num {
  font-size: 0.6875rem;
  letter-spacing: .18em;
  color: rgba(200, 169, 104, .6);
  font-variant-numeric: tabular-nums;
}

.idx-label {
  font-size: 0.90625rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--aedre-depth-muted);
  transition: color .18s ease;
}

.idx-desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  /* alpha chosen for AA (≈5:1) over the darkest footer stops */
  color: rgba(170, 163, 152, .8);
  transition: color .18s ease;
}

.index-nav a:hover .idx-label,
.index-nav a[aria-current="page"] .idx-label {
  color: var(--aedre-depth-ink);
}

.index-nav a:hover .idx-desc {
  color: var(--aedre-depth-muted);
}

.index-nav a[aria-current="page"] .idx-num {
  color: var(--aedre-bronze);
}

.index-nav :focus-visible,
.lockup :focus-visible {
  outline-color: var(--aedre-bronze);
}

/* ---------- sheet marks (wide flourish) ---------- */

.sheet-marks { display: none; }

@media (min-width: 112.5rem) {
  .sheet-marks {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
  }

  .sheet-marks i {
    position: absolute;
    width: 1.375rem;
    height: 1.375rem;
  }

  .sheet-marks i:nth-child(1) {
    top: 1.375rem;
    left: 1.375rem;
    border-top: 1px solid var(--aedre-line-strong);
    border-left: 1px solid var(--aedre-line-strong);
  }

  .sheet-marks i:nth-child(2) {
    top: 1.375rem;
    right: 1.375rem;
    border-top: 1px solid var(--aedre-line-strong);
    border-right: 1px solid var(--aedre-line-strong);
  }

  .sheet-marks i:nth-child(3) {
    bottom: 1.375rem;
    left: 1.375rem;
    border-bottom: 1px solid rgba(241, 237, 228, .3);
    border-left: 1px solid rgba(241, 237, 228, .3);
  }

  .sheet-marks i:nth-child(4) {
    bottom: 1.375rem;
    right: 1.375rem;
    border-bottom: 1px solid rgba(241, 237, 228, .3);
    border-right: 1px solid rgba(241, 237, 228, .3);
  }
}

/* ---------- inner (stub) pages ---------- */

.identity-slim {
  min-height: var(--aedre-slim-h);
}

.page-head {
  padding-top: var(--aedre-ph-pt);
  padding-bottom: var(--aedre-ph-pb);
}

.page-head h1 {
  margin: 0;
  font-family: var(--aedre-serif);
  font-weight: 400;
  font-size: clamp(2.25rem, min(4.2vw, 9vh), 3.5rem);
  letter-spacing: .02em;
}

.page-head p {
  margin: 1rem 0 0;
  max-width: 46ch;
  color: var(--aedre-muted-strong);
  font-size: 1.03125rem;
}

/* ---------- MEDIUM (≤75rem: ~150–175% zoom, small laptops) ----------
   the lower navigation regroups 2×2 and the secondary guide retires;
   the bounded fluid values carry the compression */
@media (max-width: 75rem) {
  .index-nav {
    grid-template-columns: 1fr 1fr;
    row-gap: 1.375rem;
  }

  .geo .g-guide-b,
  .geo .g-dot-b {
    display: none;
  }
}

/* ---------- COMPACT (≤60rem: ~200% zoom, tablets) ----------
   active recomposition: brand bound tightens, threshold thins, the arc
   stays a horizon-hugging fragment instead of a full-height dome */
@media (max-width: 60rem) {
  :root {
    --aedre-brand: clamp(3.25rem, 7vw, 4.5rem);
    --aedre-ih-pb: 2.5rem;
  }

  .identity .geo-frame {
    height: min(100%, 21rem);
  }

  .geo-threshold { height: 7.5rem; }
}

/* ---------- EXTREME (≤45rem: ~250%+ zoom, phones) ----------
   deliberate recomposition: two-row masthead, stacked route index,
   wave-only geometry. Identity is smaller but intentional. */
@media (max-width: 45rem) {
  :root {
    --aedre-ih-pb: 2rem;
    --aedre-ph-pt: 2.5rem;
    --aedre-ph-pb: 3rem;
  }

  .masthead-frame {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding-top: 1rem;
    padding-bottom: 0.875rem;
  }

  .mark { font-size: 1rem; }

  .primary-nav {
    width: 100%;
    justify-content: flex-start;
    gap: 0.5rem 1.375rem;
  }

  .primary-nav a { padding: 0.5rem 0; }

  .identity-frame { padding-bottom: clamp(1.5rem, 5vh, 2.5rem); }

  .geo-threshold { height: 6rem; }

  /* the wave planes are the signature here; all linework steps back —
     narrow widths squeeze the arc into text-colliding ovals */
  .geo .g-arc,
  .geo .g-guide-a,
  .geo .g-dot-a,
  .geo .g-guide-b,
  .geo .g-dot-b {
    display: none;
  }

  .index-nav {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 0;
    padding-top: 0;
    padding-bottom: 2rem;
  }

  .index-nav a {
    padding: 0.875rem 0;
    border-top: 1px solid rgba(241, 237, 228, .12);
  }

  .index-nav a:first-child { border-top: 0; }
}

/* ---------- motion ---------- */

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

/* ÆDRE — inner page composition.
   .page-body groups a content page's stacked sections into a single flex child
   so the identity band keeps its bottom anchor and threshold with real content. */
.page-body {
  width: 100%;
}

/* short metal rule anchoring the page-head hierarchy (Contact, 404) —
   the inner-page echo of the home lockup's brand rule */
.page-rule {
  width: var(--aedre-brand-rule, clamp(2.75rem, 4.5vw, 4.5rem));
  height: 1px;
  margin-top: clamp(1rem, 2.2vh, 1.5rem);
  background: var(--aedre-metal-deep, #846331);
}

/* Contact — the quiet secondary line beneath the primary statement;
   kept at muted-strong so small text holds AA over the deepening paper
   (page-head-level specificity so it can widen past the shared 46ch measure) */
.page-head .contact-note {
  max-width: none;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  letter-spacing: .015em;
  color: var(--aedre-muted-strong, #625a50);
}

/* 404 — breathing room before the single route back */
.notfound-home {
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
}

/* ÆDRE — All Items composition (owned lane; appended after pages).
   The archive register: divider-led rows in the light surface zone, opened by
   one strong rule and separated by soft hairlines. Each row is a single real
   link (one tab stop per item) carrying a small index numeral, a serif title,
   quiet metadata and a short description only when they exist, and a
   restrained arrow. Hover/focus echoes the .quiet-link language: the title's
   thin underline reveals, the arrow steps forward, the neighboring hairline
   warms. Colors stay on the AA-safe steps of the approved palette:
   --aedre-metal (5.4:1+ on the light zone) for warm accents,
   --aedre-muted-strong (4.66:1 worst-case) for secondary text. */

.items-frame {
  /* lift the register above the identity band's decorative geo-frame, which
     is absolutely positioned and would otherwise intercept pointer events
     (same pattern as .identity-frame / .depth-frame in base.css) */
  position: relative;
  z-index: 2;
}

.items-list {
  list-style: none;
  margin: 0;
  /* bottom clearance keeps the last row clear of the threshold wave
     (wave height: 10rem standard / 7.5rem compact / 6rem extreme) */
  padding: 0 0 12.5rem;
  border-top: 1px solid var(--aedre-line-strong);
}

.item-row {
  border-top: 1px solid var(--aedre-line-soft);
  transition: border-color .18s ease;
}

.item-row:first-child { border-top: 0; }

.item-link {
  display: grid;
  grid-template-columns: clamp(1.75rem, 3vw, 2.75rem) minmax(0, 1fr) auto;
  grid-template-areas:
    "num title arrow"
    "num meta arrow"
    "num summary arrow";
  column-gap: clamp(0.875rem, 1.5vw, 1.5rem);
  align-items: start;
  padding: clamp(1.25rem, 2.4vh, 1.75rem) 0;
}

.item-num    { grid-area: num; }
.item-title  { grid-area: title; }
.item-meta   { grid-area: meta; }
.item-summary{ grid-area: summary; }
.item-arrow  { grid-area: arrow; }

/* absent fields render as empty spans; they must not leave a gap */
.item-meta:empty,
.item-summary:empty { display: none; }

.item-num {
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--aedre-metal);
  /* optically seat the numeral on the serif title's first line */
  padding-top: 0.3em;
}

.item-title {
  display: block;
  font-family: var(--aedre-serif);
  font-weight: 400;
  font-size: clamp(1.1875rem, 0.35vw + 1.06rem, 1.375rem);
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--aedre-ink);
  overflow-wrap: break-word;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .24em;
  transition: color .18s ease, text-decoration-color .18s ease;
}

.item-meta {
  display: block;
  margin-top: 0.4375rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: .07em;
  color: var(--aedre-muted-strong);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.item-summary {
  display: block;
  margin-top: 0.5625rem;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--aedre-muted-strong);
  overflow-wrap: break-word;
}

.item-arrow {
  margin-top: 0.35rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--aedre-metal);
  transition: transform .18s ease, color .18s ease;
}

/* hover: the register responds along its lines, quietly */

.item-row:hover,
.item-row:hover + .item-row { border-top-color: var(--aedre-line-strong); }

.item-link:hover .item-title,
.item-link:focus-visible .item-title {
  color: var(--aedre-metal);
  text-decoration-color: var(--aedre-line-strong);
}

.item-link:hover .item-arrow,
.item-link:focus-visible .item-arrow {
  color: var(--aedre-metal);
  transform: translateX(2px);
}

/* focus follows the light-zone convention (bronze rule, as in .lockup);
   the title also darkens to an AA-safe step so the state never rests on
   the outline alone */
.item-link:focus-visible {
  outline: 1px solid var(--aedre-bronze);
  outline-offset: 4px;
}

@media (max-width: 60rem) {
  .items-list { padding-bottom: 10rem; }
}

@media (max-width: 45rem) {
  .items-list { padding-bottom: 8.25rem; }

  .item-link {
    grid-template-columns: 1.625rem minmax(0, 1fr) auto;
    column-gap: 0.875rem;
    padding: 1.125rem 0;
  }

  .item-title { font-size: 1.125rem; }
  .item-summary { max-width: none; }
}

/* ÆDRE — Notes composition (owned lane; appended after items).
   Notes is a reading surface (DESIGN_DIRECTION.md §13): the index is a
   quieter, narrower cousin of the All Items register — the same row anatomy
   (index numeral, serif title, quiet metadata, restrained arrow) inside a
   capped 52rem column — and the reading page caps its text measure near 70ch
   with serif headings over a calm sans body. Colors stay on the AA-safe steps
   of the approved palette: --aedre-ink for primary reading text,
   --aedre-muted-strong (4.66:1 worst-case on paper/gradient-end) for metadata,
   --aedre-metal (5.4:1+) for warm accents. Hover/focus echo the .quiet-link
   language shared with the items lane: the title's thin underline reveals,
   the arrow steps forward, the neighboring hairline warms. */

/* ---------- index (populated mode) ---------- */

.notes-frame {
  /* lift the list above the identity band's absolutely-positioned decorative
     geo-frame (.geo-frame sits above static content; interactive blocks need
     the lift — same pattern as .identity-frame / .items-frame) */
  position: relative;
  z-index: 2;
}

.notes-list {
  list-style: none;
  margin: 0;
  /* a reading index, narrower than the All Items register and left-anchored:
     rows stay cohesive instead of stretching a one-line summary across the
     full sheet */
  max-width: 52rem;
  /* bottom clearance keeps the last row clear of the threshold wave
     (wave height: 10rem standard / 7.5rem compact / 6rem extreme) */
  padding: 0 0 12.5rem;
  border-top: 1px solid var(--aedre-line-strong);
}

.note-row {
  border-top: 1px solid var(--aedre-line-soft);
  transition: border-color .18s ease;
}

.note-row:first-child { border-top: 0; }

/* one real link per row — a single tab stop carrying title, date, summary */
.note-link {
  display: grid;
  grid-template-columns: clamp(1.75rem, 3vw, 2.75rem) minmax(0, 1fr) auto;
  grid-template-areas:
    "num title arrow"
    "num meta arrow"
    "num summary arrow";
  column-gap: clamp(0.875rem, 1.5vw, 1.5rem);
  align-items: start;
  padding: clamp(1.25rem, 2.4vh, 1.75rem) 0;
}

.note-num         { grid-area: num; }
.note-title       { grid-area: title; }
.note-row-meta    { grid-area: meta; }
.note-row-summary { grid-area: summary; }
.note-arrow       { grid-area: arrow; }

/* absent fields render as empty slots; they must not leave a gap */
.note-row-meta:empty,
.note-row-summary:empty { display: none; }

.note-num {
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--aedre-metal);
  /* optically seat the numeral on the serif title's first line */
  padding-top: 0.3em;
}

.note-title {
  display: block;
  font-family: var(--aedre-serif);
  font-weight: 400;
  font-size: clamp(1.1875rem, 0.35vw + 1.06rem, 1.375rem);
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--aedre-ink);
  overflow-wrap: break-word;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .24em;
  transition: color .18s ease, text-decoration-color .18s ease;
}

.note-row-meta {
  display: block;
  margin-top: 0.4375rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: .07em;
  color: var(--aedre-muted-strong);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.note-row-summary {
  display: block;
  margin-top: 0.5625rem;
  max-width: 48ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--aedre-muted-strong);
  overflow-wrap: break-word;
}

.note-arrow {
  margin-top: 0.35rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--aedre-metal);
  transition: transform .18s ease, color .18s ease;
}

/* hover/focus: the register responds along its lines, quietly */

.note-row:hover,
.note-row:hover + .note-row { border-top-color: var(--aedre-line-strong); }

.note-link:hover .note-title,
.note-link:focus-visible .note-title {
  color: var(--aedre-metal);
  text-decoration-color: var(--aedre-line-strong);
}

.note-link:hover .note-arrow,
.note-link:focus-visible .note-arrow {
  color: var(--aedre-metal);
  transform: translateX(2px);
}

/* focus follows the light-zone convention (bronze rule, as in .lockup);
   the title also darkens to an AA-safe step so the state never rests on
   the outline alone */
.note-link:focus-visible {
  outline: 1px solid var(--aedre-bronze);
  outline-offset: 4px;
}

/* ---------- reading page ---------- */

.note-head h1 {
  /* a note title is content, not a page identity — a step below .page-head */
  font-size: clamp(1.875rem, min(3.2vw, 7vh), 2.625rem);
  max-width: 26ch;
}

/* the date eyebrow sits above the title; overrides the shared .page-head p */
.page-head .note-date {
  margin: 0 0 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--aedre-metal);
}

.page-head .note-summary {
  margin-top: clamp(1rem, 2.2vh, 1.375rem);
  max-width: 52ch;
  font-family: var(--aedre-serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.note-body-frame {
  position: relative;
  z-index: 2;
  padding-bottom: 12.5rem;
}

.note-body {
  /* ~68ch at the 1.0625rem body size — the narrow reading measure */
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--aedre-ink);
  overflow-wrap: break-word;
}

.note-body > :first-child { margin-top: 0; }
.note-body > :last-child { margin-bottom: 0; }

.note-body p {
  margin: 0 0 1.125em;
}

/* serif section heads descend from the note title, no decoration */
.note-body h2,
.note-body h3,
.note-body h4 {
  margin: 2.25em 0 0.75em;
  font-family: var(--aedre-serif);
  font-weight: 400;
  line-height: 1.3;
  color: var(--aedre-ink);
}

.note-body h2 { font-size: 1.4375rem; letter-spacing: .01em; }
.note-body h3 { font-size: 1.1875rem; }
.note-body h4 { font-size: 1.0625rem; letter-spacing: .02em; }

.note-body strong { font-weight: 600; }

.note-body ul,
.note-body ol {
  margin: 0 0 1.125em;
  padding-left: 1.375rem;
}

.note-body li {
  margin: 0.375em 0;
  padding-left: 0.25rem;
}

.note-body li::marker { color: var(--aedre-metal); }

/* quoted matter: a hairline rule and serif italics, nothing heavier */
.note-body blockquote {
  margin: 1.5em 0;
  padding: 0.125rem 0 0.125rem 1.25rem;
  border-left: 1px solid var(--aedre-line-strong);
}

.note-body blockquote p {
  margin: 0;
  font-family: var(--aedre-serif);
  font-style: italic;
  color: var(--aedre-muted-strong);
}

.note-body code {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  font-size: 0.875em;
  padding: 0.125em 0.375em;
  background: rgba(104, 77, 36, .07);
  border: 1px solid var(--aedre-line-soft);
  overflow-wrap: break-word;
}

.note-body hr {
  border: 0;
  border-top: 1px solid var(--aedre-line-soft);
  margin: 2.5em 0;
}

/* in-note links are underlined actions (never color-only), warming on hover */
.note-body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--aedre-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .18s ease, text-decoration-color .18s ease;
}

.note-body a:hover {
  color: var(--aedre-metal);
  text-decoration-color: var(--aedre-metal);
}

.note-body a:focus-visible {
  outline: 1px solid var(--aedre-bronze);
  outline-offset: 3px;
}

/* ---------- responsive: mirror the bounded composition states ---------- */

@media (max-width: 60rem) {
  .notes-list { padding-bottom: 10rem; }
  .note-body-frame { padding-bottom: 10rem; }
}

@media (max-width: 45rem) {
  .notes-list { padding-bottom: 8.25rem; }
  .note-body-frame { padding-bottom: 8.25rem; }

  .note-link {
    grid-template-columns: 1.625rem minmax(0, 1fr) auto;
    column-gap: 0.875rem;
    padding: 1.125rem 0;
  }

  .note-title { font-size: 1.125rem; }
  .note-row-summary { max-width: none; }
}