/* ═══════════════════════════════════════════════════════════════════════
   Secret Tale: Blackbeard — campaign microsite
   Sections are the client's art at their mock ratios; real controls are
   positioned over the painted slots in container-query units (cqw) so
   everything scales exactly with the art. Breakpoint: 820px (mobile art).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #1a0f0a;
  --wood: #0d0803;
  --brown: #2c1810;
  --parchment: #c9a96e;
  --parchment-light: #e8d5a8;
  --parchment-dim: #8a7a5a;
  --gold: #d4af37;
  --bronze: #8b6914;
  --green: #1b3a2d;
  --error: #d98c7a;
  --ok: #a8cfa0;
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body: "Cormorant Garamond", Georgia, serif;
}

/* ─── Base ──────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--wood);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.modal-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

::selection { background: rgba(212, 175, 55, 0.35); color: #fff8e8; }

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

.skip-link {
  position: absolute;
  top: -48px; left: 12px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--brown);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-decoration: none;
  border: 1px solid var(--bronze);
  transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 12px; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ─── Site header (logo + main menu) ────────────────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: linear-gradient(180deg, #171009 0%, #0d0803 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.28);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}

.site-header__logo { display: block; flex: none; }
.site-header__logo img { width: auto; height: clamp(44px, 6vw, 58px); }

.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
}

.site-header__nav a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.site-header__nav a:hover,
.site-header__nav a:focus-visible {
  color: var(--gold);
  border-bottom-color: rgba(212, 175, 55, 0.6);
}
.site-header__nav a[aria-current="page"] { color: var(--gold); }

@media (max-width: 820px) {
  .site-header {
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px 12px;
  }
  .site-header__logo img { height: 48px; }
  .site-header__nav { gap: 18px; }
  .site-header__nav a { font-size: 11px; letter-spacing: 0.14em; }
}

/* ─── Section shell ─────────────────────────────────────────────────── */

.section {
  position: relative;
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  container-type: inline-size;
}

/* Registration + progress only exist once the expedition launches. */
body.phase-1 .phase-2-section { display: none; }

/* ─── CTA button (the painted Kickstarter button, real link) ────────── */

.cta-button {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
  transition: filter 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.cta-button img { width: 100%; height: auto; }
.cta-button:hover { filter: brightness(1.12) drop-shadow(0 0 14px rgba(212, 175, 55, 0.45)); }
.cta-button:active { transform: translate(-50%, -50%) scale(0.985); }

/* hero — seated top-right of the desk art, as in the mock */
.hero__cta { left: 72.4%; top: 16.5%; width: 38.1%; }

/* discuss — below "LET'S SOLVE THIS TOGETHER." */
.discuss__cta .cta-button { left: 49.1%; top: 87.7%; width: 37.5%; }

/* parchment strip */
.cta-button--strip { left: 51.1%; top: 43.7%; width: 33.6%; }

/* ─── Hero ──────────────────────────────────────────────────────────── */

.section--hero { aspect-ratio: 1536 / 1024; background-image: url("../images/hero.jpg"); }

/* ─── Timeline ──────────────────────────────────────────────────────── */

.section--timeline { aspect-ratio: 1800 / 600; background-image: url("../images/timeline.jpg"); }

.timeline__highlights {
  position: absolute;
  inset: 0;
  margin: 0; padding: 0;
  list-style: none;
}
.timeline__highlight {
  position: absolute;
  top: 47%;
  width: 6.6%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid transparent;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.timeline__highlight:nth-child(1) { left: 14.6%; }
.timeline__highlight:nth-child(2) { left: 34.1%; }
.timeline__highlight:nth-child(3) { left: 51.1%; }
.timeline__highlight:nth-child(4) { left: 68.9%; }
.timeline__highlight:nth-child(5) { left: 86.3%; }

.timeline__highlight.is-active {
  border-color: rgba(212, 175, 55, 0.9);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.55), inset 0 0 12px rgba(212, 175, 55, 0.3);
  animation: milestone-pulse 2.6s ease-in-out infinite;
}

@keyframes milestone-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(212, 175, 55, 0.45), inset 0 0 10px rgba(212, 175, 55, 0.25); }
  50%      { box-shadow: 0 0 26px rgba(212, 175, 55, 0.75), inset 0 0 14px rgba(212, 175, 55, 0.4); }
}

/* ─── Registration ──────────────────────────────────────────────────── */

.section--register { aspect-ratio: 1080 / 736; background-image: url("../images/register-section.jpg"); }

/* the form sits exactly where the mock drew the (now erased) slots:
   fields x 276-810 of 1080, first slot top y 148 of 736 */
.register__panel {
  position: absolute;
  left: 25.56%;
  width: 49.44%;
  top: 20.1%;
}

.register__form { display: flex; flex-direction: column; }

.field { margin-bottom: 1.7cqw; }

.field__input {
  width: 100%;
  height: 6.6cqw;
  padding: 0 1.6cqw;
  background: rgba(10, 6, 2, 0.55);
  border: 1px solid var(--bronze);
  border-radius: 3px;
  color: var(--parchment-light);
  font-family: var(--font-body);
  font-size: 2cqw;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field__input::placeholder {
  color: var(--parchment-dim);
  font-family: var(--font-display);
  font-size: 1.55cqw;
  letter-spacing: 0.22em;
}
.field__input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}
/* hide the number spinners — the parchment look has no room for them */
.field__input::-webkit-outer-spin-button,
.field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field__input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.register__gdpr {
  display: flex;
  align-items: flex-start;
  gap: 1.1cqw;
  margin: 0.6cqw 0 2.4cqw;
  font-size: 1.55cqw;
  line-height: 1.35;
  color: var(--parchment);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.register__gdpr input { flex: none; margin-top: 0.15cqw; }

.register__gdpr a { color: var(--gold); text-decoration: underline; }

/* ─── Buttons (leather + gold family) ───────────────────────────────── */

.btn {
  display: inline-block;
  padding: 1.1cqw 3cqw;
  background: linear-gradient(180deg, #2e1a0d 0%, #241207 55%, #1a0c05 100%);
  border: 1px solid var(--bronze);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(212, 175, 55, 0.18);
  color: var(--parchment-light);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, filter 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover {
  border-color: var(--gold);
  color: #fff3d6;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(212, 175, 55, 0.25);
}
.btn:disabled, .btn.is-busy { opacity: 0.65; cursor: wait; }

.btn--register {
  width: 68.7%;
  align-self: center;
  margin-top: 0.65cqw;
  height: 5.3cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9cqw;
  padding: 0 1cqw;
}

/* ─── GDPR / verify checkboxes ──────────────────────────────────────── */

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.7cqw;
  height: 1.7cqw;
  background: rgba(10, 6, 2, 0.6);
  border: 1px solid var(--bronze);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="checkbox"]:hover { border-color: var(--gold); }
input[type="checkbox"]:checked {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}
input[type="checkbox"]:checked::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.25cqw;
  font-weight: 700;
  line-height: 1;
}

/* ─── Form messages ─────────────────────────────────────────────────── */

.form-message {
  min-height: 1.2em;
  margin: 1.2cqw 0 0;
  font-size: 1.6cqw;
  line-height: 1.4;
  text-align: center;
  color: var(--parchment);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.form-message.is-error { color: var(--error); }
.form-message.is-ok { color: var(--ok); }

/* ─── Progress ──────────────────────────────────────────────────────── */

.section--progress { aspect-ratio: 1774 / 887; background-image: url("../images/progress-bg-clean.jpg"); }

.progress { position: absolute; inset: 0; }

/* track interior on the art: x 14.21% → 85.79%, y 45.77% → 54.45% */
.progress__fill {
  position: absolute;
  left: 14.21%;
  top: 45.9%;
  height: 8.4%;
  width: 0%;                      /* set by JS from the live count */
  background: linear-gradient(180deg,
    #0c2e12 0%, #1d5c24 22%, #2f8f3f 44%, #7ec97e 52%, #2f8f3f 60%, #1d5c24 80%, #0c2e12 100%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55), 0 0 10px rgba(46, 143, 63, 0.35);
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.progress__marker {
  position: absolute;
  top: 50.1%;
  left: 14.21%;                   /* set by JS to the fill edge */
  width: 8.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 8px rgba(212, 175, 55, 0.35));
  transition: left 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.progress__marker svg { width: 100%; height: 100%; display: block; }

/* ─── Discuss ───────────────────────────────────────────────────────── */

.section--discuss { aspect-ratio: 1080 / 880; background-image: url("../images/discuss-ext.jpg"); }

/* ─── CTA strip ─────────────────────────────────────────────────────── */

.section--cta-strip { aspect-ratio: 1080 / 230; background-image: url("../images/cta-strip.jpg"); }

/* ─── Guardian's Gate ───────────────────────────────────────────────── */

.section--gate { aspect-ratio: 1350 / 1660; background-image: url("../images/gate-section.jpg"); }

.gate__art { position: absolute; inset: 0; }

/* countdown digits inside the painted "VERIFICATION WINDOW OPENS IN" box */
.gate__timer {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 86%;
  height: 10.5%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.6cqw;
  letter-spacing: 0.1em;
  color: var(--parchment-light);
  text-shadow: 0 0 14px rgba(212, 175, 55, 0.45), 0 2px 4px rgba(0, 0, 0, 0.9);
  font-variant-numeric: tabular-nums;
}

/* open / done state — replaces the baked "not yet opened" copy */
.gate__overlay {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 64.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6cqw;
  padding: 1.8cqw 2cqw;
  background: rgba(10, 6, 3, 0.92);
  border: 1px solid rgba(139, 105, 20, 0.65);
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}
.gate__overlay[hidden] { display: none; }

.gate__overlay-text {
  margin: 0;
  font-size: 1.75cqw;
  line-height: 1.4;
  text-align: center;
  color: var(--parchment);
}

.btn--chamber { font-size: 1.6cqw; padding: 1cqw 2.6cqw; white-space: nowrap; }
.gate__enter[hidden] { display: none; }

/* gate states */
.section--gate .gate__overlay { display: none; }
.section--gate[data-state="open"] .gate__overlay,
.section--gate[data-state="done"] .gate__overlay { display: flex; }
.section--gate[data-state="open"] .gate__timer,
.section--gate[data-state="done"] .gate__timer { display: none; }

/* ─── Reward ────────────────────────────────────────────────────────── */

.section--reward { aspect-ratio: 1800 / 600; background-image: url("../images/reward.jpg"); }

/* ─── Tagline ───────────────────────────────────────────────────────── */

.section--tagline {
  aspect-ratio: 1080 / 94;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #171009;
}
.tagline__text {
  margin: 0;
  font-size: 2.55cqw;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #d9c49a;
}

/* ─── Footer ────────────────────────────────────────────────────────── */

.section--footer { aspect-ratio: 1774 / 588; background-image: url("../images/footer-clean.jpg"); }

/* The hotspot nav covers the whole footer art; let clicks fall through to
   the privacy/credit links beneath it, except on the hotspots themselves. */
.footer__links { position: absolute; inset: 0; pointer-events: none; }

.footer__hotspot {
  position: absolute;
  border-radius: 50%;
  pointer-events: auto;
  transition: box-shadow 0.25s ease;
}
.footer__hotspot:hover {
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.55), 0 0 18px rgba(212, 175, 55, 0.45);
}
.footer__hotspot--instagram { left: 15.7%; top: 46.8%; width: 6.6%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.footer__hotspot--facebook  { left: 22.5%; top: 46.3%; width: 6.6%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.footer__hotspot--logo {
  left: 73.8%; top: 23.8%;
  width: 15.3%; height: 44.2%;
  transform: none;
  border-radius: 6px;
}

/* middle box between the drawn dividers (x 30.9% / 69.6%, frame
   y 14.9% / 83.9% on footer-clean.jpg): company blurb + privacy link */
.footer__about {
  position: absolute;
  left: 32.4%; right: 31.9%;
  top: 17%; bottom: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.7cqw;
  text-align: center;
}
.footer__desc {
  margin: 0;
  font-size: 1.9cqw;
  line-height: 1.45;
  color: #503a18;
}
.footer__privacy {
  font-family: var(--font-display);
  font-size: 1.5cqw;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #6b4a1e;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.footer__privacy:hover { color: #3f2d10; }

/* legal band under the frame's bottom line */
.footer__legal {
  position: absolute;
  left: 2%; right: 2%;
  top: 86.8%;
  margin: 0;
  text-align: center;
  font-size: 1.55cqw;
  color: #5a4119;
}
.footer__legal a {
  color: #6b4a1e;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.footer__legal a:hover { color: #3f2d10; }

/* ─── Ending pages (success / fail) ─────────────────────────────────── */

.section--ending { background: var(--wood); }
.ending__art { display: flex; justify-content: center; }
.ending__art img { width: min(1080px, 100%); height: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   GUARDIAN'S CHAMBER MODAL
   ═══════════════════════════════════════════════════════════════════════ */

.modal { position: fixed; inset: 0; z-index: 100; }
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 2, 1, 0.85);
  backdrop-filter: blur(3px);
}

.modal__panel {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(940px, 94vw);
  max-height: 96vh;
  container-type: inline-size;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(139, 105, 20, 0.4);
}

.modal__close {
  position: absolute;
  right: 2.6%;
  top: 3.4%;
  z-index: 5;
  width: 6%;
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  color: transparent;             /* the ✕ is painted into the panel art */
  font-size: 2.6cqw;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: box-shadow 0.2s ease, color 0.2s ease;
}
.modal__close:hover { color: rgba(212, 175, 55, 0.85); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.4); }

/* the ✕ is painted into the password panel but not the verify template —
   reveal the real glyph whenever the verify view is the visible one */
.modal__panel:has(.modal__view--password[hidden]) .modal__close { color: rgba(201, 169, 110, 0.85); }

/* ── View 1: password ── */

.modal__view { position: relative; }
.modal__view[hidden] { display: none; }

.modal__view--password {
  aspect-ratio: 928 / 634;
  background: url("../images/password-modal-clean.jpg") 0 0 / 100% 100% no-repeat, #120b06;
}

.chamber__field {
  position: absolute;
  left: 49%;
  width: 40.5%;
  top: 68.5%;
  height: 7.1%;
}
.chamber__input {
  width: 100%;
  height: 100%;
  padding: 0 4.5cqw 0 1.6cqw;
  background: rgba(8, 5, 2, 0.72);   /* translucent: the painted lock glyph
                                        at the slot's right shows through */
  border: 1px solid #6b5626;
  border-radius: 4px;
  color: var(--parchment-light);
  font-family: var(--font-body);
  font-size: 2cqw;
  letter-spacing: 0.05em;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.chamber__input::placeholder { color: var(--parchment-dim); font-size: 1.9cqw; }
.chamber__input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

.chamber__submit {
  position: absolute;
  left: 48.7%;
  width: 41.6%;
  top: 80.3%;
  height: 10.3%;
  font-size: 1.9cqw;
  letter-spacing: 0.16em;
  padding: 0;
}

.form-message--chamber {
  position: absolute;
  left: 44%;
  width: 49%;
  top: 91.6%;
  margin: 0;
  font-size: 1.55cqw;
}

/* verify view: the message lives in the gap above the coordinate band —
   the button below it must stay clickable at all times */
.modal__view--verify .form-message--chamber {
  left: 22%;
  width: 56%;
  top: 46.4%;
  font-size: 1.6cqw;
}

/* ── View 2: the one-shot coordinate verification ── */

.modal__view--verify {
  aspect-ratio: 944 / 692;
  background: url("../images/solution-modal.jpg") 0 0 / 100% 100% no-repeat, #120b06;
}

.verify-message-slot {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 46.6%;
  text-align: center;
}

.coords {
  position: absolute;
  left: 6.5%;
  right: 6.5%;
  top: 54.8%;
  display: flex;
  justify-content: space-between;
  border: 0;
  margin: 0;
  padding: 0;
}

.coords__group {
  display: flex;
  gap: 4.4cqw;
  margin: 0;
  padding: 0;
  border: 0;
  width: 40.5%;
}
.coords__group:first-child { margin-left: 0.4%; }
.coords__group:last-of-type { margin-right: 0.4%; }

.coords__field { flex: 1 1 0; position: relative; }

.coords__field label {
  display: block;
  margin-bottom: 0.9cqw;
  font-family: var(--font-display);
  font-size: 1.35cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #c9b58a;
  text-align: center;
}

.coords__input, .coords__select {
  width: 100%;
  height: 6.1cqw;
  padding: 0 0.5cqw;
  background: rgba(8, 5, 2, 0.72);
  border: 1px solid #6b5626;
  border-radius: 3px;
  color: var(--parchment-light);
  font-family: var(--font-display);
  font-size: 2.3cqw;
  text-align: center;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.coords__input:focus, .coords__select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
}
.coords__input::-webkit-outer-spin-button,
.coords__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.coords__input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.coords__select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9b58a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12% center;
  background-size: 1.4cqw;
  padding-right: 2.6cqw;
  text-align-last: center;
}
.coords__select option { background: #1a120a; color: var(--parchment-light); }

/* degree / minute marks sitting between the boxes, as in the design */
.coords__field--degrees::after,
.coords__field--minutes::after {
  position: absolute;
  top: 55%;
  right: -3.6cqw;
  font-family: var(--font-display);
  font-size: 1.9cqw;
  color: #c9b58a;
  pointer-events: none;
}
.coords__field--degrees::after { content: "\00B0"; }
.coords__field--minutes::after { content: "\2032"; }

.verify__confirm {
  position: absolute;
  left: 24%;
  right: 22%;
  top: 83%;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  font-size: 1.85cqw;
  color: var(--parchment);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.verify__confirm input { width: 2.4cqw; height: 2.4cqw; flex: none; }
.verify__confirm input:checked::after { font-size: 1.8cqw; }

.btn--verify {
  position: absolute;
  left: 21%;
  width: 58.5%;
  top: 89.9%;
  height: 7.6%;
  font-size: 1.95cqw;
  letter-spacing: 0.18em;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — the portrait art set takes over at 820px
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {

  .section--hero    { aspect-ratio: 864 / 1821; background-image: url("../images/hero-mobile.jpg"); }
  .section--timeline{ aspect-ratio: 887 / 1774; background-image: url("../images/timeline-mobile.jpg"); }
  .section--register{ aspect-ratio: 864 / 1821; background-image: url("../images/register-bg-mobile.jpg"); }
  .section--discuss { aspect-ratio: 887 / 1774; background-image: url("../images/discuss-mobile.jpg"); }
  .section--reward  { aspect-ratio: 887 / 1774; background-image: url("../images/reward-mobile.jpg"); }

  /* hero button — under the painted "JOIN THE EXPEDITION" divider */
  .hero__cta { left: 50%; top: 57%; width: 64%; }

  /* timeline: vertical line of icons down the left. Ring centres/sizes
     measured on timeline-mobile.jpg — painted circles sit at x 18.3%,
     y 23.5→86.0%, ⌀ 20% of W; ring keeps the desktop ~0.8 fit inside. */
  .timeline__highlight { top: auto; width: 16%; }
  .timeline__highlight:nth-child(1) { left: 18.3%; top: 23.5%; }
  .timeline__highlight:nth-child(2) { left: 18.3%; top: 39.1%; }
  .timeline__highlight:nth-child(3) { left: 18.3%; top: 54.6%; }
  .timeline__highlight:nth-child(4) { left: 18.3%; top: 70.3%; }
  .timeline__highlight:nth-child(5) { left: 18.3%; top: 86%; }

  /* register: the painted panel spans most of the portrait art */
  .register__panel { left: 13%; width: 74%; top: 15.5%; }
  .field { margin-bottom: 4.4cqw; }
  .field__input { height: 9.4cqw; font-size: 3.9cqw; }
  .field__input::placeholder { font-size: 3cqw; }
  .register__gdpr { font-size: 3.1cqw; gap: 2.2cqw; margin-bottom: 5cqw; }
  input[type="checkbox"] { width: 3.4cqw; height: 3.4cqw; }
  input[type="checkbox"]:checked::after { font-size: 2.5cqw; }
  .btn--register { width: 88%; font-size: 3.7cqw; padding: 2.4cqw 1cqw; }
  .form-message { font-size: 3.1cqw; }

  /* progress stays on the landscape art — full width */
  .section--progress { aspect-ratio: 1774 / 887; }

  /* the portrait art closes with "LET'S SOLVE THIS TOGETHER." — no room
     for the button, and the strip right below already carries the CTA */
  .discuss__cta { display: none; }

  .cta-button--strip { left: 50%; top: 43.7%; width: 72%; }

  /* gate: same art, roomier digits */
  .gate__timer { font-size: 6.4cqw; top: 85.5%; }
  /* open/done panel: solid, and sized to sit snugly over the baked
     "not yet opened" copy (63.5–77.5% of the art) so nothing bleeds
     through or spills onto the painted countdown box below */
  .gate__overlay { left: 12%; right: 12%; top: 62%; min-height: 20.5cqw; justify-content: center; gap: 1.5cqw; padding: 2.5cqw; background: #0a0603; }
  .gate__overlay-text { font-size: 3.5cqw; }
  .gate__overlay .btn--chamber { font-size: 3.2cqw; padding: 1.8cqw 4cqw; }
  .btn--chamber { font-size: 3.4cqw; padding: 2.2cqw 4cqw; }

  .tagline__text { font-size: 4.6cqw; }

  .footer__hotspot--instagram, .footer__hotspot--facebook { width: 9.5%; }
  .footer__hotspot--logo { left: 71%; width: 20%; top: 20%; height: 50%; }
  .footer__about { left: 33.5%; right: 33%; top: 15%; bottom: 15%; gap: 2.4cqw; }
  .footer__desc { font-size: 2.6cqw; }
  .footer__privacy { font-size: 2.5cqw; }
  /* the band under the frame fits one small line — drop the middle clause */
  .footer__legal { font-size: 2.4cqw; top: 85.8%; }
  .footer__legal-rights { display: none; }

  /* modal: taller panels on small screens */
  .modal__panel { width: 96vw; }
  .chamber__input { font-size: 3.9cqw; padding-right: 9cqw; }
  .chamber__input::placeholder { font-size: 3.6cqw; }
  .chamber__submit { font-size: 3.6cqw; }
  .form-message--chamber { font-size: 3cqw; }
  .coords__group { gap: 4.2cqw; }
  .coords__field label { font-size: 2.7cqw; }
  .coords__input, .coords__select { height: 11.6cqw; font-size: 4.4cqw; }
  .coords__select { background-size: 2.8cqw; padding-right: 5cqw; }
  .coords__field--degrees::after, .coords__field--minutes::after { font-size: 2.8cqw; right: -4.2cqw; top: 60%; }
  .modal__view--verify .form-message--chamber { font-size: 3cqw; }
  .verify__confirm { font-size: 3.5cqw; gap: 2.6cqw; }
  .verify__confirm input { width: 4.6cqw; height: 4.6cqw; }
  .verify__confirm input:checked::after { font-size: 3.4cqw; }
  .btn--verify { font-size: 3.7cqw; }
}

/* ─── Motion preferences ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .timeline__highlight.is-active { animation: none; }
  .progress__fill, .progress__marker, .cta-button, .btn { transition: none; }
}