/*
 * Berlinfographics studio — the three brand directions (2026-11-04).
 *
 * One stylesheet, three identities. A page opts in with
 * <html data-brand="dispatch|pulse|atlas">. Every direction shares the
 * owner's one fixed colour rule: red marks Nazi activity and nothing else
 * (themes/brand.json → core.red #C8102E, lightened to #CB2E49 on dark grounds).
 *
 *   DISPATCH  the feature desk  — newsprint, ink, a serif that reads like a
 *             broadsheet. Interactive scroll stories for the web.
 *   PULSE     the signal        — black, white, one amber; variable-width
 *             Archivo that stretches as it moves. Vertical video for Reels.
 *   ATLAS     the monument      — night navy and bone, condensed civic caps,
 *             mono figures. Explorable posters, print and carousel stills.
 */
@import url('./fonts.css');

:root {
  --nazi: #C8102E;          /* themes/brand.json core.red — Nazi activity only */
  --nazi-on-dark: #CB2E49;  /* themes/tokens.js dark-scheme lift of the same red */
  --floor: 12px;            /* house legibility floor (design/house-rules.md §4) */
}

/* ── DISPATCH ─────────────────────────────────────────────────────────── */
[data-brand="dispatch"] {
  --bg: #F2EDE3;            /* newsprint */
  --bg-2: #E8E1D3;
  --ink: #161412;
  --ink-2: #4A453E;
  --mute: #7A7266;
  --rule: #CDC3B2;
  --accent: #1F4E79;        /* dispatch blue: the "story" colour, never Nazi */
  --accent-2: #5E7F4B;
  --accent-3: #A9772A;
  --red: var(--nazi);
  --f-display: 'Newsreader', 'Georgia', serif;
  --f-text: 'Newsreader', 'Georgia', serif;
  --f-label: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --f-figure: 'IBM Plex Mono', ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-brand="dispatch"] {
    --bg: #15130F; --bg-2: #1E1B16; --ink: #EFE8DA; --ink-2: #C4BBAA;
    --mute: #8F8676; --rule: #3A352C; --accent: #7FA9D1; --accent-2: #9DBB86;
    --accent-3: #D6A756; --red: var(--nazi-on-dark); color-scheme: dark;
  }
}
:root[data-theme="dark"][data-brand="dispatch"] {
  --bg: #15130F; --bg-2: #1E1B16; --ink: #EFE8DA; --ink-2: #C4BBAA;
  --mute: #8F8676; --rule: #3A352C; --accent: #7FA9D1; --accent-2: #9DBB86;
  --accent-3: #D6A756; --red: var(--nazi-on-dark); color-scheme: dark;
}

/* ── CLASSIC (2026-11-05) ─────────────────────────────────────────────────
   The original Berlinfographics colours (themes/brand.json core): ink ground,
   paper text, the yellow brand plate and accent, bright blue as the second
   series. The DISPATCH layout and type, worn in the sheets' own colours. Used
   by the site's reworked scroll stories; the yellow plate is .bf-plate. */
[data-brand="classic"] {
  --bg: #19191A;            /* core.ink */
  --bg-2: #222224;          /* ink mixed 5% toward paper (tokens.js D.surface) */
  --bg-3: #2B2B2E;          /* surfaceRaised */
  --ink: #D9DAE2;           /* core.paper */
  --ink-2: #A9AAB1;         /* paper → ink 32% (inkMuted) */
  --mute: #7E7F86;          /* inkSubtle */
  --rule: #3A3A3E;          /* bg → paper 16% */
  --accent: #FDE12D;        /* core.yellow — the brand accent and plate */
  --accent-ink: #19191A;    /* text on the yellow plate */
  --accent-2: #4A4FD4;      /* core.blueBright — second series */
  --accent-3: #8C8FE6;      /* blueBright lifted for text on ink */
  --red: var(--nazi-on-dark);
  --f-display: 'Newsreader', 'Georgia', serif;
  --f-text: 'Newsreader', 'Georgia', serif;
  --f-label: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --f-figure: 'IBM Plex Mono', ui-monospace, monospace;
  color-scheme: dark;
}
[data-brand="classic"] .bf-plate { display: inline-block; background: var(--accent); color: var(--accent-ink);
  font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px 4px; }

/* ── PULSE ────────────────────────────────────────────────────────────── */
[data-brand="pulse"] {
  --bg: #0A0A0B;
  --bg-2: #151517;
  --ink: #F5F3EE;
  --ink-2: #B9B6AE;
  --mute: #6E6C68;
  --rule: #2A2A2D;
  --signal: #FFB000;        /* sodium amber — the one colour that moves */
  --cool: #8FB3C9;
  --red: var(--nazi-on-dark);
  --f-display: 'Archivo', 'Arial', sans-serif;   /* wdth 62–125, wght 100–900 */
  --f-figure: 'IBM Plex Mono', ui-monospace, monospace;
  color-scheme: dark;
}

/* ── ATLAS ────────────────────────────────────────────────────────────── */
[data-brand="atlas"] {
  --bg: #0E1A2B;            /* night navy */
  --bg-2: #142338;
  --ink: #ECE4D2;           /* bone */
  --ink-2: #B7B09F;
  --mute: #7D8796;
  --rule: #2A3A52;
  --glacier: #8CC2DE;       /* the atlas accent */
  --brass: #C9A55A;
  --red: var(--nazi-on-dark);
  --f-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-text: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --f-figure: 'IBM Plex Mono', ui-monospace, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"])[data-brand="atlas"].atlas-allow-light {
    --bg: #EDE6D6; --bg-2: #E2D9C5; --ink: #0E1A2B; --ink-2: #33415A;
    --mute: #6B7486; --rule: #C8BEA8; --glacier: #2E6E92; --brass: #8E6B22;
    --red: var(--nazi); color-scheme: light;
  }
}

/* ── shared base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }

/* The studio lockup: product name + owner. Each direction sets it its own way. */
.bf-lockup { display: inline-flex; align-items: baseline; gap: .55em; white-space: nowrap; }
.bf-lockup .bf-name { letter-spacing: .02em; }
.bf-lockup .bf-by { opacity: .72; }

/* ── Bottom-pinned scroll graphic on phones (approved by the owner 2026-11-07 on allied-bombing) ──
 * Opt in per scroll section:  <div class="scrolly pin-b"> <div class="sticky">…</div> <div class="steps">…</div> </div>
 * and pass  pin: 'bottom'  to Scrolly.steps. (Other names: add .pin-b-sticky / .pin-b-steps to them.)
 * On phones the graphic sits AFTER the cards, pinned to the bottom, in a panel --pin-h tall
 * (37% of the screen, 150–320px); the cards are read above it. The graphic inside must fit
 * the panel: size it from the panel's own height (clientHeight), not from 50svh.
 * Short phones (<600px tall) can hide card photos with .pin-b-hide-short; landscape phones
 * (<420px tall) unpin the graphic. Desktop is untouched. */
@media (max-width: 860px) {
  :root { --pin-h: clamp(150px, 37svh, 320px); }
  .pin-b { display: flex !important; flex-direction: column !important; position: relative; }
  .pin-b.pin-b-auto > .sticky, .pin-b.pin-b-auto > .pin-b-sticky { height: auto !important; } /* panel sized by its own drawing code (allied-bombing) */
  .pin-b > .steps, .pin-b > .pin-b-steps { order: 1; padding-top: 6svh !important; padding-bottom: 10svh !important; }
  .pin-b > .sticky, .pin-b > .pin-b-sticky {
    order: 2; position: sticky !important; top: auto !important; bottom: 0 !important;
    height: var(--pin-h) !important; min-height: 0 !important; max-height: none !important;
    box-sizing: border-box; overflow: hidden; z-index: 3; background: var(--bg);
    border-bottom: 0 !important; border-top: 1px solid var(--rule, rgba(255,255,255,.14));
    box-shadow: 0 -12px 18px -8px rgba(0,0,0,.6) !important;
  }
}
@media (max-width: 860px) and (max-height: 600px) and (min-height: 421px) {
  .pin-b .pin-b-hide-short { display: none !important; }
}
@media (max-width: 860px) and (max-height: 420px) {
  .pin-b > .sticky, .pin-b > .pin-b-sticky { position: relative !important; bottom: auto !important; height: auto !important; box-shadow: none !important; }
}