/* ============================================================
   HAUS — BLACK HOUSE design system.
   Dark luxury / private creative club / cinematic / architectural.
   Obsidian ground, Graphite surfaces, Warm White text, Muted Gold
   accent used sparingly (~10% or less — borders, labels, hover,
   selected states — never large fills).
   ============================================================ */

:root {
  --obsidian: #0a0a0a;
  --graphite: #1a1a1a;
  --graphite-raised: #201f1c;
  --warm-white: #f2f0eb;
  --warm-white-dim: #b8b4a8;
  --muted: #8a8578;
  --line: rgba(242, 240, 235, 0.12);
  --line-strong: rgba(242, 240, 235, 0.22);
  --gold: #b8a06a;
  --gold-ink: #0a0a0a;
  --ok: #8fbf9a;
  --ok-bg: rgba(143, 191, 154, 0.12);
  --warn: #d8b979;
  --warn-bg: rgba(216, 185, 121, 0.12);
  --err: #d98f86;
  --err-bg: rgba(217, 143, 134, 0.12);
  --shadow: 0 1px 0 rgba(242,240,235,0.04), 0 20px 50px rgba(0,0,0,0.5);
  --radius: 3px;
  --radius-sm: 2px;
  --max-width: 1180px;
}

/* Deliberate single dark identity — BLACK HOUSE does not flip to a light
   theme for a system light-mode preference; the obsidian ground IS the
   brand, on every device, every time. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--warm-white);
  font-family: "Archivo", "Noto Sans Thai", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Subtle film-grain texture — pure CSS, no image asset, no dependency.
   Fixed, pointer-events:none, extremely low opacity: felt, not seen. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }

.brandmark {
  font-family: "Anton", "Archivo Black", "Noto Sans Thai", "Noto Sans SC", sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.eyebrow, .label {
  font-family: "Archivo", "Noto Sans Thai", "Noto Sans SC", sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
}

/* ---- Top navigation ---- */
header.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,10,0.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px 24px; max-width: var(--max-width); margin: 0 auto;
}
.site-header .logo {
  font-size: 20px; color: var(--warm-white);
  display: flex; align-items: baseline; gap: 10px;
}
.site-header .logo .eyebrow { display: none; }
@media (min-width: 700px) { .site-header .logo .eyebrow { display: inline; } }

.site-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.site-nav a {
  font-family: "Archivo", "Noto Sans Thai", "Noto Sans SC", sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--warm-white-dim);
  padding: 10px 14px; border-radius: var(--radius-sm); transition: color 0.2s ease;
  position: relative;
}
.site-nav a:hover { color: var(--warm-white); }
.site-nav a[aria-current="page"] { color: var(--gold); }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: var(--gold);
}
.site-nav .cta {
  border: 1px solid var(--warm-white); color: var(--warm-white);
  padding: 10px 18px; border-radius: var(--radius-sm); margin-left: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.site-nav .cta:hover { background: var(--warm-white); color: var(--obsidian); }
.site-nav .cta .arrow { color: var(--gold); transition: transform 0.2s ease; }
.site-nav .cta:hover .arrow { transform: translateX(3px); }

.lang-switch { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px; margin-left: 4px; }
.lang-switch button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  padding: 6px 9px; border-radius: 1px;
}
.lang-switch button[aria-current="true"] { background: var(--graphite-raised); color: var(--gold); }

.mobile-nav-toggle { display: none; background: none; border: 0; color: var(--warm-white); font-size: 22px; cursor: pointer; }

@media (max-width: 860px) {
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--obsidian); flex-direction: column; align-items: stretch; padding: 8px 16px 20px; border-bottom: 1px solid var(--line); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 10px; }
  .site-nav .cta { justify-content: center; margin: 8px 0 0; }
  .mobile-nav-toggle { display: block; }
}

/* ---- Footer ---- */
footer.site-footer { background: var(--obsidian); color: var(--warm-white-dim); margin-top: 96px; border-top: 1px solid var(--line); }
footer.site-footer .wrap { padding: 56px 24px 40px; display: grid; gap: 32px; grid-template-columns: 1.3fr 1fr 1fr; }
footer.site-footer h3.label { color: var(--gold); margin: 0 0 16px; }
footer.site-footer a { color: var(--warm-white-dim); font-size: 13.5px; display: block; padding: 5px 0; transition: color 0.2s ease; }
footer.site-footer a:hover { color: var(--warm-white); }
footer.site-footer .bottom { border-top: 1px solid var(--line); font-size: 11.5px; letter-spacing: 0.05em; color: var(--muted); padding: 18px 24px; text-align: center; }
@media (max-width: 700px) { footer.site-footer .wrap { grid-template-columns: 1fr; } }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: "Archivo", "Noto Sans Thai", "Noto Sans SC", sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 15px 26px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn .arrow { transition: transform 0.2s ease; color: var(--gold); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary { background: var(--warm-white); color: var(--obsidian); border-color: var(--warm-white); }
.btn-primary:hover { background: var(--graphite-raised); color: var(--warm-white); border-color: var(--line-strong); }
.btn-outline { background: transparent; border-color: var(--warm-white); color: var(--warm-white); }
.btn-outline:hover { background: var(--warm-white); color: var(--obsidian); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--warm-white-dim); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---- Cards / surfaces ---- */
.card {
  background: var(--graphite); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px;
}
.card + .card { margin-top: 16px; }
.card:hover { border-color: var(--line-strong); }

.pill { display: inline-block; font-family: "Archivo", sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; border: 1px solid transparent; }
.pill-ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(143,191,154,0.3); }
.pill-warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(216,185,121,0.3); }
.pill-err { background: var(--err-bg); color: var(--err); border-color: rgba(217,143,134,0.3); }
.pill-muted { background: var(--graphite-raised); color: var(--muted); border-color: var(--line); }
.pill-gold { background: rgba(184,160,106,0.12); color: var(--gold); border-color: rgba(184,160,106,0.35); }

/* ---- Hero ---- */
.hero { padding: 120px 0 80px; }
.hero.center { text-align: center; }
.hero .eyebrow { display: block; margin-bottom: 24px; }
.hero h1 {
  font-size: clamp(48px, 11vw, 132px); line-height: 0.92; margin: 0 0 28px;
  text-wrap: balance;
}
.hero h1 .line { display: block; }
.hero h1 .line-gold { color: var(--gold); }
.hero p.lede { font-size: 17px; color: var(--warm-white-dim); max-width: 520px; margin: 0 0 36px; }
.hero.center p.lede { margin-left: auto; margin-right: auto; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero.center .actions { justify-content: center; }

/* ---- Section ---- */
section.block { padding: 72px 0; }
section.block.divider { border-top: 1px solid var(--line); }
section.block h2 { font-size: clamp(28px, 4.4vw, 48px); line-height: 1.05; margin: 0 0 14px; text-wrap: balance; text-transform: uppercase; letter-spacing: 0.01em; }
section.block p.section-lede { color: var(--warm-white-dim); max-width: 560px; margin: 0 0 40px; font-size: 15.5px; }

.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid > * { background: var(--graphite); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }
.grid .card { border: 0; border-radius: 0; box-shadow: none; }

/* ---- Resource / studio cards ---- */
.resource-card { display: flex; flex-direction: column; gap: 14px; }
.resource-card h2, .resource-card h3 { text-transform: uppercase; letter-spacing: 0.01em; }
.resource-card .price { font-family: "Anton", "Noto Sans Thai", "Noto Sans SC", sans-serif; font-size: 40px; font-variant-numeric: tabular-nums; color: var(--warm-white); }
.resource-card .price small { font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-left: 4px; }

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-family: "Archivo", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-white-dim); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; padding: 13px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--graphite-raised); color: var(--warm-white);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field .hint { font-size: 12px; color: var(--muted); }
.field .error { font-size: 12.5px; color: var(--err); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.form-card { max-width: 480px; margin: 0 auto; }

/* ---- Alerts / states ---- */
.alert { border-radius: var(--radius-sm); border: 1px solid; padding: 13px 15px; font-size: 13.5px; margin-bottom: 18px; }
.alert-ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(143,191,154,0.3); }
.alert-err { background: var(--err-bg); color: var(--err); border-color: rgba(217,143,134,0.3); }
.alert-warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(216,185,121,0.3); }
.alert-muted { background: var(--graphite-raised); color: var(--warm-white-dim); border-color: var(--line); }

.skeleton { background: linear-gradient(90deg, var(--graphite) 25%, var(--graphite-raised) 50%, var(--graphite) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- Table (transactions / bookings list) ---- */
table.tx { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tx th { text-align: left; font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 12px; border-bottom: 1px solid var(--line); }
table.tx td { padding: 14px 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* ---- Dashboard quick actions ---- */
.quick-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.quick-actions a.btn { flex: 1 1 160px; }

/* ---- Utility ---- */
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.muted { color: var(--warm-white-dim); }
.center { text-align: center; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
[hidden] { display: none !important; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* ============================================================
   Beta Phase E — restrained motion layer. Cinematic/architectural, not
   template-flashy: opacity + a small vertical rise, nothing else moves
   on its own. motion.js adds/removes [data-motion] and toggles
   .in-view; this file owns the actual transition so JS never hardcodes
   timing values. Every rule here is neutralized under
   prefers-reduced-motion at the bottom — see there for the one place
   that guarantee lives.
   ============================================================ */

/* Progressive enhancement, deliberately: [data-motion] elements are
   fully visible by DEFAULT. The hidden-until-scrolled-into-view state
   only exists once html.js-motion-ready is present, which motion.js
   sets in its very first line, before it does anything else — and only
   once it has confirmed IntersectionObserver exists and the visitor
   hasn't asked for reduced motion. If the script fails to load, throws,
   is blocked, or the visitor has JS disabled, content simply renders
   normally. A scroll-reveal effect must never be the reason real content
   stays invisible. */
html.js-motion-ready [data-motion] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-motion-ready [data-motion].in-view { opacity: 1; transform: translateY(0); }

/* Hero headline — reveal line by line, the gold line landing slightly
   after the rest (a beat of emphasis, not a gimmick). Same progressive-
   enhancement guard: only animates once js-motion-ready is confirmed. */
html.js-motion-ready .hero h1 .line {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1), transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-motion-ready .hero.in-view h1 .line { opacity: 1; transform: translateY(0); }
html.js-motion-ready .hero.in-view h1 .line:nth-child(1) { transition-delay: 60ms; }
html.js-motion-ready .hero.in-view h1 .line:nth-child(2) { transition-delay: 180ms; }
html.js-motion-ready .hero.in-view h1 .line:nth-child(3) { transition-delay: 340ms; }
html.js-motion-ready .hero .eyebrow { opacity: 0; transition: opacity 400ms ease 0ms; }
html.js-motion-ready .hero.in-view .eyebrow { opacity: 1; }
html.js-motion-ready .hero.in-view p.lede,
html.js-motion-ready .hero.in-view .actions {
  animation: haus-fade-up 550ms cubic-bezier(0.16, 1, 0.3, 1) 460ms both;
}
@keyframes haus-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* Navigation — underline slide instead of a hard cut, mobile menu reveal. */
.site-nav a { transition: color 0.2s ease; }
.site-nav a::after { transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease; transform: scaleX(0); transform-origin: left; opacity: 0; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); opacity: 1; }
.site-nav a:hover::after { transform: scaleX(1); opacity: 0.5; }
.site-nav.open { animation: haus-menu-reveal 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes haus-menu-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Cards — a restrained lift, never a jump. No fabricated room photography
   exists to scale, so the equivalent treatment here is the card surface
   itself: border warms toward gold and it lifts 2px, nothing snaps. */
.card { transition: border-color 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease; }
.room-option:hover, .resource-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.grid .card:hover { border-color: var(--line-strong); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skeleton { animation: none; }
  .btn .arrow, .site-nav .cta .arrow { transition: none; }
  /* The one guarantee that matters: motion off means motion OFF, not
     "faster." Every animated/transitioned element in this file resolves
     to its final, fully-visible state immediately, with nothing to opt
     back into. */
  [data-motion], .hero h1 .line, .hero .eyebrow {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .hero.in-view p.lede, .hero.in-view .actions, .site-nav.open { animation: none !important; }
  .site-nav a::after { transition: none !important; }
  .card { transition: none !important; }
  .room-option:hover, .resource-card:hover, .grid .card:hover { transform: none !important; }
}