/* ==========================================================================
   Drawn & Fired: proposal page design system
   Upton Industries design review, Rev A, 2026-09-23

   COLD = Upton's drawings (paper, blueprint, linework, stamped Lilex data).
   FIRED = heat (the black-body ramp), used only where it carries meaning:
   gauges, the heat bar, hover/focus, and the cover's one hot moment.

   Red is a temperature (stamps, brand mark, primary action).
   Copper is the signal (links, focus, "you are here").
   Blue is salt and the blueprint.

   Contract: _build/CONTRACT.md. Every class here is prefixed df-.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts (self-hosted; paths are relative to this file, so they resolve
   the same from index.html and from _build/*.html). Latin subset.
   -------------------------------------------------------------------------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Lilex"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lilex-400.woff2") format("woff2"); }
@font-face { font-family: "Lilex"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/lilex-500.woff2") format("woff2"); }

/* Heat-up / cool-down driver: 0 = cold, 1 = fully hot. Transitions fast up,
   slow down (black body). Components derive colour/glow from it. */
@property --df-heat { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --df-cover-heat { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@property --df-torch { syntax: "<length-percentage>"; inherits: true; initial-value: 0%; }

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* KDL scales (identical to upton-dev style.css) */
  --kdl-red-50: #fbeaeb; --kdl-red-100: #f4c4c7; --kdl-red-200: #e89096; --kdl-red-300: #d95c64; --kdl-red-400: #d23740;
  --kdl-red-500: #CE2029; --kdl-red-600: #B51B23; --kdl-red-700: #8b1318; --kdl-red-800: #5e0c10; --kdl-red-900: #310608;

  --kdl-copper-300: #f0a370; --kdl-copper-500: #c2632a; --kdl-copper-700: #7e3d14;

  --kdl-gray-0: #ffffff; --kdl-gray-50: #f4f6f8; --kdl-gray-100: #e7ebef; --kdl-gray-200: #cfd6dd; --kdl-gray-300: #a3aeb8;
  --kdl-gray-400: #6c7682; --kdl-gray-500: #444c56; --kdl-gray-600: #2f353d; --kdl-gray-700: #1f242b; --kdl-gray-800: #14181d; --kdl-gray-900: #0a0d11;

  --kdl-blue-50: #e6f4fb; --kdl-blue-100: #c0e1f4; --kdl-blue-200: #7ec3e8; --kdl-blue-300: #3fa5db; --kdl-blue-400: #1789c8;
  --kdl-blue-500: #0078b9; --kdl-blue-600: #015e92; --kdl-blue-700: #0d4e73; --kdl-blue-800: #093753; --kdl-blue-900: #061f33;

  --kdl-success: #1f8a4c;
  --kdl-warn: #c98a05;
  --kdl-danger: #b3261e;
  --kdl-surface-inverse: var(--kdl-gray-800);

  --kdl-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kdl-font-mono: "Lilex", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Drawn & Fired direction (curated.json direction.palette_and_type) */
  --upton-heat-1: var(--kdl-red-800);     /* dull red */
  --upton-heat-2: var(--kdl-red-700);     /* blood red */
  --upton-heat-3: var(--kdl-red-500);     /* cherry = Upton red */
  --upton-heat-4: var(--kdl-copper-500);
  --upton-heat-5: #e8541e;                /* orange */
  --upton-heat-6: #f5a13a;                /* yellow-orange */
  --upton-heat-7: #ffd98a;                /* yellow */
  --upton-heat-8: #fff6e5;                /* white heat */
  --upton-heat-bar: linear-gradient(90deg, var(--upton-heat-1), var(--upton-heat-3) 45%, var(--upton-heat-4) 70%, var(--upton-heat-5) 85%, var(--upton-heat-6));

  --upton-temper-straw: var(--kdl-warn);
  --upton-temper-bronze: var(--kdl-copper-700);
  --upton-temper-blue: var(--kdl-blue-700);

  --upton-furnace-900: #120d0b;           /* warm black */
  --upton-blueprint: var(--kdl-blue-900);
  --upton-paper: #f6f3ec;                 /* drafting paper */

  /* Proposal-page tokens */
  --df-focus: var(--kdl-copper-500);      /* focus ring on light; surfaces flip it */
  --df-plate:
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, rgba(20,24,29,.035) 1px 2px, rgba(255,255,255,0) 2px 3px),
    linear-gradient(180deg, #e3e7eb, #b9c0c7);
  --df-rivet: radial-gradient(circle at 38% 34%, #fbfcfd 0 1px, #c9d0d6 1.6px, #7d8791 3.2px, #3a4048 4.4px, rgba(58,64,72,0) 5px);
  --df-rivets:
    var(--df-rivet) left 7px top 7px / 12px 12px no-repeat,
    var(--df-rivet) right 7px top 7px / 12px 12px no-repeat,
    var(--df-rivet) left 7px bottom 7px / 12px 12px no-repeat,
    var(--df-rivet) right 7px bottom 7px / 12px 12px no-repeat;
  --df-bezel: linear-gradient(160deg, #4a525c 0%, #22272e 18%, #14181d 55%, #2a3038 82%, #3a4149 100%);

  --df-paper-2: #fbf9f4;                  /* a sheet lying on the paper table */
  --df-buff: #f1e4c6;                     /* shop-traveler card stock */
  --df-ink: var(--kdl-gray-800);
  --df-ink-2: var(--kdl-gray-500);        /* 7.6:1 on paper */
  --df-rule: rgba(18, 13, 11, .16);
  --df-rule-strong: rgba(18, 13, 11, .42);
  --df-link: var(--kdl-copper-700);       /* 8.1:1 on paper */
  --df-surface: var(--upton-paper);       /* the colour behind components (for punched holes) */

  --df-grid-kdl:
    linear-gradient(to right, rgba(163,174,184,.075) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(to bottom, rgba(163,174,184,.075) 1px, transparent 1px) 0 0 / 48px 48px;
  --df-grid-paper:
    linear-gradient(to right, rgba(18,13,11,.075) 1px, transparent 1px) -1px -1px / 240px 240px,
    linear-gradient(to bottom, rgba(18,13,11,.075) 1px, transparent 1px) -1px -1px / 240px 240px,
    linear-gradient(to right, rgba(18,13,11,.04) 1px, transparent 1px) -1px -1px / 48px 48px,
    linear-gradient(to bottom, rgba(18,13,11,.04) 1px, transparent 1px) -1px -1px / 48px 48px;
  --df-grid-blueprint:
    linear-gradient(to right, rgba(126,195,232,.13) 1px, transparent 1px) -1px -1px / 240px 240px,
    linear-gradient(to bottom, rgba(126,195,232,.13) 1px, transparent 1px) -1px -1px / 240px 240px,
    linear-gradient(to right, rgba(126,195,232,.06) 1px, transparent 1px) -1px -1px / 48px 48px,
    linear-gradient(to bottom, rgba(126,195,232,.06) 1px, transparent 1px) -1px -1px / 48px 48px;

  /* Type scale (Plex for claims, Lilex for anything measurable) */
  --df-fs-label: 12px;
  --df-fs-small: 14px;
  --df-fs-body: 17px;
  --df-fs-lede: 21px;
  --df-fs-h4: 19px;
  --df-fs-h3: clamp(26px, 1.4rem + 1.2vw, 36px);
  --df-fs-h2: clamp(38px, 1.6rem + 3vw, 64px);
  --df-fs-display: clamp(76px, 2rem + 10.5vw, 196px);

  /* Motion: heats up fast, cools slowly */
  --df-heat-dur: 140ms;
  --df-heat-ease: cubic-bezier(.2, 0, 0, 1);
  --df-cool-dur: 1600ms;
  --df-cool-ease: cubic-bezier(.3, .7, .3, 1);
  --df-ease: cubic-bezier(.2, 0, .2, 1);

  --df-nav-h: 52px;
  --df-wrap: 1240px;
  --df-gutter: clamp(16px, 4vw, 48px);

  color-scheme: light;
  scroll-padding-top: calc(var(--df-nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) { scroll-behavior: smooth; }
}

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

body {
  margin: 0;
  background: var(--upton-paper);
  color: var(--df-ink);
  font-family: var(--kdl-font-sans);
  font-size: var(--df-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -.012em; color: inherit; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

code, kbd, samp, .df-mono {
  font-family: var(--kdl-font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
}
code { font-size: .88em; padding: .08em .3em; border-radius: 3px; background: rgba(18,13,11,.06); }
.df-mono { font-size: .92em; letter-spacing: 0; }
/* Lilex label: stamped/engraved metadata */
.df-label {
  font-family: var(--kdl-font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-size: var(--df-fs-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}

::selection { background: var(--upton-heat-7); color: var(--upton-furnace-900); }

:focus { outline: none; }
:is(section, article, header, main, h2, h3)[tabindex="-1"]:focus-visible { outline: none; }
:focus-visible {
  outline: 2px solid var(--df-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.df-skip {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  padding: 10px 16px; background: var(--upton-furnace-900); color: var(--kdl-gray-50);
  font-weight: 600; text-decoration: none; border-radius: 4px;
}
.df-skip:focus-visible { top: 12px; --df-focus: var(--kdl-copper-300); }

.df-wrap { width: 100%; max-width: var(--df-wrap); margin-inline: auto; padding-inline: var(--df-gutter); }
.df-prose { max-width: 68ch; }
.df-prose > * + * { margin-top: .9em; }
.df-prose p, .df-prose ul, .df-prose ol { margin-bottom: 0; }
.df-prose ul, .df-prose ol { padding-left: 1.25em; }
.df-prose li + li { margin-top: .35em; }
.df-prose strong { font-weight: 600; color: var(--df-ink); }

/* --------------------------------------------------------------------------
   3. Heat interaction ("heats up fast, cools slowly")
   Everything interactive shares --df-heat (0..1). Glow colour slides down the
   black-body ramp as it cools: heat-6 (hot) -> heat-1 (dull red) -> gone.
   -------------------------------------------------------------------------- */
.df-hot, .df-btn, .df-link, .df-prose a, .df-sheetnav__link, .df-more__summary, .df-fig__frame,
.df-motion-toggle, .df-sight__btn, .df-seg__btn, .df-chip, .df-register a, .df-zoom__close {
  --df-glow: color-mix(in oklab, var(--upton-heat-6) calc(var(--df-heat) * 100%), var(--upton-heat-1));
  --df-glow-a: color-mix(in srgb, var(--df-glow) calc(var(--df-heat) * 75%), transparent);
  transition: --df-heat var(--df-cool-dur) var(--df-cool-ease);
}
:is(.df-hot, .df-btn, .df-link, .df-prose a, .df-sheetnav__link, .df-more__summary, .df-fig__frame,
.df-motion-toggle, .df-sight__btn, .df-seg__btn, .df-chip, .df-register a, .df-zoom__close):is(:hover, :focus-visible) {
  --df-heat: 1;
  transition-duration: var(--df-heat-dur);
  transition-timing-function: var(--df-heat-ease);
}
:root[data-motion="reduced"] :is(.df-hot, .df-btn, .df-link, .df-prose a, .df-sheetnav__link, .df-more__summary, .df-fig__frame,
.df-motion-toggle, .df-sight__btn, .df-seg__btn, .df-chip, .df-register a, .df-zoom__close) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :is(.df-hot, .df-btn, .df-link, .df-prose a, .df-sheetnav__link, .df-more__summary, .df-fig__frame,
  .df-motion-toggle, .df-sight__btn, .df-seg__btn, .df-chip, .df-register a, .df-zoom__close) { transition: none; }
}
/* Generic opt-in: any element with .df-hot gets the halo */
.df-hot { box-shadow: 0 0 calc(var(--df-heat) * 22px) calc(var(--df-heat) * 2px) var(--df-glow-a); }

/* Links: copper underline that flashes orange and cools back to copper */
.df-link, .df-prose a {
  color: var(--df-link);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in oklab, var(--upton-heat-5) calc(var(--df-heat) * 100%), var(--kdl-copper-500));
  text-decoration-thickness: calc(1px + var(--df-heat) * 2px);
  text-underline-offset: calc(3px + var(--df-heat) * 1px);
  text-decoration-skip-ink: auto;
}

/* Buttons */
.df-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: 4px;
  font: 600 15px/1.2 var(--kdl-font-sans); letter-spacing: .005em;
  text-decoration: none; white-space: nowrap;
  background: var(--kdl-red-500); color: #fff;
  box-shadow:
    inset 0 calc(var(--df-heat) * -3px) 0 color-mix(in srgb, var(--upton-heat-6) calc(var(--df-heat) * 100%), transparent),
    0 0 calc(var(--df-heat) * 26px) calc(var(--df-heat) * 1px) var(--df-glow-a);
}
.df-btn:hover { background: var(--kdl-red-600); }
.df-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.df-btn--ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.df-btn--dark { background: var(--upton-furnace-900); color: var(--kdl-gray-50); }
.df-btn--dark:hover { background: #000; }
.df-btn--sm { min-height: 36px; padding: 6px 12px; font-size: 13.5px; }
.df-btn:disabled, .df-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Chips (links to ideas, filters) */
.df-chip {
  display: inline-flex; align-items: baseline; gap: .5em;
  padding: 5px 10px; border: 1px solid var(--df-rule-strong); border-radius: 3px;
  font: 500 13px/1.3 var(--kdl-font-mono); letter-spacing: .02em; text-decoration: none; color: inherit;
  box-shadow: 0 0 calc(var(--df-heat) * 16px) var(--df-glow-a);
  border-color: color-mix(in oklab, var(--upton-heat-5) calc(var(--df-heat) * 100%), var(--df-rule-strong));
}

/* --------------------------------------------------------------------------
   4. Surfaces (sheets)
   -------------------------------------------------------------------------- */
.df-sheet {
  position: relative;
  padding-block: clamp(64px, 9vw, 128px);
  background: var(--upton-paper);
  color: var(--df-ink);
  --df-surface: var(--upton-paper);
}
.df-sheet--paper { background: var(--df-grid-paper), var(--upton-paper); }
.df-sheet--blueprint {
  background: var(--df-grid-blueprint), var(--upton-blueprint);
  color: var(--kdl-gray-100);
  --df-surface: var(--upton-blueprint);
  --df-ink: #fff;
  --df-ink-2: var(--kdl-blue-100);       /* 12:1 on blue-900 */
  --df-rule: rgba(126,195,232,.28);
  --df-rule-strong: rgba(126,195,232,.6);
  --df-link: var(--kdl-copper-300);
  --df-focus: var(--kdl-copper-300);
}
.df-sheet--furnace {
  background: var(--df-grid-kdl), var(--upton-furnace-900);
  color: var(--kdl-gray-100);
  --df-surface: var(--upton-furnace-900);
  --df-ink: #fff;
  --df-ink-2: var(--kdl-gray-300);       /* 8.9:1 on furnace-900 */
  --df-rule: rgba(163,174,184,.22);
  --df-rule-strong: rgba(163,174,184,.5);
  --df-link: var(--kdl-copper-300);
  --df-focus: var(--kdl-copper-300);
}
.df-sheet--blueprint ::selection, .df-sheet--furnace ::selection { background: var(--upton-heat-6); color: var(--upton-furnace-900); }

/* Drawing-sheet sheet stamp in the top-right margin: "SHEET 03 / 10" */
.df-sheet__stamp {
  position: absolute; top: clamp(16px, 2.4vw, 28px); right: var(--df-gutter);
  color: var(--df-ink-2);
}
.df-sheet__stamp b { color: var(--df-ink); font-weight: 500; }

/* Generic section heading block (sheets that are not theme openers) */
.df-sheet__head { display: grid; gap: 14px; max-width: 60ch; margin-bottom: clamp(32px, 5vw, 56px); }
.df-sheet__code { color: var(--df-ink-2); display: flex; gap: 12px; align-items: center; }
.df-sheet__code::after { content: ""; flex: 0 0 48px; height: 1px; background: currentColor; opacity: .6; }
.df-sheet__title { font-size: var(--df-fs-h2); line-height: 1.02; letter-spacing: -.025em; color: var(--df-ink); }
.df-sheet__lede { font-size: var(--df-fs-lede); line-height: 1.5; color: var(--df-ink-2); max-width: 56ch; }
.df-sheet--paper .df-sheet__lede { color: var(--kdl-gray-600); }

/* --------------------------------------------------------------------------
   5. Cover: the furnace room
   -------------------------------------------------------------------------- */
.df-cover {
  --df-focus: var(--kdl-copper-300);
  --df-link: var(--kdl-copper-300);
  --df-ink: #fff;
  --df-ink-2: var(--kdl-gray-300);
  --df-rule: rgba(163,174,184,.24);
  --df-rule-strong: rgba(163,174,184,.5);
  --df-surface: var(--upton-furnace-900);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(100svh, 1040px);
  padding-block: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 72px);
  background:
    radial-gradient(ellipse 55% 60% at 74% 30%, rgba(206,32,41,.16), rgba(94,12,16,.08) 45%, transparent 70%),
    var(--df-grid-kdl),
    var(--upton-furnace-900);
  color: var(--kdl-gray-100);
}
/* the drawing: Upton's own U-E general arrangement, cold linework + a fired core */
.df-cover__art {
  position: absolute; z-index: -1;
  top: clamp(40px, 5vw, 76px); right: max(-6vw, calc((100vw - 1520px) / 2 - 120px));
  width: min(52vw, 860px); aspect-ratio: 612 / 792;
  pointer-events: none;
  transition: --df-torch 1.6s cubic-bezier(.2, .7, .2, 1);   /* the torch cools slowly */
}
.df-cover.is-torch .df-cover__art { --df-torch: 16%; transition-duration: .3s; }
/* wide screens: keep the whole sheet, labels included, inside the viewport */
@media (min-width: 1320px) {
  .df-cover__art { right: max(-1vw, calc((100vw - 1520px) / 2 - 40px)); width: min(50vw, 820px); }
}
@media (max-width: 1100px) {
  .df-cover__art {
    width: min(58vw, 620px); right: -12vw; top: 24px; opacity: .8;
    -webkit-mask: linear-gradient(180deg, #000 0 50%, transparent 72%);
    mask: linear-gradient(180deg, #000 0 50%, transparent 72%);
  }
}
@media (max-width: 760px) {
  .df-cover__art {
    width: 118vw; right: -52vw; top: 36px; opacity: .6;
    -webkit-mask: linear-gradient(180deg, #000 0 36%, transparent 52%);
    mask: linear-gradient(180deg, #000 0 36%, transparent 52%);
  }
}
.df-cover__art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.df-cover__cold { opacity: .42; }
.df-cover__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 48.5% 22.5%, rgba(245,161,58,.28), rgba(206,32,41,.16) 16%, transparent 34%),
    radial-gradient(ellipse 30% 14% at 48.5% 60%, rgba(232,84,30,.16), transparent 70%);
  mix-blend-mode: screen;
}
.df-cover__hot {
  -webkit-mask: radial-gradient(ellipse 25% 19.5% at 48.5% 22.5%, #000 0, #000 calc(var(--df-cover-heat) * .42), transparent var(--df-cover-heat)),
                radial-gradient(ellipse 24% 11% at 48.5% 57%, rgba(0,0,0,.8) 0, transparent var(--df-cover-heat)),
                radial-gradient(circle at var(--mx, 50%) var(--my, 30%), #000 0, #000 calc(var(--df-torch) * .35), transparent var(--df-torch));
  mask: radial-gradient(ellipse 25% 19.5% at 48.5% 22.5%, #000 0, #000 calc(var(--df-cover-heat) * .42), transparent var(--df-cover-heat)),
        radial-gradient(ellipse 24% 11% at 48.5% 57%, rgba(0,0,0,.8) 0, transparent var(--df-cover-heat)),
        radial-gradient(circle at var(--mx, 50%) var(--my, 30%), #000 0, #000 calc(var(--df-torch) * .35), transparent var(--df-torch));
  filter: drop-shadow(0 0 5px rgba(232,84,30,.6));
}

.df-cover__inner { position: relative; display: grid; gap: clamp(20px, 3vw, 32px); max-width: 1520px; }
.df-cover__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.df-cover__eyebrow { margin: 0; color: var(--kdl-copper-300); }
.df-cover__eyebrow span { color: var(--kdl-gray-300); }

.df-cover__title {
  margin-top: clamp(24px, 7vh, 88px);
  font-size: var(--df-fs-display);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.045em;
  color: #fff;
  text-wrap: nowrap;
}
.df-cover__title > span { display: inline-block; }
.df-cover__line { display: block !important; }
/* "Drawn": the word as linework */
.df-cover__drawn {
  color: transparent;
  -webkit-text-stroke: max(1.5px, .012em) var(--kdl-blue-200);
  paint-order: stroke fill;
  position: relative;
}
/* dimension line above "Drawn" (drafting annotation) */
.df-cover__drawn::before {
  content: attr(data-dim);
  position: absolute; left: 0; right: .06em; top: -.34em;
  height: 12px;
  font: 500 12px/1 var(--kdl-font-mono); letter-spacing: .08em; color: var(--kdl-blue-200);
  display: flex; justify-content: center; align-items: center;
  -webkit-text-stroke: 0;
  background:
    linear-gradient(var(--kdl-blue-200), var(--kdl-blue-200)) left center / calc(50% - 5ch) 1px no-repeat,
    linear-gradient(var(--kdl-blue-200), var(--kdl-blue-200)) right center / calc(50% - 5ch) 1px no-repeat,
    linear-gradient(var(--kdl-blue-200), var(--kdl-blue-200)) left top / 1px 100% no-repeat,
    linear-gradient(var(--kdl-blue-200), var(--kdl-blue-200)) right top / 1px 100% no-repeat;
  opacity: .9;
}
.df-cover__amp {
  font-family: var(--kdl-font-mono); font-weight: 400;
  font-size: .3em; letter-spacing: 0; vertical-align: 1.72em;
  color: var(--kdl-gray-300);
  margin: 0 .22em 0 .06em;
}
/* "Fired": molten. Static copper-300 when motion is reduced. */
.df-cover__fired {
  color: var(--kdl-copper-300);
  padding-right: .04em;
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) .df-cover__fired {
    background: linear-gradient(100deg, var(--upton-heat-3) 0%, var(--upton-heat-5) 16%, var(--upton-heat-6) 30%, var(--upton-heat-7) 42%, var(--upton-heat-6) 52%, var(--upton-heat-5) 64%, var(--upton-heat-3) 80%, var(--upton-heat-5) 92%, var(--upton-heat-6) 100%) 0 50% / 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: df-molten 14s ease-in-out infinite alternate, df-fire-in 1.6s var(--df-ease) both;
    filter: drop-shadow(0 0 .08em rgba(232,84,30,.35));
  }
  :root:not([data-motion="reduced"]) .df-cover__hot { animation: df-cover-heat 2.8s cubic-bezier(.3,0,.2,1) .35s both; }
  :root:not([data-motion="reduced"]) .df-cover__glow { animation: df-cover-glow 2.8s cubic-bezier(.3,0,.2,1) .35s both; }
}
/* off screen, the 14s molten loop stops repainting (proposal.js toggles data-offscreen) */
.df-cover[data-offscreen] .df-cover__fired { animation-play-state: paused; }
@keyframes df-molten { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes df-fire-in { from { filter: brightness(.35) drop-shadow(0 0 0 transparent); } to { filter: brightness(1) drop-shadow(0 0 .08em rgba(232,84,30,.35)); } }
@keyframes df-cover-heat { from { --df-cover-heat: 0%; } to { --df-cover-heat: 100%; } }
@keyframes df-cover-glow { from { opacity: 0; } to { opacity: 1; } }

.df-cover__subtitle {
  max-width: 30ch;
  font-size: clamp(21px, 1rem + 1.1vw, 30px);
  line-height: 1.25; font-weight: 500; letter-spacing: -.01em;
  color: #fff;
}
.df-cover__intro {
  max-width: 56ch;
  font-size: clamp(17px, .95rem + .25vw, 19px);
  line-height: 1.62;
  color: var(--kdl-gray-200);        /* 13:1 on furnace-900 */
}
.df-cover__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.df-cover__foot {
  display: grid; gap: 24px; align-items: end;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(8px, 2vw, 24px);
}
@media (min-width: 1000px) {
  .df-cover__foot { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Enamel nameplate holding the real logo */
.df-logo-plate {
  display: inline-flex; align-items: center; justify-content: center;
  width: 128px; aspect-ratio: 3 / 2; padding: 12px 14px;
  border-radius: 6px;
  background: var(--df-rivets), linear-gradient(180deg, #ffffff, #eef1f3);
  box-shadow: inset 0 0 0 1px rgba(20,24,29,.25), inset 0 -2px 0 rgba(20,24,29,.12), 0 10px 26px rgba(0,0,0,.45);
}
.df-logo-plate img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   6. Title block (drawing title block; reused on cover, report, traveler)
   -------------------------------------------------------------------------- */
.df-titleblock {
  display: grid;
  grid-template-columns: repeat(var(--df-tb-cols, 4), minmax(0, auto));
  border: 1px solid var(--df-rule-strong);
  margin: 0;
  font-family: var(--kdl-font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
}
.df-titleblock > div {
  padding: 7px 12px 8px;
  border-right: 1px solid var(--df-rule);
  border-bottom: 1px solid var(--df-rule);
  min-width: 0;
}
.df-titleblock dt {
  font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--df-ink-2);
}
.df-titleblock dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; color: var(--df-ink); white-space: nowrap; }
.df-titleblock .df-titleblock__wide { grid-column: span 2; }
.df-titleblock .df-titleblock__full { grid-column: 1 / -1; }
.df-titleblock .df-titleblock__full dd { white-space: normal; font-size: 13px; }
@media (max-width: 640px) {
  .df-titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .df-titleblock dd { white-space: normal; }
}

/* --------------------------------------------------------------------------
   7. Sheet index (sticky drawing-sheet nav)
   -------------------------------------------------------------------------- */
.df-sheetnav {
  position: sticky; top: 0; z-index: 50;
  height: var(--df-nav-h);
  background: rgba(18, 13, 11, .94);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  color: var(--kdl-gray-200);
  border-top: 1px solid rgba(163,174,184,.22);
  border-bottom: 1px solid rgba(163,174,184,.32);
  --df-focus: var(--kdl-copper-300);
}
.df-sheetnav__inner {
  display: flex; align-items: stretch; height: 100%;
  max-width: calc(var(--df-wrap) + 240px); margin-inline: auto;
}
.df-sheetnav__brand {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 16px 0 max(12px, calc(var(--df-gutter) - 4px));
  border-right: 1px solid rgba(163,174,184,.22);
  color: #fff; text-decoration: none;
  font: 600 14px/1 var(--kdl-font-sans); letter-spacing: -.005em; white-space: nowrap;
}
.df-sheetnav__brand svg { width: 22px; height: 22px; flex: none; }
.df-sheetnav__list {
  flex: 1 1 auto; min-width: 0;
  display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.df-sheetnav__list::-webkit-scrollbar { display: none; }
.df-sheetnav__list > li { flex: none; display: flex; }
.df-sheetnav__link {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  border-right: 1px solid rgba(163,174,184,.14);
  color: var(--kdl-gray-300);
  text-decoration: none; white-space: nowrap;
  font-size: 14px; font-weight: 500;
  text-shadow: 0 0 calc(var(--df-heat) * 14px) var(--df-glow-a);
}
.df-sheetnav__link:hover { color: #fff; }
.df-sheetnav__link:focus-visible { outline-offset: -4px; }
.df-sheetnav__code {
  font: 500 11.5px/1 var(--kdl-font-mono); letter-spacing: .06em;
  color: var(--kdl-gray-300);
  padding: 3px 5px; border: 1px solid rgba(163,174,184,.3); border-radius: 2px;
}
/* you are here: copper text, heat bar under the cell, pilot lit */
.df-sheetnav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--upton-heat-bar);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--df-cool-dur) var(--df-cool-ease);
}
.df-sheetnav__link[aria-current="true"], .df-sheetnav__link[aria-current="location"] { color: var(--kdl-copper-300); }
.df-sheetnav__link[aria-current="true"] .df-sheetnav__code,
.df-sheetnav__link[aria-current="location"] .df-sheetnav__code { color: var(--upton-furnace-900); background: var(--kdl-copper-300); border-color: var(--kdl-copper-300); }
.df-sheetnav__link[aria-current="true"]::after, .df-sheetnav__link[aria-current="location"]::after { transform: scaleX(1); transition-duration: 260ms; }
:root[data-motion="reduced"] .df-sheetnav__link::after { transition: none; }
.df-sheetnav__tools {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 max(12px, calc(var(--df-gutter) - 4px)) 0 12px;
  border-left: 1px solid rgba(163,174,184,.22);
}
@media (max-width: 720px) {
  .df-sheetnav__brand .df-sheetnav__brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .df-sheetnav__brand { padding-right: 12px; }
  .df-sheetnav__link { padding: 0 11px; }
  .df-sheetnav__link:not([aria-current]) .df-sheetnav__label { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   8. Motion toggle (global; every instance mirrors html[data-motion])
   -------------------------------------------------------------------------- */
.df-motion-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 34px; padding: 5px 11px 5px 7px;
  border: 1px solid rgba(163,174,184,.45); border-radius: 999px;
  background: rgba(10,13,17,.55); color: var(--kdl-gray-100);
  font: 500 12.5px/1 var(--kdl-font-mono); letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 0 calc(var(--df-heat) * 14px) var(--df-glow-a);
}
.df-motion-toggle__track {
  position: relative; flex: none;
  width: 30px; height: 18px; border-radius: 999px;
  background: #0a0d11; box-shadow: inset 0 0 0 1px rgba(163,174,184,.55);
}
/* the knob is a pilot lamp: lit (hot) = motion on */
.df-motion-toggle__track::after {
  content: ""; position: absolute; top: 3px; left: 15px;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--upton-heat-8), var(--upton-heat-6) 40%, var(--upton-heat-5) 75%);
  box-shadow: 0 0 8px 1px rgba(245,161,58,.65);
  transition: left 200ms var(--df-ease), background 600ms, box-shadow 600ms;
}
.df-motion-toggle[aria-pressed="true"] .df-motion-toggle__track::after {
  left: 3px;
  background: radial-gradient(circle at 40% 35%, #8a939c, #444c56 70%);
  box-shadow: none;
}
.df-motion-toggle[aria-disabled="true"] { opacity: .8; cursor: not-allowed; }
.df-motion-toggle--light { background: #fff; color: var(--kdl-gray-800); border-color: var(--kdl-gray-400); }
.df-motion-toggle--light .df-motion-toggle__track { background: var(--kdl-gray-100); box-shadow: inset 0 0 0 1px var(--kdl-gray-400); }
@media (max-width: 560px) {
  .df-sheetnav .df-motion-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .df-sheetnav .df-motion-toggle { padding: 5px 7px; }
}

/* --------------------------------------------------------------------------
   8b. Reading mode toggle (Skim | Full), shortlist key and nav counter,
       sheet-nav progress bar. Same heat interaction as every other control.
   -------------------------------------------------------------------------- */
.df-read-toggle, .df-pick, .df-sheetnav__picks {
  --df-glow: color-mix(in oklab, var(--upton-heat-6) calc(var(--df-heat) * 100%), var(--upton-heat-1));
  --df-glow-a: color-mix(in srgb, var(--df-glow) calc(var(--df-heat) * 75%), transparent);
  transition: --df-heat var(--df-cool-dur) var(--df-cool-ease);
}
:is(.df-read-toggle, .df-pick, .df-sheetnav__picks):is(:hover, :focus-visible) { --df-heat: 1; transition-duration: var(--df-heat-dur); transition-timing-function: var(--df-heat-ease); }
:root[data-motion="reduced"] :is(.df-read-toggle, .df-pick, .df-sheetnav__picks) { transition: none; }
@media (prefers-reduced-motion: reduce) { :is(.df-read-toggle, .df-pick, .df-sheetnav__picks) { transition: none; } }

/* Skim mode: a pill like the motion toggle; pressed = skim on (copper) */
.df-read-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 5px 12px 5px 10px;
  border: 1px solid rgba(163,174,184,.45); border-radius: 999px;
  background: rgba(10,13,17,.55); color: var(--kdl-gray-100);
  font: 500 12.5px/1 var(--kdl-font-mono); letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 0 calc(var(--df-heat) * 14px) var(--df-glow-a);
}
.df-read-toggle__icon { width: 15px; height: 15px; flex: none; }
.df-read-toggle[aria-pressed="true"] { border-color: var(--kdl-copper-300); color: var(--kdl-copper-300); background: rgba(126,61,20,.28); }

/* The shortlist pilot lamp: dark when off, lit along the heat ramp when on */
.df-pick__pilot {
  display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8a939c, #444c56 70%);
  box-shadow: inset 0 0 0 1px rgba(10,13,17,.45);
  transition: background 600ms, box-shadow 600ms;
}
:is(.df-pick[aria-pressed="true"], .df-sheetnav__picks[data-lit], .pg-picks__key) .df-pick__pilot {
  background: radial-gradient(circle at 40% 35%, var(--upton-heat-8), var(--upton-heat-6) 38%, var(--upton-heat-5) 72%, var(--upton-heat-3));
  box-shadow: 0 0 8px 1px rgba(245,161,58,.7);
}
:root[data-motion="reduced"] .df-pick__pilot { transition: none; }

/* On the nameplate: an engraved key */
.df-plate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.df-plate__fields { flex: 1 1 auto; min-width: 0; }
.df-pick {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  min-height: 36px; padding: 6px 14px 6px 11px;
  border: 1px solid rgba(20,24,29,.5); border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.12));
  color: var(--kdl-gray-900);
  font: 500 12px/1 var(--kdl-font-mono); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 rgba(20,24,29,.15), 0 0 calc(var(--df-heat) * 14px) var(--df-glow-a);
  cursor: pointer;
}
.df-pick:hover { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.3)); }
.df-pick[aria-pressed="true"] { background: var(--kdl-gray-800); color: #fff; border-color: var(--kdl-gray-900); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 calc(var(--df-heat) * 14px) var(--df-glow-a); }
@container df-idea (max-width: 620px) {
  .df-pick { margin-left: auto; }
}

/* In the sheet index: pilot + count, links to the list at the roadmap */
.df-sheetnav__picks {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 5px 11px 5px 10px;
  border: 1px solid rgba(163,174,184,.45); border-radius: 999px;
  color: var(--kdl-gray-100); text-decoration: none; white-space: nowrap;
  font: 500 12.5px/1 var(--kdl-font-mono); letter-spacing: .02em;
  box-shadow: 0 0 calc(var(--df-heat) * 14px) var(--df-glow-a);
}
.df-sheetnav__picks:hover { color: #fff; }
.df-sheetnav__picks-n { min-width: 1.4em; padding: 2px 4px; border-radius: 3px; text-align: center; font-weight: 500; background: rgba(163,174,184,.16); font-variant-numeric: tabular-nums; }
.df-sheetnav__picks[data-lit] .df-sheetnav__picks-n { background: var(--kdl-copper-300); color: var(--upton-furnace-900); }

/* Progress: a 2px heat bar along the top edge of the sheet index */
.df-sheetnav::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; z-index: 1;
  background: var(--upton-heat-bar);
  transform-origin: left; transform: scaleX(0);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    :root:not([data-motion="reduced"]) .df-sheetnav::before { animation: df-progress linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes df-progress { to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   9. Theme opener + heat bar
   -------------------------------------------------------------------------- */
.df-opener {
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(40px, 6vw, 72px);
}
.df-opener__code {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  color: var(--df-ink-2);
}
.df-opener__num {
  font: 500 clamp(64px, 3rem + 5vw, 132px)/.8 var(--kdl-font-mono);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums slashed-zero;
  color: transparent;
  -webkit-text-stroke: 1.25px currentColor;
}
.df-sheet--paper .df-opener__num { color: transparent; -webkit-text-stroke-color: var(--kdl-gray-500); }
.df-sheet--blueprint .df-opener__num { -webkit-text-stroke-color: var(--kdl-blue-200); }
.df-sheet--furnace .df-opener__num { -webkit-text-stroke-color: var(--kdl-gray-300); }
.df-opener__main { display: grid; gap: 18px; align-content: start; }
.df-opener__title { font-size: var(--df-fs-h2); line-height: 1; letter-spacing: -.03em; color: var(--df-ink); max-width: 18ch; }
.df-opener__tagline { font-size: var(--df-fs-lede); line-height: 1.45; color: var(--df-ink-2); max-width: 52ch; margin: 0; }
.df-sheet--paper .df-opener__tagline { color: var(--kdl-gray-600); }
@media (min-width: 960px) {
  .df-opener { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: end; }
  .df-opener__code, .df-opener__heat { grid-column: 1 / -1; }
  .df-opener__main { grid-column: 1; align-self: start; }
  .df-opener__register { grid-column: 2; align-self: end; }
}

/* The heat bar: a track that fills with the ramp as the opener scrolls in */
.df-heatbar {
  position: relative; display: block;
  height: 6px; border-radius: 1px;
  background: color-mix(in srgb, var(--df-ink) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--df-ink) 14%, transparent);
  overflow: clip;            /* clip, not hidden: hidden would make this a scroller and break view() */
}
.df-sheet--blueprint .df-heatbar, .df-sheet--furnace .df-heatbar, .df-cover .df-heatbar { box-shadow: 0 0 0 1px var(--kdl-gray-400); background: rgba(10,13,17,.5); }
.df-heatbar::before {
  content: ""; position: absolute; inset: 0;
  background: var(--upton-heat-bar);
  clip-path: inset(0 0 0 0);
}
.df-heatbar__scale {
  display: flex; justify-content: space-between; margin-top: 8px;
  color: var(--df-ink-2); font-size: 11px;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :root:not([data-motion="reduced"]) .df-heatbar::before {
      animation: df-heatbar-fill linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
  }
}
@keyframes df-heatbar-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* --------------------------------------------------------------------------
   10. Register (drawing register table: ideas in a theme, appendix lists)
   -------------------------------------------------------------------------- */
.df-register { width: 100%; border-collapse: collapse; font-size: 15px; }
.df-register caption { text-align: left; padding-bottom: 8px; color: var(--df-ink-2); }
.df-register th, .df-register td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--df-rule); }
.df-register thead th { font: 500 11px/1.2 var(--kdl-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--df-ink-2); border-bottom-color: var(--df-rule-strong); }
.df-register td:first-child, .df-register th:first-child { padding-left: 0; }
.df-register .df-register__code { font: 500 13px/1.45 var(--kdl-font-mono); color: var(--df-ink-2); white-space: nowrap; }
.df-register a { color: var(--df-ink); text-decoration: none; background-image: linear-gradient(color-mix(in oklab, var(--upton-heat-5) calc(var(--df-heat) * 100%), var(--kdl-copper-500)), currentColor); background-size: 100% calc(1px + var(--df-heat) * 2px), 0 0; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px; }
.df-register td.df-register__num { font: 500 13px/1.45 var(--kdl-font-mono); text-align: right; white-space: nowrap; }
.df-register th.df-register__num { text-align: right; }
.df-opener__register { font-size: 14.5px; }
.df-opener__register .df-register__code { font-size: 12px; }
.df-opener__register td, .df-opener__register th { padding-block: 8px; }
@media (max-width: 640px) {
  .df-opener__register thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .df-opener__register, .df-opener__register tbody { display: block; }
  .df-opener__register tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--df-rule); }
  .df-opener__register td { border: 0; padding: 0; }
  .df-opener__register td:nth-child(1) { grid-column: 1; margin-bottom: 2px; }
  .df-opener__register td:nth-child(2) { grid-column: 1; }
  .df-opener__register td.df-register__num { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* --------------------------------------------------------------------------
   11. Rubber stamps (grades, tiers). Double-ruled, rotated, red-500 ink.
   Never "certified" or "approved".
   -------------------------------------------------------------------------- */
.df-stamp {
  --df-stamp-rot: -5deg;
  --df-stamp-ink: var(--kdl-red-500);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9em; padding: .08em .28em .1em;
  border: .11em double var(--df-stamp-ink);
  border-width: max(4px, .11em);
  border-radius: .14em;
  color: var(--df-stamp-ink);
  font: 700 38px/1 var(--kdl-font-sans);
  letter-spacing: -.02em;
  transform: rotate(var(--df-stamp-rot));
  /* ink texture: a data-URI turbulence mask (no local file, works on file://) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.05'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 120px 120px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.05'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 120px 120px;
  font-variant-numeric: tabular-nums;
}
.df-stamp sup { font-size: .55em; vertical-align: .5em; margin-left: .02em; }
.df-stamp--lg { font-size: 56px; }
.df-stamp--sm { font-size: 24px; }
/* word stamps: tiers, "sample", "verify" */
.df-stamp--word {
  font: 500 12px/1 var(--kdl-font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  padding: .55em .7em .5em .8em; min-width: 0;
  border-width: 4px; border-radius: 3px;
  --df-stamp-rot: -2.5deg;
}
.df-stamp--word.df-stamp--lg { font-size: 15px; }
/* grade-driven rotation so a column of stamps looks hand-applied */
.df-stamp[data-grade^="A"] { --df-stamp-rot: -3deg; }
.df-stamp[data-grade^="B"] { --df-stamp-rot: 4deg; }
.df-stamp[data-grade^="C"] { --df-stamp-rot: -6deg; }
.df-stamp[data-grade^="D"] { --df-stamp-rot: -9deg; }
.df-stamp[data-grade^="F"] { --df-stamp-rot: 7deg; }
tr:nth-child(3n+2) .df-stamp[data-grade^="C"] { --df-stamp-rot: 3deg; }
tr:nth-child(3n) .df-stamp[data-grade^="C"] { --df-stamp-rot: -2deg; }
.df-sheet--blueprint .df-stamp, .df-sheet--furnace .df-stamp, .df-cover .df-stamp { --df-stamp-ink: var(--kdl-red-300); }

/* --------------------------------------------------------------------------
   12. Report card: inspection sheet on drafting paper
   -------------------------------------------------------------------------- */
.df-inspection {
  position: relative;
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(0,120,185,.07) 31px 32px),
    var(--df-paper-2);
  border: 1px solid var(--df-rule-strong);
  box-shadow: 0 1px 0 rgba(18,13,11,.08), 0 22px 50px -18px rgba(18,13,11,.35), 6px 6px 0 -1px var(--df-paper-2), 6px 6px 0 0 var(--df-rule-strong);
  color: var(--kdl-gray-800);
  --df-ink: var(--kdl-gray-800);
  --df-ink-2: var(--kdl-gray-500);
  --df-surface: var(--df-paper-2);
}
.df-inspection__head {
  display: grid; gap: 18px; align-items: end;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(20px, 3vw, 32px);
  border-bottom: 2px solid var(--kdl-gray-800);
}
@media (min-width: 900px) { .df-inspection__head { grid-template-columns: minmax(0, 1fr) auto; } }
.df-inspection__kind { color: var(--kdl-red-600); margin: 0 0 8px; }
.df-inspection__title { font-size: clamp(28px, 1.2rem + 2vw, 44px); letter-spacing: -.02em; line-height: 1.05; }
.df-inspection__head .df-titleblock { --df-tb-cols: 3; --df-rule: rgba(18,13,11,.2); --df-rule-strong: rgba(18,13,11,.55); }
.df-inspection__table { width: 100%; border-collapse: collapse; }
.df-inspection__table thead th {
  font: 500 11px/1.2 var(--kdl-font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--kdl-gray-500); text-align: left;
  padding: 12px clamp(12px, 2vw, 20px); border-bottom: 1px solid rgba(18,13,11,.45);
}
.df-inspection__table tbody th, .df-inspection__table td {
  text-align: left; vertical-align: middle;
  padding: 14px clamp(12px, 2vw, 20px);
  border-bottom: 1px solid rgba(18,13,11,.16);
}
.df-inspection__table tbody tr:last-child > * { border-bottom: 0; }
.df-inspection__table tbody th { width: 32%; font-weight: 600; font-size: 17px; line-height: 1.3; }
.df-inspection__item { display: block; font: 500 12px/1.2 var(--kdl-font-mono); color: var(--kdl-gray-500); letter-spacing: .06em; margin-bottom: 3px; }
.df-inspection__grade { width: 120px; text-align: center !important; }
.df-inspection__table td:last-child { color: var(--kdl-gray-600); font-size: 16px; line-height: 1.5; max-width: 60ch; }
.df-inspection__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding: 14px clamp(12px, 2vw, 20px); border-top: 2px solid var(--kdl-gray-800);
  color: var(--kdl-gray-500);
}
@media (max-width: 680px) {
  .df-inspection__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .df-inspection__table, .df-inspection__table tbody, .df-inspection__table tr { display: block; }
  .df-inspection__table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
    padding: 16px 16px; border-bottom: 1px solid rgba(18,13,11,.16);
  }
  .df-inspection__table tbody th, .df-inspection__table td { display: block; padding: 0; border: 0; width: auto; }
  .df-inspection__table td:last-child { grid-column: 1 / -1; margin-top: 8px; }
  .df-inspection__grade { grid-column: 2; grid-row: 1; width: auto; }
  .df-inspection__grade .df-stamp { font-size: 30px; }
}

/* --------------------------------------------------------------------------
   13. Idea card = mini data sheet
   -------------------------------------------------------------------------- */
.df-ideas { display: grid; gap: clamp(40px, 6vw, 72px); }
.df-idea {
  container: df-idea / inline-size;
  position: relative;
  background: var(--df-paper-2);
  color: var(--kdl-gray-800);
  border: 1px solid rgba(18,13,11,.35);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(18,13,11,.06), 0 30px 60px -30px rgba(10,13,17,.45);
  scroll-margin-top: calc(var(--df-nav-h) + 20px);
  /* inside a card we are back on paper, whatever the section is */
  --df-ink: var(--kdl-gray-800);
  --df-ink-2: var(--kdl-gray-500);
  --df-rule: rgba(18,13,11,.14);
  --df-rule-strong: rgba(18,13,11,.4);
  --df-link: var(--kdl-copper-700);
  --df-focus: var(--kdl-copper-500);
  --df-surface: var(--df-paper-2);
  --df-rail: clamp(150px, 19cqi, 210px);
}
.df-sheet--blueprint .df-idea { border-color: rgba(126,195,232,.5); box-shadow: 0 0 0 6px rgba(126,195,232,.06), 0 40px 70px -30px rgba(0,0,0,.7); }
.df-sheet--furnace .df-idea { border-color: rgba(163,174,184,.4); box-shadow: 0 40px 70px -30px rgba(0,0,0,.8); }

/* 13a. Riveted brushed-steel nameplate */
.df-plate {
  position: relative;
  padding: 14px 30px;
  border-radius: 7px 7px 0 0;
  background: var(--df-rivets), var(--df-plate);
  border-bottom: 1px solid #8a939c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(20,24,29,.12);
  color: var(--kdl-gray-800);
}
.df-plate__fields {
  display: flex; flex-wrap: wrap; align-items: stretch;
  margin: 0; row-gap: 8px;
}
.df-plate__field {
  display: grid; align-content: center; gap: 3px;
  padding: 2px 18px;
  border-left: 1px solid rgba(20,24,29,.28);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.6);
  min-width: 0;
}
.df-plate__field:first-child { border-left: 0; box-shadow: none; padding-left: 0; }
.df-plate__field dt {
  font: 500 10px/1 var(--kdl-font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--kdl-gray-600);
}
.df-plate__field dd {
  margin: 0;
  font: 500 15px/1.25 var(--kdl-font-mono); letter-spacing: .02em;
  font-variant-numeric: tabular-nums slashed-zero;
  color: var(--kdl-gray-900);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);   /* engraved */
  overflow-wrap: anywhere;
}
.df-plate__field--model { flex: 1 1 260px; }
.df-plate__field--model dd { font-size: 17px; }
.df-plate__field dd .df-stamp--word { --df-stamp-ink: var(--kdl-red-700); font-size: 11px; padding: .5em .6em .45em .7em; border-width: 3px; margin-top: 1px; text-shadow: none; }
.df-plate__effort { display: inline-flex; gap: 3px; }
.df-plate__effort b {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 3px;
  font-weight: 500; font-size: 13px;
  color: var(--kdl-gray-500);
  box-shadow: inset 0 0 0 1px rgba(20,24,29,.3);
}
.df-plate__effort b[aria-current="true"], .df-plate__effort b.is-on {
  color: #fff; background: var(--kdl-gray-800);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 0 rgba(255,255,255,.6);
  text-shadow: none;
}
@container df-idea (max-width: 620px) {
  .df-plate { padding: 14px 24px; }
  .df-plate__field { padding: 2px 12px; }
  .df-plate__field--model { flex-basis: 100%; padding-left: 0; border-left: 0; box-shadow: none; padding-bottom: 6px; }
  .df-plate__field--model + .df-plate__field { border-left: 0; box-shadow: none; padding-left: 0; }
  .df-plate__field--area { display: none; }
}

/* headline-tier cards carry the heat bar under their plate */
.df-idea[data-tier="headline"] .df-plate { border-bottom: 3px solid transparent; border-image: var(--upton-heat-bar) 1; }

/* 13b. Idea head: title, pages, flags, gauges */
.df-idea__head {
  display: grid; gap: 16px 32px;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(20px, 3.4cqi, 36px) clamp(18px, 3.4cqi, 40px) clamp(20px, 3cqi, 30px);
  border-bottom: 1px solid var(--df-rule-strong);
}
@container df-idea (min-width: 760px) {
  .df-idea__head { grid-template-columns: minmax(0, 1fr) auto; }
  .df-idea__head .df-gauges { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
}
.df-idea__title { font-size: var(--df-fs-h3); line-height: 1.08; letter-spacing: -.022em; color: var(--kdl-gray-900); max-width: 26ch; }
.df-idea__pages { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font: 400 12.5px/1.3 var(--kdl-font-mono); color: var(--kdl-gray-600); }
.df-idea__pages::before { content: "Pages"; align-self: center; margin-right: 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--kdl-gray-500); }
.df-idea__pages li { padding: 3px 7px; border-radius: 2px; background: rgba(18,13,11,.05); box-shadow: inset 0 0 0 1px rgba(18,13,11,.12); overflow-wrap: anywhere; }
.df-idea__flags { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.df-idea__summary { font-size: 19px; line-height: 1.5; color: var(--kdl-gray-600); max-width: 60ch; margin: 0; }

/* 13c. Heat gauges: five segments climbing the ramp, value in Lilex */
.df-gauges { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
@container df-idea (min-width: 760px) { .df-gauges { flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--df-rule); border-radius: 4px; background: rgba(255,255,255,.55); } }
.df-gauge { display: grid; grid-template-columns: 5.6em auto 3.2em; align-items: end; gap: 10px; }
.df-gauge__label { font: 500 11px/1.1 var(--kdl-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kdl-gray-600); align-self: center; }
.df-gauge__scale { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.df-gauge__scale > i {
  display: block; width: 11px; border-radius: 1.5px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(20,24,29,.35);
}
.df-gauge__scale > i:nth-child(1) { height: 8px;  --seg: var(--upton-heat-2); }
.df-gauge__scale > i:nth-child(2) { height: 11px; --seg: var(--upton-heat-3); }
.df-gauge__scale > i:nth-child(3) { height: 14px; --seg: var(--upton-heat-4); }
.df-gauge__scale > i:nth-child(4) { height: 17px; --seg: var(--upton-heat-5); }
.df-gauge__scale > i:nth-child(5) { height: 20px; --seg: var(--upton-heat-6); }
.df-gauge[data-value="1"] .df-gauge__scale > i:nth-child(-n+1),
.df-gauge[data-value="2"] .df-gauge__scale > i:nth-child(-n+2),
.df-gauge[data-value="3"] .df-gauge__scale > i:nth-child(-n+3),
.df-gauge[data-value="4"] .df-gauge__scale > i:nth-child(-n+4),
.df-gauge[data-value="5"] .df-gauge__scale > i:nth-child(-n+5) {
  background: var(--seg);
  box-shadow: inset 0 0 0 1px rgba(20,24,29,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.df-gauge[data-value="5"] .df-gauge__scale > i:nth-child(5) { box-shadow: inset 0 0 0 1px rgba(20,24,29,.28), 0 0 10px 1px rgba(245,161,58,.6); }
.df-gauge__value { font: 500 20px/1 var(--kdl-font-mono); font-variant-numeric: tabular-nums; color: var(--kdl-gray-900); text-align: right; }
.df-gauge__max { font-size: 12px; color: var(--kdl-gray-500); margin-left: 1px; }

/* 13d. Spec rows with the left heading rail */
.df-spec {
  display: grid;
  background: linear-gradient(90deg, rgba(18,13,11,.035) 0 var(--df-rail), var(--df-rule) var(--df-rail) calc(var(--df-rail) + 1px), transparent 0);
  border-radius: 0 0 8px 8px;
}
.df-spec__row {
  display: grid; grid-template-columns: var(--df-rail) minmax(0, 1fr);
  border-bottom: 1px solid var(--df-rule);
}
.df-spec__row:last-child { border-bottom: 0; }
.df-spec__label {
  padding: 22px 16px 22px clamp(18px, 3cqi, 40px);
  font: 500 12px/1.35 var(--kdl-font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--kdl-gray-600);
}
.df-spec__num { display: block; color: var(--kdl-red-600); letter-spacing: .04em; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.df-spec__body { padding: 20px clamp(18px, 3.4cqi, 40px) 24px clamp(18px, 2.6cqi, 32px); min-width: 0; }
.df-spec__body > .df-prose, .df-spec__body > p { max-width: 70ch; }
/* wide rows (live demo): label becomes a strip above, content spans the card */
.df-spec__row--wide { grid-template-columns: minmax(0, 1fr); background: var(--df-paper-2); }
.df-spec__row--wide .df-spec__label {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 0; background: transparent;
}
.df-spec__row--wide .df-spec__num { display: inline; margin: 0; }
.df-spec__row--wide .df-spec__body { padding: 14px clamp(10px, 2.2cqi, 28px) clamp(14px, 2.6cqi, 28px); }
@container df-idea (max-width: 620px) {
  .df-spec { background: none; }
  .df-spec__row { grid-template-columns: minmax(0, 1fr); }
  .df-spec__label { padding: 18px 18px 0; display: flex; gap: 10px; align-items: baseline; }
  .df-spec__num { display: inline; margin: 0; }
  .df-spec__body { padding: 8px 18px 20px; }
  .df-spec__row--wide .df-spec__body { padding: 10px 8px 12px; }
}

/* 13e. Tags */
.df-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 3px;
  font: 500 12px/1.2 var(--kdl-font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--kdl-gray-600); box-shadow: inset 0 0 0 1px rgba(20,24,29,.3);
}
.df-tag--keep { color: #155f35; box-shadow: inset 0 0 0 1px rgba(31,138,76,.55); }
.df-tag--revise { color: var(--kdl-copper-700); box-shadow: inset 0 0 0 1px rgba(194,99,42,.6); }
.df-tag--salt { color: var(--kdl-blue-700); box-shadow: inset 0 0 0 1px rgba(0,120,185,.5); }
/* Copper hang tag: owner-decision reversal */
.df-tag--reversal {
  position: relative;
  padding: 6px 12px 6px 26px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #f5b284, var(--kdl-copper-300));
  color: var(--upton-furnace-900);
  font-weight: 500; letter-spacing: .1em;
  box-shadow: inset 0 0 0 1px var(--kdl-copper-700), 0 1px 0 rgba(18,13,11,.15);
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
  -webkit-mask: radial-gradient(circle 3.6px at 14px 50%, transparent 3px, #000 3.6px);
  mask: radial-gradient(circle 3.6px at 14px 50%, transparent 3px, #000 3.6px);
}
.df-tag--reversal::before {
  content: ""; position: absolute; left: 9.5px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%; box-shadow: 0 0 0 1px var(--kdl-copper-700);
}

/* --------------------------------------------------------------------------
   14. FIG.-numbered before-shot frame (click to zoom)
   -------------------------------------------------------------------------- */
.df-fig { margin: 0; display: grid; gap: 10px; max-width: 880px; }
.df-fig__frame {
  --df-crop: var(--kdl-gray-500);
  position: relative; display: block;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--df-rule-strong);
  color: inherit; text-decoration: none;
  cursor: zoom-in;
  box-shadow: 0 0 calc(var(--df-heat) * 24px) calc(var(--df-heat) * 2px) var(--df-glow-a);
}
/* crop marks */
.df-fig__frame::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  background:
    linear-gradient(var(--df-crop), var(--df-crop)) 0 0 / 12px 1px no-repeat, linear-gradient(var(--df-crop), var(--df-crop)) 0 0 / 1px 12px no-repeat,
    linear-gradient(var(--df-crop), var(--df-crop)) 100% 0 / 12px 1px no-repeat, linear-gradient(var(--df-crop), var(--df-crop)) 100% 0 / 1px 12px no-repeat,
    linear-gradient(var(--df-crop), var(--df-crop)) 0 100% / 12px 1px no-repeat, linear-gradient(var(--df-crop), var(--df-crop)) 0 100% / 1px 12px no-repeat,
    linear-gradient(var(--df-crop), var(--df-crop)) 100% 100% / 12px 1px no-repeat, linear-gradient(var(--df-crop), var(--df-crop)) 100% 100% / 1px 12px no-repeat;
}
.df-fig__window { position: relative; display: block; overflow: hidden; max-height: var(--df-fig-max, 440px); background: var(--kdl-gray-100); }
.df-fig__window img { display: block; width: 100%; height: auto; }
.df-fig__window::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none;
  background: linear-gradient(transparent, rgba(255,255,255,.9));
}
.df-fig__zoom {
  position: absolute; right: 24px; bottom: 24px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px 7px 9px; border-radius: 3px;
  background: var(--upton-furnace-900); color: #fff;
  font: 500 12px/1 var(--kdl-font-mono); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(10,13,17,.35);
}
.df-fig__zoom::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.6px currentColor;
  background: linear-gradient(currentColor, currentColor) center / 5px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 5px no-repeat;
}
.df-fig__cap { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 14px; line-height: 1.45; color: var(--kdl-gray-600); }
.df-fig__num { font: 500 12.5px/1.2 var(--kdl-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kdl-red-600); white-space: nowrap; }
.df-fig__where { font-family: var(--kdl-font-mono); font-size: 12.5px; color: var(--kdl-gray-500); }

/* Zoom dialog (created by proposal.js) */
.df-zoom {
  width: min(1280px, calc(100vw - 24px)); max-width: none;
  height: calc(100dvh - 24px); max-height: none;
  margin: auto; padding: 0;
  border: 1px solid rgba(163,174,184,.4); border-radius: 10px;
  background: var(--upton-furnace-900); color: var(--kdl-gray-100);
  overflow: hidden;
  --df-focus: var(--kdl-copper-300);
}
.df-zoom[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.df-zoom::backdrop { background: rgba(10, 13, 17, .82); }
.df-zoom__bar { display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 18px; border-bottom: 1px solid rgba(163,174,184,.25); }
.df-zoom__cap { flex: 1; min-width: 0; font-size: 14px; color: var(--kdl-gray-200); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-zoom__cap .df-fig__num { color: var(--kdl-copper-300); margin-right: 10px; }
.df-zoom__close {
  flex: none; min-height: 40px; padding: 6px 14px; border-radius: 4px;
  border: 1px solid rgba(163,174,184,.5); background: transparent; color: #fff;
  font: 500 13px/1 var(--kdl-font-mono); letter-spacing: .06em;
  box-shadow: 0 0 calc(var(--df-heat) * 16px) var(--df-glow-a);
}
.df-zoom__scroll { overflow: auto; padding: 16px; background: #0a0d11; }
.df-zoom__scroll img { display: block; margin-inline: auto; max-width: 100%; height: auto; background: #fff; }
.df-zoom__scroll[data-actual] img { max-width: none; }

/* --------------------------------------------------------------------------
   15. Live demo "sight-glass" frame
   -------------------------------------------------------------------------- */
.df-sight { position: relative; }
.df-sight__frame {
  --df-focus: var(--kdl-copper-300);
  --df-bolt: radial-gradient(circle closest-side, #e7ebef 0 14%, #a3aeb8 30%, #555e68 58%, #1a1e24 82%, rgba(0,0,0,0) 96%);
  position: relative;
  display: flex; flex-direction: column;
  padding: 0 16px 16px;
  border-radius: 22px;
  background: var(--df-bezel);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.4),
    0 24px 48px -20px rgba(10,13,17,.55);
  color: var(--kdl-gray-100);
}
/* bolt circle: bottom row + both sides, sitting in the bezel */
.df-sight__frame::before, .df-sight__frame::after { content: ""; position: absolute; pointer-events: none; }
.df-sight__frame::before { left: 22px; right: 22px; bottom: 2.5px; height: 11px; background: var(--df-bolt) 0 0 / 88px 11px space no-repeat; }
.df-sight__frame::after {
  top: 52px; bottom: 22px; left: 2.5px; right: 2.5px;
  background: var(--df-bolt) left top / 11px 88px no-repeat space, var(--df-bolt) right top / 11px 88px no-repeat space;
}
.df-sight__bar {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  min-height: 52px; padding: 8px 4px 8px 6px;
}
.df-sight__live {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 12px/1 var(--kdl-font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
}
/* the pilot lamp: steady glow, no loop */
.df-sight__pilot {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--upton-heat-8), var(--upton-heat-6) 35%, var(--upton-heat-5) 70%, var(--upton-heat-3));
  box-shadow: 0 0 0 2px rgba(10,13,17,.9), 0 0 10px 2px rgba(232,84,30,.6);
}
.df-sight__id {
  font: 500 12.5px/1 var(--kdl-font-mono); letter-spacing: .04em;
  color: var(--kdl-gray-300);
  padding: 5px 8px; border-radius: 3px; background: rgba(10,13,17,.55); box-shadow: inset 0 0 0 1px rgba(163,174,184,.25);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.df-sight__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.df-sight__btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 5px 12px;
  border: 1px solid rgba(163,174,184,.45); border-radius: 999px;
  background: rgba(10,13,17,.55); color: #fff;
  font: 500 12.5px/1 var(--kdl-font-mono); letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 0 calc(var(--df-heat) * 14px) var(--df-glow-a);
}
.df-sight__btn svg { width: 14px; height: 14px; flex: none; }
.df-sight__btn[aria-expanded="true"] .df-sight__icon-expand, .df-sight__btn[aria-expanded="false"] .df-sight__icon-collapse { display: none; }
.df-sight__glass {
  position: relative;
  border-radius: 12px;
  overflow: clip;            /* not hidden: keeps demos' view() timelines tied to the page scroller */
  background: var(--df-paper-2);
  color: var(--kdl-gray-800);
  box-shadow: 0 0 0 1px rgba(0,0,0,.85), 0 0 0 3px rgba(163,174,184,.22), inset 0 2px 10px rgba(0,0,0,.18);
  --df-focus: var(--kdl-copper-500);
  --df-ink: var(--kdl-gray-800);
  --df-ink-2: var(--kdl-gray-500);
  --df-rule: rgba(18,13,11,.14);
  --df-rule-strong: rgba(18,13,11,.4);
  --df-link: var(--kdl-copper-700);
  --df-surface: var(--df-paper-2);
}
/* glass: a faint edge reflection that never sits over content */
.df-sight__glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 5;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 18px 24px -24px rgba(255,255,255,.5);
}
.df-sight__note { margin: 10px 4px 0; color: var(--kdl-gray-300); font-size: 13px; }
@media (max-width: 520px) {
  .df-sight__frame { padding: 0 8px 12px; border-radius: 16px; }
  .df-sight__frame::after { display: none; }
  .df-sight__frame::before { bottom: .5px; left: 24px; right: 24px; }
  .df-sight__bar { padding-inline: 4px 0; }
  .df-sight__glass { border-radius: 9px; }
  .df-sight__id { display: none; }
  .df-sight__tools .df-motion-toggle__label, .df-sight__btn [data-df-expand-label] {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .df-sight__btn { padding-inline: 10px; }
  .df-sight__tools .df-motion-toggle { padding: 5px 7px; }
}

/* Expanded: the frame is moved into a modal <dialog> (top layer) by proposal.js */
.df-sight-dialog {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: clamp(6px, 1.2vw, 16px);
  border: 0; background: transparent; overflow: hidden;
}
.df-sight-dialog[open] { display: flex; }
.df-sight-dialog::backdrop { background: rgba(10, 13, 17, .9); }
.df-sight-dialog .df-sight__frame { flex: 1; min-height: 0; width: 100%; }
.df-sight-dialog .df-sight__glass { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.df-sight-dialog .df-sight__glass > .df-demo { min-height: 100%; }
.df-sight__placeholder {
  display: grid; place-items: center;
  border: 1px dashed var(--df-rule-strong); border-radius: 22px;
  color: var(--df-ink-2); font: 500 13px/1.4 var(--kdl-font-mono);
}

/* Demo root defaults (demos add their own scoped styles) */
.df-demo {
  container: df-demo / inline-size;
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  font-family: var(--kdl-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--kdl-gray-800);
}

/* --------------------------------------------------------------------------
   16. Shared demo helpers (optional; safe to use inside any demo)
   -------------------------------------------------------------------------- */
/* SAMPLE marker for anything not verified with Upton */
.df-sample {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 7px 3px 6px; border-radius: 2px;
  border: 1.5px dashed var(--kdl-warn);
  background: #fff8e6; color: #6b4a00;           /* 8.3:1 */
  font: 500 11px/1.15 var(--kdl-font-mono); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.df-sample::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kdl-warn); }
.df-sample--dark { background: rgba(201,138,5,.14); color: var(--upton-heat-7); border-color: var(--upton-heat-6); }
/* Segmented control (view switchers inside demos) */
.df-seg {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
  border-radius: 6px; background: var(--kdl-gray-100); box-shadow: inset 0 0 0 1px rgba(20,24,29,.18);
}
.df-seg__btn {
  min-height: 34px; padding: 6px 12px;
  border: 0; border-radius: 4px; background: transparent; color: var(--kdl-gray-600);
  font: 500 13.5px/1.1 var(--kdl-font-sans);
  box-shadow: 0 0 calc(var(--df-heat) * 12px) var(--df-glow-a);
}
.df-seg__btn:hover { color: var(--kdl-gray-900); }
.df-seg__btn[aria-pressed="true"], .df-seg__btn[aria-selected="true"], .df-seg__btn[aria-checked="true"] {
  background: #fff; color: var(--kdl-gray-900);
  box-shadow: 0 1px 2px rgba(10,13,17,.18), inset 0 -2px 0 var(--kdl-copper-500), 0 0 calc(var(--df-heat) * 12px) var(--df-glow-a);
}
.df-seg--dark { background: var(--kdl-gray-800); box-shadow: inset 0 0 0 1px rgba(163,174,184,.35); }
.df-seg--dark .df-seg__btn { color: var(--kdl-gray-300); }
.df-seg--dark .df-seg__btn:hover { color: #fff; }
.df-seg--dark .df-seg__btn[aria-pressed="true"], .df-seg--dark .df-seg__btn[aria-selected="true"], .df-seg--dark .df-seg__btn[aria-checked="true"] {
  background: var(--kdl-gray-700); color: #fff; box-shadow: inset 0 -2px 0 var(--kdl-copper-300);
}
/* Readout: Lilex data label/value pair */
.df-readout { display: inline-grid; gap: 2px; }
.df-readout > span:first-child { font: 500 10.5px/1 var(--kdl-font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.df-readout > span:last-child { font: 500 15px/1.2 var(--kdl-font-mono); font-variant-numeric: tabular-nums slashed-zero; }

/* --------------------------------------------------------------------------
   17. Collapsible long fields
   -------------------------------------------------------------------------- */
.df-more-group { display: grid; gap: 0; border-top: 1px solid var(--df-rule); }
.df-more { border-bottom: 1px solid var(--df-rule); }
.df-more__summary {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 10px 2px;
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: 16px;
  color: var(--df-ink);
}
.df-more__summary::-webkit-details-marker { display: none; }
.df-more__summary::marker { content: ""; }
/* a +/- plug that heats */
.df-more__summary::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--upton-heat-5) calc(var(--df-heat) * 100%), var(--df-rule-strong)), 0 0 calc(var(--df-heat) * 12px) var(--df-glow-a);
  background:
    linear-gradient(currentColor, currentColor) center / 9px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 9px no-repeat;
}
.df-more[open] > .df-more__summary::before { background: linear-gradient(currentColor, currentColor) center / 9px 1.6px no-repeat; }
.df-more__meta { margin-left: auto; font: 400 12px/1 var(--kdl-font-mono); color: var(--df-ink-2); letter-spacing: .04em; white-space: nowrap; }
.df-more__body { padding: 2px 0 20px 30px; color: var(--kdl-gray-600); font-size: 16px; line-height: 1.6; max-width: 76ch; }
.df-more__body code { font-size: .86em; }
.df-sheet--blueprint > .df-wrap > .df-more-group .df-more__body, .df-sheet--furnace > .df-wrap > .df-more-group .df-more__body { color: var(--df-ink-2); }

/* Appendix lens log: one <details> per lens */
.df-lens > .df-more__summary { gap: 16px; min-height: 68px; padding-block: 12px; }
.df-lens > .df-more__summary .df-stamp { flex: none; font-size: 22px; min-width: 1.9em; }
.df-lens__name { font-size: 18px; font-weight: 600; line-height: 1.3; }
.df-lens > .df-more__body { padding-left: 30px; max-width: none; }
.df-lens__take { max-width: 72ch; margin-bottom: 18px; }
.df-lens .df-register { font-size: 14.5px; }
.df-lens .df-register td:nth-child(3) { font: 500 12.5px/1.5 var(--kdl-font-mono); white-space: nowrap; color: var(--df-ink-2); }
@media (max-width: 640px) {
  .df-lens > .df-more__body { padding-left: 0; }
  .df-lens .df-register thead { display: none; }
  .df-lens .df-register tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--df-rule); }
  .df-lens .df-register td { border: 0; padding: 0; }
  .df-lens .df-register td:nth-child(1) { grid-column: 1 / -1; }
  .df-lens .df-register td:nth-child(2) { grid-column: 1; }
}

/* --------------------------------------------------------------------------
   18. Shop traveler (roadmap routing card)
   -------------------------------------------------------------------------- */
.df-traveler {
  position: relative;
  padding-left: 44px;                       /* binder margin with punched holes */
  background:
    radial-gradient(circle at 21px 50%, var(--df-surface) 0 8px, rgba(18,13,11,.35) 8.5px, transparent 9.5px) 0 0 / 44px 180px repeat-y,
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(126,61,20,.09) 27px 28px),
    var(--df-buff);
  color: var(--kdl-gray-800);
  border-radius: 4px 10px 10px 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 30px 60px -28px rgba(0,0,0,.6);
  --df-ink: var(--kdl-gray-800);
  --df-ink-2: #5a4a36;                       /* 7.2:1 on buff */
  --df-rule: rgba(90,74,54,.28);
  --df-rule-strong: rgba(90,74,54,.6);
  --df-focus: var(--kdl-copper-700);
  --df-link: var(--kdl-copper-700);
}
.df-traveler::before {                     /* the binder margin rule */
  content: ""; position: absolute; left: 43px; top: 0; bottom: 0; width: 1px; background: rgba(206,32,41,.45);
}
@media (max-width: 520px) {
  .df-traveler {
    padding-left: 30px;
    background:
      radial-gradient(circle at 15px 50%, var(--df-surface) 0 6px, rgba(18,13,11,.35) 6.5px, transparent 7.5px) 0 0 / 30px 180px repeat-y,
      repeating-linear-gradient(180deg, transparent 0 27px, rgba(126,61,20,.09) 27px 28px),
      var(--df-buff);
  }
  .df-traveler::before { left: 29px; }
}
.df-traveler__head {
  display: grid; gap: 16px 32px; align-items: end;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 clamp(16px, 3vw, 32px) 20px;
  border-bottom: 2px solid var(--kdl-gray-800);
}
@media (min-width: 900px) { .df-traveler__head { grid-template-columns: minmax(0, 1fr) auto; } }
.df-traveler__band {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 calc(-1 * clamp(16px, 3vw, 32px)); padding: 10px clamp(16px, 3vw, 32px);
  background: var(--kdl-red-600); color: #fff;                /* 6.6:1 */
  border-radius: 0 10px 0 0;
}
.df-traveler__title { font-size: clamp(26px, 1rem + 2vw, 40px); letter-spacing: -.02em; line-height: 1.05; }
.df-traveler__head .df-titleblock { --df-tb-cols: 4; }
.df-traveler__stations { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .df-traveler__stations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .df-station + .df-station { border-left: 1px solid var(--df-rule-strong); }
}
.df-station { display: grid; grid-template-rows: auto 1fr auto; padding: 22px clamp(16px, 2.4vw, 28px) 24px; border-bottom: 1px solid var(--df-rule-strong); }
@media (min-width: 1000px) { .df-station { border-bottom: 0; } }
.df-station__head { display: grid; grid-template-columns: auto 30px minmax(0, 1fr); gap: 4px 14px; align-items: center; margin-bottom: 16px; }
.df-station__op { grid-column: 1 / -1; color: var(--df-ink-2); }
.df-station__name { font-size: 34px; letter-spacing: -.02em; line-height: 1; }
.df-station__status { justify-self: end; text-align: right; font: 500 11px/1.2 var(--kdl-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--df-ink-2); }
/* The station punch: NOW is punched through (you can see the table under the card) */
.df-station__punch {
  width: 30px; height: 30px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--df-rule-strong);
  background:
    radial-gradient(circle, transparent 0 9px, var(--df-rule-strong) 9.5px 10.5px, transparent 11px);
}
.df-station[data-punched] .df-station__punch {
  background: radial-gradient(circle at 50% 45%, var(--df-surface) 0 10px, rgba(18,13,11,.5) 11px, transparent 12.5px);
  box-shadow: inset 0 0 0 1.5px var(--kdl-red-600);
}
.df-station__ops { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.df-station__ops > li { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px dashed var(--df-rule); font-size: 15px; line-height: 1.45; }
.df-station__ops > li:first-child { border-top: 0; }
.df-station__step { font: 500 12.5px/1.6 var(--kdl-font-mono); color: var(--kdl-red-600); font-variant-numeric: tabular-nums; }
.df-station__sign { display: flex; align-items: flex-end; gap: 10px; margin-top: 20px; color: var(--df-ink-2); }
.df-station__sign::after { content: ""; flex: 1; border-bottom: 1px solid var(--df-rule-strong); height: 1.1em; }
.df-traveler__foot { padding: 12px clamp(16px, 3vw, 32px); border-top: 2px solid var(--kdl-gray-800); color: var(--df-ink-2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* --------------------------------------------------------------------------
   19. Palette strip (heat ramp as data) + principles
   -------------------------------------------------------------------------- */
.df-ramp { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; border: 1px solid var(--df-rule-strong); }
.df-ramp__step { display: grid; grid-template-rows: 64px auto; min-width: 0; }
.df-ramp__step + .df-ramp__step { border-left: 1px solid var(--df-rule); }
.df-ramp__chip { background: var(--c); }
.df-ramp__meta { padding: 8px 8px 10px; display: grid; gap: 2px; font: 400 11.5px/1.3 var(--kdl-font-mono); color: var(--df-ink-2); }
.df-ramp__meta b { font-weight: 500; color: var(--df-ink); }
@media (max-width: 720px) {
  .df-ramp { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .df-ramp__step:nth-child(5) { border-left: 0; }
  .df-ramp__step:nth-child(n+5) { border-top: 1px solid var(--df-rule); }
}
.df-principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); border-top: 1px solid var(--df-rule-strong); }
.df-principles > li { padding: 20px 24px 22px 0; border-bottom: 1px solid var(--df-rule); font-size: 16px; line-height: 1.55; color: var(--df-ink-2); }
.df-principles > li b { display: block; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--df-ink); margin-bottom: 6px; }

/* Spacing helpers (vertical rhythm between blocks inside a sheet) */
.df-gap { margin-top: clamp(32px, 5vw, 56px); }
.df-gap-sm { margin-top: 20px; }
.df-stack { display: grid; gap: var(--df-stack-gap, clamp(24px, 3vw, 36px)); }
.df-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --------------------------------------------------------------------------
   20. Page footer
   -------------------------------------------------------------------------- */
.df-footer {
  padding-block: 40px 56px;
  background: var(--df-grid-kdl), var(--upton-furnace-900);
  color: var(--kdl-gray-300);
  --df-focus: var(--kdl-copper-300);
  --df-link: var(--kdl-copper-300);
  --df-ink: #fff; --df-ink-2: var(--kdl-gray-300);
  --df-rule: rgba(163,174,184,.24); --df-rule-strong: rgba(163,174,184,.5);
  border-top: 4px solid transparent;
  border-image: var(--upton-heat-bar) 1;
  font-size: 15px;
}
.df-footer__inner { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: baseline; }
.df-footer__inner p { margin: 0; max-width: 62ch; }

/* --------------------------------------------------------------------------
   21. Forced colours
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .df-cover__drawn { color: CanvasText; -webkit-text-stroke: 0; }
  .df-cover__drawn::before { display: none; }
  .df-cover__fired { color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; background: none !important; }
  .df-cover__art { display: none; }
  .df-opener__num { color: CanvasText; -webkit-text-stroke: 0; }
  .df-heatbar { border: 1px solid CanvasText; }
  .df-heatbar::before { forced-color-adjust: none; background: CanvasText; }
  .df-stamp { border-color: CanvasText; color: CanvasText; -webkit-mask: none; mask: none; }
  .df-gauge__scale > i { border: 1px solid CanvasText; }
  .df-gauge[data-value="1"] .df-gauge__scale > i:nth-child(-n+1),
  .df-gauge[data-value="2"] .df-gauge__scale > i:nth-child(-n+2),
  .df-gauge[data-value="3"] .df-gauge__scale > i:nth-child(-n+3),
  .df-gauge[data-value="4"] .df-gauge__scale > i:nth-child(-n+4),
  .df-gauge[data-value="5"] .df-gauge__scale > i:nth-child(-n+5) { forced-color-adjust: none; background: CanvasText; }
  .df-tag, .df-tag--reversal, .df-chip, .df-sample, .df-sight__id, .df-titleblock, .df-fig__frame { border: 1px solid CanvasText; }
  .df-tag--reversal { clip-path: none; -webkit-mask: none; mask: none; }
  .df-sheetnav__link[aria-current] { outline: 2px solid Highlight; outline-offset: -4px; }
  .df-sheetnav__link::after { display: none; }
  .df-motion-toggle__track { border: 1px solid CanvasText; }
  .df-motion-toggle__track::after { forced-color-adjust: none; background: CanvasText; }
  .df-motion-toggle[aria-pressed="true"] .df-motion-toggle__track::after { background: GrayText; }
  .df-sight__frame, .df-plate, .df-idea, .df-inspection, .df-traveler { border: 2px solid CanvasText; }
  .df-station__punch { border: 1.5px solid CanvasText; }
  .df-station[data-punched] .df-station__punch { forced-color-adjust: none; background: CanvasText; }
  .df-seg { border: 1px solid CanvasText; }
  .df-plate__effort b[aria-current="true"] { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .df-seg__btn[aria-pressed="true"], .df-seg__btn[aria-selected="true"], .df-seg__btn[aria-checked="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .df-seg__btn[aria-disabled="true"], .df-seg__btn:disabled { color: GrayText; }
  .df-cover__amp { position: relative; z-index: 1; }
  .df-pick, .df-read-toggle, .df-sheetnav__picks { border: 1px solid CanvasText; }
  .df-pick[aria-pressed="true"], .df-read-toggle[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .df-pick__pilot { forced-color-adjust: none; background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
  .df-pick[aria-pressed="true"] .df-pick__pilot, .df-sheetnav__picks[data-lit] .df-pick__pilot { background: CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* --------------------------------------------------------------------------
   22. Print (owner may print it; keep it legible, drop the chrome)
   -------------------------------------------------------------------------- */
@media print {
  @page { margin: 14mm; }
  :root { --df-nav-h: 0px; }
  body { background: #fff; font-size: 11pt; }
  .df-sheetnav, .df-motion-toggle, .df-read-toggle, .df-sight__tools, .df-fig__zoom, .df-skip, .df-pick { display: none !important; }
  .df-idea[data-picked] .df-plate::after { content: "Shortlisted"; position: absolute; right: 30px; top: 50%; transform: translateY(-50%) rotate(-4deg); padding: 3px 8px; border: 2px solid #000; font: 500 10pt/1 var(--kdl-font-mono); letter-spacing: .1em; text-transform: uppercase; }
  .df-sheet, .df-sheet--paper, .df-sheet--blueprint, .df-sheet--furnace, .df-cover, .df-footer {
    background: #fff !important; color: #000 !important; padding-block: 18pt;
    --df-ink: #000; --df-ink-2: #333; --df-rule: #bbb; --df-rule-strong: #666; --df-link: #000;
  }
  .df-cover { min-height: 0; }
  .df-cover__art { display: none; }
  .df-cover__title, .df-cover__subtitle, .df-cover__intro, .df-cover__eyebrow, .df-cover__eyebrow span, .df-cover__amp { color: #000 !important; }
  .df-sheet__stamp, .df-opener__num { color: #333 !important; -webkit-text-stroke-color: #333 !important; }
  .df-cover__drawn { -webkit-text-stroke-color: #000; }
  .df-cover__drawn::before { display: none; }
  .df-cover__fired { color: var(--kdl-red-600) !important; -webkit-text-fill-color: var(--kdl-red-600) !important; background: none !important; animation: none !important; filter: none !important; }
  .df-idea, .df-inspection, .df-traveler { box-shadow: none !important; border: 1px solid #666; }
  .df-spec__row, .df-fig, .df-station, .df-inspection__table tr { break-inside: avoid; }
  .df-idea { break-before: page; }
  .df-sight__frame { background: #fff !important; box-shadow: none !important; border: 1px solid #666; color: #000; }
  .df-sight__live, .df-sight__id { color: #000 !important; background: none !important; }
  .df-sight__glass { box-shadow: none; border: 1px solid #999; }
  .df-heatbar::before { animation: none !important; clip-path: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}