/* ============================================================
   OTTO MAHJONG — Shared Stylesheet
   All brand variables live here. Style pass = update this file.
   ============================================================ */

:root {
  /* ── BRAND COLOR SYSTEM ── */

  /* Grey scale */
  --grey-900: #1A1A1C;
  --grey-700: #444445;
  --grey-500: #7B7B7B;
  --grey-300: #A5A5A5;
  --grey-100: #D0D0D0;
  --grey-50:  #E7E7E7;

  /* Indigo scale */
  --indigo-900: #1A2137;
  --indigo-800: #272F48;
  --indigo-700: #353E59;
  --indigo-600: #434D6B;
  --indigo-500: #525D7D;
  --indigo-400: #6F7893;
  --indigo-300: #8C94AA;
  --indigo-200: #AAB1C2;
  --indigo-100: #C9CFDA;
  --indigo-50:  #E8EEF2;

  /* Forest scale */
  --forest-900: #163224;
  --forest-800: #233F31;
  --forest-700: #304C3E;
  --forest-600: #3D594B;
  --forest-500: #4B6759;
  --forest-400: #627E70;
  --forest-300: #7C9082;
  --forest-200: #97A99C;
  --forest-100: #B3C3B8;
  --forest-50:  #D0DDD4;

  /* Copper scale */
  --copper-900: #482E23;
  --copper-800: #694131;
  --copper-700: #8B5640;
  --copper-600: #AF6B4F;
  --copper-500: #BC7F66;
  --copper-400: #C9937D;
  --copper-300: #D5A896;
  --copper-200: #E1BDAF;
  --copper-100: #ECD2C8;
  --copper-50:  #F6E8E2;

  /* ── SEMANTIC TOKENS ── */
  /* Map brand variables to site roles */

  --ink:          var(--grey-900);        /* Primary text on light */
  --bone:         var(--grey-50);         /* Light text on dark */
  --warm-white:   var(--indigo-50);       /* Page background */
  --walnut:       var(--copper-600);      /* Primary accent */
  --walnut-light: var(--copper-400);      /* Lighter accent / hover */
  --stone:        var(--indigo-600);      /* Muted text on light bg — #434D6B, 7.14:1 on indigo-50 */
  --linen:        var(--indigo-400);      /* Borders/dividers — #6F7893, 3.75:1 on indigo-50 */
  --accent:       var(--copper-700);      /* High contrast accent */

  /* WCAG-compliant accent variants */
  --walnut-on-light:  var(--copper-800);     /* Copper accent on light bg — #694131, 7.47:1 on indigo-50 */
  --walnut-on-dark:   var(--copper-300);     /* Copper accent on dark bg — #D5A896, 7.50:1 on indigo-900 */
  --stone-on-dark:    var(--indigo-200);     /* Muted text on dark bg — #AAB1C2, 7.43:1 on indigo-900 */
  --night:        var(--indigo-900);      /* Primary dark background */

  /* Secondary dark — Forest */
  --forest:       var(--forest-900);      /* Tertiary dark sections */
  --forest-mid:   var(--forest-600);      /* Forest midtone */
  --forest-light: var(--forest-50);       /* Forest tint background */

  /* Little Table palette — warmer, copper-forward */
  --lt-bg:        var(--copper-50);
  --lt-rust:      var(--copper-600);
  --lt-sage:      var(--forest-400);
  --lt-ink:       var(--indigo-900);
  --lt-sand:      var(--copper-300);

  /* Typography */
  --font-futura:  'Futura', 'Futura PT', 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-mono:    var(--font-futura); /* legacy alias — keeps all --font-mono refs working */

  /* Spacing */
  --section-pad:  7rem 6rem;
  --section-pad-sm: 5rem 3rem;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-serif);
  background: var(--warm-white);
  color: var(--ink);
  overflow-x: hidden;
}

/* ── TYPOGRAPHY ── */

/* Headlines — Futura Regular, Title Case */
h1, h2, h3, h4 {
  font-family: var(--font-futura);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Italic em inside headlines stays Garamond for contrast */
h1 em, h2 em, h3 em, h4 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
}

/* Body — Garamond sentence case */
p {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.8;
}

/* Eyebrows — Futura Bold All Caps (applied via .section-label and page-hero-eyebrow) */

/* ── SHARED NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 3rem;
  background: rgba(250, 248, 244, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linen);
}

.nav-logo {
  display: flex;
  align-items: center;
  color: var(--walnut);
  text-decoration: none;
  transition: opacity 0.2s;
}
.nav-logo:hover { opacity: 0.75; }
.nav-logo svg { height: 13px; width: auto; }

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  align-items: center;
}

.nav-links a {
  font-family: var(--font-futura);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active { color: var(--ink); }

.nav-cta {
  font-family: var(--font-futura);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-white) !important;
  background: var(--night);
  padding: 0.65rem 1.4rem;
  text-decoration: none;
  transition: background 0.2s !important;
}
.nav-cta:hover { background: var(--walnut) !important; }

/* ── SHARED FOOTER ── */
footer {
  background: var(--night);
  padding: 3.5rem 6rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-logo {
  color: var(--copper-300, #D5A896);
  text-decoration: none;
  display: block;
  transition: opacity 0.2s;
}
.footer-logo:hover { opacity: 0.75; }
.footer-logo svg { height: 11px; width: auto; }

.footer-nav {
  display: flex;
  gap: 2rem;
  justify-content: center;
  list-style: none;
}

.footer-nav a {
  font-family: var(--font-futura);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-on-dark);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-nav a:hover { color: var(--bone); }

.footer-right {
  text-align: right;
}

.footer-copy {
  font-family: var(--font-futura);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--stone-on-dark);
  display: block;
  margin-bottom: 0.4rem;
}

.footer-meaning {
  font-family: var(--font-futura);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(158,149,137,0.5);
}

/* ── SHARED UTILITIES ── */
.section-label {
  font-family: var(--font-futura);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--walnut-on-light);
  margin-bottom: 1.5rem;
  display: block;
}

.page-top { padding-top: 5rem; }

/* Image placeholder */
.img-placeholder {
  background: var(--linen);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.img-placeholder::after {
  content: attr(data-label);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stone);
  text-align: center;
  padding: 1rem;
}

.img-placeholder.dark {
  background: var(--night);
}
.img-placeholder.dark::after {
  color: rgba(245,240,232,0.3);
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.05s; }
.reveal-stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.15s; }
.reveal-stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.25s; }
.reveal-stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.35s; }

/* Shared CTA button */
.btn {
  display: inline-block;
  font-family: var(--font-futura);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  border: none;
}
.btn-dark {
  background: var(--ink);
  color: var(--bone);
}
.btn-dark:hover { background: var(--walnut); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--bone); }

.btn-walnut {
  background: var(--walnut);
  color: var(--warm-white);
}
.btn-walnut:hover { background: var(--walnut-light); }

/* Shared waitlist form */
.inline-form {
  display: flex;
  max-width: 480px;
}
.inline-form input {
  flex: 1;
  padding: 1rem 1.2rem;
  border: 1px solid var(--stone);
  border-right: none;
  background: var(--warm-white);
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
}
.inline-form input::placeholder { color: var(--stone); }
.inline-form input:focus { border-color: var(--ink); }
.inline-form button {
  padding: 1rem 1.6rem;
  background: var(--ink);
  color: var(--bone);
  border: 1px solid var(--ink);
  font-family: var(--font-futura);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.inline-form button:hover { background: var(--walnut); border-color: var(--walnut); }

/* Shared page hero (interior pages) */
.page-hero {
  background: var(--night);
  padding: 10rem 6rem 6rem;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: attr(data-word);
  position: absolute;
  bottom: -3rem;
  right: -1rem;
  font-family: var(--font-serif);
  font-size: 16rem;
  font-weight: 300;
  color: rgba(255,255,255,0.03);
  line-height: 1;
  pointer-events: none;
  letter-spacing: -0.05em;
}
.page-hero-eyebrow {
  font-family: var(--font-futura);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--walnut-on-dark);
  margin-bottom: 1.5rem;
  display: block;
}
.page-hero h1 {
  font-size: clamp(2.8rem, 5vw, 5rem);
  color: var(--bone);
  max-width: 700px;
  margin-bottom: 1.5rem;
}
.page-hero h1 em { font-style: italic; color: var(--walnut-light); }
.page-hero p {
  font-size: 1.2rem;
  color: rgba(245,240,232,0.6);
  max-width: 500px;
  line-height: 1.7;
}

/* ── RESPONSIVE ── */
/* ── HAMBURGER BUTTON ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.25s, opacity 0.2s;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1024px) {
  :root { --section-pad: var(--section-pad-sm); }

  nav {
    padding: 1.2rem 2rem;
    flex-wrap: wrap;
    gap: 0;
  }

  .nav-hamburger { display: flex; }

  /* Mobile nav drawer */
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0.5rem 0 1.2rem;
    gap: 0;
    order: 3;
    border-top: 1px solid var(--linen);
    margin-top: 0.8rem;
  }

  .nav-links.nav-open { display: flex; }

  .nav-links li { width: 100%; }

  .nav-links a {
    display: block;
    padding: 0.75rem 0;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--linen);
    color: var(--ink);
    letter-spacing: 0.12em;
  }

  .nav-links a:hover,
  .nav-links a.active { color: var(--walnut); }

  .nav-cta {
    margin-top: 0.8rem;
    display: block;
    text-align: center;
    padding: 0.9rem !important;
    background: var(--night) !important;
    color: var(--bone) !important;
    border: none;
    border-bottom: none !important;
  }
  .nav-cta:hover { background: var(--walnut) !important; }

  footer { grid-template-columns: 1fr; gap: 1.5rem; padding: 3rem 2rem; text-align: center; }
  .footer-nav { justify-content: center; }
  .footer-right { text-align: center; }
  .page-hero { padding: 8rem 3rem 4rem; }
}

@media (max-width: 640px) {
  .inline-form { flex-direction: column; }
  .inline-form input { border-right: 1px solid var(--stone); border-bottom: none; }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .inline-form { flex-direction: column; }
  .inline-form input { border-right: 1px solid var(--stone); border-bottom: none; }
}

/* ── FOOTER BRAND ── */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-brand .nav-logo {
  text-decoration: none;
}

/* ── OTTO MARK EMBLEM (section decoration) ── */
.otto-mark-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--walnut);
  opacity: 0.35;
}
.otto-mark-emblem svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}