/* ═══════════════════════════════════════════════════════════════
   BOHEMIE — design language v1
   Paper & garnet: PDR monumentality · Maggie warmth · Are.na quiet
   ═══════════════════════════════════════════════════════════════ */
:root {
  --paper:      #f6f0e2;   /* warm paper ground (Maggie / WiP) */
  --paper-deep: #efe6d2;   /* recessed panels */
  --ink:        #26201a;   /* warm near-black */
  --ink-soft:   #6b6152;   /* secondary text */
  --line:       #d9cdb4;   /* hairline rules */
  --garnet:     #7a1c2b;   /* český granát — the accent */
  --garnet-deep:#5c1420;
  --gold:       #a97f2f;   /* gilded detail */
  --leaf:       #4a6741;   /* growth / positive */
  --amber:      #b0771e;   /* warning / stalled */

  /* the 12 areas */
  --a1:#7a1c2b; --a2:#37474f; --a3:#5d4a7a; --a4:#a97f2f;
  --a5:#20606b; --a6:#b05a32; --a7:#4a6741; --a8:#8a3050;
  --a9:#3f6d4e; --a10:#4a5a80; --a11:#6d5537; --a12:#555049;

  --serif-display: "Playfair Display", Georgia, serif;
  --serif-body: "Source Serif 4", Georgia, serif;
  --sans: "Inter", -apple-system, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font:17px/1.65 var(--serif-body); }
::selection { background:var(--garnet); color:var(--paper); }
img { max-width:100%; }
a { color:var(--garnet); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }

/* ── Masthead (PDR monument) ─────────────────────────────────── */
.masthead { text-align:center; padding:34px 24px 0; }
.masthead .over { font:600 11px/1 var(--sans); letter-spacing:.35em; text-transform:uppercase; color:var(--ink-soft); }
.masthead h1.wordmark { font-family:var(--serif-display); font-weight:700; font-size:clamp(42px,6vw,74px);
  letter-spacing:.06em; margin:10px 0 4px; }
.masthead h1.wordmark a { color:var(--ink); text-decoration:none; }
.masthead h1.wordmark em { font-style:italic; font-weight:500; color:var(--garnet); }
.masthead .under { font-style:italic; color:var(--ink-soft); font-size:16px; }
.rule-double { border:0; border-top:1px solid var(--ink); border-bottom:3px double var(--ink);
  height:6px; max-width:1160px; margin:22px auto 0; opacity:.85; }

/* ── Quiet chrome nav (Are.na / GOV.UK) ──────────────────────── */
nav.chrome { position:sticky; top:0; z-index:10; background:rgba(246,240,226,.95); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); }
nav.chrome .in { max-width:1160px; margin:0 auto; display:flex; align-items:baseline; gap:26px;
  padding:13px 24px; font:500 13.5px/1 var(--sans); flex-wrap:wrap; }
nav.chrome .mark { font-family:var(--serif-display); font-weight:700; font-size:17px; letter-spacing:.05em; }
nav.chrome .mark a { color:var(--ink); }
nav.chrome a { color:var(--ink-soft); text-decoration:none; letter-spacing:.02em; }
nav.chrome a:hover, nav.chrome a.on { color:var(--garnet); }
nav.chrome a.on { border-bottom:2px solid var(--garnet); padding-bottom:3px; }
nav.chrome .join { margin-left:auto; color:var(--paper); background:var(--garnet); padding:7px 14px;
  border-radius:3px; }
nav.chrome .join:hover { background:var(--garnet-deep); color:var(--paper); text-decoration:none; }

/* ── Layout ──────────────────────────────────────────────────── */
.wrap { max-width:1160px; margin:0 auto; padding:0 24px; }
.cols { display:grid; grid-template-columns:230px 1fr; gap:46px; }
@media (max-width:900px){ .cols { grid-template-columns:1fr; } }

/* ── Mission margin block (PDR sidebar) ──────────────────────── */
.mission { border-top:2px solid var(--ink); padding-top:14px; font-style:italic; font-size:15.5px;
  color:var(--ink-soft); line-height:1.7; }
.mission b { color:var(--ink); font-style:normal; }
.sidenote { border-top:1px solid var(--line); margin-top:22px; padding-top:14px;
  font:400 13px/1.6 var(--sans); color:var(--ink-soft); }
.sidenote .q { font-family:var(--serif-body); font-style:italic; font-size:15px; color:var(--ink); }

/* ── Statement hero (Maggie) ─────────────────────────────────── */
.statement { font-family:var(--serif-display); font-weight:600; font-size:clamp(30px,4.6vw,56px);
  line-height:1.16; letter-spacing:-.01em; margin:26px 0 18px; }
.statement em { font-style:italic; color:var(--garnet); }
.lede { font-size:19px; color:var(--ink-soft); max-width:640px; }

/* ── Section headers ─────────────────────────────────────────── */
h2.sec { font-family:var(--serif-display); font-weight:600; font-size:29px; margin:0 0 6px; }
.sec-over { font:600 11px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.sec-sub { color:var(--ink-soft); font-size:15.5px; margin-bottom:26px; max-width:640px; }
section.band { padding:54px 0 30px; }
section.band + section.band { border-top:1px solid var(--line); }
.band-deep { background:var(--paper-deep); }

/* ── Cards ───────────────────────────────────────────────────── */
.grid { display:grid; gap:16px; }
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .g2,.g3,.g4{grid-template-columns:1fr} }
.card { background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:20px;
  position:relative; transition:border-color .15s, transform .15s; display:block; color:var(--ink); }
a.card:hover { text-decoration:none; border-color:var(--garnet); transform:translateY(-2px); }
.card .kicker { font:600 10.5px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); }
.card h3 { font-family:var(--serif-display); font-size:19px; font-weight:600; margin:8px 0 6px; line-height:1.3; }
.card p { font-size:14.5px; color:var(--ink-soft); line-height:1.55; }
.card .accent-bar { position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:4px 0 0 4px; }

/* ── Metric card (the atomic dashboard unit) ─────────────────── */
.metric-card .num { font:700 30px/1 var(--sans); letter-spacing:-.02em; margin:8px 0 2px; }
.metric-card .target { font:500 12.5px/1.4 var(--sans); color:var(--ink-soft); }
.metric-card .target b { color:var(--leaf); font-weight:600; }
.spark { margin-top:12px; }
.trend-up { color:var(--leaf); } .trend-down { color:var(--garnet); } .trend-flat { color:var(--ink-soft); }

/* ── Growth states (Maggie's garden) ─────────────────────────── */
.state { display:inline-flex; align-items:center; gap:6px; font:600 11.5px/1 var(--sans);
  letter-spacing:.04em; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); }
.state::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.state.seminko   { color:var(--amber); border-color:color-mix(in srgb, var(--amber) 40%, var(--line)); }
.state.roste     { color:var(--leaf); border-color:color-mix(in srgb, var(--leaf) 40%, var(--line)); }
.state.zakoreneny{ color:var(--garnet); border-color:color-mix(in srgb, var(--garnet) 35%, var(--line)); }

/* ── Status chips (actions) ──────────────────────────────────── */
.chip { display:inline-block; font:600 11px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:3px; }
.chip.bezi     { background:#e3ead9; color:var(--leaf); }
.chip.plan     { background:#efe3c8; color:var(--amber); }
.chip.napad    { background:#e7e1d3; color:var(--ink-soft); }
.chip.hotovo   { background:var(--garnet); color:var(--paper); }
.chip.stoji    { background:#ecd9d3; color:var(--garnet); }

/* ── The connective link (Are.na — the law of the site) ──────── */
.connections { border-top:1px solid var(--line); margin-top:26px; padding-top:16px; }
.connections .label { font:600 10.5px/1 var(--sans); letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:12px; }
.conn { display:inline-flex; align-items:baseline; gap:7px; font:500 13px/1.3 var(--sans);
  border:1px solid var(--line); background:var(--paper); border-radius:3px; padding:7px 12px;
  margin:0 8px 8px 0; color:var(--ink); }
.conn:hover { border-color:var(--garnet); text-decoration:none; }
.conn .t { font:700 9.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.conn.metrika .t{color:var(--a5)} .conn.princip .t{color:var(--leaf)} .conn.velikan .t{color:var(--garnet)}
.conn.zdroj .t{color:var(--ink-soft)} .conn.akce .t{color:var(--amber)} .conn.oblast .t{color:var(--a2)}

/* ── Tables (Are.na table view / action register) ────────────── */
table.reg { width:100%; border-collapse:collapse; font:400 14px/1.5 var(--sans); }
table.reg th { font:600 10.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  text-align:left; padding:10px 12px; border-bottom:2px solid var(--ink); }
table.reg td { padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
table.reg tr:hover td { background:var(--paper-deep); }
table.reg td .name { font-family:var(--serif-body); font-size:15.5px; font-weight:600; }

/* ── Velikán medallion (typographic, PDR reverence) ──────────── */
.medallion { aspect-ratio:3/4; border:1px solid var(--line); border-radius:4px; background:var(--paper-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; overflow:hidden; position:relative; }
.medallion .init { font-family:var(--serif-display); font-weight:700; font-size:64px; color:var(--garnet); opacity:.85; }
.medallion .yrs { font:500 11px/1 var(--sans); letter-spacing:.2em; color:var(--ink-soft); }
.medallion::after { content:""; position:absolute; inset:10px; border:1px solid var(--line); border-radius:2px; pointer-events:none; }

/* ── Prose (long reads) ──────────────────────────────────────── */
.prose { max-width:680px; font-size:17.5px; line-height:1.75; }
.prose p { margin:0 0 1.2em; }
.prose .dropcap::first-letter { font-family:var(--serif-display); font-weight:700; font-size:64px; float:left;
  line-height:.82; padding:6px 10px 0 0; color:var(--garnet); }
blockquote.pull { border-left:3px solid var(--garnet); padding:6px 0 6px 22px; margin:30px 0;
  font-family:var(--serif-display); font-style:italic; font-size:23px; line-height:1.45; }
.why-mech { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0; }
@media (max-width:700px){ .why-mech{grid-template-columns:1fr} }
.why-mech .box { border:1px solid var(--line); border-radius:4px; padding:18px; background:var(--paper); }
.why-mech .box .h { font:600 10.5px/1 var(--sans); letter-spacing:.25em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.why-mech .box p { font-size:15px; color:var(--ink-soft); }

/* ── Breadcrumb / page top ───────────────────────────────────── */
.crumb { font:500 12.5px/1 var(--sans); letter-spacing:.04em; color:var(--ink-soft); padding:26px 0 0; }
.crumb a { color:var(--ink-soft); }
.crumb a:hover { color:var(--garnet); }
.page-title { font-family:var(--serif-display); font-weight:700; font-size:clamp(30px,4vw,48px); line-height:1.15; margin:14px 0 10px; }
.page-meta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:14px 0 6px;
  font:500 13px/1 var(--sans); color:var(--ink-soft); }

/* ── Footer ──────────────────────────────────────────────────── */
footer.site { border-top:3px double var(--ink); margin-top:70px; padding:40px 0 60px; }
footer.site .in { max-width:1160px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; }
@media (max-width:800px){ footer.site .in{grid-template-columns:1fr 1fr} }
footer.site .mark { font-family:var(--serif-display); font-weight:700; font-size:24px; }
footer.site p, footer.site a { font:400 13.5px/1.9 var(--sans); color:var(--ink-soft); display:block; }
footer.site .h { font:600 11px/1 var(--sans); letter-spacing:.25em; text-transform:uppercase; color:var(--ink); margin-bottom:10px; }
footer.site .note { font-style:italic; font-family:var(--serif-body); font-size:14px; margin-top:12px; }

/* ── Utilities ───────────────────────────────────────────────── */
.sans { font-family:var(--sans); }
.soft { color:var(--ink-soft); }
.small { font-size:13px; }
.mt0{margin-top:0} .flex{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.demo-tag { position:fixed; bottom:14px; right:14px; z-index:50; background:var(--ink); color:var(--paper);
  font:600 10.5px/1 var(--sans); letter-spacing:.15em; text-transform:uppercase; padding:7px 12px; border-radius:3px; opacity:.75; }