/* ==========================================================================
   alexascalone.com — Design Tokens
   Coastal luxury, Sotheby's-navy-compatible. Built 2026-07-29.

   Palette contrast VERIFIED against WCAG AA (see evidence/contrast-report.txt).
   Two hard constraints came out of that verification — do not violate them:

     1. --brass-bright FAILS on --bone (2.06:1). It is a DARK-SURFACE-ONLY
        color: use it on --navy / --navy-deep / over photo overlays. For
        brass-colored text on the light page background use --brass (4.73:1).
     2. Brass buttons take WHITE text (5.34:1). --ink on --brass is 3.40:1,
        which fails AA for normal text. Never put ink text on brass.

   Type discipline: Libre Bodoni is high-contrast — its hairlines get fragile
   below ~24px. Bodoni is DISPLAY ONLY (>=24px). Everything <=24px is Public
   Sans. This is why the pairing works; breaking it makes the site look cheap.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Public+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Surfaces & ink ------------------------------------------------- */
  --ink:          #0A1628;  /* body text, primary CTA bg. 16.07:1 on bone   */
  --navy:         #12294A;  /* headings, dark panels.     12.91:1 on bone   */
  --navy-deep:    #081221;  /* hero overlays, deepest surface               */
  --bone:         #F4F1EA;  /* page background (warm, not white)            */
  --sand:         #E4DCCD;  /* secondary surface, hairlines, borders        */
  --white:        #FFFFFF;
  --muted:        #4A5568;  /* meta / captions.            6.67:1 on bone   */

  /* ---- The single accent ---------------------------------------------- */
  --brass:        #8A6428;  /* accent TEXT on light bg.    4.73:1 on bone   */
  --brass-bright: #C9A55F;  /* accent on DARK ONLY.  6.26:1 on navy         */

  /* ---- Semantic (used semantically, never decoratively) --------------- */
  --success:      #1F5D3F;
  --error:        #8C2F27;

  /* ---- Type ----------------------------------------------------------- */
  --font-display: 'Libre Bodoni', 'Times New Roman', serif;
  --font-body:    'Public Sans', system-ui, -apple-system, sans-serif;

  /* Fluid display scale. Deliberate scale CONTRAST — h1 dominates, it is
     not "slightly bigger" than h2. Required quality #1.
     Hero is capped at 5rem: at 7.5vw/6.5rem the headline consumed ~400px and
     pushed the primary CTA to the fold edge on a 1000px-tall viewport, which
     costs conversion. Dominant, but not at the CTA's expense.              */
  --fs-hero:   clamp(2.5rem, 5.4vw, 5rem);
  --fs-h1:     clamp(2.25rem, 5vw, 4rem);
  --fs-h2:     clamp(1.75rem, 3.2vw, 2.75rem);
  --fs-h3:     clamp(1.3rem, 2vw, 1.75rem);
  --fs-lead:   clamp(1.0625rem, 1.4vw, 1.375rem);
  --fs-body:   1.0625rem;   /* 17px — above the 16px mobile floor          */
  --fs-small:  0.9375rem;
  --fs-micro:  0.8125rem;   /* eyebrows/labels — >=12px per readability rule */

  --lh-display: 1.04;
  --lh-heading: 1.14;
  --lh-body:    1.62;       /* inside the 1.5-1.75 guidance                */
  --measure:    68ch;       /* 65-75 char line-length guidance             */

  --ls-display: -0.022em;
  --ls-eyebrow: 0.18em;

  /* ---- Spacing — intentional rhythm, NOT uniform padding -------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;    --s-11: 12rem;

  --section-y:       clamp(3.5rem, 9vh, 7rem);
  --section-y-major: clamp(5rem, 14vh, 11rem);
  --gutter:          clamp(1.25rem, 5vw, 4.5rem);
  --maxw:            78rem;
  --maxw-text:       42rem;

  /* ---- Depth. Layered, warm-tinted shadows — never flat grey/black ---- */
  --shadow-sm: 0 1px 2px rgba(10,22,40,.06), 0 2px 6px rgba(10,22,40,.04);
  --shadow-md: 0 2px 6px rgba(10,22,40,.07), 0 12px 28px rgba(10,22,40,.09);
  --shadow-lg: 0 4px 12px rgba(10,22,40,.08), 0 28px 64px rgba(10,22,40,.16);
  --shadow-cta: 0 2px 4px rgba(10,22,40,.14), 0 10px 26px rgba(10,22,40,.22);

  /* ---- Radii — deliberately NOT uniform ------------------------------- */
  --r-none: 0;
  --r-sm:   2px;   /* inputs, buttons — nearly square reads more expensive */
  --r-md:   4px;
  --r-pill: 999px; /* pills/chips only                                     */

  /* ---- Motion — clarifies flow, never decorative ---------------------- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast:    160ms;
  --t-mid:     260ms;
  --t-slow:    520ms;

  /* ---- Z-index scale -------------------------------------------------- */
  --z-base: 1; --z-raised: 10; --z-sticky: 20; --z-overlay: 30; --z-modal: 50;
}

/* ==========================================================================
   Reset + base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* belt-and-braces against horizontal scroll */
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }

/* Display type. Bodoni only at >=24px per the discipline note above. */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--navy);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* h4+ drop to Public Sans — too small for Bodoni's hairlines. */
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  color: var(--navy);
  margin: 0 0 var(--s-3);
}

p { margin: 0 0 var(--s-4); max-width: var(--measure); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
}

/* Eyebrow / kicker label */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brass);            /* 4.73:1 on bone — AA pass */
  margin: 0 0 var(--s-4);
  display: block;
}
/* On dark surfaces the accent must switch to the bright token. */
.on-dark .eyebrow, .eyebrow--on-dark { color: var(--brass-bright); }

/* ==========================================================================
   Links & focus
   ========================================================================== */

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--brass); }
.on-dark a { color: var(--white); }
.on-dark a:hover { color: var(--brass-bright); }

/* Visible focus on everything interactive, both surfaces. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-dark :where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline-color: var(--brass-bright);
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--ink); color: var(--white);
  padding: var(--s-3) var(--s-5); z-index: var(--z-modal);
  font-weight: 600; text-decoration: none; border-radius: var(--r-sm);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--s-4); color: var(--white); }

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap    { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--major { padding-block: var(--section-y-major); }
.section--dark {
  background: var(--navy);
  color: var(--sand);           /* 10.69:1 on navy */
}
.section--ink { background: var(--ink); color: var(--sand); }
.section--sand { background: var(--sand); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--white); }

/* Hairline rule — the brass accent as structure, not decoration. */
.rule { border: 0; border-top: 1px solid var(--sand); margin: var(--s-7) 0; }
.rule--accent { border-top: 2px solid var(--brass); width: 3.5rem; margin: 0 0 var(--s-5); }
.on-dark .rule--accent, .section--dark .rule--accent, .section--ink .rule--accent {
  border-top-color: var(--brass-bright);
}

/* ==========================================================================
   Buttons — min 44px touch target, 2px radius reads expensive
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 52px; padding: var(--s-4) var(--s-6);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
  letter-spacing: .02em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-sm);
  transition: background-color var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
  /* No scale transforms on hover — they shift layout. */
}

/* Primary: ink on bone. 18.13:1. Highest-contrast, most expensive-looking. */
.btn--primary { background: var(--ink); color: var(--white); box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--navy); color: var(--white); }

/* Brass CTA — WHITE text only (5.34:1). Ink on brass fails AA. */
.btn--brass { background: var(--brass); color: var(--white); box-shadow: var(--shadow-cta); }
.btn--brass:hover { background: #6F5020; color: var(--white); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--white); }

/* .hero is included here on purpose: it is a dark surface but carries no
   .on-dark class, so a ghost button inside it fell through to navy-on-navy
   over the photo — unreadable. Any new dark container needs listing here or
   needs the .on-dark class. */
.on-dark .btn--ghost, .section--dark .btn--ghost, .hero .btn--ghost {
  color: var(--white); border-color: rgba(255,255,255,.5);
}
.on-dark .btn--ghost:hover, .section--dark .btn--ghost:hover, .hero .btn--ghost:hover {
  background: var(--white); color: var(--ink); border-color: var(--white);
}

.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ==========================================================================
   Forms — labels always present, 16px+ inputs (prevents iOS zoom)
   ========================================================================== */

.field { margin-bottom: var(--s-5); }

.field label {
  display: block; font-size: var(--fs-small); font-weight: 600;
  color: var(--navy); margin-bottom: var(--s-2); letter-spacing: .01em;
}

.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: var(--s-3) var(--s-4);
  font-family: var(--font-body); font-size: 1.0625rem; color: var(--ink);
  background: var(--white); border: 1px solid #B9B2A4; border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(138,100,40,.18);
}
.field input::placeholder { color: #6B7280; } /* 4.5:1+ on white */

.field .hint { font-size: var(--fs-micro); color: var(--muted); margin-top: var(--s-2); }
.field .err  { font-size: var(--fs-micro); color: var(--error); margin-top: var(--s-2); font-weight: 600; }
.field input[aria-invalid="true"] { border-color: var(--error); }

/* Consent checkbox — 44px target, label wraps naturally */
.consent { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-5); }
.consent input[type="checkbox"] {
  /* 24px is the WCAG 2.2 SC 2.5.8 minimum target size; 22px measured short. */
  width: 24px; height: 24px; min-height: 24px; margin: 1px 0 0; flex: 0 0 auto;
  accent-color: var(--brass); cursor: pointer;
}
.consent label {
  font-size: var(--fs-micro); line-height: 1.5; color: var(--muted);
  font-weight: 400; margin: 0; cursor: pointer;
}

/* ==========================================================================
   Scroll reveal — motion that clarifies flow
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.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;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }