/* ============================================================
   ENIGVIA — shared design system
   Dark archival / historical-thriller. Premium, cinematic.
   Palette locked in handbook §7:
     #111512 near-black · #C9A566 old gold · #EADFCA parchment
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --ink-900: #0a0d0b;
  --ink-800: #111512;   /* brand near-black */
  --ink-700: #171c18;
  --ink-600: #1f2621;
  --ink-500: #2b332c;

  --gold:      #c9a566; /* brand old gold */
  --gold-lift: #e3c68c;
  --gold-deep: #9c7b41;

  --parchment: #eadfca; /* brand parchment */
  --parch-70: rgba(234, 223, 202, 0.72);
  --parch-45: rgba(234, 223, 202, 0.46);

  --line:      rgba(201, 165, 102, 0.20);
  --line-soft: rgba(234, 223, 202, 0.10);

  --font-display: "Cormorant Garamond", "Iowan Old Style", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --shell: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);

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

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink-800);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.72;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

/* film-grain wash — keeps large dark fields from banding */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: 0.005em;
  /* headings wrap into even lines instead of leaving one orphan word on a phone */
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7.2vw, 5.25rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
h3 { font-size: clamp(1.32rem, 2.2vw, 1.75rem); }

p { margin: 0 0 1.15rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Slovene and the case titles carry long compounds; on a 360px screen they would
   otherwise push a line into a horizontal scroll. */
p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }

.lede {
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  line-height: 1.68;
  color: var(--parch-70);
  max-width: 60ch;
}

.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin: 0 0 1.35rem;
  display: block;
}

.gold { color: var(--gold); }

/* a heading that opens a block inside a column, not a section */
.tight { margin: 2.6rem 0 1.1rem; }
/* the quiet "or write to us instead" line under a form */
.aside-line { margin-top: 1.4rem; font-size: 0.9rem; color: var(--parch-45); }

/* ---------- layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
  position: relative;
  z-index: 1;
}

section { padding-block: var(--section-y); position: relative; }
/* anchored sections must clear the sticky header when jumped to */
section[id] { scroll-margin-top: 92px; }
/* on a page with the sticky sub-nav, they must clear both rows */
.has-subnav section[id] { scroll-margin-top: calc(var(--head-h, 78px) + 4.2rem); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(17, 21, 18, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-head.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(10, 13, 11, 0.92);
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

.brand { display: flex; align-items: center; gap: 0.72rem; text-decoration: none; flex-shrink: 0; }
.brand svg, .brand img { width: 34px; height: 34px; }
.brand-word {
  font-family: var(--font-display);
  font-size: 1.42rem;
  letter-spacing: 0.3em;
  color: var(--parchment);
  padding-left: 0.12em;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }

.nav a {
  text-decoration: none;
  font-size: 0.79rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parch-70);
  transition: color 0.22s var(--ease);
  white-space: nowrap;
}
.nav a:hover, .nav a:focus-visible { color: var(--gold); }

/* language switcher */
.lang {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.22rem;
}
.lang a {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--parch-45);
  transition: all 0.22s var(--ease);
}
.lang a:hover { color: var(--gold); }
.lang a[aria-current="true"] { background: var(--gold); color: var(--ink-900); font-weight: 600; }

/* ---------- second level: the sections of one page ----------
   Sits under the sticky header rather than inside it: a city page has enough
   sections to fill a row of its own, and stacking two sticky rows would eat a
   third of a phone screen. */
.subnav {
  position: sticky;
  /* enigvia.js measures the header and publishes --head-h; the fallbacks below
     are the two heights it actually takes, so this still parks correctly with
     JS switched off. */
  top: var(--head-h, 78px);
  z-index: 55;              /* under the header (60), over the page */
  border-bottom: 1px solid var(--line);
  background: rgba(10, 13, 11, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.subnav-inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.1rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }

.subnav-label {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
}
.subnav a {
  text-decoration: none;
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--parch-45);
  white-space: nowrap;
  padding: 1rem 0;
  transition: color 0.22s var(--ease);
}
.subnav a:hover, .subnav a:focus-visible { color: var(--gold); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2.1rem;
  font-size: 0.78rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--gold);
  border-radius: 2px;
  transition: all 0.28s var(--ease);
  cursor: pointer;
  text-align: center;
}

.btn-primary { background: var(--gold); color: var(--ink-900); }
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--gold-lift);
  border-color: var(--gold-lift);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px rgba(201, 165, 102, 0.55);
}

.btn-ghost { background: transparent; color: var(--gold); }
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: rgba(201, 165, 102, 0.1);
  transform: translateY(-2px);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: clamp(620px, 92vh, 940px);
  display: flex;
  align-items: center;
  padding-block: clamp(5rem, 12vh, 8rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* layered vignette: archival lamplight, no photography dependency */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 68% 52% at 22% 30%, rgba(201, 165, 102, 0.15), transparent 62%),
    radial-gradient(ellipse 52% 46% at 84% 76%, rgba(201, 165, 102, 0.08), transparent 60%),
    linear-gradient(170deg, var(--ink-700) 0%, var(--ink-800) 42%, var(--ink-900) 100%);
}

/* faint map-grid engraving */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse 76% 68% at 50% 44%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 76% 68% at 50% 44%, #000 25%, transparent 78%);
}

.hero .shell { position: relative; z-index: 2; }
.hero-copy { max-width: 46rem; }

.hero h1 { margin-bottom: 1.6rem; }
.hero h1 em {
  font-style: italic;
  color: var(--gold);
}

.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  color: var(--parch-70);
  max-width: 52ch;
  line-height: 1.7;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parch-45);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-meta span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* ---------- generic grids ---------- */
.grid { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.6rem, 5vw, 4rem); }

/* ---------- pillar / value cards ---------- */
.card {
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(201, 165, 102, 0.045), transparent 62%);
  padding: clamp(1.7rem, 3vw, 2.4rem);
  border-radius: 3px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.card:hover { border-color: rgba(201, 165, 102, 0.42); transform: translateY(-3px); }
.card h3 { color: var(--parchment); margin-bottom: 0.55rem; }
.card p { color: var(--parch-70); font-size: 0.95rem; margin: 0; }

.card-num {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  color: var(--gold);
  display: block;
  margin-bottom: 1.1rem;
}

/* ---------- "what it is / is not" ---------- */
.contrast { display: grid; gap: clamp(1.5rem, 3vw, 2.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.contrast-col { border-top: 2px solid var(--gold); padding-top: 1.6rem; }
.contrast-col.is-not { border-top-color: var(--ink-500); }
.contrast-col h3 { font-size: 1.15rem; letter-spacing: 0.06em; }
.contrast-col.is-not h3 { color: var(--parch-45); }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.ticks li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--parch-70);
  font-size: 0.95rem;
  line-height: 1.6;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 9px; height: 9px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.is-not .ticks li::before { border-color: var(--ink-500); }

/* ---------- case cards ---------- */
.case {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, var(--ink-700), var(--ink-900));
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.case:hover { border-color: rgba(201, 165, 102, 0.45); transform: translateY(-4px); }

.case-plate {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.case-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 45%, rgba(201, 165, 102, 0.17), transparent 68%),
    linear-gradient(150deg, var(--ink-600), var(--ink-900));
}
.case-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 42px 42px;
}
.case-plate svg { position: relative; z-index: 1; width: clamp(74px, 16%, 104px); height: auto; opacity: 0.9; }

/* The quest cover — the same key art that goes on the Questo listing. It fills the plate,
   so the gradient and grid behind it only ever show through while the image loads. The
   covers are 16:10 and the plate is 16:9; the crop takes it off the empty background. */
.case-cover {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-tag {
  position: absolute;
  z-index: 2;
  top: 1rem; left: 1rem;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-900);
  background: var(--gold);
  padding: 0.35rem 0.75rem;
  font-weight: 600;
}
.case-tag.is-soon { background: transparent; color: var(--gold); border: 1px solid var(--gold); }

.case-body { padding: clamp(1.5rem, 2.6vw, 2.1rem); display: flex; flex-direction: column; flex: 1; }
.case-body h3 { margin-bottom: 0.3rem; }
.case-genre {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.case-body p { color: var(--parch-70); font-size: 0.95rem; }

.case-facts {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.3rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1rem;
  font-size: 0.78rem;
  color: var(--parch-45);
  letter-spacing: 0.05em;
}
.case-facts strong {
  display: block;
  color: var(--parchment);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0;
}
.case .btn-row { margin-top: auto; padding-top: 1.9rem; }

/* ---------- steps / how to play ---------- */
.steps { counter-reset: s; display: grid; gap: 0; }
.step {
  counter-increment: s;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.2rem);
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--gold);
  line-height: 1;
  opacity: 0.85;
}
.step h3 { font-size: 1.22rem; margin-bottom: 0.35rem; }
.step p { color: var(--parch-70); font-size: 0.95rem; margin: 0; max-width: 58ch; }

/* ---------- stat band ---------- */
.band {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(201, 165, 102, 0.045), transparent);
}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: clamp(1.6rem, 3vw, 2.4rem); text-align: center; }
.stat-n {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: 0.55rem;
}
.stat-l {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parch-45);
}

/* ---------- pull quote / promise ---------- */
.promise { text-align: center; max-width: 44rem; margin-inline: auto; }
.promise blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.28;
  color: var(--parchment);
}
.promise blockquote em { color: var(--gold); font-style: italic; }
.promise cite {
  display: block;
  margin-top: 1.8rem;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--parch-45);
}

/* ---------- faq ---------- */
.faq { max-width: 48rem; }
.faq details {
  border-top: 1px solid var(--line);
  padding: 1.35rem 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.9vw, 1.32rem);
  color: var(--parchment);
  transition: color 0.22s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold); }
.faq summary::after {
  content: "+";
  color: var(--gold);
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.28s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin: 1rem 0 0;
  color: var(--parch-70);
  font-size: 0.96rem;
  max-width: 62ch;
}

/* ---------- cta ---------- */
.cta {
  position: relative;
  text-align: center;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 82% at 50% 100%, rgba(201, 165, 102, 0.14), transparent 68%);
}
.cta .shell { position: relative; z-index: 1; }
.cta h2 { margin-bottom: 1.2rem; }
.cta .lede { margin-inline: auto; }
.cta .btn-row { justify-content: center; }

/* ---------- footer ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.2rem;
  background: var(--ink-900);
  font-size: 0.86rem;
}
.foot-grid {
  display: grid;
  gap: 2.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-bottom: 3rem;
}
.foot-grid h4 {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
  font-weight: 500;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.foot-grid a { text-decoration: none; color: var(--parch-70); transition: color 0.22s var(--ease); }
.foot-grid a:hover { color: var(--gold); }
.foot-grid p { color: var(--parch-45); font-size: 0.88rem; }

.foot-bar {
  border-top: 1px solid var(--line-soft);
  padding-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.8rem;
  justify-content: space-between;
  align-items: center;
  color: var(--parch-45);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* ---------- disclosure note (fiction vs history — handbook §19) ---------- */
.note {
  border-left: 2px solid var(--gold);
  padding: 0.2rem 0 0.2rem 1.3rem;
  color: var(--parch-45);
  font-size: 0.86rem;
  line-height: 1.65;
  max-width: 62ch;
}

/* ---------- tester call-out (spam warning, open test round) ---------- */
.warn {
  border: 1px solid rgba(201, 165, 102, 0.42);
  border-left-width: 3px;
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(201, 165, 102, 0.08), transparent 70%);
  padding: clamp(1.4rem, 2.6vw, 2rem);
}
.warn h3 {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 1.15rem;
  color: var(--gold);
  margin-bottom: 0.85rem;
}
.warn h3::before {
  content: "!";
  flex-shrink: 0;
  /* optically centred on the first line, not on a wrapped block */
  margin-top: -0.22rem;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
}
.warn p { color: var(--parch-70); font-size: 0.95rem; }
.warn ul { margin: 0.9rem 0 0; padding-left: 1.15rem; color: var(--parch-70); font-size: 0.95rem; }
.warn li { margin-bottom: 0.45rem; }
.warn li:last-child { margin-bottom: 0; }

/* ---------- limited-spots badge ---------- */
/* inline-block, not flex: the count and the sentence after it are one run of
   text and must wrap as one, not stack into two columns */
.spots {
  display: inline-block;
  max-width: 62ch;
  margin: 1.6rem 0 0;
  padding: 0.75rem 1.35rem;
  border: 1px solid var(--gold);
  border-radius: 2rem;
  background: rgba(201, 165, 102, 0.09);
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  line-height: 1.65;
  color: var(--parch-70);
}
.spots strong {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.spots::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin: -0.15em 0.6rem 0 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 165, 102, 0.18);
}
/* every spot gone — same shape, drained of urgency */
.spots.is-full {
  border-color: var(--ink-500);
  background: transparent;
  color: var(--parch-45);
}
.spots.is-full strong { color: var(--parch-70); }
.spots.is-full::before { background: var(--ink-500); box-shadow: none; }

@media (max-width: 520px) {
  /* a pill that wraps to three lines stops reading as a badge */
  .spots { display: block; border-radius: 3px; }
  .spots::before { display: none; }
}

/* ---------- the offer, in the hero ----------
   A visitor from an ad has one question the story does not answer: is this
   something I am about to pay for? The badge answers it before the first scroll,
   in the same gold the countdown badge uses, so the two read as one promise. */
.hero-offer { margin: 1.9rem 0 0.9rem; }
.badge-free {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--gold);
  border-radius: 2rem;
  background: rgba(201, 165, 102, 0.12);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* The same badge once the free round is over. Muted rather than gold: at that
   point the gold belongs to the button underneath it, which is the thing to
   press. */
.badge-paid {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parch-70);
}

/* The short form that sits with it: the long one downpage asks which cases you
   want, this one already knows. Capped so the field does not stretch to the full
   hero width on a desktop, where a 60ch input reads as a search box. */
.signup-inline { margin-top: 0; max-width: 34rem; }
.signup-inline .signup-note { margin-top: 0.7rem; }

.hero-aside { margin: 1.1rem 0 0; font-size: 0.86rem; }
.hero-aside a {
  color: var(--parch-45);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.hero-aside a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------- tester signup form ---------- */
.signup { margin-top: 2.4rem; }
.signup-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.signup input[type="email"] {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 1rem 1.15rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--parchment);
  background: rgba(10, 13, 11, 0.55);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.signup input[type="email"]::placeholder { color: var(--parch-45); }
.signup input[type="email"]:hover { border-color: rgba(201, 165, 102, 0.42); }
.signup input[type="email"]:focus {
  border-color: var(--gold);
  background: rgba(10, 13, 11, 0.85);
}
/* the browser's own invalid styling is invisible on this palette */
.signup input[type="email"]:not(:placeholder-shown):invalid { border-color: #b4553f; }

.signup .btn { flex: 0 0 auto; }
.signup-note { margin: 0.95rem 0 0; font-size: 0.84rem; color: var(--parch-45); max-width: 46ch; }

/* shown only after FormSubmit redirects back with ?sent=1 */
.signup-ok {
  margin: 0 0 1.6rem;
  border: 1px solid var(--gold);
  border-left-width: 3px;
  border-radius: 3px;
  background: rgba(201, 165, 102, 0.1);
  padding: 1.1rem 1.3rem;
  font-size: 0.95rem;
  color: var(--parchment);
}
.signup-ok strong { color: var(--gold); }

.signup .btn[disabled] { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; }

/* shown when the mail service is unreachable or refuses the address */
.signup-error {
  margin: 0.95rem 0 0;
  border-left: 2px solid #b4553f;
  padding: 0.2rem 0 0.2rem 1.1rem;
  font-size: 0.9rem;
  color: var(--parch-70);
  max-width: 52ch;
}

/* ---------- which quests a tester is signing up for ---------- */
/* A signup used to mean "the test round"; it now means the cases you tick, and
   each one counts down its own places. The row is a label so the whole line is
   a hit target, and the count sits on the right of the name it belongs to. */
.quests {
  margin: 0 0 1.8rem;
  padding: 0;
  border: 0;
}
.quests legend {
  padding: 0;
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--parchment);
}
.quest {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--parch-70);
}
.quest:last-of-type { border-bottom: 0; }
.quest:hover { color: var(--parchment); }

.quest input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.quest-name { flex: 1 1 auto; }
/* the count must never push the name into a second column on a phone */
.quest-spots {
  flex: 0 0 auto;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  white-space: nowrap;
}
/* full, or not open yet: still readable, no longer an invitation */
.quest.is-full,
.quest.is-soon { color: var(--parch-45); }
.quest.is-full .quest-spots,
.quest.is-soon .quest-spots { color: var(--parch-45); }
.quest.is-full input[type="checkbox"] { cursor: not-allowed; }

/* shown only when that quest's tester places are gone — the case is still
   playable, it is just no longer free */
.quest-buy {
  margin: -0.2rem 0 0.6rem;
  padding-left: 1.8rem;
  font-size: 0.86rem;
  color: var(--parch-70);
}
.quest-buy a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 165, 102, 0.45);
}
.quest-buy a:hover { color: var(--gold-lift); border-bottom-color: var(--gold-lift); }

.quests-note { margin: 0.9rem 0 0; font-size: 0.84rem; color: var(--parch-45); max-width: 46ch; }
.quests-error {
  margin: 0.7rem 0 0;
  border-left: 2px solid #b4553f;
  padding: 0.2rem 0 0.2rem 1.1rem;
  font-size: 0.9rem;
  color: var(--parch-70);
}

/* the tester address must stay copyable by eye, not only clickable */
.mailto {
  font-family: var(--font-body);
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 165, 102, 0.45);
  /* wrap the address to the next line rather than splitting it mid-word */
  overflow-wrap: break-word;
}
.mailto:hover { color: var(--gold-lift); border-bottom-color: var(--gold-lift); }

/* ---------- motion ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- a11y ---------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--ink-900);
  padding: 0.85rem 1.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  /* the header grows a second row for the nav on phones */
  section[id] { scroll-margin-top: 128px; }
  .subnav { top: var(--head-h, 118px); }
  .head-inner { min-height: 66px; flex-wrap: wrap; gap: 0.9rem; }
  .nav { gap: 1rem; order: 3; width: 100%; padding-bottom: 0.9rem; overflow-x: auto; }
  .nav::-webkit-scrollbar { display: none; }
  .nav { scrollbar-width: none; }

  /* the language switcher must never hide behind the nav's horizontal scroll —
     it is the only way to reach the SL/DE pages on a phone */
  .lang {
    position: absolute;
    top: 15px;
    right: var(--gut);
  }
  .hero { min-height: 0; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .case-facts { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 3rem 1fr; }
}

/* Phones. The page is long-form reading on a small screen: body copy comes up to
   full size, the small print stops being small print, and the vertical rhythm
   tightens so the scroll is shorter. */
@media (max-width: 640px) {
  :root { --section-y: 3.6rem; }

  h1 { font-size: clamp(2.35rem, 9.4vw, 3.1rem); }
  h2 { font-size: clamp(1.85rem, 7.4vw, 2.4rem); }
  h3 { font-size: 1.25rem; }

  .hero { padding-block: 3.4rem 3.8rem; }
  .hero h1 { margin-bottom: 1.1rem; }
  .hero-sub, .lede { font-size: 1.06rem; line-height: 1.62; }
  .hero-meta { gap: 0.45rem 1.2rem; margin-top: 2.1rem; padding-top: 1.2rem; }

  /* 0.95rem is a desktop-column size; on a phone it reads as fine print */
  .ticks li, .card p, .step p, .case-body p, .warn p, .warn ul, .faq details p { font-size: 1rem; }
  .note, .signup-note, .signup-error, .spots, .aside-line { font-size: 0.92rem; }
  .eyebrow { letter-spacing: 0.18em; margin-bottom: 0.95rem; }

  .section-head { margin-bottom: 2.2rem; }
  .btn-row { margin-top: 1.8rem; }
  .tight { margin-top: 2.2rem; }
  /* the form is the point of this section on a phone — do not push it down */
  .signup { margin-top: 0.4rem; }
  .signup .btn { width: 100%; }
  .faq details { padding: 1.15rem 0; }
  .foot-grid { gap: 2rem; margin-bottom: 2.2rem; }

  /* the nav scrolls sideways here — give the last item room and a real tap target */
  .nav { gap: 1.15rem; padding-right: 0.5rem; }
  .lang a { padding: 0.4rem 0.72rem; }
  /* the strip always overflows at this width — fade the edge so it reads as
     scrollable rather than as a word that got cut off */
  .subnav-inner {
    gap: 1.1rem;
    padding-right: 1.2rem;
    mask-image: linear-gradient(90deg, #000 85%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .subnav-label { font-size: 0.95rem; letter-spacing: 0.2em; }
  .subnav a { font-size: 0.72rem; padding: 0.85rem 0; }

  /* ---- the signup rows ----
     Name and count are two columns on a wide screen. On a phone that leaves the
     name a ~10ch gutter to wrap in — "Slovenija / Maribor 001 — Črni pečat"
     broke across three lines beside an empty gap. Let the row wrap instead: the
     name gets the full width, the count drops underneath it, indented to line up
     with the name rather than with the checkbox. */
  .quest {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 0.3rem;
    padding: 0.85rem 0.2rem;
  }
  .quest input[type="checkbox"] {
    /* a 17px box is a poor thumb target; this is the one control on the row */
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.1rem;
  }
  .quest-name { flex: 1 1 0; min-width: 0; }
  .quest-spots { flex: 1 0 100%; margin-left: calc(1.2rem + 0.75rem); }
  .quest-buy { padding-left: calc(1.2rem + 0.75rem); }
}

/* Narrow phones. Four languages made the switcher wide enough to sit on top of
   the wordmark, which is absolutely positioned so it cannot be scrolled away
   with the nav. The mark alone still reads as ENIGVIA at this size; the word is
   the part that can go. */
@media (max-width: 460px) {
  .brand-word { display: none; }
  .lang a { padding: 0.28rem 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- print ---------- */
@media print {
  body { background: #fff; color: #000; }
  .site-head, .subnav, .cta, .btn-row { display: none; }
}

/* ---------- invite popup ----------
   Built in JS from the page's own signup block, so it carries whatever that
   page already says, in that page's language. Nothing here renders until the
   script unhides it, and a visitor without JS never sees it at all. */
.invite-pop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(0.9rem, 4vw, 2rem);
  background: rgba(6, 8, 7, 0.74);
}
.invite-pop[hidden] { display: none; }

.invite-pop-panel {
  position: relative;
  width: min(620px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  background: var(--ink-700);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: invite-pop-in 0.32s var(--ease) both;
}
@keyframes invite-pop-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .invite-pop-panel { animation: none; }
}

.invite-pop h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 0 0 0.6rem; }
.invite-pop .invite-pop-lede { color: var(--parch-70); margin: 0 0 1.4rem; }
.invite-pop .signup { max-width: 100%; }

.invite-pop-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--parch-70);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.invite-pop-close:hover { color: var(--parchment); border-color: var(--gold); }