/* MOCK ONLY: gold line-work dark mode (flat, engraved feel; no metal textures). Loaded only by bronze-mockup.html. */
:root[data-theme="dark"] { --gold: #B9975B; --gold-hi: #D8BE8A; --gold-dim: rgba(185, 151, 91, .45); }
/* Colour schemes to try against the brass */
:root[data-theme="dark"][data-green="current"]   { --bg: #0C1412; --rule: #25352F; --ph: #13201C; --accent: #86A57C; }                                   /* as the site is now: yellow-leaning green */
:root[data-theme="dark"][data-green="verdigris"] { --bg: #07171A; --rule: #1C3A3D; --ph: #0D2326; --accent: #5FB3A3; --muted: #8E9A90; }                 /* the blue-green patina of old bronze */
:root[data-theme="dark"][data-green="deepsea"]   { --bg: #07111C; --rule: #1A2E42; --ph: #0D1B2B; --accent: #7FA9C4; --muted: #8C95A0; --ink: #D6D4C8; } /* no green: dark sea blue */
:root[data-theme="dark"][data-green="ink"]       { --bg: #0D0C0A; --rule: #2B261C; --ph: #17140F; --accent: #C9A96A; --muted: #948B78; --ink: #DCD3BE; } /* no green: warm black, brass only */
[data-theme="dark"] .veil { background: var(--bg); }

.mock-bar {
  position: fixed; z-index: 30; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; align-items: center; gap: .5rem;
  padding: .45rem .7rem; border-radius: 999px; background: rgba(0, 0, 0, .82); border: 1px solid #444;
  font: 600 .8rem/1 "Public Sans", sans-serif; color: #ccc; white-space: nowrap;
}
.mock-bar button { display: inline-flex; align-items: center; gap: .35rem; font: inherit; color: #ddd; background: none; border: 1px solid transparent; border-radius: 999px; padding: .35rem .6rem; cursor: pointer; }
.mock-bar button:hover { border-color: #666; }
.mock-bar i { width: .8rem; height: .8rem; border-radius: 50%; }
[data-green="current"] .mock-bar [data-g="current"], [data-green="verdigris"] .mock-bar [data-g="verdigris"], [data-green="deepsea"] .mock-bar [data-g="deepsea"], [data-green="ink"] .mock-bar [data-g="ink"], [data-green="navy"] .mock-bar [data-g="navy"] { border-color: #B08D57; color: #fff; }

[data-sign="behind"] .mock-bar [data-s="behind"], [data-sign="above"] .mock-bar [data-s="above"] { border-color: #B08D57; color: #fff; }

/* ---- Gold is the line colour; green stays the ground ---- */
[data-theme="dark"] .mark-c g { stroke: var(--gold); }
[data-theme="dark"] .page h1, [data-theme="dark"] .page h2, [data-theme="dark"] .page h3 { color: var(--gold-hi); }
[data-theme="dark"] .x-link, [data-theme="dark"] .x-link:hover { background: none; color: var(--gold-hi); border: 1px solid var(--gold-dim); border-radius: 2px; box-shadow: none; font-weight: 600; }
[data-theme="dark"] .x-link:hover, [data-theme="dark"] .toggle:hover { border-color: var(--gold); color: var(--gold-hi); }
[data-theme="dark"] .toggle { border: 1px solid var(--gold-dim); border-radius: 2px; color: var(--gold-hi); }

/* Nameplates: brushed brass plates with dark cut lettering, corners notched (or rounded) like engraved door plates */
[data-plates="notched"] .mock-bar [data-p="notched"], [data-plates="rounded"] .mock-bar [data-p="rounded"] { border-color: #B08D57; color: #fff; }
:root[data-theme="dark"] {
  --plate-ink: #1B1508;
  --brass: repeating-linear-gradient(0deg, rgba(255, 255, 255, .055) 0 1px, rgba(0, 0, 0, .045) 1px 2px),
           linear-gradient(100deg, #C6A55C 0%, #E8D092 24%, #C9A75D 48%, #DFC27C 72%, #B8944C 100%);
  --notch: radial-gradient(9px at 9px 9px, #0000 97%, #000) -9px -9px;
}
[data-theme="dark"] .hpl h1, [data-theme="dark"] .side nav a {
  background: var(--brass); color: var(--plate-ink); text-shadow: 0 1px 0 rgba(255, 244, 210, .45);
  font-family: "EB Garamond", Garamond, "Times New Roman", serif; font-weight: 500; letter-spacing: .01em; text-transform: none; text-align: center;
  -webkit-mask: var(--notch); mask: var(--notch);
}
/* side plates: the plain rounded plate; the notched corners are kept for the nameplate */
[data-theme="dark"] .side nav a { -webkit-mask: none; mask: none; border-radius: 7px; }
@media (min-width: 900px) {
  [data-theme="dark"] .side nav ul { display: grid; gap: .8rem; }
  [data-theme="dark"] .side nav li, [data-theme="dark"] .side nav li:last-child { border: 0; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .7)); }
  [data-theme="dark"] .side nav a { padding: .7rem 1rem .75rem; font-size: 1.4rem; line-height: 1.15; filter: brightness(.72) saturate(.85); transition: filter .15s ease; }
  [data-theme="dark"] .side nav a:hover { padding-left: 1rem; background: var(--brass); color: var(--plate-ink); filter: brightness(.9); }
  /* the current page is the bright plate */
  [data-theme="dark"] .side nav a[aria-current="page"] { background: var(--brass); color: var(--plate-ink); font-weight: 500; filter: none; }
  [data-theme="dark"] .side nav a[aria-current="page"]::before { display: none; }
}

/* ---- Home: portrait in a thin double gold line, the name cut beneath it ---- */
[data-theme="dark"] .hpl { display: flex; flex-direction: column; align-items: center; }
[data-theme="dark"] .hpl figure.portrait { order: 1; }
[data-theme="dark"] .hpl figure.portrait img { border: 1px solid var(--gold); border-radius: 0; outline: 1px solid var(--gold-dim); outline-offset: 6px; }
[data-theme="dark"] .hpl figure.portrait figcaption { text-align: center; margin-top: 1.1rem; }
/* the nameplate carries everything: name, dates, and the photograph's credit */
[data-theme="dark"] .hpl h1 {
  order: 2; display: flex; flex-direction: column; align-items: center; margin: 1.5rem 0 0; padding: .7rem 2.2rem .85rem;
  white-space: nowrap; font-size: 1.8rem; line-height: 1.15; --notch: radial-gradient(11px at 11px 11px, #0000 97%, #000) -11px -11px;
}
[data-theme="dark"] .hpl h1::before { order: 2; content: "August 20, 1890 \2013  March 15, 1937"; margin-top: .2rem; font-size: 1.05rem; font-style: italic; }
[data-theme="dark"] .hpl h1::after { order: 3; content: "Photograph by Lucius B. Truesdell, June 1934"; margin-top: .45rem; padding-top: .4rem; border-top: 1px solid rgba(27, 21, 8, .45); font-size: .8rem; letter-spacing: .03em; }
[data-theme="dark"] .hpl figure.portrait figcaption, [data-theme="dark"] .sigil > p:first-child { display: none; }
[data-theme="dark"] .hpl { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); }
[data-theme="dark"] .hpl figure.portrait { display: contents; }
[data-theme="dark"] .hpl figure.portrait img { order: 1; width: 100%; }
[data-theme="dark"] .hpl figure.portrait figcaption { order: 3; margin-top: .8rem; }
[data-theme="dark"] .sigil > p:first-child { text-align: center; color: var(--gold); }

/* ---- The Elder Sign: the branch in a rectangle, flat gold line-work ---- */
[data-theme="dark"] .sigil::before { background-image: url("/images/elder-sign-medallion.svg"); }
[data-theme="dark"][data-sign="behind"] .sigil { --sigil: min(46rem, 90vh); }
[data-theme="dark"][data-sign="behind"] .sigil::before { opacity: .13; }
/* on its own: a crisp emblem between the portrait and the text */
[data-theme="dark"][data-sign="above"] .sigil { --sigil: 12rem; }
[data-theme="dark"][data-sign="above"] .sigil::before { position: static; opacity: 1; margin: 0 auto 2.25rem; width: auto; }

[data-theme="dark"] .codex-toggle { border-color: var(--gold-dim); color: var(--gold-hi); }
[data-theme="dark"] .codex h3 { color: var(--gold); }
/* ==== Less polish: no shine. The plates are flat, matte, dull bronze; the gold lines are toned down to a pale, dusty bronze ==== */
:root[data-theme="dark"] {
  --gold: #AE9968; --gold-hi: #D0BF94; --gold-dim: rgba(174, 153, 104, .4); --plate-ink: #15120B;
  --brass: linear-gradient(#A38C58, #94804F);
}
[data-theme="dark"] .hpl h1, [data-theme="dark"] .side nav a { text-shadow: none; }
[data-theme="dark"] .hpl { filter: none; }
@media (min-width: 900px) {
  [data-theme="dark"] .side nav li, [data-theme="dark"] .side nav li:last-child { filter: none; }
  [data-theme="dark"] .side nav a { filter: brightness(.7); }
  [data-theme="dark"] .side nav a:hover { filter: brightness(.85); }
  [data-theme="dark"] .side nav a[aria-current="page"] { filter: none; }
}
/* ==== Verdigris ground: the bronze stays bronze; the ground under it is properly blue-green, the colour bronze goes when it corrodes,
   so the scheme no longer reads as black with brass on it ==== */
:root[data-theme="dark"][data-green="verdigris"] { --bg: #0A2124; --rule: #1B4142; --ph: #0F2D2F; --accent: #6EC5B4; --muted: #8FA6A0; }
/* the sign takes the scheme's metal colour too */
[data-theme="dark"] .sigil::before { background: var(--gold); -webkit-mask: url("/images/elder-sign-medallion.svg") center / contain no-repeat; mask: url("/images/elder-sign-medallion.svg") center / contain no-repeat; }
/* ==== Side menu and Follow-on-X: plain brushed plates, square-cut like an engraved name plate ("Gold Straight").
   Built from the scheme's Plates colour so the picker drives them: a flat brushed face with a soft sheen,
   a dark outline, dark lettering. No bevel, no inner line. ==== */
:root[data-theme="dark"] .side nav a,
:root[data-theme="dark"] .side nav a:hover,
:root[data-theme="dark"] .side nav a[aria-current="page"],
:root[data-theme="dark"] .side .x-link,
:root[data-theme="dark"] .side .x-link:hover {
  --p: var(--plate, #A38C58);
  background:
    repeating-linear-gradient(180deg, rgba(255, 250, 235, .07) 0 1px, transparent 1px 3px),                  /* brushed streaks */
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .045) 0 1px, transparent 1px 5px),
    linear-gradient(100deg, color-mix(in srgb, var(--p) 88%, #fff4d6) 0%, var(--p) 35%,
                    color-mix(in srgb, var(--p) 92%, #fff4d6) 60%, color-mix(in srgb, var(--p) 88%, #000) 100%); /* soft sheen */
  -webkit-mask: none; mask: none; border: 3px solid color-mix(in srgb, var(--p) 28%, #000); border-radius: 2px;
  text-align: center; text-decoration: none; text-transform: none; text-shadow: none;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif; color: var(--plate-ink);
  box-shadow: inset 0 1px 0 rgba(255, 248, 228, .35), 0 2px 4px rgba(0, 0, 0, .45);
  filter: brightness(.9);
  transition: filter .15s ease;
}
:root[data-theme="dark"] .side nav a:hover, :root[data-theme="dark"] .side .x-link:hover { filter: brightness(1); }
:root[data-theme="dark"] .side nav a[aria-current="page"] { filter: brightness(1.05); }
:root[data-theme="dark"] .side nav a[aria-current="page"]::before { display: none; }
:root[data-theme="dark"] .side nav a { font-weight: 500; letter-spacing: .01em; }
:root[data-theme="dark"] .side .x-link { display: block; padding: .6rem .8rem .64rem; font-size: .98rem; font-weight: 500; line-height: 1.2; white-space: nowrap; letter-spacing: 0; filter: brightness(.96); }
@media (min-width: 900px) {
  :root[data-theme="dark"] .side nav ul { display: grid; gap: .8rem; }
  :root[data-theme="dark"] .side nav li, :root[data-theme="dark"] .side nav li:last-child { border: 0; filter: none; }
  :root[data-theme="dark"] .side nav a, :root[data-theme="dark"] .side nav a:hover { padding: .78rem 1rem .84rem; font-size: 1.5rem; line-height: 1.1; }
  :root[data-theme="dark"] .side > .x-link { margin: 0 var(--side-gap) 1.6rem 0; }
}
/* ==== The nameplate under the portrait: kept simple. Its plain bronze face and notched corners, with only a fine dark edge.
   The straight edges are a 1px border; the notch curves are thin dark rings at each corner, just outside the cut. ==== */
:root[data-theme="dark"] .hpl h1 {
  --p: var(--plate, #A38C58); --d: color-mix(in srgb, var(--p) 35%, #000);
  border: 1px solid var(--d);
  background:
    radial-gradient(circle at 0 0,       transparent 11px, var(--d) 11px 12px, transparent 12px),
    radial-gradient(circle at 100% 0,    transparent 11px, var(--d) 11px 12px, transparent 12px),
    radial-gradient(circle at 0 100%,    transparent 11px, var(--d) 11px 12px, transparent 12px),
    radial-gradient(circle at 100% 100%, transparent 11px, var(--d) 11px 12px, transparent 12px),
    linear-gradient(var(--p), color-mix(in srgb, var(--p) 92%, #000));
  background-origin: border-box; background-clip: border-box;
  color: var(--plate-ink); text-shadow: none; box-shadow: none;
}
/* the selected plate: brighter than the rest, with a second outline standing just outside its dark edge */
:root[data-theme="dark"] .side nav a { filter: brightness(.84); }
:root[data-theme="dark"] .side nav a:hover { filter: brightness(.96); }
:root[data-theme="dark"] .side nav a[aria-current="page"] { filter: brightness(1.12); outline: 2px solid color-mix(in srgb, var(--plate, #A38C58) 85%, #fff4d6); outline-offset: 3px; }
/* Live Feed's red dot gets a dark ring so it reads as a set-in light */
:root[data-theme="dark"] .side nav .live-dot { width: .6rem; height: .6rem; box-shadow: 0 0 0 2px #1E140B, 0 0 7px 2px rgba(229, 55, 43, .75); }
/* The dark-mode switch mirrors the light one: the same white-pill shape (here a dark verdigris pill), labelled "Dark",
   the knob held in the off (left) position, in the scheme's bronze */
:root[data-theme="dark"] .side > .toggle {
  display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .4rem .3rem .8rem; border: 1px solid var(--gold-dim); border-radius: 999px;
  background: var(--ph); color: var(--gold-hi); font-family: "Public Sans", "Helvetica Neue", Arial, sans-serif; font-size: .85rem; font-weight: 600;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .45); filter: none; white-space: nowrap;
}
:root[data-theme="dark"] .side > .toggle .switch { display: block; border-color: var(--gold-hi); background: transparent; }
:root[data-theme="dark"] .side > .toggle .switch i { background: var(--gold-hi); transform: none; }
:root[data-theme="dark"] .side > .toggle:hover { border-color: var(--gold); color: #fff4d6; }
:root[data-theme="dark"] .side > .toggle:hover .switch i { background: #fff4d6; }

/* Phones and small tablets: brass nav buttons share the row evenly, with room around the text */
@media (max-width: 899px) {
  :root[data-theme="dark"] .side nav ul { display: flex; gap: .55rem; margin: 0; padding: 0; }
  :root[data-theme="dark"] .side nav li, :root[data-theme="dark"] .side nav li:last-child { flex: 1 1 auto; min-width: 0; border: 0; }
  :root[data-theme="dark"] .side nav a, :root[data-theme="dark"] .side nav a:hover {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    min-height: 2.75rem; padding: .5rem .45rem .55rem; box-sizing: border-box;
    font-size: clamp(.9rem, 3.9vw, 1.12rem); padding-left: .6rem; padding-right: .6rem; line-height: 1.1; text-align: center; white-space: nowrap;
  }
  :root[data-theme="dark"] .side nav a[aria-current="page"] { outline-offset: 2px; }
  :root[data-theme="dark"] .side nav .live-dot { width: .5rem; height: .5rem; flex: none; }
  :root[data-theme="dark"] .side .x-link { display: block; width: 100%; box-sizing: border-box; text-align: center; margin-top: .6rem; font-size: .95rem; }
}