@import url("/css/fonts.css");

/* ============ ТОКЕНЫ ============ */
:root {
  /* камень */
  --basalt: oklch(0.165 0.008 250);
  --basalt-2: oklch(0.2 0.01 248);
  --graphite: oklch(0.245 0.012 245);
  --graphite-2: oklch(0.3 0.014 242);
  --line: oklch(0.36 0.016 240);
  /* фьорд и иней */
  --fjord: oklch(0.42 0.035 238);
  --fjord-deep: oklch(0.27 0.03 238);
  --frost: oklch(0.84 0.022 228);
  /* кость и пергамент */
  --bone: oklch(0.92 0.018 85);
  --parchment: oklch(0.85 0.035 80);
  --muted: oklch(0.75 0.016 80);
  --ink: oklch(0.2 0.012 60);
  /* акценты */
  --ochre: oklch(0.5 0.135 34);
  --ochre-hi: oklch(0.71 0.12 42);
  --ochre-deep: oklch(0.38 0.1 32);
  --gold: oklch(0.74 0.085 82);
  --ember: oklch(0.66 0.15 48);
  --cut: oklch(0.11 0.01 250);

  /* типографика */
  --f-display: "Forum", "Alegreya", Georgia, serif;
  --f-text: "Alegreya", Georgia, "Times New Roman", serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-lead: 19px;
  --fs-h3: 22px;
  --fs-h2: 30px;
  --fs-h1: 44px;
  --lh-body: 1.55;

  /* отступы (шаг 4) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --pad: 16px;
  --section: 56px;

  /* радиусы — тёсаный камень, мелко */
  --r-1: 2px; --r-2: 4px; --r-3: 8px;
  --r-stone: 46% 54% 44% 56% / 40% 42% 58% 60%;

  /* тени */
  --sh-1: 0 1px 0 oklch(1 0 0 / 0.05) inset, 0 2px 6px oklch(0 0 0 / 0.35);
  --sh-2: 0 1px 0 oklch(1 0 0 / 0.06) inset, 0 10px 28px oklch(0 0 0 / 0.5);
  --sh-cut: inset 0 2px 3px oklch(0 0 0 / 0.6), inset 0 -1px 0 oklch(1 0 0 / 0.06);

  /* фактуры */
  --tx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .66 0 0 0 0 .7 .18 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tx-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .06 0 0 0 0 .08 0 0 0 -1.1 .62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --tx-wood: repeating-linear-gradient(92deg, oklch(1 0 0 / 0.018) 0 2px, transparent 2px 9px, oklch(0 0 0 / 0.06) 9px 10px, transparent 10px 23px);
  --tx-stripe: repeating-linear-gradient(135deg, oklch(1 0 0 / 0.035) 0 10px, transparent 10px 20px);
}
@media (min-width: 768px) {
  :root { --pad: 32px; --fs-h1: 56px; --fs-h2: 36px; --section: 72px; }
}
@media (min-width: 1024px) {
  :root { --fs-body: 18px; --fs-lead: 21px; --fs-h3: 24px; --fs-h1: 64px; --fs-h2: 40px; --section: 96px; }
}
@media (min-width: 1920px) {
  :root { --fs-body: 19px; --fs-lead: 22px; --fs-h1: 76px; --fs-h2: 46px; --pad: 48px; --section: 120px; }
}

/* ============ БАЗА ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body { overflow-x: clip; }
body {
  background-color: var(--basalt);
  background-image: var(--tx-grain);
  color: var(--bone);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--ochre-hi); text-decoration-color: oklch(0.71 0.12 42 / 0.45); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--gold); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; margin: 0; line-height: 1.08; letter-spacing: 0.005em; text-wrap: balance; color: var(--bone); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--pad); }
@media (min-width: 1440px) { .wrap { max-width: 1340px; } }
@media (min-width: 1920px) { .wrap { max-width: 1560px; } }
.prose { max-width: 36em; }
.eyebrow { font-family: var(--f-text); font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochre-hi); font-weight: 500; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--parchment); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.section { padding-block: var(--section); position: relative; }
.section--stone { background-color: var(--basalt-2); background-image: var(--tx-grain), linear-gradient(180deg, oklch(0.2 0.012 245), oklch(0.18 0.01 248)); border-block: 1px solid oklch(0.3 0.014 242 / 0.6); }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-6); }
.section__title { display: grid; gap: var(--sp-3); }
@media (min-width: 1024px) { .section__head { margin-bottom: var(--sp-7); } }
.more { font-size: var(--fs-body); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.more::after { content: "→"; font-family: var(--f-text); }

/* ============ КНОПКИ ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: var(--r-2);
  font-family: var(--f-text); font-size: 17px; font-weight: 500; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer; white-space: nowrap; border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background-color: var(--ochre); color: var(--bone);
  background-image: var(--tx-grain), linear-gradient(180deg, oklch(0.5 0.135 35), oklch(0.44 0.125 32));
  border-color: oklch(0.36 0.1 30); box-shadow: 0 1px 0 oklch(1 0 0 / 0.14) inset, 0 4px 12px oklch(0 0 0 / 0.4);
}
.btn--primary:hover { color: var(--bone); background-image: var(--tx-grain), linear-gradient(180deg, oklch(0.52 0.14 37), oklch(0.46 0.13 33)); }
.btn--secondary { background-color: transparent; color: var(--bone); border-color: var(--line); }
.btn--secondary:hover { color: var(--bone); border-color: var(--frost); background-color: oklch(0.84 0.022 228 / 0.06); }
.btn--sm { min-height: 44px; padding: 0 10px; font-size: 15px; }
.btn--block { width: 100%; }
@media (min-width: 390px) { .btn--sm { padding: 0 16px; } }

/* поле */
.field { display: grid; gap: var(--sp-2); min-width: 0; }
.field__label { font-size: var(--fs-small); color: var(--muted); }
.field__input {
  width: 100%; min-height: 48px; padding: 0 16px; border-radius: var(--r-2);
  background-color: oklch(0.13 0.008 250 / 0.85); border: 1px solid var(--line); color: var(--bone);
  box-shadow: var(--sh-cut); font-size: 17px;
}
.field__input::placeholder { color: oklch(0.66 0.014 80); }
.field__input:focus { outline: none; border-color: var(--ochre-hi); }

/* ============ РУНЫ ============ */
.rune { display: block; width: 100%; height: 100%; overflow: visible; }
.rune path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.rune .cut { stroke: var(--cut); transform: translate(1px, 1.4px); opacity: .9; }
.rune .paint { stroke: var(--ochre); }
.rune--bone .paint { stroke: var(--bone); }
.rune--bone .cut { display: none; }
.rune--thin path { stroke-width: 4; }

/* камень с руной */
.stone {
  position: relative; display: block; flex: none; aspect-ratio: 5 / 6;
  border-radius: var(--r-stone);
  background-color: var(--graphite);
  background-image: radial-gradient(120% 90% at 30% 18%, oklch(0.44 0.014 238), oklch(0.29 0.013 244) 55%, oklch(0.2 0.01 250) 100%);
  box-shadow: inset 0 2px 1px oklch(1 0 0 / 0.1), inset 0 -8px 14px oklch(0 0 0 / 0.45), 0 10px 20px oklch(0 0 0 / 0.45);
}
.stone::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--tx-mottle), var(--tx-grain); background-size: 180px, 120px; opacity: .9; pointer-events: none; }
.stone__rune { position: absolute; top: 19%; left: 26%; width: 48%; height: 62%; }
.stone--s { width: 48px; }
.stone--s .rune path { stroke-width: 6.5; }
.stone--m { width: 96px; }
.stone--m .rune path { stroke-width: 5.5; }
.stone--l { width: 176px; }
.stone--fluid { width: 100%; max-width: 96px; }
.stone--b { border-radius: 52% 48% 56% 44% / 44% 38% 62% 56%; }
.stone--c { border-radius: 42% 58% 50% 50% / 36% 46% 54% 64%; }
.stone--blank .stone__rune { display: none; }
@media (min-width: 1024px) { .stone--l { width: 200px; } }

/* большой рунный камень первого экрана */
.monolith { width: min(100%, 300px); margin-inline: auto; filter: drop-shadow(0 30px 40px oklch(0 0 0 / 0.6)); }
.monolith svg { display: block; width: 100%; height: auto; overflow: visible; }
.monolith__grain { opacity: .55; }
.stop-a { stop-color: oklch(0.46 0.014 236); }
.stop-b { stop-color: oklch(0.3 0.014 242); }
.stop-c { stop-color: oklch(0.19 0.01 250); }
.ribbon-row { padding-block: var(--sp-5); }
.monolith__band-edge { fill: none; stroke: var(--ochre-deep); stroke-width: 30; }
.monolith__band { fill: none; stroke: oklch(0.2 0.012 245); stroke-width: 25; }
.monolith__text { font-family: var(--f-display); font-size: 15px; letter-spacing: 0.16em; fill: var(--ochre-hi); text-transform: uppercase; }
.monolith__rune path { stroke-width: 4.6; }
.monolith__caption { margin-top: var(--sp-4); text-align: center; color: var(--muted); font-size: var(--fs-small); min-height: 1.5em; }
.monolith__caption b { color: var(--parchment); font-weight: 500; }
@media (min-width: 768px) { .monolith { width: 340px; } }
@media (min-width: 1440px) { .monolith { width: 400px; } }
@media (min-width: 1920px) { .monolith { width: 460px; } }

/* ============ ОРНАМЕНТ ============ */
/* лента-змей с надписью */
.ribbon { display: flex; align-items: stretch; width: 100%; color: var(--ochre-hi); }
.ribbon__tail, .ribbon__head { flex: none; width: 28px; background-color: var(--ochre-deep); }
.ribbon__tail { clip-path: polygon(0 50%, 100% 8%, 100% 92%); }
.ribbon__head { width: 40px; clip-path: polygon(0 0, 46% 0, 100% 34%, 100% 66%, 46% 100%, 0 100%); position: relative; }
.ribbon__band {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: 8px 12px; min-height: 38px;
  border-block: 3px solid var(--ochre-deep);
  background-color: oklch(0.18 0.012 245); background-image: var(--tx-grain);
  box-shadow: var(--sh-cut);
  font-family: var(--f-display); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; line-height: 1.3;
}
@media (min-width: 768px) { .ribbon__band { font-size: 15px; letter-spacing: 0.24em; } }
.ribbon--divider { margin-block: 0; }

/* буквица */
.initial {
  float: left; font-family: var(--f-display); font-size: 3.4em; line-height: .9;
  color: var(--ochre-hi); padding: 6px 10px 2px; margin: 4px 12px 0 0;
  border: 1px solid var(--ochre-deep); outline: 1px solid oklch(0.38 0.1 32 / 0.45); outline-offset: 3px;
  background-color: oklch(0.14 0.01 250); background-image: var(--tx-grain);
}

/* заглушка изображения */
.ph {
  position: relative; display: flex; align-items: flex-end; justify-content: flex-start;
  background-color: var(--graphite); background-image: var(--tx-stripe);
  border: 1px dashed oklch(0.45 0.02 240); border-radius: var(--r-2); overflow: hidden;
}
.ph__label { margin: 10px; padding: 4px 8px; font-family: var(--f-mono); font-size: 12px; line-height: 1.4; color: var(--frost); background-color: oklch(0.13 0.01 250 / 0.85); border-radius: var(--r-1); max-width: calc(100% - 20px); }

/* ============ ШАПКА ============ */
.header { position: sticky; top: 0; z-index: 20; background-color: oklch(0.15 0.008 250 / 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid oklch(0.3 0.014 242 / 0.7); }
.header--static { position: relative; }
.header__inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-height: 64px; position: relative; }
.logo { font-family: var(--f-display); font-size: 24px; line-height: 1; color: var(--bone); text-decoration: none; letter-spacing: 0.03em; flex: none; margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; }
.logo:hover { color: var(--bone); }
.logo span { color: var(--ochre-hi); }
.nav { display: none; }
.nav a { color: var(--parchment); text-decoration: none; display: flex; align-items: center; min-height: 44px; }
.nav a:hover { color: var(--ochre-hi); }
.nav.is-open {
  display: flex; flex-direction: column; position: absolute; top: 100%; left: calc(var(--pad) * -1); right: calc(var(--pad) * -1);
  padding: 8px var(--pad) 16px; background-color: oklch(0.15 0.008 250 / 0.98); border-bottom: 1px solid var(--line);
}
.nav.is-open a { border-bottom: 1px solid oklch(0.3 0.014 242 / 0.6); font-size: 19px; min-height: 52px; }
.burger { flex: none; width: 44px; height: 44px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--line); border-radius: var(--r-2); cursor: pointer; padding: 0; }
.burger span { display: block; width: 18px; height: 2px; background-color: var(--bone); }
@media (min-width: 390px) { .header__inner { gap: 12px; } .logo { font-size: 28px; } }
@media (min-width: 1024px) {
  .header__inner { min-height: 76px; gap: 32px; }
  .logo { margin-right: 0; font-size: 30px; }
  .nav, .nav.is-open { display: flex; flex-direction: row; position: static; padding: 0; background: none; border: 0; gap: 28px; margin-right: auto; }
  .nav.is-open a { border: 0; font-size: inherit; min-height: 44px; }
  .burger { display: none; }
}
@media (min-width: 1440px) { .nav, .nav.is-open { gap: 36px; } }

/* ============ ПЕРВЫЙ ЭКРАН ============ */
.hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid oklch(0.3 0.014 242 / 0.6); }
.hero__bg {
  position: absolute; inset: 0; z-index: -1; border: 0; border-radius: 0;
  background-color: var(--basalt);
  background-image:
    linear-gradient(180deg, oklch(0.13 0.01 250 / 0.2) 0%, oklch(0.13 0.01 250 / 0.75) 100%),
    repeating-linear-gradient(135deg, oklch(1 0 0 / 0.014) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, oklch(0.15 0.012 250) 0%, oklch(0.19 0.02 240) 52%, oklch(0.27 0.03 236) 60%, oklch(0.2 0.022 240) 70%, oklch(0.14 0.01 250) 100%);
}
.hero__bg .ph__label { position: absolute; right: 0; bottom: 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); padding-block: var(--sp-7) var(--sp-8); align-items: center; }
.hero__text { display: grid; gap: var(--sp-5); align-content: start; }
.hero__sub { max-width: 30em; }
.ask { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: end; max-width: 40em; }
@media (min-width: 768px) {
  .ask { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-block: var(--sp-9); min-height: 620px; }
}
@media (min-width: 1920px) { .hero__grid { min-height: 760px; } }

/* ============ РУНА ДНЯ ============ */
.daily { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
.daily__stone { display: flex; justify-content: flex-start; }
.daily__body { display: grid; gap: var(--sp-5); }
.daily__name { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.daily__name small { font-family: var(--f-text); font-size: var(--fs-small); color: var(--muted); letter-spacing: 0.08em; }
@media (min-width: 768px) { .daily { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-7); } }
@media (min-width: 1024px) { .daily { gap: var(--sp-8); } }

/* трёхстишие */
.tercet { font-size: var(--fs-lead); line-height: 1.5; color: var(--parchment); font-style: italic; display: block; max-width: 30em; }
.tercet::after { content: ""; display: block; clear: both; }
.tercet .initial { font-style: normal; }
.tercet__line { display: block; }
/* двустишие-совет */
.advice { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-2); background-color: oklch(0.2 0.012 245 / 0.7); background-image: var(--tx-wood); max-width: 40em; }
.advice__label { font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.advice__text { font-family: var(--f-display); font-size: calc(var(--fs-lead) + 1px); line-height: 1.35; color: var(--bone); display: grid; }

/* ============ РАСКЛАДЫ ============ */
.grid { display: grid; gap: var(--sp-4); }
.grid--spreads { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 600px) { .grid--spreads { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--spreads > :last-child:nth-child(2n + 1) { grid-column: span 2; } }
@media (min-width: 1024px) {
  .grid { gap: var(--sp-5); }
  .grid--spreads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--spreads > :last-child:nth-child(2n + 1) { grid-column: auto; }
  .grid--spreads > :last-child:nth-child(3n + 1) { grid-column: span 3; }
  .grid--spreads > :last-child:nth-child(3n + 2) { grid-column: span 2; }
}

.spread {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4) var(--sp-5); align-items: center;
  padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-3);
  background-color: var(--graphite); background-image: var(--tx-grain), linear-gradient(160deg, oklch(0.27 0.013 244), oklch(0.22 0.012 246));
  box-shadow: var(--sh-1); color: var(--bone); text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
.spread:hover { color: var(--bone); border-color: var(--ochre); }
.spread__body { display: grid; gap: var(--sp-2); min-width: 0; }
.spread__title { font-size: var(--fs-h3); }
.spread__line { color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
.spread__count { font-size: var(--fs-small); color: var(--ochre-hi); letter-spacing: 0.06em; }
.layout { display: grid; grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(3, 30px); gap: 6px; padding: 10px; border-radius: var(--r-2); background-color: oklch(0.15 0.01 250 / 0.7); box-shadow: var(--sh-cut); }
.layout .stone { width: 100%; box-shadow: inset 0 1px 1px oklch(1 0 0 / 0.1), inset 0 -3px 5px oklch(0 0 0 / 0.45), 0 3px 5px oklch(0 0 0 / 0.5); }
.layout .stone--key { background-image: radial-gradient(120% 90% at 30% 18%, oklch(0.56 0.12 38), oklch(0.42 0.11 32) 60%, oklch(0.3 0.08 30)); }
.r1 { grid-row: 1; } .r2 { grid-row: 2; } .r3 { grid-row: 3; }
.c1 { grid-column: 1; } .c2 { grid-column: 2; } .c3 { grid-column: 3; }
@media (min-width: 1024px) {
  .spread { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .layout { justify-self: start; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 40px); gap: 8px; padding: 14px; }
}

/* ============ 24 РУНЫ ============ */
.atts { display: grid; gap: var(--sp-6); }
.att { display: grid; gap: var(--sp-4); }
.att__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid oklch(0.36 0.016 240 / 0.6); padding-bottom: var(--sp-2); }
.att__head h3 { font-size: 22px; }
.runes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-3); }
@media (min-width: 768px) { .runes { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); } }
.rune-tile { display: grid; justify-items: center; gap: var(--sp-2); color: var(--parchment); text-decoration: none; min-width: 0; padding-block: 4px; }
.rune-tile:hover { color: var(--ochre-hi); }
.rune-tile:hover .stone { box-shadow: inset 0 2px 1px oklch(1 0 0 / 0.1), inset 0 -8px 14px oklch(0 0 0 / 0.45), 0 0 0 1px var(--ochre), 0 10px 20px oklch(0 0 0 / 0.45); }
.rune-tile:nth-child(3n + 2) .stone { border-radius: 52% 48% 56% 44% / 44% 38% 62% 56%; }
.rune-tile:nth-child(3n) .stone { border-radius: 42% 58% 50% 50% / 36% 46% 54% 64%; }
.rune-tile__name { font-size: var(--fs-small); text-align: center; line-height: 1.2; overflow-wrap: anywhere; }

/* ============ ПОЭМЫ ============ */
.poems { display: grid; gap: var(--sp-5); }
.poem {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-3);
  background-color: oklch(0.19 0.012 246); background-image: var(--tx-wood), var(--tx-grain);
}
.poem__meta { display: grid; gap: var(--sp-2); align-content: start; }
.poem__meta h3 { font-size: var(--fs-h3); }
@media (min-width: 768px) {
  .poem { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--sp-6); }
  .poem__meta { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .poem { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 5fr); }
  .poem__meta { grid-column: auto; }
}

/* строфа: оригинал + перевод */
.stanza { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4) var(--sp-6); }
.stanza--pair { grid-column: 1 / -1; }
@media (min-width: 768px) { .stanza--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .poem .stanza--pair { grid-column: span 2; } }
.stanza__col { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; }
.stanza__lang { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--frost); }
.stanza__text { display: grid; line-height: 1.5; }
.stanza__text--orig { font-family: var(--f-text); font-style: italic; color: var(--parchment); }
.stanza__text--tr { color: var(--bone); }
.stanza__line { display: block; }
.stanza__col--tr { border-top: 1px solid oklch(0.36 0.016 240 / 0.6); padding-top: var(--sp-4); }
@media (min-width: 768px) { .stanza__col--tr { border-top: 0; padding-top: 0; border-left: 1px solid oklch(0.36 0.016 240 / 0.6); padding-left: var(--sp-6); } }

/* ============ КНИГИ ============ */
.grid--books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
@media (min-width: 1024px) { .grid--books { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); } }
.book { display: grid; gap: var(--sp-3); color: var(--bone); text-decoration: none; align-content: start; min-width: 0; }
.book:hover { color: var(--ochre-hi); }
.book__cover { aspect-ratio: 2 / 3; box-shadow: var(--sh-2); }
.book__title { font-family: var(--f-display); font-size: 20px; line-height: 1.2; }
.book__author { font-size: var(--fs-small); color: var(--muted); }

/* ============ ПЛАШКИ ============ */
.notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: start; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--fjord); border-radius: var(--r-2); background-color: oklch(0.27 0.03 238 / 0.45); color: var(--frost); font-size: var(--fs-small); line-height: 1.5; }
.notice__mark { width: 10px; height: 10px; margin-top: 7px; background-color: var(--frost); transform: rotate(45deg); }
.notice b { color: var(--bone); font-weight: 600; }

.cookie {
  position: fixed; z-index: 40; left: 8px; right: 8px; bottom: 8px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3);
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-3);
  background-color: oklch(0.22 0.012 245 / 0.98); background-image: var(--tx-grain); box-shadow: var(--sh-2);
  font-size: var(--fs-small); line-height: 1.45; color: var(--parchment);
}
.cookie--static { position: relative; left: auto; right: auto; bottom: auto; z-index: auto; }
.cookie__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.cookie__actions .btn { min-height: 44px; padding: 0 12px; font-size: 16px; }
@media (min-width: 768px) {
  .cookie { left: auto; right: 24px; bottom: 24px; width: 560px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
  .cookie--static { right: auto; bottom: auto; width: auto; max-width: 560px; }
  .cookie__actions .btn { padding: 0 16px; }
}

/* аккордеон вопросов */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); min-height: 56px; padding-block: var(--sp-3); font-family: var(--f-display); font-size: 21px; line-height: 1.25; color: var(--bone); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-2); font-family: var(--f-text); color: var(--ochre-hi); }
.faq__item[open] .faq__q::after { content: "−"; }
.faq__q:hover { color: var(--ochre-hi); }
.faq__a { padding-bottom: var(--sp-5); color: var(--parchment); max-width: 38em; }

/* ============ ПОДВАЛ ============ */
.footer { border-top: 1px solid var(--line); background-color: oklch(0.13 0.008 250); background-image: var(--tx-grain); padding-block: var(--sp-7) var(--sp-6); }
.footer__grid { display: grid; gap: var(--sp-5); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.footer__disclaimer { color: var(--parchment); max-width: 36em; }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.footer__links a { color: var(--parchment); font-size: var(--fs-small); display: inline-flex; align-items: center; min-height: 44px; }
.footer__links a:hover { color: var(--ochre-hi); }
.footer__seller { font-size: var(--fs-small); color: var(--muted); padding: var(--sp-2) var(--sp-3); border: 1px dashed oklch(0.45 0.02 240); border-radius: var(--r-1); justify-self: start; max-width: 100%; }
.footer__copy { font-size: var(--fs-small); color: var(--muted); border-top: 1px solid oklch(0.3 0.014 242 / 0.7); padding-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); justify-content: space-between; }
@media (min-width: 1024px) { .footer__top { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-8); } }
.page--cookie .footer { padding-bottom: 200px; }
@media (min-width: 768px) { .page--cookie .footer { padding-bottom: 140px; } }

/* ============ СТРАНИЦА ДИЗАЙН-СИСТЕМЫ ============ */
.ds-hero { padding-block: var(--sp-7); border-bottom: 1px solid var(--line); display: grid; gap: var(--sp-4); }
.ds-block { padding-block: var(--sp-7); border-bottom: 1px solid oklch(0.3 0.014 242 / 0.7); display: grid; gap: var(--sp-5); }
.ds-block__head { display: grid; gap: var(--sp-2); }
.ds-label { font-family: var(--f-mono); font-size: 12px; color: var(--frost); letter-spacing: 0.02em; overflow-wrap: anywhere; }
.ds-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-end; }
.ds-specimen { display: grid; gap: var(--sp-2); justify-items: start; min-width: 0; }
.ds-panel { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-3); background-color: oklch(0.19 0.01 248); min-width: 0; }
.ds-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
@media (min-width: 1024px) { .ds-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (min-width: 768px) { .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .swatches { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.swatch { display: grid; gap: var(--sp-2); min-width: 0; }
.swatch__chip { height: 72px; border-radius: var(--r-2); border: 1px solid oklch(1 0 0 / 0.1); }
.swatch__name { font-size: var(--fs-small); color: var(--bone); }
.sw--basalt { background-color: var(--basalt); } .sw--basalt-2 { background-color: var(--basalt-2); }
.sw--graphite { background-color: var(--graphite); } .sw--graphite-2 { background-color: var(--graphite-2); }
.sw--line { background-color: var(--line); }
.sw--fjord-deep { background-color: var(--fjord-deep); } .sw--fjord { background-color: var(--fjord); } .sw--frost { background-color: var(--frost); }
.sw--bone { background-color: var(--bone); } .sw--parchment { background-color: var(--parchment); } .sw--muted { background-color: var(--muted); }
.sw--ochre-deep { background-color: var(--ochre-deep); } .sw--ochre { background-color: var(--ochre); } .sw--ochre-hi { background-color: var(--ochre-hi); }
.sw--gold { background-color: var(--gold); } .sw--ember { background-color: var(--ember); }

.type-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding-block: var(--sp-4); border-bottom: 1px solid oklch(0.3 0.014 242 / 0.6); }
@media (min-width: 768px) { .type-row { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-5); align-items: baseline; } }
.t-h1 { font-family: var(--f-display); font-size: var(--fs-h1); line-height: 1.05; }
.t-h2 { font-family: var(--f-display); font-size: var(--fs-h2); line-height: 1.1; }
.t-h3 { font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1.2; }

.spacing { display: grid; gap: var(--sp-2); }
.spacing__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
.spacing__bar { height: 12px; background-color: var(--ochre); border-radius: 1px; }
.sp-bar-1 { width: 4px; } .sp-bar-2 { width: 8px; } .sp-bar-3 { width: 12px; } .sp-bar-4 { width: 16px; } .sp-bar-5 { width: 24px; }
.sp-bar-6 { width: 32px; } .sp-bar-7 { width: 48px; } .sp-bar-8 { width: 64px; } .sp-bar-9 { width: 96px; }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { height: 96px; border: 1px solid var(--line); background-color: var(--graphite); }
.tile--r1 { border-radius: var(--r-1); } .tile--r2 { border-radius: var(--r-2); } .tile--r3 { border-radius: var(--r-3); } .tile--stone { border-radius: var(--r-stone); }
.tile--sh1 { box-shadow: var(--sh-1); border-radius: var(--r-3); } .tile--sh2 { box-shadow: var(--sh-2); border-radius: var(--r-3); } .tile--cut { box-shadow: var(--sh-cut); border-radius: var(--r-3); background-color: oklch(0.15 0.01 250); }
.tile--tx-grain { background-image: var(--tx-grain); border-radius: var(--r-2); }
.tile--tx-stone { background-image: var(--tx-mottle), var(--tx-grain); background-size: 180px, 120px; border-radius: var(--r-2); }
.tile--tx-wood { background-image: var(--tx-wood), var(--tx-grain); background-color: oklch(0.22 0.014 60); border-radius: var(--r-2); }
.tile--tx-frost { background-image: var(--tx-grain), linear-gradient(180deg, oklch(0.42 0.035 238), oklch(0.27 0.03 238)); border-radius: var(--r-2); }

.alphabet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-2); }
@media (min-width: 768px) { .alphabet { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.glyph { display: grid; justify-items: center; gap: 6px; padding: var(--sp-3) 4px; border: 1px solid oklch(0.3 0.014 242 / 0.7); border-radius: var(--r-2); min-width: 0; }
.glyph__svg { width: 28px; height: 46px; }
.glyph__name { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.rules { display: grid; gap: var(--sp-2); }
.rules li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--sp-3); color: var(--parchment); }
.rules li::before { content: ""; width: 7px; height: 7px; margin-top: 10px; background-color: var(--ochre-hi); transform: rotate(45deg); }
.ornament-ph { min-height: 160px; }
.ds-header-demo { border: 1px solid var(--line); border-radius: var(--r-3); overflow: visible; }
.ds-header-demo .header { border-radius: var(--r-3); }
.ds-footer-demo { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }


/* ============ СТРАНИЦА РУНЫ ============ */
.nav a[aria-current="page"] { color: var(--ochre-hi); }
.crumbs { padding-top: var(--sp-5); }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); font-size: var(--fs-small); color: var(--muted); }
.crumbs__item { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; }
.crumbs__item + .crumbs__item::before { content: "›"; color: var(--line); font-size: 18px; }
.crumbs a { color: var(--parchment); }
.crumbs [aria-current="page"] { color: var(--bone); }

.rune-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding-block: var(--sp-5) var(--sp-8); align-items: center; }
.rune-hero__stone .monolith { margin-inline: auto; }
.rune-hero__text { display: grid; gap: var(--sp-5); min-width: 0; }
.rune-hero__names { display: grid; gap: var(--sp-2); }
.rune-hero__alt { font-size: var(--fs-small); color: var(--muted); letter-spacing: 0.04em; }
.rune-hero .tercet { font-size: calc(var(--fs-lead) + 3px); line-height: 1.5; }
.rune-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (min-width: 1024px) {
  .rune-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); padding-block: var(--sp-6) var(--sp-9); }
  .rune-hero .tercet { font-size: 28px; }
}
@media (min-width: 1920px) { .rune-hero .tercet { font-size: 32px; } }

/* полоса фактов — во всю колонку */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-block: 1px solid var(--line); }
.facts__cell { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; min-width: 0; }
.facts__cell + .facts__cell { border-left: 1px solid oklch(0.36 0.016 240 / 0.6); padding-left: var(--sp-3); }
.facts__k { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--frost); }
.facts__v { font-family: var(--f-display); font-size: 20px; line-height: 1.2; color: var(--bone); overflow-wrap: anywhere; }
@media (min-width: 768px) { .facts__cell { padding-block: var(--sp-4); } .facts__cell + .facts__cell { padding-left: var(--sp-5); } .facts__v { font-size: 24px; } }

/* блоки статьи */
.article { display: grid; gap: 0; }
.block { display: grid; gap: var(--sp-5); padding-block: var(--sp-7); border-top: 1px solid oklch(0.3 0.014 242 / 0.7); }
.block__head { display: grid; gap: var(--sp-2); }
.block__body { display: grid; gap: var(--sp-4); }
@media (min-width: 1024px) {
  .block { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-7); padding-block: var(--sp-8); }
  .block--full { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

/* строфы на странице руны */
.stanzas { display: grid; gap: var(--sp-4); width: 100%; }
.stanza-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3) var(--sp-6); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-3); background-color: oklch(0.19 0.012 246); background-image: var(--tx-wood), var(--tx-grain); }
.stanza-row__label { font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1.2; color: var(--bone); }
@media (min-width: 1024px) { .stanza-row { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); padding: var(--sp-6); } }

/* перевёрнутая руна */
.reversal { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4) var(--sp-5); align-items: start; }
.reversal .stone--m { width: 72px; }
.reversal--turned .stone__rune { transform: rotate(180deg); }
.reversal__text { display: grid; gap: var(--sp-3); }
.reversal__state { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--frost); }
.reversal--symmetric .reversal__text p { color: var(--parchment); font-style: italic; }
@media (min-width: 768px) { .reversal .stone--m { width: 96px; } }

/* две колонки */
.pair { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--sp-6); }
.pair__col { display: grid; gap: var(--sp-3); align-content: start; }
.pair__col h3 { color: var(--ochre-hi); }
@media (min-width: 768px) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); } }

/* рамка из ленты-змея */
.serpent { position: relative; padding: 18px; border: 3px solid var(--ochre-deep); border-radius: 28px; background-color: oklch(0.18 0.012 245); background-image: var(--tx-grain); box-shadow: var(--sh-cut), var(--sh-2); }
.serpent__inner { border: 3px solid var(--ochre-deep); border-radius: 14px; padding: var(--sp-6) var(--sp-5); background-color: var(--basalt-2); background-image: var(--tx-mottle), var(--tx-grain); background-size: 260px, 120px; display: grid; gap: var(--sp-4); justify-items: center; text-align: center; }
.serpent__inscr { position: absolute; left: 50%; top: 0; transform: translate(-50%, 1px); max-width: calc(100% - 96px); padding: 0 10px; font-family: var(--f-display); font-size: 11px; line-height: 15px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ochre-hi); background-color: oklch(0.18 0.012 245); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serpent__head { position: absolute; left: 22px; bottom: -9px; width: 38px; height: 22px; background-color: var(--ochre-deep); border-radius: 40% 60% 60% 40% / 50%; border: 2px solid oklch(0.18 0.012 245); }
.serpent__head::after { content: ""; position: absolute; right: 9px; top: 6px; width: 4px; height: 4px; border-radius: 50%; background-color: var(--cut); }
.serpent__tail { position: absolute; right: 26px; top: -6px; width: 30px; height: 12px; background-color: var(--ochre-deep); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.serpent .advice__label { color: var(--gold); }
.serpent__text { font-family: var(--f-display); font-size: 24px; line-height: 1.35; color: var(--bone); display: grid; gap: 4px; text-wrap: balance; }
@media (min-width: 768px) { .serpent { padding: 22px; } .serpent__inner { padding: var(--sp-7) var(--sp-6); } .serpent__text { font-size: 30px; } }
@media (min-width: 1440px) { .serpent__text { font-size: 36px; } }

/* навигация по футарку */
.runenav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.runenav > :last-child:nth-child(2n + 1) { grid-column: span 2; }
.runenav__link { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-3); background-color: var(--graphite); background-image: var(--tx-grain); color: var(--bone); text-decoration: none; min-width: 0; }
.runenav__link:hover { color: var(--bone); border-color: var(--ochre); }
.runenav__link--next { flex-direction: row-reverse; text-align: right; }
.runenav__meta { display: grid; gap: 2px; min-width: 0; }
.runenav__dir { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--frost); }
.runenav__name { font-family: var(--f-display); font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.runenav__all { display: flex; align-items: center; justify-content: center; min-height: 56px; border: 1px dashed var(--line); border-radius: var(--r-3); }
@media (min-width: 768px) {
  .runenav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .runenav > :last-child:nth-child(2n + 1) { grid-column: auto; }
  .runenav__link { grid-row: 1; grid-column: 1; }
  .runenav__link--next { grid-column: 3; }
  .runenav__all { grid-column: 2; grid-row: 1; }
}

/* призыв */
.cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: center; padding: var(--sp-6) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-3); background-color: var(--fjord-deep); background-image: var(--tx-grain), linear-gradient(160deg, oklch(0.3 0.03 238), oklch(0.2 0.018 244)); box-shadow: var(--sh-2); }
.cta__text { display: grid; gap: var(--sp-3); }
.cta__text p { color: var(--frost); }
@media (min-width: 768px) { .cta { grid-template-columns: minmax(0, 1fr) auto; padding: var(--sp-7); gap: var(--sp-6); } }
.page-notice { padding-block: var(--sp-6) var(--sp-7); }


/* ============ ЭКРАН РАСКЛАДА ============ */
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 0; border-bottom: 1px dashed var(--line); }
.demo-bar__label { font-family: var(--f-mono); font-size: 12px; color: var(--frost); margin-right: var(--sp-2); }
.chip { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--parchment); font-size: 14px; cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--frost); }
.chip.is-active { background-color: var(--ochre); border-color: var(--ochre); color: var(--bone); }

.reading-head { display: grid; gap: var(--sp-2); padding-block: var(--sp-6) var(--sp-5); }
.reading-head__q { color: var(--parchment); font-style: italic; font-size: var(--fs-lead); overflow-wrap: anywhere; }

.pick { display: grid; gap: var(--sp-6); padding-bottom: var(--sp-8); }
.spread--pick { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.spread--pick.is-active { border-color: var(--ochre-hi); box-shadow: 0 0 0 1px var(--ochre-hi), var(--sh-2); }
.spread--pick.is-active .spread__title { color: var(--ochre-hi); }
.pick__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: end; }
.pick__go { display: grid; gap: var(--sp-2); justify-items: start; }
.pick__free { font-size: var(--fs-small); color: var(--muted); }
@media (min-width: 768px) { .pick__form { grid-template-columns: minmax(0, 1fr) auto; } .pick__go { justify-items: end; } }
.pick__go-note { grid-column: 1 / -1; }

/* стол */
.table {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-3); border-radius: var(--r-3); overflow: hidden;
  border: 1px solid oklch(0.32 0.03 50 / 0.8);
  background-color: oklch(0.2 0.018 55);
  background-image:
    radial-gradient(ellipse 70% 90% at -8% 35%, oklch(0.66 0.15 48 / 0.32), transparent 62%),
    linear-gradient(90deg, transparent 35%, oklch(0.17 0.03 240 / 0.7) 100%),
    var(--tx-wood), var(--tx-grain);
  box-shadow: inset 0 0 60px oklch(0 0 0 / 0.55), var(--sh-2);
}
@media (min-width: 768px) { .table { padding: var(--sp-6); } }
@media (min-width: 1024px) {
  .table { grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-7); padding: var(--sp-7); min-height: 520px; align-items: center; }
  .table--nobag { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1440px) { .table { grid-template-columns: 280px minmax(0, 1fr); } }

.bagzone { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
.bag { width: 100%; aspect-ratio: 4 / 5; border-radius: 42% 42% 30% 30% / 30% 30% 22% 22%; cursor: pointer; background-color: oklch(0.3 0.04 55); padding: 0; box-shadow: var(--sh-2); }
.bag .ph__label { font-size: 10px; margin: 6px; }
.bag:hover { border-color: var(--ochre-hi); }
.bagzone__ctl { display: grid; gap: var(--sp-2); justify-items: start; }
.bagzone__count { font-size: var(--fs-small); color: var(--parchment); }
@media (min-width: 390px) { .bagzone { grid-template-columns: 112px minmax(0, 1fr); } }
@media (min-width: 1024px) { .bagzone { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .bag { width: 200px; } .bag .ph__label { font-size: 11px; margin: 10px; } .bagzone__ctl { justify-items: center; } }

/* доска расклада */
.board { position: relative; display: grid; gap: var(--sp-4) var(--sp-2); justify-content: center; align-items: start; padding-block: var(--sp-2); }
.board--one { grid-template-columns: repeat(1, minmax(0, 160px)); }
.board--norns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.board--paths, .board--cross { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.board--nine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); }
.board--nine::before { content: ""; position: absolute; left: 50%; top: 24px; bottom: 24px; width: 2px; transform: translateX(-50%); background-image: linear-gradient(180deg, transparent, oklch(0.71 0.12 42 / 0.35) 12%, oklch(0.71 0.12 42 / 0.35) 88%, transparent); }
.r4 { grid-row: 4; } .r5 { grid-row: 5; }
@media (min-width: 768px) { .board { gap: var(--sp-5) var(--sp-5); } .board--nine { gap: var(--sp-4) var(--sp-6); } }
@media (min-width: 1024px) { .board--norns { gap: var(--sp-6); } }

.slot { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 6px; text-align: center; min-width: 0; }
.slot__well { width: 76px; aspect-ratio: 5 / 6; display: grid; place-items: center; border-radius: var(--r-stone); border: 1px dashed oklch(0.75 0.016 80 / 0.4); background-color: oklch(0.12 0.01 250 / 0.35); box-shadow: var(--sh-cut); }
.slot__name { font-family: var(--f-display); font-size: 16px; line-height: 1.15; color: var(--bone); max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.slot__cap, .slot__rev { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.slot__well { max-width: 100%; }
@media (min-width: 390px) { .slot__name { font-size: 18px; } }
.slot__cap { font-size: 13px; line-height: 1.3; color: var(--parchment); max-width: 16em; }
.slot__rev { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ochre-hi); min-height: 1.3em; }
.board--nine .slot__well { width: 52px; }
.board--nine .slot__name { font-size: 13px; overflow-wrap: anywhere; padding-inline: 4px; background-color: oklch(0.2 0.018 55 / 0.85); border-radius: var(--r-1); }
.board--nine .slot__cap { font-size: 12px; }
@media (min-width: 390px) { .board--nine .slot__well { width: 58px; } .board--nine .slot__name { font-size: 14px; } }
@media (min-width: 768px) { .slot__well { width: 96px; } .slot__name { font-size: 20px; } .slot__cap { font-size: 14px; } .board--nine .slot__well { width: 68px; } .board--nine .slot__name { font-size: 17px; } .board--nine .slot__cap { font-size: 13px; } }
@media (min-width: 1024px) { .board--norns .slot__well, .board--one .slot__well { width: 120px; } }
@media (min-width: 1440px) { .board--norns .slot__well, .board--one .slot__well { width: 136px; } .board--nine .slot__well { width: 76px; } }

/* плашка руны: лицо/оборот */
.piece { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; border-radius: var(--r-stone); }
.piece:disabled { cursor: default; }
.piece__inner { position: relative; display: block; width: 100%; aspect-ratio: 5 / 6; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,.7,.3,1); }
.piece.is-open .piece__inner { transform: rotateY(180deg); }
.piece__face { position: absolute; inset: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.piece__back { background-image: radial-gradient(120% 90% at 30% 18%, oklch(0.38 0.014 238), oklch(0.25 0.013 244) 55%, oklch(0.18 0.01 250) 100%); }
.piece__front { transform: rotateY(180deg); }
.piece--reversed .piece__front .stone__rune { transform: rotate(180deg); }
.piece--in { animation: piece-in .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes piece-in { from { opacity: 0; transform: translate(-48px, -36px) rotate(-14deg) scale(.82); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.piece:not(:disabled):hover .piece__back { box-shadow: inset 0 2px 1px oklch(1 0 0 / 0.1), inset 0 -8px 14px oklch(0 0 0 / 0.45), 0 0 0 1px var(--ochre-hi), 0 10px 20px oklch(0 0 0 / 0.45); }

.table__hint { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: center; padding-top: var(--sp-4); }
.table__hint p { color: var(--parchment); font-size: var(--fs-small); }
.board-wrap { display: grid; gap: var(--sp-3); min-width: 0; }

/* толкование */
.interp { display: grid; gap: var(--sp-5); padding-block: var(--sp-7) var(--sp-8); }
.interp__list { display: grid; gap: var(--sp-5); }
.interp__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); padding-bottom: var(--sp-5); border-bottom: 1px solid oklch(0.3 0.014 242 / 0.7); }
.interp__item .stone--s { grid-row: span 2; }
.interp__item--reversed .stone__rune { transform: rotate(180deg); }
.interp__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.interp__name { font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1.2; }
.interp__pos { font-size: var(--fs-small); color: var(--frost); letter-spacing: 0.04em; }
.interp__text { max-width: 38em; min-height: 1.55em; color: var(--bone); }
.interp__summary { display: grid; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--ochre-deep); border-radius: var(--r-3); background-color: oklch(0.2 0.014 245); background-image: var(--tx-wood), var(--tx-grain); }
.interp__summary .interp__text { font-size: var(--fs-lead); color: var(--parchment); }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background-color: var(--ochre-hi); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.interp__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.toast { font-size: var(--fs-small); color: var(--frost); }

/* кризисная плашка */
.crisis { display: grid; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5); border: 1px solid var(--fjord); border-radius: var(--r-3); background-color: var(--fjord-deep); background-image: var(--tx-grain); max-width: 46em; }
.crisis h2 { font-size: calc(var(--fs-h2) * .8); }
.crisis p { color: var(--frost); }
.crisis__phones { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--sp-3); }
.crisis__phone { display: grid; gap: 2px; padding: var(--sp-4); border: 1px solid oklch(0.84 0.022 228 / 0.35); border-radius: var(--r-2); color: var(--bone); text-decoration: none; background-color: oklch(0.2 0.02 240 / 0.6); }
.crisis__phone:hover { color: var(--bone); border-color: var(--frost); }
.crisis__num { font-family: var(--f-display); font-size: 28px; line-height: 1.1; letter-spacing: 0.02em; }
.crisis__what { font-size: var(--fs-small); color: var(--frost); }
@media (min-width: 600px) { .crisis__phones { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crisis { padding: var(--sp-7); } }

/* окно доступа */
.modal-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 12px; background-color: oklch(0.1 0.01 250 / 0.72); backdrop-filter: blur(3px); }
.modal { width: 100%; max-width: 720px; max-height: calc(100dvh - 24px); overflow-y: auto; display: grid; gap: var(--sp-5); padding: var(--sp-5) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-3); background-color: var(--graphite); background-image: var(--tx-grain), linear-gradient(170deg, oklch(0.27 0.013 244), oklch(0.21 0.012 246)); box-shadow: 0 30px 80px oklch(0 0 0 / 0.7); position: relative; }
.modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.modal__close { flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-2); background: transparent; color: var(--bone); font-size: 22px; line-height: 1; cursor: pointer; }
.modal__close:hover { border-color: var(--frost); }
.plans { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 600px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } .modal { padding: var(--sp-6); } }
.plan { display: grid; gap: 4px; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-2); background-color: oklch(0.17 0.01 248 / 0.8); cursor: pointer; text-align: left; font: inherit; color: var(--bone); width: 100%; }
.plan.is-active { border-color: var(--ochre-hi); box-shadow: 0 0 0 1px var(--ochre-hi); }
.plan__term { font-family: var(--f-display); font-size: 24px; line-height: 1.1; }
.plan__price { justify-self: start; white-space: nowrap; font-size: var(--fs-small); color: var(--muted); padding: 2px 8px; border: 1px dashed oklch(0.45 0.02 240); border-radius: var(--r-1); }
.plan__note { font-size: 14px; color: var(--parchment); }
.modal__terms { font-size: var(--fs-small); color: var(--frost); }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-3); align-items: start; font-size: var(--fs-small); color: var(--parchment); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ochre); cursor: pointer; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.btn:disabled:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .piece--in { animation: none; }
  .piece__inner { transition: none; }
  .caret { animation: none; }
}

/* защита от распирания длинными словами на узких экранах */
.ds-block, .ds-hero, .article, .block, .block__body, .footer__grid, .daily__body, .hero__text, .rune-hero__text { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .block { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .block--full { grid-template-columns: minmax(0, 1fr); } }
.ds-cols > *, .ds-panel, .spread__body, .reversal__text, .interp__title, .poem__meta, .stanza-row > * { min-width: 0; }
.spread__title, .reversal__text p, .interp__name, .runenav__name, h1, h2, h3 { overflow-wrap: anywhere; hyphens: auto; }
.ds-header-demo .wrap, .ds-footer-demo .wrap { padding-inline: 8px; }
@media (max-width: 389px) {
  .spread { padding: var(--sp-4); gap: var(--sp-3); }
  .reversal { grid-template-columns: minmax(0, 1fr); }
}