/* ==========================================================================
   VERWOLF FAMILY — HOUSE STYLE
   static/css/verwolf.css

   A single stylesheet. No build step, no Tailwind, no CDN. Drop it in
   static/css/ and load it once from your base template:

       {% load static %}
       <link rel="stylesheet" href="{% static 'css/verwolf.css' %}">

   Design origin
   -------------
   Three Dutch sources, deliberately mixed:

     1. Golden Age painting — the palette. Aged vellum ground, lead-white
        highlights, madder red, ochre, verdigris, and the deep blue of
        Delftware. Warm, saturated, low-key. Not pastel.
     2. De Stijl — the structure. Black hairlines and heavy black bars
        dividing asymmetric blocks; flat planes of primary colour used as
        weight, never as decoration.
     3. Dutch cartography — the ornament. Hatched borders, tile motifs,
        small-caps labelling, compass marks between sections.

   Layout intent
   -------------
   Built for BOUNDED PANES, not an endless scroll. `.vw-shell` fills the
   viewport exactly; `.vw-pane` scrolls internally if it must. See §8.

   Sections
   --------
     §1  Tokens
     §2  Reset & base
     §3  Typography
     §4  Rules, bars & ornament
     §5  Surfaces
     §6  Controls
     §7  Content components
     §8  Layout primitives (bounded panes)
     §9  Utilities
     §10 Motion & print
   ========================================================================== */


/* ==========================================================================
   §1  TOKENS
   Change colour here and nowhere else.
   ========================================================================== */

:root {

  /* ---- Ground & paper ---------------------------------------------------
     Vellum is the page. Paper is anything raised off it. Bright paper is
     for the one element on screen that should feel freshly printed. */
  --vw-vellum:        #E9DCC3;
  --vw-vellum-deep:   #DCCBA9;   /* recessed wells, table stripes */
  --vw-vellum-shade:  #D2BF9B;   /* the shadow side of a fold */
  --vw-paper:         #F6EEDD;
  --vw-paper-bright:  #FCF8EF;

  /* ---- Ink -------------------------------------------------------------- */
  --vw-ink:           #17130F;   /* headings, body */
  --vw-ink-soft:      #4A4038;   /* secondary body */
  --vw-ink-faint:     #675B4E;   /* captions, metadata — still AA on vellum */

  /* ---- Pigments ---------------------------------------------------------
     Delft is the primary. Madder is emphasis and alarm. Ochre is WEIGHT
     ONLY — it fails contrast as text; use --vw-ochre-ink when you need
     letters. Verdigris is the quiet third. */
  --vw-delft:         #1F4E8C;
  --vw-delft-deep:    #14315A;
  --vw-delft-pale:    #B9CBE2;
  --vw-delft-wash:    #E2E9F2;

  --vw-madder:        #9E2B25;
  --vw-madder-deep:   #6E1C18;
  --vw-madder-wash:   #F0DBD7;

  --vw-ochre:         #C98A21;
  --vw-ochre-ink:     #8A5A0F;
  --vw-ochre-wash:    #F4E4C6;

  --vw-verdigris:     #3F6B5B;
  --vw-verdigris-wash:#DDE7E1;

  /* ---- Lines ------------------------------------------------------------ */
  --vw-rule:          #C4B394;   /* ordinary hairline */
  --vw-rule-strong:   #A8926B;   /* hairline that must be seen */
  --vw-rule-black:    #17130F;   /* De Stijl bar */

  /* ---- Type -------------------------------------------------------------
     System stacks only, so nothing to self-host and nothing to fetch.
     If you later license a real Dutch old-style face (Van Dijck, DTL
     Fleischmann, Spectral), add @font-face above and prepend it here —
     the rest of the sheet needs no change. */
  --vw-face-display:  "Hoefler Text", "Baskerville Old Face", Baskerville,
                      "Palatino Linotype", Palatino, "Book Antiqua",
                      Georgia, serif;
  --vw-face-text:     "Iowan Old Style", "Palatino Linotype", Palatino,
                      "Book Antiqua", Georgia, "Times New Roman", serif;
  --vw-face-label:    Futura, "Century Gothic", "Avenir Next", Avenir,
                      "Trebuchet MS", "Segoe UI", sans-serif;
  --vw-face-mono:     "Iosevka", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid scale. Ratio 1.26 at the small end, opening to 1.33 at the top. */
  --vw-t-xs:    0.72rem;
  --vw-t-sm:    0.86rem;
  --vw-t-base:  1.0625rem;
  --vw-t-md:    clamp(1.18rem, 0.4vw + 1.08rem, 1.32rem);
  --vw-t-lg:    clamp(1.45rem, 0.8vw + 1.25rem, 1.75rem);
  --vw-t-xl:    clamp(1.85rem, 1.4vw + 1.5rem, 2.45rem);
  --vw-t-2xl:   clamp(2.4rem,  2.6vw + 1.7rem,  3.6rem);
  --vw-t-3xl:   clamp(3.1rem,  4.6vw + 1.9rem,  5.6rem);

  --vw-lh-tight: 1.06;
  --vw-lh-snug:  1.28;
  --vw-lh-body:  1.62;

  /* ---- Space — a 4px base, named so templates read clearly -------------- */
  --vw-s-1: 0.25rem;
  --vw-s-2: 0.5rem;
  --vw-s-3: 0.75rem;
  --vw-s-4: 1rem;
  --vw-s-5: 1.5rem;
  --vw-s-6: 2rem;
  --vw-s-7: 3rem;
  --vw-s-8: 4.5rem;

  /* ---- Edges ------------------------------------------------------------
     Near-square throughout. The only curve in the system is a full circle
     on tokens and compass marks. */
  --vw-edge: 2px;

  /* ---- Depth ------------------------------------------------------------
     Warm shadows only. Grey shadow on vellum reads as dirt. */
  --vw-lift-1: 0 1px 0 var(--vw-vellum-shade);
  --vw-lift-2: 0 1px 0 var(--vw-vellum-shade),
               0 10px 20px -14px rgba(60, 40, 20, 0.45);
  --vw-lift-3: 0 1px 0 var(--vw-vellum-shade),
               0 22px 40px -26px rgba(60, 40, 20, 0.6);

  --vw-measure: 34rem;   /* comfortable line length for running text */
}


/* ==========================================================================
   §2  RESET & BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

/* The fluid scale in §1 is driven by vw, so it grows with viewport width and
   sits at its largest clamp() value on an ordinary desktop monitor — reading
   oversized there — while the same tokens land near their smaller minimum
   on a phone and look right as-is. Scale the whole rem-based system down a
   notch only above the shell's own desktop breakpoint (§8), rather than
   touching type/space tokens individually or affecting mobile. */
@media (min-width: 60rem) {
  html { font-size: 85%; }
}

body {
  margin: 0;
  background-color: var(--vw-vellum);
  color: var(--vw-ink);
  font-family: var(--vw-face-text);
  font-size: var(--vw-t-base);
  line-height: var(--vw-lh-body);
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Linen weave. Two crossed gradients at very low alpha plus a speckle,
     so the ground has tooth without turning into a pattern you notice. */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(120, 96, 62, 0.045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,
      rgba(120, 96, 62, 0.038) 0 1px, transparent 1px 4px),
    radial-gradient(rgba(120, 96, 62, 0.05) 1px, transparent 1px);
  background-size: 4px 4px, 4px 4px, 19px 19px;
}

img, svg, video { display: block; max-width: 100%; }

::selection { background: var(--vw-delft); color: var(--vw-paper-bright); }

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


/* ==========================================================================
   §3  TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--vw-face-display);
  font-weight: 600;
  line-height: var(--vw-lh-tight);
  letter-spacing: -0.015em;
  margin: 0 0 var(--vw-s-4);
  text-wrap: balance;
}

h1 { font-size: var(--vw-t-3xl); letter-spacing: -0.028em; }
h2 { font-size: var(--vw-t-2xl); letter-spacing: -0.022em; }
h3 { font-size: var(--vw-t-xl); }
h4 { font-size: var(--vw-t-lg); line-height: var(--vw-lh-snug); }
h5 { font-size: var(--vw-t-md); line-height: var(--vw-lh-snug); }

p { margin: 0 0 var(--vw-s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--vw-delft);
  text-decoration-color: var(--vw-delft-pale);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--vw-delft-deep);
  text-decoration-color: currentColor;
}

strong, b { font-weight: 700; }
em, i { font-style: italic; }

small { font-size: var(--vw-t-sm); }

abbr[title] { text-decoration: underline dotted var(--vw-rule-strong); }

/* -- The house title. Two lines, second in madder italic. ------------------ */
.vw-title {
  font-family: var(--vw-face-display);
  font-size: var(--vw-t-3xl);
  line-height: 0.94;
  letter-spacing: -0.03em;
  margin: 0;
}
.vw-title em {
  display: block;
  font-style: italic;
  color: var(--vw-madder);
}

/* -- Small-caps label. The workhorse of the system. ----------------------- */
.vw-label {
  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  line-height: 1.4;
  color: var(--vw-ink-faint);
}
.vw-label--delft  { color: var(--vw-delft); }
.vw-label--madder { color: var(--vw-madder); }
.vw-label--ochre  { color: var(--vw-ochre-ink); }

/* -- Lede. One per pane, directly under the heading. ---------------------- */
.vw-lede {
  font-size: var(--vw-t-md);
  line-height: 1.55;
  color: var(--vw-ink-soft);
  max-width: var(--vw-measure);
}

/* -- Running text at a fixed measure ------------------------------------- */
.vw-prose { max-width: var(--vw-measure); }
.vw-prose > * + * { margin-top: var(--vw-s-4); }

/* -- Numerals set for reading in tables and stats ------------------------ */
.vw-figure {
  font-family: var(--vw-face-display);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--vw-t-2xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.vw-caption {
  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  letter-spacing: 0.06em;
  color: var(--vw-ink-faint);
}


/* ==========================================================================
   §4  RULES, BARS & ORNAMENT
   The De Stijl layer. Black is structural — use it to divide, never to fill
   large areas.
   ========================================================================== */

/* Ordinary hairline */
.vw-rule {
  border: 0;
  border-top: 1px solid var(--vw-rule);
  margin: var(--vw-s-6) 0;
}

/* The heavy bar. Black, 5px, full bleed within its column. */
.vw-bar {
  border: 0;
  height: 5px;
  background: var(--vw-rule-black);
  margin: var(--vw-s-5) 0;
}

/* Bar with a coloured stub at the left — the signature divider.
   <hr class="vw-bar-stub"> */
.vw-bar-stub {
  border: 0;
  height: 5px;
  margin: var(--vw-s-5) 0;
  background:
    linear-gradient(to right,
      var(--vw-madder)  0 3.5rem,
      var(--vw-ochre)   3.5rem 5rem,
      var(--vw-rule-black) 5rem 100%);
}

/* Hatched border, as on an old chart's neat line. Apply to a container. */
.vw-hatch {
  border: 1px solid var(--vw-ink);
  padding: var(--vw-s-1);
  background-image: repeating-linear-gradient(
    45deg,
    var(--vw-ink) 0 1px,
    transparent 1px 6px
  );
  background-position: 0 0;
  background-size: 100% 100%;
}
.vw-hatch > * { background: var(--vw-paper); }

/* Compass mark between sections. <div class="vw-compass"></div> */
.vw-compass {
  display: flex;
  align-items: center;
  gap: var(--vw-s-4);
  margin: var(--vw-s-7) 0;
  color: var(--vw-delft);
}
.vw-compass::before,
.vw-compass::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--vw-rule);
}
.vw-compass::before { background: linear-gradient(to right, transparent, var(--vw-rule)); }
.vw-compass::after  { background: linear-gradient(to left,  transparent, var(--vw-rule)); }
.vw-compass span {
  width: 13px; height: 13px;
  background: currentColor;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

/* Delft tile motif, as a repeating top border on a panel.
   Inline SVG data URI — no asset to ship. */
.vw-tilestrip {
  height: 30px;
  background-color: var(--vw-delft-wash);
  border-top: 1px solid var(--vw-delft-pale);
  border-bottom: 1px solid var(--vw-delft-pale);
  background-repeat: repeat-x;
  background-position: center;
  background-size: 44px 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cg fill='%231F4E8C'%3E%3Cellipse cx='22' cy='10.5' rx='2.5' ry='4.2'/%3E%3Cellipse cx='22' cy='19.5' rx='2.5' ry='4.2'/%3E%3Cellipse cx='17.5' cy='15' rx='4.2' ry='2.5'/%3E%3Cellipse cx='26.5' cy='15' rx='4.2' ry='2.5'/%3E%3C/g%3E%3Ccircle cx='22' cy='15' r='1.6' fill='%23E2E9F2'/%3E%3Cg fill='%231F4E8C' opacity='.55'%3E%3Cpath d='M0 15 3 12 6 15 3 18Z'/%3E%3Cpath d='M44 15 41 12 38 15 41 18Z'/%3E%3C/g%3E%3Cg stroke='%231F4E8C' stroke-width='.9' opacity='.4'%3E%3Cpath d='M7.5 15h6'/%3E%3Cpath d='M30.5 15h6'/%3E%3C/g%3E%3C/svg%3E");
}


/* ==========================================================================
   §5  SURFACES
   ========================================================================== */

/* The standard raised panel. */
.vw-panel {
  background: var(--vw-paper);
  border: 1px solid var(--vw-rule);
  border-radius: var(--vw-edge);
  box-shadow: var(--vw-lift-2);
  padding: var(--vw-s-6);
}
.vw-panel--bright { background: var(--vw-paper-bright); }
.vw-panel--flush  { padding: 0; overflow: hidden; }
.vw-panel--quiet  { box-shadow: var(--vw-lift-1); }

/* Panel keyed to a pigment by a thick left edge. */
.vw-panel--delft     { border-left: 6px solid var(--vw-delft); }
.vw-panel--madder    { border-left: 6px solid var(--vw-madder); }
.vw-panel--ochre     { border-left: 6px solid var(--vw-ochre); }
.vw-panel--verdigris { border-left: 6px solid var(--vw-verdigris); }

/* A recessed well — for anything set INTO the page rather than onto it. */
.vw-well {
  background: var(--vw-vellum-deep);
  border: 1px solid var(--vw-rule-strong);
  border-radius: var(--vw-edge);
  box-shadow: inset 0 2px 6px -3px rgba(60, 40, 20, 0.5);
  padding: var(--vw-s-5);
}

/* Photographic plate: a print with a caption ledge beneath. */
.vw-plate {
  background: var(--vw-paper-bright);
  border: 1px solid var(--vw-rule);
  border-radius: var(--vw-edge);
  box-shadow: var(--vw-lift-2);
  padding: 10px 10px 0;
  display: inline-block;
}
.vw-plate img,
.vw-plate svg { border: 1px solid rgba(23, 19, 15, 0.14); width: 100%; }
.vw-plate figcaption {
  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  letter-spacing: 0.06em;
  color: var(--vw-ink-faint);
  padding: var(--vw-s-3) 2px var(--vw-s-4);
}
/* Tilt modifiers — apply sparingly, two on a screen at most. */
.vw-plate--tilt-l { transform: rotate(-1.6deg); }
.vw-plate--tilt-r { transform: rotate(1.4deg); }


/* ==========================================================================
   §6  CONTROLS
   ========================================================================== */

.vw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vw-s-2);
  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--vw-ink);
  border-radius: var(--vw-edge);
  background: transparent;
  color: var(--vw-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease,
              border-color 120ms ease, transform 90ms ease;
}
.vw-btn:hover { background: var(--vw-vellum-deep); }
.vw-btn:active { transform: translateY(1px); }

.vw-btn--primary {
  background: var(--vw-delft);
  border-color: var(--vw-delft);
  color: var(--vw-paper-bright);
}
.vw-btn--primary:hover { background: var(--vw-delft-deep); border-color: var(--vw-delft-deep); }

.vw-btn--madder {
  background: var(--vw-madder);
  border-color: var(--vw-madder);
  color: var(--vw-paper-bright);
}
.vw-btn--madder:hover { background: var(--vw-madder-deep); border-color: var(--vw-madder-deep); }

.vw-btn--ghost { border-color: var(--vw-rule-strong); color: var(--vw-ink-soft); }
.vw-btn--ghost:hover { border-color: var(--vw-ink); color: var(--vw-ink); }

.vw-btn--sm { padding: 0.6rem 1rem; letter-spacing: 0.14em; }

.vw-btn[disabled], .vw-btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none;
}

/* -- Fields --------------------------------------------------------------- */
.vw-field { display: block; margin-bottom: var(--vw-s-4); }
.vw-field > .vw-label { display: block; margin-bottom: var(--vw-s-2); }

.vw-input,
.vw-select,
.vw-textarea {
  width: 100%;
  font-family: var(--vw-face-text);
  font-size: var(--vw-t-base);
  color: var(--vw-ink);
  background: var(--vw-paper-bright);
  border: 1px solid var(--vw-rule-strong);
  border-bottom-width: 2px;
  border-radius: var(--vw-edge);
  padding: 0.62rem 0.75rem;
}
.vw-input::placeholder, .vw-textarea::placeholder { color: var(--vw-ink-faint); opacity: 0.75; }
.vw-input:focus, .vw-select:focus, .vw-textarea:focus {
  border-color: var(--vw-delft);
  outline: none;
  box-shadow: 0 0 0 3px var(--vw-delft-wash);
}
.vw-textarea { min-height: 7rem; resize: vertical; }

/* Django form errors */
.vw-field--error .vw-input,
.vw-field--error .vw-select,
.vw-field--error .vw-textarea { border-color: var(--vw-madder); }
.vw-error {
  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  letter-spacing: 0.08em;
  color: var(--vw-madder);
  margin-top: var(--vw-s-2);
}
.vw-help { font-size: var(--vw-t-sm); color: var(--vw-ink-faint); margin-top: var(--vw-s-2); }

/* -- Segmented switch (RSVP, filters) ------------------------------------- */
.vw-segment { display: inline-flex; border: 1px solid var(--vw-ink); border-radius: var(--vw-edge); overflow: hidden; }
.vw-segment > button {
  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.7rem 1.15rem;
  border: 0;
  border-right: 1px solid var(--vw-ink);
  background: transparent;
  color: var(--vw-ink-soft);
  cursor: pointer;
}
.vw-segment > button:last-child { border-right: 0; }
.vw-segment > button:hover { background: var(--vw-vellum-deep); }
.vw-segment > button[aria-pressed="true"],
.vw-segment > button.is-on { background: var(--vw-ink); color: var(--vw-paper-bright); }


/* ==========================================================================
   §7  CONTENT COMPONENTS
   ========================================================================== */

/* -- Chip / tag ----------------------------------------------------------- */
.vw-chip {
  display: inline-block;
  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--vw-rule-strong);
  border-radius: var(--vw-edge);
  background: var(--vw-vellum-deep);
  color: var(--vw-ink-soft);
}
.vw-chip--delft     { background: var(--vw-delft-wash);     border-color: var(--vw-delft-pale); color: var(--vw-delft-deep); }
.vw-chip--madder    { background: var(--vw-madder-wash);    border-color: #D9B4AF; color: var(--vw-madder-deep); }
.vw-chip--ochre     { background: var(--vw-ochre-wash);     border-color: #DCC08A; color: var(--vw-ochre-ink); }
.vw-chip--verdigris { background: var(--vw-verdigris-wash); border-color: #AFC6BB; color: var(--vw-verdigris); }

/* -- Drop cap set in a Delft tile ----------------------------------------- */
.vw-dropcap::first-letter {
  float: left;
  font-family: var(--vw-face-display);
  font-size: 3.9em;
  line-height: 0.78;
  font-weight: 600;
  margin: 0.06em 0.12em 0 0;
  padding: 0.09em 0.14em;
  color: var(--vw-paper-bright);
  background: var(--vw-delft);
}

/* -- Pull quote ----------------------------------------------------------- */
.vw-quote {
  margin: var(--vw-s-6) 0;
  padding-left: var(--vw-s-5);
  border-left: 3px solid var(--vw-ochre);
  font-family: var(--vw-face-display);
  font-size: var(--vw-t-lg);
  font-style: italic;
  line-height: 1.38;
  color: var(--vw-ink-soft);
}
.vw-quote cite {
  display: block;
  margin-top: var(--vw-s-3);
  font: 700 var(--vw-t-xs)/1.4 var(--vw-face-label);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--vw-ink-faint);
}

/* -- Statistic ------------------------------------------------------------ */
.vw-stat { display: flex; flex-direction: column; gap: var(--vw-s-2); }
.vw-stat > .vw-figure { color: var(--vw-delft); }
.vw-stat--madder > .vw-figure { color: var(--vw-madder); }
.vw-stat--ink    > .vw-figure { color: var(--vw-ink); }

/* -- Register: the tabular list used for people, notices, records --------- */
.vw-register { width: 100%; border-collapse: collapse; }
.vw-register caption {
  text-align: left;
  font: 700 var(--vw-t-xs)/1.4 var(--vw-face-label);
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--vw-ink-faint);
  padding-bottom: var(--vw-s-3);
}
.vw-register th {
  text-align: left;
  font: 700 var(--vw-t-xs)/1.4 var(--vw-face-label);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--vw-ink-faint);
  padding: var(--vw-s-2) var(--vw-s-3);
  border-bottom: 2px solid var(--vw-ink);
}
.vw-register td {
  padding: var(--vw-s-3);
  border-bottom: 1px solid var(--vw-rule);
  vertical-align: baseline;
}
.vw-register tbody tr:hover { background: var(--vw-vellum-deep); }
.vw-register .num { font-variant-numeric: lining-nums tabular-nums; text-align: right; }

/* -- Entry: a dated item on a notice board or story list ------------------ */
.vw-entry {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--vw-s-5);
  padding: var(--vw-s-5) 0;
  border-bottom: 1px solid var(--vw-rule);
}
.vw-entry:last-child { border-bottom: 0; }
.vw-entry__meta { display: flex; flex-direction: column; gap: var(--vw-s-2); align-items: flex-start; }
.vw-entry__title { font-size: var(--vw-t-lg); line-height: var(--vw-lh-snug); margin: 0 0 var(--vw-s-2); }
@media (max-width: 40rem) {
  .vw-entry { grid-template-columns: 1fr; gap: var(--vw-s-3); }
}

/* -- Node: a person in the tree ------------------------------------------- */
.vw-node {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: var(--vw-paper);
  border: 1px solid var(--vw-rule-strong);
  border-top: 4px solid var(--vw-delft);
  border-radius: var(--vw-edge);
  padding: var(--vw-s-3) var(--vw-s-4);
  cursor: pointer;
  transition: box-shadow 120ms ease, transform 90ms ease, opacity 160ms ease;
}
.vw-node:hover { box-shadow: var(--vw-lift-2); transform: translateY(-1px); }
.vw-node__name { display: block; font-weight: 700; line-height: var(--vw-lh-snug); }
.vw-node__dates {
  display: block;
  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  letter-spacing: 0.12em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--vw-ink-faint);
}
.vw-node[aria-current="true"], .vw-node.is-on {
  background: var(--vw-delft);
  border-color: var(--vw-delft-deep);
  color: var(--vw-paper-bright);
}
.vw-node.is-on .vw-node__dates { color: var(--vw-delft-pale); }
.vw-node.is-dim { opacity: 0.28; }
/* Deceased are marked by an ochre top edge rather than a symbol. */
.vw-node--past { border-top-color: var(--vw-ochre); }

/* -- Navigation rail ------------------------------------------------------ */
.vw-nav { display: flex; flex-direction: column; gap: 2px; }
.vw-nav a, .vw-nav button {
  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--vw-ink-soft);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  padding: var(--vw-s-3) var(--vw-s-4);
  cursor: pointer;
  text-align: left;
}
.vw-nav a:hover, .vw-nav button:hover {
  border-left-color: var(--vw-rule-strong);
  background: rgba(255, 255, 255, 0.35);
  color: var(--vw-ink);
}
.vw-nav [aria-current="page"], .vw-nav .is-on {
  border-left-color: var(--vw-madder);
  background: var(--vw-paper);
  color: var(--vw-ink);
}

/* Horizontal variant for a top bar */
.vw-nav--row { flex-direction: row; gap: 0; }
.vw-nav--row a, .vw-nav--row button {
  border-left: 0;
  border-bottom: 3px solid transparent;
  padding: var(--vw-s-3) var(--vw-s-4);
}
.vw-nav--row a:hover, .vw-nav--row button:hover { border-left: 0; border-bottom-color: var(--vw-rule-strong); }
.vw-nav--row [aria-current="page"], .vw-nav--row .is-on { border-left: 0; border-bottom-color: var(--vw-madder); background: transparent; }

/* -- Django messages framework ------------------------------------------- */
.vw-note {
  display: flex; gap: var(--vw-s-3);
  padding: var(--vw-s-4);
  border: 1px solid var(--vw-rule-strong);
  border-left-width: 5px;
  border-radius: var(--vw-edge);
  background: var(--vw-paper);
  font-size: var(--vw-t-sm);
}
.vw-note--success { border-left-color: var(--vw-verdigris); background: var(--vw-verdigris-wash); }
.vw-note--info    { border-left-color: var(--vw-delft);     background: var(--vw-delft-wash); }
.vw-note--warning { border-left-color: var(--vw-ochre);     background: var(--vw-ochre-wash); }
.vw-note--error   { border-left-color: var(--vw-madder);    background: var(--vw-madder-wash); }


/* ==========================================================================
   §8  LAYOUT PRIMITIVES — BOUNDED PANES
   The point of this section: the page fills the window and stops. Nothing
   grows a scrollbar except a pane that explicitly opts in.
   ========================================================================== */

/* Shell: fixed masthead, fixed rail, one live pane. Fills the viewport. */
.vw-shell {
  height: 100dvh;
  display: grid;
  grid-template-columns: 15rem 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "masthead masthead"
    "rail     pane";
  overflow: hidden;
}
.vw-shell__masthead {
  grid-area: masthead;
  border-bottom: 5px solid var(--vw-rule-black);
  padding: var(--vw-s-4) var(--vw-s-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--vw-s-5);
}
.vw-shell__rail {
  grid-area: rail;
  border-right: 1px solid var(--vw-rule);
  padding: var(--vw-s-5) 0;
  overflow-y: auto;
}
.vw-shell__pane {
  grid-area: pane;
  padding: var(--vw-s-6) var(--vw-s-7);
  overflow: hidden;              /* opt in with .vw-pane--scroll */
  min-height: 0;
}
@media (max-width: 60rem) {
  .vw-shell {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-areas: "masthead" "rail" "pane";
    overflow: visible;
  }
  .vw-shell__rail { border-right: 0; border-bottom: 1px solid var(--vw-rule); }
}

/* A pane that may scroll internally, never the document. */
.vw-pane--scroll { overflow-y: auto; scrollbar-gutter: stable; }

/* Newspaper columns: long text reads across, not down. Pair with a bounded
   pane and text flows into columns instead of extending the page. */
.vw-columns {
  column-width: 20rem;
  column-gap: var(--vw-s-7);
  column-rule: 1px solid var(--vw-rule);
}
.vw-columns > * { break-inside: avoid-column; }

/* Split: content beside a sticky aside. */
.vw-split {
  display: grid;
  gap: var(--vw-s-7);
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: start;
}
@media (max-width: 60rem) { .vw-split { grid-template-columns: 1fr; } }

/* Plain grids */
.vw-grid { display: grid; gap: var(--vw-s-5); }
.vw-grid--2 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.vw-grid--3 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.vw-grid--4 { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }

.vw-row { display: flex; flex-wrap: wrap; gap: var(--vw-s-4); align-items: center; }
.vw-stack > * + * { margin-top: var(--vw-s-4); }


/* ==========================================================================
   §9  UTILITIES
   Kept deliberately short. If you need a tenth utility, you need a component.
   ========================================================================== */

.vw-u-measure  { max-width: var(--vw-measure); }
.vw-u-center   { margin-inline: auto; }
.vw-u-right    { margin-left: auto; }
.vw-u-flat     { box-shadow: none; }
.vw-u-tight    { line-height: var(--vw-lh-snug); }
.vw-u-quiet    { color: var(--vw-ink-faint); }
.vw-u-nowrap   { white-space: nowrap; }
.vw-u-hidden   { display: none !important; }
.vw-u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ==========================================================================
   §10  MOTION & PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .vw-plate--tilt-l, .vw-plate--tilt-r { transform: none; }
}

@media print {
  body { background: #fff; background-image: none; color: #000; }
  .vw-shell { height: auto; display: block; overflow: visible; }
  .vw-shell__rail, .vw-nav, .vw-btn { display: none; }
  .vw-panel, .vw-plate { box-shadow: none; border-color: #999; }
  .vw-pane--scroll { overflow: visible; }
  a { text-decoration: none; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}