/* ─── Heera Mahal — survey flow (v2) ───
   Reference restraint: Renu Oberoi. White-led, thin letter-spaced type,
   underlined text links, no filled buttons, generous air.
   TOKENS BELOW ARE PROVISIONAL — swap to the SST HM Brand Guidebook when it lands.
   Nothing outside :root should hardcode a colour or family. */

@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/EBGaramond-400-Italic.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/EBGaramond-400.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/EBGaramond-500.woff2') format('woff2'); }
@font-face { font-family: 'Italiana'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Italiana-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/Jost-300.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Jost-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Jost-500.woff2') format('woff2'); }

:root {
  --bg: #F4EEE0;          /* aged cream stock. Sits high because the tooth below
                             darkens the rendered ground. */

  /* Paper TOOTH, not paper stain. Four lessons are baked in here:
     1. Fine grain (baseFrequency ~1.0) is sub-pixel — it averages out to flat
        tone, so the texture reads as absent. Tooth must be COARSE (~0.55) and
        contrast-boosted via feFuncA to register at all.
     2. Neutral grey noise desaturates cream toward grey, so each speckle is a
        warm colour composited THROUGH the turbulence alpha (feComposite in/in2)
        rather than laid over the top.
     3. Real tooth has HIGHLIGHTS as well as shadows. A dark speckle alone drags
        the ground down; pairing it with a light speckle on a different seed
        lifts the mean back up while KEEPING local contrast. Measured: two-tone
        holds texture sd 11.3 at the same lightness where single-tone gives 9.8.
     4. Heavy low-frequency mottle and an edge vignette read as staining and
        water damage. Mottle is a whisper; there is no vignette.
     One inline SVG, no image request, seamless 500px tile. */
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='3' stitchTiles='stitch' seed='9' result='n'/%3E%3CfeColorMatrix in='n' type='saturate' values='0' result='n2'/%3E%3CfeComposite in='SourceGraphic' in2='n2' operator='in'/%3E%3C/filter%3E%3Cfilter id='td' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch' seed='4' result='n'/%3E%3CfeColorMatrix in='n' type='saturate' values='0' result='n2'/%3E%3CfeComponentTransfer in='n2' result='mask'%3E%3CfeFuncA type='linear' slope='2.6' intercept='-0.45'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='SourceGraphic' in2='mask' operator='in'/%3E%3C/filter%3E%3Cfilter id='tl' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch' seed='7' result='n'/%3E%3CfeColorMatrix in='n' type='saturate' values='0' result='n2'/%3E%3CfeComponentTransfer in='n2' result='mask'%3E%3CfeFuncA type='linear' slope='2.6' intercept='-0.45'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='SourceGraphic' in2='mask' operator='in'/%3E%3C/filter%3E%3Crect width='500' height='500' fill='%236B5335' filter='url(%23m)' opacity='0.05'/%3E%3Crect width='500' height='500' fill='%23654B2C' filter='url(%23td)' opacity='0.38'/%3E%3Crect width='500' height='500' fill='%23FFFEF8' filter='url(%23tl)' opacity='0.40'/%3E%3C/svg%3E");

  /* Rebalanced for the aged base. Two things broke when the ground went cream:
     hairline was LIGHTER than the background (invisible), and every text token
     lost contrast. Ratios below are measured against the PAPER AS RENDERED
     (measured rgb(216,208,192)), not against --bg — the tooth sits on top and darkens the
     ground, so nominal maths reads optimistic. Each value is the LIGHTEST that
     still clears AA, i.e. as near the brand intent as the paper allows. */
  --ink: #2B2926;         /* 9.5:1 */
  --muted: #5B5853;       /* 4.6:1 */
  --taupe: #65554E;       /* 4.6:1 — as close to Sirjan's warm taupe as AA allows here */
  --hairline: #CDC3AE;    /* decorative rule, not text */
  --quiet: #8F887C;       /* placeholders only */
  --note: #74503C;        /* 4.6:1 */

  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --display: 'Italiana', var(--serif);
  --sans: 'Jost', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; }
html, body { margin: 0; padding: 0; }
html { background-color: var(--bg); }   /* iOS overscroll shows this */
body {
  background-color: var(--bg);
  background-image: var(--paper);
  background-size: 500px 500px;
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}
h1, p { margin: 0; }
input, button { font-family: inherit; }

@keyframes hm-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Minimal nav (Sirjan: "top right only Home button") ─── */
.nav {
  position: absolute; top: 0; right: 0; z-index: 5;
  padding: clamp(18px, 4vw, 30px) clamp(18px, 5vw, 44px);
}
.nav a {
  font-family: var(--sans); font-size: 10px; font-weight: 400;
  letter-spacing: 0.28em; text-indent: 0.28em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color 300ms;
}
.nav a:hover { color: var(--ink); }

/* ─── Cover ─── */
.cover {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;      /* in-app browser chrome is dynamic */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(56px, 12vh, 96px) 24px clamp(28px, 6vh, 44px);
  text-align: center;
}
.cover__inner {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 620px;   /* the wordmark sets this, not the fields */
  animation: hm-in 900ms ease-out both;
}

.cover__mark { margin-bottom: clamp(26px, 5vh, 40px); }

/* Tracked caps run ~8.9em wide across these 11 glyphs, so the vw term is set to
   clear the 24px gutters at 320px and the 620px inner at desktop. */
.cover__wordmark {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(26px, 8vw, 54px);
  line-height: 1.05;
  letter-spacing: 0.22em; text-indent: 0.22em;  /* indent offsets tracking for true centring */
  white-space: nowrap;
}
.cover__tagline {
  margin-top: 14px;
  font-family: var(--sans); font-size: 9.5px; font-weight: 400;
  letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase;
  color: var(--muted);
}

/* Legacy is carried by the monogram, the Italiana wordmark and the paper,
   not by a stated claim. */
.cover__lineage {
  margin-top: clamp(26px, 5vh, 38px);
  display: flex; flex-direction: column; gap: 9px;
}
.cover__date {
  font-family: var(--sans); font-size: 9.5px; font-weight: 400;
  letter-spacing: 0.28em; text-indent: 0.28em; text-transform: uppercase;
  color: var(--taupe);
}

/* ─── The gate ─── */
.gate {
  margin-top: clamp(38px, 7vh, 58px);
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; align-items: center;
}

/* Closed until the first tap. max-height (not grid 0fr/1fr) so the unfold
   still animates in older in-app browser engines. */
.gate__reveal {
  width: 100%;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 620ms ease, opacity 460ms ease;
}
.gate.is-open .gate__reveal { max-height: 260px; opacity: 1; }
.gate__inner {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding-bottom: 22px;
}
.gate__ask {
  font-family: var(--serif); font-style: italic;
  font-size: 15.5px; color: var(--muted);
}
.gate__fields { width: 100%; display: flex; flex-direction: column; gap: 4px; }

/* underline-only fields — no boxes, nothing loud */
.gate input {
  width: 100%; padding: 13px 2px;
  border: none; border-bottom: 1px solid var(--hairline);
  background: transparent; color: var(--ink);
  font-family: var(--serif); font-size: 17px;  /* 17px stops iOS zoom on focus */
  text-align: center;
  transition: border-color 300ms;
  border-radius: 0;           /* iOS rounds inputs by default */
  -webkit-appearance: none;
}
.gate input:focus { outline: none; border-bottom-color: var(--ink); }
.gate input::placeholder { color: var(--quiet); opacity: 1; }

/* Chrome stamps its own pale-blue background on autofilled inputs, which paints
   a solid rectangle straight over the paper. The usual fix (inset box-shadow in
   the page colour) is no good here — any solid fill kills the texture behind the
   field. So instead we never let that background arrive: its transition is
   stalled, and the glyph colour is forced with -webkit-text-fill-color, which
   is what autofill actually overrides. */
.gate input:-webkit-autofill,
.gate input:-webkit-autofill:hover,
.gate input:-webkit-autofill:focus,
.gate input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 100000s ease-in-out 0s, border-color 300ms;
}

.gate__note {
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; color: var(--note);
  min-height: 1.2em;
}

/* "Step in" — a quiet caps link, deliberately not a button */
.stepin {
  padding: 12px 4px 6px;
  background: none; border: none;
  border-bottom: 1px solid var(--taupe);
  color: var(--ink); cursor: pointer;
  font-family: var(--sans); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase;
  transition: opacity 300ms, border-color 300ms;
  min-height: 44px;
}
.stepin:hover { opacity: 0.6; }

/* ─── Footer line, every page ─── */
.contact {
  margin-top: auto;
  padding-top: clamp(36px, 8vh, 64px);
  font-family: var(--sans); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--quiet);
}
.contact a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; }
.contact a:hover { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .cover__inner { animation: none; }
  .gate__reveal { transition: none; }
}

/* ─── Screen 2: Our First Conversation ─── */
.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(74px, 14vh, 110px) 24px clamp(28px, 6vh, 44px);
  text-align: center;
}
.screen__inner {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 520px;
  animation: hm-in 900ms ease-out both;
}

.screen__eyebrow {
  font-family: var(--sans); font-size: 9.5px; font-weight: 400;
  letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase;
  color: var(--taupe);
}
.screen__title {
  margin-top: 20px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 5.4vw, 40px); line-height: 1.25;
  text-wrap: balance;
}
.prose {
  margin-top: clamp(26px, 5vh, 38px);
  display: flex; flex-direction: column; gap: 18px;
}
.prose p {
  font-size: 16.5px; line-height: 1.8; color: var(--muted);
  text-wrap: pretty;
}
.prose .lead { color: var(--ink); font-size: 17.5px; }

/* Quiet CTA — same register as "Step in", never a filled button */
.go {
  margin-top: clamp(34px, 6vh, 48px);
  display: inline-block;
  padding: 12px 4px 6px;
  border-bottom: 1px solid var(--taupe);
  color: var(--ink); text-decoration: none; cursor: pointer;
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: var(--sans); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase;
  transition: opacity 300ms;
  min-height: 44px;
}
.go:hover { opacity: 0.6; }

.counter {
  margin-top: 18px;
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; color: var(--taupe);
}

.aside {
  margin-top: clamp(44px, 9vh, 72px);
  max-width: 420px;
  padding-top: clamp(22px, 4vh, 30px);
  border-top: 1px solid var(--hairline);
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; line-height: 1.7; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .screen__inner { animation: none; }
}