/* Maple Crest Photo — house style.
   Parchment, gilt and claret. System serif only. No scripts required. */

:root {
  color-scheme: light dark;
  --wall: #efe1bf;
  --wall-deep: #e2cb98;
  --ink: #2b1c10;
  --ink-soft: #5b4631;
  --gilt: #c9a12e;
  --gilt-hi: #f5dc86;
  --gilt-lo: #85601a;
  --gules: #9e1b1b;
  --claret: #6e1f32;
  --tenne: #c8641e;
  --vert: #2e5b36;
  --card: rgba(255, 249, 232, .62);
  --rule: rgba(110, 31, 50, .28);
  --shadow: 0 14px 30px rgba(52, 28, 4, .38);
  --serif: Georgia, "Times New Roman", Times, serif;
  --measure: 66ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wall: #1d1412;
    --wall-deep: #120c0b;
    --ink: #f0e3c4;
    --ink-soft: #cbb795;
    --gilt: #d7b048;
    --gilt-hi: #f7e29a;
    --gilt-lo: #7b5716;
    --gules: #d2463c;
    --claret: #e0a0a8;
    --card: rgba(48, 26, 26, .62);
    --rule: rgba(215, 176, 72, .3);
    --shadow: 0 18px 40px rgba(0, 0, 0, .7);
  }
}

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

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

body {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1rem, .96rem + .2vw, 1.12rem);
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--wall);
  background-image:
    url("../ornament/parchment.svg"),
    radial-gradient(ellipse at 50% -10%, rgba(255, 250, 230, .75), transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(150, 95, 30, .22), transparent 55%),
    radial-gradient(ellipse at 100% 60%, rgba(150, 95, 30, .18), transparent 50%);
  background-attachment: scroll, fixed, fixed, fixed;
}

@media (prefers-color-scheme: dark) {
  body {
    background-image:
      url("../ornament/parchment.svg"),
      radial-gradient(ellipse at 50% 0%, rgba(110, 31, 50, .55), transparent 65%),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 2px, transparent 2px 46px),
      linear-gradient(#24171a, #140d0c);
  }
}

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

a { color: var(--gules); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--claret); }
:focus-visible { outline: 3px solid var(--tenne); outline-offset: 3px; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  padding: .5rem 1rem; background: var(--ink); color: var(--wall);
}
.skip:focus { top: 1rem; }

/* ---------- typographic voice ---------- */

h1, h2, h3, .smallcaps {
  font-weight: normal;
  font-variant: small-caps;
  letter-spacing: .09em;
  line-height: 1.15;
}
h2 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  text-align: center;
  margin: 0 0 .3rem;
  color: var(--claret);
}
h3 { font-size: 1.3rem; margin: 0; }
.chamber > h1 { text-align: center; color: var(--claret); font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem); margin: 0 0 .3rem; }

.kicker {
  display: block;
  text-align: center;
  font-size: .82rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.flourish {
  border: 0;
  height: 26px;
  width: min(420px, 82%);
  margin: .6rem auto 2.2rem;
  background: url("../ornament/flourish.svg") center / contain no-repeat;
}

.lede { max-width: var(--measure); margin: 0 auto 2rem; text-align: center; color: var(--ink-soft); font-style: italic; }

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

.masthead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem 2rem;
  padding: .9rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(rgba(110, 31, 50, .07), transparent);
}
.monogram {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--ink); text-decoration: none;
  font-variant: small-caps; letter-spacing: .14em; font-size: 1.15rem;
}
.monogram img { width: 30px; height: 36px; }
.monogram small { display: block; font-size: .7rem; letter-spacing: .24em; color: var(--ink-soft); }

.masthead nav ul {
  display: flex; flex-wrap: wrap; gap: .2rem 1.3rem;
  list-style: none; margin: 0; padding: 0;
}
.masthead nav a {
  color: var(--ink-soft); text-decoration: none;
  font-variant: small-caps; letter-spacing: .1em;
  border-bottom: 1px solid transparent;
}
.masthead nav a:hover { color: var(--gules); border-bottom-color: currentColor; }

/* ---------- gilt frames ---------- */

.gilt {
  position: relative;
  margin: 0;
  padding: clamp(12px, 2.2vw, 22px);
  background:
    linear-gradient(135deg, var(--gilt-hi) 0%, #c99a33 22%, #f1d27a 40%, #94691c 58%, #e7c35d 78%, #a97b22 100%);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px #5a3f0c,
    inset 0 0 0 5px rgba(255, 240, 190, .55),
    inset 0 0 0 7px #7a5716,
    inset 0 0 18px rgba(80, 50, 0, .55),
    var(--shadow);
}
.gilt::before {
  /* the carved liner between frame and canvas */
  content: "";
  position: absolute;
  inset: calc(clamp(12px, 2.2vw, 22px) - 5px);
  border: 2px dotted rgba(90, 63, 12, .7);
  border-radius: 2px;
  pointer-events: none;
}
.gilt img {
  display: block;
  width: 100%;
  border: 3px solid #3d2b0b;
  box-shadow: 0 0 0 1px #f3d887, inset 0 0 30px rgba(0, 0, 0, .4);
}
.gilt.is-oval, .gilt.is-oval img { border-radius: 50%; }
.gilt.is-oval::before { border-radius: 50%; }

.plaque {
  display: inline-block;
  margin-top: .9rem;
  padding: .3rem 1.1rem;
  font-variant: small-caps;
  letter-spacing: .14em;
  font-size: .9rem;
  color: #3a2708;
  background: linear-gradient(#f3d98b, #c39a35 60%, #e5c467);
  border: 1px solid #6b4b12;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
  text-shadow: 0 1px 0 rgba(255, 245, 210, .7);
}

/* ---------- overture (hero) ---------- */

.overture {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 6vw, 6rem) clamp(2.5rem, 6vw, 5rem);
}
.overture-portrait { text-align: center; }
.overture-portrait .gilt { max-width: 470px; margin-inline: auto; }
.overture-portrait .gilt img { aspect-ratio: 3 / 4; object-fit: cover; }

.proclamation { text-align: center; position: relative; z-index: 1; }
.proclamation .arms { width: clamp(180px, 20vw, 290px); margin: 0 auto .4rem; filter: drop-shadow(0 6px 10px rgba(60, 30, 0, .35)); }
.proclamation h1 {
  margin: .2rem 0 .4rem;
  font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4rem);
  color: var(--ink);
}
.proclamation .appointment {
  margin: 0 auto 1rem;
  font-variant: small-caps;
  letter-spacing: .16em;
  font-size: clamp(1rem, .9rem + .5vw, 1.3rem);
  color: var(--claret);
}
.motto-line { font-style: italic; color: var(--ink-soft); margin: 0 0 1.6rem; }
.motto-line b { font-style: normal; font-variant: small-caps; letter-spacing: .12em; color: var(--gules); font-weight: normal; }

.seal-link {
  display: inline-block;
  padding: .75rem 1.5rem;
  color: #fff6e1;
  text-decoration: none;
  font-variant: small-caps;
  letter-spacing: .14em;
  background: radial-gradient(circle at 30% 30%, #c0392b, #7d1414 70%);
  border: 1px solid #4f0c0c;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(80, 10, 10, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.seal-link:hover, .seal-link:focus-visible { color: #fff; background: radial-gradient(circle at 30% 30%, #d24b3c, #8f1818 70%); }
.seal-link.is-quiet { background: transparent; color: var(--gules); border-color: var(--gules); box-shadow: none; }

/* falling leaves */
.leaf-fall { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.leaf-fall i {
  position: absolute;
  top: -40px;
  width: 38px; height: 38px;
  background: var(--tenne);
  -webkit-mask: url("../ornament/leaf.svg") center / contain no-repeat;
  mask: url("../ornament/leaf.svg") center / contain no-repeat;
  opacity: .72;
  filter: drop-shadow(0 2px 2px rgba(60, 30, 0, .3));
}
.leaf-fall i:nth-child(1) { left: 8%;  top: 18%; background: var(--gules); }
.leaf-fall i:nth-child(2) { left: 46%; top: 6%;  width: 28px; height: 28px; background: #d89b2b; }
.leaf-fall i:nth-child(3) { left: 63%; top: 74%; background: var(--tenne); }
.leaf-fall i:nth-child(4) { left: 88%; top: 30%; width: 32px; height: 32px; background: #b8452a; }
.leaf-fall i:nth-child(5) { left: 30%; top: 88%; width: 26px; height: 26px; background: #d89b2b; }
.leaf-fall i:nth-child(6) { left: 95%; top: 82%; width: 34px; height: 34px; background: var(--gules); }

@media (prefers-reduced-motion: no-preference) {
  .leaf-fall i {
    top: -40px;
    animation: descend 19s linear infinite, waver 3.6s ease-in-out infinite alternate;
  }
  .leaf-fall i:nth-child(1) { animation-delay: -2s, -1s; }
  .leaf-fall i:nth-child(2) { animation-duration: 23s, 4.2s; animation-delay: -9s, -2s; }
  .leaf-fall i:nth-child(3) { animation-duration: 17s, 3.1s; animation-delay: -13s, 0s; }
  .leaf-fall i:nth-child(4) { animation-duration: 25s, 4.8s; animation-delay: -5s, -3s; }
  .leaf-fall i:nth-child(5) { animation-duration: 21s, 3.4s; animation-delay: -17s, -1s; }
  .leaf-fall i:nth-child(6) { animation-duration: 27s, 5s; animation-delay: -21s, -2s; }
}
@keyframes descend {
  from { translate: 0 0; }
  to   { translate: 4.5rem calc(100vh + 6rem); }
}
@keyframes waver {
  from { rotate: -28deg; }
  to   { rotate: 34deg; }
}

/* ---------- generic sections ---------- */

.chamber { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 4rem); }
.chamber + .chamber { border-top: 1px solid var(--rule); }
.chamber.is-shaded { background: linear-gradient(rgba(110, 31, 50, .06), rgba(110, 31, 50, .02)); }

/* ---------- house history ---------- */

.chronicle {
  max-width: var(--measure);
  margin: 0 auto;
  columns: 2 22rem;
  column-gap: 3rem;
  column-rule: 1px solid var(--rule);
  hyphens: auto;
  text-align: justify;
}
.chronicle p { margin: 0 0 1rem; }
.chronicle p:first-child::first-letter {
  float: left;
  font-size: 4.4em;
  line-height: .82;
  margin: .06em .12em 0 0;
  padding: .1em .14em .06em;
  color: var(--gules);
  background: linear-gradient(135deg, #fbecc0, #e3c06a);
  border: 2px solid var(--gilt-lo);
  box-shadow: inset 0 0 0 2px #fff4d0;
  text-shadow: 1px 1px 0 #f7e2a2;
}
.chronicle .aside-note { font-style: italic; color: var(--ink-soft); }

/* ---------- peerage ---------- */

.peerage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.6rem);
  max-width: 82rem;
  margin: 0 auto;
}
.sitter { display: flex; flex-direction: column; }
.sitter .gilt img { aspect-ratio: 4 / 5; object-fit: cover; }
.sitter .gilt.is-oval img { aspect-ratio: 4 / 5; }
.sitter-head {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: .9rem;
  align-items: start;
  margin: 1.2rem 0 .6rem;
}
.sitter-head img { width: 92px; height: auto; margin-top: -2.2rem; filter: drop-shadow(0 4px 6px rgba(50, 25, 0, .4)); }
.sitter h3 { font-size: 1.22rem; color: var(--ink); }
.styled-as { margin: .15rem 0 0; font-style: italic; color: var(--claret); font-size: .98rem; line-height: 1.35; }
.tenure { margin: .25rem 0 0; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.deeds { margin: 0 0 .7rem; }
.sitter .motto-line { margin: auto 0 0; padding-top: .6rem; border-top: 1px solid var(--rule); font-size: .95rem; }

/* ---------- family tree ---------- */

.lineage-scroll {
  max-width: 70rem;
  margin: 0 auto;
  overflow-x: auto;
  padding-bottom: .6rem;
  border: 1px solid var(--rule);
  background: var(--card);
  box-shadow: inset 0 0 40px rgba(120, 80, 20, .15);
}
.lineage { display: block; min-width: 760px; width: 100%; height: auto; }
.lineage .bark { fill: none; stroke: #6b4a2b; stroke-linecap: round; }
.lineage .bark.is-trunk { stroke-width: 26; }
.lineage .bark.is-bough { stroke-width: 11; }
.lineage .bark.is-twig { stroke-width: 6; }
.lineage .bark.is-claimed { stroke-width: 4; stroke-dasharray: 8 7; stroke: #8a6a40; }
.lineage .root { fill: none; stroke: #5a3d22; stroke-width: 7; stroke-linecap: round; }
.lineage .ground { fill: #7a5a2b; opacity: .18; }
.lineage .canopy { fill: #c8641e; opacity: .12; }
.lineage .node rect { fill: #fbf2da; stroke: #8a6418; stroke-width: 2; }
.lineage .node.is-head rect { fill: #f6e1a4; stroke: #6e1f32; stroke-width: 3; }
.lineage .node.is-cadet rect { fill: #efe6d6; stroke-dasharray: 5 4; }
.lineage text { font-family: var(--serif); fill: #2b1c10; }
.lineage .who { font-size: 15px; font-variant: small-caps; letter-spacing: .06em; }
.lineage .what { font-size: 11.5px; font-style: italic; fill: #6e1f32; }
.lineage .note { font-size: 12px; font-style: italic; fill: #5b4631; }
.lineage .leafmark { fill: #9e1b1b; }
@media (prefers-color-scheme: dark) {
  .lineage .bark { stroke: #a07a50; }
  .lineage .root { stroke: #8c6a44; }
  .lineage .note { fill: #cbb795; }
}
.scroll-hint { text-align: center; font-size: .85rem; color: var(--ink-soft); font-style: italic; margin-top: .6rem; }
@media (min-width: 800px) { .scroll-hint { display: none; } }

/* ---------- heraldry ---------- */

.armory {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: 74rem;
  margin: 0 auto;
  align-items: start;
}
.armory > figure { margin: 0; position: sticky; top: 1.5rem; }
.armory .gilt img { aspect-ratio: 3 / 2; object-fit: cover; }
.armory figcaption { margin-top: .8rem; font-style: italic; color: var(--ink-soft); font-size: .95rem; }
.blazon { margin: 0; display: grid; gap: 1.1rem; }
.blazon > div {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px dotted var(--rule);
}
.blazon svg { grid-row: span 2; width: 52px; height: 52px; }
.blazon dt { font-variant: small-caps; letter-spacing: .08em; font-size: 1.15rem; color: var(--claret); }
.blazon dd { margin: 0; }
.blazon .ic-gules { fill: var(--gules); color: var(--gules); }
.blazon .ic-tenne { fill: var(--tenne); color: var(--tenne); }
.blazon .ic-gilt { fill: var(--gilt); color: var(--gilt); }
.blazon .ic-vert { fill: var(--vert); color: var(--vert); }
@media (prefers-color-scheme: dark) { .blazon .ic-vert { fill: #6fae6a; color: #6fae6a; } }

/* ---------- commissions ---------- */

.tariff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.8rem;
  max-width: 70rem;
  margin: 0 auto;
}
.tariff article {
  position: relative;
  display: flex; flex-direction: column;
  padding: 2rem 1.6rem 1.6rem;
  background: var(--card);
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: -8px;
  text-align: center;
}
.tariff article.is-favoured { border-color: var(--gilt); outline-color: var(--gilt); box-shadow: 0 0 0 4px rgba(201, 161, 46, .18); }
.tariff .ribbon-tag {
  position: absolute; top: -.85rem; left: 50%; translate: -50% 0;
  padding: .15rem 1rem; white-space: nowrap;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  background: var(--claret); color: #fbefd5;
}
@media (prefers-color-scheme: dark) { .tariff .ribbon-tag { background: #6e1f32; } }
.tariff h3 { color: var(--claret); }
.fee { margin: .8rem 0 .2rem; font-size: 2.3rem; line-height: 1; color: var(--gules); }
.fee small { font-size: .9rem; letter-spacing: .14em; font-variant: small-caps; color: var(--ink-soft); }
.fee-alt { margin: 0 0 1rem; font-style: italic; font-size: .9rem; color: var(--ink-soft); }
.tariff ul { list-style: none; padding: 0; margin: 0 0 1.4rem; text-align: left; }
.tariff li { padding: .35rem 0 .35rem 1.6rem; border-bottom: 1px dotted var(--rule); position: relative; }
.tariff li::before {
  content: ""; position: absolute; left: 0; top: .62rem; width: .95rem; height: .95rem;
  background: var(--tenne);
  -webkit-mask: url("../ornament/leaf.svg") center / contain no-repeat;
  mask: url("../ornament/leaf.svg") center / contain no-repeat;
}
.tariff .seal-link { margin-top: auto; align-self: center; }

.warrant {
  max-width: 40rem;
  margin: 3rem auto 0;
  padding: 1.6rem 2rem 1.6rem 6.4rem;
  position: relative;
  background: var(--card);
  border: 1px double var(--gilt-lo);
  border-width: 4px;
  scroll-margin-top: 2rem;
}
.warrant::before {
  content: "";
  position: absolute; left: 1.3rem; top: 50%; translate: 0 -50%;
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), transparent 40%),
    radial-gradient(circle, #a8231c 55%, #7c1210 56%, #8f1a15 70%, #6a0f0c 100%);
  box-shadow: 0 3px 6px rgba(60, 0, 0, .45);
}
.warrant p { margin: 0; }
.warrant strong { display: block; font-weight: normal; font-variant: small-caps; letter-spacing: .1em; font-size: 1.3rem; color: var(--gules); }
.warrant:target { animation: summon 1.6s ease-out 1; }
@keyframes summon { from { box-shadow: 0 0 0 12px rgba(201, 161, 46, .55); } to { box-shadow: 0 0 0 0 rgba(201, 161, 46, 0); } }
@media (prefers-reduced-motion: reduce) { .warrant:target { animation: none; outline: 3px solid var(--gilt); } }

/* ---------- testimonials ---------- */

.letters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.6rem;
  max-width: 76rem;
  margin: 0 auto;
}
.letters figure {
  margin: 0;
  padding: 1.5rem 1.6rem 1.2rem;
  background: var(--card);
  border-left: 4px solid var(--tenne);
  box-shadow: 0 6px 16px rgba(60, 30, 0, .12);
}
.letters blockquote { margin: 0 0 .9rem; font-style: italic; font-size: 1.05rem; }
.letters blockquote p { margin: 0; }
.letters blockquote p::before { content: "\201C"; color: var(--gules); font-size: 1.6em; line-height: 0; vertical-align: -.35em; margin-right: .08em; }
.letters blockquote p::after { content: "\201D"; color: var(--gules); }
.letters figcaption { display: flex; align-items: center; gap: .7rem; font-variant: small-caps; letter-spacing: .08em; color: var(--claret); }
.letters figcaption img { width: 44px; height: auto; }

/* ---------- colophon (footer) ---------- */

.colophon {
  padding: 3rem clamp(1rem, 5vw, 4rem) 2.5rem;
  text-align: center;
  border-top: 4px double var(--gilt-lo);
  background: linear-gradient(rgba(110, 31, 50, .1), rgba(110, 31, 50, .18));
  font-size: .95rem;
  color: var(--ink-soft);
}
.colophon img { width: 72px; height: auto; }
.colophon .smallcaps { font-size: 1.15rem; color: var(--ink); margin: .4rem auto; }
.colophon ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; padding: 0; margin: 1rem 0; }
.colophon p { margin: .4rem auto; max-width: 52rem; }

/* ---------- credits page ---------- */

.ledger-wrap { max-width: 74rem; margin: 0 auto; overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; background: var(--card); font-size: .95rem; }
.ledger caption { caption-side: bottom; padding-top: .8rem; font-style: italic; color: var(--ink-soft); text-align: left; }
.ledger th, .ledger td { padding: .65rem .8rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.ledger thead th { font-weight: normal; font-variant: small-caps; letter-spacing: .1em; color: var(--claret); border-bottom: 2px solid var(--gilt-lo); }
.ledger td img { width: 72px; height: 72px; object-fit: cover; border: 2px solid var(--gilt); display: block; }
.ledger td a { overflow-wrap: anywhere; }
.prose { max-width: var(--measure); margin: 0 auto 1.4rem; }
@media (max-width: 640px) {
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: 100%; }
  .ledger tr { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .15rem .9rem; padding: .9rem .6rem; border-bottom: 1px solid var(--rule); }
  .ledger td { padding: 0; border: 0; }
  .ledger td:first-child { grid-row: span 4; }
  .ledger td:nth-child(2) { font-variant: small-caps; letter-spacing: .06em; color: var(--claret); }
}
.prose h3 { color: var(--claret); margin: 2rem 0 .5rem; }

/* ---------- pruned (404) ---------- */

.pruned {
  min-height: 78vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3rem 1rem;
}
.pruned .gilt { width: min(280px, 70vw); margin: 0 auto 1.6rem; }
.pruned .gilt img { aspect-ratio: 1; object-fit: cover; }
.pruned h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); color: var(--claret); margin: .4rem 0; }
.pruned p { max-width: 36rem; margin: .6rem auto 1.6rem; }

/* ---------- reveal on scroll (CSS scroll-driven, progressive) ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rise {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}
@keyframes rise-in {
  from { opacity: 0; translate: 0 2.2rem; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---------- small screens ---------- */

@media (max-width: 820px) {
  .overture { grid-template-columns: 1fr; }
  .proclamation { order: -1; }
  .overture-portrait .gilt { max-width: 360px; }
  .armory { grid-template-columns: 1fr; }
  .armory > figure { position: static; }
  .chronicle { text-align: left; }
}
@media (max-width: 520px) {
  .masthead { justify-content: center; text-align: center; }
  .masthead nav ul { justify-content: center; gap: .1rem .9rem; font-size: .95rem; }
  .warrant { padding: 5.4rem 1.2rem 1.4rem; text-align: center; }
  .warrant::before { left: 50%; top: 1rem; translate: -50% 0; }
}

@media print {
  .leaf-fall, .masthead nav, .seal-link { display: none; }
  body { background: #fff; }
}