/* ============================================================
   TAMARIN — COMING-SOON / HOLDING PAGE STYLES
   Shared verbatim between tamarin.gr (holding page, no form) and
   tamarin.co.za (coming-soon page with waitlist form). Layered on
   top of /assets/tokens.css. Contains:
   1) The handful of Tailwind-equivalent utility classes the pages
      use (kept identical to BR's Tailwind names so future pages
      can re-introduce a Tailwind build without churn).
   2) Page rules: skip link, locale chip, hero, waitlist form,
      footer bottom row, 404.

   Base typography, buttons, wordmark, footer masthead live in
   tokens.css and must load first. Keep the two sites' copies of
   this file identical; unused blocks (e.g. the form on GR) are
   intentionally retained so a diff between the sites stays empty.
   ============================================================ */

/* ============================================================
   UTILITY CLASSES — exact subset the pages need. 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: rgb(var(--surface-bone-rgb) / 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); }
.text-center       { text-align: center; }
.antialiased       { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.max-w-7xl         { max-width: 80rem; }
.max-w-md          { max-width: 28rem; }
.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-4              { margin-bottom: 1rem; }
.mb-6              { margin-bottom: 1.5rem; }
.mb-8              { margin-bottom: 2rem; }
.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; }
.min-h-screen      { min-height: 100vh; }
.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); }

/* Visually hidden, still read by assistive tech (Tailwind sr-only). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 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; }
}

/* ============================================================
   SKIP LINK — same rules as BR (assets/sprint6-overrides.css).
   ============================================================ */

.skip-link {
  z-index: 100;
  background: var(--brand-terracotta);
  color: var(--surface-paper);
  font-family: var(--font-body);
  border-radius: 0 0 3px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.15s;
  display: inline-block;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-120%);
}
.skip-link:focus {
  outline: 2px solid var(--ink-primary);
  outline-offset: 2px;
  transform: translateY(0);
}

/* 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; }

/* Focus rings — One-Signal rule (DESIGN.md §2/§5): every interactive
   state turns terracotta, 2px outline at 2px offset. */
.btn:focus-visible,
header a[aria-label="Tamarin"]:focus-visible {
  outline: 2px solid var(--brand-terracotta);
  outline-offset: 2px;
  border-radius: 3px;
}
main:focus { outline: 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. The H1 takes its metrics
   from .display-hero (tokens.css); this block only adds the
   measure and spacing that depend on the hero context.
   ============================================================ */

#hero h1 {
  max-width: 18ch;
  margin: 0;
}
#hero h1 + .lead { margin-top: 36px; }

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

/* Hero photo column — square editorial photo (627/1254, same spec as the
   BR homepage hero). The picture's intrinsic 1:1 aspect-ratio drives
   layout at every width; the grid row centres copy against it at lg. */
.hero-photo-wrapper { position: relative; }
.editorial-photo--square { aspect-ratio: 1; }

/* ============================================================
   INLINE WAITLIST FORM (ZA)
   Editorial chrome — hairline bottom rule under the input that
   turns terracotta on focus; the submit button reuses .btn
   .btn-primary .btn-arrow from tokens.css. Stacks at narrow widths.
   Recorded as the sanctioned coming-soon input variant (README).
   ============================================================ */

.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(--brand-terracotta);
}
.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 when it has two
   children, single column otherwise.
   ============================================================ */

.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 rgb(var(--ink-inverse-rgb) / 0.1);
}
.cs-footer-bottom p { margin: 0; }
@media (min-width: 640px) {
  .cs-footer-bottom:has(> :nth-child(2)) {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .cs-footer-bottom > :last-child:not(:only-child) { text-align: right; }
}

/* ============================================================
   404 — centred card, same chrome as BR 404.html.
   ============================================================ */

.nf-title {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  font-size: clamp(32px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  font-weight: 400;
  color: var(--ink-primary);
  margin: 0;
}
.nf-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-secondary);
  margin: 0;
}