/* House colours: Wimborne White, Slipper Satin, Stiffkey Blue,
   Setting Plaster, and Charlotte's Locks. See the colophon. */
:root {
  color-scheme: light;
  --paint: #f5f2e8;
  --ink: #2b3742;
  --muted: #5c666b;
  --accent: #a8481f;
  --line: #c8c6ba;
  --wash: #e7e2d2;
  --plaster: #dbc2b0;
  --texture-opacity: .56;
  --daylight: rgb(255 255 255 / .65);
  --wall-shade: rgb(43 55 66 / .12);
  --portrait-wire-opacity: 12%;
  --panel-wire: color-mix(in srgb, var(--paint) 75%, transparent);
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Source Sans 3', 'Helvetica Neue', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) {
    color-scheme: dark;
    --paint: #1b2430;
    --ink: #e7e2d2;
    --muted: #b2bdbf;
    --accent: #e4ae91;
    --line: #46515b;
    --wash: #222d3a;
    --plaster: #485c6a;
    --texture-opacity: .14;
    --daylight: rgb(231 226 210 / .065);
    --wall-shade: rgb(0 0 0 / .24);
    --portrait-wire-opacity: 30%;
    --panel-wire: rgb(231 226 210 / .45);
  }
}
:root[data-appearance="dark"] {
  color-scheme: dark;
  --paint: #1b2430;
  --ink: #e7e2d2;
  --muted: #b2bdbf;
  --accent: #e4ae91;
  --line: #46515b;
  --wash: #222d3a;
  --plaster: #485c6a;
  --texture-opacity: .14;
  --daylight: rgb(231 226 210 / .065);
  --wall-shade: rgb(0 0 0 / .24);
  --portrait-wire-opacity: 30%;
  --panel-wire: rgb(231 226 210 / .45);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paint); scroll-padding-top: 2rem; }
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  background:
    radial-gradient(ellipse at 12% 8%, var(--daylight), transparent 65%),
    linear-gradient(135deg, transparent 30%, var(--wall-shade)),
    var(--paint);
  color: var(--ink);
  font: 400 1.125rem/1.65 var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  /* Keep the grain at wall scale on every page, rather than stretching it
     with the document. Neutral grey preserves the underlying paint colour. */
  background: url('../images/v3/painted-wall.webp') left top / 768px 768px repeat;
  opacity: var(--texture-opacity);
  mix-blend-mode: soft-light;
}
::selection { background: var(--plaster); color: var(--ink); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
main:focus { outline: none; }
img { display: block; max-width: 100%; height: auto; }
button, select { font: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
.wrap { width: min(100% - 7.5rem, 73rem); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; top: 1rem; left: 1rem; z-index: 10;
  padding: .5rem 1rem; background: var(--ink); color: var(--paint);
  transform: translateY(-200%); font-family: var(--sans);
}
.skip-link:focus { transform: translateY(0); }
.draft-watermark {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%) rotate(-12deg);
  width: min(80vw, 28rem);
  padding: .6rem 1rem .85rem;
  border: 5px double currentColor;
  border-radius: 3px;
  color: var(--accent);
  opacity: .2;
  text-align: center;
  font: 600 clamp(3rem, 10vw, 6rem)/1 var(--sans);
  letter-spacing: .12em;
  text-indent: .12em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}
.draft-watermark small {
  display: block;
  margin-top: .4rem;
  font: 600 clamp(.6rem, 2vw, .85rem)/1.4 var(--sans);
  letter-spacing: .25em;
}
.site-header {
  display: flex; align-items: center; gap: 1.7rem;
  min-height: 7.5rem; border-bottom: 1px solid var(--line);
}
.wordmark { margin-right: auto; font-size: 1.5rem; letter-spacing: -.035em; text-decoration: none; white-space: nowrap; }
.wordmark-prefix { font-size: .75em; font-variant-caps: all-small-caps; letter-spacing: .04em; }
.wordmark-dot { color: var(--accent); }
.main-nav { display: flex; gap: 1.7rem; font: 400 .94rem/1.4 var(--sans); }
.main-nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.main-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: .5rem; }
.appearance { display: flex; align-items: center; gap: .4rem; color: var(--muted); font: 400 .85rem/1.4 var(--sans); }
.appearance svg { flex-shrink: 0; }
.appearance select { min-height: 44px; min-width: 5.1rem; border: 0; padding: .25rem .1rem; background: transparent; color: var(--ink); cursor: pointer; }
.appearance option { background: var(--paint); color: var(--ink); }
.hero { --hero-top: 5.25rem; display: grid; grid-template-columns: minmax(0, 1fr) 15.75rem; column-gap: 5rem; padding: var(--hero-top) 0 5.5rem; align-items: center; }
.eyebrow { font: 500 .75rem/1.5 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.hero h1 { margin: 1.3rem 0 1.7rem; font-size: clamp(3.2rem, 5.8vw, 5.15rem); line-height: 1.08; letter-spacing: -.055em; }
.hero-heading-lead { display: block; margin-bottom: .65em; font-size: .42em; line-height: 1.35; letter-spacing: -.025em; }
h1 em { color: var(--accent); font-weight: 400; }
.intro { max-width: 36rem; font-size: 1.2rem; line-height: 1.65; }
.intro-links { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 1.75rem; }
.text-link { display: inline-flex; align-items: baseline; gap: .55rem; font: 500 .95rem/1.6 var(--sans); text-decoration: none; border-bottom: 1px solid var(--line); padding: .25rem 0; }
.text-link:hover { border-color: var(--accent); }
.contact-dialog {
  /* Cords extend outside the frame; the inner panel owns scrolling. */
  overflow: visible;
  position: fixed;
  transform: rotate(-.5deg);
  transform-origin: 50% calc(.8rem - var(--suspension-height, 0px));
  width: min(34rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: .8rem .8rem 1.2rem;
  border: 0;
  outline: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  outline-offset: -.25rem;
  background: color-mix(in srgb, var(--paint) 70%, var(--wash));
  color: var(--ink);
  box-shadow: 2px 3px 5px -2px rgb(0 0 0 / .20), 14px 22px 48px -12px rgb(0 0 0 / .30);
}
.contact-dialog::before, .contact-dialog::after {
  content: '';
  position: absolute;
  z-index: 2;
  bottom: calc(100% - .8rem);
  height: var(--suspension-height, 0px);
  width: 1px;
  background: var(--panel-wire);
  pointer-events: none;
}
.contact-dialog::before { left: 1.6rem; }
.contact-dialog::after { right: 1.6rem; }
.contact-panel {
  max-height: calc(100dvh - 4rem);
  overflow: auto;
  position: relative;
  z-index: 3;
  padding: clamp(1rem, 3vw, 1.75rem);
  background: var(--paint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.contact-dialog::backdrop { background: rgb(15 23 31 / .55); }
.contact-dialog form { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.contact-close { border: 0; background: transparent; color: var(--muted); padding: .4rem; min-width: 44px; min-height: 44px; cursor: pointer; font: 400 .9rem/1.5 var(--sans); }
.contact-close span { font-size: 1.3em; }
.contact-close:hover { color: var(--accent); }
.contact-dialog h2 { font-size: clamp(2.5rem, 7vw, 3.5rem); line-height: 1.15; letter-spacing: -.04em; margin: .5rem 0 1.75rem; }
.contact-options { list-style: none; padding: 0; margin: 0; }
.contact-options li { border-top: 1px solid var(--line); }
.contact-options a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: 1rem 0; text-decoration: none; font: 400 1rem/1.5 var(--sans); overflow-wrap: anywhere; }
.contact-options a > span:first-child { color: var(--muted); }
.websites-dialog .contact-options a { display: block; }
@media (max-width: 600px) { .contact-dialog::before, .contact-dialog::after { display: none; } }
/* The archive chooser stays a small panel beside the footer control. */
.websites-dialog {
  inset: auto 1.5rem 4rem auto;
  margin: 0;
  width: min(19rem, calc(100% - 2rem));
  padding: .6rem .6rem .85rem;
}
.websites-dialog .contact-panel { padding: .65rem .85rem; }
.websites-dialog h2 { font-size: 1.35rem; margin: 0 0 .6rem; }
.websites-dialog form { margin-bottom: 0; }
.websites-dialog .contact-options a { font-size: .8rem; padding: .5rem 0; }
@media (max-width: 600px) { .websites-dialog { right: 1rem; bottom: 1.5rem; } }

.file-label { font: 400 .72em/1.5 var(--sans); letter-spacing: .035em; white-space: nowrap; }
.portrait {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
  align-self: stretch;
  margin-top: 3.2rem;
}
.portrait-hanging {
  display: grid;
  grid-row: 1 / 3;
  grid-template-rows: subgrid;
  /* Pivot at the header rule; carry the cords and frame together. */
  transform-origin: 50% calc(-1 * var(--hero-top) - 3.2rem);
}
.portrait-hangers {
  grid-row: 1;
  position: relative;
  margin-top: calc(-1 * var(--hero-top) - 3.2rem);
  pointer-events: none;
}
.portrait-hangers::before, .portrait-hangers::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: -1.25rem;
  width: 1px;
  background: color-mix(in srgb, var(--ink) var(--portrait-wire-opacity), transparent);
}
.portrait-hangers::before { left: 20%; }
.portrait-hangers::after { right: 20%; }
.portrait-frame {
  grid-row: 2;
  position: relative;
  padding: .8rem .8rem 1.2rem;
  background: color-mix(in srgb, var(--paint) 70%, var(--wash));
  transform: rotate(1.5deg);
  transform-origin: 50% 0;
  /* One quiet panel line: retain the joinery reference without a bevelled UI. */
  box-shadow:
    2px 3px 5px -2px rgb(0 0 0 / .20),
    14px 22px 32px -12px rgb(0 0 0 / .18);
}
.portrait-frame::before {
  content: '';
  position: absolute;
  inset: .25rem;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  pointer-events: none;
}
.portrait img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  outline: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  outline-offset: -1px;
}
.portrait figcaption { grid-row: 3; display: grid; gap: .1rem; margin-top: 1.1rem; font: 400 .75rem/1.5 var(--sans); color: var(--muted); }
.portrait figcaption span:first-child { color: var(--ink); }
.chapters { margin-bottom: 4rem; }
.chapter { display: grid; grid-template-columns: 3.25rem 15rem 1fr 2rem; gap: 1.1rem; align-items: center; padding: 1.85rem 0; border-top: 1px solid var(--line); text-decoration: none; }
.chapter:last-child { border-bottom: 1px solid var(--line); }
.chapter-number { font: 400 1.2rem/1 'Concourse Index', var(--sans); color: var(--muted); font-variant-ligatures: common-ligatures; letter-spacing: 0; }
.chapter h3 { font-size: 2.3rem; line-height: 1.2; letter-spacing: -.035em; }
.chapter p { max-width: 31rem; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.chapter-arrow { justify-self: end; color: var(--accent); font-size: 1.65rem; line-height: 1; transition: transform 180ms ease-out; }
.chapter:hover .chapter-arrow { transform: translate(3px, -3px); }
.chapter:hover h3 { color: var(--accent); }
.site-footer { padding: 2rem 0 2.25rem; border-top: 1px solid var(--line); font-family: var(--sans); }
.site-footer--open { border-top: 0; }
.footer-top, .footer-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; }
.footer-top { margin-bottom: 1.5rem; }
.footer-name { text-decoration: none; font: 400 1.1rem/1.5 var(--serif); }
.footer-links, .footer-notes { display: flex; align-items: baseline; gap: 1.5rem; font-size: .85rem; }
.footer-links a, .footer-notes > a, .other-websites summary { padding: .4rem 0; }
.footer-links { flex-wrap: wrap; row-gap: .4rem; }
.footer-links a { text-decoration: none; }
.footer-links a > span { margin-left: .3rem; }
.footer-bottom { font-size: .75rem; color: var(--muted); }
.footer-notes { font-size: .75rem; }
.other-websites { position: relative; }
.other-websites summary { cursor: pointer; }
.other-websites ul { position: absolute; bottom: calc(100% + .5rem); right: 0; min-width: 17rem; margin: 0; padding: .65rem 1rem; list-style: none; background: var(--paint); border: 1px solid var(--line); box-shadow: 0 3px 15px #00000010; z-index: 2; }
.other-websites a { display: block; padding: .45rem 0; }
.page-heading { max-width: 54rem; padding: 4.75rem 0 3.5rem; }
.page-heading h1 { font-size: clamp(3rem, 6.5vw, 5.3rem); letter-spacing: -.055em; line-height: 1.06; margin: 1.25rem 0 1.75rem; }
.page-intro { max-width: 39rem; font-size: 1.35rem; line-height: 1.6; }
.editorial-layout { display: grid; grid-template-columns: minmax(0, 39rem) minmax(12rem, 1fr); gap: 6rem; padding-bottom: 4.5rem; align-items: start; }
.prose section + section { margin-top: 2.5rem; }
.prose h2 { font-size: 1.7rem; letter-spacing: -.025em; line-height: 1.3; margin-bottom: 1rem; }
.prose p + p { margin-top: 1rem; }
.prose a { text-decoration-color: var(--line); }
.prose a:hover { text-decoration-color: var(--accent); }
.margin-note { max-width: 15rem; border-left: 1px solid var(--line); padding-left: 1.75rem; margin-top: .3rem; font: 400 .9rem/1.6 var(--sans); color: var(--muted); }
.margin-note .eyebrow { margin-bottom: 1rem; }
.margin-note .note-title { color: var(--ink); font: 400 1.45rem/1.4 var(--serif); margin-bottom: .75rem; }
.margin-stack { max-width: 15rem; }
@property --note-fold {
  syntax: '<length>';
  inherits: true;
  initial-value: 24px;
}
.reference-quote {
  position: relative;
  margin: 3.5rem 0 0;
  padding: 2rem 1.25rem 1.5rem;
  transform: rotate(1deg);
  transform-origin: 50% .6rem;
  background: linear-gradient(-45deg, transparent calc(var(--note-fold) * .7071), color-mix(in srgb, var(--paint) 80%, var(--wash)) calc(var(--note-fold) * .7071));
  /* Follow the cut corner instead of casting a rectangular shadow beneath it. */
  filter: drop-shadow(1px 2px 2px rgb(0 0 0 / .10))
    drop-shadow(3px 7px 8px rgb(0 0 0 / .08));
}
.reference-quote::before {
  content: '';
  position: absolute;
  top: .6rem;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--plaster), var(--accent));
  box-shadow: 1px 2px 2px rgb(0 0 0 / .25);
}
.reference-quote::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--note-fold);
  height: var(--note-fold);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(135deg, #dbc2b0, #cbb09c);
  pointer-events: none;
}
.reference-quote-mark { position: absolute; top: 2rem; left: 1.25rem; width: .75rem; height: 1.875rem; color: var(--accent); }
.reference-quote blockquote { position: relative; margin: 0 0 1rem 1rem; padding-left: .8rem; color: var(--ink); font: 400 1.25rem/1.5 var(--serif); }
.reference-quote blockquote::before { content: ''; position: absolute; left: -.6875rem; top: 1.85em; bottom: 0; border-left: 2px solid var(--accent); }
.reference-quote figcaption { font: 400 .8rem/1.5 var(--sans); }
.reference-quote figcaption p + p { margin-top: .75rem; }
.reference-quote figcaption p + p + p { margin-top: .15rem; }
.reference-quote .text-link { font-size: .78rem; font-weight: 400; color: var(--muted); border-bottom-color: transparent; }
.reference-quote .text-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.note-rule { display: block; width: 2rem; height: 1px; background: var(--accent); margin: 2rem 0 0; }
.end-links { display: flex; flex-wrap: wrap; gap: 2rem; margin: 2rem 0; }
.next-chapter { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-top: 1px solid var(--line); padding: 2rem 0; text-decoration: none; }
.next-chapter > span:last-child { font-size: 1.65rem; letter-spacing: -.025em; }
.next-chapter > span:last-child span { margin-left: .75rem; color: var(--accent); }
.qualifications dl { margin: 0; }
.qualifications dl > div { border-top: 1px solid var(--line); padding: 1rem 0; }
.qualifications dt { font-size: 1.1rem; }
.qualifications dd { margin: .25rem 0 0; color: var(--muted); font: 400 .9rem/1.5 var(--sans); }
.reading-detail { border-top: 1px solid var(--line); }
.reading-detail:last-child { border-bottom: 1px solid var(--line); }
.reading-detail summary { padding: 1rem 0; cursor: pointer; font-size: 1.15rem; }
.reading-detail[open] { padding-bottom: 1.25rem; }
.detail-count { font: 400 .8rem/1.5 var(--sans); color: var(--muted); margin-left: .5rem; }
.publications { font-size: .95rem; padding-left: 1.5rem; }
.publications li { padding: 0 0 1rem .4rem; }
.resource-list { list-style: none; padding: 0; margin: .5rem 0; }
.resource-list li { margin-bottom: .8rem; }
.resource-list .file-label { display: block; color: var(--muted); }
.elsewhere-list { list-style: none; padding: 0; margin: 0; }
.elsewhere-list a { display: flex; justify-content: space-between; padding: .5rem 0; }
.reference-list { list-style: none; padding: 0; margin: 0; max-width: 50rem; }
.reference-list li { display: grid; grid-template-columns: 4rem 1fr; gap: 2rem; border-top: 1px solid var(--line); padding: 1.25rem 0; }
.record-year { color: var(--muted); font: 400 .85rem/1.6 var(--sans); padding-top: .25rem; }
.reference-list li a { font-size: 1.3rem; text-decoration: none; }
.reference-list .file-label { margin-left: .5rem; font-size: .6em; }
.reference-list li p { font: 400 .9rem/1.6 var(--sans); color: var(--muted); margin-top: .3rem; }
.paint-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; padding: 1.5rem 0; }
.paint-swatches > div { font: 400 .7rem/1.4 var(--sans); }
.paint-swatches span { display: block; width: 100%; aspect-ratio: 1; margin-bottom: .5rem; background: var(--swatch); border-radius: 50%; outline: 1px solid #0000000f; outline-offset: -1px; }
@media (min-width: 1700px) { .hero { --hero-top: 7rem; padding-block: var(--hero-top); } }
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 5rem); }
  .site-header { gap: 1.25rem; }
  .main-nav { gap: 1.25rem; }
  .hero { grid-template-columns: minmax(0, 1fr) 13rem; column-gap: 3rem; }
  .hero h1 { font-size: 4.2rem; }
  .chapter { grid-template-columns: 2rem 12rem 1fr 1.5rem; }
  .editorial-layout { gap: 3rem; }
}
@media (max-width: 800px) {
  .wrap { width: calc(100% - 3rem); }
  .site-header { flex-wrap: wrap; min-height: 0; padding-block: 1.5rem 1rem; gap: .75rem 1rem; }
  .wordmark { font-size: 1.35rem; }
  .appearance { order: 1; }
  .main-nav { order: 2; width: 100%; gap: 1.75rem; }
  .hero { --hero-top: 3rem; padding-block: var(--hero-top); column-gap: 2rem; grid-template-columns: minmax(0, 1fr) 10.5rem; }
  .hero h1 { font-size: 3.3rem; }
  .hero .intro { font-size: 1.1rem; }
  .chapter { grid-template-columns: 1.5rem 10.5rem 1fr 1.5rem; gap: .75rem; }
  .chapter h3 { font-size: 1.9rem; }
  .editorial-layout { grid-template-columns: minmax(0, 1fr) 12rem; gap: 2rem; }
  .page-heading { padding-top: 3rem; }
  .page-heading h1 { font-size: 4rem; }
  .page-intro { font-size: 1.2rem; }
}
@media (max-width: 600px) {
  body { font-size: 1.05rem; }
  .wrap { width: calc(100% - 2.5rem); }
  .site-header { padding-top: 1rem; }
  .appearance { gap: .2rem; }
  .appearance select { min-width: 4.65rem; }
  .hero { --hero-top: 2.5rem; grid-template-columns: 1fr; padding-top: var(--hero-top); row-gap: 2.5rem; }
  .hero h1 { font-size: clamp(2.8rem, 10.6vw, 3.8rem); margin-block: 1rem 1.35rem; }
  .hero .intro { font-size: 1.1rem; }
  .eyebrow { font-size: .68rem; }
  .portrait { display: block; margin-top: 0; width: min(70%, 15rem); justify-self: center; }
  .portrait-hangers { display: none; }
  .portrait-hanging { display: block; }
  .portrait img { aspect-ratio: 1; }
  .portrait figcaption { grid-template-columns: 1fr; text-align: center; }
  .intro-links { margin-top: 1.3rem; gap: 1.5rem; }
  .chapter { grid-template-columns: 1.4rem minmax(0, 1fr) 1.5rem; gap: .3rem 1rem; padding: 1.5rem 0; }
  .chapter-number { align-self: center; }
  .chapter h3 { grid-column: 2; font-size: 2rem; }
  .chapter p { grid-column: 2; margin-top: .3rem; }
  .chapter-arrow { grid-column: 3; grid-row: 1 / 3; }
  .chapters { margin-bottom: 2.5rem; }
  .footer-top, .footer-bottom { display: block; }
  .footer-top { margin-bottom: 1rem; }
  .footer-links { margin-top: .5rem; gap: .4rem 1.25rem; }
  .footer-notes { margin-top: .5rem; gap: 1rem; }
  .other-websites ul { left: auto; right: 0; min-width: 16rem; }
  .page-heading { padding-block: 2.5rem; }
  .page-heading h1 { font-size: clamp(2.8rem, 11vw, 4rem); margin-block: 1rem 1.5rem; }
  .editorial-layout { display: flex; flex-direction: column; gap: 2.5rem; padding-bottom: 2.5rem; }
  .margin-note { order: 1; max-width: none; padding-left: 1.25rem; }
  .margin-stack { max-width: none; }
  .reference-quote { padding-left: 1.25rem; }
  .prose h2 { font-size: 1.55rem; }
  .next-chapter { padding-block: 1.5rem; }
  .next-chapter > span:last-child { font-size: 1.4rem; }
  .detail-count { display: block; margin-left: 1rem; }
  .reference-list li { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
  .paint-swatches { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes settle { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
  .hero .eyebrow, .hero h1, .hero .intro, .hero .intro-links, .portrait { animation: settle 550ms ease-out both; }
  .hero h1 { animation-delay: 60ms; }
  .hero .intro, .portrait { animation-delay: 120ms; }
  .hero .intro-links { animation-delay: 180ms; }
}
@media (min-width: 601px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* One damped swing; the portrait keeps its own resting tilt inside the rig. */
  .portrait-hanging:hover {
    animation: picture-swing 1300ms ease-in-out;
  }
  @keyframes picture-swing {
    0%, 100% { transform: rotate(0deg); }
    22% { transform: rotate(-.6deg); }
    48% { transform: rotate(.35deg); }
    72% { transform: rotate(-.17deg); }
    88% { transform: rotate(.06deg); }
  }
  .contact-dialog:hover {
    animation: hanging-panel-swing 1300ms ease-in-out;
  }
  @keyframes hanging-panel-swing {
    0%, 100% { transform: rotate(-.5deg); }
    22% { transform: rotate(-1.1deg); }
    48% { transform: rotate(-.15deg); }
    72% { transform: rotate(-.67deg); }
    88% { transform: rotate(-.44deg); }
  }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { body::before { display: none; } .portrait-frame { border: 1px solid CanvasText; } }
@media print {
  body { background: white; color: black; font-size: 11pt; }
  body::before, .appearance, .theme-toggle, .appearance-popover, .main-nav, .other-websites, .skip-link { display: none !important; }
  .wrap { width: 100%; }
  .site-header { min-height: 3rem; }
  .page-heading, .hero { padding-block: 2rem; }
  .hero h1, .page-heading h1 { font-size: 32pt; }
  .editorial-layout { display: block; }
  .margin-note { margin-top: 2rem; }
  a { color: black; }
  details::details-content { content-visibility: visible; }
}

/* Quiet categories and small gallery controls. */
.category-pill { display: inline-block; padding: .12rem .5rem; border: 1px solid var(--line); border-radius: 1rem; color: var(--muted); font: 400 .7rem/1.5 var(--sans); letter-spacing: .02em; text-transform: none; }
.contact-dialog .category-pill { margin-bottom: .5rem; }
.prose h2 .category-pill { margin-left: .55rem; vertical-align: middle; }
/* Compact appearance menu: concentric corners and quiet, layered depth. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .4rem .5rem; border: 0; border-radius: .4rem; background: transparent; color: var(--muted); cursor: pointer; font: 400 .85rem/1.4 var(--sans); }
.theme-toggle > span { min-width: 2rem; text-align: left; }
@media (min-width: 801px) { .theme-toggle { margin-left: -.5rem; } }
.theme-toggle svg { flex: none; width: 16px; height: 16px; }
.theme-toggle:hover, .theme-toggle[aria-expanded="true"] { color: var(--ink); background: color-mix(in srgb, var(--wash) 65%, transparent); }
.theme-toggle[aria-expanded="true"] .theme-chevron { transform: rotate(180deg); }
.appearance-popover { inset: auto; margin: 0; width: 6rem; max-width: calc(100vw - 1rem); padding: .2rem; border: 0; border-radius: .5rem; background: color-mix(in srgb, var(--paint) 96%, var(--ink)); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent), inset 0 1px 0 rgb(255 255 255 / .12), 0 2px 5px rgb(0 0 0 / .08), 0 12px 28px -6px rgb(0 0 0 / .24); }
.appearance-popover fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-choices { display: grid; gap: 1px; }
.theme-option { position: relative; display: grid; grid-template-columns: 1rem 1fr; align-items: center; gap: .35rem; min-height: 32px; padding: .3rem .4rem; border-radius: .3rem; cursor: pointer; font: 400 .8rem/1.3 var(--sans); }
.theme-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.theme-option:has(input:checked) { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.theme-option:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.theme-check { width: 15px; height: 15px; visibility: hidden; color: var(--accent); stroke-width: 1.8; }
.theme-option:has(input:checked) .theme-check { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .theme-toggle, .theme-option { transition: background-color 120ms ease, color 120ms ease; }
  .theme-chevron { transition: transform 140ms ease; }
}
@media (pointer: coarse) { .theme-option { min-height: 44px; } }