/* ==========================================================================
   Allen E. Sweigert, Sr. — WWII & Family History
   "The Archive Room"

   Warm archival paper, khaki field-manual chrome, and a lamplit dark mode.
   Every photograph is presented as a print on a mat — never cropped by the
   layout, never letterboxed by it either: each cell carries the picture's
   own aspect ratio (--ar), so there is no dead space around anything.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens -- */
:root {
  color-scheme: light;

  /* paper */
  --cream:        #FAF5E9;
  --cream-deep:   #F2EBD6;
  --page-edge:    #EDE4CB;
  --mat:          #FFFDF7;

  /* field khaki */
  --khaki:        #8F8A63;
  --khaki-dark:   #262A1F;
  --khaki-dark-2: #333829;
  --khaki-deep:   #1B1E15;

  /* ink */
  --ink:          #1C1C18;
  --ink-soft:     #37372C;
  --muted:        #635944;
  --muted-2:      #8A8271;

  /* accent — the blue of the squadron roundel */
  --accent:       #43598A;
  --accent-dark:  #2B3A58;
  --accent-light: #7387AB;
  --brass:        #B29644;
  --brass-soft:   #C9B473;
  --catherine:    #9C5A45;
  --catherine-soft:#B8735A;

  /* structure */
  --sidebar-bg:   #F0E8D2;
  --sidebar-rule: #B8A968;
  --frame-rule:   #CFC6A6;
  --hairline:     rgba(38, 42, 31, .14);

  --shadow-lift:  0 2px 4px -2px rgba(34,30,16,.18), 0 12px 28px -14px rgba(34,30,16,.30);
  --shadow-deep:  0 4px 8px -4px rgba(34,30,16,.22), 0 26px 52px -22px rgba(34,30,16,.42);
  --paper-shadow: var(--shadow-deep);
  --card-shadow:  var(--shadow-lift);

  --serif: "Spectral", Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --sans:  "Barlow", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --cond:  "Barlow Condensed", "Segoe UI", "Arial Narrow", sans-serif;

  --measure: 720px;
  --wide:    1120px;
  --ease:    cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------- lamplight (dark) -- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cream:        #17180F;
  --cream-deep:   #1E2016;
  --page-edge:    #242719;
  --mat:          #F7F3E6;          /* prints stay lit, like frames on a dark wall */

  --khaki-dark:   #0E0F0A;
  --khaki-dark-2: #1B1D14;
  --khaki-deep:   #090A06;

  --ink:          #E9E3CE;
  --ink-soft:     #D2CBB3;
  --muted:        #A79C7F;
  --muted-2:      #8B826B;

  --accent:       #8CA3CE;
  --accent-dark:  #A9BCDF;
  --accent-light: #6E82A9;
  --brass:        #D4BA6B;
  --brass-soft:   #E0CC8E;
  --catherine:    #D08A70;
  --catherine-soft:#DFA286;

  --sidebar-bg:   #22251A;
  --sidebar-rule: #7A6E3E;
  --frame-rule:   #3B3E2C;
  --hairline:     rgba(233,227,206,.16);

  --shadow-lift:  0 2px 4px -2px rgba(0,0,0,.5), 0 12px 28px -14px rgba(0,0,0,.7);
  --shadow-deep:  0 4px 10px -4px rgba(0,0,0,.55), 0 28px 56px -22px rgba(0,0,0,.8);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cream:        #17180F;
    --cream-deep:   #1E2016;
    --page-edge:    #242719;
    --mat:          #F7F3E6;
    --khaki-dark:   #0E0F0A;
    --khaki-dark-2: #1B1D14;
    --khaki-deep:   #090A06;
    --ink:          #E9E3CE;
    --ink-soft:     #D2CBB3;
    --muted:        #A79C7F;
    --muted-2:      #8B826B;
    --accent:       #8CA3CE;
    --accent-dark:  #A9BCDF;
    --accent-light: #6E82A9;
    --brass:        #D4BA6B;
    --brass-soft:   #E0CC8E;
    --catherine:    #D08A70;
    --catherine-soft:#DFA286;
    --sidebar-bg:   #22251A;
    --sidebar-rule: #7A6E3E;
    --frame-rule:   #3B3E2C;
    --hairline:     rgba(233,227,206,.16);
    --shadow-lift:  0 2px 4px -2px rgba(0,0,0,.5), 0 12px 28px -14px rgba(0,0,0,.7);
    --shadow-deep:  0 4px 10px -4px rgba(0,0,0,.55), 0 28px 56px -22px rgba(0,0,0,.8);
  }
}

/* ------------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth; scroll-padding-top: 76px;
  /* Backstop against sideways drag on a phone: nothing here is meant to be
     wider than the viewport, and if something ever is, it should be cut off
     rather than turn the whole page into a horizontal scroller. `clip` rather
     than `hidden` so this does not become a scroll container, which would
     break the sticky navigation bar. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.72;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--cream);
  /* laid-paper tooth: two very low-contrast gradient weaves, no image asset */
  background-image:
    repeating-linear-gradient(0deg,   rgba(120,104,64,.028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(120,104,64,.022) 0 1px, transparent 1px 4px),
    radial-gradient(120% 80% at 50% -10%, rgba(178,150,68,.07), transparent 60%);
  background-attachment: fixed, fixed, fixed;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--brass-soft); color: var(--khaki-dark); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--accent-dark); color: #fff; padding: 10px 18px;
  font-family: var(--sans); font-size: .9rem; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------- reading progress -- */
#progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--brass));
  z-index: 999; transition: width .08s linear;
}

/* ---------------------------------------------------------------- nav bar -- */
.sitenav {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.sitenav-inner {
  max-width: var(--wide); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 14px; height: 62px;
}
.sitenav-brand {
  font-family: var(--cond); font-weight: 600; font-size: 15px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink);
  text-decoration: none; display: flex; align-items: center; gap: 10px;
  white-space: nowrap; flex: 0 0 auto;
}
.sitenav-brand img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.sitenav-links { display: flex; gap: 1px; align-items: center; flex-wrap: nowrap; margin-left: auto; }
.sitenav-links a {
  font-family: var(--cond); font-size: 15px; font-weight: 500;
  letter-spacing: .04em; text-decoration: none; color: var(--ink-soft);
  padding: 7px 10px; border-radius: 4px; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.sitenav-links a:hover { background: var(--cream-deep); color: var(--accent-dark); }
.sitenav-links a.current {
  color: var(--accent-dark); background: var(--cream-deep);
  box-shadow: inset 0 -2px 0 var(--brass);
}

.themetoggle {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--hairline); background: transparent; cursor: pointer;
  color: var(--ink-soft); display: grid; place-items: center; padding: 0;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.themetoggle:hover { background: var(--cream-deep); color: var(--accent-dark); }
.themetoggle svg { width: 17px; height: 17px; }
.themetoggle .i-moon { display: none; }
:root[data-theme="dark"] .themetoggle .i-sun { display: none; }
:root[data-theme="dark"] .themetoggle .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetoggle .i-sun { display: none; }
  :root:not([data-theme="light"]) .themetoggle .i-moon { display: block; }
}

.navactions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; margin-left: 12px; }
.navtoggle { display: none; }

@media (max-width: 1240px) {
  /* The panel opens downward, not in from the right. A full-width fixed panel
     parked at translateX(100%) sits a whole viewport past the right edge, and a
     fixed element still counts toward the document's width, so the entire page
     could be dragged sideways on a phone. Fading down costs nothing
     horizontally. `visibility` takes the closed panel out of hit-testing and
     out of the accessibility tree, and is held until the fade finishes so the
     closing animation is still seen. */
  .sitenav-links {
    position: fixed; top: 62px; left: 0; right: 0; height: calc(100dvh - 62px);
    background: var(--cream); flex-direction: column; align-items: stretch;
    padding: 12px 18px 40px; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .22s var(--ease), transform .28s var(--ease),
                visibility 0s linear .28s;
    overflow-y: auto; box-shadow: var(--shadow-deep);
    margin-left: 0;
  }
  .sitenav-links.open {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .22s var(--ease), transform .28s var(--ease),
                visibility 0s linear 0s;
  }
  .sitenav-links a { padding: 15px 10px; font-size: 19px; border-bottom: 1px solid var(--hairline); border-radius: 0; }
  .sitenav-links a.current { box-shadow: inset 3px 0 0 var(--brass); }
  .navactions { margin-left: auto; }
  .navtoggle {
    display: block; background: none; border: none; cursor: pointer;
    width: 36px; height: 36px; position: relative; z-index: 95; flex: 0 0 auto;
  }
  .navtoggle span, .navtoggle span::before, .navtoggle span::after {
    content: ""; position: absolute; left: 7px; right: 7px; height: 2px; border-radius: 2px;
    background: var(--ink); transition: transform .22s var(--ease), opacity .22s var(--ease);
  }
  .navtoggle span { top: 17px; }
  .navtoggle span::before { top: -7px; }
  .navtoggle span::after { top: 7px; }
  .navtoggle.open span { background: transparent; }
  .navtoggle.open span::before { transform: translateY(7px) rotate(45deg); }
  .navtoggle.open span::after { transform: translateY(-7px) rotate(-45deg); }
}

/* ------------------------------------------------------------------- hero -- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--khaki-deep);
  color: #EFE9D4; text-align: center; padding: 84px 24px 68px;
  border-bottom: 3px solid var(--brass);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image:
    radial-gradient(ellipse 80% 55% at 28% -8%,  rgba(178,150,68,.26), transparent 60%),
    radial-gradient(ellipse 90% 60% at 82% 112%, rgba(67,89,138,.34), transparent 62%),
    linear-gradient(175deg, var(--khaki-dark-2), var(--khaki-deep) 70%);
}
/* a faint rotary-press grain so the dark field isn't a flat slab */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 85%);
}
.hero-emblem {
  width: 96px; height: auto; margin: 0 auto 24px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.hero-kicker {
  font-family: var(--cond); font-size: 15px; font-weight: 500; letter-spacing: .38em;
  text-transform: uppercase; color: var(--brass-soft); margin: 0 0 18px; padding-left: .38em;
}
.hero-rule { width: 84px; height: 2px; background: var(--brass); margin: 0 auto 24px; opacity: .85; }
.hero h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(2.3rem, 5.4vw, 3.8rem);
  margin: 0 0 12px; color: #FBF7EC; letter-spacing: -.005em; line-height: 1.08;
}
.hero .hero-sub { font-size: 1.2rem; color: #DDD5B4; margin: 0 0 6px; font-style: italic; }
.hero .hero-tag {
  max-width: 540px; margin: 16px auto 0; color: #C3BB9A; font-size: 1rem; line-height: 1.65;
}

/* the hero photograph, mounted like a print */
.hero-frame {
  position: relative; margin: 40px auto 0; max-width: 600px; padding: 10px;
  background: var(--mat); box-shadow: var(--shadow-deep);
  border: 1px solid rgba(0,0,0,.25);
}
.hero-frame::after {
  content: ""; position: absolute; inset: 4px; border: 1px solid rgba(38,42,31,.16); pointer-events: none;
}
.hero-frame img { width: 100%; }
.hero-frame-cap {
  font-family: var(--sans); font-size: 13px; color: var(--brass-soft);
  margin-top: 14px; font-style: italic; letter-spacing: .01em;
}
.hero-dates { margin-top: 30px; font-size: 1rem; color: #DDD5B4; letter-spacing: .02em; }
.hero-unit {
  margin-top: 10px; font-family: var(--cond); font-size: 15px; color: #ADA47D;
  line-height: 1.85; letter-spacing: .04em;
}
.hero-scroll {
  display: inline-block; margin-top: 44px; font-family: var(--cond); font-size: 15px;
  letter-spacing: .2em; text-transform: uppercase; color: #EFE9D4; text-decoration: none;
  border: 1px solid rgba(239,233,212,.42); padding: 11px 26px; border-radius: 999px;
  transition: background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.hero-scroll:hover {
  background: rgba(239,233,212,.12); border-color: rgba(239,233,212,.85);
  color: #fff; transform: translateY(-2px);
}

/* --------------------------------------------------------- chapter banner -- */
.chapter-banner {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--khaki-deep); color: #EFE9D4;
  text-align: center; padding: 64px 24px 56px; border-bottom: 3px solid var(--brass);
}
.chapter-banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(ellipse 70% 60% at 50% -20%, rgba(178,150,68,.24), transparent 62%),
    linear-gradient(170deg, var(--khaki-dark-2), var(--khaki-deep) 78%);
}
.chapter-banner img.emblem { width: 64px; margin: 0 auto 18px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.chapter-banner .kicker {
  font-family: var(--cond); font-size: 14px; font-weight: 500; letter-spacing: .32em;
  text-transform: uppercase; color: var(--brass-soft); margin: 0 0 14px; padding-left: .32em;
}
.chapter-banner h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 4.6vw, 3rem);
  margin: 0 0 8px; color: #FBF7EC; line-height: 1.12;
}
.chapter-banner .sub { font-style: italic; color: #DDD5B4; font-size: 1.06rem; margin: 6px 0 0; }

/* ----------------------------------------------------------------- layout -- */
main { display: block; }
.content { max-width: var(--measure); margin: 0 auto; padding: 58px 24px 30px; }
.content-wide { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }

.section-header { margin: 58px 0 20px; scroll-margin-top: 84px; }
.section-header:first-child { margin-top: 0; }
.section-header .kicker {
  font-family: var(--cond); font-size: 14px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 5px; padding-left: .24em;
}
.section-header h2 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.55rem, 3vw, 1.95rem);
  margin: 0 0 12px; color: var(--ink); line-height: 1.22; letter-spacing: -.004em;
}
.section-header hr {
  border: none; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 0 64px, var(--frame-rule) 64px);
}

h2.subhead {
  font-family: var(--serif); font-weight: 600; font-size: 1.32rem; color: var(--accent-dark);
  margin: 46px 0 12px; padding-top: 6px; scroll-margin-top: 84px;
}

p.body-text { margin: 0 0 18px; text-align: left; color: var(--ink); }
p.body-text b, p.note-text b { font-weight: 600; color: var(--ink); }
p.note-text {
  margin: 0 0 16px; font-style: italic; color: var(--muted); font-size: .96rem; line-height: 1.68;
}
p.caption-text {
  font-family: var(--sans); font-size: .86rem; text-align: center; color: var(--muted);
  font-style: italic; margin: 10px 0 0; line-height: 1.55;
}

/* --------------------------------------------------------------- drop cap -- */
.dropcap-wrap { display: flow-root; margin-bottom: 18px; }
.dropcap-letter {
  float: left; font-family: var(--serif); font-weight: 600; font-size: 4.9rem;
  line-height: .78; color: var(--accent-dark); margin: 8px 12px 0 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
:root[data-theme="dark"] .dropcap-letter { text-shadow: none; }

/* ----------------------------------------------------------------- photos -- */
figure.photo {
  margin: 38px auto; max-width: 100%; text-align: center;
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
figure.photo.in-view { opacity: 1; transform: none; }

figure.photo .mat {
  position: relative; display: inline-block; background: var(--mat); padding: 10px;
  border: 1px solid var(--frame-rule); box-shadow: var(--shadow-lift); cursor: zoom-in;
  max-width: 100%; transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
figure.photo .mat::after {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid rgba(38,42,31,.13);
}
figure.photo .mat:hover { transform: translateY(-3px); box-shadow: var(--shadow-deep); }
figure.photo .mat img { max-height: 76vh; width: auto; max-width: 100%; }
figure.photo figcaption {
  max-width: 580px; margin: 14px auto 0; font-family: var(--sans); font-size: .88rem;
  color: var(--muted); font-style: italic; line-height: 1.6;
}

/* ------------------------------------------------------- provenance badge -- */
/* Nearly every picture here is Allen's own. The handful that are not — pages
   out of the unit history book, a squadron photographer's frame, a Navy
   photograph, a diagram made for this document — carry a badge on the print
   itself. Saying it only in the caption let the disclaimer read as though it
   covered the photographs that came after it, which it never did. */
.mat[data-prov] { position: relative; }
.mat[data-prov]::before {
  content: attr(data-prov);
  position: absolute; z-index: 2; left: 8px; top: 8px;
  font-family: var(--cond); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #F6F1DE; background: rgba(38, 42, 31, .82);
  padding: 3px 8px 2px; border-radius: 2px; pointer-events: none;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
@media (max-width: 560px) {
  .mat[data-prov]::before { font-size: 10px; padding: 2px 6px 1px; left: 6px; top: 6px; }
}
@media print {
  .mat[data-prov]::before {
    background: #262A1F !important; color: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

figure.photo-full { max-width: var(--wide); }
figure.photo-full .mat img { max-height: 84vh; }

/* ---------------------------------------------------------------- gallery -- */
/* Galleries and full plates break out of the 720px reading measure and use
   the full page width -- the prints are the point, and cramming them into a
   text column was throwing away half the available size. */
.breakout, .gallery, figure.photo-full {
  --bo: min(var(--wide), calc(100vw - 40px));
  width: var(--bo);
  margin-left: calc(50% - var(--bo) / 2);
  margin-right: calc(50% - var(--bo) / 2);
  max-width: none;
}
.content-wide .gallery, .content-wide figure.photo-full { width: auto; margin-left: auto; margin-right: auto; max-width: var(--wide); }
.gallery { margin-top: 34px; margin-bottom: 50px; }
.gallery-head { text-align: left; margin-bottom: 6px; }
.gallery-intro { max-width: var(--measure); margin: 0 0 22px; color: var(--ink); }
/* A justified gallery, the way a picture editor lays out a contact sheet:
   every print in a row shares one height, and the row fills the measure
   exactly. Each cell's flex-basis is its own aspect ratio times a target row
   height, so equal growth lands them all at the same height — which means no
   letterbox bars AND no ragged bottom edge. The ::after spacer has an absurd
   flex-grow so it swallows the slack on the final row, leaving those prints
   at their natural size instead of blowing them up. */
.gallery-grid {
  display: flex; flex-wrap: wrap; gap: 24px 20px;
  --row-h: clamp(180px, 21vw, 300px);
}
.gallery-grid::after { content: ""; flex-grow: 1e7; min-width: 0; }
.gallery-grid[style*="--cols:3"], .gallery-grid.cols-3 { --row-h: clamp(170px, 18vw, 258px); }
.gallery-grid[style*="--cols:4"], .gallery-grid.cols-4 { --row-h: clamp(155px, 15vw, 216px); }

.gallery-cell {
  /* basis = exactly the width this print needs at the target row height (that
     decides where the row wraps), and flex-grow = the same ratio, so the row's
     leftover space is shared in proportion to width. Final widths stay
     proportional to the aspect ratios, which is what makes every print in a
     row come out the same height. Growing them all equally would not. */
  flex-basis: calc(var(--arn, 1.333) * var(--row-h));
  flex-grow: var(--arn, 1.333);
  flex-shrink: 1;
  min-width: 0; max-width: 100%;
  margin: 0; opacity: 0; transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
@media (max-width: 780px) { .gallery-grid { gap: 16px 14px; } }
@media (max-width: 470px) {
  .gallery-grid { display: grid; grid-template-columns: 1fr; }
  .gallery-grid::after { display: none; }
  .gallery-cell { max-width: 100%; }
}
.gallery-cell.in-view { opacity: 1; transform: none; }
.gallery-cell .mat {
  position: relative; display: block; background: var(--mat); padding: 8px;
  border: 1px solid var(--frame-rule); box-shadow: var(--shadow-lift); cursor: zoom-in;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.gallery-cell .mat::after {
  content: ""; position: absolute; inset: 4px; pointer-events: none;
  border: 1px solid rgba(38,42,31,.12);
}
.gallery-cell .mat:hover { transform: translateY(-4px); box-shadow: var(--shadow-deep); }
/* Each cell carries the picture's own aspect ratio, so the print fills its
   mat exactly: no letterbox bars, and object-fit never has to crop a face
   out of frame to make a tidy grid. */
.gallery-cell .mat img {
  width: 100%; height: auto; aspect-ratio: var(--ar, 4/3);
  object-fit: contain; object-position: center;
}
.gallery-cell figcaption {
  font-family: var(--sans); font-size: .81rem; color: var(--muted);
  font-style: italic; margin-top: 9px; line-height: 1.5;
}

/* ------------------------------------------------------------ video panel -- */
/* Click-to-play. The poster frame is stored with the site, so the panel still
   shows something when the page is read offline, and nothing is requested from
   YouTube until somebody actually presses play. */
.videopanel {
  --bo: min(var(--wide), calc(100vw - 40px));
  width: var(--bo); margin: 40px calc(50% - var(--bo) / 2) 44px; max-width: none;
}
.videopanel .frame {
  position: relative; aspect-ratio: 16 / 9; background: var(--khaki-deep);
  border: 1px solid var(--frame-rule); padding: 10px;
  box-shadow: var(--shadow-deep); overflow: hidden;
}
.videopanel .frame::after {
  content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 3;
  border: 1px solid rgba(0, 0, 0, .3);
}
.videopanel img, .videopanel iframe {
  position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
  border: 0; object-fit: cover; display: block;
}
.videopanel button.play {
  position: absolute; inset: 10px; z-index: 2; width: calc(100% - 20px); height: calc(100% - 20px);
  border: 0; cursor: pointer; display: grid; place-items: center; gap: 14px;
  grid-auto-flow: row; background: linear-gradient(180deg, rgba(12,12,8,.18), rgba(12,12,8,.62));
  transition: background .25s var(--ease);
}
.videopanel button.play:hover { background: linear-gradient(180deg, rgba(12,12,8,.28), rgba(12,12,8,.72)); }
.videopanel button.play .disc {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(251,247,236,.94); box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: transform .25s var(--ease);
}
.videopanel button.play:hover .disc { transform: scale(1.06); }
.videopanel button.play .disc svg { width: 34px; height: 34px; color: var(--khaki-deep); margin-left: 5px; }
.videopanel button.play .label {
  font-family: var(--cond); font-size: 15px; letter-spacing: .22em; text-transform: uppercase;
  color: #F6F1DE; text-shadow: 0 2px 10px rgba(0,0,0,.7); padding-left: .22em;
}
.videopanel figcaption {
  margin-top: 14px; font-family: var(--sans); font-size: .88rem; color: var(--muted);
  font-style: italic; line-height: 1.6; text-align: center;
  max-width: 620px; margin-left: auto; margin-right: auto;
}
.videopanel .fallback {
  display: block; margin-top: 8px; font-family: var(--sans); font-size: .8rem;
  color: var(--muted-2); text-align: center;
}
@media (max-width: 560px) {
  .videopanel button.play .disc { width: 62px; height: 62px; }
  .videopanel button.play .disc svg { width: 26px; height: 26px; }
  .videopanel button.play .label { font-size: 13px; }
}
@media print {
  /* a page cannot play a film: show the frame and print the address */
  .videopanel button.play { display: none; }
  .videopanel .frame { box-shadow: none; border: 1px solid #b9b094; }
  .videopanel .fallback { color: #4c4534; }
}

/* -------------------------------------------------------------- pullquote -- */
.pullquote { max-width: var(--measure); margin: 46px auto; text-align: center; padding: 4px 8px; position: relative; }
.pullquote::before {
  content: "\201C"; display: block; font-family: var(--serif); font-size: 4.2rem; line-height: .6;
  color: var(--brass); opacity: .55; margin-bottom: 6px;
}
.pullquote blockquote {
  margin: 0; font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem); line-height: 1.44; color: var(--accent-dark);
  border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  padding: 22px 6px;
}
.pullquote cite {
  display: block; font-family: var(--cond); font-style: normal; font-weight: 600;
  font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
  margin-top: 14px; padding-left: .22em;
}

/* ------------------------------------------------- sidebar — "field note" -- */
.sidebar {
  position: relative; max-width: var(--measure); margin: 34px auto;
  background: var(--sidebar-bg); border: 1px solid var(--frame-rule);
  border-left: 4px solid var(--accent); padding: 22px 26px 22px 24px;
  border-radius: 2px; box-shadow: var(--shadow-lift);
}
.sidebar::before {
  content: ""; position: absolute; top: 0; right: 0;
  border-width: 0 18px 18px 0; border-style: solid;
  border-color: var(--cream) var(--cream) var(--frame-rule) var(--frame-rule);
  box-shadow: -1px 1px 2px rgba(34,30,16,.12);
}
.sidebar h3 {
  font-family: var(--serif); font-weight: 600; color: var(--accent-dark);
  margin: 0 0 10px; font-size: 1.12rem; padding-right: 22px; line-height: 1.3;
}
.sidebar p { margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.66; }
.sidebar p + p { margin-top: 11px; }
.sidebar .src {
  display: block; margin-top: 12px; font-family: var(--sans); font-size: .78rem;
  color: var(--muted-2); font-style: italic; line-height: 1.5;
}
.sidebar .src a { color: var(--muted); }
/* A confidence tag, shown only where the research itself was not firm --
   so a reader can tell a documented fact from a well-supported reading. */
.conf-inline {
  font-family: var(--cond); font-size: .78em; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--frame-rule); border-radius: 3px; padding: 1px 6px 0;
  white-space: nowrap;
}
.sidebar h3 .conf {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  font-family: var(--cond); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); border: 1px solid var(--frame-rule);
  border-radius: 3px; padding: 1px 6px 0; position: relative; top: -1px;
}

/* ------------------------------------------------------------------ table -- */
.table-wrap { max-width: var(--wide); margin: 22px auto 36px; overflow-x: auto; }
table.record {
  width: 100%; border-collapse: collapse; font-size: .89rem; min-width: 580px;
  box-shadow: var(--shadow-lift); background: var(--mat);
}
table.record th {
  background: var(--khaki); color: #fff; font-family: var(--cond); font-weight: 600;
  font-size: .86rem; letter-spacing: .09em; text-transform: uppercase; text-align: left;
  padding: 11px 13px; border: 1px solid rgba(0,0,0,.18);
}
table.record td { padding: 11px 13px; border: 1px solid var(--frame-rule); vertical-align: top; color: var(--ink); }
table.record tr:nth-child(odd)  td { background: var(--cream-deep); }
table.record tr:nth-child(even) td { background: var(--mat); }
:root[data-theme="dark"] table.record tr:nth-child(even) td,
:root[data-theme="dark"] table.record tr:nth-child(odd)  td { background: var(--cream-deep); }
/* the same, for a dark system with the toggle never touched: --mat is
   deliberately light in dark mode, and --ink is light too, so an even row
   would print pale text on a pale ground */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) table.record tr:nth-child(even) td,
  :root:not([data-theme="light"]) table.record tr:nth-child(odd)  td
    { background: var(--cream-deep); }
  :root:not([data-theme="light"]) table.record { background: var(--cream-deep); }
}

/* ------------------------------------------------------------- transcript -- */
.transcript { max-width: var(--measure); margin: 8px auto 0; }
.t-line {
  display: flex; gap: 14px; padding: 11px 6px; align-items: flex-start;
  border-bottom: 1px solid var(--hairline); border-radius: 4px;
  transition: background .18s var(--ease);
  scroll-margin-top: 90px;
}
.t-line:hover { background: color-mix(in srgb, var(--cream-deep) 70%, transparent); }
.t-badge {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cond); font-weight: 600; font-size: 14px; color: #fff; margin-top: 2px;
  letter-spacing: .02em;
}
.t-line.allen     .t-badge { background: var(--accent-dark); }
.t-line.jeremy    .t-badge { background: var(--muted-2); }
.t-line.catherine .t-badge { background: var(--catherine); }
:root[data-theme="dark"] .t-badge { color: var(--khaki-deep); }
.t-body { flex: 1 1 auto; min-width: 0; }
.t-meta { display: flex; align-items: baseline; gap: 9px; margin-bottom: 3px; flex-wrap: wrap; }
.t-speaker { font-family: var(--cond); font-weight: 600; font-size: 14.5px; letter-spacing: .07em; text-transform: uppercase; }
.t-line.allen     .t-speaker { color: var(--accent-dark); }
.t-line.jeremy    .t-speaker { color: var(--muted-2); font-style: italic; }
.t-line.catherine .t-speaker { color: var(--catherine); }
.t-time {
  font-family: var(--sans); font-size: 11px; color: var(--muted-2);
  background: var(--cream-deep); padding: 2px 7px; border-radius: 9px; font-variant-numeric: tabular-nums;
}
.t-text { color: var(--ink); font-size: 1rem; line-height: 1.62; }
.t-line.jeremy .t-text { font-style: italic; color: var(--accent-dark); }
.t-text i { font-style: italic; opacity: .78; border-bottom: 1px dotted currentColor; }
.t-text mark {
  background: var(--brass-soft); color: var(--khaki-dark); border-radius: 2px; padding: 0 2px;
}

.transcript-note {
  max-width: var(--measure); margin: 6px auto 28px; font-family: var(--sans); font-size: .84rem;
  color: var(--muted-2); font-style: italic; text-align: center;
}

/* search-in-transcript */
.t-search {
  position: sticky; top: 62px; z-index: 40;
  max-width: var(--measure); margin: 0 auto 18px;
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--frame-rule); border-radius: 999px; padding: 7px 8px 7px 16px;
  box-shadow: var(--shadow-lift);
}
.t-search svg { width: 16px; height: 16px; color: var(--muted-2); flex: 0 0 auto; }
.t-search input {
  flex: 1 1 auto; border: none; background: transparent; font-family: var(--sans);
  font-size: .95rem; color: var(--ink); padding: 4px 0; min-width: 0;
}
.t-search input:focus { outline: none; }
.t-search input::placeholder { color: var(--muted-2); }
.t-search .t-count {
  font-family: var(--sans); font-size: .8rem; color: var(--muted-2);
  white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 6px;
}
.t-search button {
  border: 1px solid var(--frame-rule); background: var(--mat); color: var(--ink-soft);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 15px; line-height: 1; padding: 0;
}
.t-search button:hover { background: var(--cream-deep); color: var(--accent-dark); }
.t-line.t-hidden { display: none; }
.t-line.t-current { background: color-mix(in srgb, var(--brass-soft) 30%, transparent); }

/* ------------------------------------------------------------------- misc -- */
.divider-flourish { text-align: center; margin: 52px auto; max-width: var(--measure); }
.divider-flourish::before {
  content: ""; display: block; width: 110px; height: 1px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--frame-rule) 30%, var(--brass) 50%, var(--frame-rule) 70%, transparent);
}

/* ----------------------------------------------------- nav cards (index) -- */
.chapters { max-width: var(--wide); margin: 10px auto 76px; padding: 0 24px; }
.chapters h2 {
  font-family: var(--cond); font-size: 15px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent); text-align: center; margin: 0 0 36px; padding-left: .28em; font-weight: 600;
}
.chapter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 880px) { .chapter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 570px) { .chapter-grid { grid-template-columns: 1fr; } }
.chapter-card {
  position: relative; display: block; text-decoration: none; background: var(--mat);
  border: 1px solid var(--frame-rule); border-radius: 6px; padding: 28px 24px 26px;
  box-shadow: var(--shadow-lift); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.chapter-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brass); transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.chapter-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-deep); border-color: var(--brass-soft); }
.chapter-card:hover::before { transform: scaleY(1); }
.chapter-card .num {
  font-family: var(--cond); font-size: 13px; letter-spacing: .2em; color: var(--brass);
  font-weight: 600; text-transform: uppercase;
}
.chapter-card h3 { font-family: var(--serif); font-size: 1.24rem; color: var(--accent-dark); margin: 9px 0 9px; font-weight: 600; }
.chapter-card p { font-family: var(--sans); font-size: .87rem; color: var(--muted); margin: 0; line-height: 1.6; }
:root[data-theme="dark"] .chapter-card { background: var(--cream-deep); }
:root[data-theme="dark"] .chapter-card h3 { color: var(--accent-dark); }

/* ------------------------------------------------------------ page footer -- */
.chapter-pager {
  max-width: var(--measure); margin: 66px auto 0; padding: 28px 0 0;
  border-top: 1px solid var(--frame-rule); display: flex; justify-content: space-between; gap: 18px;
}
.chapter-pager a {
  font-family: var(--sans); font-size: .88rem; text-decoration: none; color: var(--accent-dark);
  display: flex; flex-direction: column; max-width: 46%;
  transition: transform .2s var(--ease);
}
.chapter-pager a:hover { transform: translateY(-2px); }
.chapter-pager a.next { text-align: right; margin-left: auto; }
.chapter-pager .pager-label {
  font-family: var(--cond); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 4px;
}
.chapter-pager .pager-title { font-family: var(--serif); font-size: 1.08rem; }

footer.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--khaki-deep); color: #C3BB9A; text-align: center;
  padding: 52px 24px 46px; margin-top: 70px;
}
footer.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(ellipse 70% 90% at 50% -30%, rgba(178,150,68,.18), transparent 62%),
    linear-gradient(0deg, var(--khaki-deep), var(--khaki-dark-2));
}
footer.site-footer img { width: 52px; margin: 0 auto 18px; filter: drop-shadow(0 5px 12px rgba(0,0,0,.5)); }
footer.site-footer .name { font-family: var(--serif); font-size: 1.28rem; color: #FBF7EC; margin-bottom: 5px; font-weight: 600; }
footer.site-footer .dates { font-size: .88rem; margin-bottom: 16px; color: #DDD5B4; }
footer.site-footer .quote { font-style: italic; font-size: .99rem; max-width: 460px; margin: 0 auto 18px; color: #E3DCBD; }
footer.site-footer .credit { font-family: var(--sans); font-size: .8rem; color: #9D9578; }
footer.site-footer .credit + .credit { margin-top: 5px; }
footer.site-footer a { color: #DDD5B4; }

/* ------------------------------------------------------------ back to top -- */
#totop {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--frame-rule); background: var(--mat); color: var(--accent-dark);
  display: grid; place-items: center; box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
#totop.show { opacity: 1; visibility: visible; transform: none; }
#totop:hover { background: var(--cream-deep); }
#totop svg { width: 18px; height: 18px; }
@media (max-width: 640px) { #totop { right: 14px; bottom: 14px; width: 40px; height: 40px; } }

/* --------------------------------------------------------------- lightbox -- */
#lightbox {
  position: fixed; inset: 0; background: rgba(12,12,8,.96); z-index: 1000;
  display: none; align-items: center; justify-content: center; padding: 28px 28px 20px;
  flex-direction: column; opacity: 0; transition: opacity .22s var(--ease);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#lightbox.open { display: flex; }
#lightbox.shown { opacity: 1; }
#lightbox img {
  max-width: 94vw; max-height: 76vh; box-shadow: 0 24px 70px rgba(0,0,0,.65);
  background: #0c0c08; transition: transform .25s var(--ease), max-width .25s var(--ease), max-height .25s var(--ease);
}
#lightbox.zoomed img { max-width: none; max-height: none; cursor: grab; }
#lightbox.zoomed { overflow: auto; align-items: flex-start; }
#lightbox .lb-cap {
  color: #E7E1CC; font-family: var(--sans); font-size: .9rem; max-width: 760px;
  text-align: center; margin-top: 18px; font-style: italic; line-height: 1.6;
}
#lightbox .lb-counter {
  position: absolute; top: 24px; left: 28px; color: #B9B196; font-family: var(--cond);
  font-size: 15px; letter-spacing: .16em; font-variant-numeric: tabular-nums;
}
#lightbox .lb-close {
  position: absolute; top: 18px; right: 22px; background: rgba(255,255,255,.07);
  border: none; color: #fff; width: 42px; height: 42px; border-radius: 50%;
  font-size: 26px; cursor: pointer; line-height: 1; opacity: .85;
  display: grid; place-items: center;
}
#lightbox .lb-close:hover { opacity: 1; background: rgba(255,255,255,.18); }
#lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.08);
  border: none; color: #fff; font-size: 24px; width: 54px; height: 54px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease);
}
#lightbox .lb-nav:hover { background: rgba(255,255,255,.2); }
#lightbox .lb-prev { left: 20px; }
#lightbox .lb-next { right: 20px; }
#lightbox .lb-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--cond); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(185,177,150,.65); white-space: nowrap;
}
@media (max-width: 680px) {
  #lightbox .lb-nav { width: 44px; height: 44px; font-size: 19px; }
  #lightbox .lb-prev { left: 8px; } #lightbox .lb-next { right: 8px; }
  #lightbox .lb-hint { display: none; }
  #lightbox img { max-height: 66vh; }
}

/* ------------------------------------------------------------ print / PDF -- */
@media print {
  :root {
    --cream: #fff; --cream-deep: #F4EFE1; --mat: #fff;
    --ink: #17170f; --ink-soft: #2e2e22; --muted: #4c4534;
  }
  html { scroll-behavior: auto; }
  body {
    background: #fff !important; background-image: none !important;
    font-size: 10.6pt; line-height: 1.5; color: #17170f;
  }
  @page { size: Letter; margin: 15mm 16mm 17mm; }
  .sitenav, #progress, #lightbox, .chapter-pager, #totop, .t-search,
  .hero-scroll, .themetoggle, .navtoggle, .skip-link { display: none !important; }

  .hero, .chapter-banner, footer.site-footer {
    background: #21241A !important; color: #F5F0DF !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    break-inside: avoid;
  }
  .hero::before, .hero::after, .chapter-banner::before, footer.site-footer::before { display: none; }
  .hero { padding: 34px 20px 28px; break-after: avoid; }
  .chapter-banner { padding: 30px 20px 26px; break-before: page; break-after: avoid; }
  .content, .content-wide, .gallery, .transcript, .sidebar, .pullquote { max-width: 100%; }
  .content { padding: 20px 0 0; }

  figure.photo, figure.gallery-cell, .sidebar, .pullquote, table.record, .chapter-card {
    break-inside: avoid; opacity: 1 !important; transform: none !important;
  }
  figure.photo { margin: 14pt auto; }
  figure.photo .mat, .gallery-cell .mat { box-shadow: none; border: 1px solid #b9b094; padding: 5px; }
  figure.photo .mat img { max-height: 46vh; }
  .gallery-grid { gap: 10pt 9pt; }
  .section-header { margin: 22pt 0 9pt; break-after: avoid; }
  .section-header h2, h2.subhead, .chapters h2 { break-after: avoid; }
  .sidebar { background: #F4EFE1 !important; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sidebar::before { display: none; }
  .t-line { break-inside: avoid; padding: 5pt 0; }
  .t-line:hover { background: none; }
  .chapters { break-before: page; }
  a { color: #24314a; text-decoration: none; }
}
/* ------------------------------------------------- a letter, as he wrote it -- */
/* Used only for text Allen himself wrote. It is set apart from the document's own
   voice and from the interview transcript: ruled paper rather than a speech bubble,
   with the dateline ranged right the way he typed it and the signature under it. */
.letter {
  margin: 30px 0 34px;
  padding: 26px 30px 22px;
  background: var(--mat);
  border: 1px solid var(--frame-rule);
  border-left: 3px solid var(--brass);
  box-shadow: var(--shadow-lift);
  color: var(--khaki-dark);
  font-size: 17.4px;
  line-height: 1.78;
}
.letter .dateline {
  text-align: right;
  font-family: var(--cond);
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0 0 4px;
}
.letter .salutation { margin: 0 0 12px; font-weight: 600; }
.letter p { margin: 0 0 13px; text-indent: 1.4em; }
.letter p.salutation, .letter p.dateline { text-indent: 0; }
.letter p:last-of-type { margin-bottom: 0; }
.letter .signature {
  text-align: right;
  margin: 16px 0 0;
  text-indent: 0;
  font-weight: 600;
}
.letter .provenance {
  display: block;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--frame-rule);
  font-family: var(--sans);
  font-size: 13.2px;
  line-height: 1.6;
  color: var(--muted);
}
@media (max-width: 640px) { .letter { padding: 20px 18px 18px; font-size: 16.6px; } }
@media print {
  .letter { box-shadow: none; background: transparent; border: 1px solid #b9b094;
            break-inside: avoid; }
  .letter .provenance { color: #4c4534; }
}

/* ------------------------------------------------------------- charts ---- */
/* ---- charts ---- */
/* The plates are inline SVG, not images, so they stay crisp at any size, theme
   with the page, and print without a resampling step. Nothing here paints in a
   presentation attribute: var() is invalid in those, so every fill and stroke is
   a class and the whole drawing follows the page's own tokens. */
:root {
  --map-land:  color-mix(in srgb, var(--khaki) 16%, var(--cream));
  --map-coast: color-mix(in srgb, var(--khaki) 55%, var(--cream));
  --tl-rail:   var(--frame-rule);
  --tl-grid:   var(--hairline);
}

.plate { display: block; width: 100%; height: auto; }
.plate text { font-family: var(--cond); fill: var(--ink); }

/* base map */
.map-sea   { fill: none; }
.map-land  { fill: var(--map-land); stroke: var(--map-coast); stroke-width: .7;
             stroke-linejoin: round; }
.map-state { fill: none; stroke: var(--map-coast); stroke-width: .5; opacity: .55; }
.map-grat  { fill: none; stroke: var(--tl-grid); stroke-width: .6; }
.map-frame { fill: none; stroke: var(--frame-rule); stroke-width: 1; }
.map-grat-label { font-size: 13px; fill: var(--muted-2); letter-spacing: .04em; }
.map-caveat { font-size: 14.5px; fill: var(--muted); font-family: var(--serif);
              font-style: italic; }

/* a place, and everything that belongs to it, in one translated group */
.mk-him     { fill: var(--ink); stroke: var(--cream); stroke-width: 1.2; }
.mk-grp     { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; }
.mk-sqn     { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; }
.mk-sqn-tick{ fill: none; stroke: var(--ink-soft); stroke-width: 1.2; }
.mk-inf     { fill: none; stroke: var(--muted); stroke-width: 1.4;
              stroke-dasharray: 3 2.5; }
.mk-absent  { fill: none; stroke: var(--brass); stroke-width: 1.6; }
.pl-lead    { fill: none; stroke: var(--frame-rule); stroke-width: 1; }
.pl-name    { font-family: var(--serif); font-weight: 600; font-size: 22px;
              fill: var(--ink); paint-order: stroke; stroke: var(--cream);
              stroke-width: 3.5px; stroke-linejoin: round; }
.pl-date    { font-size: 17px; fill: var(--muted); paint-order: stroke;
              stroke: var(--cream); stroke-width: 3px; stroke-linejoin: round; }
.pl-note    { font-size: 16px; fill: var(--accent); font-style: italic;
              font-family: var(--serif); paint-order: stroke; stroke: var(--cream);
              stroke-width: 3px; stroke-linejoin: round; }
.pl-absent  { font-size: 12px; fill: var(--brass); letter-spacing: .1em;
              paint-order: stroke; stroke: var(--cream); stroke-width: 3px; }

/* journeys: the stroke says how well the means of travel is known */
.leg          { fill: none; stroke-linecap: round; }
.leg-recorded { stroke: var(--ink);    stroke-width: 2; }
.leg-unknown  { stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 6 4; }
.leg-memory   { stroke: var(--muted);  stroke-width: 1.6; stroke-dasharray: 1.5 3.5; }
.leg-assumed  { stroke: var(--brass);  stroke-width: 1.8; stroke-dasharray: 2 4; }
.chev          { fill: none; stroke-width: 1.8; stroke-linecap: round;
                 stroke-linejoin: round; }
.chev-recorded { stroke: var(--ink); }
.chev-unknown  { stroke: var(--accent); }
.chev-memory   { stroke: var(--muted); }
.leg-label    { font-size: 16px; fill: var(--ink-soft); paint-order: stroke;
                stroke: var(--cream); stroke-width: 3.5px; stroke-linejoin: round; }

/* plate furniture */
.pl-kicker { font-size: 13.5px; letter-spacing: .24em; fill: var(--brass); }
.pl-title  { font-family: var(--serif); font-weight: 600; font-size: 23px;
             fill: var(--ink); }
.pl-sub    { font-size: 16px; fill: var(--muted); font-family: var(--serif);
             font-style: italic; }
.sc-bar    { fill: none; stroke: var(--brass); stroke-width: 1.4; }
.sc-label  { font-size: 12.5px; fill: var(--muted); letter-spacing: .08em; }
.key-box   { fill: color-mix(in srgb, var(--cream) 82%, transparent);
             stroke: var(--frame-rule); stroke-width: 1; }
.key-label { font-size: 13px; fill: var(--ink-soft); }

/* ---- the timeline plates ---- */
/* How a fact is known is the first thing the drawing says, because that is what
   this document is for. Fill carries it, and for anything he remembered in 2006
   the title is also set in italic -- the one channel a photocopier cannot
   flatten. */
.tl-rail      { stroke: var(--tl-rail); stroke-width: 1.5; fill: none; }
.tl-year-rule { stroke: var(--tl-grid); stroke-width: .6; fill: none; }
.tl-year      { font-size: 13px; fill: var(--muted-2); letter-spacing: .06em; }
.tl-tie       { stroke: var(--frame-rule); stroke-width: 1; fill: none; }
.tl-rank      { stroke: var(--brass); stroke-width: 2.2; fill: none;
                stroke-linejoin: round; opacity: .75; }

.tl-mark        { stroke-width: 1.5; }
.tl-bar         { stroke-linecap: butt; stroke-width: 5; fill: none; }
.tl-record      { fill: var(--ink);    stroke: var(--ink); }
.tl-unit        { fill: var(--ink-soft); stroke: var(--ink-soft); }
.tl-press       { fill: var(--accent); stroke: var(--accent); }
.tl-letter      { fill: var(--brass);  stroke: var(--brass); }
.tl-memory      { fill: none;          stroke: var(--accent); stroke-width: 1.8; }
.tl-family      { fill: none;          stroke: var(--muted);  stroke-width: 1.5;
                  stroke-dasharray: 3 2.5; }
.tl-bar.tl-memory { stroke: var(--accent); }
.tl-bar.tl-family { stroke: var(--muted); }

.tl-date   { font-size: 13px; fill: var(--muted); letter-spacing: .05em; }
.tl-title  { font-family: var(--serif); font-weight: 600; font-size: 17px;
             fill: var(--ink); }
.tl-title.tl-remembered { font-style: italic; font-weight: 500; }
.tl-detail { font-family: var(--serif); font-size: 14px; fill: var(--muted); }

.tl-stick-bar   { stroke: var(--brass); stroke-width: 1.4; fill: none; }
.tl-stick-label { font-size: 12px; fill: var(--muted); letter-spacing: .06em; }

@media print {
  .tl-year-rule { stroke: #d8d0b8; }
  .tl-detail, .tl-date { fill: #5c5442; }
}

/* the figure that holds a plate is not a photograph: no mat, no lightbox */
/* margin-block, NOT the margin shorthand: photo-full centres its breakout with
   margin-left: calc(50% - var(--bo)/2), and a shorthand here silently resets
   that to zero and pushes the plate off the right of the page. */
figure.chartplate { margin-block: 34px 30px; }
figure.chartplate .plate { background: transparent; }
figure.chartplate figcaption { margin-top: 12px; }
.chartplate svg { max-height: none; }

/* A plate is drawn 840 units wide. Squeezed into a phone it renders its labels
   at five or six pixels: a picture of a timeline rather than a timeline you can
   read. Below tablet width the drawing keeps a legible size and the figure
   scrolls instead, which is the same bargain .table-wrap already makes for a
   wide table. Scoped to screen so the paged edition is untouched. */
@media screen and (max-width: 860px) {
  figure.chartplate { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  figure.chartplate > .plate { min-width: 760px; }
  /* the caption and the key describe the drawing, so they stay put while it pans */
  figure.chartplate figcaption,
  figure.chartplate details.chart-key { position: sticky; left: 0; max-width: calc(100vw - 48px); }
}

/* the drawing, set out in words, always in the DOM */
details.chart-key {
  margin: 10px 0 0; padding: 10px 14px; border: 1px solid var(--frame-rule);
  border-radius: 3px; background: var(--cream-deep);
  font-family: var(--sans); font-size: 14.5px; line-height: 1.65; color: var(--ink-soft);
}
details.chart-key summary { cursor: pointer; font-family: var(--cond);
  letter-spacing: .08em; text-transform: uppercase; font-size: 13px;
  color: var(--muted); }
details.chart-key ol, details.chart-key ul { margin: 10px 0 0 18px; padding: 0; }
details.chart-key li { margin: 0 0 5px; }
@media (max-width: 640px) { details.chart-key { --open: 1; } }

@media print {
  /* a multi-panel plate must be allowed to paginate; thrown whole onto one page
     it is shrunk to illegibility */
  figure.chartplate { break-inside: auto; }
  figure.chartplate .plate { break-inside: avoid; }
  /* the breakout resolves against the paged box and drags the margin inwards */
  figure.photo-full.chartplate { width: 100%; margin-left: 0; margin-right: 0; }
  .map-caveat, details.chart-key { color: #4c4534; }
  details.chart-key { display: block; }
  details.chart-key > * { display: revert; }
}