:root {
  /* Digger brand palette — shared with the product app (see digger-fonts.css). */
  --ground: #101825;   --ground-2: #18222f;  --ground-3: #212d3d;
  --vellum: #efe3ca;   --vellum-2: #e2d4b6;  --vellum-3: #d5c39f;
  --bronze: #c08b3c;   --bronze-hi: #e5b268; --bronze-lo: #7d5722;
  --river: #3d7d9e;    --river-hi: #5fa3c7; --river-lo: #2a5872;
  --slate: #74849b;    --ink: #141b26;
  --paper: #f7efdd;

  --font-display: "Digger Display", Georgia, serif;
  --font-ui: "Digger UI", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Digger Mono", ui-monospace, monospace;
  --font: var(--font-ui);

  --accent: var(--bronze);
  --accent-hi: var(--bronze-hi);
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: #7a6f5c;
  --border: var(--vellum-3);
  --card-bg: var(--vellum-2);
  --max-width: 46rem;
  --radius: 8px;
  /* Paper sitting on a table, not a flat rectangle floating in a spec —
     dark theme gets a stronger shadow (needs more contrast to read against
     an already-dark ground) plus a faint top highlight. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 3px 8px rgba(0,0,0,.07);
  --shadow-md: 0 6px 18px rgba(0,0,0,.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-site="digeritage"]) {
    --card-bg: var(--ground-2);
    --shadow-sm: 0 1px 0 rgba(255,255,255,.03), 0 3px 10px rgba(0,0,0,.4);
    --shadow-md: 0 6px 20px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]:not([data-site="digeritage"]) {
  --card-bg: var(--ground-2);
  --shadow-sm: 0 1px 0 rgba(255,255,255,.03), 0 3px 10px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,.5);
}
:root[data-theme="light"] { --card-bg: var(--vellum-2); }

/* .com: always dark, by deliberate choice — not theme-adaptive like
   .org/.net. This is the flagship/AI-forward domain; a permanent "control
   room" register (ground+vellum+bronze, never daytime paper) is what sets
   it apart from .org's theme-adaptive business register within the same
   shared Digger system. */
html[data-site="com"],
html[data-theme="light"][data-site="com"],
html[data-theme="dark"][data-site="com"] {
  --bg: var(--ground); --fg: var(--vellum); --muted: var(--slate); --border: var(--ground-3);
  --card-bg: var(--ground-2);
  --shadow-sm: 0 1px 0 rgba(255,255,255,.03), 0 3px 10px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,.5);
}

/* digeritage never gets the dark app-cockpit chrome, in any theme —
   excluded explicitly here rather than relying on selector specificity
   to override it back, which is easy to get wrong across edits. */
@media (prefers-color-scheme: dark) {
  :root:not([data-site="digeritage"]) { --bg: var(--ground); --fg: var(--vellum); --muted: var(--slate); --border: var(--ground-3); }
}
:root[data-theme="dark"]:not([data-site="digeritage"]) { --bg: var(--ground); --fg: var(--vellum); --muted: var(--slate); --border: var(--ground-3); }
:root[data-theme="light"] { --bg: var(--paper); --fg: var(--ink); --muted: #7a6f5c; --border: var(--vellum-3); }

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
  position: relative;
}
/* A faint paper grain over the flat background colour — the difference
   between "parchment" and "a hex code called paper". Pure noise, no
   colour of its own, so it reads correctly on both the light (paper) and
   dark (ground) themes without separate light/dark variants. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { html:not([data-site="digeritage"]) body::before { mix-blend-mode: screen; opacity: .4; } }
html[data-theme="dark"]:not([data-site="digeritage"]) body::before { mix-blend-mode: screen; opacity: .4; }
.site-header, main, .site-footer { position: relative; z-index: 1; }
.skip-link {
  position: absolute; inset-inline-start: -999px; top: 0;
}
.skip-link:focus { inset-inline-start: 1rem; top: 1rem; z-index: 10; background: var(--bg); padding: .5rem 1rem; }

/* .ru keeps its own established red-bronze, distinct audience from the
   Digger bronze used everywhere else. */
html[data-site="ru"] { --accent: #a83232; --accent-hi: #c24a4a; }

/* .net: river blue instead of the shared bronze — the Hercules myth's own
   image ("he diverted two rivers through them") gives a literal reason for
   a cool accent here, and it keeps .net visually distinct from .org, which
   otherwise uses the exact same unmodified bronze default. */
html[data-site="net"] { --accent: var(--river); --accent-hi: var(--river-hi); }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 10px -6px rgba(0,0,0,.12);
  flex-wrap: wrap; gap: .75rem;
}
.site-header .logo { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 900; color: var(--accent); text-decoration: none; font-size: 1.2rem; letter-spacing: .01em; }
.site-header .logo-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; }
.site-nav a { margin-inline-start: 1.25rem; color: var(--fg); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }

/* Scenarios accordion in the header (.org only): a <details> dropdown
   containing one nested <details> per category, each listing its pages.
   Pure HTML/CSS, no JS — works with keyboard and assistive tech for free. */
.org-menu { position: relative; margin-inline-start: 1.25rem; }
.org-menu > summary {
  list-style: none; cursor: pointer; color: var(--fg); font: inherit;
  display: inline-flex; align-items: center; gap: .3rem;
}
.org-menu > summary::-webkit-details-marker { display: none; }
.org-menu > summary::after { content: "▾"; font-size: .7em; opacity: .6; }
.org-menu:hover > summary, .org-menu[open] > summary { color: var(--accent); }
/* Don't rely on <details>'s native "hide non-summary children unless
   [open]" behavior — confirmed unreliable in at least one real browser
   context (shows the panel open on load, never closes on click, with
   nothing clicked at all). Make show/hide an explicit CSS rule instead. */
.org-menu-panel { display: none; }
.org-menu[open] > .org-menu-panel {
  /* Anchored to the trigger's END edge, not its start — .org-menu sits
     near the right end of the header nav, so a panel opening from its
     start edge ran off the right side of the viewport entirely (looked
     broken/unresponsive, though the <details> itself was toggling fine). */
  display: block; position: absolute; inset-inline-end: 0; top: calc(100% + .6rem);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .5rem; min-width: 17rem; max-width: 90vw; max-height: 70vh; overflow-y: auto;
  box-shadow: var(--shadow-md); z-index: 20;
}
.org-menu-category { border-bottom: 1px solid var(--border); }
.org-menu-category:last-child { border-bottom: none; }
.org-menu-category > summary {
  /* <summary> defaults to display:list-item in most browsers, which doesn't
     reliably expand its box to fit wrapped text — a two-line category name
     (this is a small ~15rem panel, most category labels wrap) would overlap
     the next category instead of pushing it down. */
  display: block; list-style: none; cursor: pointer; padding: .55rem .5rem; font-size: .82rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.org-menu-category > summary::-webkit-details-marker { display: none; }
.org-menu-category ul { display: none; list-style: none; margin: 0 0 .4rem; padding: 0 .5rem; }
.org-menu-category[open] > ul { display: block; }
.org-menu-category li a {
  display: block; padding: .4rem .5rem; border-radius: .3rem; color: var(--fg);
  text-decoration: none; font-size: .92rem;
}
.org-menu-category li a:hover { background: var(--card-bg); color: var(--accent); }

.lang-switcher { display: flex; gap: .5rem; margin-inline-start: 1.25rem; }
.lang-switcher a, .lang-switcher span {
  font-size: .8rem; padding: .15rem .5rem; border: 1px solid var(--border); border-radius: .3rem;
  color: var(--muted); text-decoration: none;
}
.lang-switcher a:hover { color: var(--accent); border-color: var(--accent); }
.lang-switcher [aria-current="true"] { color: var(--fg); border-color: var(--fg); font-weight: 600; }

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
/* Case-scenario index pages (.org) list many links grouped under h3 —
   give those pages more width for a card grid instead of a single column. */
body:not(.tone-solemn) main:has(h3) { max-width: 58rem; }

main h1 { font-family: var(--font-display); font-weight: 900; font-size: 2.35rem; line-height: 1.15; margin-bottom: .6rem; }
/* Lede paragraph: the opening paragraph is real prose here, not a short
   tagline — give it editorial weight (bigger, full-strength ink), not the
   muted/quiet treatment that would suit an actual one-line subtitle. */
main h1 + p { font-size: 1.2rem; line-height: 1.55; color: var(--fg); font-weight: 400; margin: 0 0 1.75rem; }
/* A short accent rule instead of a full-width hairline — a report divider
   reads as corporate boilerplate; a stub of colour reads as a hand-set
   section break. */
main h2 { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; margin-top: 2.75rem; padding-top: 0; position: relative; }
main h2::before { content: ""; display: block; width: 2.75rem; height: 3px; background: var(--accent); border-radius: 2px; margin-bottom: 1.1rem; }
body.tone-solemn main h2::before { display: none; }
main h3 { font-family: var(--font-ui); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 2.25rem 0 .9rem; }
main a { color: var(--accent); }
main p.callout {
  font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; line-height: 1.5;
  color: var(--fg); background: var(--card-bg); border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1rem 0 1.75rem;
  box-shadow: var(--shadow-sm);
}
main table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
main th, main td { text-align: start; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
main th { color: var(--muted); font-weight: 600; }

/* Product screenshots embedded in prose (.com's "under the hood" section) —
   framed like a real screen, not a bare inline image. */
main figure.screenshot {
  margin: 1.5rem 0; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-md); background: var(--card-bg);
}
main figure.screenshot img { display: block; width: 100%; height: auto; }
main figure.screenshot figcaption {
  padding: .6rem .9rem; font-size: .82rem; color: var(--muted); border-top: 1px solid var(--border);
}

/* Illustrative human photos (.net's persona/scenario stock images) — the
   opposite register from .screenshot's bordered "proof of product" card:
   no frame, a soft rounded edge, and a coloured foot instead of a hard
   divider, so a photo of a stranger reads as scene-setting, not evidence. */
main figure.person-photo {
  margin: 1.5rem 0; border-radius: calc(var(--radius) * 2);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
main figure.person-photo img { display: block; width: 100%; height: auto; }
main figure.person-photo figcaption {
  padding: .55rem .9rem; font-size: .82rem; font-style: italic; color: var(--muted);
  background: var(--card-bg); border-bottom: 3px solid var(--accent);
}

/* Embedded external video (e.g. a YouTube illustration of real archive
   scale) — same soft, illustrative register as .person-photo, but an
   aspect-ratio-locked responsive wrapper instead of an <img>, since an
   iframe has no intrinsic size to scale from. */
main figure.video-embed {
  margin: 1.5rem 0; border-radius: calc(var(--radius) * 2);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
main figure.video-embed .video-embed-frame {
  position: relative; padding-bottom: 56.25%; height: 0;
}
main figure.video-embed .video-embed-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
main figure.video-embed figcaption {
  padding: .55rem .9rem; font-size: .82rem; font-style: italic; color: var(--muted);
  background: var(--card-bg); border-bottom: 3px solid var(--accent);
}

/* Fleet-scale proof numbers — a strip of big-figure/small-label tiles
   (photomyne.com-style stat bar) instead of burying the numbers in prose. */
main .stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin: 1.5rem 0;
}
@media (max-width: 480px) { main .stat-grid { grid-template-columns: repeat(2, 1fr); } }
main .stat-tile { background: var(--card-bg); padding: 1rem 1.1rem; }
main .stat-tile .stat-value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.15rem; font-weight: 700; color: var(--accent); line-height: 1.2;
}
main .stat-tile .stat-label { font-size: .76rem; color: var(--muted); margin-top: .3rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-site="digeritage"]) main .stat-tile .stat-value { color: var(--accent-hi); }
}
:root[data-theme="dark"]:not([data-site="digeritage"]) main .stat-tile .stat-value { color: var(--accent-hi); }

/* Scenario/case cards: any bullet list directly under an h3 becomes a
   grid of cards rather than a plain link list — used by .org's 21
   industry scenarios grouped into categories. */
main h3 + ul, .related-scenarios ul {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .75rem; padding: 0; margin: 0 0 1.5rem;
}
main h3 + ul li, .related-scenarios li { margin: 0; }
main h3 + ul li a, .related-scenarios li a {
  display: block; position: relative; height: 100%; padding: 1rem 1.1rem; padding-inline-end: 2.25rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--fg); text-decoration: none; font-weight: 600; line-height: 1.35;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
/* A stray, hand-set stack of case folders rather than a too-tidy
   spreadsheet grid — each card sits at a slightly different angle and
   settles flat only when you reach for it. */
main h3 + ul li:nth-child(4n+1) a, .related-scenarios li:nth-child(4n+1) a { transform: rotate(-0.6deg); }
main h3 + ul li:nth-child(4n+2) a, .related-scenarios li:nth-child(4n+2) a { transform: rotate(0.5deg); }
main h3 + ul li:nth-child(4n+3) a, .related-scenarios li:nth-child(4n+3) a { transform: rotate(-0.35deg); }
main h3 + ul li:nth-child(4n+4) a, .related-scenarios li:nth-child(4n+4) a { transform: rotate(0.6deg); }
main h3 + ul li a::after, .related-scenarios li a::after {
  content: "→"; position: absolute; inset-inline-end: 1.1rem; top: 1rem;
  opacity: .35; transition: opacity .15s;
}
html[dir="rtl"] main h3 + ul li a::after, html[dir="rtl"] .related-scenarios li a::after { transform: scaleX(-1); }
main h3 + ul li a:hover, .related-scenarios li a:hover {
  border-color: var(--accent); color: var(--accent);
  transform: rotate(0deg) translateY(-3px); box-shadow: var(--shadow-md);
}
main h3 + ul li a:hover::after, .related-scenarios li a:hover::after { opacity: 1; }
.related-scenarios { margin-top: 3rem; }

.btn {
  display: inline-block; font-family: var(--font-ui); font-weight: 700; font-size: .95rem;
  padding: .72rem 1.4rem; border-radius: 999px; background: var(--accent); color: var(--paper);
  text-decoration: none; border: 1px solid transparent;
}
.btn:hover { background: var(--accent-hi); }
.btn.btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); }

/* Solemn tone (e.g. inherited-archive content on .net) — deliberately
   quieter than the rest of the site: muted accent, tighter measure,
   no decorative flourishes. Still part of the Digger family (bronze-lo,
   Digger Display), just turned down. Excluded on digeritage, which sets
   its own accent directly below (belt-and-suspenders: custom properties
   set directly on <body> always win over ones set on <html>, regardless
   of selector specificity elsewhere, since inheritance is resolved by
   nearest ancestor — don't fight that, just set it where it's read). */
html:not([data-site="digeritage"]) body.tone-solemn { --accent: var(--bronze-lo); --accent-hi: var(--bronze); }
body.tone-solemn main { max-width: 40rem; }
body.tone-solemn main h1 { font-weight: 500; font-family: var(--font-display); }
body.tone-solemn main h2 { font-weight: 500; font-family: var(--font-display); }
body.tone-solemn .btn { display: none; }

/* digeritage: not a Digger-branded product page. A separate, quiet space —
   dignified rather than mournful, and deliberately not stylish/trendy.
   Warm paper stays (neutral, not cold), but no bronze, no product font,
   no buttons/cards — just an unhurried reading rhythm. */
html[data-site="digeritage"] body {
  --accent: #6b5d4f;
  --accent-hi: #4f4438;
  --font-display: "Newsreader", Georgia, serif;
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: #7a6f5c;
  --border: var(--vellum-3);
}
html[data-site="digeritage"] .site-header { border-bottom-color: var(--vellum-2); }
html[data-site="digeritage"] .site-header .logo { font-weight: 500; letter-spacing: 0; }
html[data-site="digeritage"] main h1 { font-weight: 400; font-size: 2.15rem; }
html[data-site="digeritage"] main h2 { font-weight: 400; font-size: 1.3rem; margin-top: 3rem; }
html[data-site="digeritage"] main { line-height: 1.75; }
html[data-site="digeritage"] .btn { display: none; }

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem; text-align: center; color: var(--muted); font-size: .875rem;
}
.site-footer a { color: var(--muted); }

/* Print: browsers don't paint background colours by default (no "background
   graphics" option), so any dark-theme page — .com is permanently dark,
   others follow prefers-color-scheme — prints its light foreground text
   directly onto unpainted white paper: pale bronze/vellum on white reads as
   missing or "cut off" text, not just low-contrast. Force a plain
   light-on-white palette for print regardless of theme/site, independent of
   whether the browser happens to print backgrounds. */
@media print {
  /* !important on every custom property, not just higher specificity:
     the dark-theme rules this needs to beat (prefers-color-scheme:dark's
     :root:not([data-site="digeritage"]), .com's permanent dark selector)
     have higher specificity than a plain :root and WOULD win on source
     order/specificity alone — confirmed live: an earlier version of this
     block without !important still printed dark on a system in dark mode,
     because prefers-color-scheme keeps matching inside print preview too,
     it isn't suppressed by the print context. */
  :root {
    --bg: #fff !important; --fg: #000 !important; --muted: #444 !important; --border: #ccc !important;
    --card-bg: #f4f4f4 !important; --accent: #000 !important; --accent-hi: #000 !important;
    --shadow-sm: none !important; --shadow-md: none !important;
  }
  /* position:fixed renders unreliably across print engines (repeats per
     page or misplaces itself) — this is a decorative noise texture with no
     content value, just drop it. */
  body::before { display: none; }
  /* Chrome/PDF print retains the light-blocking backdrop between fixed
     grain and header/nav on some engines; belt-and-suspenders drop the
     stat-grid background so a stray blend layer never covers digits. */
  main .stat-grid { background: none; }

  /* Interactive-only chrome has no meaning on paper. */
  .skip-link, .org-menu, .lang-switcher, .btn,
  .correction-widget-trigger, .correction-widget-popup, .correction-widget-overlay { display: none !important; }

  /* Let content use the full printable page width instead of the
     on-screen reading column, and drop screen padding built for a
     viewport, not a page margin the printer already applies. */
  main, body:not(.tone-solemn) main:has(h3) { max-width: 100%; padding: 0; }

  /* Without this, a card/tile/table row that happens to straddle a page
     boundary gets sliced exactly where the page break falls — the visual
     "cut off text" the print output was showing. Keep each self-contained
     block whole on one page instead. */
  main .stat-tile, main h3 + ul li, .related-scenarios li,
  main p.callout, main figure, main tr, main table { break-inside: avoid; }

  /* auto-fill card grids size columns off the *screen* viewport in some
     print engines, not the paper's printable width — cap to what a page
     can actually hold instead of a fixed 210px minimum. */
  main h3 + ul, .related-scenarios ul { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  a { color: #000; text-decoration: underline; }
  main h2::before { background: #000; }
}