/* =====================================================================
   TAJ TASHOMBE — the maison kit
   Shared design DNA inherited by every room. Mirrors the tokens the
   homepage established. Load with: <link rel="stylesheet" href="assets/kit.css">
   ===================================================================== */
*{ margin:0; padding:0; box-sizing:border-box; }
:root{
  --ink:#12100e; --black:#0a0a0b; --ivory:#f2eee5; --ivory-2:#e9e4d8;
  --bordeaux:#6a1f2b; --bordeaux-lt:#9a4552; --cyan:#54d3e6;
  --paper-ink:#1a1712; --mute:#8b857a; --mute-d:#5f5a51;
  --faint-l:#a49c8d; --faint-d:#7d766a;
  --line-d:rgba(242,238,229,.14); --line-l:rgba(20,17,12,.14);
  --field-d:rgba(242,238,229,.05);
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --ease:cubic-bezier(.16,.84,.28,1);
  --maxw:1240px;
}
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ font-family:var(--serif); background:var(--black); color:var(--ivory); line-height:1.5; overflow-x:hidden; }
body.locked{ overflow:hidden; height:100vh; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--bordeaux); color:var(--ivory); }

/* ---------- utilities ---------- */
.note{ font-family:var(--sans); font-weight:400; font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; }
.mono{ font-family:var(--mono); }
.serif-em{ font-style:italic; font-weight:300; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 8vw; }
.pane{ position:relative; min-height:100vh; display:flex; align-items:center; }
.pane.paper{ background:var(--ivory); color:var(--paper-ink); }
.pane.paper .note{ color:var(--mute-d); }
.brule{ width:74px; height:1px; background:var(--bordeaux); }
.brule.v{ width:1px; height:64px; }
.lapel{ width:100%; height:1px; background:var(--line-d); }
.pane.paper .lapel{ background:var(--line-l); }

/* ---------- reveal on scroll ---------- */
.rise{ opacity:0; transform:translateY(30px); transition:opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.rise.in{ opacity:1; transform:none; }
.rise.d1{ transition-delay:.1s; } .rise.d2{ transition-delay:.22s; } .rise.d3{ transition-delay:.36s; } .rise.d4{ transition-delay:.5s; }

/* =====================================================================
   CHROME — mark, nav, mobile menu, sound toggle
   ===================================================================== */
.mark{
  position:fixed; top:26px; left:5vw; z-index:600; display:flex; align-items:center; gap:13px;
  mix-blend-mode:difference; color:#fff;
}
.mark svg{ width:30px; height:auto; }
.mark .wordmark{ font-family:var(--serif); font-weight:500; font-size:15px; letter-spacing:.24em; }

.nav{
  position:fixed; top:28px; right:5vw; z-index:600; display:flex; align-items:center; gap:26px;
}
.nav .links{ display:flex; align-items:center; gap:24px; }
.nav a.navlink{ font-family:var(--sans); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:#fff; mix-blend-mode:difference; opacity:.72; transition:opacity .3s; }
.nav a.navlink:hover{ opacity:1; }
.nav a.navlink.accent{ color:var(--bordeaux-lt); mix-blend-mode:normal; opacity:1; }

/* sound toggle */
.sound-toggle{ display:flex; align-items:center; gap:9px; cursor:pointer; background:none; border:none;
  font-family:var(--sans); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#fff; mix-blend-mode:difference; opacity:.75; transition:opacity .3s; }
.sound-toggle:hover{ opacity:1; }
.eq{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.eq i{ width:2px; height:3px; background:currentColor; transition:height .2s; }
.sound-toggle.on .eq i{ animation:eq 1s ease-in-out infinite; }
.sound-toggle.on .eq i:nth-child(2){ animation-delay:.2s; }
.sound-toggle.on .eq i:nth-child(3){ animation-delay:.4s; }
.sound-toggle.on .eq i:nth-child(4){ animation-delay:.15s; }
@keyframes eq{ 0%,100%{ height:3px; } 50%{ height:12px; } }

/* hamburger — hidden on desktop */
.nav-toggle{ display:none; width:30px; height:20px; position:relative; background:none; border:none; cursor:pointer; mix-blend-mode:difference; }
.nav-toggle span{ position:absolute; left:0; right:0; height:1.5px; background:#fff; transition:transform .4s var(--ease), opacity .3s; }
.nav-toggle span:nth-child(1){ top:2px; } .nav-toggle span:nth-child(2){ top:9px; } .nav-toggle span:nth-child(3){ top:16px; }
body.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* full-screen mobile menu overlay */
.nav-overlay{
  position:fixed; inset:0; z-index:590; background:rgba(8,8,9,.98); backdrop-filter:blur(6px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
body.menu-open .nav-overlay{ opacity:1; visibility:visible; }
.nav-overlay a{ font-family:var(--serif); font-weight:400; font-size:32px; letter-spacing:.02em; color:var(--ivory); padding:9px 0; opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s; }
.nav-overlay a .no{ font-family:var(--mono); font-size:11px; color:var(--faint-d); letter-spacing:.14em; margin-right:14px; vertical-align:middle; }
.nav-overlay a.accent{ color:var(--bordeaux-lt); }
body.menu-open .nav-overlay a{ opacity:1; transform:none; }
body.menu-open .nav-overlay a:nth-child(1){ transition-delay:.08s; }
body.menu-open .nav-overlay a:nth-child(2){ transition-delay:.13s; }
body.menu-open .nav-overlay a:nth-child(3){ transition-delay:.18s; }
body.menu-open .nav-overlay a:nth-child(4){ transition-delay:.23s; }
body.menu-open .nav-overlay a:nth-child(5){ transition-delay:.28s; }
body.menu-open .nav-overlay a:nth-child(6){ transition-delay:.33s; }
body.menu-open .nav-overlay a:nth-child(7){ transition-delay:.38s; }
body.menu-open .nav-overlay a:nth-child(8){ transition-delay:.43s; }
body.menu-open .nav-overlay a:nth-child(9){ transition-delay:.48s; }
.nav-overlay .sound-toggle{ margin-top:30px; color:var(--faint-l); mix-blend-mode:normal; }

@media (max-width:760px){
  .mark{ top:20px; left:18px; }
  .mark .wordmark{ font-size:13.5px; letter-spacing:.2em; }
  .nav{ top:20px; right:18px; gap:18px; }
  .nav .links{ display:none; }
  .nav .sound-toggle{ display:none; }          /* sound lives inside the overlay on mobile */
  .nav-toggle{ display:block; }
}

/* =====================================================================
   ROOM SCAFFOLD — headers, plates, quotes
   ===================================================================== */
.room-head{ display:grid; gap:16px; padding:18vh 0 8vh; }
.room-head .rk{ color:var(--bordeaux-lt); }
.room-head h1, .room-head h2{ font-weight:400; font-size:clamp(44px,10vw,140px); line-height:.9; letter-spacing:.02em; }
.room-head .rlede{ font-style:italic; font-weight:300; font-size:clamp(19px,2.6vw,30px); color:var(--faint-l); max-width:24ch; margin-top:8px; }
.pane.paper .room-head .rlede{ color:var(--mute-d); }
.room-words{ display:flex; flex-wrap:wrap; gap:8px 30px; margin-top:34px; }
.room-words span{ font-family:var(--sans); font-weight:300; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint-l); }
.pane.paper .room-words span{ color:var(--mute); }

.plates{ display:grid; gap:34px 30px; }
.plates.g2{ grid-template-columns:repeat(2,1fr); }
.plates.g3{ grid-template-columns:repeat(3,1fr); }
.plate .frame{ position:relative; overflow:hidden; background:#151312 center/cover no-repeat; border:1px solid var(--line-d); }
.pane.paper .plate .frame{ background:#ded8ca; border-color:var(--line-l); }
.plate .frame.ar34{ aspect-ratio:3/4; } .plate .frame.ar43{ aspect-ratio:4/3; } .plate .frame.ar11{ aspect-ratio:1/1; } .plate .frame.ar169{ aspect-ratio:16/10; }
.plate .frame::before{ content:''; position:absolute; inset:0; transition:opacity .8s;
  background:radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,.05), transparent 60%), linear-gradient(160deg,#1c1917,#0f0d0c); }
.plate .frame.has-img::before{ opacity:0; }
.plate .pnum{ position:absolute; top:14px; left:15px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--bordeaux-lt); z-index:2; }
.plate figcaption{ display:flex; justify-content:space-between; gap:16px; margin-top:15px; align-items:baseline; }
.plate .cap{ font-style:italic; font-weight:300; font-size:17px; }
.plate .loc{ font-family:var(--sans); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint-l); white-space:nowrap; }

.pull{ padding:12vh 0; max-width:26ch; }
.pull q{ font-style:italic; font-weight:300; font-size:clamp(26px,4.4vw,58px); line-height:1.06; quotes:none; }
.pull .attr{ display:block; margin-top:26px; color:var(--faint-l); }

/* buttons */
.btn-line{ display:inline-block; font-family:var(--sans); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--ivory);
  padding:17px 42px; border:1px solid var(--bordeaux-lt); background:rgba(106,31,43,.12); cursor:pointer;
  transition:background .4s var(--ease), letter-spacing .4s var(--ease); white-space:nowrap; }
.btn-line:hover{ background:var(--bordeaux); letter-spacing:.4em; }

/* the Tashombe maker's mark — a stamp, never a sponsor logo */
.tashombe-mark{ font-family:var(--serif); font-weight:400; letter-spacing:.42em; font-size:13px; text-transform:uppercase; color:var(--bordeaux-lt); opacity:.9; }

/* footer */
.foot{ background:var(--black); border-top:1px solid var(--line-d); padding:60px 8vw; }
.foot-in{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; align-items:flex-end; }
.foot .fmark{ font-family:var(--serif); font-weight:500; font-size:16px; letter-spacing:.24em; }
.foot .fmeta{ color:var(--faint-l); line-height:2; }
.foot a.fnav{ color:var(--faint-l); transition:color .3s; }
.foot a.fnav:hover{ color:var(--bordeaux-lt); }

@media (prefers-reduced-motion:reduce){ .rise{ transition:none; transform:none; opacity:1; } *{ scroll-behavior:auto !important; } }