/* ============================================================
   Debut — shared base (design tokens, resets, plaid, buttons)
   Used by every debut.homes page.
   ============================================================ */
:root {
  --cream:    #ECE3CF;
  --paper:    #F6F0E2;
  --paper-2:  #F1E9D6;
  --oat:      #E0D2B4;
  --camel:    #C28A45;
  --camel-deep:#A8702F;
  --walnut:   #6E4A2C;
  --walnut-deep:#4E331D;
  --brass:    #C99A4E;
  --denim:    #5C6B78;
  --ink:      #161B24;
  --ink-2:    #1F2733;
  --ink-3:    #2C3644;
  --line:     rgba(22,27,36,0.14);
  --line-on-dark: rgba(246,240,226,0.16);
  --text:     #1E1A14;
  --text-soft:#5A5142;
  --text-on-dark: #EFE7D5;
  --text-on-dark-soft: #B7AE9B;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --maxw: 1200px;
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(22,27,36,.06), 0 2px 8px rgba(22,27,36,.06);
  --shadow-md: 0 8px 30px rgba(22,27,36,.10), 0 2px 8px rgba(22,27,36,.06);
  --shadow-lg: 0 30px 70px rgba(22,27,36,.22), 0 8px 24px rgba(22,27,36,.14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); color: var(--text); background: var(--cream);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
h1,h2,h3 { margin: 0; font-weight: 500; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }
::selection { background: var(--camel); color: #fff; }

/* Buffalo-check plaid generators */
.plaid-navy {
  background-color: var(--cream);
  background-image:
    repeating-linear-gradient(0deg, rgba(22,27,36,.42) 0 var(--c,18px), transparent var(--c,18px) calc(var(--c,18px)*2)),
    repeating-linear-gradient(90deg, rgba(22,27,36,.42) 0 var(--c,18px), transparent var(--c,18px) calc(var(--c,18px)*2));
}
.plaid-camel {
  background-color: var(--oat);
  background-image:
    repeating-linear-gradient(0deg, rgba(110,74,44,.40) 0 var(--c,18px), transparent var(--c,18px) calc(var(--c,18px)*2)),
    repeating-linear-gradient(90deg, rgba(110,74,44,.40) 0 var(--c,18px), transparent var(--c,18px) calc(var(--c,18px)*2));
}
.plaid-cream-dark {
  background-color: var(--ink);
  background-image:
    repeating-linear-gradient(0deg, rgba(236,227,207,.10) 0 var(--c,20px), transparent var(--c,20px) calc(var(--c,20px)*2)),
    repeating-linear-gradient(90deg, rgba(236,227,207,.10) 0 var(--c,20px), transparent var(--c,20px) calc(var(--c,20px)*2));
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--camel-deep);
}
.kicker .dot { width:7px; height:7px; border-radius:50%; background: var(--camel); box-shadow: 0 0 0 4px rgba(194,138,69,.18); }
.on-dark .kicker { color: #E2B871; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:none; border-radius: 999px; font-weight:700; font-size:16px;
  padding: 16px 26px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  letter-spacing: -0.01em; white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-md); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); background:#0e1219; }
.btn-camel { background: var(--camel); color:#fff; box-shadow: 0 10px 26px rgba(168,112,47,.34); }
.btn-camel:hover { transform: translateY(-2px); background: var(--camel-deep); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }

.reveal { opacity:0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }

#root { min-height: 100vh; }
.boot { display:flex; align-items:center; justify-content:center; height:100vh; color:var(--text-soft); font-family:var(--serif); font-style:italic; font-size:22px; }

@media (max-width: 760px){ .wrap { padding: 0 20px; } }