/* ==========================================================================
   The Shot List / Barry Lyndon (1975)
   Design system: "a country-house picture gallery after dark"
   The page is one long gallery wall at night: deep umber silk damask, lit
   by candles. Every still hangs as a painting in a frame whose moulding
   says how the scene was lit (carved gilt for daylight, ebonised ripple
   with a gilt slip for candlelight, a black Hogarth print frame for the one
   shot that is printed text), with a gilt number tablet and a museum wall
   label. Plates are oils under amber varnish or copperplate engravings on
   laid paper. One palette family, umber and earth pigments, with ONE
   accent: candle-flame gold, which appears only where there is a flame,
   the light of a flame, or gilt catching that light. Type is Caslon.
   Body text, headings and stills never animate; only flames, their light,
   smoke and dust move by themselves. One theme, dark by nature.

   The SVG textures (damask, grain, the four frame mouldings, the opener
   crest, the chapter cartouche and the engraved rule's centre) are drawn
   by _build/build.js and inlined in the head as --tx-* custom properties.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* the gallery wall at night */
  --bg:        #120c08;
  --bg-2:      #1b130d;
  --bg-3:      #261a11;
  --damask:    #1f160f;
  --wainscot:  #0d0906;

  /* text: lead white warmed by candlelight */
  --text:      #eee2c9;
  --text-2:    #cdbb9b;
  --muted:     #9b876a;
  --rule:      rgba(200, 150, 63, 0.32);

  /* the ONE accent: candle-flame gold, and its gilt shades */
  --accent:    #f3b743;
  --accent-hi: #ffe7b0;
  --gilt-hi:   #f2d58c;
  --gilt:      #c8963f;
  --gilt-lo:   #8c6126;
  --gilt-deep: #4b3214;
  --bole:      #7a3a22;
  --ebony:     #0a0705;
  --ebony-hi:  #2e241c;

  /* oil inks (inside paintings only) */
  --lead-white:   #f1e7d0;
  --bone-black:   #0d0906;
  --imprimatura:  #2a1c10;
  --raw-umber:    #4a3925;
  --burnt-umber:  #5c3521;
  --raw-sienna:   #9b6936;
  --ochre:        #b98b3f;
  --terre-verte:  #59583a;
  --pearl:        #bdb6a0;
  --madder-brown: #6a2f22;
  --wax:          #e9dcc0;

  /* engraving inks (inside engravings only) */
  --paper:     #efe4cb;
  --paper-2:   #e3d3b2;
  --plate-ink: #22180f;
  --foxing:    #c4965a;

  --f-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --f-body:    "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --f-label:   "Cormorant SC", "Libre Caslon Text", Georgia, serif;
  --f-script:  "Pinyon Script", "Libre Caslon Text", Georgia, serif;

  --fs-body:  clamp(18px, 0.55vw + 15.5px, 21px);
  --fs-hero:  clamp(3.25rem, 1.4rem + 6.4vw, 7.75rem);
  --fs-h2:    clamp(2.35rem, 1.55rem + 3.1vw, 4.25rem);
  --fs-h3:    clamp(1.55rem, 1.2rem + 1.3vw, 2.3rem);
  --fs-dek:   clamp(1.12rem, 0.98rem + 0.55vw, 1.42rem);
  --fs-quote: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem);
  --fs-cap:   0.84em;
  --fs-label: 0.76em;
  --fs-micro: 12px;

  --measure: 62ch;
  --wide:    1120px;
  --sheet:   1280px;
  --gutter:  16px;
  --mast-h:  58px;

  --frame-still:  clamp(12px, 1.9vw, 26px);
  --frame-opener: clamp(16px, 2.8vw, 38px);
  --frame-print:  clamp(9px, 1.1vw, 14px);

  /* the canvas weave: a tabby of 1px dark and light threads, 3px period */
  --weave:
    repeating-linear-gradient(0deg, rgba(13, 9, 6, 0.04) 0 1px, rgba(255, 240, 205, 0.02) 1px 2px, transparent 2px 3px),
    repeating-linear-gradient(90deg, rgba(13, 9, 6, 0.04) 0 1px, rgba(255, 240, 205, 0.02) 1px 2px, transparent 2px 3px);
  --wall: var(--tx-grain, none), var(--tx-damask, none);

  color-scheme: dark;
}
@media (min-width: 720px) {
  :root { --gutter: clamp(24px, 4vw, 56px); --mast-h: 64px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--bg);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 320px;
  background-color: var(--bg);
  background-image: var(--wall);
  background-size: 220px 220px, 180px 270px;
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  overflow-wrap: break-word;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

h1, h2, h3, h4, p, figure, blockquote, ol, ul { margin: 0; }
img, svg { max-width: 100%; }
cite { font-style: italic; }
strong { font-weight: 700; }

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(243, 183, 67, 0.45);
  text-underline-offset: 0.2em;
}
a:hover { color: var(--accent-hi); text-decoration-color: var(--accent); }

::selection { background: rgba(243, 183, 67, 0.30); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -60px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--bg-3);
  border: 1px solid var(--gilt-lo);
  color: var(--accent);
  font: 600 15px/1 var(--f-label);
  letter-spacing: 0.1em;
  text-decoration: none;
}
.skip-link:focus { top: 10px; }

/* ---------- Reading progress: a gilt line and the reader's candle ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 50;
  pointer-events: none;
}
.progress-bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gilt-lo), var(--gilt), var(--gilt-hi));
  transform: scaleX(0);
  transform-origin: 0 50%;
  box-shadow: 0 0 6px rgba(243, 183, 67, 0.35);
}
.progress-flame {
  position: absolute;
  left: -5px;
  top: -1px;
  width: 10px;
  height: 16px;
  opacity: 0;
  transform: translateX(0);
  filter: drop-shadow(0 0 4px rgba(243, 183, 67, 0.75)) drop-shadow(0 0 10px rgba(243, 183, 67, 0.35));
}
.progress.is-on .progress-flame { opacity: 1; }
.progress-flame svg {
  display: block;
  width: 10px;
  height: 16px;
  transform-origin: 50% 100%;
  animation: pf-scale 1.6s ease-in-out infinite alternate, pf-glow 2.3s ease-in-out infinite alternate;
}
@keyframes pf-scale { from { transform: scale(0.94, 0.95); } to { transform: scale(1.04, 1.07); } }
@keyframes pf-glow { from { opacity: 0.86; } to { opacity: 1; } }

/* ---------- Masthead ---------- */
.masthead {
  position: relative;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--ebony);
  box-shadow: inset 0 -2px 0 -1px var(--rule);
}
.masthead::after {
  content: "";
  position: absolute;
  inset: auto 0 1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt) 12%, var(--gilt-hi) 50%, var(--gilt) 88%, transparent);
  opacity: 0.55;
}
.masthead-inner {
  max-width: var(--sheet);
  margin: 0 auto;
  min-height: var(--mast-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand:hover { color: var(--gilt-hi); }
.brand-mark { flex: none; width: 16px; height: 16px; }
.masthead-meta {
  display: flex;
  align-items: center;
  gap: 0;
  font: 600 14px/1 var(--f-label);
  letter-spacing: 0.1em;
  color: var(--muted);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.masthead-meta > * + *::before,
.hero-meta > * + *::before,
.label-meta > * + *::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 0.7em;
  background: var(--gilt);
  rotate: 45deg;
  vertical-align: 0.2em;
}
@media (max-width: 559px) {
  .mm-kicker { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: end;
  min-height: max(640px, calc(100vh - var(--mast-h)));
  min-height: max(640px, calc(100svh - var(--mast-h)));
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 50% 40% at 68% 38%, rgba(243, 183, 67, 0.10), transparent 70%),
    var(--tx-grain, none), var(--tx-damask, none);
  background-size: auto, 220px 220px, 180px 270px;
}
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(18, 12, 8, 0.96) 0%, rgba(18, 12, 8, 0.82) 42%, rgba(18, 12, 8, 0) 70%);
}
.hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--gutter) 28px;
}
.hero-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 0.9;
  letter-spacing: 0.005em;
  color: var(--gilt-hi);
  background: linear-gradient(176deg, var(--gilt-hi) 0%, var(--accent) 34%, var(--gilt) 58%, var(--gilt-lo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(243, 183, 67, 0.18));
  padding-bottom: 0.06em;
  text-wrap: balance;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-title { color: var(--gilt-hi); -webkit-text-fill-color: currentColor; background: none; }
}
.hero-sub {
  margin-top: 0.6em;
  font-family: var(--f-label);
  font-weight: 600;
  font-size: calc(var(--fs-label) * 1.15);
  letter-spacing: 0.16em;
  color: var(--accent);
}
.hero-dek {
  margin-top: 0.9em;
  max-width: 34ch;
  font-style: italic;
  font-size: var(--fs-dek);
  line-height: 1.45;
  color: var(--text-2);
  text-wrap: pretty;
}
.hero-meta {
  margin-top: 1.3em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  font-family: var(--f-label);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--muted);
  font-variant-numeric: lining-nums tabular-nums;
}
.hero-by { color: var(--text-2); }
@media (max-width: 719px) {
  .hero { min-height: max(620px, calc(100vh - var(--mast-h))); min-height: max(620px, calc(100svh - var(--mast-h))); }
}
@media (min-width: 960px) {
  .hero::after {
    background: radial-gradient(ellipse 62% 70% at 0% 100%, rgba(18, 12, 8, 0.94) 0%, rgba(18, 12, 8, 0.72) 38%, rgba(18, 12, 8, 0) 72%);
  }
  .hero-copy {
    width: min(36vw, 540px);
    /* the copy ends above the dado rail art-a draws at 86% of the stage */
    margin: 0 0 max(clamp(48px, 9vh, 110px), calc(max(640px, 100vh - var(--mast-h)) * 0.14 + 28px)) var(--gutter);
    margin-bottom: max(clamp(48px, 9vh, 110px), calc(max(640px, 100svh - var(--mast-h)) * 0.14 + 28px));
    padding: 0;
  }
}

/* ---------- The flow grid ---------- */
.entry { overflow-x: clip; }
.flow {
  --wide-extra: calc((var(--wide) - var(--measure)) / 2);
  position: relative;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, var(--wide-extra))
    [text-start] min(var(--measure), 100% - 2 * var(--gutter))
    [text-end] minmax(0, var(--wide-extra))
    [wide-end] minmax(var(--gutter), 1fr)
    [full-end];
}
.flow > * { grid-column: text; min-width: 0; }

.chapter { padding-bottom: 0.5rem; }
.chapter--intro { padding-top: clamp(3.5rem, 8vw, 6rem); }
.flow > p { text-wrap: pretty; hanging-punctuation: first; }
.flow > p + p { margin-top: 1.15em; }
.flow > p + p.lead,
.flow > figure + p,
.flow > div + p,
.flow > blockquote + p,
.flow > aside + p { margin-top: 0; }
@media (max-width: 559px) {
  .flow > p { hyphens: auto; -webkit-hyphens: auto; }
}

/* the drop cap: an engraved historiated initial on hatched paper */
p.dropcap::first-letter {
  float: left;
  font-family: var(--f-display);
  font-weight: 400;
  font-style: normal;
  font-size: 4.1em;
  line-height: 0.86;
  color: var(--plate-ink);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(45deg, rgba(34, 24, 15, 0.22) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(34, 24, 15, 0.22) 0 1px, transparent 1px 4px);
  padding: 0.1em 0.16em 0.02em;
  margin: 0.1em 0.16em 0 0;
  border: 2px solid var(--gilt);
  box-shadow: 0 0 0 1px var(--ebony), 0 6px 14px rgba(0, 0, 0, 0.45);
}
.lead-in {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 1.06em;
  letter-spacing: 0.06em;
  color: var(--text);
}
.lead-in cite { font-style: normal; }

/* ---------- Chapter headings ---------- */
.ch-title {
  position: relative;
  margin-top: clamp(5rem, 10vw, 8rem);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.ch-title::before {
  content: "";
  position: absolute;
  inset: -90px -22% -40px -18%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 18% 40%, rgba(243, 183, 67, 0.07), transparent 60%);
}
.ch-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background:
    var(--tx-rule-orn) center / 76px 18px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) left 0 top 7px / calc(50% - 38px) 1px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) right 0 top 7px / calc(50% - 38px) 1px no-repeat,
    linear-gradient(rgba(200, 150, 63, 0.6), rgba(200, 150, 63, 0.6)) left 0 top 10px / calc(50% - 38px) 1px no-repeat,
    linear-gradient(rgba(200, 150, 63, 0.6), rgba(200, 150, 63, 0.6)) right 0 top 10px / calc(50% - 38px) 1px no-repeat;
}
.ch-num {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 38px;
  padding-top: 1px;
  background: var(--tx-cartouche) center / 64px 38px no-repeat;
  font-family: var(--f-label);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gilt-deep);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.ch-text {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.02;
  color: var(--text);
  text-wrap: balance;
}
.ch-title--plain { gap: 0; }

/* ---------- Stills: paintings in frames ---------- */
.still {
  --fw: var(--frame-still);
  grid-column: wide;
  position: relative;
  isolation: isolate;
  max-width: 100%;
  margin-block: clamp(2.75rem, 6vw, 4.25rem);
}
.frame {
  position: relative;
  border: var(--fw) solid transparent;
  border-image: var(--tx-gilt) 32 round;
  background: var(--bone-black);
  box-shadow: 0 22px 44px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px #0a0705;
}
.still[data-frame="ebony"] .frame { border-image: var(--tx-ebony) 32 round; }
.still[data-frame="print"] { --fw: var(--frame-print); }
.still[data-frame="print"] .frame { border-image: var(--tx-print) 32 round; }
.picture {
  position: relative;
  overflow: hidden;
  background: var(--bone-black);
}
.picture img {
  display: block;
  width: 100%;
  height: auto;
}
.picture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(242, 213, 140, 0.35), inset 0 8px 14px -6px rgba(0, 0, 0, 0.6);
}
/* page.js: the varnish, weave and craquelure, and the visitor's candle */
.still-varnish {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(200, 150, 63, 0.07);
  mix-blend-mode: soft-light;
}
.still-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.still-glint {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 40%;
  aspect-ratio: 1.3;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 231, 176, 0.09), rgba(255, 231, 176, 0.035) 55%, transparent);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
}
.still.is-glinting .still-glint { opacity: 1; }

/* the gilt number tablet on the bottom rail */
.frame-tablet {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(var(--fw) * -0.5);
  translate: -50% 50%;
  padding: 2px 9px 1px;
  background: linear-gradient(180deg, var(--gilt-hi), var(--gilt) 55%, var(--gilt-lo));
  color: var(--gilt-deep);
  font-family: var(--f-label);
  font-weight: 700;
  font-size: var(--fs-micro);
  line-height: 1.3;
  letter-spacing: 0.12em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(75, 50, 20, 0.6), 0 2px 4px rgba(0, 0, 0, 0.55);
}

/* the museum wall label */
.label {
  display: block;
  position: relative;
  max-width: 62ch;
  margin-top: calc(var(--fw) * 0.5 + 18px);
  padding-top: 14px;
  font-size: var(--fs-cap);
}
.label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 1px;
  background: var(--gilt);
  opacity: 0.6;
}
.label > span { display: block; }
.label-title {
  font-style: italic;
  font-size: 1em;
  line-height: 1.4;
  color: var(--text);
}
.label-meta {
  margin-top: 0.25em;
  font-family: var(--f-label);
  font-weight: 600;
  font-size: calc(var(--fs-label) / 0.84);
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-variant-numeric: lining-nums tabular-nums;
}
.label-meta > span { display: inline; }
.label-meta > .label-time,
.label-meta > .label-no,
.label-meta > .nw { white-space: nowrap; }
.label-meta > * + *::before { background: var(--gilt-lo); }
.label-cap {
  margin-top: 0.35em;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}
.label--centred { margin-inline: auto; text-align: center; max-width: 60ch; }
.label--centred::before { left: 50%; translate: -50% 0; }

/* the wall glow behind a candlelit picture */
.still[data-frame="ebony"]::before,
.still--opener::before {
  content: "";
  position: absolute;
  inset: -14% -10% 8% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 46%, rgba(243, 183, 67, 0.08), transparent 70%);
}
.still--opener[data-light="day"]::before { background: radial-gradient(ellipse 50% 50% at 50% 46%, rgba(243, 183, 67, 0.05), transparent 70%); }

/* pendants: two pictures hung as a matched pair */
.pendants {
  grid-column: wide;
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 40px);
  margin-block: clamp(2.75rem, 6vw, 4.25rem);
}
.pendants > .still {
  flex: var(--ar) 1 0;
  min-width: 0;
  margin: 0;
}
.pendants .label { font-size: calc(var(--fs-cap) * 0.96); }
@media (max-width: 719px) {
  .pendants { flex-direction: column; gap: clamp(2.75rem, 6vw, 4.25rem); }
  .pendants > .still { flex: none; width: 100%; }
}

/* chapter openers: the big picture at the end of a gallery */
.still--opener {
  --fw: var(--frame-opener);
  grid-column: full;
  justify-self: center;
  width: min(100% - 2 * var(--gutter), 1240px);
  margin-top: 0.5rem;
  margin-bottom: clamp(3rem, 7vw, 5rem);
  padding-top: 40px;
}
.still--opener .frame {
  border-image: var(--tx-ornate) 32 round;
  box-shadow: 0 30px 60px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px #0a0705;
}
.still--opener .frame::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(100% + var(--fw) * 0.42);
  width: 120px;
  height: 44px;
  translate: -50% 0;
  background: var(--tx-crest) center / 120px 44px no-repeat;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.frame-nameplate {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(var(--fw) * -0.5);
  translate: -50% 50%;
  padding: 4px 18px 3px;
  background: linear-gradient(180deg, var(--gilt-hi), var(--gilt) 52%, var(--gilt-lo));
  color: var(--gilt-deep);
  font-family: var(--f-label);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.14em;
  white-space: nowrap;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}
.frame-nameplate::before {
  content: "";
  position: absolute;
  inset: 2px 6px;
  border-top: 1px solid rgba(75, 50, 20, 0.55);
  border-bottom: 1px solid rgba(75, 50, 20, 0.55);
  pointer-events: none;
}
.still--opener .label { margin-top: calc(var(--fw) * 0.5 + 22px); }
@media (max-width: 719px) {
  .still--opener { padding-top: 24px; }
  .still--opener .frame::before { width: 72px; height: 26px; background-size: 72px 26px; }
  .frame-nameplate { font-size: 11px; padding: 3px 13px 2px; letter-spacing: 0.12em; }
}

/* sconces beside candlelit pictures (page.js adds them; 1320px and up) */
.sconce {
  position: absolute;
  z-index: 5;
  top: 55%;
  width: 42px;
  height: 114px;
  translate: 0 -62%;
  display: none;
  pointer-events: none;
}
.sconce svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sconce--l { right: calc(100% + var(--fw) + 28px); }
.sconce--r { left: calc(100% + var(--fw) + 28px); transform: scaleX(-1); }
.sconce .sc-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sc-a 1.7s ease-in-out infinite alternate, sc-b 2.3s ease-in-out infinite alternate;
}
.sconce--r .sc-flame { animation-delay: -0.9s, -0.4s; }
.sconce .sc-glow { animation: sc-glow 2.3s ease-in-out infinite alternate; }
@keyframes sc-a { from { transform: scaleY(0.94) rotate(-1.5deg); } to { transform: scaleY(1.06) rotate(1.5deg); } }
@keyframes sc-b { from { opacity: 0.88; } to { opacity: 1; } }
@keyframes sc-glow { from { opacity: 0.8; } to { opacity: 1; } }
@media (min-width: 1320px) {
  .sconce { display: block; }
  .still--opener { width: min(100% - 180px, 1240px); }
}

/* placeholders: only with ?placeholders; otherwise a missing still is gone */
.ph { display: none; }
.still.is-missing { display: none; }
.show-placeholders .still.is-missing { display: block; }
.show-placeholders .still.is-missing .picture { aspect-ratio: var(--ar); }
.show-placeholders .still.is-missing img { display: none; }
.show-placeholders .ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(200, 150, 63, 0.08) 0 1px, transparent 1px 7px),
    var(--bg-2);
  color: var(--text-2);
}
.ph-no { font: 700 22px/1 var(--f-label); letter-spacing: 0.14em; color: var(--accent); }
.ph-desc { font-style: italic; font-size: 15px; max-width: 46ch; line-height: 1.45; }
.ph-file { font: 600 13px/1.2 var(--f-label); letter-spacing: 0.08em; color: var(--muted); }

/* ---------- Plates ---------- */
figure.art {
  --fw: var(--frame-still);
  container-type: inline-size;
  grid-column: wide;
  position: relative;
  isolation: isolate;
  max-width: 100%;
  margin-block: clamp(2.75rem, 6vw, 4.25rem);
}
.art--print {
  --fw: var(--frame-print);
  justify-self: center;
  width: 100%;
}
figure.art.art--print { max-width: min(100%, 1000px); }
figure.art[data-art="battle"],
figure.art[data-art="map"] { max-width: min(100%, var(--wide)); }
.art-canvas {
  position: relative;
  box-sizing: content-box;
  width: calc(100% - 2 * var(--fw));
  margin-inline: auto;
  aspect-ratio: var(--ar, 1328 / 800);
  border: var(--fw) solid transparent;
  border-image: var(--tx-gilt) 32 round;
  background: var(--imprimatura);
  box-shadow: 0 22px 44px -12px rgba(0, 0, 0, 0.75);
}
.art--candle .art-canvas { border-image: var(--tx-ebony) 32 round; background: var(--bone-black); }
.art--print .art-canvas { border-image: var(--tx-print) 32 round; background: var(--paper); }
.art--candle::before {
  content: "";
  position: absolute;
  inset: -12% -8% 10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(243, 183, 67, 0.07), transparent 70%);
}

.art[data-art="ten"]         { --ar: 3 / 2;  --ar-n: 4 / 5; }
.art[data-art="bnc"]         { --ar: 5 / 4;  --ar-n: 3 / 4; }
.art[data-art="focus"]       { --ar: 3 / 2;  --ar-n: 4 / 5; }
.art[data-art="chandeliers"] { --ar: 1328 / 800; }
.art[data-art="wick"]        { --ar: 1328 / 800; }
.art[data-art="dining"]      { --ar: 3 / 2;  --ar-n: 4 / 5; }
.art[data-art="sepia"]       { --ar: 1328 / 800; }
.art[data-art="battle"]      { --ar: 2 / 1;  --ar-n: 4 / 5; }
.art[data-art="references"]  { --ar: 1328 / 800; }
.art[data-art="map"]         { --ar: 1200 / 1040; --ar-n: 800 / 1220; }
.art[data-art="barn"]        { --ar: 1328 / 800; }
.art[data-art="signoff"]     { --ar: 1200 / 560; --ar-n: 1000 / 700; }
@container (max-width: 599px) {
  .art-canvas { aspect-ratio: var(--ar-n, var(--ar, 1328 / 800)); }
}
/* the two widest engravings change to their narrow sheets sooner, so their lettering stays at 11px or more */
@container (max-width: 759px) {
  .art[data-art="battle"] .art-canvas,
  .art[data-art="map"] .art-canvas { aspect-ratio: var(--ar-n); }
}

figure.art > figcaption,
.widget > figcaption {
  max-width: 62ch;
  margin-top: calc(var(--fw) + 14px);
  font-size: var(--fs-cap);
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}
.art--print > figcaption { margin-inline: auto 0; margin-left: 0; }
.plate-tag {
  font-family: var(--f-label);
  font-weight: 700;
  font-size: calc(var(--fs-label) / 0.84);
  letter-spacing: 0.14em;
  color: var(--accent);
  font-variant-numeric: lining-nums;
  margin-right: 0.35em;
}
.plate-medium {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: calc(var(--fs-label) / 0.84);
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-right: 0.35em;
}
.plate-medium::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 0.7em;
  background: var(--gilt-lo);
  rotate: 45deg;
  vertical-align: 0.2em;
}

/* ---------- Interactives ---------- */
.widget {
  --fw: var(--frame-still);
  grid-column: wide;
  position: relative;
  isolation: isolate;
  max-width: 100%;
  margin-block: clamp(2.75rem, 6vw, 4.25rem);
  padding: clamp(14px, 2.6vw, 32px);
  background-color: var(--bg-2);
  background-image: var(--tx-damask, none);
  background-size: 180px 270px;
  border: 1px solid var(--rule);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px rgba(200, 150, 63, 0.16), 0 26px 50px -20px rgba(0, 0, 0, 0.8);
}
.widget::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 50% 30%, rgba(243, 183, 67, 0.06), transparent 70%);
}
.widget-stage {
  position: relative;
  box-sizing: content-box;
  width: calc(100% - 2 * var(--fw));
  margin-inline: auto;
  aspect-ratio: 1328 / 800;
  border: var(--fw) solid transparent;
  border-image: var(--tx-ebony) 32 round;
  background: var(--bone-black);
  overflow: hidden;
  box-shadow: 0 22px 44px -12px rgba(0, 0, 0, 0.75);
}
.widget--zoom .widget-stage { border-image: var(--tx-gilt) 32 round; background: var(--imprimatura); }
.widget-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.widget-stage .wl {
  will-change: filter;
}
.widget-stage .w-note {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 6;
  font: 600 12px/1 var(--f-label);
  letter-spacing: 0.12em;
  color: rgba(238, 226, 201, 0.55);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.widget-strip {
  --pw: var(--frame-print);
  position: relative;
  box-sizing: content-box;
  width: calc(100% - 2 * var(--pw));
  margin: clamp(14px, 2vw, 22px) auto 0;
  border: var(--pw) solid transparent;
  border-image: var(--tx-print) 32 round;
  background: var(--paper);
  aspect-ratio: 1000 / 168;
}
.widget-strip svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@container widget (max-width: 600px) {
  .widget-strip { aspect-ratio: 600 / 230; }
}
.widget { container: widget / inline-size; }
.widget-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px 28px;
  margin-top: clamp(16px, 2.2vw, 24px);
  align-items: start;
}
.wc-group { min-width: 0; }
.wc-group--wide { grid-column: 1 / -1; }
.wc-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--text-2);
  font-variant-numeric: lining-nums tabular-nums;
}
.wc-label b { font-weight: 700; color: var(--accent); letter-spacing: 0.06em; }
.wc-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* the brass range: a gilt track with engraved ticks and a brass knob */
.wc-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --ticks: 8;
}
.wc-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(34, 24, 15, 0.85) 0 1px, transparent 1px calc((100% - 1px) / (var(--ticks) - 1))),
    linear-gradient(180deg, var(--gilt-hi), var(--gilt) 45%, var(--gilt-lo));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(10, 7, 5, 0.8);
}
.wc-range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(34, 24, 15, 0.85) 0 1px, transparent 1px calc((100% - 1px) / (var(--ticks) - 1))),
    linear-gradient(180deg, var(--gilt-hi), var(--gilt) 45%, var(--gilt-lo));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(10, 7, 5, 0.8);
}
.wc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  border: 1px solid var(--ebony);
  background:
    radial-gradient(circle, var(--gilt-deep) 0 2px, transparent 2.5px),
    radial-gradient(circle at 36% 30%, #fff1c4 0, var(--gilt-hi) 22%, var(--gilt) 55%, var(--gilt-lo) 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.wc-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--ebony);
  background:
    radial-gradient(circle, var(--gilt-deep) 0 2px, transparent 2.5px),
    radial-gradient(circle at 36% 30%, #fff1c4 0, var(--gilt-hi) 22%, var(--gilt) 55%, var(--gilt-lo) 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.wc-range:focus-visible { outline-offset: 0; }
.wc-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  background: var(--bg-3);
  border: 1px solid var(--gilt-lo);
  border-radius: 1px;
  color: var(--text-2);
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(242, 213, 140, 0.12), 0 2px 3px rgba(0, 0, 0, 0.4);
}
.wc-btn:hover { color: var(--accent-hi); border-color: var(--gilt); }
.wc-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--gilt-hi), var(--gilt) 55%, var(--gilt-lo));
  border-color: var(--gilt-deep);
  color: var(--gilt-deep);
  box-shadow: inset 0 0 0 1px rgba(75, 50, 20, 0.55), 0 0 12px rgba(243, 183, 67, 0.22);
}
.wc-btn--go { display: inline-flex; align-items: center; gap: 8px; }
.wc-read {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  background: var(--bg-3);
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 3px var(--bg-3), inset 0 0 0 4px rgba(200, 150, 63, 0.14);
  font-variant-numeric: lining-nums tabular-nums;
}
.wc-read p { margin: 0; }
.wr-main {
  font-family: var(--f-label);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.wr-line { font-size: 0.9em; color: var(--text); line-height: 1.45; }
.wr-light { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.9em; color: var(--text); }
.wr-flames { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: flex-end; }
.wr-flames svg { width: 9px; height: 16px; display: block; }
.wr-note { font-style: italic; font-size: 0.84em; color: var(--text-2); line-height: 1.45; }
.wr-small { font-size: 0.76em; color: var(--muted); line-height: 1.45; }
.widget > figcaption { margin-top: 18px; }

/* ---------- Sidenotes ---------- */
.sn { position: static; }
.sn-ref {
  position: relative;
  display: inline-block;
  min-width: 1em;
  margin: 0 0.05em 0 0.08em;
  padding: 0 0.12em;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: var(--f-label);
  font-weight: 700;
  font-size: 0.78em;
  line-height: 1;
  vertical-align: 0.4em;
  cursor: pointer;
}
.sn-ref::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  translate: -50% -50%;
}
.sn-ref:hover { color: var(--accent-hi); }
.sn-note {
  display: none;
  margin: 0.7em 0 0.4em;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  font-style: italic;
  font-size: 0.86em;
  line-height: 1.55;
  color: var(--text-2);
}
.sn.is-open .sn-note { display: block; }
.sn-num {
  font-family: var(--f-label);
  font-style: normal;
  font-weight: 700;
  color: var(--gilt);
  margin-right: 0.45em;
}
.sn-margin .sn:not(.sn-inline) .sn-note {
  display: block;
  position: absolute;
  margin: 0;
  padding: 2px 0 2px 14px;
  background: none;
  border: 0;
  border-left: 1px solid var(--rule);
  font-size: 0.8em;
  line-height: 1.5;
}
.sn-margin .sn:not(.sn-inline) .sn-ref { cursor: default; }
.sn.is-hot .sn-note { border-left-color: var(--gilt); color: var(--text); }

/* ---------- Pull quote ---------- */
.pull {
  margin-block: clamp(2.75rem, 6vw, 4.25rem);
  padding: 34px 0 0;
  text-align: center;
  position: relative;
}
.pull::before,
.pull::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 80px;
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--gilt), transparent);
}
.pull::before { top: 26px; }
.pull::after { bottom: 0; }
.pull-flame {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  width: 10px;
  height: 18px;
  filter: drop-shadow(0 0 6px rgba(243, 183, 67, 0.55));
}
.pull-flame svg { display: block; }
.pull p {
  padding-top: 18px;
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.35;
  color: var(--text);
  text-wrap: balance;
}
.pull footer {
  margin: 0.9em 0 22px;
  font-family: var(--f-label);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ---------- Sign-off ---------- */
.signoff-sec {
  max-width: calc(860px + 2 * var(--gutter));
  margin: clamp(4rem, 9vw, 6.5rem) auto 0;
  padding: 0 var(--gutter) clamp(3rem, 7vw, 5rem);
}
.art--signoff { margin: 0; --fw: 0px; }
.art--signoff .art-canvas {
  border: 0;
  width: 100%;
  box-shadow: none;
  background: transparent;
}
.signoff-line {
  margin-top: 18px;
  text-align: center;
  font-family: var(--f-label);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: var(--bg);
  border-top: 1px solid var(--ebony);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: -2px 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt) 12%, var(--gilt-hi) 50%, var(--gilt) 88%, transparent);
  opacity: 0.55;
}
.footer-inner {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 30px var(--gutter) 38px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px 30px;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--f-display);
  font-size: 19px;
  line-height: 1;
  white-space: nowrap;
}
.footer-brand:hover { color: var(--gilt-hi); }
.colophon {
  font-size: 0.84em;
  line-height: 1.5;
  color: var(--muted);
}
.back-top {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 0;
}
.back-top:hover { color: var(--accent-hi); text-decoration: underline; }
@media (max-width: 719px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 719px) {
  .still,
  figure.art,
  .widget { grid-column: text; }
  .pendants { grid-column: text; }
  .still--opener { grid-column: full; width: calc(100% - 2 * var(--gutter)); }
  .widget { padding: 12px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(200, 150, 63, 0.16); }
  .wc-btn { padding: 8px 11px; font-size: 14px; }
  .ch-title::before { inset: -60px -10% -30px -10%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .progress-flame svg,
  .sconce .sc-flame,
  .sconce .sc-glow { animation: none; }
  .still-glint { display: none; }
}

/* ---------- Print ---------- */
@media print {
  :root { --frame-still: 1px; --frame-opener: 1px; --frame-print: 1px; }
  html, body { background: var(--paper) !important; color: var(--plate-ink); }
  body { background-image: none !important; font-size: 11pt; }
  .masthead, .progress, .skip-link, .back-top, .sconce, .still-glint, .widget-controls, .sn-ref::after { display: none !important; }
  .hero { min-height: 0; height: 120mm; background: var(--paper); break-after: page; }
  .hero::after { background: linear-gradient(to top, rgba(239, 228, 203, 0.95) 0%, rgba(239, 228, 203, 0) 60%); }
  .hero-title { color: var(--plate-ink) !important; -webkit-text-fill-color: currentColor; background: none; filter: none; }
  .hero-sub, .hero-dek, .hero-meta, .ch-text, .label-title, .label-cap, .label-meta, .pull p, .colophon, figcaption, .cap { color: var(--plate-ink) !important; }
  .frame, .art-canvas, .widget-stage, .widget-strip {
    border: 1px solid var(--gilt-lo) !important;
    border-image: none !important;
    box-shadow: none !important;
  }
  .widget { background: none; box-shadow: none; border: 0; }
  .still, figure.art, .widget, .pendants, .pull { break-inside: avoid; }
  .ch-title::before, .still::before, .art--candle::before, .widget::before { display: none; }
  .sn-note { display: block !important; position: static !important; border: 0 !important; padding: 0 !important; margin: 0.3em 0 !important; color: var(--plate-ink) !important; }
  a { color: var(--plate-ink); }
  .site-footer { background: none; border: 0; }
}