/* ATAVUS Brand manuál 2026 · implementace brand/manifest.json a DESIGN_SYSTEM.md */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/cormorant-garamond-v21-latin_latin-ext-300.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('/assets/fonts/cormorant-garamond-v21-latin_latin-ext-300italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-garamond-v21-latin_latin-ext-regular.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-garamond-v21-latin_latin-ext-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/cormorant-garamond-v21-latin_latin-ext-500.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/eb-garamond-v32-latin_latin-ext-regular.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/eb-garamond-v32-latin_latin-ext-italic.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/eb-garamond-v32-latin_latin-ext-500.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/jetbrains-mono-v24-latin_latin-ext-300.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-v24-latin_latin-ext-regular.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-v24-latin_latin-ext-500.woff2') format('woff2')}

:root{
  --deeper:#0C1A15;
  --deepforest:#122620;
  --forest:#1F3A2F;
  --forest-tint:#2A4A3D;
  --cream:#F0E8D5;
  --cream2:#E2D7BD;
  --cream3:#DCCFB5;
  --brass:#A78237;
  --brass-bright:#C6A24B;
  --brass-dim:#7B5F28;
  /* brass-text, not brass: at label/body sizes (<24px) plain --brass measures only
     4.45:1 on --deepforest, under the 4.5:1 AA floor for small text. brass-text is
     the token every mosaz LABEL uses; brass stays for decorative strokes/lines. */
  --brass-text:#C6A24B;
  --stone:#B0A99F;
  --ink:#1E1A18;
  --danger:#8C3B2E;
  --foil:linear-gradient(115deg,#7A5C24 0%,#B88E38 18%,#E1C66E 35%,#FFF1BA 50%,#E4C96F 65%,#B98D37 84%,#7A5C24 100%);
  --line:color-mix(in srgb,var(--cream) 14%,transparent);
  --line-strong:color-mix(in srgb,var(--cream) 32%,transparent);
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'EB Garamond',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* ── Motion (DESIGN_SYSTEM.md §1) — same names and values as site/assets/a2.css ── */
  --motion-micro:140ms;
  --motion-standard:240ms;
  --motion-scene:480ms;
  --ease-out:cubic-bezier(.16,1,.3,1);   /* vstup, hover, reveal */
  --ease-press:cubic-bezier(.25,1,.5,1); /* fyzický stisk: gate CTA, copy tlačítka */

  /* ── Radius (marketing/dokument převážně 0, karty a panely 6-20 dle vnoření) ── */
  --radius-0:0;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;

  /* ── Elevace: 0 bez stínu · 1 vlasová linka · 2 tónovaný stín (jen toast/dialog) ── */
  --elevation-0:none;
  --elevation-1:0 1px 0 0 var(--line);
  --elevation-2:0 24px 56px -24px color-mix(in srgb,var(--deeper) 78%,transparent);

  /* ── Typografie: velikostně specifické prostrkání a proklad (DESIGN_SYSTEM.md §1) ── */
  --tracking-display-xl:-.028em;  /* ≥96px */
  --leading-display-xl:1.10;
  --tracking-display-lg:-.020em;  /* 48-95px */
  --leading-display-lg:1.16;
  --tracking-display-md:-.012em;  /* 28-47px */
  --leading-display-md:1.22;
  --tracking-mono-label:.16em;    /* mono label, škála .14-.20em */
}
[data-theme="light"]{
  --deeper:#F0E8D5;
  --deepforest:#E8DFC8;
  --forest:#DCCFB5;
  --forest-tint:#C7B99A;
  --cream:#1F3A2F;
  --cream2:#3A5040;
  --cream3:#4A6252;
  --brass:#7B5F28;
  --brass-text:#5E4A1F;
  --stone:#5E564C;
  --foil:linear-gradient(115deg,#4A3A18 0%,#6E5526 20%,#9A7B30 42%,#B8923C 50%,#9A7B30 58%,#6E5526 80%,#4A3A18 100%);
  --line:color-mix(in srgb,var(--cream) 14%,transparent);
  --line-strong:color-mix(in srgb,var(--cream) 32%,transparent);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--deeper)}
body{background:var(--deeper);color:var(--cream);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;overflow-x:clip}
img,svg{display:block;max-width:100%}
::selection{background:rgba(246,230,176,.18);color:#F0E8D5}
a{color:inherit}
.mono{font-family:var(--mono);font-size:11px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase}

.foil-text{display:inline-block;background:var(--foil);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- layout ---------- */
section{position:relative;overflow:clip;padding:150px 0}
.wrap{width:min(100%,1240px);margin:0 auto;padding:0 56px;position:relative;z-index:1}
.alt{background:var(--deepforest)}

.secnum{display:flex;align-items:center;gap:14px;color:var(--brass-text);font-family:var(--mono);font-size:11px;letter-spacing:var(--tracking-mono-label);text-transform:uppercase;margin-bottom:30px}
.secnum::before{content:"";width:32px;height:1px;background:var(--brass-bright)}
h2.sec{font-family:var(--display);font-weight:300;font-size:clamp(40px,4.8vw,62px);line-height:var(--leading-display-lg);letter-spacing:var(--tracking-display-lg);max-width:20ch}
/* upright 500, not italic: DESIGN_SYSTEM.md §1 — Czech display-scale accents (≥28px,
   multi-letter) use the upright 500 cut, not italic 300. Tested against italic on this
   exact headline family; upright 500 is the variant where the háček in "přesně",
   "řád", "kůň-A" etc. sits over its base letter instead of drifting at an angle. */
h2.sec em{font-style:normal;font-weight:500;color:var(--brass-text);letter-spacing:-.03em}
.lead{margin-top:26px;max-width:64ch;font-size:clamp(18px,1.5vw,20px);line-height:1.6;color:var(--cream2)}

/* ---------- rail / progress / mini ---------- */
#progress{position:fixed;top:0;left:0;z-index:90;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--brass),var(--brass-bright));pointer-events:none}
/* rodová osa as the rail's own spine: one continuous hairline behind the section
   numerals, from the first generation to the last — the manual's signature move
   applied to its own wayfinding, not just described in section VI's prose. `fixed`
   is itself a positioning context, so the spine can be absolute without a new
   wrapper element. */
#rail{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:9px}
#rail::before{content:"";position:absolute;top:22px;bottom:22px;left:11px;width:1px;background:var(--line-strong)}
#rail a{position:relative;display:flex;align-items:center;min-width:44px;min-height:44px;color:var(--stone);text-decoration:none;transition:color var(--motion-micro) var(--ease-out)}
#rail a .n{font-family:var(--mono);font-size:10px;letter-spacing:.12em;min-width:22px}
#rail a .l{position:absolute;left:32px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity var(--motion-micro) var(--ease-out),transform var(--motion-micro) var(--ease-out);pointer-events:none}
#rail a:hover,#rail a.act{opacity:1;color:var(--brass-text)}
#rail a:hover .l,#rail a.act .l{opacity:1;transform:none}
#miniBrand{position:fixed;top:10px;left:14px;z-index:85;display:flex;align-items:center;min-width:44px;min-height:44px;padding:10px 12px;gap:11px;color:var(--cream);text-decoration:none}
#miniBrand img{width:20px;height:22px}
#miniBrand span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.skip{position:fixed;top:12px;left:50%;z-index:100;display:inline-flex;align-items:center;min-width:44px;min-height:44px;transform:translate(-50%,-180%);background:var(--cream);color:var(--deeper);padding:11px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:transform var(--motion-micro) var(--ease-out)}
.skip:focus{transform:translate(-50%,0)}

#toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,14px);z-index:95;background:var(--deepforest);color:var(--cream);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--elevation-2);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:12px 22px;opacity:0;pointer-events:none;transition:opacity var(--motion-standard) var(--ease-out),transform var(--motion-standard) var(--ease-out)}
#toast.show{opacity:1;transform:translate(-50%,0)}

[data-copy]{cursor:pointer}
[data-copy]:focus-visible,button:focus-visible,a:focus-visible,.tester:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:var(--radius-sm)}

/* ---------- hero ---------- */
#s00{min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:90px 0}
#s00 .mark{margin:0 auto 40px;width:96px}
#s00 .eyebrow{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--cream2);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
#s00 .eyebrow::before,#s00 .eyebrow::after{content:"";width:48px;height:1px;background:var(--brass)}
/* positive tracking + single-line .95 leading is a deliberate exception to the
   size-specific display scale below: this sets literal all-caps "ATAVUS" (no CZ
   diacritics, no second line), where spaced caps read as premium, not tracked-in
   display prose — see DESIGN_SYSTEM.md §1. */
#s00 h1{margin-top:30px;font-family:var(--display);font-weight:300;font-size:clamp(78px,13vw,180px);line-height:.95;letter-spacing:.04em}
#s00 .tag{margin-top:28px;font-size:clamp(18px,1.8vw,23px);color:var(--cream2);font-style:italic}
#s00 .ver{margin-top:34px;color:var(--stone)}

/* ---------- grid + karty ---------- */
.grid{display:grid;gap:18px;margin-top:64px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--line);background:linear-gradient(180deg,var(--deepforest),color-mix(in srgb,var(--deepforest) 60%,var(--deeper)));padding:32px 28px}
.card .roman{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--brass);margin-bottom:18px}
.card h3{font-family:var(--display);font-weight:300;font-size:27px;line-height:var(--leading-display-md);letter-spacing:var(--tracking-display-md);margin-bottom:10px}
.card p{font-size:16px;line-height:1.6;color:var(--cream2)}

.pull{margin-top:84px;max-width:1000px;padding-left:34px;border-left:1px solid var(--brass);font-family:var(--display);font-weight:300;font-style:italic;font-size:clamp(30px,3.8vw,54px);line-height:var(--leading-display-lg);letter-spacing:var(--tracking-display-lg)}
.pull .q{color:var(--brass);font-style:normal}

/* ---------- znak ---------- */
.logoStage{margin-top:64px;border:1px solid var(--line);background:var(--deepforest);display:flex;align-items:center;justify-content:center;padding:96px 40px}
.logoStage img{width:min(420px,70%)}
.logoRow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.lTile{border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:44px 20px;background:var(--deepforest)}
.lTile.onCream{background:var(--cream)}
.lTile img{height:96px;width:auto}
.lTile img.wide{height:auto;width:min(260px,80%)}
.lTile .lnote{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--cream) 66%,transparent)}
.lTile.onCream .lnote{color:var(--brass-dim)}

.spec-table{width:100%;margin-top:64px;border-collapse:collapse;border-top:1px solid var(--line-strong)}
.spec-table th{text-align:left;padding:16px 18px 14px 0;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);border-bottom:1px solid var(--line)}
.spec-table td{padding:18px 18px 18px 0;font-size:16px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--cream2)}
.spec-table td:first-child{color:var(--cream);font-weight:500}
.spec-table .mono-cell{font-family:var(--mono);font-size:12px;letter-spacing:.03em}

.misuse{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.mu{border:1px solid var(--line);padding:30px 20px;display:flex;flex-direction:column;align-items:center;gap:18px;background:var(--deepforest)}
.mu .muStage{height:72px;display:flex;align-items:center;justify-content:center}
.mu img{height:64px;width:auto}
.mu-stretch img{transform:scaleX(1.7)}
.mu-rotate img{transform:rotate(24deg)}
.mu-color img{filter:hue-rotate(190deg) saturate(3)}
.mu-shadow img{filter:drop-shadow(0 6px 12px rgba(198,162,75,.95))}
.mu-busy .muStage{background:repeating-linear-gradient(45deg,var(--brass) 0 8px,var(--deeper) 8px 16px);width:100%}
.mu-font .muStage{font-family:var(--mono);font-size:26px;letter-spacing:.2em;color:var(--cream)}
.muX{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#C8847A}

/* ---------- barvy ---------- */
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:64px}
.swatch{border:1px solid var(--line);overflow:hidden;background:var(--deepforest);transition:transform var(--motion-standard) var(--ease-out)}
.swatch:hover{transform:translateY(-2px)}
.swatch .chip{height:110px}
.swatch .info{padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.swatch .info b{font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:.02em}
.swatch .info code{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--stone)}
.chip-deeper{background:#0C1A15;border-bottom:1px solid var(--line)}
.chip-deepforest{background:#122620;border-bottom:1px solid var(--line)}
.chip-forest{background:#1F3A2F}
.chip-cream{background:#F0E8D5}
.chip-cream2{background:#E2D7BD}
.chip-brass{background:#A78237}
.chip-brassbright{background:#C6A24B}
.chip-brassdim{background:#7B5F28}
.chip-stone{background:#B0A99F}
.foilStrip{margin-top:18px;border:1px solid var(--line);background:var(--deepforest);padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;transition:transform var(--motion-standard) var(--ease-out)}
.foilStrip:hover{transform:translateY(-2px)}
.foilStrip .fs-demo{font-family:var(--display);font-weight:300;font-size:clamp(40px,5vw,64px);line-height:var(--leading-display-lg);letter-spacing:var(--tracking-display-lg)}
.foilStrip .fs-meta{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);text-align:right;line-height:2}
.lightPanel{margin-top:64px;background:var(--cream);color:var(--forest);padding:48px 44px;border:1px solid var(--line)}
.lightPanel h3{font-family:var(--display);font-weight:400;font-size:30px;margin-bottom:10px}
.lightPanel p{color:#3A5040;font-size:16px;max-width:66ch}
.lightPanel .lpChips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.lightPanel .lpChips span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(31,58,47,.3);padding:9px 14px;color:#5E4A1F}

/* ---------- typografie ---------- */
.specimen{margin-top:64px;border-top:1px solid var(--line-strong)}
.specimen .row{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:baseline;border-bottom:1px solid var(--line);padding:26px 0}
.specimen .row .lab{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.specimen .row .ex{font-family:var(--display);font-weight:300;font-size:clamp(28px,3.6vw,48px);line-height:var(--leading-display-lg);letter-spacing:var(--tracking-display-lg)}
.sp-i{font-style:italic}
.sp-500{font-weight:500}
.specimen .row .ex.sp-body{font-family:var(--body);font-size:clamp(17px,1.6vw,20px);line-height:1.6}
.specimen .row .ex.sp-mono{font-family:var(--mono);font-size:clamp(13px,1.4vw,16px);letter-spacing:.16em;text-transform:uppercase}
.tester{margin-top:64px;border:1px dashed var(--line-strong);padding:44px 40px;font-family:var(--display);font-weight:300;font-size:clamp(32px,4.6vw,58px);line-height:var(--leading-display-lg);letter-spacing:var(--tracking-display-lg);color:var(--cream)}
.testerNote{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}

/* ---------- komponenty ---------- */
.demoGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:64px}
.demoTile{border:1px solid var(--line);background:var(--deepforest);padding:36px 30px;display:flex;flex-direction:column;gap:24px}
.demoTile .dt-lab{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.demoTile .recipe{display:flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;line-height:1.8;color:var(--stone);border-top:1px solid var(--line);padding-top:16px}
.gate{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:16px 30px;border:1px solid var(--brass);background:transparent;color:var(--cream);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;overflow:hidden;max-width:320px;transition:color var(--motion-micro) var(--ease-press)}
.gate::before{content:"";position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--brass) 30%,transparent);pointer-events:none}
.gate::after{content:"";position:absolute;inset:0;background:var(--brass);transform:scaleY(0);transform-origin:bottom;transition:transform var(--motion-micro) var(--ease-press);z-index:-1}
.gate:hover{color:var(--deeper)}
.gate:hover::after{transform:scaleY(1)}
.gate .arr{margin-left:12px;font-family:var(--display);transition:transform var(--motion-micro) var(--ease-press);display:inline-block}
.gate:hover .arr{transform:translateX(5px)}
.statDemo{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);display:grid;grid-template-columns:1fr 1fr}
.statDemo .stat{padding:30px 24px;border-right:1px solid var(--line)}
.statDemo .stat:last-child{border-right:none}
.statDemo .v{font-family:var(--display);font-weight:300;font-size:62px;line-height:var(--leading-display-lg);letter-spacing:var(--tracking-display-lg)}
.statDemo .v .u{font-size:.46em;font-style:italic;color:var(--brass);-webkit-text-fill-color:initial}
.statDemo .k{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.pullDemo{padding-left:30px;border-left:1px solid var(--brass);font-family:var(--display);font-weight:300;font-style:italic;font-size:28px;line-height:var(--leading-display-md);letter-spacing:var(--tracking-display-md)}
.pullDemo .q{color:var(--brass);font-style:normal}
.secnumDemo{display:flex;align-items:center;gap:14px;color:var(--brass-text);font-family:var(--mono);font-size:11px;letter-spacing:var(--tracking-mono-label);text-transform:uppercase}
.secnumDemo::before{content:"";width:32px;height:1px;background:var(--brass-bright)}

/* ---------- pohyb ---------- */
.motionList{margin-top:64px;border-top:1px solid var(--line-strong)}
.motionList .mi{display:grid;grid-template-columns:230px 1fr auto;gap:24px;align-items:baseline;padding:22px 4px;border-bottom:1px solid var(--line)}
.motionList .mi b{font-family:var(--display);font-weight:400;font-size:21px}
.motionList .mi p{font-size:15.5px;color:var(--cream2)}
.motionList .mi .mv{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.banList{margin-top:54px;display:flex;flex-wrap:wrap;gap:10px}
.banList i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em;border:1px solid var(--line);padding:9px 16px;color:var(--stone);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--cream) 55%,transparent)}
/* Rodová osa demo — same recipe as site/assets/a2.css .axis/.axis-line/.axis-pt
   (site/assets/a2.css:103-111): brass hairline with generation markers, statically
   drawn (no animation, matching "Rodová osa: Linka zůstává statická" two rows up). */
.axisDemo{display:grid;grid-template-columns:1fr 240px;gap:48px;align-items:center;margin-top:54px;padding-top:44px;border-top:1px solid var(--line)}
.axisDemo h3{font-family:var(--display);font-weight:300;font-size:21px;margin-bottom:12px}
.axisDemo p{font-size:15.5px;line-height:1.7;color:var(--cream2)}
.axisDemo-line{position:relative;height:220px;padding-left:28px}
.axisDemo-line svg{position:absolute;top:0;left:0;width:2px;height:100%;overflow:visible}
.axisDemo-track{fill:none;stroke:var(--line-strong);stroke-width:1}
.axisDemo-brass{fill:none;stroke:var(--brass-bright);stroke-width:1}
.axisDemo-pt{position:absolute;left:0;display:flex;align-items:center;gap:12px;transform:translateY(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.axisDemo-pt i{display:block;width:7px;height:7px;border-radius:50%;background:var(--brass-bright);box-shadow:0 0 0 3px var(--deepforest);font-style:normal}
@media (max-width:980px){.axisDemo{grid-template-columns:1fr}}

/* ---------- hlas ---------- */
.rules{margin-top:64px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px}
.rule{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:26px 0;border-bottom:1px solid var(--line)}
.rule .num{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--brass-text);padding-top:6px}
.rule p{font-size:16px;color:var(--cream2)}
.rule p strong{display:block;color:var(--cream);font-family:var(--display);font-weight:400;font-size:21px;margin-bottom:4px;letter-spacing:.01em}
.wall{margin-top:84px}
.wall h3{font-family:var(--display);font-weight:300;font-size:32px;line-height:var(--leading-display-md);letter-spacing:var(--tracking-display-md);margin-bottom:22px}
/* same upright-500 rule as h2.sec em above, scaled to this smaller (32px) headline */
.wall h3 em{font-style:normal;font-weight:500;color:var(--brass-text);letter-spacing:-.02em}
.baTable{width:100%;margin-top:84px;border-collapse:collapse;border-top:1px solid var(--line-strong)}
.baTable th{text-align:left;padding:16px 18px 14px 0;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);border-bottom:1px solid var(--line)}
.baTable td{padding:18px 18px 18px 0;font-size:16px;border-bottom:1px solid var(--line);vertical-align:top;width:50%}
.baTable td.bad{color:var(--stone)}
.baTable td.good{color:var(--cream)}
.legalCard{margin-top:84px;border:1px solid var(--line-strong);background:var(--deepforest);padding:36px 32px}
.legalCard h3{font-family:var(--display);font-weight:400;font-size:24px;margin-bottom:12px}
.legalCard p{font-size:15.5px;color:var(--cream2);max-width:80ch}
.legalCard p strong{color:var(--cream)}

/* ---------- aplikace ---------- */
.apps{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:64px}
.frame{border:1px solid var(--line);background:var(--deepforest);padding:26px;display:flex;flex-direction:column;gap:18px}
.frame .f-lab{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.bizCard{background:var(--forest);aspect-ratio:85/55;max-width:420px;width:100%;margin:0 auto;padding:30px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line-strong)}
.bizCard img{height:44px;width:auto;align-self:flex-start}
.bizCard .bc-foot{display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream2)}
.docHead{background:var(--cream);color:var(--forest);padding:30px;display:flex;flex-direction:column;gap:16px}
.docHead .dh-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(31,58,47,.35);padding-bottom:16px}
.docHead .dh-row img{height:52px;width:auto}
.docHead .dh-row span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#5E4A1F}
.docHead .docTitle{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.15}
.mailSig{background:var(--deeper);border:1px solid var(--line);padding:26px;display:flex;gap:18px;align-items:center}
.mailSig img{height:40px;width:auto}
.mailSig .ms span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);line-height:2}
.mailSig .ms b{font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:.04em;color:var(--cream)}

/* ---------- do/don't ---------- */
.dd{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:64px}
.dd .col{border:1px solid var(--line);background:var(--deepforest);padding:36px 30px}
.dd .col h3{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:24px}
.dd .col.do h3{color:var(--brass-text)}
.dd .col.dont h3{color:#C8847A}
.dd ul{list-style:none}
.dd li{padding:13px 0 13px 26px;border-bottom:1px solid var(--line);font-size:16px;color:var(--cream2);position:relative}
.dd li::before{position:absolute;left:0;font-family:var(--mono);font-size:12px}
.dd .do li::before{content:"+";color:var(--brass-bright)}
.dd .dont li::before{content:"\2013";color:#C8847A}

/* ---------- tokeny ---------- */
.vars{margin-top:64px;border:1px solid var(--line);background:var(--deepforest);overflow:hidden}
.vars .vTop{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line)}
.vars .vTop span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
#copyVars{min-width:44px;min-height:44px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;background:var(--brass);color:var(--deeper);border:none;padding:11px 18px;cursor:pointer;transition:background var(--motion-micro) var(--ease-press)}
#copyVars:hover{background:var(--brass-bright)}
.vars pre{padding:26px 24px;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:var(--cream2);overflow-x:auto}
.assetCards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
#s10 footer{margin-top:110px;border-top:1px solid var(--line);padding-top:48px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
#s10 footer img{width:64px}
#s10 footer .fb{font-family:var(--display);font-weight:300;font-size:34px;letter-spacing:.1em}
#s10 footer p{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);line-height:2.2;max-width:760px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--motion-scene) var(--ease-out),transform var(--motion-scene) var(--ease-out)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1180px),(max-height:760px){#rail{display:none}}
@media (max-width:980px){
  .g3,.g4,.swatches,.misuse,.assetCards{grid-template-columns:repeat(2,1fr)}
  .logoRow,.apps,.demoGrid,.rules{grid-template-columns:1fr}
  .specimen .row{grid-template-columns:1fr;gap:8px}
  .motionList .mi{grid-template-columns:1fr;gap:6px}
  .foilStrip{flex-direction:column;align-items:flex-start}
  .foilStrip .fs-meta{text-align:left}
}
@media (max-width:660px){
  section{padding:100px 0}
  .wrap{padding:0 24px}
  .g2,.g3,.g4,.swatches,.misuse,.assetCards{grid-template-columns:1fr}
  #miniBrand span{display:none}
  .baTable td{display:block;width:100%}
  .baTable td.bad{border-bottom:none;padding-bottom:4px}
  .statDemo{grid-template-columns:1fr}
  .statDemo .stat{border-right:none;border-bottom:1px solid var(--line)}
  .statDemo .stat:last-child{border-bottom:none}
}

/* ---------- reduced motion ---------- */
/* Scoped, not a blanket hammer — same approach as site/assets/a2.css (site/assets/
   a2.css:439-448): opacity/colour keep transitioning normally (that's how state
   feedback stays comprehensible), only transform/parallax/loop movement drops out.
   Forcing every duration to .01ms (the old rule here) also flattened those kept
   transitions into a jump-cut instead of the short cross-fade reduced-motion wants. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .swatch:hover,.foilStrip:hover{transform:none}
  *,*::before,*::after{animation-iteration-count:1!important}
  *,*::before,*::after{transition-property:opacity,color,background,background-color,border-color,box-shadow,fill,stroke!important}
}

/* ---------- print ---------- */
@media print{
  #progress,#rail,#miniBrand,#toast{display:none}
  section{padding:40px 0;page-break-inside:avoid}
  body{background:#fff;color:#000}
}
.visually-hidden-copy{position:fixed;top:-200px;left:-200px;width:1px;height:1px;opacity:0}
.dl-body a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);text-decoration:none;border:1px solid var(--line-strong);padding:8px 10px;margin:0 7px 7px 0;transition:background var(--motion-micro),color var(--motion-micro),border-color var(--motion-micro)}
.dl-body a:hover{background:var(--brass);color:var(--deepforest);border-color:var(--brass)}
.dl-cta{margin-top:44px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dl-cta a{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--deeper);background:var(--brass);text-decoration:none;padding:16px 26px}
.dl-cta a:hover{background:var(--cream)}
.dl-cta .note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--stone);text-transform:none}

/* ---------- ochranná zóna · fotografie · oldstyle · a11y (rev. 2026.06b) ---------- */
.clearspace{margin-top:40px;border:1px solid var(--line);background:var(--deepforest);padding:44px 36px}
.clearspace svg{width:100%;height:auto;max-width:640px;margin:0 auto;display:block}
.clearspace figcaption{margin-top:22px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--cream) 60%,transparent)}
.cs-logo{font-family:var(--display);font-weight:300;font-size:34px;letter-spacing:.14em;fill:var(--cream)}
.cs-x{font-family:var(--display);font-style:italic;font-size:23px;fill:var(--brass-bright)}
.cs-ref{font-family:var(--display);font-weight:300;font-size:54px;fill:var(--cream)}
.cs-label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;fill:var(--brass);text-transform:uppercase}
.photoCanon{margin-top:84px}
.photoCanon h3{font-family:var(--display);font-weight:300;font-size:clamp(28px,3vw,34px);margin-bottom:6px}
.photoCanon .lead{margin-top:10px}
.pc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;margin-top:30px;border-top:1px solid var(--line-strong)}
.pc{display:grid;grid-template-columns:46px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.pc .pc-n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--brass);padding-top:6px}
.pc b{display:block;font-family:var(--display);font-weight:400;font-size:21px;color:var(--cream);margin-bottom:5px;letter-spacing:.01em}
.pc p{font-size:15.5px;line-height:1.62;color:var(--cream2)}
.fondNote{margin-top:30px;font-size:15px;line-height:1.7;color:var(--cream2);padding-left:18px;border-left:1px solid var(--brass);max-width:78ch}
.fondNote b{color:var(--cream)}
.oldstyle{font-variant-numeric:oldstyle-nums}
@media (max-width:980px){.pc-grid{grid-template-columns:1fr}}
@media (prefers-contrast:more){:root{--stone:#C2BAAE}}