/* Baş Kurultay — site styles
   Layout concept: a yurt seen from outside. Undyed felt walls as the page ground, traditional
   felt and kilim motifs as borders and friezes, the painted red door as the only strong colour.

   Motifs (all single-colour SVG masks, so they take the theme tokens):
     koçboynuzu  ram's horn   — hooked frieze on section tops, band and footer
     göz         eye          — diamond lattice behind the alternate sections
     su yolu     running water— zigzag strip on cards
     yıldız      star         — eight-pointed bullet on the tools list
     şanyrak     yurt crown   — large mark behind the hero */

:root {
  /* Color — yurt exterior by day */
  --bg: #e6e1d6;          /* undyed wool felt, greyish white */
  --bg-alt: #d9d2c3;      /* weathered canvas, slightly darker panel */
  --surface: #efebe2;     /* fresh felt patch */
  --line: #b3a78f;        /* stitching, rope */
  --fg: #2a231c;          /* dark leather */
  --fg-muted: #6b6052;    /* worn leather */
  --door: #a4421f;        /* painted door red */
  --door-deep: #83331a;
  --wood: #a0703a;        /* lattice wood (kerege) */
  --rope: #4a3a2c;        /* dark horsehair rope */
  --on-door: #f6efe3;

  /* Type: Times New Roman throughout; Noto Sans Old Turkic only for the Orkhon script */
  --font-display: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
  --font-body: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
  --font-mono: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
  --font-runic: "Noto Sans Old Turkic", "Segoe UI Historic", serif;

  /* Scale */
  --step--1: 0.92rem;
  --step-0: 1.125rem;
  --step-1: 1.3rem;
  --step-2: 1.65rem;
  --step-3: 2.2rem;
  --step-4: clamp(2.8rem, 2rem + 4vw, 5.4rem);

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --measure: 62ch;
  --wrap: 68rem;

  /* Felt grain: fractal noise, very low alpha (dark speckle on light felt) */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.13  0 0 0 0 0.10  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* Motif masks. Black = painted. */
  /* koçboynuzu: stem with two hooked horns, stepped like a kilim weave. Tile 48x24. */
  --m-horn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'><path d='M24 24V7M24 7H8v12h10v-6M24 7h16v12H30v-6' fill='none' stroke='%23000' stroke-width='3'/></svg>");
  /* göz: diamond with a square pupil. Tile 40x40, diamonds meet at their points to form a lattice. */
  --m-eye: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M20 1 39 20 20 39 1 20Z' fill='none' stroke='%23000' stroke-width='1.5'/><rect x='17' y='17' width='6' height='6' fill='%23000'/></svg>");
  /* su yolu: running water zigzag. Tile 16x8. */
  --m-water: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'><path d='M0 7 4 1l4 6 4-6 4 6' fill='none' stroke='%23000' stroke-width='2'/></svg>");
  /* yıldız: eight-pointed star from two squares. Tile 24x24. */
  --m-star: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><rect x='6' y='6' width='12' height='12' fill='none' stroke='%23000' stroke-width='2'/><rect x='6' y='6' width='12' height='12' fill='none' stroke='%23000' stroke-width='2' transform='rotate(45 12 12)'/></svg>");

  color-scheme: light;
}

/* Dark: the same yurt at night. Cool slate greys, no brown; the door stays red. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171b21;
    --bg-alt: #1d222a;
    --surface: #232934;
    --line: #3b434f;
    --fg: #e6e3db;
    --fg-muted: #a6a39b;
    --door: #c9552d;
    --door-deep: #a8431f;
    --wood: #c4904c;
    --rope: #c6c2b9;
    --on-door: #f8f1e6;
    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.86  0 0 0 0 0.90  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #171b21;
  --bg-alt: #1d222a;
  --surface: #232934;
  --line: #3b434f;
  --fg: #e6e3db;
  --fg-muted: #a6a39b;
  --door: #c9552d;
  --door-deep: #a8431f;
  --wood: #c4904c;
  --rope: #c6c2b9;
  --on-door: #f8f1e6;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.86  0 0 0 0 0.90  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--grain);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
  letter-spacing: 0.01em;
  color: var(--fg);
}
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { margin: 0; }
a { color: var(--door); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--door-deep); }
em { font-style: italic; }
code { font-family: var(--font-mono); }
svg { display: block; }
img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--door); outline-offset: 3px; border-radius: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter-l); top: -3rem;
  background: var(--door); color: var(--on-door); padding: 0.5rem 0.9rem;
  font-weight: 700; z-index: 100; transition: top 0.15s;
}
.skip:focus { top: 0.5rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--door);
}
.dot { color: var(--fg-muted); padding-inline: 0.25em; }

/* Old Turkic text runs right to left; the font handles direction. */
.runic { font-family: var(--font-runic); unicode-bidi: isolate; }

/* ---------- Motif helpers ---------- */
/* A frieze is a full-width strip painted in one colour through a repeating motif mask. */
.band::before, .band::after,
.section::before,
.foot::before {
  -webkit-mask-image: var(--m-horn);
  mask-image: var(--m-horn);
  -webkit-mask-size: 28px 14px;
  mask-size: 28px 14px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: center top;
  mask-position: center top;
}

/* ---------- Header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: color-mix(in srgb, var(--bg) 90%, transparent);
  background-image: var(--grain);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--fg);
  text-decoration: none;
}
.brand:hover { color: var(--door); }
.tamga { width: 2rem; height: 2rem; color: var(--door); flex: none; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}
.nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: 1rem;
}
.nav a { color: var(--fg); text-decoration: none; letter-spacing: 0.02em; }
.nav a:hover { color: var(--door); }
.nav-cta {
  border: 1px solid var(--rope);
  padding: 0.35rem 0.9rem;
  border-radius: 2px;
}
.nav-cta:hover { background: var(--door); border-color: var(--door); color: var(--on-door) !important; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--fg);
  width: 2.6rem; height: 2.6rem;
  border-radius: 2px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.nav-toggle-bar { display: block; width: 1.2rem; height: 2px; background: currentColor; transition: transform 0.2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding-block: 0.6rem 0.9rem;
    border-top: 1px solid var(--line);
  }
  .nav.is-open { display: flex; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-inner {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7.5rem) clamp(5rem, 10vw, 9rem);
  display: grid;
  gap: 1.4rem;
}
/* The studio name written in the Orkhon script, solid door red */
.hero-runic {
  font-size: clamp(2.6rem, 2rem + 4vw, 5.6rem);
  line-height: 1.05;
  color: var(--door);
  margin: 0;
  letter-spacing: 0.04em;
}
.hero-runic-caption {
  font-size: var(--step--1);
  color: var(--fg-muted);
  font-style: italic;
  margin-top: -0.8rem;
}
.hero-title {
  font-size: var(--step-4);
  letter-spacing: 0.04em;
  line-height: 0.98;
  color: var(--fg);
}
.hero-break { display: block; color: var(--door); }
.hero-lede {
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.3rem;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--door); color: var(--on-door); border-color: var(--door-deep); }
.btn-primary:hover { background: var(--door-deep); color: var(--on-door); }
.btn-ghost { color: var(--fg); border-color: var(--rope); }
.btn-ghost:hover { background: var(--rope); color: var(--surface); }

/* şanyrak: the yurt crown, large and faint behind the hero text */
.hero-crown {
  position: absolute;
  right: calc(var(--gutter-r) - 6vw);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(16rem, 44vw, 36rem);
  max-width: 100%;
  height: auto;
  color: var(--fg);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}
/* Lattice (kerege) showing through the lower felt */
.horizon {
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background-image:
    repeating-linear-gradient(60deg, transparent 0 22px, color-mix(in srgb, var(--wood) 22%, transparent) 22px 23px),
    repeating-linear-gradient(-60deg, transparent 0 22px, color-mix(in srgb, var(--wood) 22%, transparent) 22px 23px);
  mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  pointer-events: none;
}

/* ---------- Band ---------- */
.band {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-alt);
  background-image: var(--grain);
  padding-block: 14px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.band::before, .band::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  background: var(--door);
}
.band::before { top: 0; }
.band::after { bottom: 0; transform: scaleY(-1); }
.band-track {
  display: flex;
  gap: 2.4rem;
  width: max-content;
  padding-block: 0.8rem;
  animation: band-scroll 60s linear infinite;
}
.band-track span { white-space: nowrap; }
.band-track i { font-style: italic; text-transform: none; letter-spacing: 0.02em; color: var(--door); margin-left: 0.4em; font-family: var(--font-body); }
.band-glyph { font-family: var(--font-runic); color: var(--rope); font-size: 1.1rem; }
@keyframes band-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .band-track { animation: none; } }

/* ---------- Sections ---------- */
.section {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--line);
}
.section > .wrap { position: relative; z-index: 1; }
/* ram's horn frieze along the top edge of every section, in the stitch colour */
.section::before {
  content: "";
  position: absolute;
  top: 10px; left: 0; right: 0;
  height: 14px;
  background: var(--line);
}
.section-alt { background-color: var(--bg-alt); background-image: var(--grain); }
/* göz lattice behind the alternate sections */
.section-alt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fg);
  -webkit-mask-image: var(--m-eye);
  mask-image: var(--m-eye);
  -webkit-mask-size: 40px 40px;
  mask-size: 40px 40px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  opacity: 0.055;
  pointer-events: none;
}
.section-head {
  display: grid;
  gap: 0.8rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-lede { max-width: var(--measure); color: var(--fg-muted); font-size: var(--step-1); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 760px) { .split { grid-template-columns: minmax(0, 1fr); } }

.prose { display: grid; gap: 1rem; max-width: var(--measure); }
.prose p { color: var(--fg); }

/* pillars */
.pillars {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0;
  border-top: 2px solid var(--rope);
}
.pillars li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  row-gap: 0.25rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.pillar-glyph {
  grid-row: 1 / span 2;
  font-family: var(--font-runic);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--door);
  padding-top: 0.15rem;
}
.pillars h3 { font-size: var(--step-1); color: var(--fg); }
.pillars p { color: var(--fg-muted); font-size: var(--step--1); }

/* cards: felt patches with visible stitching and a running-water strip */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.2rem;
}
.card {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 1.5rem 1.4rem 1.3rem;
  background-color: var(--surface);
  background-image: var(--grain);
  border: 1px solid var(--line);
  outline: 1px dashed var(--line);
  outline-offset: -7px;
  border-radius: 2px;
  min-width: 0;
  position: relative;
  transition: border-color 0.2s, outline-color 0.2s;
}
.card:hover { border-color: var(--rope); outline-color: var(--wood); }
.card::before {
  content: "";
  height: 8px;
  margin-bottom: 0.3rem;
  background: var(--door);
  -webkit-mask-image: var(--m-water);
  mask-image: var(--m-water);
  -webkit-mask-size: 16px 8px;
  mask-size: 16px 8px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
.card-mark { width: 2.4rem; height: 2.4rem; color: var(--door); }
.card-mark svg { width: 100%; height: 100%; }
.card-status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted);
}
.status-pip { width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; }
.status-active { background: var(--door); }
.status-soon { background: var(--wood); }
.card h3 { font-size: var(--step-2); color: var(--fg); }
.card p { color: var(--fg-muted); }
.card-meta {
  margin-top: 0.4rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--fg-muted);
}

/* tools, each marked with a yıldız star */
.tools {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.tools li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.8rem;
  row-gap: 0.6rem;
  padding: 1.4rem 1.3rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.tools li::before {
  content: "";
  grid-row: 1 / span 2;
  width: 1.5rem; height: 1.5rem;
  margin-top: 0.1rem;
  background: var(--wood);
  -webkit-mask-image: var(--m-star);
  mask-image: var(--m-star);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.tool-name {
  color: var(--door);
  font-size: var(--step-1);
  font-style: italic;
}
.tools p { color: var(--fg-muted); font-size: var(--step--1); }

/* facts */
.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 1.2rem;
  padding: 1.4rem;
  background-color: var(--surface);
  background-image: var(--grain);
  border: 1px solid var(--line);
  outline: 1px dashed var(--line);
  outline-offset: -7px;
  border-radius: 2px;
}
.facts::before {
  content: "";
  grid-column: 1 / -1;
  height: 14px;
  margin-bottom: -0.4rem;
  background: var(--wood);
  -webkit-mask-image: var(--m-horn);
  mask-image: var(--m-horn);
  -webkit-mask-size: 28px 14px;
  mask-size: 28px 14px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: center;
  mask-position: center;
}
.facts div { display: grid; gap: 0.25rem; min-width: 0; }
.facts dt { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--door); }
.facts dd { margin: 0; font-family: var(--font-display); font-size: var(--step-1); font-variant-numeric: tabular-nums; color: var(--fg); }

/* contact */
.contact { border-bottom: 0; }
.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 760px) { .contact-inner { grid-template-columns: minmax(0, 1fr); } }
.contact-inner .eyebrow { margin-bottom: 0.8rem; }
.contact-inner .section-lede { margin-top: 0.8rem; }
/* the painted door, carved with ram's horns along the top */
.contact-card {
  display: grid;
  gap: 0.8rem;
  padding: 1.6rem;
  border: 1px solid var(--door-deep);
  outline: 1px dashed color-mix(in srgb, var(--on-door) 45%, transparent);
  outline-offset: -7px;
  border-radius: 2px;
  background-color: var(--door);
  background-image: var(--grain);
  color: var(--on-door);
  min-width: 0;
}
.contact-card::before {
  content: "";
  height: 14px;
  margin-bottom: 0.4rem;
  background: var(--on-door);
  opacity: 0.85;
  -webkit-mask-image: var(--m-horn);
  mask-image: var(--m-horn);
  -webkit-mask-size: 28px 14px;
  mask-size: 28px 14px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: center;
  mask-position: center;
}
.contact-mail {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
  color: var(--on-door);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-mail:hover { color: var(--on-door); text-decoration: underline; }
.contact-note { color: color-mix(in srgb, var(--on-door) 80%, transparent); font-size: var(--step--1); }

/* ---------- Footer ---------- */
.foot {
  position: relative;
  background-color: var(--bg-alt);
  background-image: var(--grain);
  padding-top: 14px;
}
.foot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
  background: var(--door);
}
.foot-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem 2rem;
  padding-block: 1.6rem;
  font-size: var(--step--1);
  color: var(--fg-muted);
}
@media (max-width: 720px) { .foot-inner { grid-template-columns: 1fr; } }
.foot-brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); color: var(--fg); letter-spacing: 0.04em; }
.foot-brand .tamga { width: 1.5rem; height: 1.5rem; }
.foot-glyphs { font-family: var(--font-runic); color: var(--door); font-size: 1.3rem; letter-spacing: 0.06em; }
.foot-motifs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.foot-motifs dt, .foot-motifs dd { margin: 0; display: inline; }
.foot-motifs div { display: inline-flex; gap: 0.4em; align-items: baseline; }
.foot-motifs dt { color: var(--fg); font-weight: 700; }
.foot-motifs dt::after { content: ":"; }

/* ---------- Reveal (progressive, visible at rest) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0.001; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
}