@import url("fonts.css");

:root {
  --den-bg: #140e0a;
  --den-bg-2: #1c1410;
  --den-surface: #2a1d14;
  --den-wood: #3d281a;
  --den-ink: #f6ead4;
  --den-muted: #cbb394;
  --den-gold: #f0b429;
  --den-gold-2: #ffd27a;
  --den-lantern: #ffbf4a;
  --den-rule: rgba(240, 180, 41, 0.22);
  --den-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --den-display: "Fraunces", Palatino, "Palatino Linotype", Georgia, serif;
  --den-sans: "Source Sans 3", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.den-page {
  margin: 0;
  background: var(--den-bg);
  color: var(--den-ink);
  font-family: var(--den-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
body.den-page > main { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a { color: var(--den-gold-2); }
a:hover { color: var(--den-gold); }
h1, h2, h3 {
  font-family: var(--den-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
.den-skip {
  position: absolute; left: -999px; top: 0;
  background: var(--den-gold); color: #1b120c; padding: 0.6rem 1rem; z-index: 100;
}
.den-skip:focus { left: 0.6rem; top: 0.6rem; }

/* ----- chrome ----- */
.den-header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--den-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--den-rule);
}
.den-header-inner, .den-wrap {
  width: min(72rem, calc(100% - 2rem));
  margin-inline: auto;
}
.den-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4rem;
}
.den-brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: var(--den-ink);
  font-family: var(--den-display); font-size: 1.25rem; font-weight: 500;
}
.den-brand img {
  width: 44px; height: 44px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(240,180,41,0.35), 0 0 16px rgba(240,180,41,0.25);
}
.den-brand:hover { color: var(--den-gold-2); }
.den-nav { display: none; gap: 1.3rem; align-items: center; }
.den-nav a {
  text-decoration: none; color: var(--den-muted); font-weight: 600; font-size: 0.95rem;
}
.den-nav a:hover, .den-nav a[aria-current="page"] { color: var(--den-gold); }
.den-nav-extra { margin-left: 0.4rem; }
.den-menu-btn {
  border: 1px solid var(--den-rule); background: transparent; color: var(--den-ink);
  min-height: 2.6rem; padding: 0 0.9rem; font: inherit; font-weight: 600; cursor: pointer;
  border-radius: 999px;
}
.den-mobile {
  display: none; border-top: 1px solid var(--den-rule); padding: 0.4rem 0 1rem;
}
.den-mobile a {
  display: flex; align-items: center; min-height: 2.7rem;
  text-decoration: none; color: var(--den-ink); font-weight: 600;
  width: min(72rem, calc(100% - 2rem)); margin-inline: auto;
}
.den-mobile.is-open { display: block; }
@media (min-width: 860px) {
  .den-nav { display: flex; }
  .den-menu-btn { display: none; }
}

/* ----- sound toggle ----- */
#den-sound {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
  border: 1px solid var(--den-rule);
  background: color-mix(in srgb, var(--den-surface) 92%, transparent);
  color: var(--den-ink); backdrop-filter: blur(10px);
  min-height: 2.75rem; padding: 0 1rem; font: inherit;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  border-radius: 999px; cursor: pointer;
  box-shadow: var(--den-shadow);
}
#den-sound:hover { border-color: var(--den-gold); color: var(--den-gold-2); }
#den-sound[aria-pressed="true"] { color: var(--den-gold); }
#den-sound[aria-pressed="false"] { color: var(--den-muted); }

/* history page sits on cream; keep the toggle readable there too */
body.den-history #den-sound {
  background: color-mix(in srgb, #faf6f0 92%, transparent);
  color: #1c1612;
  border-color: rgba(28,22,18,0.18);
  box-shadow: 0 8px 24px rgba(28,22,18,0.08);
}
body.den-history #den-sound[aria-pressed="false"] { color: #6f6458; }
body.den-history #den-sound[aria-pressed="true"] { color: #7a2e2a; }
#dodo-mute { display: none !important; }

/* ----- hero / typography ----- */
.den-hero { padding: 0 0 3rem; }
.den-hero-art {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  background: #1a120c;
}
.den-hero-copy { padding: 2.2rem 0 0; }
.den-kicker {
  letter-spacing: 0.18em; text-transform: uppercase;
  font-size: 0.72rem; font-weight: 600; color: var(--den-gold);
  margin: 0 0 0.6rem;
}
.den-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  margin: 0 0 0.8rem;
}
.den-lede {
  color: var(--den-muted); font-size: 1.15rem; max-width: 36rem; margin: 0 0 1.4rem;
}
.den-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.den-btn, .den-btn-line {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.85rem; padding: 0 1.15rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; cursor: pointer; font: inherit; font-weight: 600;
}
.den-btn {
  background: var(--den-gold); color: #1b120c; border: 0;
}
.den-btn:hover { background: var(--den-gold-2); color: #1b120c; }
.den-btn-line {
  background: transparent; color: var(--den-ink);
  border: 1px solid var(--den-rule);
}
.den-btn-line:hover { border-color: var(--den-gold); color: var(--den-gold-2); }

.den-section { padding: 3.2rem 0; }
.den-section h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0.3rem 0 0.8rem; }
.den-grid {
  display: grid; gap: 1.3rem; margin-top: 1.6rem;
}
@media (min-width: 740px) {
  .den-grid-2 { grid-template-columns: 1fr 1fr; }
  .den-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.den-card {
  display: flex; flex-direction: column; gap: 0.7rem;
  background: var(--den-surface);
  border: 1px solid var(--den-rule);
  border-radius: 1.1rem; padding: 1.25rem 1.25rem 1.35rem;
  text-decoration: none; color: inherit;
  box-shadow: var(--den-shadow);
  min-height: 100%;
}
a.den-card:hover {
  border-color: var(--den-gold);
  transform: translateY(-2px);
  color: inherit;
}
.den-card h3 {
  font-size: 1.55rem; margin: 0;
  color: var(--den-gold-2);
}
.den-card p { margin: 0; color: var(--den-muted); }
.den-card .den-more {
  margin-top: auto; padding-top: 0.8rem;
  color: var(--den-gold); font-weight: 600; font-size: 0.95rem;
}
.den-card.is-soon { opacity: 0.92; }
.den-card img, .den-thumb {
  width: 100%; border-radius: 0.7rem; aspect-ratio: 16/9; object-fit: cover;
  background: #20160f;
}
.den-ident {
  width: 100%; border-radius: 1rem; background: #000;
  aspect-ratio: 16/9; max-height: 70vh;
}

.den-footer {
  border-top: 1px solid var(--den-rule);
  padding: 1.6rem 0 5.5rem;
  color: var(--den-muted); font-size: 0.95rem;
}
.den-footer-inner {
  width: min(72rem, calc(100% - 2rem));
  margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem;
}
.den-footer a, .den-history-foot a {
  color: var(--den-gold-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ----- history chrome (sits above the original Maison Dodo page) ----- */
.den-history-bar {
  background: #140e0a; color: #f6ead4;
  font-family: var(--den-sans);
  border-bottom: 1px solid rgba(240,180,41,0.22);
}
.den-history-bar .den-header-inner { min-height: 3.4rem; }
.den-history-bar .den-brand { color: #f6ead4; font-size: 1.1rem; }
.den-history-bar .den-nav a { color: #cbb394; }
.den-history-bar .den-nav a:hover,
.den-history-bar .den-nav a[aria-current="page"] { color: #f0b429; }
.den-history-bar .den-menu-btn { color: #f6ead4; border-color: rgba(240,180,41,0.22); }
.den-history-bar .den-mobile a { color: #f6ead4; }
.den-history-foot {
  background: #140e0a; color: #cbb394;
  font-family: var(--den-sans); font-size: 0.92rem;
  padding: 1.1rem 0 5.2rem;
  border-top: 1px solid rgba(240,180,41,0.22);
}
.den-history-foot a { color: #ffd27a; }
.den-history-foot .den-wrap,
.den-history-foot .den-footer-inner {
  width: min(72rem, calc(100% - 2.5rem));
  margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a.den-card:hover { transform: none; }
}


/* ----- splash / gate ----- */
body.den-gate {
  background: #0c0806;
}
body.den-gate .den-header {
  position: absolute;
  left: 0; right: 0; top: 0;
  background: linear-gradient(rgba(12,8,6,0.72), transparent);
  border-bottom: 0;
}
body.den-gate .den-footer { display: none; }
.den-gate-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.den-gate-hero .den-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}
.den-gate-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 8rem 1.4rem 5.5rem;
  background: linear-gradient(transparent, rgba(12,8,6,0.55) 28%, rgba(12,8,6,0.9));
}
.den-gate-panel h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  margin: 0 0 0.7rem;
}
.den-gate-panel .den-lede {
  margin-inline: auto;
  margin-bottom: 1.6rem;
  color: #e8d7b6;
}
.den-enter {
  font-size: 1.25rem;
  min-height: 3.5rem;
  padding: 0 2rem;
  box-shadow: 0 0 0 1px rgba(240,180,41,0.25), 0 10px 40px rgba(240,180,41,0.22);
}
.den-enter:hover {
  box-shadow: 0 0 0 1px rgba(255,210,122,0.45), 0 12px 44px rgba(240,180,41,0.35);
}

/* intro overlay */
#den-intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
}
#den-intro.is-open { display: flex; }
#den-intro-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
#den-intro-skip {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 91;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(12,8,6,0.55);
  color: #f6ead4;
  backdrop-filter: blur(8px);
  min-height: 2.4rem;
  padding: 0 0.95rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
#den-intro-skip:hover {
  border-color: var(--den-gold);
  color: var(--den-gold-2);
}
@media (prefers-reduced-motion: reduce) {
  .den-enter { box-shadow: 0 0 0 1px rgba(240,180,41,0.25); }
}