/* yourque.app, shared stylesheet. The tokens, the wordmark font, the reset, the
   column, the nav, the notify block, the footer, the buttons and the motion rules
   live here so every page draws them from one place. Rules that belong to one
   page stay in that page's own <style> block, after this file. */

/* Lato Black 900, self-hosted, SIL OFL 1.1: see /fonts/OFL.txt. This file is the
   subset the wordmark needs (the glyphs Y o u r e and a space); the Q is an inline
   SVG. The full face stays at /fonts/Lato-Black.woff2. */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/Lato-Black-wordmark.woff2") format("woff2");
}

:root {
  --bg: #F3F1E9;
  --surface: #FBFAF5;
  --text: #26302A;
  --muted: #66705F;
  --accent: #2E4A3C;
  --gold: #A8894E;
  --gold-soft: #C9A96A;
  /* Text gold. --gold is 2.92:1 on the cream, fine for rules, dots and large
     numbers but not for small text, so every gold text under 1.2rem uses this:
     4.95:1 on the page, 5.35:1 on a card (8.97:1 and 8.12:1 in dark). In dark
     mode it is the same value as --gold. The star tokens carry the same pair. */
  --gold-text: #7E6430;
  --border: #E3E0D4;
  --band-bg: #2E4A3C;
  --band-text: #F3F1E9;
  --band-muted: #C8CFC3;
  --star: #7E6430;
  --star-empty: #D3CFC0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141714;
    --surface: #1C211D;
    --text: #ECEAE0;
    --muted: #A3AA98;
    --accent: #8FB49E;
    --gold: #D4B276;
    --gold-soft: #D4B276;
    --gold-text: #D4B276;
    --border: #2C332D;
    --band-bg: #1A2B21;
    --band-text: #F3F1E9;
    --band-muted: #AEBBAB;
    --star: #D4B276;
    --star-empty: #3A423B;
  }
}

/* ---------- Reset and body ---------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
[hidden] { display: none !important; }

/* One column width sitewide: 680px for reading copy, 960px for cards and grids.
   With the 24px padding the wide column's content runs 184 to 1096 at 1280px,
   the same edges as the nav. */
.col { max-width: 680px; margin: 0 auto; padding: 0 24px; }
.col.wide { max-width: 960px; }

.eyebrow {
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: 12px;
  text-wrap: balance;
}

/* ---------- Nav ---------- */

.nav { border-bottom: 1px solid var(--border); }
.nav-inner {
  max-width: 960px; margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.02rem;
  color: var(--text); text-decoration: none;
}
.brand .bmark {
  width: 28px; height: 28px; border-radius: 8px; background: #2E4A3C;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand .bmark svg { width: 28px; height: 28px; }
/* The wordmark: Lato Black at the element's own font size, letter-spacing 0. The inline svg box is the ring's outer square: its height is the cap height and its bottom edge sits on the baseline (cap unit where supported, em fallback first). */
.wordmark{font:900 1em/1 "Lato","Segoe UI",system-ui,sans-serif;letter-spacing:0;white-space:nowrap;display:inline-block}
.wordmark svg{display:inline-block;vertical-align:baseline;overflow:visible;width:.7285em;height:.7285em;width:1cap;height:1cap;margin:0 0.0358125em 0 0.03125em}
.links { display: flex; gap: 18px; font-size: 0.92rem; flex-wrap: wrap; }
/* Each link carries 8px of vertical padding so its tap target is at least 24px
   tall on a phone; the bar's own padding is 6px less than it was, so the nav
   keeps its height at desktop widths. */
.links a {
  color: var(--muted); text-decoration: none;
  position: relative; padding: 8px 0; transition: color 0.2s ease;
}
.links a::after {
  content: ""; position: absolute; left: 0; bottom: 4px;
  width: 100%; height: 1.5px; border-radius: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.links a:hover { color: var(--text); }
.links a:hover::after, .links a:focus-visible::after { transform: scaleX(1); }
.links a.active { color: var(--gold-text); font-weight: 600; }
/* Phone widths: the links wrap under the brand, so spread them edge to edge instead of packing left. */
@media (max-width: 499px) {
  .links { width: 100%; justify-content: space-between; gap: 0; }
}

/* ---------- Notify ---------- */

.notify {
  padding: 72px 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.notify h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 16px; }
.notify p { color: var(--muted); max-width: 30em; margin: 0 auto 16px; }
.notify p:last-child { margin-bottom: 0; }
.notify form { margin-top: 24px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.notify input[type="email"] {
  font: inherit; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); color: var(--text);
  min-width: 240px; flex: 1 1 240px; max-width: 340px;
}
.notify input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.notify button {
  font: inherit; font-weight: 600;
  padding: 12px 24px; border: none; border-radius: 12px;
  background: var(--accent); color: var(--bg); cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.notify button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(46, 74, 60, 0.28);
}
.notify button:active { transform: translateY(0); box-shadow: none; }
.notify .micro { font-size: 0.85rem; margin-top: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hidden-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 499px) {
  .notify form { gap: 12px; }
  .notify input[type="email"], .notify button { width: 100%; }
  .notify input[type="email"] { max-width: none; }
}

/* ---------- Buttons (links styled as buttons; forms style their own) ---------- */

.btn {
  display: inline-block; padding: 12px 22px; border-radius: 12px; text-decoration: none;
  font-weight: 600; font-size: 0.98rem; transition: opacity 0.2s ease;
}
.btn:hover { opacity: 0.88; }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn.primary { background: var(--accent); color: var(--bg); }
.btn.secondary { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }

/* ---------- Footer ---------- */

footer {
  text-align: center; padding: 48px 24px 48px;
  font-size: 0.88rem; color: var(--muted);
  border-top: 1px solid var(--border);
}
/* The notify block carries its own bottom border, so the footer's top border would double it. */
.notify + footer { border-top: none; }
footer .slogan-small { color: var(--gold-text); font-weight: 600; margin-bottom: 12px; }
footer a { color: var(--muted); }
.foot-bar {
  max-width: 912px; margin: 24px auto 0; /* the nav's content width: 960 minus its 24px padding each side */
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap;
  font-size: 0.78rem;
}
/* 8px of vertical padding per link for the tap target; the bar's top margin and
   the footer's bottom padding are 8px less than they were, so the ink sits where it did. */
.foot-bar a { font-size: 0.78rem; display: inline-block; padding: 8px 0; }
/* Phone widths: copyright on its own row, then Terms flush left and Privacy flush right, dot hidden. */
@media (max-width: 499px) {
  .foot-bar > span { width: 100%; }
  .foot-legal { display: flex; justify-content: space-between; }
  .foot-legal .sep { display: none; }
}

/* ---------- Language switcher ----------
   Written into every page's footer by site-tools/localise.mjs: plain links, one
   per language, the current one marked with aria-current. The gift page has no
   footer, so there it closes main instead. */
.lang {
  max-width: 912px; margin: 16px auto 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 16px; font-size: 0.78rem;
}
.lang a { display: inline-block; padding: 8px 0; color: var(--muted); text-decoration: none; }
.lang a:hover { color: var(--text); text-decoration: underline; }
.lang a[aria-current="page"] { color: var(--gold-text); font-weight: 600; }

/* ---------- Motion ---------- */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dot-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

/* The js class is added by /assets/site.js before the first paint; without it
   the reveal blocks stay visible, so the page never depends on the script. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}