/* ==========================================================================
   Personal Brand Site — page-architecture layout on top of design tokens
   ========================================================================== */

@import url("colors_and_type.css");

/* ----- frame + scroll ----- */
html { scroll-behavior: smooth; }
body {
  hanging-punctuation: first last;
  background: var(--bg-1);
  color: var(--fg-2);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* density tweak */
:root[data-density="cozy"]   { --d-section: var(--space-6xl); --d-spread: var(--space-4xl); }
:root[data-density="default"]{ --d-section: var(--space-5xl); --d-spread: var(--space-3xl); }
:root[data-density="tight"]  { --d-section: var(--space-3xl); --d-spread: var(--space-2xl); }

/* accent role swap (warm = pollen | willow) */
:root[data-warm="willow"] { --accent-warm: var(--willow); --accent-cool: var(--pollen); }

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

/* ----- masthead ----- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg-1) 92%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid transparent;
  transform: translateZ(0);
  will-change: transform;
  contain: layout paint;
  transition: padding var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) var(--ease-out-quart);
}
.masthead[data-collapsed="true"] { border-bottom-color: var(--rule); }
.masthead-inner {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  transition: padding-block var(--dur-base) var(--ease-out-quart);
}
.masthead[data-collapsed="true"] .masthead-inner { padding-block: var(--space-sm); }
.masthead-mark {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
  background: none;
  padding: 0;
}
.masthead-mark .dot { color: var(--accent-hot); }
.masthead-meta {
  font-family: var(--font-sans);
  font-size: var(--t-overline);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--fg-3);
  display: block;
  margin-top: 2px;
  max-height: 4em;
  opacity: 1;
  overflow: hidden;
  transition:
    max-height var(--dur-base) var(--ease-out-quart),
    opacity var(--dur-fast) var(--ease-out-quart),
    margin-top var(--dur-base) var(--ease-out-quart);
}
.masthead[data-collapsed="true"] .masthead-meta {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}
.chaptermarks {
  display: flex; gap: var(--space-lg); align-items: baseline;
  font-family: var(--font-sans);
  font-size: var(--t-small);
}
.chaptermarks a {
  background: none; padding: 0;
  color: var(--fg-3);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.chaptermarks a:hover { color: var(--accent-cool); }
.chaptermarks .resume-pill {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-overline);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  border: 1px solid var(--rule-strong);
  padding: 6px 12px;
  border-radius: var(--r-md);
  color: var(--fg-1);
  background: none;
  transition: background-color var(--dur-base) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart);
}
.chaptermarks .resume-pill:hover {
  color: var(--parchment);
  background: var(--ink);
  border-color: var(--ink);
}
@media (max-width: 720px) {
  .masthead {
    background: var(--bg-1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .masthead-inner { flex-wrap: wrap; row-gap: var(--space-sm); }
  .masthead-mark { flex: 1 1 100%; }
  .chaptermarks {
    flex: 1 1 100%;
    gap: var(--space-md);
    flex-wrap: wrap;
    font-size: var(--t-caption);
  }
}

/* ----- generic section ----- */
.section { padding-block: var(--d-section, var(--space-5xl)); }
.section + .section { border-top: 1px solid var(--rule); }
.section--invert + .section { border-top-color: transparent; }

/* eyebrow with leading accent rule */
.eyebrow-rule {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-overline);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--fg-3);
  margin-bottom: var(--space-lg);
}
.eyebrow-rule::before {
  content: ""; width: 28px; height: 1px;
  background: var(--accent-warm);
}
.eyebrow-rule .glyph { color: var(--accent-warm); font-style: italic; font-family: var(--font-serif); }

/* ----- hero ----- */
.hero { padding-block: var(--space-5xl) var(--space-4xl); }
.hero .dateline {
  display: flex; gap: var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--t-overline);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--fg-3);
  margin-bottom: var(--space-2xl);
}
.hero .dateline .glyph { color: var(--accent-warm); font-style: italic; font-family: var(--font-serif); text-transform: none; }
.hero h1 {
  font-weight: 300;
  font-size: clamp(2.75rem, 6.4vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-2xl);
  max-width: 14ch;
}
.hero h1 em {
  font-style: italic; font-weight: 300;
  color: var(--accent-warm);
}
.hero .lede {
  max-width: 56ch;
}
.hero-foot {
  margin-top: var(--space-3xl);
  display: flex; justify-content: space-between; align-items: end;
  gap: var(--space-2xl);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-md);
}
.hero-foot .small-meta {
  font-family: var(--font-sans);
  font-size: var(--t-overline);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--fg-3);
}
.hero-foot .small-meta strong { color: var(--fg-1); font-weight: 600; }
.hero-foot .scroll-hint {
  font-family: var(--font-sans);
  font-size: var(--t-overline);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--fg-3);
  display: inline-flex; align-items: center; gap: 0.5em;
}

.byline {
  display: flex; align-items: center; gap: var(--space-sm);
  min-width: 0;
}
.byline > picture {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: block;
}
.byline-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ----- what-i-do ----- */
.what-i-do .columns {
  display: grid; gap: var(--space-3xl);
  grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .what-i-do .columns { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .what-i-do .columns { grid-template-columns: repeat(3, 1fr); } }
.what-i-do .col {
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--space-md);
}
.what-i-do .col .num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--accent-cool);
  display: block;
  margin-bottom: var(--space-sm);
}
.what-i-do .col h3 {
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  letter-spacing: var(--tr-snug);
}
.what-i-do .col p {
  font-size: var(--t-body);
  color: var(--fg-2);
  max-width: 38ch;
}

.section-head {
  display: grid; gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .section-head { grid-template-columns: 1fr 1.4fr; align-items: end; }
}
.section-head h2 {
  font-weight: 700;
  font-size: clamp(1.875rem, 3.4vw, 2.625rem);
  letter-spacing: var(--tr-snug);
  line-height: 1.05;
  max-width: 16ch;
}
.section-head .head-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.0625rem;
  color: var(--fg-3);
  max-width: 52ch;
  border-left: none;
}

/* ----- selected work ----- */
.work-list { display: grid; gap: var(--space-4xl); }
.work-item {
  display: grid; gap: var(--space-xl);
  grid-template-columns: 1fr;
  position: relative;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .work-item { grid-template-columns: 5em minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-2xl); }
}
.work-item .roman {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  color: var(--accent-cool);
  letter-spacing: -0.02em;
}
.work-item .work-meta {
  display: flex; flex-direction: column; gap: var(--space-md);
}
.work-item .scope {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  color: var(--fg-3);
  line-height: 1.55;
}
.work-item .scope dt {
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  font-weight: 600;
  color: var(--fg-3);
  margin-bottom: 2px;
}
.work-item .scope dd { margin: 0 0 var(--space-sm); color: var(--fg-2); font-family: var(--font-serif); font-size: var(--t-small); }
.work-item h3 {
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: var(--tr-snug);
  line-height: 1.1;
  margin-bottom: var(--space-sm);
}
.work-item .eyebrow-rule { margin-bottom: var(--space-sm); }
.work-item p { font-size: var(--t-body); color: var(--fg-2); max-width: 52ch; }
.work-item .outcome {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: var(--tr-snug);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  color: var(--fg-1);
}
.work-item .outcome .figure {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  color: var(--accent-warm);
  font-size: 1.25rem;
}

/* typographic plate (placeholder for screenshots) */
.plate {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  padding: var(--space-xl) var(--space-lg);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg);
  min-height: 240px;
  position: relative;
  overflow: hidden;
}
.plate .plate-tag {
  font-family: var(--font-sans);
  font-size: var(--t-overline);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--fg-3);
  display: flex; justify-content: space-between;
}
.plate .plate-tag .roman-mini { color: var(--accent-cool); font-style: italic; font-family: var(--font-serif); }
.plate blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.4;
  color: var(--fg-1);
  letter-spacing: var(--tr-snug);
}
.plate blockquote::before { content: "“"; color: var(--accent-warm); font-size: 2.4em; line-height: 0; vertical-align: -0.35em; margin-right: 0.05em; }
.plate .plate-foot {
  display: flex; justify-content: space-between; align-items: end;
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  color: var(--fg-3);
}
.plate .plate-foot strong { color: var(--fg-1); font-weight: 600; }

/* mock-browser plate variant — editorial sketch of a deployed UI */
.plate--mock { padding: 0; gap: 0; min-height: 280px; }
.plate--mock .chrome {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-1);
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  color: var(--fg-3);
}
.plate--mock .chrome .dots { display: inline-flex; gap: 6px; }
.plate--mock .chrome .dots i { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--rule-strong); display: inline-block; }
.plate--mock .body {
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-md);
}
.plate--mock .body .ey {
  font-family: var(--font-sans); font-size: var(--t-overline);
  text-transform: uppercase; letter-spacing: var(--tr-wider);
  color: var(--accent-warm); font-weight: 600;
}
.plate--mock .body h4 {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: var(--tr-snug);
  line-height: 1.1;
  margin: 0;
  color: var(--fg-1);
}
.plate--mock .body .stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-md);
  margin-top: var(--space-xs);
}
.plate--mock .body .stat .k {
  font-family: var(--font-sans); font-size: var(--t-overline);
  text-transform: uppercase; letter-spacing: var(--tr-wider);
  color: var(--fg-3); display: block; margin-bottom: 4px;
}
.plate--mock .body .stat .v {
  font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem;
  color: var(--fg-1);
}
.plate--mock .body .stat .v em { font-style: italic; font-weight: 400; color: var(--accent-warm); }
.plate--mock .body .bars {
  display: flex; align-items: end; gap: 6px; height: 56px;
  border-bottom: 1px solid var(--rule); padding-bottom: 4px;
}
.plate--mock .body .bars i {
  flex: 1; background: var(--ink-quiet); display: block;
  border-top-left-radius: 1px; border-top-right-radius: 1px;
}
.plate--mock .body .bars i.warm { background: var(--accent-warm); }
.plate--mock .body .bars i.cool { background: var(--accent-cool); }

/* ticket-row variant of plate--mock body */
.ticket-rows { display: grid; gap: var(--space-xs); margin-top: 4px; }
.ticket-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px dotted var(--rule);
}
.ticket-row code { font-size: 11px; }
.ticket-row .ticket-title { font-family: var(--font-serif); font-size: var(--t-small); }
.ticket-row .ticket-status {
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  font-weight: 600;
}
.ticket-row .ticket-status--warm  { color: var(--accent-warm); }
.ticket-row .ticket-status--cool  { color: var(--accent-cool); }
.ticket-row .ticket-status--muted { color: var(--fg-3); }

/* terminal-output variant of plate--mock body (case study v) */
.plate-stack-body { gap: 0 !important; }
.plate-stack-body pre {
  margin: 0;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  color: var(--fg-2);
  line-height: 1.7;
  white-space: pre;
}

/* siding/swatch plate */
.plate--swatch { padding: 0; gap: 0; min-height: 260px; }
.plate--swatch .swatch-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: 100%; flex: 1;
}
.plate--swatch .swatch-grid > i { display: block; min-height: 200px; }
.plate--swatch .meta {
  display: flex; justify-content: space-between;
  padding: 12px 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  color: var(--fg-3);
}

/* ----- how I work ----- */
.how-grid {
  display: grid; gap: var(--space-2xl);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .how-grid { grid-template-columns: 1fr 1fr; }
}
.how-card {
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--space-md);
}
.how-card h3 {
  font-size: 1.5rem; font-weight: 700; margin-bottom: var(--space-md);
  letter-spacing: var(--tr-snug);
}
.how-card .roman-mini {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: var(--t-overline); letter-spacing: var(--tr-wider);
  color: var(--accent-cool); display: block; margin-bottom: 4px;
  text-transform: uppercase;
}
.how-card p { max-width: 48ch; }
.how-card .tool-row {
  margin-top: var(--space-md);
  display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.how-card .tool-row code {
  font-size: var(--t-caption);
  background: var(--bg-2);
}
.tree {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  background: var(--bg-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  line-height: 1.7;
  color: var(--fg-2);
  white-space: pre;
  overflow-x: auto;
}
.tree .c { color: var(--fg-3); }
.tree .w { color: var(--accent-cool); }
.tree .p { color: var(--accent-warm); }

/* ----- field notes ----- */
.notes-list { display: grid; gap: var(--space-3xl); max-width: 68ch; }
.note { border-top: 1px solid var(--rule); padding-top: var(--space-lg); }
.note .meta {
  font-family: var(--font-sans); font-size: var(--t-overline);
  text-transform: uppercase; letter-spacing: var(--tr-wider);
  color: var(--fg-3); margin-bottom: var(--space-sm);
  display: flex; gap: var(--space-md);
}
.note h3 { font-weight: 700; font-size: 1.625rem; margin-bottom: var(--space-md); letter-spacing: var(--tr-snug); }
.note p { font-size: var(--t-body); }
.note p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 3.6em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.08em -0.05em 0;
  color: var(--fg-1);
}
.note--drafting { opacity: 0.6; }
.note--drafting p:first-of-type::first-letter { all: unset; }
.note--drafting .note-summary { color: var(--fg-3); font-style: italic; }
.note .endmark { text-align: left; margin-top: var(--space-md); color: var(--accent-cool); }

/* ----- specimen / inverted spread ----- */
.section--invert {
  background: var(--bg-invert);
  color: var(--fg-invert);
  padding-block: var(--space-5xl);
  position: relative;
}
.section--invert .frame { color: var(--fg-invert); }
.section--invert .eyebrow-rule { color: var(--fg-invert); }
.section--invert .eyebrow-rule::before { background: var(--accent-warm); }
.specimen-grid {
  display: grid; gap: var(--space-2xl);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .specimen-grid { grid-template-columns: 1.2fr 1fr; align-items: end; }
}
.specimen-display {
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--fg-invert);
}
.specimen-display em {
  font-style: italic; font-weight: 300; color: var(--accent-warm);
}
.specimen-display .amp { font-style: italic; font-weight: 300; color: var(--accent-cool); }
.specimen-pull {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.4;
  color: var(--accent-warm);
  max-width: 32ch;
  margin: 0;
}
.specimen-pull span { color: var(--fg-invert); }
.specimen-pull .specimen-pull-attribution {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--t-overline);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: color-mix(in oklab, var(--fg-invert) 60%, transparent);
}

.specimen-foot {
  margin-top: var(--space-4xl);
  display: grid; gap: var(--space-2xl);
  grid-template-columns: 1fr;
  border-top: 1px solid color-mix(in oklab, var(--fg-invert) 18%, transparent);
  padding-top: var(--space-xl);
}
@media (min-width: 760px) { .specimen-foot { grid-template-columns: 1.2fr 1fr 1fr; } }

.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.swatches .sw {
  aspect-ratio: 1 / 1.4;
  display: flex; flex-direction: column; justify-content: end;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--fg-invert) 14%, transparent);
  border-right: 0;
}
.swatches .sw:last-child { border-right: 1px solid color-mix(in oklab, var(--fg-invert) 14%, transparent); }
.swatches .sw .name {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--t-overline);
  text-transform: uppercase; letter-spacing: var(--tr-wider);
}
.swatches .sw .hex {
  font-family: var(--font-mono); font-size: 10px;
  color: color-mix(in oklab, var(--fg-invert) 70%, transparent);
}
.swatches .sw.onyx       { background: var(--onyx); color: var(--fg-invert); }
.swatches .sw.parchment  { background: var(--parchment); color: var(--ink); }
.swatches .sw.parchment .hex { color: var(--ink-muted); }
.swatches .sw.pollen     { background: var(--pollen); color: var(--ink); }
.swatches .sw.pollen .hex { color: var(--ink-muted); }
.swatches .sw.willow     { background: var(--willow); color: var(--ink); }
.swatches .sw.willow .hex { color: var(--ink-muted); }
.swatches .sw.fuchsia    { background: var(--fuchsia); color: var(--parchment); }

.stack-list { font-family: var(--font-sans); font-size: var(--t-small); color: var(--fg-invert); display: grid; gap: 8px; }
.stack-list .row { display: flex; justify-content: space-between; gap: var(--space-md); border-bottom: 1px dotted color-mix(in oklab, var(--fg-invert) 22%, transparent); padding-bottom: 6px; }
.stack-list .row .k { color: color-mix(in oklab, var(--fg-invert) 65%, transparent); font-family: var(--font-mono); font-size: var(--t-caption); text-transform: uppercase; letter-spacing: var(--tr-wider); }
.stack-list .row .v { color: var(--fg-invert); font-family: var(--font-serif); font-style: italic; }

/* ----- colophon ----- */
.colophon {
  padding-block: var(--space-4xl) var(--space-2xl);
  border-top: 1px solid var(--rule);
}
.colophon-grid {
  display: grid; gap: var(--space-3xl);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .colophon-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}
.colophon h2 {
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--space-md);
  max-width: 14ch;
}
.colophon h2 em { color: var(--accent-warm); font-style: italic; }
.colophon .contact-block .email {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: var(--tr-snug);
  display: inline-block;
  background-image: linear-gradient(var(--accent-cool), var(--accent-cool));
  background-size: 100% 2px;
}
.colophon dl { margin: 0; display: grid; gap: var(--space-sm); font-family: var(--font-sans); font-size: var(--t-small); }
.colophon dl .row { display: grid; grid-template-columns: 8ch 1fr; gap: var(--space-md); align-items: baseline; }
.colophon dl dt {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--t-overline);
  text-transform: uppercase; letter-spacing: var(--tr-wider);
  color: var(--fg-3); margin: 0;
}
.colophon dl dd { margin: 0; color: var(--fg-2); font-family: var(--font-serif); }
.colophon .provenance {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  color: var(--fg-3); font-size: var(--t-small);
  max-width: 36ch; line-height: 1.55;
}
.colophon .provenance .glyph { color: var(--accent-warm); font-style: italic; }
.colophon-foot {
  margin-top: var(--space-3xl);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: var(--t-caption); color: var(--fg-4);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-md);
}
.colophon-foot a { background: none; padding: 0; color: var(--fg-3); }
.colophon-foot a:hover { color: var(--accent-hot); }

/* utility — body inline link override inside chrome contexts */
.chaptermarks a, .colophon-foot a, .masthead-mark, .work-item .scope a {
  background-image: none;
}
.work-item .scope a {
  color: var(--fg-2);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 1px;
}
.work-item .scope a:hover { color: var(--accent-hot); border-color: var(--accent-hot); }

/* skip link */
.skip-link {
  position: absolute; left: -10000px;
  background: var(--ink); color: var(--parchment);
  padding: 8px 12px; border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: var(--t-small);
}
.skip-link:focus { left: var(--space-md); top: var(--space-md); z-index: 100; background-image: none; }

/* ==========================================================================
   DIAGNOSTIC — TEMPORARY (2026-05-09 landscape jitter bisect)
   Drops backdrop-filter at all widths to test whether it is the cause of
   landscape iPhone scroll jitter + inertia disruption. Remove this block
   once we know.
   ========================================================================== */
.masthead {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--bg-1) !important;
}