/* ═══════════════════════════════════════════════════════════════════════════
   Ta-ala — www.ta-ala.com
   Wave 1 shell. Aman-grade: restraint, immense whitespace, cinematic calm.

   Design DNA (verified against aman.com's compiled stylesheets):
     · 14px type scale (see the note on :root below — we honour the SCALE
       without inheriting the a11y bug)
     · border-radius: 0 everywhere. Sharp rectangles.
     · Buttons are wide, not tall. The WIDTH is the luxury signal.
     · Headings are never bold. 400, always.
     · The lockup: a 10px letterspaced eyebrow above a 400-weight serif line.
     · Asymmetric transitions: colour moves slowly, shadow snaps.

   Family: shares --olive and the Gloock/Space Grotesk/Geist Mono trio with
   the Ta-ala legal portal. One register more serene — sharper, quieter.

   ACCESSIBILITY IS BINDING. Elders are the primary users.
   Every functional text pairing below is measured and annotated. Where Aman's
   own palette fails WCAG AA, we do not follow it.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url("/fonts.css"); /* self-hosted woff2. zero third-party requests. */

/* ─── Tokens ──────────────────────────────────────────────────────────────── */

:root {
  /* LIGHT — "Warm Stone" */
  --stone-0: #faf8f3;   /* page */
  --stone-1: #f3eee7;   /* bands */
  --stone-2: #e6e2db;   /* cards */
  --stone-hair: #dad9d7;
  --stone-ink: #1c1a15;
  --stone-ink-2: #33302a;
  --stone-muted: #6f6b60;
  --olive: #63604a;     /* accent — shared with the legal portal. Family DNA. */

  /* DARK — "Warm Charcoal". Not an inversion. The same hotel at night,
     lit by lamplight. The hue stays warm; the text is sand, never white;
     the accent lifts to low brass. */
  --night-0: #17150f;
  --night-1: #1f1c15;
  --night-2: #2a261d;
  --night-hair: #3a3529;
  --night-ink: #ece5d8;   /* warm sand */
  --night-ink-2: #d3cabb;
  --night-muted: #b8b0a0;
  --night-muted-2: #928b7c;
  --brass: #c9a86a;       /* the lamp */

  /* Type */
  --font-display: "Bodoni Moda", "Gloock", Georgia, serif;   /* CD, first cut */
  --font-sans: "Work Sans", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;   /* CD, first cut */
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --d-snap: 100ms;
  --d-quick: 200ms;
  --d-chrome: 350ms;
  --d-color: 400ms;
  --d-reveal: 500ms;
  --e-expo: cubic-bezier(0.19, 1, 0.22, 1);   /* easeOutExpo */
  --e-quint: cubic-bezier(0.23, 1, 0.32, 1);  /* easeOutQuint */

  /* Structure */
  --container: 1440px;
  --header-h: 88px;
  --header-h-min: 56px;
  --gutter: 24px;

  color-scheme: light dark;
}

@media (min-width: 720px)  { :root { --gutter: 40px; } }
@media (min-width: 1100px) { :root { --gutter: 64px; } }

/* Semantic layer — this is what components consume. Themes only remap these. */
:root,
[data-theme="light"] {
  --bg: var(--stone-0);
  --bg-1: var(--stone-1);
  --bg-2: var(--stone-2);
  --line: var(--stone-hair);          /* decorative hairline ONLY — 1.33:1 */
  --line-strong: var(--stone-muted);  /* input borders / focus — 5.01:1 ✓ ≥3:1 */
  --fg: var(--stone-ink);             /* 16.38:1 on --bg  AAA */
  --fg-2: var(--stone-ink-2);         /* 12.39:1 on --bg  AAA */
  --fg-muted: var(--stone-muted);     /*  5.01:1 on --bg  AA  */
  --accent: var(--olive);             /*  5.99:1 on --bg  AA  */
  --accent-fg: var(--stone-0);        /*  5.99:1 on --accent  AA */
  --focus: var(--olive);              /*  5.99:1 — visible ring */
  --grain-blend: multiply;
  --grain-opacity: 0.05;
  /* The atmosphere. Warm, never grey — the fields must READ as light, not haze. */
  --atmo-1: rgba(201, 168, 106, 0.34);  /* low amber — the sun not yet up */
  --atmo-2: rgba(99, 96, 74, 0.13);     /* olive shadow */
  --atmo-3: rgba(214, 205, 189, 0.80);  /* warm stone settling at the base */
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: var(--night-0);
  --bg-1: var(--night-1);
  --bg-2: var(--night-2);
  --line: var(--night-hair);          /* decorative hairline ONLY — 1.50:1 */
  --line-strong: var(--night-muted);  /* input borders / focus — 8.48:1 ✓ */
  --fg: var(--night-ink);             /* 14.57:1 on --bg  AAA */
  --fg-2: var(--night-ink-2);         /* 11.4:1  on --bg  AAA */
  --fg-muted: var(--night-muted);     /*  8.48:1 on --bg  AAA */
  --accent: var(--brass);             /*  8.08:1 on --bg  AAA */
  --accent-fg: var(--night-0);        /*  8.08:1 on --accent  AAA */
  --focus: var(--brass);
  --grain-blend: overlay;
  --grain-opacity: 0.07;
  /* At night the same room, lit by one lamp. The amber stays; everything
     around it recedes into warm charcoal. Never blue, never black. */
  --atmo-1: rgba(201, 168, 106, 0.16);
  --atmo-2: rgba(120, 100, 62, 0.15);
  --atmo-3: rgba(42, 38, 29, 0.92);
  color-scheme: dark;
}

/* ── CONTRAST CONTRACT (measured, not estimated) ───────────────────────────
   BANNED PAIRINGS — these two fail WCAG AA and must never carry functional text:
     · --stone-muted  (#6f6b60) on --stone-2 (#e6e2db) → 4.12:1  ✗
     · --night-muted-2(#928b7c) on --night-2 (#2a261d) → 4.45:1  ✗
   On --bg-2 surfaces, functional text uses --fg (13.47 / 12.03) or --fg-2
   (10.19 / ~9.5). --night-muted-2 is DECORATIVE ONLY and appears nowhere as
   readable copy. Input borders and focus rings use --line-strong (≥3:1),
   never --line. See the header comment.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Reset ───────────────────────────────────────────────────────────────── */

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

/* We honour Aman's 14px SCALE, but as a PERCENTAGE, not a hard px lock.
   `font-size: 14px` would override an elder who has raised their browser's
   default text size — an a11y regression we refuse to inherit. 87.5% renders
   identically at the default 16px, and scales when the user asks it to. */
html {
  font-size: 87.5%;          /* = 14px at the browser default. 1rem = 14px. */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1.071rem;       /* 15px */
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  transition: background-color var(--d-color) linear, color var(--d-color) linear;
}

img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-fg); }

/* Aman is sharp rectangles. Nothing is rounded. */
* { border-radius: 0; }

/* ─── Focus — always visible. Never removed. ──────────────────────────────── */

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
/* The composer used to be a bordered box and got an extra ring here. It is now a
   single hairline (Claude Design's form), so that ring would draw a rectangle
   around nothing. Focus is still fully covered, twice over: the textarea itself
   takes the :focus-visible outline above (keyboard-only, so the mouse user keeps
   the clean line), and .composer:focus-within lifts the hairline to --accent. */

/* ─── The screen-reader name. clip-path, never display:none. ──────────────── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--fg); color: var(--bg);
  padding: 0.8em 2.5em;
  font-family: var(--font-sans); font-size: 0.786rem;
  font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: top var(--d-quick) var(--e-quint);
}
.skip-link:focus { top: 16px; }

/* ─── Typographic registers ───────────────────────────────────────────────── */

/* THE WHISPER. 10px, uppercase, 2px tracking. */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.786rem;              /* 11px — CD */
  font-weight: 500;                 /* CD */
  letter-spacing: 0.2em;            /* ≈2px at 10px */
  text-transform: uppercase;
  color: var(--fg-muted);           /* AA on --bg and --bg-1. Never on --bg-2. */
  line-height: 1.4;
}
.eyebrow.accent { color: var(--accent); }

/* THE MONUMENT. Gloock, 400. Never bold. */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.08;
  color: var(--fg);
}

.lede { color: var(--fg-2); font-size: 1.071rem; line-height: 1.7; max-width: 52ch; }

hr.hairline { border: 0; border-top: 1px solid var(--line); }

/* ─── Buttons — the width is the luxury signal ────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.786rem;              /* 11px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.8em 4em;               /* Aman's exact grammar. Wide, not tall. */
  min-height: 44px;                 /* touch target. non-negotiable. */
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  /* The asymmetry is the point: colour drifts (400ms), shadow snaps (100ms). */
  transition:
    border-color var(--d-color) var(--e-quint),
    color        var(--d-color) var(--e-quint),
    box-shadow   var(--d-snap)  linear,
    background-color var(--d-color) var(--e-quint);
}
.btn:hover { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.btn.solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn.solid:hover { background: var(--fg-2); border-color: var(--fg-2); box-shadow: none; }
.btn:disabled { opacity: 0.42; cursor: default; box-shadow: none; }

/* ─── Shell: header ───────────────────────────────────────────────────────── */

/* At rest the header is INVISIBLE — it floats on the hero with no plate and no
   seam. The moment you scroll, it materialises. Anything else leaves a hard
   horizontal band across the top of the hero, which is the single most obvious
   tell of a template. */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition:
    height var(--d-chrome) ease-in-out,
    background-color var(--d-chrome) ease-in-out,
    border-color var(--d-chrome) ease-in-out,
    -webkit-backdrop-filter var(--d-chrome) ease-in-out,
    backdrop-filter var(--d-chrome) ease-in-out;
}
html.is-scrolled .header {
  height: var(--header-h-min);
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(14px);
  backdrop-filter: saturate(1.1) blur(14px);
}
/* Fallback where color-mix is unsupported (old iPadOS). Opaque, still correct. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  html.is-scrolled .header { background: var(--bg); }
}

.header-inner {
  width: 100%; max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* ─── The wordmark ────────────────────────────────────────────────────────── */

/* The wordmark is 22px of ink, but the LINK it sits in must still be a 44px
   target. Padding grows the hit area without touching the mark. */
.wordmark {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 11px 0;
  line-height: 0; color: var(--fg);
}
/* FILLED, high-contrast Didone — per spec. The mark is drawn as real filled path
   geometry (thick right stroke, hairline left, unbracketed slabs), NOT stroked.
   It was once rewritten as a stroked monoline on the theory that a crossbar-less
   A must be monoline to avoid reading as a lambda. That was wrong, it was not
   asked for, and it is not to be repeated. */
.wordmark svg { height: 24px; width: auto; fill: currentColor; overflow: visible; }
html.is-scrolled .wordmark svg { height: 20px; }
.wordmark svg { transition: height var(--d-chrome) ease-in-out; }
/* The macron variant (TĀ·ALA, mirroring ĀMAN's long-vowel mark) is drawn but
   held OFF: we will not assert a diacritic on a real family's name without
   Ramon's word. Add class `macron` to .wordmark to enable it. */
.wm-macron { display: none; }
.wordmark.macron .wm-macron { display: block; }
.wordmark:hover { color: var(--accent); }
.wordmark { transition: color var(--d-color) var(--e-quint); }

/* ─── Nav ─────────────────────────────────────────────────────────────────── */

.nav-cluster { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 34px); }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  display: inline-flex; align-items: center;
  min-height: 44px;                 /* touch target */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.786rem;            /* 11px — CD */
  letter-spacing: 0.2em;            /* Claude Design's tracking. The nav is a whisper. */
  text-transform: uppercase;
  color: var(--fg-2);               /* AAA. Not the muted grey — elders read this. */
  text-decoration: none;
  position: relative;
  transition: color var(--d-color) var(--e-quint);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px;
  height: 1px; background: var(--accent);   /* CD marks the active tab in olive/brass */
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-chrome) var(--e-expo);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ─── Theme switch — ONE ICON ─────────────────────────────────────────────── */

/* Ramon: icon only. Three text labels were three decisions asked of a family
   member who just wants the lights down. One glyph, one press, it cycles. */
.theme-switch { display: flex; align-items: center; }
/* The hairline Claude Design sets between the nav and the switch. */
.theme-switch::before {
  content: ""; flex: none;
  width: 1px; height: 13px;
  background: var(--line);
  margin-right: clamp(10px, 1.6vw, 20px);
}
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* The GLYPH is 16px. The TARGET is 44px. Those are different numbers on purpose:
     an elder's thumb does not shrink to match a design decision. */
  width: 44px; height: 44px;
  color: var(--fg-muted);           /* 5.01:1 light / 8.48:1 dark — AA+ */
  border: 1px solid transparent;
  transition:
    color var(--d-color) var(--e-quint),
    border-color var(--d-color) var(--e-quint);
}
.theme-btn:hover { color: var(--fg); border-color: var(--line-strong); }
.theme-icon { width: 16px; height: 16px; }

/* ─── Mobile menu ─────────────────────────────────────────────────────────── */

.menu-toggle {
  display: none;
  font-family: var(--font-sans); font-size: 0.786rem;
  font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg); padding: 12px 0; min-height: 44px;
}
.menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--header-h) var(--gutter) var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-chrome) var(--e-quint), visibility var(--d-chrome);
}
.menu[data-open="true"] { opacity: 1; visibility: visible; }
.menu nav { display: flex; flex-direction: column; gap: 4px; }
.menu nav a {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 9vw, 3.2rem);
  letter-spacing: 0.5px;
  color: var(--fg); text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: color var(--d-color) var(--e-quint);
}
.menu nav a:hover { color: var(--accent); }
.menu .theme-switch { margin-top: 48px; align-self: flex-start; }

@media (max-width: 899px) {
  .nav-cluster { display: none; }
  .menu-toggle { display: block; }
}
@media (min-width: 900px) {
  .menu { display: none; }
}

/* ─── Hero — the money shot. No photography. Original atmosphere only. ────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 8vh) var(--gutter) 12vh;
  overflow: hidden;
  isolation: isolate;
}
.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--container); margin: 0 auto;
}

/* NO .hero-photo / .hero-scrim. A photographic hero was built here and removed on
   purpose — see the comment in index.html. If you are about to add one back, that
   is the third time; read that comment first. */

/* Dawn over water. Three slow warm fields, drifting on different clocks so the
   pattern never repeats visibly. Transform-only — no layout, no paint storms. */
.atmos { position: absolute; inset: -25%; z-index: 0; pointer-events: none; }
.atmos span {
  position: absolute; inset: 0;
  display: block;
  will-change: transform;
}
/* The light comes from the upper right and pools low. Straight rgba, not
   color-mix: these must be WARM at all costs, and mixing the muted grey into
   them is what turns dawn into haze. */
.atmos .f1 {
  background: radial-gradient(50% 46% at 72% 18%, var(--atmo-1) 0%, transparent 66%);
  animation: drift-a 96s var(--e-quint) infinite alternate;
}
.atmos .f2 {
  background: radial-gradient(44% 40% at 16% 62%, var(--atmo-2) 0%, transparent 68%);
  animation: drift-b 142s var(--e-quint) infinite alternate;
}
.atmos .f3 {
  background: radial-gradient(78% 42% at 50% 104%, var(--atmo-3) 0%, transparent 70%);
  animation: drift-c 118s var(--e-quint) infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(-3%, -2%, 0) scale(1.00); }
  to   { transform: translate3d( 4%,  3%, 0) scale(1.10); }
}
@keyframes drift-b {
  from { transform: translate3d( 3%,  2%, 0) scale(1.08); }
  to   { transform: translate3d(-4%, -3%, 0) scale(1.00); }
}
@keyframes drift-c {
  from { transform: translate3d(-2%,  2%, 0) scale(1.05); }
  to   { transform: translate3d( 2%, -2%, 0) scale(1.00); }
}

/* Fine grain. One static SVG turbulence, tiled. Costs nothing to animate
   because it doesn't. */
.grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* The lockup: whisper above monument.
   Tala's greeting arrives from the Worker and its length is NOT ours to choose,
   so the measure is set in px and the size is modest enough that even a long
   sentence lands in two or three lines. A six-line wall of Gloock is not a
   monument, it is a hedge — and it shoves the composer below the fold. */
/* CENTRED, per Claude Design. The old lockup was left-aligned; centring it is
   what makes the page read as Aman rather than as a SaaS landing page. */
.hero-inner { text-align: center; }
.hero-inner > * { margin-left: auto; margin-right: auto; }
.greeting-block { max-width: none; }
.greeting-block .eyebrow { margin-bottom: clamp(22px, 3vw, 34px); }
/* CD colours the eyebrow in the accent and tracks it wide. Olive 5.99:1 light,
   brass 8.08:1 dark — both clear AA. */
.hero .eyebrow, .quiet-page .eyebrow { color: var(--accent); letter-spacing: 0.34em; }
.greeting {
  font-family: var(--font-display);
  /* THE OPTICAL SIZE AXIS. Bodoni is a Didone: at TEXT sizes it needs thick
     hairlines to survive, at DISPLAY sizes those hairlines must go razor-thin or
     the letters read as fat. font-optical-sizing:auto was NOT engaging (Safari
     would not parse format("woff2-variations")), so the text cut was being blown
     up to 66px. Pin the axis explicitly — this is the difference between the mark
     Ramon approved and a heavy imitation of it. */
  /* The opsz axis MUST track the rendered size, not be pinned. .greeting is a
     clamp(30px → 66px): at 66px the hairlines must go razor-thin (display cut),
     but at 30px on a phone that same cut would have hairlines too fine for an
     elder to see. `auto` maps opsz to the actual font-size, so it adapts. It only
     works because the @font-face declares format("woff2") — Safari silently
     ignores format("woff2-variations"), which is what made this fail the first
     time and left us blowing up the TEXT cut to display size. */
  font-optical-sizing: auto;
  font-weight: 400;                 /* never bold */
  letter-spacing: -0.005em;         /* CD tightens it. A Didone wants to be close. */
  font-size: clamp(2.14rem, 5.3vw, 4.71rem);   /* CD: 30px → 66px */
  line-height: 1.14;               /* CD */
  color: var(--fg);
  text-wrap: balance;
  max-width: 15ch;                  /* CD's measure. Three lines, never a wall. */
  margin: 0 auto;
}

/* ─── Composer — Claude Design's structure, verbatim ──────────────────────── */

/* ONE ROW: [+] [the ask, on a hairline] [mic] [send]. align-items:flex-end drops
   the three 44×44 buttons onto the hairline's baseline, so the line runs unbroken
   under the question. The earlier stacked version (input, then a button bar, then
   a line) was my invention — it cut the composer in half. This is CD's real shape.
   Values below are lifted from its output, not re-derived by eye. */
.composer-wrap { margin: clamp(40px, 5.5vw, 64px) auto 0; width: min(500px, 88vw); }

.composer {
  display: flex; align-items: flex-end; gap: 6px;
  border: 0; background: none; padding: 0;
}

/* The buttons whisper. No chip, no fill, no border — CD ships none, and Aman has
   no chips. 18px glyph inside a 44px target: those are different numbers on
   purpose, and the big one is not negotiable. */
.cbtn {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0;
  color: var(--fg-muted);           /* 5.01:1 light / 8.48:1 dark */
  transition: color var(--d-color) var(--e-quint);
}
.cbtn:hover { color: var(--fg); }
.cbtn.send:hover { color: var(--accent); }
.cbtn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.25;
  stroke-linecap: square; stroke-linejoin: miter;
}

.cwrap { flex: 1; display: flex; min-width: 0; }

.composer textarea {
  display: block; width: 100%;
  min-height: 2.6em; max-height: 40vh;
  resize: none;
  text-align: center;               /* CD centres the ask. */
  font-family: var(--font-sans);
  font-size: 1.143rem;              /* 16px — never smaller: iOS zooms below 16 */
  line-height: 1.5;
  color: var(--fg);
  background: transparent;
  padding: 12px 6px;
  /* THE hairline. --line-strong (≥3:1), never CD's 1.3:1 --line: an input border
     is a functional affordance, and accessibility wins ([Lead #4]). */
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--d-color) var(--e-quint);
  /* Hide the BAR, keep the SCROLL. app.js auto-grows this only to 40vh; past that
     it must still scroll, so overflow:hidden would silently clip a long message.
     macOS was painting its overlay bar straight through the hairline. */
  overflow-y: auto;
  scrollbar-width: none;
}
.composer textarea::-webkit-scrollbar { width: 0; height: 0; }
.composer textarea::placeholder { color: var(--fg-muted); opacity: 1; }

/* ── THE BOX. This is the one that was ruining the page. ──────────────────────
   The global ring — :focus-visible { outline: 2px solid } — was drawing a hard
   rectangle around the composer. And it never went away: browsers match
   :focus-visible on TEXT FIELDS even for a mouse click (a text field always shows
   focus), so the moment anyone clicked the ask, an Aman page grew a form box.

   We do not delete the indicator, we RELOCATE it: the hairline lifts to 2px in
   the accent. That is a real, visible, WCAG-compliant focus indicator (2px, and
   olive/brass both clear 3:1 against the field) — and it is the design rather
   than a rectangle fighting it. padding-bottom drops by exactly the 1px the
   border gains, so nothing reflows when you click in. */
.composer textarea:focus,
.composer textarea:focus-visible { outline: none; }
.composer:focus-within textarea {
  border-bottom-color: var(--accent);
  border-bottom-width: 2px;
  padding-bottom: 11px;
}

/* The whisper. CD gives this an enormous margin and the DISTANCE is the design —
   it is the last thing on the page and must feel like an afterthought. */
.composer-hint {
  margin-top: clamp(46px, 7vh, 88px);
  font-family: var(--font-sans); font-size: 0.714rem;
  font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg-muted);
}

/* ─── "In preparation" pages — restraint reads as intention ───────────────── */

.quiet-page {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 16vh) var(--gutter) 18vh;
}
.quiet-inner { width: 100%; max-width: var(--container); margin: 0 auto; }
.quiet-inner .eyebrow { margin-bottom: 2.4rem; }
.quiet-line {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.9rem);
  letter-spacing: 0.5px; line-height: 1.15;
  color: var(--fg);
  max-width: 18ch;
}
.quiet-back { margin-top: clamp(56px, 10vh, 120px); }
.quiet-back a {
  display: inline-flex; align-items: center;
  min-height: 44px;                 /* touch target */
  font-family: var(--font-sans); font-size: 0.786rem;
  font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-muted); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--line-strong);
  transition: color var(--d-color) var(--e-quint), box-shadow var(--d-snap) linear;
}
.quiet-back a:hover { box-shadow: inset 0 -1px 0 var(--fg); }
.quiet-back a:hover { color: var(--fg); }

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

.footer {
  border-top: 1px solid var(--line);
  padding: 40px var(--gutter);
}
.footer-inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
}
.footer .eyebrow { color: var(--fg-muted); }

/* ─── prefers-reduced-motion — kill everything ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .atmos span { animation: none !important; transform: none !important; }
  html { scroll-behavior: auto; }
}