/* 1Syllable — Aurum theme (gold + warm browns + deep charcoal) */
:root{
  /* Core palette */
  --gold:#C8A951;       /* primary gold */
  --gold-2:#CCA954;     /* secondary */
  --gold-3:#BC9152;     /* secondary */
  --gold-4:#9E804D;     /* secondary */
  --ink:#0E0E0E;        /* deep charcoal */
  --ink-2:#090806;      /* near black */
  --brown-1:#2C2311;
  --brown-2:#1A150C;
  --brown-3:#433316;
  --brown-4:#55492E;
  --brown-5:#80663B;

  /* UI tokens */
  --bg:var(--brown-2);
  --panel:color-mix(in oklab, var(--brown-2), white 6%);
  --line:color-mix(in oklab, var(--brown-2), white 14%);
  --text:#F2EDE3;          /* warm off-white for readability on dark bg */
  --muted:#CFC6B3;
  --brand:var(--gold);
  --brand-2:var(--gold-3);
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  --focus: 0 0 0 3px color-mix(in oklab, var(--gold), transparent 70%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1200px, 92%);margin:0 auto}
:focus-visible{outline: none; box-shadow: var(--focus); border-radius: 10px}

.nav{
  position:sticky;top:0;z-index:1000;
  background:linear-gradient(180deg, color-mix(in oklab, var(--ink-2), transparent 20%), transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(120%) blur(14px);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand img{height:36px;width:auto;filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));}
.brand span{font-weight:800;letter-spacing:0.5px}
.nav .links{display:flex;gap:18px;align-items:center}

.btn, button{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:var(--ink);border:0;border-radius:999px;padding:10px 16px;
  font-weight:800;letter-spacing:.2px;box-shadow:var(--shadow);cursor:pointer
}
.btn:hover{filter:brightness(1.03)}
.btn.ghost{
  background:transparent;border:1px solid var(--line);
  color:var(--text);
}
.btn.ghost:hover{border-color: color-mix(in oklab, var(--brand), white 30%)}

.theme-toggle{display:flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:6px 8px}
.theme-dot{width:16px;height:16px;border-radius:999px;border:1px solid var(--line);cursor:pointer}
.theme-dot.noir{background:linear-gradient(135deg,var(--gold-2),var(--gold-3))}
.theme-dot.sunset{background:linear-gradient(135deg,var(--gold-4),var(--gold))}
.theme-dot.orchid{background:linear-gradient(135deg,var(--brown-4),var(--brown-5))}
.theme-dot.cream{background:linear-gradient(135deg,#e9e2d3,#e0d4bb)}

.mobile-toggle{display:none;cursor:pointer;padding:8px;border-radius:12px;border:1px solid var(--line)}
@media (max-width: 840px){
  .nav .links{display:none}
  .mobile-toggle{display:block}
  .mobile-menu{display:none;position:absolute;left:0;right:0;top:60px;background:color-mix(in oklab, var(--bg), white 4%);border-bottom:1px solid var(--line)}
  .mobile-menu a{display:block;padding:14px 24px;border-top:1px solid var(--line)}
  .mobile-menu.open{display:block}
}

.hero{
  position:relative;min-height:72vh;display:grid;place-items:center;
  background:
    radial-gradient(1100px 520px at 80% -10%, color-mix(in oklab, var(--gold), transparent 82%), transparent 60%),
    radial-gradient(900px 520px at -10% 110%, color-mix(in oklab, var(--gold-3), transparent 85%), transparent 60%),
    linear-gradient(180deg, var(--brown-1), var(--brown-2)),
    url('assets/hero-bg.png') center/cover no-repeat;
  border-bottom:1px solid var(--line);
}
.hero-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center;padding:80px 0}
@media (max-width: 940px){ .hero-inner{grid-template-columns:1fr;padding:56px 0} }
.kicker{color:var(--brand);font-weight:800;letter-spacing:0.14em;text-transform:uppercase;font-size:12px}
.hero h1{margin:10px 0 8px;font-size: clamp(28px, 5vw, 54px);line-height:1.06;letter-spacing:-0.02em;color:var(--brand)}
.subtitle{color:var(--muted);font-size: clamp(14px, 2.1vw, 18px)}
.cta-row{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.stat .big{font-weight:900;font-size:26px;color:var(--brand)}
.stat .label{color:var(--muted);font-size:13px}

.section{padding:64px 0;border-bottom:1px solid var(--line)}
.section h2{font-size: clamp(22px, 3.6vw, 34px);margin:0 0 8px;color:var(--brand)}
.section p.lead{color:var(--muted);margin-top:0}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width: 900px){ .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} }

.card{
  background:linear-gradient(180deg, color-mix(in oklab, var(--brown-2), white 10%), color-mix(in oklab, var(--brown-2), white 6%));
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)
}
.card h3{margin:6px 0 8px;color:var(--brand)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--muted)}

.timetable{width:100%;border-collapse:separate;border-spacing:0 10px;margin-top:6px}
.timetable th, .timetable td{padding:12px 14px;text-align:left}
.timetable tr{background:var(--panel);border:1px solid var(--line)}
.timetable tr td:first-child, .timetable tr th:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.timetable tr td:last-child, .timetable tr th:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery img{width:100%;height:180px;object-fit:cover;border-radius:12px;border:1px solid var(--line);filter:saturate(95%) contrast(105%)}
@media (max-width: 900px){ .gallery{grid-template-columns:repeat(2,1fr)} .gallery img{height:150px} }

.faq{border-top:1px dashed var(--line);margin-top:10px}
.faq-item{border-bottom:1px dashed var(--line);padding:14px 0}
.faq-q{display:flex;justify-content:space-between;cursor:pointer}
.faq-a{display:none;color:var(--muted);padding-top:8px}

.form{display:grid;gap:12px;max-width:560px}
.input, textarea, select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:color-mix(in oklab, var(--brown-2), white 8%);color:var(--text)
}
textarea{min-height:120px;resize:vertical}
.helper{color:var(--muted);font-size:12px}

.footer{padding:36px 0;color:var(--muted)}
.footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--brand)}
.small{font-size:12px;color:var(--muted)}

.notice{background:color-mix(in oklab, var(--brown-2), white 8%);border:1px dashed var(--line);padding:12px;border-radius:12px;color:var(--muted)}
.tag{
  font-size:12px;color:var(--ink);
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  padding:6px 10px;border-radius:999px;font-weight:800
}

.toast{
  position:fixed;right:16px;bottom:16px;background:color-mix(in oklab, var(--brown-2), white 10%);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);display:none
}
.toast.show{display:block}

/* --- Mobile refinements --- */
html{ -webkit-text-size-adjust: 100%; }
body{ line-height:1.5; }
:root{ --tap-min:44px; }

/* Ensure tap targets meet 44px min on mobile */
@media (max-width: 520px){
  .btn, button{ padding:14px 18px; min-height: var(--tap-min); font-size:16px; }
  input, textarea, select{ font-size:16px; } /* prevent iOS zoom */
  .hero-inner{ padding:48px 0; }
  .nav-inner{ padding:10px 0; }
  .stats{ grid-template-columns:1fr; }
  .cta-row{ gap:10px; }
  .timetable th, .timetable td{ padding:10px 12px; }
  .gallery img{ height:140px; }
}

/* Responsive 2-col stats mid-range */
@media (min-width:521px) and (max-width: 880px){
  .stats{ grid-template-columns:repeat(2,1fr); }
}

/* Horizontal scroll wrapper for tables on narrow screens */
.table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; }
.table-wrap::-webkit-scrollbar{ height:8px }
.table-wrap::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px }

/* Safe-area padding for iOS notch */
.nav{ padding-top: env(safe-area-inset-top); }
.toast{ margin-bottom: env(safe-area-inset-bottom); }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}