/*
 * Brand book: tokens and components for every visual of ours (page, artefact,
 * mockup, deck, PDF, one-pager). Rules and sources: brand-book.md next to it.
 *   <link rel="stylesheet" href="brand-book.css">   (copy assets/ next to it)
 *   <body class="bb">        Agent CS (Mario's Brand Book 13.10)
 *   <body class="bb cs">     Casting Studio (www)
 *   + light       light client document (read and printed)
 *   + enterprise  no serif italic, no coloured words (Mariusz Połeć 16.10)
 *   + print       A4 landscape PDF, pages are <section class="sheet">
 * Fonts in assets/fonts, all SIL OFL: Inter, Instrument Serif italic,
 * Geist Mono (Agent CS); Be Vietnam Pro (Casting Studio, same files as www).
 */

@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url(assets/fonts/Inter-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url(assets/fonts/Inter-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/InstrumentSerif-400i-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/InstrumentSerif-400i-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-weight:500;font-display:swap;src:url(assets/fonts/GeistMono-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-weight:500;font-display:swap;src:url(assets/fonts/GeistMono-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-display:swap;src:url(assets/fonts/BeVietnamPro-Regular.woff2) format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-weight:500;font-display:swap;src:url(assets/fonts/BeVietnamPro-Medium.woff2) format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-weight:600;font-display:swap;src:url(assets/fonts/BeVietnamPro-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-weight:700;font-display:swap;src:url(assets/fonts/BeVietnamPro-Bold.woff2) format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-weight:800;font-display:swap;src:url(assets/fonts/BeVietnamPro-ExtraBold.woff2) format("woff2")}

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root{
  /* Agent CS, Brand Book 13.10 (Mario) */
  --ag-ink:#031312;          /* ground, never #000 */
  --ag-ink-2:#062120;        /* card */
  --ag-ink-line:#17403a;     /* card edge */
  --ag-mint:#02DFA3;         /* accent: one word, a number, the one button */
  --ag-bot:#00845F;          /* bot avatar, character mask lines */
  --ag-white:#FFFFFF;        /* mark, text */
  --ag-grey:#9A9A9A;         /* second text */
  --ag-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ag-serif:"Instrument Serif",Georgia,"Times New Roman",serif; /* italic, one word */
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;   /* labels, numbers, data */

  /* Casting Studio, apps/www/src/styles/global.css (@theme) */
  --cs-night:#04231d; --cs-night-soft:#073229; --cs-card:#0a3a30;
  --cs-primary:#00b497;      /* ONLY in the sygnet (Gregory Barański 07.10) */
  --cs-mint:#02dfa3;         /* primary button, active, link */
  --cs-on-mint:#04231d;      /* bold label on the mint button (Gregory Barański 12.10) */
  --cs-green-on-light:#007461;
  --cs-amber:#f5a623;        /* MEANS deadline / to do, never decoration */
  --cs-sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* Light client document */
  --paper:#fafaf8; --paper-2:#f4f3f0; --paper-ink:#0a0e17;

  /* Type scale (screen) */
  --fs-display:clamp(40px,9vw,96px); --fs-h1:clamp(32px,6.4vw,64px);
  --fs-h2:clamp(24px,4.2vw,40px); --fs-h3:clamp(17px,2.6vw,22px);
  --fs-body:16px; --fs-small:13px; --fs-label:12px;
  /* One spacing scale, radii: inside max 12, shell 18 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r1:6px; --r2:8px; --r3:12px; --r-shell:18px; --r-pill:999px;
  /* Glass: shells only (bar, modal, menu, panel over a photo) */
  --glass-blur:blur(14px) saturate(130%);
  --glass-ring:inset 0 0 0 1px rgba(255,255,255,.15);
  --glass-shadow:0 18px 40px rgba(0,0,0,.35);
  /* Motion: transform and opacity only */
  --ease:cubic-bezier(.16,1,.3,1); --dur:.6s;
}

/* Each theme sets the same variables; components read only these */
.bb{--bg:var(--ag-ink);--bg-2:var(--ag-ink-2);--edge:var(--ag-ink-line);--acc:var(--ag-mint);--on-acc:var(--ag-ink);
  --text:var(--ag-white);--muted:#b9c7c4;--dim:var(--ag-grey);--label:#6f8f89;--line:rgba(255,255,255,.085);
  --sans:var(--ag-sans);--serif:var(--ag-serif);--glass-tint:rgba(3,19,18,.62);--head-w:600}
.bb.cs{--bg:var(--cs-night);--bg-2:var(--cs-night-soft);--edge:var(--cs-card);--acc:var(--cs-mint);--on-acc:var(--cs-on-mint);
  --text:#e9f4f1;--muted:#9bb2ad;--dim:#7e948f;--label:#9bb2ad;--sans:var(--cs-sans);--serif:Georgia,"DejaVu Serif",serif;
  --glass-tint:rgba(4,35,29,.62);--head-w:800}
.bb.light{--bg:var(--paper);--bg-2:var(--paper-2);--edge:rgba(10,14,23,.12);--text:var(--paper-ink);--muted:#4b5563;--dim:#6b7280;
  --label:#6b7280;--line:rgba(10,14,23,.12);--glass-tint:rgba(255,255,255,.78)}
/* Mint is never text on a light ground (1.7:1): accent text goes green */
.bb.light{--acc-text:var(--ag-bot)} .bb.cs.light{--acc-text:var(--cs-green-on-light)}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
.bb{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:var(--fs-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.bb *{box-sizing:border-box}
.bb h1,.bb h2,.bb h3,.bb p{margin:0}
.bb .display{font-size:var(--fs-display);line-height:.95;letter-spacing:-.04em;font-weight:var(--head-w)}
.bb h1,.bb .h1{font-size:var(--fs-h1);line-height:.98;letter-spacing:-.04em;font-weight:var(--head-w)}
.bb h2,.bb .h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.03em;font-weight:var(--head-w)}
.bb h3,.bb .h3{font-size:var(--fs-h3);line-height:1.25;font-weight:600}
.bb p,.bb .muted{color:var(--muted)} .bb .dim{color:var(--dim)} .bb .small{font-size:var(--fs-small)}
/* One word of a heading: serif italic in the accent */
.bb .em,.bb h1 em,.bb h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--acc-text,var(--acc));letter-spacing:-.01em}
.bb.enterprise .em,.bb.enterprise h1 em,.bb.enterprise h2 em{font-family:inherit;font-style:normal;font-weight:inherit;color:inherit}
.bb .acc{color:var(--acc-text,var(--acc))}
.bb .label{font:500 var(--fs-label)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.bb.cs .label{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.16em}
.bb .num{font-family:var(--mono);font-weight:500;letter-spacing:-.02em;line-height:1}
.bb.cs .num{font-family:var(--sans);font-weight:800;letter-spacing:-.03em}
.bb .rule{height:1px;background:var(--line);border:0}

/* ── 3. Logo: the mark alone. No frame, tile, circle, shadow, glow, fill ── */
.bb .logo{display:inline-flex;align-items:center;gap:.28em;color:var(--text);font-weight:600;font-size:15px;letter-spacing:-.035em;
  border:0;outline:0;box-shadow:none;background:none;border-radius:0;padding:0;text-decoration:none}
.bb .logo svg,.bb .logo img{height:1.05em;width:auto;display:block;color:var(--text)} /* white on dark, black on light, never mint */
.bb.cs .logo svg{height:1.35em;color:var(--cs-primary)} /* sygnet in its colour */

/* ── 4. Buttons, chips: ONE filled primary per screen, the rest glass ── */
.bb .btn{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s5);border-radius:var(--r-pill);border:0;
  background:var(--acc);color:var(--on-acc);font:700 15px/1 var(--sans);text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease),opacity .2s var(--ease)}
.bb .btn:hover{transform:translateY(-1px)}
.bb .btn.ghost{background:var(--glass-tint);color:var(--text);box-shadow:var(--glass-ring);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.bb .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font:500 11px/1.4 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.08);color:var(--text)}
.bb.light .chip{background:rgba(10,14,23,.06)}
.bb .chip.on{background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc-text,var(--acc))}
.bb .dot{display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--acc);margin-right:.4em;vertical-align:.08em}

/* ── 5. Surfaces: flat card inside, glass on the shell ──────────────── */
.bb .card{background:var(--bg-2);border:1px solid var(--edge);border-radius:var(--r3);padding:var(--s5)}
.bb .glass{background:var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-ring),var(--glass-shadow);border-radius:var(--r-shell);padding:var(--s5)}
.bb dialog.glass::backdrop{background:rgba(0,0,0,.45);backdrop-filter:var(--glass-blur)}
/* Header bar with the logo: always fixed, glass once content runs under it */
.bb .bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) var(--s4);background:var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 -1px 0 var(--line)}
.bb .bar.top{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ── 6. Photo first: fades into the ground on one side, no outline at rest ── */
.bb .photo{position:relative;overflow:hidden;background:var(--bg-2)}
.bb .photo>img,.bb .photo>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bb .photo::after{content:"";position:absolute;inset:0;pointer-events:none}
.bb .photo>.over{position:absolute;inset:auto 0 0 0;z-index:1;padding:var(--s5)}
.bb .fade-b::after{background:linear-gradient(180deg,transparent 35%,color-mix(in srgb,var(--bg) 70%,transparent) 70%,var(--bg) 100%)}
.bb .fade-t::after{background:linear-gradient(0deg,transparent 40%,var(--bg) 100%)}
.bb .fade-l::after{background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 75%,transparent) 30%,transparent 65%)}
.bb .fade-r::after{background:linear-gradient(270deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 75%,transparent) 30%,transparent 65%)}
@supports not (background:color-mix(in srgb,red,blue)){
  .bb .fade-b::after{background:linear-gradient(180deg,transparent 35%,var(--bg) 100%)}
  .bb .fade-l::after{background:linear-gradient(90deg,var(--bg) 0%,transparent 65%)}
  .bb .fade-r::after{background:linear-gradient(270deg,var(--bg) 0%,transparent 65%)}
}
@media (hover:hover) and (pointer:fine){
  .bb .photo.hoverable{transition:box-shadow .3s var(--ease)}
  .bb .photo.hoverable:hover{box-shadow:inset 0 0 0 1px var(--acc)}
}
.bb .photo.past>img{filter:brightness(.6) saturate(.7)}
/* Faces as a mosaic of many small cards, never one portrait per section; faces ~60 % (Brand Book 13.10) */
.bb .mosaic{display:grid;grid-template-columns:repeat(var(--cols,8),1fr);gap:var(--s1)}
.bb .mosaic>*{position:relative;aspect-ratio:var(--ar,3/4);overflow:hidden;border-radius:var(--r1);background:var(--bg-2)}
.bb .mosaic img{width:100%;height:100%;object-fit:cover;display:block;opacity:var(--face-opacity,.6)}
.bb.cs .mosaic img{opacity:1}
/* Video you do not have yet: same size and place as the real one, Mario swaps it */
.bb .video-ph{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s2);padding:var(--s4);
  overflow:hidden;border-radius:var(--r3);color:var(--text);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 10px,transparent 10px 20px),var(--bg-2);
  outline:1.5px dashed color-mix(in srgb,var(--acc) 55%,transparent);outline-offset:-1.5px}
.bb .video-ph::before{content:"";position:absolute;left:50%;top:44%;width:56px;height:56px;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='white'/%3E%3C/svg%3E") 55% 50%/26px no-repeat}
.bb .video-ph .tag{font:500 var(--fs-label)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.bb .video-ph .what{font-size:var(--fs-small);line-height:1.35;max-width:42ch}

/* ── 7. Numbers, pictograms, tables ────────────────────────────────────── */
.bb .kpis{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:var(--s5)}
.bb .kpi .num{font-size:clamp(34px,6vw,64px);color:var(--text)}
.bb .kpi .num .u{color:var(--acc-text,var(--acc))}
.bb .kpi .label{margin-top:var(--s2)}
.bb .ico{width:22px;height:22px;stroke:var(--acc);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bb table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.bb th,.bb td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.bb th{font:500 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.bb td.r,.bb th.r{text-align:right}

/* ── 8. Print: A4 landscape, read on a 390 px phone (Mariusz Połeć 03.10) ──────── */
@page{size:A4 landscape;margin:0}
.bb.print{width:297mm;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:16pt;font-weight:700}
.bb .sheet{position:relative;width:297mm;height:210mm;overflow:hidden;break-after:page;background:var(--bg)}
.bb .sheet:last-child{break-after:auto}
.bb .sheet .safe{position:absolute;inset:12mm 14mm;display:flex;flex-direction:column;z-index:2}
.bb .sheet .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;font-size:11pt;color:var(--dim)}
.bb.print .display{font-size:104pt;line-height:.95} .bb.print h1{font-size:76pt} .bb.print h2{font-size:54pt} .bb.print h3{font-size:24pt}
.bb.print .kpi .num{font-size:72pt} .bb.print .label,.bb.print .chip,.bb.print .small{font-size:13pt}
.bb.print h1,.bb.print h2,.bb.print h3,.bb.print .display,.bb.print .kpi,.bb.print p,.bb.print li{text-shadow:0 2px 18px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.6)}
.bb.light.print *{text-shadow:none}
@media print{.bb .glass,.bb .bar{background:color-mix(in srgb,var(--bg) 82%,transparent)}}

/* ── 9. Mobile first, reduced motion ───────────────────────────────────── */
@media (max-width:640px){.bb .kpis{--cols:2}.bb .mosaic{--cols:4}}
@media (prefers-reduced-motion:reduce){.bb *,.bb *::before,.bb *::after{animation:none!important;transition:none!important}}