/* Orbis – základ: barvy, písmo, sdílené prvky */
:root {
  --paper: #F4ECDF; --paper-2: #EDE2D0; --paper-3: #E2D3BB; --card: #FAF5EC;
  --ink: #1D2240; --ink-2: #4A4E6A; --ink-3: #85849B; --line: rgba(29, 34, 64, .15); --line-2: rgba(29, 34, 64, .3);
  --apricot: #EC976A; --terra: #BF5536; --rose: #E5B4A2; --lilac: #B5B2D9; --sky: #A2B9DF; --gold: #A97C34;
  --fire: #D9693F; --earth: #8E8A4E; --air: #6F8FC7; --water: #4E7C93;
  --sky-1: #9EB2DC; --sky-2: #C0BADD; --sky-3: #E8BFB3; --sky-4: #F2A579; --sky-5: #F7CB98;
  --hatch: #1D2240; --sphere: #F7F0E3;
  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --sym: 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'Segoe UI Symbol', 'Apple Symbols', serif;
  --ease: cubic-bezier(.22, .8, .2, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #10132A; --paper-2: #171B36; --paper-3: #232847; --card: #1A1E3B;
  --ink: #F2E8D7; --ink-2: #C5BDB0; --ink-3: #8F8CA6; --line: rgba(242, 232, 215, .14); --line-2: rgba(242, 232, 215, .3);
  --apricot: #F0A275; --terra: #E27B56; --gold: #D9B068; --rose: #C98E82;
  --sky-1: #0A0D24; --sky-2: #1A1D47; --sky-3: #3A2C5C; --sky-4: #7A4B62; --sky-5: #B36E61;
  --hatch: #F2E8D7; --sphere: #262B4E;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background-color .5s, color .5s;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--apricot); color: #1D2240; }

.serif { font-family: var(--serif); font-weight: 300; font-variation-settings: 'SOFT' 100, 'WONK' 0; letter-spacing: -.01em; }
.it { font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.sym { font-family: var(--sym); font-variant-emoji: text; }
.wrap { width: min(1280px, 100% - 64px); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 32px); } }

/* štítky vrstev: vypočteno × výklad */
.tag { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }
.tag.calc { color: var(--gold); }
.tag.calc::before { border-radius: 0; transform: rotate(45deg); width: 6px; height: 6px; }
.tag.read { color: var(--terra); }
.tag.read::before { background: currentColor; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 99px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform .35s var(--ease), background .3s, color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--ink); }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

.link { text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: border-color .3s; }
.link:hover { border-color: var(--ink); }

/* rytinové koule */
.sphere .hatch { stroke: var(--hatch); }
.sphere .sphere-fill { fill: var(--sphere); }
.sphere .outline { fill: none; stroke: var(--hatch); stroke-width: 1.4; }
.sphere .band { fill: none; stroke: var(--hatch); stroke-width: .8; opacity: .5; }
.sphere .ring { fill: none; stroke: var(--hatch); stroke-width: 1.3; }
.sphere .shadow-tint { fill: var(--hatch); opacity: .08; }

/* natální kolo */
.wheel-svg { width: 100%; height: auto; overflow: visible; }
.wheel-svg text { font-family: var(--mono); }
.w-line { fill: none; stroke: var(--line-2); stroke-width: 1; }
.w-line.strong { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.1; }
.w-line.faint { stroke: var(--line); }
.w-tick { stroke: var(--ink); stroke-opacity: .32; stroke-width: .8; }
.w-tick.strong { stroke-opacity: .6; }
.w-sign { font-family: var(--sym) !important; font-size: 36px; fill: var(--ink); font-variant-emoji: text; }
.w-sign.el-ohen { fill: var(--fire); } .w-sign.el-zeme { fill: var(--earth); } .w-sign.el-vzduch { fill: var(--air); } .w-sign.el-voda { fill: var(--water); }
.w-mini { font-size: 9px; fill: var(--ink-3); letter-spacing: .1em; }
.w-house { stroke: var(--ink); stroke-opacity: .22; stroke-width: 1; stroke-dasharray: 2 5; }
.w-num { font-size: 12px; fill: var(--ink-3); letter-spacing: .08em; }
.w-axis { stroke: var(--ink); stroke-width: 1.3; stroke-opacity: .75; }
.w-axislab { font-size: 13px; fill: var(--ink); letter-spacing: .12em; font-weight: 500; }
.w-asp { stroke-width: 1.2; opacity: .55; transition: opacity .4s, stroke-width .4s; }
.w-asp.soft { stroke: var(--air); }
.w-asp.hard { stroke: var(--terra); }
.w-asp.neutral { stroke: var(--ink); }
.w-ptick { stroke: var(--ink); stroke-width: 1.4; }
.w-pdot { fill: var(--ink); }
.w-pbg { fill: var(--paper); stroke: var(--line-2); stroke-width: 1; transition: fill .3s, stroke .3s; }
.w-pg { font-family: var(--sym) !important; font-size: 27px; fill: var(--ink); pointer-events: none; }
.w-pdeg { font-size: 12px; fill: var(--ink-2); pointer-events: none; }
.w-planet { cursor: pointer; outline: none; transition: opacity .4s; }
.w-planet:hover .w-pbg, .w-planet:focus-visible .w-pbg { stroke: var(--ink); }
.w-planet.on .w-pbg { fill: var(--ink); stroke: var(--ink); }
.w-planet.on .w-pg { fill: var(--paper); }
.has-focus .w-planet:not(.on) { opacity: .35; }
.has-focus .w-asp { opacity: .08; }
.has-focus .w-asp.on { opacity: 1; stroke-width: 2; }

/* zrno papíru */
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .grain::after { mix-blend-mode: screen; opacity: .07; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } * { animation: none !important; transition: none !important; } }