/* ============================================================
   Dos Caballos — shared stylesheet
   Self-hosted fonts + design tokens + atomic utilities.
   Page-specific component styles remain inline in each HTML.
   ============================================================ */

/* ---------- Self-hosted fonts (latin subset) ---------- */
@font-face {
  font-family: 'Big Shoulders Stencil Display';
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url('/fonts/big-shoulders-stencil-800-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('/fonts/cormorant-regular-300-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('/fonts/cormorant-italic-300-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}

/* ---------- Design tokens ----------
   Contrast tier (WCAG ratios on --shadow background):
   --paper  AA-large+ for body         (≈ 11.5:1)
   --smoke  AA for secondary text      (≈ 8.0:1)
   --ash    AA for labels/captions     (≈ 5.4:1)
   --bone   AAA for primary headlines  (≈ 14:1)
   ---------------------------------- */
:root {
  --shadow:#07070a; --night:#0d0d0b; --jet:#15140f; --slate:#1f1d18;
  --ash:#9a9588; --smoke:#bfb9a8; --paper:#d8d2c3; --bone:#f3eedf;
  /* Brand red sampled from brochure (was #e85638 — too orange). */
  --ember:#e84848; --ember-low:#c43838; --rose:#d6957f;
  /* Rosé-gold accent for hot-stamping detail (bottle label). */
  --rose-gold:#a85f4f;
  --rule:rgba(243,238,223,0.14); --rule-low:rgba(243,238,223,0.07);
  --serif:'Cormorant Garamond',Georgia,serif;
  --stencil:'Big Shoulders Stencil Display','Oswald',sans-serif;
  --sans:'Poppins',system-ui,sans-serif;
  --mono:'JetBrains Mono','Courier New',monospace;
  --maxw:1280px; --gutter:clamp(1.5rem,5vw,4rem);
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);background:var(--shadow);color:var(--paper);
  /* Body weight bumped 300 → 400 for stronger readability against the dark
     background while preserving the editorial sans-serif feel.
     font-feature-settings enables proper kerning + standard ligatures so
     letterforms join cleanly. font-smoothing pair gives consistent
     anti-aliasing across macOS Chrome (webkit) and Firefox (moz). */
  font-weight:400;line-height:1.65;overflow-x:hidden;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
/* HTML hidden attribute should always win over class-based display rules. */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--ember);color:var(--shadow)}

/* ---------- Atmospheric overlays (page-level) ---------- */
body::before{
  content:"";position:fixed;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity:.05;pointer-events:none;z-index:9999;mix-blend-mode:overlay;
}
body::after{
  content:"";position:fixed;inset:0;
  background:radial-gradient(ellipse at 50% 30%,transparent 30%,rgba(0,0,0,.55) 100%);
  pointer-events:none;z-index:9998;
}

/* ---------- Typography utilities ---------- */
.stencil{font-family:var(--stencil);font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:.92}
.editorial{font-family:var(--serif);font-weight:400;line-height:1.45}

/* ---------- Pre-launch waitlist (in age gate) ---------- */
.gate__waitlist{
  margin-top:1.5rem; padding-top:1.5rem;
  border-top:1px solid var(--rule-low);
  text-align:center;
}
.gate__waitlist-label{
  display:block;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--ember);
  margin-bottom:1rem;
}
.gate__waitlist-row{
  display:flex; gap:.5rem; max-width:420px; margin:0 auto;
}
.gate__waitlist-row input[type=email]{
  flex:1; min-width:0;
  background:rgba(255,255,255,.02);
  border:1px solid var(--rule);
  color:var(--bone);
  font-family:var(--serif); font-size:.95rem;
  padding:.75rem 1rem; outline:none;
  transition:border-color .25s;
}
.gate__waitlist-row input[type=email]::placeholder{ color:var(--ash); font-style:italic }
.gate__waitlist-row input[type=email]:focus{ border-color:var(--ember) }
.gate__waitlist-btn{
  padding:.75rem 1.25rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.28em;
  text-transform:uppercase;
  border:1px solid var(--bone); color:var(--bone);
  background:transparent; cursor:pointer;
  transition:all .25s;
  white-space:nowrap;
}
.gate__waitlist-btn:hover{ background:var(--bone); color:var(--shadow) }
.gate__waitlist-btn:focus-visible{ outline:2px solid var(--ember); outline-offset:3px }
.gate__waitlist-msg{
  margin-top:1rem;
  font-family:var(--serif); font-style:italic; font-size:.95rem;
  color:var(--bone);
}
.gate__waitlist-msg[data-state=error]{ color:var(--ember) }

/* ---------- Header social icons (visible on every consumer page nav) ---------- */
.nav__social{
  display:flex; align-items:center; gap:.6rem;
}
.nav__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  color:var(--paper);
  transition:color .25s ease, transform .25s ease;
}
.nav__social a:hover{ color:var(--ember); transform:translateY(-1px) }
.nav__social a:focus-visible{ outline:2px solid var(--ember); outline-offset:3px }
.nav__social svg{ width:16px; height:16px; display:block }
@media(max-width:520px){
  .nav__social{ gap:.25rem }
  .nav__social a{ width:44px; height:44px }
}

/* When the age gate is up, raise the nav above the gate overlay so brand + social + lang
   remain clickable, but hide the deep menu links and burger so the gate cannot be
   bypassed by navigating into a page below it. CSS-only state tracking via :has(). */
body:has(#gate:not(.gone)) .nav{ z-index:10001 }
body:has(#gate:not(.gone)) .nav.scrolled{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent }
body:has(#gate:not(.gone)) .nav__menu,
body:has(#gate:not(.gone)) .nav__toggle{ visibility:hidden; pointer-events:none }
body:has(#gate:not(.gone)) .gate{ padding-top:5.5rem }

/* ---------- Social icon row (used in age gate + footer) ---------- */
.gate__social,
.footer__social{
  display:flex; align-items:center; justify-content:center;
  gap:1.25rem; margin-top:1.5rem;
}
.gate__social a, .footer__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  color:var(--paper);
  transition:color .25s ease, transform .25s ease;
  border:1px solid var(--rule);
  border-radius:50%;
}
.gate__social a:hover, .footer__social a:hover{
  color:var(--ember); border-color:var(--ember); transform:translateY(-1px);
}
.gate__social a:focus-visible, .footer__social a:focus-visible{
  outline:2px solid var(--ember); outline-offset:3px;
}
.gate__social svg, .footer__social svg{ width:18px; height:18px; display:block }
.editorial em{font-style:italic;font-weight:400}
.label{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);font-weight:400}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
/* Section padding tuned for the luxury / breathing-room feel — sections
   feel like chapters, not bullet points. */
section{padding:clamp(7rem,14vw,13rem) 0;position:relative}

/* Mobile-only scroll-snap (luxury chapter feel). Each section becomes a
   snap point so swipes feel deliberate. Disabled on desktop where users
   expect free scroll, and gated on prefers-reduced-motion. */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y proximity; }
  section, header.hero, header.page-hero, footer { scroll-snap-align: start; scroll-snap-stop: normal; }
}
.hairline{width:60px;height:1px;background:var(--ember);border:0;margin:0}

/* ---------- Allocation badge (used hero + footer) ---------- */
.allocation-badge{display:inline-flex;align-items:center;gap:.75rem;padding:.6rem 1rem;border:1px solid var(--rule);font-family:var(--mono);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--paper)}
.allocation-badge .dot{width:6px;height:6px;background:var(--ember);border-radius:50%;box-shadow:0 0 10px rgba(216,69,41,.6)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:1rem;padding:1.1rem 2.2rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;font-weight:400;border:1px solid var(--rule);color:var(--bone);background:transparent;transition:all .5s cubic-bezier(.2,.7,.2,1)}
.btn:hover{border-color:var(--ember);color:var(--ember);background:rgba(216,69,41,.04)}
.btn--solid{border-color:var(--bone);color:var(--bone)}
.btn--solid:hover{background:var(--bone);color:var(--shadow);border-color:var(--bone)}
.btn--ghost{color:var(--ash)}
.btn .arrow{display:inline-block;width:24px;height:1px;background:currentColor;position:relative;transition:width .35s}
.btn:hover .arrow{width:36px}
.btn .arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)}

/* ---------- Form fields ---------- */
.field{display:flex;flex-direction:column;border-bottom:1px solid var(--rule);transition:border-color .4s;padding:1rem 0 .5rem}
.field:focus-within{border-bottom-color:var(--ember)}
.field label{font-family:var(--mono);font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ash);margin-bottom:.4rem}
.field input,.field select,.field textarea{background:transparent;border:none;color:var(--bone);font-family:var(--serif);font-size:1rem;outline:none;padding:.3rem 0}
.field input::placeholder,.field textarea::placeholder{color:var(--ash);font-style:italic}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23e85638' fill='none' stroke-width='1'/></svg>");background-repeat:no-repeat;background-position:right .5rem center;padding-right:1.5rem;min-height:44px}
.field input,.field textarea{min-height:44px}
.field select option{background:var(--shadow);color:var(--bone)}
.field textarea{resize:vertical;min-height:80px}

/* ---------- Skip-link (a11y) ---------- */
.skip-link{position:absolute;left:-9999px;top:0;padding:.75rem 1rem;background:var(--ember);color:var(--shadow);font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;z-index:10001}
.skip-link:focus{left:1rem;top:1rem}

/* ---------- Visually hidden (a11y label-only) ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Disabled-submit feedback (loading state) ---------- */
[data-submit]:disabled,[data-submit][aria-busy="true"]{opacity:.55;cursor:wait;pointer-events:none}
[data-submit]:disabled .arrow,[data-submit][aria-busy="true"] .arrow{animation:arrowPulse 1.2s ease-in-out infinite}
@keyframes arrowPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ---------- Floating "back to top" — appears after 1.5× viewport scroll ---------- */
.to-top{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);width:44px;height:44px;border:1px solid var(--rule);background:rgba(7,7,10,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--bone);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s,transform .35s,visibility .35s,border-color .3s,color .3s;z-index:90;border-radius:0}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{border-color:var(--ember);color:var(--ember)}
.to-top svg{width:14px;height:14px;display:block}
@supports not (backdrop-filter: blur(12px)) { .to-top{background:rgba(7,7,10,.96)} }
@media(prefers-reduced-motion:reduce){.to-top{transition:none}}

/* ---------- Reveal animations ---------- */
/* Reveal: fail-safe pattern. Element renders visible by default so SEO
   crawlers, screenshot tools, and JS-disabled users see content; the
   fade-in only applies for users with motion preferences enabled. */
.reveal{opacity:1;transform:none;transition:opacity 1.4s cubic-bezier(.2,.7,.2,1),transform 1.4s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion: no-preference){
  .reveal:not(.in){opacity:0;transform:translateY(28px)}
}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal[data-d="1"]{transition-delay:.15s}
.reveal[data-d="2"]{transition-delay:.3s}
.reveal[data-d="3"]{transition-delay:.45s}
.reveal[data-d="4"]{transition-delay:.6s}

/* ---------- Bilingual visibility ---------- */
[data-lang]:not(.show){display:none}

/* ---------- Reduced motion preference ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Page hero (interior pages: /method, /allocation) ----------
   Smaller than the home brand hero. One label + h2 + lede, no giant title. */
.page-hero{padding:clamp(7rem,12vw,10rem) 0 clamp(3rem,6vw,5rem);position:relative;border-bottom:1px solid var(--rule-low)}
.page-hero__inner{max-width:780px}
.page-hero .hero__rule{width:60px;height:1px;background:var(--ember);margin-bottom:2rem}
.page-hero .hero__label{font-family:var(--mono);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ember);margin-bottom:1.5rem}
.page-hero__title{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,5vw,3.5rem);line-height:1.1;color:var(--bone);margin-bottom:1.75rem}
.page-hero__title em{font-style:italic;color:var(--ember)}
.page-hero__lede{font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6;color:var(--paper);max-width:60ch}

/* ---------- Keyboard focus (a11y) ----------
   Visible focus for keyboard users, suppressed for mouse via :focus-visible.
   Two-tone ring (ember on top, shadow underneath) so it shows on light + dark. */
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
[data-set-lang]:focus-visible {
  outline:2px solid var(--ember);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(7,7,10,0.6);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.gate__cell input:focus-visible,
.gate__cell select:focus-visible,
.gate__country-wrap select:focus-visible {
  outline:2px solid var(--ember);
  outline-offset:2px;
}

/* ---------- Brand mark / wordmark (mask-image for currentColor theming) ----------
   Source: brochure two-knights chess mark + DOS CABALLOS slab-stencil wordmark.
   Using CSS mask-image so a single SVG file colors via `color:` from any context. */
.brand-mark, .brand-wordmark {
  display:inline-block; line-height:0;
  background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
/* aspect-ratio with a min-height fallback for Safari < 15 (which ignores
   aspect-ratio); the @supports re-asserts when supported. */
.brand-mark{ -webkit-mask-image:url('/assets/logo-mark.svg'); mask-image:url('/assets/logo-mark.svg'); min-height:1px }
.brand-wordmark{ -webkit-mask-image:url('/assets/logo-wordmark.svg'); mask-image:url('/assets/logo-wordmark.svg'); min-height:1px }
@supports (aspect-ratio: 1) {
  .brand-mark{ aspect-ratio:1400/844 }
  .brand-wordmark{ aspect-ratio:2409/560 }
}
/* Decorative chess-checker pattern (5×5 with offset crosses, from brochure p12) */
.chess-grid{
  display:inline-block;
  width:48px; height:48px;
  background:
    conic-gradient(from 90deg at 1px 1px,#0000 25%,currentColor 0) 0 0/9.6px 9.6px;
  -webkit-mask-image:radial-gradient(circle at center,#000 60%,transparent 100%);
  mask-image:radial-gradient(circle at center,#000 60%,transparent 100%);
  opacity:.5;
}