/* brand.guesteria.com - one shell for the three artifact pages.
   Every value below is a token of the Guesteria design system, taken from
   artifacts/design-md/output/index.html's :root. Nothing here is a new brand fact. */
:root{
  --brand-50:#F2F0FF; --brand-200:#C7BCFF; --brand-600:#826AFF; --brand-700:#532DF5; --brand-800:#2D2F44;
  --text-primary:#0A0A0B; --text-secondary:#52525B; --text-tertiary:#71717A; --text-inverse:#FAFAFA;
  --surface-canvas:#FFFFFF; --surface-raised:#FAFAFA; --surface-sunken:#F4F4F5;
  --line-default:#E4E4E7; --line-strong:#D4D4D8;
  --shadow-md:0 4px 12px rgba(10,10,11,.08); --shadow-xl:0 24px 64px rgba(10,10,11,.18);
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px; --radius-photo:32px;
  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --font-display:"Codec Pro","Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  --motion-ui:cubic-bezier(.2,.8,.2,1);
  /* the shell */
  --canvas:var(--surface-sunken); --panel:var(--surface-canvas); --ink:var(--text-primary);
  --ink-2:var(--text-secondary); --ink-3:var(--text-tertiary); --rule:var(--line-default);
  --mat:#E8E8EC;                 /* the brandbook deck's own ground, matched so the player has no seam */
  --gutter:20px; --header-h:60px;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --canvas:#0A0A0B; --panel:#141417; --ink:#FAFAFA; --ink-2:#C4C4CC; --ink-3:#8E8E98;
  --rule:#26262B; --line-default:#26262B; --line-strong:#3A3A42;
  --shadow-xl:0 24px 64px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --canvas:#0A0A0B; --panel:#141417; --ink:#FAFAFA; --ink-2:#C4C4CC; --ink-3:#8E8E98;
  --rule:#26262B; --line-default:#26262B; --line-strong:#3A3A42;
  --shadow-xl:0 24px 64px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scrollbar-gutter:stable}
body{margin:0; background:var(--canvas); color:var(--ink);
  font:400 16px/1.55 var(--font-body); overflow-x:hidden}
a{color:var(--brand-700)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) a{color:var(--brand-200)} }
:root[data-theme="dark"] a{color:var(--brand-200)}
:focus-visible{outline:3px solid var(--brand-600); outline-offset:2px}
img,svg{max-width:100%}

/* ---- header: Brandbook | Design.md | Photo kit ---- */
.hdr{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--panel) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule)}
.hdr-in{max-width:1680px; margin:0 auto; min-height:var(--header-h); padding:0 var(--gutter);
  display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap}
.hdr-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; flex:0 0 auto}
.hdr-brand img{height:22px; width:auto; display:block}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hdr-brand img{filter:invert(1) hue-rotate(180deg)} }
:root[data-theme="dark"] .hdr-brand img{filter:invert(1) hue-rotate(180deg)}
.nav{display:flex; align-items:center; gap:2px; margin-inline-end:auto; flex-wrap:wrap}
.nav a{display:block; padding:7px 14px; border-radius:var(--radius-pill); text-decoration:none;
  color:var(--ink-2); font-weight:600; font-size:14px; letter-spacing:.01em;
  transition:background .18s var(--motion-ui), color .18s var(--motion-ui); white-space:nowrap}
.nav a:hover{background:var(--brand-50); color:var(--brand-700)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .nav a:hover{background:#1E1B33; color:var(--brand-200)} }
:root[data-theme="dark"] .nav a:hover{background:#1E1B33; color:var(--brand-200)}
.nav a[aria-current="page"]{background:var(--brand-700); color:#fff}
.hdr-side{display:flex; align-items:center; gap:var(--space-3); flex:0 0 auto}
.lang{display:flex; align-items:center; gap:0; border:1px solid var(--line-strong);
  border-radius:var(--radius-pill); overflow:hidden}
.lang button{appearance:none; border:0; background:transparent; color:var(--ink-3); cursor:pointer;
  font:700 11px/1 var(--font-body); letter-spacing:.14em; padding:8px 11px}
.lang button[aria-pressed="true"]{background:var(--ink); color:var(--canvas)}
.pill{display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  border:1px solid var(--line-strong); border-radius:var(--radius-pill); padding:7px 14px;
  font:600 13px/1.2 var(--font-body); color:var(--ink-2); background:var(--panel); white-space:nowrap;
  cursor:pointer; transition:border-color .18s var(--motion-ui), color .18s var(--motion-ui)}
.pill:hover{border-color:var(--brand-600); color:var(--brand-700)}
.pill-solid{background:var(--brand-700); border-color:var(--brand-700); color:#fff}
.pill-solid:hover{background:var(--brand-600); border-color:var(--brand-600); color:#fff}

/* ---- page shell ---- */
.page{max-width:1680px; margin:0 auto; padding:var(--space-6) var(--gutter) var(--space-8)}
.page-wide{max-width:1880px}
.eyebrow{margin:0 0 6px; font:700 11px/1.4 var(--font-body); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3)}
h1{margin:0 0 var(--space-3); font:600 clamp(26px,3.4vw,40px)/1.12 var(--font-display); letter-spacing:-.015em}
h2{margin:0 0 var(--space-4); font:600 clamp(20px,2.2vw,26px)/1.2 var(--font-display); letter-spacing:-.01em}
h3{margin:0 0 var(--space-2); font:600 16px/1.3 var(--font-display)}
.lede{margin:0 0 var(--space-6); max-width:76ch; color:var(--ink-2); font-size:17px}
.meta{margin:0; color:var(--ink-3); font:500 13px/1.5 var(--font-body)}
hr.rule{border:0; border-top:1px solid var(--rule); margin:var(--space-7) 0}

/* ---- the 16:9 player ------------------------------------------------------
   The brandbook is a fixed 1920x1080 artboard scaled whole by its own
   --u: min((100vw - 48px)/1920, (100vh - 116px)/1080). It reserves 24px of
   ground each side and 116px under the sheet (31 + 14 gap + 40 overlay + 31).
   So the player's PADDING carries exactly that reserve and .stagebox carries
   aspect-ratio 16/9. The iframe covers the whole padding box; inside it the
   sheet lands exactly on .stagebox, at 16:9, with no pixel wasted.
   The width cap is the dashboard's technique, verbatim in form:
   min(100%, budget * ratio) -- the width yields, aspect-ratio derives the
   height. A max-height cannot do it: it clamps height while width stays 100%,
   which is the shape breaking on a short window.
   (engine/scripts/lib/dashboard_common.py frame_aspect_attrs, brandbook
   type.yaml preview.frame_aspect "16 / 9") */
.player{
  --pv-arf:1.777778;               /* 16 / 9 */
  --pv-reserve-x:48px;             /* the deck's 24px of ground, both sides */
  --pv-reserve-t:31px;             /* ground above the sheet */
  --pv-reserve-b:85px;             /* 14px gap + 40px overlay row + 31px ground */
  --pv-budget:calc(100vh - var(--header-h) - 178px);
  position:relative; margin:0 auto; background:var(--mat);
  border-radius:var(--radius-lg); box-shadow:0 0 0 1px var(--line-strong), var(--shadow-xl);
  padding:var(--pv-reserve-t) 24px var(--pv-reserve-b);
  width:min(100%, calc((var(--pv-budget) - var(--pv-reserve-t) - var(--pv-reserve-b)) * var(--pv-arf) + var(--pv-reserve-x)));
  min-width:min(100%, 320px);
}
.player .stagebox{aspect-ratio:16 / 9; width:100%}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  border-radius:var(--radius-lg)}
.player.is-fs{position:fixed; inset:0; z-index:100; margin:0; border-radius:0; padding:var(--pv-reserve-t) 24px var(--pv-reserve-b);
  --pv-budget:100vh; box-shadow:none}
.player.is-fs iframe{border-radius:0}
.player-bar{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  flex-wrap:wrap; margin:0 0 var(--space-4)}
.player-acts{display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap}
body.pv-open{overflow:hidden}

/* ---- cards, grids, download rows ---- */
.cards{display:grid; gap:var(--gutter); grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius-lg);
  padding:var(--space-5)}
.card p{margin:0 0 var(--space-3); color:var(--ink-2); font-size:14px}
.card p:last-child{margin:0}
.dl{display:grid; gap:10px; margin:0; padding:0; list-style:none}
.dl li{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius-md);
  padding:12px var(--space-4)}
.dl .n{font:600 14px/1.35 var(--font-body)}
.dl .s{font:500 12px/1.4 var(--font-mono); color:var(--ink-3)}
.swatches{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(min(138px,100%),1fr)); margin:0; padding:0; list-style:none}
.swatches li{border:1px solid var(--rule); border-radius:var(--radius-md); overflow:hidden; background:var(--panel)}
.swatches{align-items:start}
.swatches .chip{height:56px; display:block}
.swatches .t{padding:8px 10px; font:600 11px/1.35 var(--font-mono); color:var(--ink-2); overflow-wrap:anywhere}
.tiles{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(158px,100%),1fr));
  margin:0; padding:0; list-style:none}
.tiles li{border:1px solid var(--rule); border-radius:var(--radius-md); background:var(--panel);
  overflow:hidden; display:flex}
.tiles a{display:flex; flex-direction:column; width:100%; text-decoration:none; color:inherit}
.tiles .box{height:88px; display:grid; place-items:center; background:var(--surface-sunken); padding:12px}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tiles .box{background:#1B1B1F} }
:root[data-theme="dark"] .tiles .box{background:#1B1B1F}
.tiles .box img{max-height:64px; width:auto}
.tiles .t{padding:8px 10px; font:500 11px/1.35 var(--font-mono); color:var(--ink-3);
  overflow-wrap:anywhere; word-break:normal; flex:1 0 auto}
/* a light-ink asset is invisible on a light tile; give it the ground it was drawn for */
.tiles li[data-on="dark"] .box{background:var(--brand-800)}

/* ---- language: one page, both tongues ---- */
[data-lang="en"] [lang="ru"]{display:none}
[data-lang="ru"] [lang="en"]{display:none}

/* ---- the document frame: design.md's facets are scrolling documents, not a deck ---- */
.docframe{position:relative; background:var(--panel); border-radius:var(--radius-lg);
  box-shadow:0 0 0 1px var(--line-strong), var(--shadow-xl); overflow:hidden}
.docframe iframe{display:block; border:0; width:100%;
  height:clamp(520px, calc(100vh - var(--header-h) - 190px), 1100px)}
.docframe.is-fs{position:fixed; inset:0; z-index:100; border-radius:0; box-shadow:none}
.docframe.is-fs iframe{height:100vh}
.facets{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 var(--space-4); padding:0; list-style:none}
.facets button{appearance:none; cursor:pointer; background:var(--panel); color:var(--ink-2);
  border:1px solid var(--line-strong); border-radius:var(--radius-pill); padding:7px 15px;
  font:600 13px/1.2 var(--font-body); transition:all .18s var(--motion-ui)}
.facets button:hover{border-color:var(--brand-600); color:var(--brand-700)}
.facets button[aria-pressed="true"]{background:var(--brand-700); border-color:var(--brand-700); color:#fff}

/* ---- narrow: the header stays one band and stops eating the viewport ---- */
@media (max-width:640px){
  .hdr{position:static}
  .hdr-in{gap:var(--space-3); padding:8px var(--gutter); row-gap:8px}
  .hdr-brand img{height:18px}
  .nav a{padding:6px 11px; font-size:13px}
  .hdr-side{gap:8px}
  .lang button{padding:7px 9px; font-size:10px}
  .pill{padding:6px 11px; font-size:12px}
  :root{--gutter:16px}
  .page{padding-top:var(--space-5)}
}
@media (max-width:420px){
  .hdr-side .assets-link{display:none}   /* assets stay available on Design.md; keep the agent guide visible */
}
section[id]{scroll-margin-top:calc(var(--header-h) + 16px)}