/* ============================================================================
   SERENE PATH TRAVELS — the committed visual world.

   Bone paper, oxblood, brass gold. Archivo for structure, Newsreader italic
   for the accented phrase, IBM Plex Mono for notation. Square edges, hairline
   rules, no cards, no shadows.

   CYRILLIC — do not "tidy" the font stacks. Archivo and Newsreader ship no
   Cyrillic subset, so the Russian build falls through to Segoe UI / system-ui,
   which do. Browsers switch per unicode-range; the Latin build never sees it.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* Stock */
  --bone:      #F4F0E8;
  --bone2:     #EAE3D5;
  --card:      #E6DECC;

  /* Ink */
  --ink:       #1A1512;
  --ink2:      #5B5247;
  --on-dark:   #F7F3EA;
  --on-dark2:  rgba(247, 243, 234, 0.80);
  --on-dark3:  rgba(247, 243, 234, 0.62);

  /* Brand */
  --oxblood:   #8A1418;
  --oxblood2:  #6E0F13;
  /* The two golds are the design's #8A6A2E and #CBA65C nudged just far enough to
     clear 4.5:1 as small text — the darker one against the deepest light ground
     it ever sits on (--card), the brass one against the oxblood band. Both
     shifts are a few percent of lightness and invisible side by side; without
     them the 11px tracked labels measured 3.75:1 and 4.17:1. */
  --gold:      #785C28;   /* 4.7:1 on --card, 5.4:1 on bone — gold that carries text */
  --gold-br:   #D2B171;   /* 4.9:1 on --oxblood — brass for dark grounds and hairlines */

  /* Rules */
  --line:      #D9D1C1;
  --lined:     rgba(203, 166, 92, 0.34);

  /* Type */
  --sans:  Archivo, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --serif: Newsreader, Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Frame */
  --frame:  1360px;
  --gutter: clamp(22px, 4vw, 44px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------ 2. RESET/BASE */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--oxblood); color: var(--on-dark); }

a { color: var(--oxblood); text-decoration: none; }
a:hover { color: var(--ink); }
:where(.band--ox, .band--ink) a { color: var(--gold-br); }
:where(.band--ox, .band--ink) a:hover { color: var(--on-dark); }

:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(244, 240, 232, 0.96);
  border-radius: 1px;
}
:where(.band--ox, .band--ink) :focus-visible {
  outline-color: var(--gold-br);
  box-shadow: 0 0 0 5px rgba(26, 21, 18, 0.9);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--oxblood); color: var(--on-dark);
  padding: 14px 24px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
}
.skip:focus { left: 0; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@keyframes spt-drift { from { transform: scale(1.04); } to { transform: scale(1.13); } }

/* ------------------------------------------------------------ 3. TYPOGRAPHY */

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: inherit;
}

/* the accented phrase — the one place the serif appears */
h1 em, h2 em, h3 em, .stmt em, .em {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.008em;
  color: var(--oxblood);
}
:where(.band--ox, .band--ink) :is(h1, h2, h3, .stmt) em,
:where(.band--ox, .band--ink) .em { color: var(--gold-br); }

.d1 { font-size: clamp(42px, 5.4vw, 82px); line-height: 0.98; letter-spacing: -0.03em; }
.d2 { font-size: clamp(34px, 4.6vw, 66px); line-height: 1.0;  letter-spacing: -0.03em; }
.d3 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -0.025em; }
.d4 { font-size: 24px; line-height: 1.06; letter-spacing: -0.015em; }
.d5 { font-size: 21px; line-height: 1.2;  letter-spacing: -0.01em; }

.kicker {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--oxblood);
  margin: 0 0 26px;
}
.kicker i { width: 26px; height: 1px; background: var(--gold-br); flex: none; }
.kicker--gold { color: var(--gold); letter-spacing: 0.24em; }
:where(.band--ox, .band--ink) .kicker { color: var(--gold-br); }

.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink2); max-width: 50ch; }
:where(.band--ox, .band--ink) .lede { color: var(--on-dark2); }

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }
.muted { color: var(--ink2); font-size: 16px; }
:where(.band--ox, .band--ink) p, :where(.band--ox, .band--ink) .muted { color: var(--on-dark2); }

.stmt {
  font-weight: 500;
  font-size: clamp(28px, 3.7vw, 54px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0 auto;
  max-width: 20ch;
}
.stmt--wide { max-width: 22ch; }

.data, .mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; }
.label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
}
:where(.band--ox, .band--ink) .label { color: var(--gold-br); }

.pali { font-family: var(--serif); font-style: italic; color: var(--ink2); }
.gloss { border-bottom: 1px dotted currentColor; cursor: help; }

.link {
  display: inline-block;
  color: var(--ink); font-size: 13px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  border-bottom: 1.5px solid var(--gold); padding-bottom: 6px;
  transition: border-color 300ms var(--ease), color 300ms var(--ease);
}
.link:hover { border-color: var(--oxblood); color: var(--oxblood); }
:where(.band--ox, .band--ink) .link { color: var(--on-dark); border-color: var(--gold-br); }
:where(.band--ox, .band--ink) .link:hover { color: var(--gold-br); }

/* ---------------------------------------------------------------- 4. LAYOUT */

.frame { width: min(var(--frame), 100% - (var(--gutter) * 2)); margin-inline: auto; }

.band { padding-block: clamp(72px, 8vw, 120px); }
.band--tight { padding-block: clamp(56px, 6vw, 84px); }
.band--bone2 { background: var(--bone2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band--ox  { background: var(--oxblood); color: var(--on-dark); }
.band--ink { background: var(--ink); color: var(--on-dark); }
.band--ox :is(h1,h2,h3,h4), .band--ink :is(h1,h2,h3,h4) { color: var(--on-dark); }
.band--center { text-align: center; }
.band--center .kicker, .band--center .actions, .band--center .chips { justify-content: center; }
.band--center p { margin-inline: auto; }

.band__head { margin-bottom: clamp(40px, 5vw, 56px); }
/* Both children need a flex basis. Without one the heading takes the full line
   and the paragraph wraps beneath it in whatever sliver is left. */
.band__head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px 56px; flex-wrap: wrap; }
.band__head--split > * { flex: 1 1 380px; min-width: 0; margin: 0; }
.band__head--split > p { flex: 0 1 40ch; font-size: 17px; color: var(--ink2); }
:where(.band--ox, .band--ink) .band__head--split > p { color: var(--on-dark2); }

/* the full-bleed text-beside-photograph band. Distinct from `.split`, which is
   the interior pages' two-column grid inside a `.frame`. */
.duo { display: flex; flex-wrap: wrap; }
.duo__text {
  flex: 1 1 440px; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(64px, 8vw, 116px) clamp(28px, 5vw, 84px);
}
.duo__media {
  flex: 1 1 440px; position: relative; margin: 0;
  min-height: 58vh; overflow: hidden;
  background: linear-gradient(140deg, #E6DCC7, #D6C8AC);
}
.duo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.stack    > * + * { margin-top: 18px; }
.stack-lg > * + * { margin-top: 30px; }

/* Flow spacing. Headings are margin:0 by default because components own their
   own rhythm — so a heading sitting directly on a band and followed by a grid,
   a table or a panel would otherwise touch it. */
:is(.frame, .prose, .split > div, .band__head) > :is(h1, h2, h3, h4) + * { margin-top: clamp(24px, 2.6vw, 38px); }
:is(.frame, .prose) > :is(p, .lede, .chips, .table-wrap, .note) + :is(h2, h3) { margin-top: clamp(44px, 5vw, 68px); }
.frame > :is(.grid, .split, .days, .values, .pillars, .table-wrap, .gal, .plates, .form, .map) + * { margin-top: clamp(36px, 4vw, 56px); }
/* these two already reserve their own space underneath */
.frame > :is(.band__open, .band__head) + * { margin-top: 0; }

/* The header is sticky, so an anchor jump would otherwise land under it. */
[id] { scroll-margin-top: 96px; }

/* --------------------------------------------------------------- 5. ACTIONS */

.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 34px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 16px 30px;
  background: var(--ink); color: var(--bone);
  transition: background 300ms var(--ease), color 300ms var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--oxblood); color: var(--bone); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--ox { background: var(--oxblood); }
.btn--ox:hover, .btn--ox:focus-visible { background: var(--ink); color: var(--bone); }

.btn--gold { background: var(--gold-br); color: var(--ink); }
.btn--gold:hover, .btn--gold:focus-visible { background: var(--on-dark); color: var(--ink); }

.btn--line { background: transparent; color: var(--ink); border: 1.5px solid var(--line); padding: 14.5px 28px; }
.btn--line:hover, .btn--line:focus-visible { background: var(--ink); color: var(--bone); border-color: var(--ink); }
:where(.band--ox, .band--ink) .btn--line { color: var(--on-dark); border-color: var(--lined); }
:where(.band--ox, .band--ink) .btn--line:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

/* ---------------------------------------------------------------- 6. HEADER */

.hd {
  position: sticky; top: 0; z-index: 60;
  background: rgba(244, 240, 232, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hd__in {
  max-width: var(--frame); margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 28px;
}

.brand { display: flex; align-items: center; gap: 13px; color: var(--ink); flex: none; }
.brand:hover { color: var(--oxblood); }
.brand__mark {
  width: 30px; height: 30px; flex: none;
  border: 1.5px solid var(--oxblood); border-radius: 50%;
  display: grid; place-items: center; position: relative;
}
.brand__mark i { position: absolute; inset: 0; margin: auto; background: var(--oxblood); }
.brand__mark i:nth-child(1) { width: 1.5px; height: 20px; }
.brand__mark i:nth-child(2) { width: 20px; height: 1.5px; }
.brand__mark i:nth-child(3) { width: 1.5px; height: 20px; transform: rotate(45deg); }
.brand__mark i:nth-child(4) { width: 20px; height: 1.5px; transform: rotate(45deg); }
.brand__name { font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }

.nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
}
.nav a { color: var(--ink2); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current='page'] { color: var(--oxblood); }
/* Written as `a.nav__cta`, not `.nav__cta`: `.nav a` above is (0,1,1) and would
   otherwise win, painting the label ink2 on the oxblood pill. */
.nav a.nav__cta {
  color: var(--bone); background: var(--oxblood);
  padding: 11px 20px; letter-spacing: 0.14em;
  transition: background 300ms var(--ease);
}
.nav a.nav__cta:hover, .nav a.nav__cta:focus-visible { background: var(--ink); color: var(--bone); }

/* --------------------------------------------------- the language switcher */
/* Built from a button and a listbox rather than a <select>, because a native
   dropdown is drawn by the operating system: it ignores the site's type, colour
   and spacing entirely and opens as a blue system list over a bone page. */

.lang { position: relative; }

.lang__btn {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 2px; color: var(--ink2);
  font-size: 12px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
  white-space: nowrap;
  transition: color 220ms var(--ease);
}
.lang__btn:hover { color: var(--ink); }
.lang__globe { width: 14px; height: 14px; color: var(--gold); flex: none; }
.lang__caret {
  width: 6px; height: 6px; flex: none; margin-left: 2px;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 240ms var(--ease);
}
.lang__btn[aria-expanded='true'] { color: var(--oxblood); }
.lang__btn[aria-expanded='true'] .lang__caret { transform: translateY(1px) rotate(225deg); }

.lang__menu {
  position: absolute; z-index: 80;
  top: calc(100% + 10px); right: 0;
  min-width: 188px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-top: 1.5px solid var(--oxblood);
  padding: 6px 0;
  display: grid;
}
.lang--up .lang__menu { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; }
.lang__menu[hidden] { display: none; }

.lang__opt {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 18px; cursor: pointer;
  color: var(--ink2);
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.lang__opt:hover, .lang__opt.is-active { background: var(--bone2); color: var(--ink); }
.lang__opt::before {
  content: ''; width: 14px; height: 1px; flex: none;
  background: transparent; transform: translateY(-4px);
}
.lang__opt[aria-selected='true'] { color: var(--oxblood); }
.lang__opt[aria-selected='true']::before { background: var(--oxblood); }
/* the endonym, so a Russian speaker can find РУССКИЙ without reading English */
.lang__opt i { font-style: normal; }

.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); place-items: center; }
.burger span, .burger span::before, .burger span::after {
  display: block; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform 260ms var(--ease), opacity 260ms var(--ease);
}
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded='true'] span { background: transparent; }
.burger[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------------ 7. HERO */

.hero { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--line); }
.hero__text {
  flex: 1 1 460px; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(56px, 7vw, 104px) clamp(28px, 5vw, 80px);
}
.hero__media {
  flex: 1 1 520px; position: relative; min-height: 64vh; overflow: hidden;
  background: linear-gradient(140deg, #E6DCC7, #D8CBB0);
}
.hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  animation: spt-drift 30s ease-in-out infinite alternate;
}
.hero__text .lede { margin: 30px 0 0; }
.hero--short .hero__media { min-height: 44vh; }
.hero--short .hero__text { padding-block: clamp(48px, 5.5vw, 78px); }

.facts {
  display: flex; flex-wrap: wrap; gap: 22px 52px;
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line);
}
.fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fact dt, .fact__k { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.fact dd, .fact__v { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
:where(.band--ox, .band--ink) .facts { border-top-color: var(--lined); }
:where(.band--ox, .band--ink) .fact dt { color: var(--gold-br); }

/* ---------------------------------------------------- 8. PILLARS (numbered) */

.pillars { display: flex; flex-wrap: wrap; gap: 40px 52px; }
.pillar { flex: 1 1 220px; padding-top: 26px; border-top: 1.5px solid var(--gold); }
.pillar__n { font-size: 13px; font-weight: 600; color: var(--gold); letter-spacing: 0.1em; display: block; margin-bottom: 18px; }
.pillar h3 { margin: 0 0 12px; }
.pillar p { margin: 0; color: var(--ink2); font-size: 17px; }

:where(.band--ox, .band--ink) .pillar { border-top: 1px solid var(--lined); padding-top: 42px; }
:where(.band--ox, .band--ink) .pillar__n { color: var(--gold-br); font-size: 14px; font-weight: 700; }
:where(.band--ox, .band--ink) .pillar p { color: var(--on-dark2); }
/* Four values want 2x2, not 3-and-an-orphan: 420px basis forbids a third column
   inside the 1360px frame. */
.pillars--wide .pillar { flex: 1 1 420px; }

.rule {
  display: flex; align-items: center; gap: 20px; margin-bottom: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
}
.rule::before, .rule::after { content: ''; flex: 1; height: 1px; background: var(--line); }
:where(.band--ox, .band--ink) .rule { color: var(--gold-br); }
:where(.band--ox, .band--ink) .rule::before,
:where(.band--ox, .band--ink) .rule::after { background: var(--lined); }

/* ------------------------------------------------------ 9. JOURNEYS / CARDS */

/* The minimums are tuned so the cells divide evenly at the 1360px frame: --3
   lands on three columns (six journeys read as 2x3) and --4 on four (eight
   sacred sites as 2x4). A looser minimum makes auto-fit add a column and leaves
   a ragged short row. */
.grid { display: grid; gap: 44px 40px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }

.feature { display: flex; flex-wrap: wrap; border-top: 1.5px solid var(--ink); color: var(--ink); margin-bottom: 8px; }
.feature__media {
  flex: 2 1 420px; position: relative; min-height: 340px; overflow: hidden;
  background: linear-gradient(140deg, #E6DCC7, #D6C8AC);
}
.feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.feature:hover .feature__media img { transform: scale(1.04); }
.feature__body { flex: 1 1 320px; display: flex; flex-direction: column; justify-content: center; padding: 44px clamp(26px, 3vw, 52px); }
.feature__meta { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.feature__body h3 { margin: 0 0 14px; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.02; }
.feature__body p { margin: 0 0 20px; color: var(--ink2); font-size: 17px; max-width: 42ch; }
.feature__go { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oxblood); }

.jrn { display: block; color: var(--ink); }
.jrn__pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 20px; background: linear-gradient(140deg, #E6DCC7, #D6C8AC); }
.jrn__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.jrn:hover .jrn__pic img { transform: scale(1.05); }
.jrn__bar { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 8px; }
.jrn__dur { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.jrn__go { font-size: 12px; color: var(--oxblood); }
.jrn h3 { margin: 0 0 8px; }
.jrn:hover h3 { color: var(--oxblood); }
.jrn p { margin: 0; color: var(--ink2); font-size: 16px; }

.aside { display: flex; flex-direction: column; justify-content: center; background: var(--bone2); padding: 36px; }
.aside__lead { font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 18px; }

.tile { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; color: var(--on-dark); background: var(--card); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease); }
.tile:hover img { transform: scale(1.05); }
.tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,21,18,.86) 0%, rgba(26,21,18,.28) 46%, rgba(26,21,18,0) 74%);
}
.tile__cap { position: absolute; z-index: 2; inset: auto 0 0 0; padding: 24px; }
.tile__cap::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold-br); margin-bottom: 12px; }
.tile__n { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-br); margin-bottom: 6px; }
.tile__name { display: block; font-weight: 600; font-size: 20px; line-height: 1.15; letter-spacing: -0.015em; }
.tile__sub { display: block; font-size: 12px; letter-spacing: 0.06em; color: var(--on-dark3); margin-top: 5px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.chip { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink2); border: 1px solid var(--line); padding: 6px 13px; }
.chip--gold { color: var(--gold); }

/* --------------------------------------------------- 10. DAY-BY-DAY / PROSE */

.days { border-top: 1px solid var(--line); }
.day { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 0 32px; padding: 34px 0; border-bottom: 1px solid var(--line); align-items: start; }
.day__idx { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--gold); padding-top: 6px; }
.day__title { margin: 0 0 12px; font-size: 23px; line-height: 1.15; letter-spacing: -0.015em; }
.day p { color: var(--ink2); font-size: 17px; }
.day__sites { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--gold); }
:where(.band--ox, .band--ink) :is(.days, .day) { border-color: var(--lined); }
:where(.band--ox, .band--ink) .day p { color: var(--on-dark2); }
:where(.band--ox, .band--ink) :is(.day__idx, .day__sites) { color: var(--gold-br); }

.prose { max-width: 68ch; }
.prose h2 { margin: 52px 0 18px; font-size: clamp(26px, 2.6vw, 34px); }
.prose h3 { margin: 40px 0 14px; font-size: 22px; }
.prose p, .prose li { color: var(--ink2); font-size: 17px; }
.prose ul { margin: 0 0 1.1em; }
.prose li { position: relative; padding-left: 22px; margin-bottom: 9px; }
.prose li::before { content: ''; position: absolute; left: 0; top: 12px; width: 10px; height: 1px; background: var(--gold-br); }
.prose strong { color: var(--ink); font-weight: 600; }

.note { border-left: 2px solid var(--gold-br); padding: 4px 0 4px 22px; color: var(--ink2); font-size: 17px; }
:where(.band--ox, .band--ink) .note { color: var(--on-dark2); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table caption { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); padding-bottom: 14px; }
.table th, .table td { text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.table td { color: var(--ink2); overflow-wrap: anywhere; }

/* -------------------------------------------------------------- 11. GALLERY */

.gal { columns: 3; column-gap: 22px; }
.gal figure { margin: 0 0 22px; break-inside: avoid; }
.gal img { width: 100%; }
.gal figcaption { font-size: 13px; color: var(--ink2); padding-top: 10px; border-top: 1px solid var(--line); margin-top: 10px; }
@media (max-width: 900px) { .gal { columns: 2; } }
@media (max-width: 560px) { .gal { columns: 1; } }

/* ----------------------------------------------------------------- 12. FORM */

.form { display: grid; gap: 22px; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 760px) { .form__row--2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

.field { display: grid; gap: 8px; min-width: 0; }
.field > label { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.field input, .field textarea, .field select {
  width: 100%; min-width: 0;
  background: var(--bone); color: var(--ink);
  border: 1px solid var(--line); border-radius: 0;
  padding: 14px 16px; font-size: 17px;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.field textarea { min-height: 160px; resize: vertical; }
.field select { appearance: none; }
.field input::placeholder, .field textarea::placeholder { color: #766C61; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--oxblood); outline: none;
  box-shadow: 0 0 0 3px rgba(138, 20, 24, 0.14);
}
.field__hint { font-size: 14px; color: var(--ink2); }
.field__err { font-size: 14px; color: var(--oxblood2); font-weight: 500; }
.field[data-invalid] :is(input, textarea, select) { border-color: var(--oxblood); }
.hp { position: absolute; left: -9999px; }

.formmsg { font-size: 17px; padding: 16px 20px; border-left: 2px solid var(--gold-br); }
.formmsg[data-state='ok']  { border-color: var(--gold); }
.formmsg[data-state='err'] { border-color: var(--oxblood); color: var(--oxblood2); }

.todo {
  display: inline-block; background: var(--gold-br); color: var(--ink);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 9px; vertical-align: middle;
}

/* -------------------------------------------------------------- 13. THE MAP */

/* Bone, never bone2: the landmass is --card, and on a bone2 ground the island
   and the sea are four values apart and the coastline reads as nothing. */
.map { position: relative; border: 1px solid var(--line); background: var(--bone); padding: 22px; }
.map svg { width: 100%; height: auto; }
@media (min-width: 861px) { .map svg { width: auto; height: min(62vh, 540px); margin-inline: auto; } }

.chart__coast { fill: var(--card); stroke: var(--gold); stroke-width: 1; }
.chart__hill  { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 1 4; opacity: .55; }
.chart__route { fill: none; stroke: var(--oxblood); stroke-width: 1.6; stroke-dasharray: 2 7; stroke-linecap: round; }

.chart__site { cursor: pointer; }
.chart__site circle { fill: var(--bone); stroke: var(--oxblood); stroke-width: 1.4; transition: r 260ms var(--ease), fill 260ms var(--ease); }
.chart__site text { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: .04em; fill: var(--ink2); pointer-events: none; }
.chart__site .chart__num { font-family: var(--mono); font-size: 7.5px; fill: var(--oxblood); }
.chart__site:hover circle, .chart__site:focus-visible circle { fill: var(--oxblood); r: 7; }
.chart__site:hover text, .chart__site:focus-visible text { fill: var(--ink); }

.chart__legend { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.chart__key { display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .04em; color: var(--ink2); }
.chart__key i { width: 22px; height: 0; border-top: 1.5px dotted var(--oxblood); flex: none; }
.chart__key i.ring { width: 10px; height: 10px; border: 1.4px solid var(--oxblood); border-radius: 50%; }
.chart__key i.hill { width: 15px; height: 10px; border: 1px dotted var(--gold); border-top: 0; }

@media (max-width: 620px) {
  .chart__site text { font-size: 11px; }
  .chart__site .chart__num { font-size: 9px; }
}

/* --------------------------------------------------------------- 14. FOOTER */

.ftr { background: var(--bone); color: var(--ink2); border-top: 1px solid var(--line); }
.ftr__grid {
  max-width: var(--frame); margin: 0 auto;
  padding: 64px var(--gutter) 46px;
  display: flex; flex-wrap: wrap; gap: 44px 60px;
}
.ftr__brand { flex: 2 1 300px; }
.ftr__col { flex: 1 1 160px; }
.ftr h2 { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oxblood); margin: 0 0 18px; }
.ftr ul { display: grid; gap: 11px; font-size: 15px; }
.ftr a { color: var(--ink2); }
.ftr a:hover { color: var(--ink); }
.ftr__base {
  max-width: var(--frame); margin: 0 auto;
  padding: 0 var(--gutter) 40px;
  font-size: 12px; letter-spacing: 0.04em; color: var(--gold);
  display: flex; flex-wrap: wrap; gap: 10px 28px;
}
.social { display: flex; gap: 10px; margin-top: 20px; }
.social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--oxblood); transition: background 260ms var(--ease), color 260ms var(--ease); }
.social a:hover { background: var(--oxblood); color: var(--bone); border-color: var(--oxblood); }
.social svg { width: 17px; height: 17px; }
.social a[data-pending] { opacity: .5; }

/* --------------------------------------------------------------- 15. MOTION */

[data-rise] { opacity: 1; }
.js [data-rise] { opacity: 0; transform: translateY(20px); }
.js [data-rise].is-in { opacity: 1; transform: none; transition: opacity 800ms var(--ease), transform 800ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-rise] { opacity: 1; transform: none; }
  .hero__media img { animation: none; }
}

/* ------------------------------------------------------------ 16. RESPONSIVE */

@media (max-width: 1100px) {
  .day { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .day__idx { padding-top: 0; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: grid; }
  /* Absolute against .hd, NOT fixed against the viewport. `.hd` carries
     backdrop-filter, which makes it the containing block for fixed descendants
     too — so `position: fixed; inset: 68px 0 0` resolved against the 68px header
     and collapsed the whole menu into one overflowing line. */
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 100%);
    background: var(--bone);
    border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 44px;
    overflow-y: auto; z-index: 59;
  }
  .nav.is-open a {
    font-size: 20px; font-weight: 600; letter-spacing: 0; text-transform: none;
    padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink);
  }
  .nav.is-open .nav__cta {
    margin-top: 24px; align-self: flex-start; border: 0;
    color: var(--bone); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  }
  .nav.is-open .lang { margin-top: 24px; align-self: flex-start; }
  .nav.is-open .lang__btn { font-size: 13px; }
  /* the header panel would otherwise open past the bottom of the menu sheet */
  .nav.is-open .lang__menu { position: static; margin-top: 10px; }
  .hero__media { min-height: 52vh; }
  .duo__media { min-height: 48vh; }
}

@media (max-width: 560px) {
  body { font-size: 17px; }
  .btn { width: 100%; }
  .actions { gap: 12px; }
  .feature__body { padding: 32px 24px; }
  .facts { gap: 20px 34px; }
}

/* ============================================================================
   18. INTERIOR PAGES

   The home page is built from the components above. The fifteen interior pages
   carry a few more: a section marker, a bordered panel, the photo plates, the
   numbered value list. They are part of the same system — hairlines, mono
   notation, square edges — not a compatibility shim.
   ========================================================================== */

/* the marker that opens a section: label left, notation right, hairline under */
.band__open {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 8px 28px;
  padding-bottom: 14px;
  margin-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.band__open .label { color: var(--oxblood); letter-spacing: 0.2em; font-size: 12px; }
.band__open .data { color: var(--gold); min-width: 0; overflow-wrap: anywhere; }
:where(.band--ox, .band--ink) .band__open { border-bottom-color: var(--lined); }
:where(.band--ox, .band--ink) .band__open :is(.label, .data) { color: var(--gold-br); }

/* the page masthead: headline column beside a panel */
.masthead { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 60px); align-items: start; }

/* a bordered block of stock — vision/mission, a form, a set of facts */
.panel {
  background: var(--bone2);
  border: 1px solid var(--line);
  border-top: 1.5px solid var(--gold);
  padding: clamp(26px, 3.4vw, 44px);
  min-width: 0;
}
.panel hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
/* Internal rhythm: the label and heading that open a panel need to clear what
   follows, and a bare <span class="label"> is inline by default. */
.panel > .label { display: block; margin-bottom: 10px; }
.panel > :is(h2, h3, .title, .lede, p) { margin-bottom: 22px; }
.panel > :is(h2, h3, .title) + .label { margin-top: 30px; }
.panel > :last-child { margin-bottom: 0; }
.panel .field input, .panel .field textarea, .panel .field select { background: var(--bone); }
:where(.band--ox, .band--ink) .panel {
  background: rgba(247, 243, 234, 0.06);
  border-color: var(--lined); border-top-color: var(--gold-br);
}

/* two-column arrangements used across the interior pages */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 64px); align-items: start; }
.split--wide   { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.split--narrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.split--top    { align-items: start; }
.wide { grid-column: 1 / -1; }

/* -------------------------------------------------------------- the plates */

.plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px 28px; }
.plates--tight { gap: 1px; }

.plate {
  position: relative; display: block; isolation: isolate;
  aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--card); color: var(--on-dark);
}
.plate__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease); }
.plate:hover .plate__photo, .plate:focus-visible .plate__photo { transform: scale(1.05); }
.plate::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(26,21,18,.9) 0%, rgba(26,21,18,.34) 44%, rgba(26,21,18,0) 72%);
}
.plate__cap { position: absolute; z-index: 2; inset: auto 0 0 0; padding: 22px; display: block; }
.plate__cap::before { content: ''; display: block; width: 26px; height: 1px; background: var(--gold-br); margin-bottom: 11px; }
.plate__index {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--gold-br); margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
}
.plate__name { display: block; font-weight: 600; font-size: 20px; line-height: 1.15; letter-spacing: -0.015em; }
.plate__sub { display: block; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--on-dark3); margin-top: 4px; }
.plate:focus-visible { outline-offset: -4px; }

/* ------------------------------------------------------- the numbered values */

.values { border-top: 1px solid var(--line); }
.value {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 0 28px;
  padding: 34px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.value__mark { color: var(--gold); }
.value__mark svg { width: 38px; height: 38px; }
.value h3 { margin-bottom: 10px; }
.value p { margin: 0; color: var(--ink2); font-size: 17px; }
:where(.band--ox, .band--ink) :is(.values, .value) { border-color: var(--lined); }
:where(.band--ox, .band--ink) .value__mark { color: var(--gold-br); }
:where(.band--ox, .band--ink) .value p { color: var(--on-dark2); }

/* a labelled row with a glyph — used for the shorter lists */
.vrow { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0 20px; align-items: start; }
.vrow__ico { color: var(--gold); }
.vrow__ico svg { width: 30px; height: 30px; }
:where(.band--ox, .band--ink) .vrow__ico { color: var(--gold-br); }

/* ------------------------------------------------------------------- odds */

.title { font-size: clamp(20px, 2vw, 25px); font-weight: 600; line-height: 1.16; letter-spacing: -0.015em; }
.day__body { min-width: 0; }

.seal {
  width: 118px; height: 118px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--gold); color: var(--gold);
  display: grid; place-items: center; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1.35; padding: 12px;
  transform: rotate(-7deg);
}
:where(.band--ox, .band--ink) .seal { border-color: var(--gold-br); color: var(--gold-br); }

/* a passage set off by a doubled rule — the theme's one framed element */
.dblrule { border: 1px solid var(--line); padding: clamp(26px, 3vw, 40px); position: relative; }
.dblrule::before { content: ''; position: absolute; inset: 5px; border: 1px solid var(--lined); pointer-events: none; }
:where(.band--ox, .band--ink) .dblrule { border-color: var(--lined); }

.quote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(21px, 2.2vw, 30px); line-height: 1.32; letter-spacing: -0.01em;
  color: var(--ink); max-width: 30ch;
}
:where(.band--ox, .band--ink) .quote { color: var(--on-dark); }

.meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--gold); }
:where(.band--ox, .band--ink) .meta { color: var(--gold-br); }

.ulink { color: var(--oxblood); border-bottom: 1px solid var(--lined); }
.ulink:hover { border-bottom-color: var(--oxblood); }

.table td.is-next { color: var(--oxblood); font-weight: 600; }
.table td.is-next::after { content: ' ●'; color: var(--gold-br); }

@media (max-width: 900px) {
  .masthead, .split, .split--wide, .split--narrow { grid-template-columns: minmax(0, 1fr); }
  .value { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .plates { grid-template-columns: minmax(0, 1fr); }
  .plates--tight { gap: 20px; }
}

/* ---------------------------------------------------------------- 17. PRINT */

@media print {
  .hd, .ftr, .burger, .btn, .chart__legend, .social, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .band, .band--ox, .band--ink { background: #fff !important; color: #000 !important; padding: 0; }
  :where(.band--ox, .band--ink) * { color: #000 !important; }
  a { color: #000; }
}