/* ═══════════════════════════════════════════════════════════════════
   VYEBE DEMOS — shared house styles

   One stylesheet for every demo under /demos. Before this, each page
   invented its own palette and type stack, which is exactly what makes
   a set of pages read as machine made: seven different design systems
   wearing the same layout.

   The language is Clickflame's, ported from clickflame/shared.css.
   Bebas Neue for display, Barlow Condensed for labels, Barlow for
   prose. The brand orange is split by role because a single #F5820A is
   2.6:1 on white and unreadable at body size. Warm ink ramp rather
   than neutral grey, because cold grey goes chalky on the warm cream.

   Per demo accent lives in one line on <body data-demo="...">.
═══════════════════════════════════════════════════════════════════ */

/* ── Metric matched fallbacks ─────────────────────────────────────
   The webfonts load with display=swap so the fallback paints first.
   Bebas is 68% of Arial's width, so without these every heading draws
   wide then snaps when the real face lands. Ratios measured, not
   guessed. Copied from clickflame/shared.css where they were derived. */
@font-face {
  font-family: 'Bebas Neue Fallback';
  src: local('Arial');
  size-adjust: 68.14%; ascent-override: 139.41%; descent-override: 51.36%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow Condensed Fallback';
  src: local('Arial');
  size-adjust: 72.50%; ascent-override: 137.93%; descent-override: 27.59%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow Fallback';
  font-weight: 400; src: local('Arial');
  size-adjust: 92.49%; ascent-override: 108.12%; descent-override: 21.62%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow Fallback';
  font-weight: 700; src: local('Arial');
  size-adjust: 90.95%; ascent-override: 109.95%; descent-override: 21.99%; line-gap-override: 0%;
}

:root {
  /* Brand orange, split by the job it has to do */
  --orange:        #F5820A;   /* fills only. buttons, bars, rules */
  --orange-strong: #DC6E0A;   /* display text on light, 24px and up */
  --orange-deep:   #AE4E00;   /* small text, labels and links on light */
  --orange-hot:    #FF9F2E;   /* hover on filled surfaces */
  --orange-lift:   #FFB259;   /* accent text on the dark bands */

  /* Surfaces */
  --page:    #FFFFFF;
  --cream:   #F7F5F1;
  --panel:   #FFFFFF;
  --border:  #E4E0D9;
  --border-strong: #D3CDC3;

  /* Warm ink ramp. Ratios against white, all clear 4.5:1 on the cream */
  --ink-900: #171310;
  --ink-800: #2B2521;
  --ink-700: #433B34;
  --ink-600: #5C534A;
  --ink-500: #6E655B;

  /* Dark contrast bands */
  --ink:        #080808;
  --ink-soft:   #141414;
  --on-ink:     #F4F1EC;
  --on-ink-soft:#C3BCB2;
  --on-ink-mute:#9C948A;

  /* Semantic, separate from the accent so state never fights brand */
  --good:  #1C6B45;
  --watch: #8A5A08;
  --bad:   #A32C14;
  --good-bg:  #E6F1EA;
  --watch-bg: #F8EFDC;
  --bad-bg:   #F8E7E2;

  --font-head: 'Bebas Neue','Bebas Neue Fallback',Arial,sans-serif;
  --font-sub:  'Barlow Condensed','Barlow Condensed Fallback',Arial,sans-serif;
  --font-body: 'Barlow','Barlow Fallback',Arial,sans-serif;

  /* One radius system for the whole set. Sharp. The clip-path notch on
     buttons is the house shape, so rounded corners elsewhere fight it. */
  --r: 0px;
  --wrap: 1120px;
  --narrow: 780px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #100E0C; --cream: #17140F; --panel: #1B1713;
    --border: #2C2721; --border-strong: #423A31;
    --ink-900:#F4F1EC; --ink-800:#E0DAD1; --ink-700:#C3BCB2;
    --ink-600:#A79E93; --ink-500:#93897E;
    --ink:#060504; --ink-soft:#12100E;
    --good:#6FD0A4; --watch:#E2BB5C; --bad:#F08A6B;
    --good-bg:#12271D; --watch-bg:#2A2112; --bad-bg:#2C170F;
    --orange-strong:#FFA53D; --orange-deep:#FFB259;
  }
}
[data-theme="dark"] {
  --page:#100E0C; --cream:#17140F; --panel:#1B1713;
  --border:#2C2721; --border-strong:#423A31;
  --ink-900:#F4F1EC; --ink-800:#E0DAD1; --ink-700:#C3BCB2;
  --ink-600:#A79E93; --ink-500:#93897E;
  --ink:#060504; --ink-soft:#12100E;
  --good:#6FD0A4; --watch:#E2BB5C; --bad:#F08A6B;
  --good-bg:#12271D; --watch-bg:#2A2112; --bad-bg:#2C170F;
  --orange-strong:#FFA53D; --orange-deep:#FFB259;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
figure,blockquote,dl,dd { margin:0 }
[hidden] { display:none !important }
img { max-width:100%; height:auto; display:block }
html { -webkit-text-size-adjust:100% }
body {
  background: var(--page);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.14rem;
  line-height: 1.62;
  letter-spacing: .002em;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
p { text-wrap: pretty; max-width: 66ch }
h1,h2,h3,h4 { text-wrap: balance; color: var(--ink-900) }
strong,b { font-weight:600 }
a { color: var(--orange-deep) }
:focus-visible { outline:2px solid var(--orange); outline-offset:3px }
.skip { position:absolute; left:-9999px }
.skip:focus {
  left:12px; top:12px; position:fixed; background:var(--panel); color:var(--ink-900);
  padding:10px 16px; border:1px solid var(--border-strong); z-index:300
}
@media (prefers-reduced-motion: reduce) { *{animation:none !important;transition:none !important} }
[class*="num"],[class*="stat"],.tnum { font-variant-numeric: tabular-nums }

/* ── Layout ────────────────────────────────────────────────────── */
.wrap { max-width:var(--wrap); margin:0 auto; padding-inline:24px }
.wrap-narrow { max-width:var(--narrow); margin:0 auto; padding-inline:24px }
.band { padding-block: clamp(48px,7vw,86px) }
.band--cream { background: var(--cream) }
.band--ink { background: var(--ink); color: var(--on-ink-soft) }
.band--ink h1,.band--ink h2,.band--ink h3,.band--ink h4 { color: var(--on-ink) }
.band--ink a { color: var(--orange-lift) }
.band + .band--cream, .band--cream + .band { border-top:1px solid var(--border) }

/* ── Type ──────────────────────────────────────────────────────── */
.display {
  font-family: var(--font-head); font-weight:400;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: .92; letter-spacing: .004em; color: var(--ink-900);
  text-transform: uppercase;
}
.band--ink .display { color: var(--on-ink) }
h2.sec {
  font-family: var(--font-head); font-weight:400; text-transform:uppercase;
  font-size: clamp(2.1rem,3.7vw,3.3rem); line-height:.98; letter-spacing:.006em;
  margin-bottom: 14px;
}
h3.sub {
  font-family: var(--font-sub); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:1.18rem; line-height:1.25; margin-bottom:6px;
  color: var(--ink-900);
}
.band--ink h3.sub { color: var(--on-ink) }
.lede { font-size: clamp(1.18rem,1.9vw,1.44rem); line-height:1.55; color:var(--ink-800); max-width:56ch }
.band--ink .lede { color: var(--on-ink-soft) }
.lede b { color: var(--ink-900) }
.band--ink .lede b { color: var(--on-ink) }
.muted { color: var(--ink-600) }
.band--ink .muted { color: var(--on-ink-mute) }

/* Eyebrow. Rationed on purpose. One per page, on the hero, and that is it.
   A small caps label above every single heading is the templated rhythm
   that makes a page read as generated. */
.eyebrow {
  font-family: var(--font-sub); font-weight:700; font-size:.9rem;
  letter-spacing:.16em; text-transform:uppercase; color: var(--orange-deep);
  margin-bottom: 18px;
}
.band--ink .eyebrow { color: var(--orange-lift) }

/* ── Top bar ───────────────────────────────────────────────────── */
.topbar { border-bottom:1px solid var(--border); background:var(--page) }
.topbar .wrap {
  min-height:60px; display:flex; align-items:center; justify-content:space-between;
  gap:12px 20px; flex-wrap:wrap; padding-block:10px;
}
.mark {
  font-family:var(--font-head); font-size:1.46rem; letter-spacing:.11em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-900); flex-shrink:0;
}
.mark span { color: var(--orange-strong) }
.flag {
  font-family:var(--font-sub); font-weight:700; font-size:.82rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-600); border:1px solid var(--border-strong);
  padding:5px 11px; flex-shrink:0;
}

/* ── The house button. Notched, never rounded. ─────────────────── */
.btn {
  display:inline-block; font-family:var(--font-sub); font-weight:700;
  font-size:1.04rem; letter-spacing:.09em; text-transform:uppercase;
  padding:15px 32px; text-decoration:none; border:0; cursor:pointer;
  background:var(--orange); color:#15100A;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  transition: background .2s, transform .12s;
}
.btn:hover { background:var(--orange-hot) }
.btn:active { transform: translateY(1px) }
.btn--ghost {
  background:transparent; color:var(--ink-900); border:1.5px solid var(--border-strong);
  clip-path:none;
}
.btn--ghost:hover { background:var(--cream); border-color:var(--ink-500) }

/* ── Rules and figures ─────────────────────────────────────────── */
.rule { height:3px; width:56px; background:var(--orange); margin-bottom:22px }
.fig { margin:0 }
.fig img { width:100%; height:auto }
.fig figcaption {
  font-family:var(--font-sub); font-size:.97rem; letter-spacing:.03em;
  color:var(--ink-600); margin-top:10px; text-transform:none;
}
.band--ink .fig figcaption { color: var(--on-ink-mute) }

/* ── The dark band rebinds the ink ramp ───────────────────────────
   Every site sheet writes rules like `.meal h2 { color:var(--ink-900) }`.
   Inside a .band--ink that painted #171310 on #080808, a contrast ratio
   of about 1.06:1, which is simply invisible. Chasing it selector by
   selector never holds, because the next component added to a site
   reintroduces it.

   So the band rebinds the tokens themselves. Any descendant asking for
   --ink-900 inside a dark band now gets the light end of the ramp, and
   a component written later inherits the fix for free. See
   dark-mode-literal-and-descendant-link-traps in memory. */
.band--ink {
  --ink-900: var(--on-ink);
  --ink-800: var(--on-ink-soft);
  --ink-700: var(--on-ink-soft);
  --ink-600: var(--on-ink-mute);
  --ink-500: var(--on-ink-mute);
  --border:        rgba(255,255,255,.16);
  --border-strong: rgba(255,255,255,.26);
  --panel: rgba(255,255,255,.05);
  --cream: rgba(255,255,255,.05);
  --page:  rgba(255,255,255,.04);
  --orange-strong: var(--orange-lift);
  --orange-deep:   var(--orange-lift);
  --good:#6FD0A4; --watch:#E2BB5C; --bad:#F08A6B;
  --good-bg:rgba(111,208,164,.12); --watch-bg:rgba(226,187,92,.12); --bad-bg:rgba(240,138,107,.12);
}

/* ── Count band. The stat strip under a hero. ─────────────────────
   This was a full bleed grid with no .wrap, so on a wide screen the
   first number sat hard against the edge of the browser while every
   other section stopped at 1120px. It is house furniture now rather
   than something each new site reinvents and misaligns. */
.counts {
  max-width:var(--wrap); margin-inline:auto; padding-inline:24px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-block:1px solid var(--border);
}
.count { padding:32px 26px }
.count:first-child { padding-inline-start:0 }
.count:last-child  { padding-inline-end:0 }
.count + .count { border-inline-start:1px solid var(--border) }
.count__n {
  font-family:var(--font-head); font-size:clamp(2.9rem,4.6vw,3.8rem);
  line-height:.9; color:var(--ink-900); letter-spacing:.01em;
}
.count__n.is-bad { color:var(--bad) }
.count__l {
  font-size:1.04rem; color:var(--ink-600); margin-top:11px;
  line-height:1.45; max-width:30ch;
}
@media (max-width:760px){
  .counts { grid-template-columns:1fr 1fr }
  .count { padding:26px 20px }
  .count:nth-child(odd)  { padding-inline-start:0; border-inline-start:0 }
  .count:nth-child(even) { padding-inline-end:0 }
  .count:nth-child(n+3)  { border-top:1px solid var(--border) }
}
@media (max-width:430px){
  .counts { grid-template-columns:1fr }
  .count { padding:24px 0 }
  .count + .count { border-inline-start:0; border-top:1px solid var(--border) }
}

/* ── Data table, used sparingly ────────────────────────────────── */
.scroll { overflow-x:auto; border:1px solid var(--border); background:var(--panel) }
table { border-collapse:collapse; width:100%; min-width:560px; font-size:1.04rem }
caption {
  text-align:left; padding:14px 18px; color:var(--ink-600); font-size:.9rem;
  border-bottom:1px solid var(--border);
}
th,td { text-align:left; padding:12px 18px; border-bottom:1px solid var(--border); vertical-align:top }
th {
  font-family:var(--font-sub); font-weight:700; font-size:.8rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-500); white-space:nowrap;
}
td.n { font-variant-numeric:tabular-nums; white-space:nowrap }
tbody tr:last-child td { border-bottom:0 }

/* ── State chips ───────────────────────────────────────────────── */
.chip {
  display:inline-block; font-family:var(--font-sub); font-weight:700; font-size:.76rem;
  letter-spacing:.1em; text-transform:uppercase; padding:6px 11px; white-space:nowrap;
}
.chip--good  { background:var(--good-bg);  color:var(--good) }
.chip--watch { background:var(--watch-bg); color:var(--watch) }
.chip--bad   { background:var(--bad-bg);   color:var(--bad) }
.chip--flat  { background:var(--cream); color:var(--ink-600); border:1px solid var(--border) }

/* ── Footer ────────────────────────────────────────────────────── */
.foot { background:var(--ink); color:var(--on-ink-mute); padding-block:40px; font-size:.95rem }
.foot p { max-width:74ch; margin-bottom:11px }
.foot p:last-child { margin-bottom:0 }
.foot b { color:var(--on-ink-soft) }
.foot a { color:var(--on-ink-mute); text-underline-offset:3px }
code {
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;
  background:rgba(255,255,255,.07); padding:1px 5px;
}
.band code, .wrap code { background:var(--cream); border:1px solid var(--border) }

/* ── Motion. One move, on load, and nothing perpetual. ─────────── */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .62s cubic-bezier(.16,1,.3,1) both }
  .rise-2 { animation-delay:.08s }
  .rise-3 { animation-delay:.16s }
}
@keyframes rise { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }

/* cf-a11y:start */
/* ============================================================
   Clickflame accessibility layer
   Managed block. Edit _shared/a11y/a11y.css and re-run
   _shared/a11y/apply_a11y.py. Do not hand edit the copies.

   Design rule: nothing in here is visible to a mouse user who
   has not asked for it. No overlay, no toolbar, no JavaScript.
   ============================================================ */

/* --- Skip link: off screen until a keyboard user focuses it --- */
.cf-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2147483000;
  display: inline-block;
  padding: .75rem 1.15rem;
  background: #10131a;
  color: #fff;
  font: 600 1rem/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: underline;
  border-radius: 0 0 .4rem 0;
}
.cf-skip:focus {
  left: 0;
}

/* --- Text for screen readers only --- */
.cf-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Focus ring.
   :focus-visible means mouse and touch users never see this.
   Set --cf-focus in your own stylesheet to match the brand.
   The default #1a73e8 clears 3:1 against both white and black. --- */
:focus-visible {
  outline: 3px solid var(--cf-focus, #1a73e8) !important;
  outline-offset: 2px !important;
}
@supports not selector(:focus-visible) {
  :focus {
    outline: 3px solid var(--cf-focus, #1a73e8) !important;
    outline-offset: 2px !important;
  }
}

/* A programmatic focus target should not draw a ring. */
[tabindex="-1"]:focus {
  outline: none !important;
}

/* Focus must not be swallowed by a sticky header. */
:target,
[tabindex="-1"] {
  scroll-margin-top: 6rem;
}

/* --- Respect a stated preference for less motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Windows High Contrast / forced colours --- */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight !important;
  }
  .cf-skip {
    background: Canvas;
    color: CanvasText;
    border: 2px solid CanvasText;
  }
}

/* --- Stronger ring for people who asked for more contrast --- */
@media (prefers-contrast: more) {
  :focus-visible {
    outline-width: 4px !important;
  }
}
/* cf-a11y:end */