/* Built Beyond Ordinary — tokens. Source of truth: 02-brand/design.md
   Achromatic by decision: there is no permanent brand accent colour. */
@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* Environments */
  --bbo-void: #000000;
  --bbo-ink: #0a0a0b;
  --bbo-graphite-1: #141416;
  --bbo-graphite-2: #1c1c1f;
  --bbo-graphite-3: #262629;
  --bbo-paper: #f3f1ec;
  --bbo-paper-bright: #faf9f6;
  --bbo-steel: #b9bcc0;
  --bbo-steel-deep: #6e7174;

  /* Type */
  --bbo-sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; /* @kind font */
  --bbo-serif: "Instrument Serif", Georgia, "Times New Roman", serif; /* @kind font */

  /* Spacing — 4px base. Nothing outside this scale. */
  --bbo-s1: 4px;  --bbo-s2: 8px;   --bbo-s3: 12px;  --bbo-s4: 16px;
  --bbo-s5: 24px; --bbo-s6: 32px;  --bbo-s7: 48px;  --bbo-s8: 64px;
  --bbo-s9: 96px; --bbo-s10: 128px; --bbo-s11: 192px; --bbo-s12: 256px;

  /* Structure */
  --bbo-wrap: 1240px;
  --bbo-measure: 720px;

  /* Radius — tight by intent: machined, not consumer-app */
  --bbo-r-btn: 7px;
  --bbo-r-card: 14px;
  --bbo-r-modal: 18px;

  /* Grain — used at very low opacity; felt before seen */
  --bbo-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* @kind other */
}

/* ── The two worlds. Designed separately — never inverted themes. ── */
.bbo-dark {
  --bbo-bg: var(--bbo-ink);
  --bbo-fg: #f2f2f0;
  --bbo-fg-2: rgba(242, 242, 240, 0.62);
  --bbo-fg-3: rgba(242, 242, 240, 0.4);
  --bbo-line: rgba(255, 255, 255, 0.08);
  --bbo-line-strong: rgba(255, 255, 255, 0.18);
  background: var(--bbo-bg);
  color: var(--bbo-fg);
}
.bbo-void { --bbo-bg: var(--bbo-void); }
.bbo-light {
  --bbo-bg: var(--bbo-paper);
  --bbo-fg: #121213;
  --bbo-fg-2: #55575a;
  --bbo-fg-3: #8a8c8f;
  --bbo-line: rgba(18, 18, 19, 0.1);
  --bbo-line-strong: rgba(18, 18, 19, 0.2);
  background: var(--bbo-bg);
  color: var(--bbo-fg);
}


/* Built Beyond Ordinary — component styles.
   Material recipes are the tuned originals from the brand book, not re-derived. */

.bbo-root { font-family: var(--bbo-sans); font-size: 17px; line-height: 1.62; font-weight: 400;
  -webkit-font-smoothing: antialiased; }

/* ── Section ───────────────────────────────────────────── */
.bbo-section { padding: var(--bbo-s11) var(--bbo-s8); position: relative; overflow: hidden; }
.bbo-section--tight { padding: var(--bbo-s9) var(--bbo-s8); }
.bbo-wrap { max-width: var(--bbo-wrap); margin: 0 auto; position: relative; z-index: 2; }
@media (max-width: 900px) { .bbo-section { padding: var(--bbo-s9) 20px; } }

/* ── Type ──────────────────────────────────────────────── */
.bbo-monument, .bbo-statement, .bbo-heading, .bbo-sub {
  margin: 0; font-weight: 400; letter-spacing: -0.03em; line-height: 1.02; }
.bbo-monument { font-size: clamp(46px, 9.4vw, 150px); letter-spacing: -0.045em; line-height: 0.95; }
.bbo-statement { font-size: clamp(33px, 5.4vw, 70px); letter-spacing: -0.035em; line-height: 1.05; }
.bbo-heading { font-size: clamp(27px, 3.2vw, 42px); letter-spacing: -0.028em; line-height: 1.1; }
.bbo-sub { font-size: clamp(19px, 1.75vw, 23px); letter-spacing: -0.015em; line-height: 1.45; }
.bbo-body { margin: 0 0 var(--bbo-s5); color: var(--bbo-fg-2); max-width: var(--bbo-measure); }
.bbo-body--lead { font-size: 20px; line-height: 1.5; color: var(--bbo-fg); letter-spacing: -0.012em; }
.bbo-meta { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bbo-fg-3); font-weight: 500; }
/* The editorial serif. Used where it carries meaning — never as a per-heading habit. */
.bbo-em { font-family: var(--bbo-serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }

/* ── Eyebrow ───────────────────────────────────────────── */
.bbo-eyebrow { display: block; margin-bottom: 12px;
  font-size: 13px; letter-spacing: -0.005em; color: var(--bbo-fg-2); font-weight: 500; }

/* ── Material surface — a lit object, not "a gradient" ── */
.bbo-material { position: relative; border-radius: var(--bbo-r-card); border: 1px solid var(--bbo-line);
  overflow: hidden; padding: var(--bbo-s6);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 5px),
    linear-gradient(178deg, #212125 0%, #18181b 26%, #111113 62%, #0b0b0c 100%); }
.bbo-material::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 22%, rgba(255,255,255,.16) 78%, transparent); }
.bbo-light .bbo-material {
  background:
    repeating-linear-gradient(90deg, rgba(18,18,19,.016) 0 1px, transparent 1px 5px),
    linear-gradient(178deg, #ffffff 0%, var(--bbo-paper-bright) 55%, #efede7 100%); }
.bbo-light .bbo-material::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 30%, transparent); }

/* ── Plane — inset information surface ─────────────────── */
.bbo-plane { background: rgba(0,0,0,.3); border: 1px solid var(--bbo-line); border-radius: 10px; padding: var(--bbo-s5); }
.bbo-light .bbo-plane { background: rgba(18,18,19,.035); }

/* ── Buttons ───────────────────────────────────────────── */
.bbo-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px var(--bbo-s6); min-height: 44px;
  border-radius: var(--bbo-r-btn); border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--bbo-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
/* Two materials from one world, not one button inverted.
   On dark: brushed aluminium. On light: warm graphite. */
/* Brushed aluminium — the dark-environment primary. Material perceived before texture. */
.bbo-btn--primary { position: relative; overflow: hidden; color: #0b0b0c;
  background:
    radial-gradient(125% 155% at 50% 26%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.24) 44%, rgba(255,255,255,0) 74%),
    linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,.08) 100%),
    linear-gradient(90deg, #b0afaa 0%, #cdccc8 20%, #e1e0dc 50%, #c9c8c4 80%, #aeada8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1.5px 0 rgba(0,0,0,.3),
    0 0 0 1px rgba(18,18,19,.16), 0 1px 2px rgba(0,0,0,.34); }
.bbo-btn--primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: var(--bbo-grain); background-size: 200% 34%; opacity: .045; mix-blend-mode: overlay; }
/* Warm graphite — the light-environment primary. Dark tuned to the paper, not to black:
   soft top-lit convexity, no rim glare, so it reads as a solid object in the same room. */
.bbo-light .bbo-btn--primary { color: #f6f4ef;
  background:
    radial-gradient(130% 180% at 50% -20%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 46%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #2a2724 0%, #1f1d1b 58%, #171514 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(31,29,27,.92), 0 2px 4px rgba(31,29,27,.22);
  transition: background .18s ease, box-shadow .18s ease, transform .08s ease; }
.bbo-light .bbo-btn--primary:hover {
  background:
    radial-gradient(130% 180% at 50% -20%, rgba(255,255,255,.24) 0%, rgba(255,255,255,.06) 46%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #302d29 0%, #24221f 58%, #1b1917 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(31,29,27,.92), 0 3px 8px rgba(31,29,27,.2); }
.bbo-light .bbo-btn--primary:active { transform: translateY(1px);
  background: linear-gradient(180deg, #211f1d 0%, #191716 100%);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(31,29,27,.92); }
/* Compact — for bars and toolbars, where the action sits in a row of 13.5px links
   and the page-CTA 44px block reads as an intrusion. Same material, nav rhythm. */
.bbo-btn--compact { min-height: 34px; padding: 8px 14px; font-size: 13.5px; gap: 8px; }
.bbo-btn--secondary { background: transparent; color: var(--bbo-fg); border: 1px solid var(--bbo-line-strong); }
.bbo-btn--tertiary { background: var(--bbo-graphite-2); color: var(--bbo-fg-2); }
.bbo-light .bbo-btn--tertiary { background: rgba(18,18,19,.05); }
.bbo-btn--text { background: transparent; color: var(--bbo-fg); padding: 0; min-height: 0;
  border-bottom: 1px solid var(--bbo-line-strong); border-radius: 0; }

/* ── Pills — two distinct components ───────────────────── */
.bbo-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bbo-line-strong);
  background: rgba(255,255,255,.035); color: var(--bbo-fg-2); font-weight: 500; white-space: nowrap; }
.bbo-light .bbo-pill { background: rgba(18,18,19,.03); }
/* Display pill — editorial and campaign only. Never in product UI. */
.bbo-pill-display { display: inline-flex; align-items: center; padding: 14px var(--bbo-s6); border-radius: 999px;
  border: 1px solid var(--bbo-line-strong); background: transparent; color: var(--bbo-fg);
  font-size: clamp(17px, 2.1vw, 26px); letter-spacing: -0.02em; white-space: nowrap; }

/* ── Figure — serif numerals as graphic objects ────────── */
.bbo-figure .bbo-figure__n { font-family: var(--bbo-serif); font-style: italic;
  font-size: clamp(38px, 4.6vw, 56px); line-height: 1; display: block; margin-bottom: 10px; }
.bbo-figure .bbo-figure__l { font-size: 14px; color: var(--bbo-fg-2); max-width: 26ch; line-height: 1.45; }

/* ── Image plate — the tonal fade treatment ────────────── */
.bbo-plate { position: relative; border-radius: var(--bbo-r-card); overflow: hidden;
  border: 1px solid var(--bbo-line); display: flex; align-items: flex-end; padding: var(--bbo-s5); aspect-ratio: 4/5; }
.bbo-plate__img { position: absolute; inset: 0;
  background: linear-gradient(146deg, #4a4642 0%, #2a2827 38%, #141414 72%, #0a0a0a 100%); }
.bbo-plate__img::after { content: ""; position: absolute; inset: 0;
  background-image: var(--bbo-grain); opacity: .16; mix-blend-mode: overlay; }
.bbo-plate__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(180deg, transparent, rgba(8,8,9,.72) 58%, rgba(8,8,9,.94)); }
.bbo-plate__cap { position: relative; z-index: 2; color: #f2f2f0; }
/* In the light world images are discrete plates with their own edges — no fade. */
.bbo-plate--light { aspect-ratio: 4/3; align-items: flex-start; border-color: rgba(18,18,19,.14); }
.bbo-plate--light .bbo-plate__img { background: linear-gradient(150deg, #e7e3da 0%, #cfcbc2 42%, #aeaba4 100%); }
.bbo-plate--light .bbo-plate__fade { display: none; }

/* ── Rule ──────────────────────────────────────────────── */
.bbo-rule { height: 1px; background: var(--bbo-line); border: 0; margin: 0; }

/* ── Nav ───────────────────────────────────────────────── */
.bbo-nav { display: flex; align-items: center; gap: var(--bbo-s6);
  padding: 10px 12px 10px 26px; border-radius: 999px; background: rgba(12,12,13,.86);
  border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(22px); }
.bbo-nav__links { margin-left: auto; display: flex; gap: var(--bbo-s5); align-items: center; }
.bbo-nav__links a { font-size: 13.5px; color: rgba(242,242,240,.5); text-decoration: none; }

/* ── Wordmark ──────────────────────────────────────────── */
.bbo-wordmark { font-family: var(--bbo-serif); letter-spacing: .3em; line-height: 1;
  color: currentColor; display: inline-block; }
.bbo-wordmark--full { letter-spacing: .05em; }

/* ── Modal ─────────────────────────────────────────────── */
.bbo-modal { border-radius: var(--bbo-r-modal); padding: var(--bbo-s7); max-width: 760px; }