/*
  Bureau Paradis brand tokens.
  Colors and fonts are the official values from BP_Brand_Book_2026.pdf
  (Logo Guideline v.01, July 2026), confirmed by pixel-sampling the
  rendered swatches — not re-derived or approximated.

  Brand book name -> token:
    Deep Navy Blue #193963  -> --bp-navy
    Orange         #B95118  -> --bp-copper   (kept old var name to avoid a
    Olive Green    #7B8D3E  -> --bp-moss      site-wide rename; same hue)
    Deep Burgundy  #4E0000  -> --bp-maroon
    Soft Blush Beige #E9D4C3 -> --bp-beige (the neutral paper/ink tone)

  Typeface is Poppins site-wide, matching the brand book's screen-font rule.
  Montserrat remains print-only, and Foundation is reserved for highlights
  if the licensed font files become available.
*/
:root {
  --bp-copper: #b95118;
  --bp-copper-dark: #56260b;
  --bp-copper-tint: #ed9e73;
  --bp-moss: #7b8d3e;
  --bp-moss-dark: #373f1c;
  --bp-moss-tint: #becd8d;
  --bp-navy: #193963;
  --bp-navy-light: #255594;
  --bp-navy-tint: #e9d4c3; /* on a navy dark-mode page, beige is the readable tint */
  --bp-maroon: #4e0000;
  --bp-maroon-light: #810000;
  --bp-maroon-tint: #cf2c2c;
  --bp-coral: #dd6b6b;
  --bp-coral-dark: #b83d3d;
  --bp-coral-tint: #f5a8a8;
  --bp-beige: #e9d4c3;

  /* RGB triplets of the four pillar colors (+ their dark-mode tints), for
     effects that need rgba() with a variable alpha — e.g. .spotlight-card's
     cursor glow. Keep these in sync with the hex values above by hand. */
  --bp-copper-rgb: 185, 81, 24;
  --bp-copper-tint-rgb: 237, 158, 115;
  --bp-moss-rgb: 123, 141, 62;
  --bp-moss-tint-rgb: 190, 205, 141;
  --bp-navy-rgb: 25, 57, 99;
  --bp-navy-tint-rgb: 233, 212, 195;
  --bp-maroon-rgb: 78, 0, 0;
  --bp-maroon-tint-rgb: 207, 44, 44;
  --bp-coral-rgb: 221, 107, 107;
  --bp-coral-tint-rgb: 245, 168, 168;

  --bp-paper: #e9d4c3;
  --bp-paper-raised: #e1c4ad;
  --bp-ink: #193963;
  --bp-ink-soft: #607896;
  --bp-line: rgba(25, 57, 99, 0.18);
  --bp-line-strong: rgba(25, 57, 99, 0.42);
  /* RGB of --bp-ink, for hairlines and hatch fills that need a variable alpha.
     Flips with --bp-ink in dark mode — keep the two in sync by hand. */
  --bp-ink-rgb: 25, 57, 99;

  /* Poppins is the brand book's specified family (Logo Guideline v.01). Used
     as one family throughout — display, body, and the micro-type on eyebrows
     and buttons — so weight and spacing stay consistent everywhere. */
  --bp-font-display: "Poppins", "Arial", sans-serif;
  --bp-font-body: "Poppins", "Arial", sans-serif;
  --bp-font-mono: "Poppins", "Arial", sans-serif;

  --bp-radius: 2px;
  --bp-container: 72rem;

  /* Each site sets --bp-accent / --bp-accent-dark / --bp-accent-text / --bp-accent-rgb to one pillar color. */
  --bp-accent: var(--bp-navy);
  --bp-accent-dark: var(--bp-navy-light);
  --bp-accent-text: var(--bp-navy);
  --bp-accent-rgb: var(--bp-navy-rgb);

  /* Fixed (non-adaptive) tone for text sitting on a solid accent fill,
     e.g. buttons and the active nav pill — the fill itself doesn't change
     between light/dark mode, so its text color shouldn't either. This is
     the brand book's own pairing: beige reads on every accent color. */
  --bp-on-accent: #e9d4c3;

  /* The single "hot" tone the editorial furniture below uses — bullet squares,
     the filled arrow circle on pills, the crosshair markers. Follows the page
     accent, so each house gets its own automatically (Relay reads orange,
     Consultancy olive, Dizo Design burgundy) and the hub reads navy. Point this at
     var(--bp-copper) instead if the hub should run a warm accent throughout. */
  --bp-hot: var(--bp-accent-solid);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bp-paper: #193963;
    --bp-paper-raised: #204980;
    --bp-ink: #e9d4c3;
    --bp-ink-soft: #bba08b;
    --bp-line: rgba(233, 212, 195, 0.22);
    --bp-line-strong: rgba(233, 212, 195, 0.5);
    --bp-ink-rgb: 233, 212, 195;
    --bp-accent-text: var(--bp-navy-tint);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

/* Anchor navigation. scroll-margin keeps a targeted section clear of the
   sticky header, which would otherwise cover its first line. The
   prefers-reduced-motion block further down resets scroll-behavior. */
html {
  scroll-behavior: smooth;
}

main > section[id] {
  scroll-margin-top: 5.5rem;
}

/* Alternating grounds. Every section owns its own top padding and only the
   last has bottom padding, so a banded section needs its own — otherwise the
   tint stops flush against the final line of copy.
   The hero is nth-of-type(1), so the first band lands on the second section
   and the page reads as paper / tinted / paper rather than one flat sheet. */
/* ─── Dizo Design: colour-blocked sections ───────────────────────────────
   The design house sets its sections in the brand's own pillar colours
   instead of on paper. Because every component reads --bp-paper / --bp-ink /
   --bp-line / --bp-hot, overriding those on the section flips everything
   inside it — panels, rules, crosshairs, squares, buttons — with no change to
   any block component.

   Beige on a solid pillar colour is the brand book's own pairing, so this is
   the palette being used as specified rather than a new scheme. */
body[data-house="designs"] main > section:nth-of-type(n + 2) {
  background-color: var(--tone);
  padding-bottom: 6rem;

  --bp-ground: var(--tone);
  --bp-paper: var(--tone);
  --bp-paper-raised: rgba(233, 212, 195, 0.1);
  --bp-ink: #e9d4c3;
  --bp-ink-soft: rgba(233, 212, 195, 0.72);
  --bp-ink-rgb: 233, 212, 195;
  --bp-line: rgba(233, 212, 195, 0.28);
  --bp-line-strong: rgba(233, 212, 195, 0.55);
  --bp-hot: #e9d4c3;
  --bp-accent-text: #e9d4c3;
  --bp-accent-rgb: 233, 212, 195;
  color: #e9d4c3;
}

/* Cycles the four pillars down the page, so no two touching sections share a
   ground and the sequence restarts cleanly however many sections there are. */
body[data-house="designs"] main > section:nth-of-type(4n + 2) {
  --tone: var(--bp-navy);
}
body[data-house="designs"] main > section:nth-of-type(4n + 3) {
  --tone: var(--bp-copper);
}
body[data-house="designs"] main > section:nth-of-type(4n + 4) {
  --tone: var(--bp-moss);
}
body[data-house="designs"] main > section:nth-of-type(4n + 5) {
  --tone: var(--bp-maroon);
}

/* Closes on the fifth colour. The cycle above only uses the four pillars, so
   Soft Blush Beige — the neutral the whole system is built on — never appeared
   on the page that shows the palette. It's the one ground that takes navy ink
   rather than beige, so the tones invert back. */
body[data-house="designs"] main > section:last-of-type {
  --tone: var(--bp-beige);
  --bp-paper-raised: #e1c4ad;
  --bp-ink: #193963;
  --bp-ink-soft: #607896;
  --bp-ink-rgb: 25, 57, 99;
  --bp-line: rgba(25, 57, 99, 0.18);
  --bp-line-strong: rgba(25, 57, 99, 0.42);
  --bp-hot: #193963;
  --bp-accent-text: #193963;
  --bp-accent-rgb: 25, 57, 99;
  color: #193963;
}

main > section:nth-of-type(even) {
  /* --bp-ground is what the crosshair in .rule-head paints itself with to punch
     out of the rule. Defining the band through it keeps the two exactly equal —
     a hardcoded paper colour would leave a pale notch on every tinted section. */
  --bp-ground: color-mix(in srgb, var(--bp-ink) 3.5%, var(--bp-paper));
  background-color: var(--bp-ground);
  padding-bottom: 6rem;
}

body {
  background: var(--bp-paper);
  color: var(--bp-ink);
  font-family: var(--bp-font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--bp-font-display);
  /* 700, not 900: Poppins is geometric and reads much heavier than Roboto at
     the same weight. 700 with negative tracking is the editorial display voice. */
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.025em;
}

a {
  color: inherit;
}

.eyebrow {
  font-family: var(--bp-font-mono);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bp-accent-text);
}

.container {
  max-width: var(--bp-container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ─── Editorial furniture ────────────────────────────────────────────────
   The shared "drawing-sheet" language: hairline rules with crosshair marks,
   three-part section headers, hatched panel fills, and pill buttons with a
   filled arrow disc. Used by the block components so every section on every
   house is marked up the same way. */

/* Section header sitting on a hairline, with a + punched through the rule at
   its midpoint:
     ■ THE THREE HOUSES                                          3 houses
   A centred "(BP® — 02)" counter used to sit between them, copied from the
   template this language came from. It was dropped: the numbers were hardcoded
   per component so a page could show 02 twice and never 01, and the ® claimed
   a registered mark. */
.rule-head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--bp-line);
  font-family: var(--bp-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--bp-ink-soft);
}

/* The paper-colored padding is what makes the glyph read as punched out of
   the rule rather than sitting on top of it. */
.rule-head::before {
  content: "+";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 0.4rem;
  background: var(--bp-ground, var(--bp-paper));
  font-size: 0.9rem;
  line-height: 1;
  color: var(--bp-line-strong);
}

.rule-head .rh-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-transform: uppercase;
  color: var(--bp-ink);
}

/* The hot square. Viper's most repeated mark — it appears before every
   section label and every card title. */
.rule-head .rh-label::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--bp-hot);
}

.rule-head .rh-meta {
  text-align: right;
  font-variant-numeric: tabular-nums;
}



/* Fine diagonal hatch — the panel fill on cards and stat blocks. The base is
   --bp-paper-raised rather than a translucent ink wash: ink is navy, and even
   at 3% it cools the beige paper to grey. */
.hatch {
  background-color: var(--bp-paper-raised);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(var(--bp-ink-rgb), 0.05) 0 1px,
    transparent 1px 7px
  );
}

/* Pill button: lozenge with a filled hot disc carrying the arrow. */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 1.5rem 0.4rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--bp-line);
  background: rgba(var(--bp-ink-rgb), 0.05);
  color: var(--bp-ink);
  font-family: var(--bp-font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-pill .pill-disc {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--bp-hot);
  color: var(--bp-on-accent);
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-pill:hover {
  background: rgba(var(--bp-ink-rgb), 0.1);
  border-color: var(--bp-line-strong);
  transform: translateY(-2px);
}

.btn-pill:hover .pill-disc {
  transform: rotate(45deg);
}

/* Ghost variant: same geometry, outlined disc instead of a filled one. */
.btn-pill.ghost {
  background: transparent;
}

.btn-pill.ghost .pill-disc {
  background: transparent;
  border: 1px solid var(--bp-line-strong);
  color: var(--bp-ink);
}

/* Marquee track. The consumer duplicates its content once and the track
   translates exactly half its width, so the loop is seamless. */
@keyframes bp-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: bp-marquee var(--marquee-duration, 38s) linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

:focus-visible {
  outline: 2px solid var(--bp-accent-text);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Each block section owns its own top padding, so only the last one on a page
   needs bottom padding to keep the footer off it. */
main > section:last-of-type {
  padding-bottom: 4.5rem;
}

/* Shared motion primitives. `fade-up` / `line-up` are entrance keyframes each
   page wires up on its own hero elements with its own delays. `.reveal` /
   `.reveal-group` are the scroll-reveal contract used with <ScrollReveal />:
   elements are fully visible by default (no-JS / IO-unsupported fallback),
   and only hidden once that component's script confirms IntersectionObserver
   support and arms the group. */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes line-up {
  to {
    transform: translateY(0);
  }
}

.reveal {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}

.reveal-group.is-armed .reveal {
  opacity: 0;
  transform: translateY(18px);
}

.reveal-group.is-armed .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Cursor-spotlight glow, wired up by <Spotlight />: each page adds its own
   padding/background/border-radius on top of `.spotlight-card` (layout
   varies per site), this just owns the glow mechanics and the accent color,
   which follows --bp-accent-rgb so it's correct on every house automatically. */
.spotlight-card {
  position: relative;
  overflow: hidden;
}

.spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 180px at var(--mx, 50%) var(--my, 50%),
    rgba(var(--bp-accent-rgb), 0.16),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.spotlight-card:hover::before {
  opacity: 1;
}