/* ============================================================
   TAMARIN GR — COMING-SOON PAGE STYLES
   Layered on top of /assets/tokens.css. Contains:
   1) The handful of Tailwind-equivalent utility classes the CS
      page uses (kept identical to BR's Tailwind names so future
      pages can re-introduce the Tailwind CDN without churn).
   2) CS-page-specific rules: locale chip, hero centering, form,
      footer bottom row.

   Base typography, buttons, wordmark, footer masthead live in
   tokens.css and must load first.
   ============================================================ */

/* ============================================================
   UTILITY CLASSES — exact subset the CS page needs. Replaces the
   Tailwind CDN runtime so the page can serve render-blocking-free
   on cold mobile. Names match Tailwind's so the HTML reads the
   same as in BR pages.
   ============================================================ */

.bg-surface-bone   { background-color: var(--surface-bone); }
.bg-surface-bone\/85 { background-color: rgba(244, 238, 226, 0.85); }
.bg-surface-deeper { background-color: var(--surface-deeper); }
.bg-terracotta     { background-color: var(--brand-terracotta); }
.text-ink-primary  { color: var(--ink-primary); }
.text-ink-inverse  { color: var(--ink-inverse); }
.antialiased       { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.max-w-7xl         { max-width: 80rem; }
.max-w-\[42ch\]    { max-width: 42ch; }
.mx-auto           { margin-left: auto; margin-right: auto; }
.px-6              { padding-left: 1.5rem; padding-right: 1.5rem; }
.pt-12             { padding-top: 3rem; }
.pb-10             { padding-bottom: 2.5rem; }
.pb-12             { padding-bottom: 3rem; }
.mt-8              { margin-top: 2rem; }
.mb-6              { margin-bottom: 1.5rem; }
.mb-9              { margin-bottom: 2.25rem; }
.mb-12             { margin-bottom: 3rem; }
.gap-0             { gap: 0; }
.gap-4             { gap: 1rem; }
.grid              { display: grid; }
.flex              { display: flex; }
.flex-col          { flex-direction: column; }
.items-center      { align-items: center; }
.items-stretch     { align-items: stretch; }
.justify-between   { justify-content: space-between; }
.justify-center    { justify-content: center; }
.block             { display: block; }
.relative          { position: relative; }
.overflow-hidden   { overflow: hidden; }
.sticky            { position: sticky; }
.top-0             { top: 0; }
.z-50              { z-index: 50; }
.select-none       { user-select: none; }
.h-\[76px\]        { height: 76px; }
.min-h-\[82vh\]    { min-height: 82vh; }
.w-12              { width: 3rem; }
.h-px              { height: 1px; }
.font-extrabold    { font-weight: 800; }
.tracking-tighter  { letter-spacing: -0.05em; }
.tracking-\[-0\.045em\] { letter-spacing: -0.045em; }
.text-3xl          { font-size: 1.875rem; line-height: 2.25rem; }
.leading-\[0\.85\] { line-height: 0.85; }
.backdrop-blur-md  { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Responsive variants — Tailwind defaults: md ≥ 768px, lg ≥ 1024px. */
@media (min-width: 768px) {
  .md\:px-10       { padding-left: 2.5rem; padding-right: 2.5rem; }
  .md\:pt-16       { padding-top: 4rem; }
  .md\:pb-16       { padding-bottom: 4rem; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-5   { grid-column: span 5 / span 5; }
  .lg\:col-span-7   { grid-column: span 7 / span 7; }
  .lg\:pl-\[var\(--container-pad\)\] { padding-left: var(--container-pad); }
  .lg\:pr-12        { padding-right: 3rem; }
  .lg\:pt-20        { padding-top: 5rem; }
  .lg\:pb-20        { padding-bottom: 5rem; }
  .lg\:h-full       { height: 100%; }
  .lg\:\!aspect-auto { aspect-ratio: auto !important; }
}

/* Header anchors (currently just the wordmark link) — strip the browser
   default underline. tokens.css has no global anchor reset, and dropping
   the Tailwind CDN dropped Preflight's reset along with it. Scoped to
   header so future links elsewhere keep their default decoration. */
header a { text-decoration: none; }

/* Locale chip in the sticky header (right side). */
.locale-chip {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  font-weight: 500;
  white-space: nowrap;
}

/* ============================================================
   HERO — two-column at lg, single-column below. Grid + min-height
   are applied via utility classes inline; this block just keeps
   typographic detail rules that depend on context (#hero h1's
   font-variation-settings, lead-to-lead spacing).
   ============================================================ */

#hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 380;
  color: var(--ink-primary);
  max-width: 18ch;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  margin: 0 0 36px;
}

#hero .lead + .lead { margin-top: 14px; }

/* Hero photo column — fill the grid cell at lg so the photo height
   matches the text column. Below lg the picture's intrinsic
   aspect-ratio (4/5) drives layout. */
.hero-photo-wrapper { position: relative; height: 100%; }

/* ============================================================
   INLINE WAITLIST FORM
   Editorial chrome — hairline bottom rule under the input that
   darkens on focus; the submit button reuses .btn .btn-primary
   .btn-arrow from tokens.css. Stacks at narrow widths.
   ============================================================ */

.cs-form {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
}

.cs-form-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 520px) {
  .cs-form-row {
    flex-direction: row;
    align-items: stretch;
  }
}

.cs-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 16px; /* >=16px prevents iOS auto-zoom on focus */
  line-height: 1.4;
  color: var(--ink-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 14px 4px;
  transition: border-color 180ms ease;
  min-width: 0;
}
.cs-input::placeholder { color: var(--ink-muted); }
.cs-input:focus {
  outline: none;
  border-bottom-color: var(--ink-primary);
}
.cs-input:invalid:not(:placeholder-shown):not(:focus) {
  border-bottom-color: var(--brand-terracotta);
}

.cs-form-note {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-secondary);
  max-width: 44ch;
  margin: 0;
}

.cs-error {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--brand-terracotta);
  max-width: 44ch;
  margin: 16px 0 0;
}

.cs-success {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 380;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.3;
  color: var(--brand-terracotta);
  margin: clamp(32px, 4vw, 48px) 0 0;
  max-width: 36ch;
}

/* ============================================================
   FOOTER BOTTOM ROW — two-column at >=640px, stacked below.
   ============================================================ */

.cs-footer-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--ink-inverse-muted);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 640px) {
  .cs-footer-bottom {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .cs-footer-bottom > :last-child { text-align: right; }
}