/* ==========================================================================
   SOUTHERN GOTHIC — exhibition room. Loaded on a/southern-gothic.html only.

   TIER 2. The museum's one deliberately washed room: humid low contrast is
   the record's own SUPPORTED colour claim, so the display zones suppress
   contrast on purpose and the page prints its own measured ratios in the
   contrast readout. Drawn kudzu reclaims the page from the bottom up (the
   brief's CURATORIAL hierarchy); peeling paint is rendered gradient, never
   photographic — the claimed humid location photography is an undeclared
   asset, stated as a dependency on the page.

   CONTRAST TABLE — these values are printed in the room's readout
   (southern-gothic.ts READOUT). KEEP THE TWO IN SYNC.
     display signage    #B3A78A on #E7E0CC = 1.81:1  deliberate (the claim)
     display support    #9C8F6F on #E7E0CC = 2.42:1  deliberate
     reading matter     #453F2E on #F1ECDD = 8.88:1  AA held (museum panel)
     secondary reading  #5F5945 on #F1ECDD = 5.92:1  AA held
     cold demo panel    #DDE1E6 on #15171C = 13.65:1 the parent, staged
     hot demo panel     #ABA083 on #E4DDC6 = 1.91:1  deliberate
   Also: ours-mark #7C4030 = 6.05:1 on ground, 6.75:1 on panel; captions on
   the ground #5F5945 = 5.31:1 and the demo verdict #453F2E = 7.95:1; the
   signboard word is #5F5945 at 0.82 opacity on #DFD6BC, effectively #76705A
   = 3.42:1 (a decorative aria-hidden specimen; the aliases it sets appear
   as real text in the lead). Kudzu greens (#7F8B63 / #66724F / #97A176)
   are decorative only and carry no text.

   Motion: one heat shimmer over the lead, barely moving (CURATORIAL:
   stillness in heat), removed under prefers-reduced-motion. No fog, no
   stone, no vignette, no night, no blackletter anywhere in this file.
   ========================================================================== */

@font-face {
  font-family: "SG Eczar";
  src: url("fonts/eczar.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  /* The library's Spectral cut is the ExtraLight (200). It is used at
     generous sizes with high-contrast ink so the light weight never costs
     legibility; the fallback stack is a real serif, not a guess. */
  font-family: "SG Spectral";
  src: url("fonts/spectral.woff2") format("woff2");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  /* The Light (300) cut, for the record's sentences: long reading at a
     comfortable size wants a little more stem than the ExtraLight. */
  font-family: "SG Spectral";
  src: url("fonts/spectral-light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

.sg-page {
  --sg-ground: #E7E0CC;      /* sun-bleached bone */
  --sg-ground-2: #DFD7BF;    /* a slightly deeper wash */
  --sg-haze: #EDE7D6;        /* the humid air */
  --sg-sign: #B3A78A;        /* display signage — 1.81:1, deliberate */
  --sg-sign-2: #9C8F6F;      /* display support — 2.42:1, deliberate */
  --sg-ghost: #C7BCA0;       /* decorative wash only, never text content */
  --sg-panel: #F1ECDD;       /* museum panel ground */
  --sg-ink: #453F2E;         /* reading matter — 8.88:1 on panel */
  --sg-ink-2: #5F5945;       /* secondary reading — 5.92:1 on panel */
  --sg-ours: #7C4030;        /* the ours mark: old paint under the flake */
  --sg-vine: #7F8B63;
  --sg-vine-2: #66724F;
  --sg-vine-3: #97A176;
  --sg-paint: #DFD6BC;       /* signboard paint */
  --sg-wood: #B9A886;        /* timber under the paint */
  --sg-cold-ground: #15171C; /* the parent, staged: near-black */
  --sg-cold-text: #DDE1E6;   /* 13.65:1 — raised, the parent's register */
  --sg-cold-stone: #3A3E46;
  --sg-hot-ground: #E4DDC6;
  --sg-hot-text: #ABA083;    /* 1.91:1 — this room's register, staged */
  --sg-display: "SG Eczar", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sg-body-face: "SG Spectral", Georgia, "Times New Roman", serif;
  background: var(--paper); /* shell mat; the room ground lives on main */
}
.sg-page main {
  background:
    linear-gradient(to bottom, var(--sg-haze), transparent 18rem),
    var(--sg-ground);
  color: var(--sg-ink);
  font-family: var(--sg-body-face);
  /* Kudzu clusters deliberately overhang the wrap; clip so an overhanging
     leaf never creates a horizontal scroll on a narrow screen. */
  overflow-x: clip;
}
.sg-wrap { max-width: 66rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }
.sg { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 5rem); }

/* The ours mark inside the room: old paint colour, and legible — the
   epistemics never inherit the register's suppression. 6.05:1 on ground,
   6.75:1 on panel. */
.sg .ours { color: var(--sg-ours); }

/* ---- the lead: untouched by the kudzu ----------------------------------- */
.sg-lead { position: relative; text-align: center; padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem); }
.sg-kicker {
  margin: 0 0 1.25rem;
  font: 500 0.72rem/1.4 var(--mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sg-sign-2);
}
.sg-h1 {
  margin: 0 0 1.2rem;
  font: 700 clamp(2.6rem, 9vw, 6.5rem)/1.02 var(--sg-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Flat, single value — the readout prints this exact pair, so the paint
     is one colour, and the weathering is carried by the face, the tracking
     and the shimmer layer above it rather than by a gradient that would
     make the printed number untrue pixel by pixel. */
  color: var(--sg-sign); /* 1.81:1 — the claim, declared in the exhibit bar */
}
.sg-defining {
  margin: 0 auto 1rem;
  max-width: 46ch;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.8;
  color: var(--sg-sign-2); /* 2.42:1 — display support, declared */
}
.sg-aliases {
  margin: 0;
  font: 600 0.8rem/1.6 var(--sg-display);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sg-sign-2);
}

/* The heat shimmer: one layer of humid air over the signage, barely moving.
   Stillness in heat — 18s, tiny travel, opacity drift only. */
.sg-shimmer {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 8%, color-mix(in srgb, var(--sg-haze) 65%, transparent) 34%, transparent 52%),
    linear-gradient(to bottom, transparent 55%, color-mix(in srgb, var(--sg-haze) 45%, transparent) 74%, transparent 90%);
  opacity: 0.7;
}
@media (prefers-reduced-motion: no-preference) {
  .sg-shimmer { animation: sg-shimmer 18s ease-in-out infinite alternate; }
  @keyframes sg-shimmer {
    from { transform: translateY(-0.5%); opacity: 0.55; }
    to   { transform: translateY(0.5%);  opacity: 0.85; }
  }
}

/* Clapboard with peeling paint under the lead: repeated board courses, a
   lighter paint skin broken by chips that show the timber. All gradient. */
.sg-clapboard {
  height: clamp(2.25rem, 6vw, 3.5rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  background:
    /* paint loss — thin flakes running along the board courses, not spots */
    linear-gradient(to right, transparent 9%, color-mix(in srgb, var(--sg-wood) 80%, var(--sg-paint)) 9%, color-mix(in srgb, var(--sg-wood) 80%, var(--sg-paint)) 21%, transparent 21%) 0 0.2rem / 100% 0.5rem no-repeat,
    linear-gradient(to right, transparent 34%, color-mix(in srgb, var(--sg-wood) 70%, var(--sg-paint)) 34%, color-mix(in srgb, var(--sg-wood) 70%, var(--sg-paint)) 41%, transparent 41%) 0 1.15rem / 100% 0.45rem no-repeat,
    linear-gradient(to right, transparent 58%, color-mix(in srgb, var(--sg-wood) 80%, var(--sg-paint)) 58%, color-mix(in srgb, var(--sg-wood) 80%, var(--sg-paint)) 74%, transparent 74%) 0 2.1rem / 100% 0.5rem no-repeat,
    linear-gradient(to right, transparent 82%, color-mix(in srgb, var(--sg-wood) 70%, var(--sg-paint)) 82%, color-mix(in srgb, var(--sg-wood) 70%, var(--sg-paint)) 93%, transparent 93%) 0 0.2rem / 100% 0.45rem no-repeat,
    linear-gradient(to right, transparent 22%, color-mix(in srgb, var(--sg-wood) 65%, var(--sg-paint)) 22%, color-mix(in srgb, var(--sg-wood) 65%, var(--sg-paint)) 30%, transparent 30%) 0 3.05rem / 100% 0.4rem no-repeat,
    /* board courses */
    repeating-linear-gradient(to bottom,
      var(--sg-paint) 0, var(--sg-paint) 0.85rem,
      color-mix(in srgb, var(--sg-wood) 45%, var(--sg-paint)) 0.85rem,
      color-mix(in srgb, var(--sg-wood) 45%, var(--sg-paint)) 0.95rem);
  border-block: 1px solid color-mix(in srgb, var(--sg-wood) 55%, var(--sg-ground));
}

/* ---- zones and the overgrowth gradient ----------------------------------
   Rank is overgrowth: g1 a sprig, g2 corners taken, g3 heavier, g4 (the
   last section) substantially reclaimed. The measure also narrows as the
   growth advances — the page is being taken back, so it has less room. */
.sg-zone { position: relative; margin-block: clamp(2.5rem, 6vw, 4rem); }
/* The growth pushes the content off its own grid: each deeper stage slides
   the section further from the original left edge. */
.sg-zone--g2 { margin-left: clamp(0rem, 2.5vw, 2rem); }
.sg-zone--g3 { margin-left: clamp(0rem, 5vw, 4rem); }
.sg-zone--g4 { margin-left: clamp(0.5rem, 8vw, 6.5rem); margin-right: clamp(0rem, 2vw, 1.5rem); }

.sg-h2 {
  margin: 0 0 1rem;
  font: 600 clamp(1.15rem, 2.6vw, 1.5rem)/1.25 var(--sg-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-sign); /* 1.81:1 — signage, the declared display zone */
}
/* Every section mark holds the SAME size and the SAME single colour — the
   readout prints one number for the marks and it is true of all of them;
   depth in the growth is carried by the kudzu and the narrowing measure,
   never by a further fade that would falsify the printed ratio. */

/* ---- museum panels: where the reading matter lives ---------------------- */
.sg-panel {
  position: relative; /* the kudzu anchors to the panel it is taking */
  background: var(--sg-panel);
  border: 1px solid color-mix(in srgb, var(--sg-wood) 40%, var(--sg-panel));
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.25rem);
  max-width: 62ch;
}
.sg-panel + .sg-panel { margin-top: 1rem; }
.sg-body {
  margin: 0;
  font: 200 1.08rem/1.85 var(--sg-body-face);
  color: var(--sg-ink); /* 8.88:1 */
}
.sg-body b, .sg-body em { font-weight: 500; font-style: normal; }
.sg-body--2 { margin-top: 0.9rem; color: var(--sg-ink-2); /* 5.92:1 */ }
.sg-quote { margin: 0 0 1rem; padding: 0; }
.sg-quote p {
  margin: 0;
  font: 200 clamp(1.15rem, 2.4vw, 1.35rem)/1.7 var(--sg-body-face);
  color: var(--sg-ink);
}
.sg-grade {
  margin: 0;
  font: 400 0.78rem/1.7 var(--mono);
  color: var(--sg-ink-2);
}
.sg-grade b { font-weight: 400; }
.sg-grade q { quotes: "“" "”"; }

/* ---- the contrast readout ------------------------------------------------ */
.sg-readout__panel { max-width: 72ch; }
.sg-readout__table {
  width: 100%;
  margin-block: 1.1rem 0;
  border-collapse: collapse;
  font: 400 0.76rem/1.55 var(--mono);
  color: var(--sg-ink);
}
.sg-readout__table th {
  text-align: left;
  font-weight: 400;
  color: var(--sg-ink-2);
  border-bottom: 1px solid var(--sg-ink-2);
  padding: 0.3rem 0.75rem 0.3rem 0;
}
.sg-readout__table td {
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--sg-wood) 45%, var(--sg-panel));
  padding: 0.45rem 0.75rem 0.45rem 0;
}
.sg-readout__table code { font-family: var(--mono); font-size: 0.72rem; }
.sg-readout__low td:nth-child(3) { color: var(--sg-ours); }
@media (max-width: 40rem) {
  .sg-readout__table thead { display: none; }
  .sg-readout__table tr { display: block; padding-block: 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--sg-wood) 45%, var(--sg-panel)); }
  .sg-readout__table td { display: block; border: 0; padding: 0.1rem 0; }
}

/* ---- kudzu placement ----------------------------------------------------- */
.sg-kudzu { position: absolute; pointer-events: none; }
.sg-leaf--a { fill: var(--sg-vine); }
.sg-leaf--b { fill: var(--sg-vine-2); }
.sg-leaf--c { fill: var(--sg-vine-3); }
.sg-stem { stroke: var(--sg-vine-2); stroke-linecap: round; }

/* Clusters live on the panels they are taking: draped over the top-right
   corner, hanging past the panel edge onto the ground. They overlap the
   panel's padding, never its text — the growth takes furniture first. */
.sg-kudzu--sprig {
  width: clamp(4.5rem, 9vw, 7rem);
  top: -3.5rem; right: -1.25rem;
}
.sg-kudzu--corner {
  width: clamp(6rem, 13vw, 9.5rem);
  top: -5.25rem; right: -2rem;
}
/* The boundaries panel is taken from below: deeper in the growth, the vine
   climbs the panel's foot, clear of the heading above it. */
.sg-zone--g3 .sg-panel .sg-kudzu--corner { top: auto; bottom: -4.5rem; right: auto; left: -2rem; transform: scale(-1, -1); }
/* The last section: hedge across the whole top edge plus a corner mass that
   genuinely overlaps the panel — reclaimed, and stacked over the furniture. */
/* The hedge's leaves hang to the foot of its box: the heading starts below
   them, so no leaf ever sits on the lettering. */
.sg-last { padding-top: calc(clamp(3.5rem, 9vw, 6rem) + 0.75rem); }
.sg-kudzu--hedge {
  width: 100%; height: clamp(3.5rem, 9vw, 6rem);
  top: 0; left: 0;
}
.sg-last .sg-kudzu--corner {
  width: clamp(9rem, 20vw, 14rem);
  top: 1.25rem; right: -1.75rem;
  z-index: 1;
}
.sg-last__panel { position: relative; }
/* The last panel's sprig hangs off its foot, never onto the heading. */
.sg-last__panel .sg-kudzu--sprig { top: auto; bottom: -3rem; right: -1.25rem; transform: scaleY(-1); }
.sg-last .sg-h2 { position: relative; }
/* The corner mass holds the right-hand end of the heading's line; the
   lettering wraps short of it rather than running under the leaves. */
@media (min-width: 48.01rem) {
  .sg-last .sg-h2 { padding-right: clamp(6rem, 17vw, 10.5rem); }
}
/* The lettering panel sits in a narrower column, so its sprig hangs from
   the panel's foot instead of reaching up into the heading. */
.sg-type .sg-panel .sg-kudzu--sprig { top: auto; bottom: -3rem; transform: scaleY(-1); }

/* ---- rules broken by tendrils ------------------------------------------- */
.sg-rulebreak {
  display: flex; align-items: center; gap: 0.5rem;
  max-width: 40rem;
  margin: clamp(2rem, 5vw, 3rem) 0;
}
.sg-rulebreak__l, .sg-rulebreak__r {
  height: 1px; background: var(--sg-sign);
}
.sg-rulebreak__l { flex: 3 1 auto; }
.sg-rulebreak__r { flex: 1 1 auto; }
.sg-tendril { width: 6.5rem; flex: none; margin-block: -1.1rem; }

/* ---- the signboard specimen ---------------------------------------------- */
@media (min-width: 56rem) {
  .sg-type__row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
  }
  .sg-type__row .sg-signboard { margin: 0.5rem 0 0; transform: rotate(-1.2deg); }
}
.sg-signboard {
  position: relative;
  max-width: 34rem;
  margin: 0 0 1.25rem;
  padding: clamp(1.25rem, 3.5vw, 2rem) clamp(1rem, 3vw, 1.75rem) clamp(1rem, 3vw, 1.5rem);
  text-align: center;
  background:
    /* flaked skin showing timber */
    radial-gradient(2.4rem 0.8rem at 16% 14%, var(--sg-wood) 96%, transparent),
    radial-gradient(3.2rem 0.7rem at 78% 88%, var(--sg-wood) 96%, transparent),
    radial-gradient(1.6rem 0.6rem at 90% 18%, var(--sg-wood) 96%, transparent),
    radial-gradient(2rem 0.55rem at 8% 82%, var(--sg-wood) 96%, transparent),
    var(--sg-paint);
  border: 1px solid color-mix(in srgb, var(--sg-wood) 70%, var(--sg-paint));
  /* the board's edge has weathered out of true — a rendered chip, no image */
  clip-path: polygon(0 4%, 3% 0, 97% 1%, 100% 8%, 99% 94%, 95% 100%, 4% 99%, 0 92%);
}
.sg-signboard__word {
  margin: 0;
  font: 800 clamp(1.9rem, 6vw, 3.4rem)/1.05 var(--sg-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-ink-2); /* 4.83:1 on the board paint; decorative specimen */
  opacity: 0.82;          /* sun-eaten: the paint of the word itself is going */
}
.sg-signboard__sub {
  margin: 0.4rem 0 0;
  font: 600 0.85rem/1.4 var(--sg-display);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sg-sign-2);
}

/* ---- the demonstration: cold staging vs hot staging ---------------------- */
.sg-demo__intro { margin-bottom: 1.25rem; }
.sg-demo__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  max-width: 58rem;
}
.sg-demo__fig { margin: 0; }
.sg-demo__stage {
  min-height: 15rem;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}
.sg-demo__kicker { margin: 0 0 0.75rem; font: 600 0.72rem/1.4 var(--sg-display); letter-spacing: 0.3em; text-transform: uppercase; }
.sg-demo__line { margin: 0 0 0.9rem; font: 200 clamp(1.1rem, 2.4vw, 1.45rem)/1.5 var(--sg-body-face); }
.sg-demo__foot { margin: 0; font: 400 0.68rem/1.6 var(--mono); letter-spacing: 0.04em; }

/* COLD — the parent, staged: fog, stone, near-black, deep vignette, raised
   contrast. Drawn with gradients; it exists only to be the named failure. */
.sg-demo__stage--cold {
  background:
    /* deep vignette */
    radial-gradient(120% 90% at 50% 42%, transparent 42%, rgba(0, 0, 0, 0.78) 100%),
    /* low fog bank */
    linear-gradient(to top, color-mix(in srgb, #9FA6B0 38%, transparent), transparent 45%),
    /* stone coursework */
    repeating-linear-gradient(to bottom,
      var(--sg-cold-stone) 0, var(--sg-cold-stone) 2.2rem,
      #2E323A 2.2rem, #2E323A 2.35rem),
    var(--sg-cold-ground);
  color: var(--sg-cold-text); /* 13.65:1 */
}
.sg-demo__stage--cold .sg-demo__foot { color: #9AA1AB; /* 6.88:1 */ }

/* HOT — this room: haze, bleach, flat light. No vignette, no shadow. */
.sg-demo__stage--hot {
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--sg-haze) 75%, transparent), transparent 55%),
    var(--sg-hot-ground);
  color: var(--sg-hot-text); /* 1.91:1 — the register, performed */
}
.sg-demo__stage--hot .sg-demo__foot { color: var(--sg-hot-text); }

.sg-demo__cap {
  margin-top: 0.6rem;
  font: 400 0.76rem/1.65 var(--mono);
  color: var(--sg-ink-2); /* on the page ground: 5.31:1 */
  max-width: 46ch;
}
.sg-demo__cap b { font-weight: 400; color: var(--sg-ink); }
.sg-demo__verdict {
  margin: 1.25rem 0 0;
  font: 400 0.8rem/1.7 var(--mono);
  color: var(--sg-ink); /* 7.95:1 on ground */
  max-width: 60ch;
}
@media (max-width: 44rem) {
  .sg-demo__pair { grid-template-columns: 1fr; }
}

/* ---- boundaries and refusals --------------------------------------------- */
.sg-bounds { margin: 0; }
.sg-bounds dt {
  font: 600 0.95rem/1.4 var(--sg-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-ink);
}
.sg-bounds dd {
  margin: 0.35rem 0 1.1rem;
  font: 200 1.02rem/1.8 var(--sg-body-face);
  color: var(--sg-ink-2);
}
.sg-bounds dd:last-child { margin-bottom: 0; }
.sg-bounds q { quotes: "“" "”"; color: var(--sg-ink); }

.sg-refusals {
  margin: 0 0 1rem; padding: 0;
  list-style: none;
}
.sg-refusals li {
  font: 200 1.08rem/2 var(--sg-body-face);
  color: var(--sg-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--sg-wood) 45%, var(--sg-panel));
  padding-block: 0.35rem;
}
.sg-refusals li:last-child { border-bottom: 0; }

/* ---- small screens -------------------------------------------------------- */
@media (max-width: 48rem) {
  .sg-zone--g2, .sg-zone--g3, .sg-zone--g4 { margin-inline: 0; }
  .sg-kudzu--corner { width: clamp(5.5rem, 22vw, 8rem); right: -0.5rem; }
  .sg-zone--g3 .sg-panel .sg-kudzu--corner { left: -0.5rem; bottom: -6rem; }
  .sg-last .sg-kudzu--corner { right: -0.75rem; }
  .sg-tendril { width: 4.5rem; }
}

/* Focus: the room suppresses contrast for display, never for the keyboard.
   Anything focusable inside the room zone gets the full-ink ring. */
.sg :focus-visible { outline: 2px solid var(--sg-ink); outline-offset: 2px; }

/* At narrow widths the last section's extra corner mass comes off: there is
   no margin left for it to take, only the heading. */
@media (max-width: 48rem) {
  .sg-last > .sg-kudzu--corner { display: none; }
}

/* ==========================================================================
   THE RECORD — the same ground, further down, further taken.

   Headings are painted signboards (Eczar on the board paint, the timber
   showing through at the chipped corners); every sentence sits on a plain
   panel in Spectral Light at reading size. Tendrils break the rules between
   bands and the kudzu grows heavier band by band, down to a hedge rising
   from the foot of the page. The growth takes margins and padding only;
   it never sits on text, and it comes off at narrow widths.

   Contrast (all reading pairs AA or better):
     board lettering   #453F2E on #DFD6BC = 7.9:1   (on the timber chips #B9A886 = 4.6:1)
     sentences         #453F2E on #F1ECDD = 8.88:1
     labels, kinds     #5F5945 on #F1ECDD = 5.92:1
     old-paint accent  #7C4030 on #F1ECDD = 6.75:1
   ========================================================================== */

/* reveal.js fades sections in; the record is visible without it. */
.sg-page main > section.sg-rec { opacity: 1; transform: none; transition: none; will-change: auto; }

.sg-rec {
  position: relative;
  max-width: 66rem;
  margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 3rem) calc(clamp(3.5rem, 9vw, 6rem) + 2rem);
  color: var(--sg-ink);
  font-family: var(--sg-body-face);
}
.sg-rec__wrap { position: relative; }

/* ---- bands: the measure keeps sliding off its grid as the growth
   advances, alternating sides the way a vine takes a fence. ----------- */
.sg-rb { position: relative; margin-block: clamp(1.5rem, 4vw, 2.5rem); }
.sg-rb--l { margin-right: clamp(0rem, 6vw, 5rem); }
.sg-rb--r { margin-left: clamp(0rem, 6vw, 5rem); }

/* ---- the signboard heading ---------------------------------------------- */
.sg-board {
  display: inline-block;
  position: relative;
  max-width: 100%;
  margin: 0 0 0.9rem;
  padding: 0.7rem 1.25rem 0.6rem;
  font: 700 clamp(1.15rem, 2.4vw, 1.45rem)/1.25 var(--sg-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sg-ink);
  background:
    radial-gradient(1.6rem 0.45rem at 4% 12%, var(--sg-wood) 96%, transparent),
    radial-gradient(2.2rem 0.4rem at 96% 90%, var(--sg-wood) 96%, transparent),
    repeating-linear-gradient(to bottom, var(--sg-paint) 0, var(--sg-paint) 0.9rem,
      color-mix(in srgb, var(--sg-wood) 30%, var(--sg-paint)) 0.9rem,
      color-mix(in srgb, var(--sg-wood) 30%, var(--sg-paint)) 0.97rem);
  border: 1px solid color-mix(in srgb, var(--sg-wood) 70%, var(--sg-paint));
  clip-path: polygon(0 6%, 2% 0, 98% 2%, 100% 12%, 99.5% 92%, 97% 100%, 3% 98%, 0 88%);
}
.sg-rb--l .sg-board { transform: rotate(-0.8deg); }
.sg-rb--r .sg-board { transform: rotate(0.6deg); }
.sg-board__sub {
  display: inline-block;
  margin-left: 0.5rem;
  font: 400 0.72rem/1.4 var(--mono);
  letter-spacing: 0.12em;
  color: var(--sg-ink-2); /* 4.83:1 on the board paint */
}

/* ---- the panel ----------------------------------------------------------- */
.sg-rp {
  position: relative;
  max-width: 46rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.25rem);
  background: var(--sg-panel);
  border: 1px solid color-mix(in srgb, var(--sg-wood) 40%, var(--sg-panel));
}
.sg-rb--r .sg-rp { margin-left: auto; }
.sg-rb--r { text-align: left; }
.sg-rb--r:has(.sg-rp) { display: flex; flex-direction: column; align-items: flex-end; }
.sg-rb--r .sg-rp { width: 100%; }
/* The growth hangs off the panel's outer top corner, over the ground. */
.sg-rp > .sg-kudzu--sprig { top: -3.25rem; right: -1.5rem; }
.sg-rp > .sg-kudzu--corner { top: -4.75rem; right: -2.25rem; }
.sg-rb--r .sg-rp > .sg-kudzu { right: auto; left: -2.25rem; transform: scaleX(-1); }

.sg-p {
  margin: 0;
  font: 300 1.1rem/1.75 var(--sg-body-face);
  color: var(--sg-ink);
}
.sg-rp > .sg-p + .sg-p, .sg-rp > .sg-p + .sg-dx, .sg-rp > .sg-dx + .sg-p { margin-top: 0.9rem; }
.sg-p b { font-weight: 300; color: var(--sg-ours); }
.sg-p em { font-style: italic; }
.sg-lab {
  margin: 0 0 0.4rem;
  font: 500 0.72rem/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-ink-2);
}
.sg-nl { margin: 0.4rem 0 0; font: 400 0.8rem/1.6 var(--mono); color: var(--sg-ink-2); }
td.sg-nl { margin: 0; }
.sg-note { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--sg-wood) 45%, var(--sg-panel)); }
.sg-rec a {
  color: var(--sg-ink);
  text-decoration: underline;
  text-decoration-color: var(--sg-vine-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.sg-rec a:hover { text-decoration-thickness: 2px; color: var(--sg-ours); }
.sg-rec :focus-visible { outline: 2px solid var(--sg-ink); outline-offset: 2px; }

/* the pull line and the diagnostic: set larger, still reading matter */
.sg-pull {
  margin: 0 0 0.9rem;
  font: 300 clamp(1.3rem, 2.8vw, 1.6rem)/1.5 var(--sg-body-face);
  color: var(--sg-ink);
}
.sg-dx {
  margin: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--sg-vine-2);
  font: 300 clamp(1.15rem, 2.2vw, 1.3rem)/1.65 var(--sg-body-face);
  color: var(--sg-ink);
}
.sg-costs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; }
.sg-costs li { font: 300 1.1rem/1.6 var(--sg-body-face); }

/* ---- facts ---------------------------------------------------------------- */
.sg-facts { margin: 0; }
.sg-facts > div {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  gap: 0.2rem 1.25rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--sg-wood) 45%, var(--sg-panel));
}
.sg-facts > div:last-child { border-bottom: 0; }
.sg-facts dt { font: 500 0.72rem/1.9 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-ink-2); }
.sg-facts dd { margin: 0; font: 300 1.08rem/1.65 var(--sg-body-face); color: var(--sg-ink); }
.sg-rp > .sg-facts + .sg-dx { margin-top: 1rem; }
.sg-rp > .sg-p + .sg-facts { margin-top: 0.75rem; }

/* ---- what carries the look, and the ledger ------------------------------- */
.sg-tw { overflow-x: auto; margin-top: 0.5rem; }
.sg-tw:focus-visible { outline: 2px solid var(--sg-ink); outline-offset: 2px; }
.sg-ct, .sg-rt { width: 100%; border-collapse: collapse; }
.sg-ct th, .sg-ct td, .sg-rt th, .sg-rt td {
  text-align: left;
  vertical-align: top;
  padding: 0.35rem 0.75rem 0.35rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--sg-wood) 45%, var(--sg-panel));
}
.sg-ct th { width: 11rem; font-weight: 400; }
.sg-ct td { font: 300 1rem/1.6 var(--sg-body-face); }
.sg-ct td.sg-nl { font: 400 0.8rem/1.6 var(--mono); padding-top: 0.95rem; }
.sg-ct th small { display: block; margin-top: -0.35rem; font: 400 0.68rem/1.4 var(--mono); letter-spacing: 0.08em; color: var(--sg-ours); }
.sg-ct tr:last-child th, .sg-ct tr:last-child td { border-bottom: 0; }
/* Dimension and Element links: full-height tap targets. */
.sg-dim, .sg-tag, .sg-nb {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 0.92rem/1.3 var(--sg-display);
  letter-spacing: 0.06em;
}
.sg-tags { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: 0; }
.sg-face { font-size: 1.15em; }
.sg-sws { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.sg-swatch { display: flex; align-items: center; gap: 0.45rem; }
.sg-sw__chip { width: 1.6rem; height: 1.6rem; border: 1px solid color-mix(in srgb, var(--sg-ink) 35%, transparent); flex: none; }
.sg-swatch code { font: 400 0.76rem/1 var(--mono); color: var(--sg-ink); }
.sg-rt { margin-top: 1rem; font: 400 0.8rem/1.55 var(--mono); color: var(--sg-ink); }
.sg-rt thead th { color: var(--sg-ink-2); font-weight: 400; border-bottom-color: var(--sg-ink-2); }
.sg-rt tbody th { font-weight: 400; }

/* ---- rules ----------------------------------------------------------------- */
.sg-area + .sg-area { margin-top: 1.4rem; }
.sg-area ul { margin: 0; padding: 0; list-style: none; }
.sg-area li { padding-block: 0.6rem; border-bottom: 1px solid color-mix(in srgb, var(--sg-wood) 45%, var(--sg-panel)); }
.sg-area li:last-child { border-bottom: 0; }
.sg-area .sg-lab { font-family: var(--sg-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.1em; color: var(--sg-ink); margin-bottom: 0.2rem; }
.sg-k { display: block; font: 400 0.72rem/1.6 var(--mono); letter-spacing: 0.06em; color: var(--sg-ink-2); }
.sg-ev { color: var(--sg-ours); }
.sg-area .sg-p { display: block; }
.sg-area--ctx { opacity: 1; }

/* ---- neighbours and exits ------------------------------------------------- */
.sg-conf, .sg-use { margin: 0; padding: 0; list-style: none; }
.sg-conf li, .sg-use li { padding-block: 0.5rem 0.75rem; border-bottom: 1px solid color-mix(in srgb, var(--sg-wood) 45%, var(--sg-panel)); }
.sg-conf li:last-child, .sg-use li:last-child { border-bottom: 0; }
.sg-conf .sg-nb { font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 0.75rem; }
.sg-conf .sg-k { display: inline; }
.sg-conf .sg-p { display: block; }
.sg-use .sg-p { display: block; font-size: 1rem; color: var(--sg-ink-2); }
.sg-x {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 700 1rem/1.3 var(--sg-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sg-foot {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
  margin: 1rem 0 0; padding-top: 0.75rem;
  border-top: 1px solid var(--sg-ink-2);
}
.sg-foot .sg-x { font-size: 0.85rem; }

/* ---- the foot of the page: the hedge, rising from the bottom edge -------- */
.sg-kudzu--foot {
  width: 100%; height: clamp(3.5rem, 9vw, 6rem);
  bottom: 0; left: 0;
  transform: scaleY(-1);
}

/* ---- narrow: rotations and overhangs come off ---------------------------- */
@media (max-width: 48rem) {
  .sg-rb--l, .sg-rb--r { margin-inline: 0; }
  .sg-rb--l .sg-board, .sg-rb--r .sg-board { transform: none; }
  .sg-rp > .sg-kudzu { display: none; }
  .sg-facts > div { grid-template-columns: 1fr; }
  .sg-ct th { width: auto; }
  .sg-ct, .sg-ct tbody, .sg-ct tr, .sg-ct th, .sg-ct td { display: block; }
  .sg-ct th { border-bottom: 0; padding-bottom: 0; }
  .sg-ct td { padding-top: 0; }
  .sg-ct td.sg-nl { padding-top: 0; }
}
@media (max-width: 56rem) {
  /* Stacked, the lettering panel's foot is the signboard's head: no sprig. */
  .sg-type .sg-panel .sg-kudzu--sprig { display: none; }
}
@media (max-width: 40rem) {
  /* The ledger fits the phone rather than scrolling: long dimension names
     break, and the cells tighten. */
  .sg-rt { font-size: 0.72rem; }
  .sg-rt th, .sg-rt td { overflow-wrap: anywhere; padding-right: 0.5rem; }
}