/* book/brand.css   AN ODDYSSEY: the identity, in one small file a new page can import so it cannot drift.   Niko, 21 Sept 2026: "I want everything to be branded."
   The sheet it comes from: REVIEW/brand-2026-09-21/BRAND.md and brand.jpg. Nothing here is new: the inks are ds/tokens/colors.css and night.css, the faces are ds/tokens/typography.css,
   the lockup is index.html's title (.title, .an, .d2, .subtitle) and lab/cover-concepts/kit.css (its paper inks), the ring is the title page's. index.html and the templates do not load this
   file and keep working unchanged; they may adopt it later. test/brand.test.mjs fails if a value here stops matching the design system.

   USE        <link rel="stylesheet" href="book/brand.css">        (from chapters/, read/, lab/ and so on: ../book/brand.css)
              It brings the five faces with it (ds/fonts/fonts.css), so a page that loads nothing else still sets in the book's type.

   THE LOCKUP, stacked (the master form: "An" in italic over the masthead, the second D diffracted in cyan and magenta)
              <p class="lockup" aria-label="An Oddyssey"><span class="an">An</span><span class="word">Od<span class="d2">d</span>yssey</span></p>
              <p class="lockup-sub">a tale of self-discovery at the turn of the millennium</p>          (only where there is room; never reworded)
   in a row   <p class="lockup row" ...>   the same two pieces on one line, for a header band that has no height to give
   mark only  the emblem, the 0 = 1 ring:
              <svg class="emblem" role="img" aria-label="Phi equals Theta. Zero equals one." viewBox="0 0 120 120" fill="none"><g stroke="currentColor" stroke-width="1"><circle cx="60" cy="60" r="55" stroke-dasharray="82.38 4" stroke-dashoffset="41.19" stroke-linecap="round" opacity=".7"/><line x1="60" y1="1.5" x2="60" y2="7" opacity=".5"/><line x1="60" y1="113" x2="60" y2="118.5" opacity=".5"/><line x1="1.5" y1="60" x2="7" y2="60" opacity=".5"/><line x1="113" y1="60" x2="118.5" y2="60" opacity=".5"/></g><circle cx="60" cy="60" r="46" stroke="currentColor" stroke-width=".5" opacity=".35"/><line x1="26" y1="60" x2="94" y2="60" stroke="currentColor" stroke-width=".75" opacity=".6"/><text x="60" y="47" text-anchor="middle" fill="currentColor" font-family="Space Mono, monospace" font-size="14" letter-spacing="1">Φ = Θ</text><text x="60" y="86" text-anchor="middle" fill="currentColor" font-family="Space Mono, monospace" font-size="14" letter-spacing="1">0 = 1</text></svg>
   Size the lockup with font-size on .lockup: everything inside it is in em.
   DAY AND NIGHT   on paper the lockup is ink and the two D inks multiply; on the night the masthead is highlighter yellow, "An" and the subtitle are cream, and the two inks screen.
              Night is reached three ways, all the same rules: :root[data-theme="night"] (the lamp), [data-ground="night"] (a night section on a day page, as the title page is), .on-night.
   NEVER      no NK anywhere: not beside the lockup, not on a cover or a title page, not in a file's data (his word, 21 Sept 2026); no other wording of the subtitle; no rounded corners; no shadow, outline or gradient on the letters; the D is the only letter that splits. */
@import url("../ds/fonts/fonts.css");
:root{
  /* the night */
  --brand-night:#141F47;        /* night indigo, deep: the ground of the door, the theme colour, the icon (ds: --night-sky-deep) */
  --brand-night-sky:#1B2A5E;    /* night indigo, the sky above it (ds: --night-sky) */
  --brand-night-low:#0E1633;    /* the foot of the threshold's sky */
  --brand-yellow:#EDE84F;       /* highlighter yellow (ds: --paper-yellow, --pixel-dot) */
  --brand-cream:#F2ECD6;        /* cream, the night's white: prose and "An" on indigo (ds: --text-on-pixel) */
  --brand-mist:#CFD3E4;         /* quiet text on the night */
  --brand-sky:#6FA8C7;          /* sky blue: the second hairline, the ghost behind the title (ds: --pig-sky) */
  --brand-violet:#6B5B95;       /* violet: the lead accent on paper, the glow at the foot of the sky (ds: --pig-violet) */
  /* the day */
  --brand-paper:#EFE7D2;        /* cream paper, the reading ground (ds: --paper-cream) */
  --brand-deckle:#F6F1E2;       /* the lighter sheet laid on top (ds: --paper-deckle) */
  --brand-oatmeal:#E3D9BE;      /* oatmeal (ds: --paper-oatmeal) */
  --brand-grey:#CFC9BC;         /* grey paper, the page behind the sheets (ds: --paper-grey) */
  --brand-ink:#1F1A15;          /* ink, the pen at full strength (ds: --ink-black) */
  --brand-ink-blue:#2A3C77;     /* ink blue (ds: --ink-blue) */
  --brand-pencil:#5B564E;       /* pencil (ds: --ink-pencil) */
  --brand-oxide:#A8342B;        /* oxide red: stamps, links on paper (ds: --pig-oxide) */
  /* the neon pair: the diffraction, the threshold's grids. Never a fill, never a button */
  --brand-cyan:#19E3FF; --brand-magenta:#FF3DB4;                 /* on the night, screened */
  --brand-cyan-paper:#12BFE0; --brand-magenta-paper:#F0329F;     /* on paper, multiplied */
  /* the faces (the same stacks as ds/tokens/typography.css and codex.css) */
  --font-display:"Big Shoulders Display",'Haettenschweiler','Arial Narrow',sans-serif;
  --font-body:"EB Garamond",'Iowan Old Style','Palatino Linotype',Palatino,serif;
  --font-hand:"Caveat",'Segoe Script',cursive;
  --font-terminal:"VT323",'Courier New',monospace;
  --font-instrument:"Space Mono","VT323",monospace;
}

/* the lockup */
.lockup{margin:0;display:inline-block;font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.005em;text-align:left;
  font-size:clamp(44px,9vw,84px);color:var(--lockup-ink,var(--brand-ink));border-radius:0}
.lockup .an{display:block;font-family:var(--font-body);font-style:italic;font-weight:400;font-size:.19em;line-height:1;text-transform:none;letter-spacing:0;margin:0 0 .12em .06em;color:var(--lockup-an,var(--brand-ink))}
.lockup .word{display:block;white-space:nowrap}
.lockup.row{display:inline-flex;align-items:baseline;gap:.16em}
.lockup.row .an{display:inline;font-size:.5em;margin:0}
.lockup .d2{position:relative;display:inline-block}
.lockup .d2::before,.lockup .d2::after{content:"D";position:absolute;left:0;top:0;mix-blend-mode:multiply;pointer-events:none}
.lockup .d2::before{color:var(--brand-cyan-paper);transform:translate(-.085em,-.012em);filter:blur(.014em);animation:brand-d2a 7s ease-in-out infinite}
.lockup .d2::after{color:var(--brand-magenta-paper);transform:translate(.09em,.02em);filter:blur(.016em);animation:brand-d2b 9s ease-in-out infinite}   /* the still split is the cover kit's: with no motion the D stays diffracted */
@keyframes brand-d2a{0%,100%{transform:translate(-.05em,0);filter:blur(.012em)}50%{transform:translate(-.11em,-.02em);filter:blur(.03em)}}
@keyframes brand-d2b{0%,100%{transform:translate(.05em,.01em);filter:blur(.012em)}50%{transform:translate(.12em,.03em);filter:blur(.035em)}}
.lockup-sub{margin:14px 0 0;font-family:var(--font-instrument);font-weight:400;font-size:clamp(9px,.5vw + 8px,15px);line-height:1.6;letter-spacing:.32em;text-transform:uppercase;color:var(--lockup-an,var(--brand-ink));max-width:46em}
.emblem{display:block;width:clamp(48px,6vw,72px);height:auto;color:var(--lockup-an,var(--brand-ink))}

/* the night: the title page's own inks */
:root[data-theme="night"],[data-ground="night"],.on-night{--lockup-ink:var(--brand-yellow);--lockup-an:var(--brand-cream)}
:root[data-theme="night"] .lockup .d2::before,:root[data-theme="night"] .lockup .d2::after,[data-ground="night"] .lockup .d2::before,[data-ground="night"] .lockup .d2::after,
.on-night .lockup .d2::before,.on-night .lockup .d2::after,.on-night.lockup .d2::before,.on-night.lockup .d2::after{mix-blend-mode:screen}
:root[data-theme="night"] .lockup .d2::before,[data-ground="night"] .lockup .d2::before,.on-night .lockup .d2::before,.on-night.lockup .d2::before{color:var(--brand-cyan)}
:root[data-theme="night"] .lockup .d2::after,[data-ground="night"] .lockup .d2::after,.on-night .lockup .d2::after,.on-night.lockup .d2::after{color:var(--brand-magenta)}
:root[data-theme="night"] .emblem,[data-ground="night"] .emblem,.on-night .emblem,.on-night.emblem{color:var(--brand-yellow)}

@media (prefers-reduced-motion:reduce){.lockup .d2::before,.lockup .d2::after{animation:none}}
@media print{.lockup .d2::before,.lockup .d2::after{display:none}}