/* Shared site styles: tokens, base, header, waitlist form, footer. */
:root {
  --jet: #1a1210;
  --jet-2: #241a17;
  --chestnut: #7a4430;
  --chestnut-deep: #3a211a;
  --copper: #d9824f;
  --copper-bright: #ee9158;
  --honey: #dba54f;
  --ash: #bdb6ae;
  --plum: #7a3562;
  --label: #f1ece6;
  --label-2: #e2dad1;
  --text: #f1ece6;
  --text-soft: #cfc3b8;
  --ink: #1a1210;
  --ink-soft: #4a3b34;
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 78rem;
}

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

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

body {
  margin: 0;
  background: var(--jet);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  caret-color: var(--copper-bright);
  accent-color: var(--copper);
  scrollbar-color: var(--chestnut) var(--jet);
}

::selection { background: var(--copper-bright); color: var(--ink); }

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

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

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

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  background: var(--label); color: var(--ink); padding: 0.75rem 1rem; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

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

/* ---------- Header ---------- */
.site-header { padding-block: 1rem; }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem;
}
.logo-tab {
  display: flex; align-items: center; gap: 0.5rem; background: var(--label); border-radius: 0 0 14px 14px;
  padding: 0.5rem 0.9rem 0.6rem; margin-top: -1rem; margin-right: auto; text-decoration: none; color: var(--ink);
}
.logo-tab img { width: 3.5rem; height: 3.5rem; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; padding-right: 0.25rem; }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.25rem; }
.main-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.75rem;
  text-decoration: none; font-weight: 500; color: var(--text-soft);
}
.main-nav a:hover { color: var(--text); text-decoration: underline; }
.nav-join {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 1.1rem; margin-left: 0.5rem;
  background: var(--copper-bright); color: var(--ink); font-weight: 700; border-radius: 999px; text-decoration: none;
}
.nav-join:hover { background: var(--honey); color: var(--ink); }
/* Phones: logo and Join share the first row, the four links sit on the second. */
@media (max-width: 48rem) {
  .logo-tab { order: 1; }
  .nav-join { order: 2; margin-left: 0; }
  .main-nav { order: 3; flex-basis: 100%; margin-left: -0.75rem; }
  .logo-tab img { width: 2.75rem; height: 2.75rem; }
  .wordmark { font-size: 1.0625rem; }
}


h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }

/* ---------- Waitlist form ---------- */
.waitlist { margin-top: 1.5rem; max-width: 40rem; }
.waitlist-form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.waitlist-form input[type="email"] {
  flex: 1 1 14rem; min-height: 56px; padding: 0 1.1rem; font: inherit; font-size: 1.0625rem;
  background: var(--label); color: var(--ink); border: 2px solid var(--label); border-radius: 10px;
}
.waitlist-form input::placeholder { color: #6a5b53; }
.waitlist-form input:focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; }
.waitlist-form button {
  flex: 0 0 auto; min-height: 56px; padding: 0 1.6rem; font: inherit; font-weight: 700; font-size: 1.0625rem;
  background: var(--copper-bright); color: var(--ink); border: 2px solid var(--copper-bright); border-radius: 10px; cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.waitlist-form button:hover { background: var(--honey); border-color: var(--honey); }
.waitlist-form button:active { transform: translateY(1px); }
.waitlist-form button:disabled { opacity: 0.7; cursor: progress; }
.form-msg { margin: 0.75rem 0 0; font-weight: 500; min-height: 1.5rem; }
.form-msg:not(:empty) { font-weight: 700; }

/* Sign-up confirmation: replaces the form once the sign-up is accepted. */
.form-done[hidden] { display: none; }
.form-done { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; align-items: start; color: var(--text); }
.form-done svg { grid-row: span 2; color: var(--copper-bright); margin-top: 0.1rem; }
.form-done-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; }
.form-done-text { margin: 0.4rem 0 0; overflow-wrap: anywhere; }
/* Programmatic focus target only: not an interactive control, so no focus ring. */
.form-done:focus { outline: none; }
.waitlist[data-done] > .waitlist-form, .waitlist[data-done] > .form-msg, .waitlist[data-done] > .fine { display: none; }
.fine { font-size: 0.9375rem; color: var(--text-soft); margin: 0.5rem 0 0; max-width: 56ch; }


/* ---------- Footer ---------- */
.site-footer { background: var(--jet-2); padding-block: 2.5rem 3rem; font-size: 0.9375rem; color: var(--text-soft); }
.site-footer .wrap { display: grid; gap: 1.25rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.site-footer a { display: inline-flex; min-height: 44px; align-items: center; color: var(--text); }
.site-footer p { margin: 0; max-width: 60ch; }

.main-nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--copper-bright); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }

/* Cookie choice bar: equal weight for accept and decline, no overlay. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--label); color: var(--ink);
  padding: 1rem var(--gutter); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between;
}
.consent p { margin: 0; max-width: 62ch; font-size: 0.9375rem; }
.consent a { color: var(--ink); }
.consent .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.consent button {
  min-height: 44px; padding: 0 1.4rem; font: inherit; font-weight: 700; color: var(--ink); background: var(--label);
  border: 2px solid var(--ink); border-radius: 999px; cursor: pointer;
}
.consent button:hover { background: var(--ink); color: var(--label); }
.consent :focus-visible { outline-color: var(--ink); }
body.has-consent-bar { padding-bottom: var(--consent-h, 0); }
/* The fixed bar must never hide what a visitor is working on. Scroll padding
   keeps anchor jumps and focused fields clear of it (WCAG 2.4.11), and the
   margin reserves room for the button and consent line below the email field. */
html { scroll-padding-bottom: var(--consent-h, 0px); }
body.has-consent-bar .waitlist-form input { scroll-margin-bottom: 15rem; }
/* The Join jump lands on a sign-up band: start at its content, not its padding. */
.band[id="join"] { scroll-margin-top: -3rem; }

/* Phones: a compact bar that takes a small fraction of the screen. Accept and
   Decline stay equal in size and weight, side by side, 44px tall. The second
   sentence is dropped here because the two button labels already say it. */
@media (max-width: 40rem) {
  .consent { padding: 0.75rem var(--gutter); gap: 0.5rem; }
  .consent p { font-size: 0.875rem; line-height: 1.4; }
  .consent-more { display: none; }
  .consent .actions { flex: 1 1 100%; flex-wrap: nowrap; }
  .consent button { flex: 1 1 0; padding: 0 1rem; }
}

/* Short screens (landscape phones): one row, text left and the pair of buttons
   right, so the bar stays a thin strip. */
@media (max-height: 30rem) {
  .consent { flex-wrap: nowrap; padding: 0.5rem var(--gutter); gap: 1rem; }
  .consent p { flex: 1 1 auto; max-width: none; font-size: 0.875rem; line-height: 1.35; }
  .consent-more { display: none; }
  .consent .actions { flex: 0 0 auto; }
  .consent button { flex: 0 0 auto; padding: 0 1.2rem; }
}

.link-button { display: inline-flex; min-height: 44px; align-items: center; padding: 0; font: inherit; color: var(--text); background: none; border: 0; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; cursor: pointer; }
.link-button:hover { color: var(--copper-bright); }