/* Lala's — shared brand styles */
:root {
  --cobalt: #0048AD;
  --cobalt-deep: #003382;
  --cobalt-tint: #E8EEF9;
  --black: #000000;
  --cream: #FAF7F0;
  --warm-white: #F5F1E8;
  --ink: #0A0A0A;
  --muted: #6B6B6B;
  --line: rgba(0,0,0,0.12);
}

/* Brand fonts per guidelines:
   H1/H2 = Kent 4F (licensed, self-hosted)
   H3    = Caveat Brush (free, Google Fonts — stand-in for Brush Std Medium)
   Body  = Inter (free, Google Fonts — stand-in for Forma DJR Deck)
   Google Fonts are loaded via <link rel="preconnect"> + <link rel="stylesheet"> in index.html
   (moved out of @import here to avoid a render-blocking CSS-import waterfall). */

@font-face {
  font-family: 'Kent 4F';
  src: url('fonts/kent_4f.woff2') format('woff2'),
       url('fonts/kent_4f.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kent 4F';
  src: url('fonts/kent_4f.woff2') format('woff2'),
       url('fonts/kent_4f.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
/* 'Kent 4F Shadowed' @font-face removed: not referenced by index.html, so its 220KB
   OTF is excluded from this deploy. Re-add here if a shadowed heading is introduced. */

* { box-sizing: border-box; margin: 0; padding: 0; }

.lalas {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" on;
}

/* H1/H2 display — Kent 4F */
.lalas-display {
  font-family: 'Kent 4F', Impact, sans-serif;
  letter-spacing: -0.01em;
  line-height: 0.9;
  text-transform: uppercase;
  font-weight: 400;
}

/* H3 script — Caveat Brush (stand-in for Brush Std Medium) */
.lalas-script {
  font-family: 'Caveat Brush', 'Brush Script MT', cursive;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}

.lalas-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  font-weight: 500;
}

/* Checker strip — signature brand motif */
.checker {
  background-image:
    linear-gradient(45deg, var(--cobalt) 25%, transparent 25%),
    linear-gradient(-45deg, var(--cobalt) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--cobalt) 75%),
    linear-gradient(-45deg, transparent 75%, var(--cobalt) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
}
.checker-sm {
  background-image:
    linear-gradient(45deg, var(--cobalt) 25%, transparent 25%),
    linear-gradient(-45deg, var(--cobalt) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--cobalt) 75%),
    linear-gradient(-45deg, transparent 75%, var(--cobalt) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
}

/* Placeholder image — striped, labeled */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(0,72,173,0.06) 0 10px,
      rgba(0,72,173,0.12) 10px 20px);
  border: 1px solid rgba(0,72,173,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cobalt);
  overflow: hidden;
}
.ph-dark {
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.05) 0 10px,
      rgba(255,255,255,0.1) 10px 20px),
    var(--cobalt);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
}
.ph-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.85);
  border: 1px solid currentColor;
  color: var(--cobalt);
}
.ph-dark .ph-label { background: rgba(0,0,0,0.4); color: #fff; border-color: rgba(255,255,255,0.3); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2px solid var(--cobalt);
  transition: transform .08s ease, background .12s, color .12s;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--cobalt); color: #fff; }
.btn-primary:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); }
.btn-outline { background: transparent; color: var(--cobalt); }
.btn-outline:hover { background: var(--cobalt); color: #fff; }
.btn-inverse { background: #fff; color: var(--cobalt); border-color: #fff; }
.btn-inverse:hover { background: var(--cobalt-deep); color: #fff; border-color: var(--cobalt-deep); }
.btn-lg { font-size: 15px; padding: 16px 24px; }
.btn-md { font-size: 13px; padding: 12px 20px; }
.btn-sm { font-size: 11px; padding: 8px 14px; }

/* Sparkle */
.sparkle {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L14 10 L24 12 L14 14 L12 24 L10 14 L0 12 L10 10 Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L14 10 L24 12 L14 14 L12 24 L10 14 L0 12 L10 10 Z'/></svg>") center/contain no-repeat;
}

/* Wordmark — chunky like the menu */
.wordmark {
  font-family: 'Kent 4F', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--cobalt);
  line-height: 0.85;
  text-transform: uppercase;
}

/* Section tag */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--cobalt);
  font-weight: 500;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* Forms */
.field{display:grid;gap:6px}
.field label{font-family:'JetBrains Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:500;color:var(--cobalt)}
.field .req{color:var(--muted)}
.field input,.field select,.field textarea{font-family:'Inter',system-ui,sans-serif;font-size:15px;color:var(--ink);background:#fff;border:1px solid rgba(0,0,0,.25);padding:13px 14px;width:100%;min-height:48px;border-radius:0;-webkit-appearance:none;appearance:none}
.field textarea{min-height:112px;resize:vertical;line-height:1.5}
.field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%230048AD' stroke-width='1.6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:inset 0 0 0 1px var(--cobalt)}
.field input[type="file"]{padding:10px 12px;font-size:13px}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio-row label{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(0,0,0,.25);padding:12px 16px;min-height:48px;cursor:pointer;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink)}
.radio-row input{width:16px;height:16px;min-height:0;accent-color:var(--cobalt)}
.radio-row label:has(input:checked){border-color:var(--cobalt);box-shadow:inset 0 0 0 1px var(--cobalt);color:var(--cobalt)}

a{color:var(--cobalt)}
a:hover{color:var(--cobalt-deep)}

/* Frame scrollbars hidden */
.frame-scroll::-webkit-scrollbar { width: 0; display: none; }
.frame-scroll { scrollbar-width: none; }

/* Utility */
.no-select { user-select: none; }