/* ============================================================
   SnapSite HQ - Base / Reset / Shell
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  /* subtle vertical luxe gradient + faint gold horizon, kept under 8% */
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(200,162,75,0.05), transparent 60%),
    linear-gradient(180deg, #0a0a0c 0%, #08080a 40%, #060607 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

input, textarea, select { -webkit-appearance: none; appearance: none; }
::placeholder { color: var(--ink-4); }

::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }

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

/* numerals everywhere look tabular + crisp */
.num, .mono { font-family: var(--font-num); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }

/* ---- App frame ---- */
#app {
  min-height: 100dvh;
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}

/* scroll region (per-view) */
.screen {
  min-height: 100dvh;
  padding-top: calc(var(--safe-top));
  padding-bottom: calc(var(--nav-h) + var(--safe-bot) + 28px);
  animation: viewIn var(--dur) var(--ease-out);
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.view { padding: 0 var(--sp-4); }

/* ---- Top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  padding: calc(var(--safe-top) + 14px) var(--sp-4) 12px;
  display: flex; align-items: center; gap: var(--sp-3);
  background: linear-gradient(180deg, rgba(8,8,10,0.92), rgba(8,8,10,0.0));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.topbar .tb-title { font-size: var(--t-h1); font-weight: 600; letter-spacing: -0.02em; }
.topbar .tb-sub { font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.14em; }
.topbar .tb-grow { flex: 1; }

.icon-btn {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--hairline);
  color: var(--ink-2); transition: transform var(--dur-fast) var(--ease), background var(--dur-fast);
}
.icon-btn:active { transform: scale(0.92); background: var(--surface-2); }
.icon-btn svg { width: 19px; height: 19px; }

/* ---- Section heading ---- */
.section-head {
  display: flex; align-items: baseline; gap: var(--sp-2);
  margin: var(--sp-6) 0 var(--sp-3);
}
.section-head h2 { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.01em; }
.section-head .eyebrow {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-3); font-weight: 600;
}
.section-head .eyebrow::before {
  content: ""; display: inline-block; width: 14px; height: 1px;
  background: var(--gold-line); vertical-align: middle; margin-right: 8px;
}
.section-head .link { margin-left: auto; font-size: var(--t-sm); color: var(--ink-3); }
.section-head .link:active { color: var(--gold); }

.muted { color: var(--ink-3); }
.faint { color: var(--ink-4); }
.gold  { color: var(--gold); }
.serif { font-family: var(--font-mark); }
.it    { font-style: italic; }

/* horizontal scroll row */
.h-scroll {
  display: flex; gap: var(--sp-3); overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4) 2px;
}
.h-scroll > * { scroll-snap-align: start; flex: 0 0 auto; }

.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.row   { display: flex; align-items: center; gap: var(--sp-3); }
.row.between { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }