/* ══════════════════════════════════════
   ZURI IMARA — SLATE v2.1
   Fraunces 200 + Jost · Slate & Bone
══════════════════════════════════════ */

:root,
[data-theme="light"] {
  --bg:              #EAEDE4;
  --bg-alt:          #E2E6DA;
  --bg-dark:         #182420;
  --bg-mid:          #1E2C26;
  --text-primary:    #182420;
  --text-secondary:  #6A7D70;
  --text-on-dark:    rgba(220,234,228,0.88);
  --text-on-dark-dim:rgba(220,234,228,0.45);
  --gold:            #617A6A;
  --gold-light:      #8AAF98;
  --border:          rgba(24,36,32,0.14);
  --header-bg:       rgba(234,237,228,0.93);
  --hero-fade:       #EAEDE4;
  --about-bg:        #EAEDE4;
  --booking-bg:      #EAEDE4;
  --footer-bg:       #0C1410;
  --hero-text:       #182420;
  --about-text:      #182420;
  --name-color:      #182420;
  --btn-bg:          #182420;
  --btn-text:        #EAEDE4;
  --experience-bg:   #182420;
  --boundaries-bg:   #1E2C26;
}

[data-theme="dark"] {
  --bg:              #0E1610;
  --bg-alt:          #121E16;
  --bg-dark:         #0A1008;
  --bg-mid:          #121E16;
  --text-primary:    #DCE8E0;
  --text-secondary:  #8AAF98;
  --text-on-dark:    rgba(220,234,228,0.88);
  --text-on-dark-dim:rgba(220,234,228,0.45);
  --gold:            #8AAF98;
  --gold-light:      #A8CCBA;
  --border:          rgba(184,212,200,0.16);
  --header-bg:       rgba(14,22,16,0.96);
  --hero-fade:       #0E1610;
  --about-bg:        #0E1610;
  --booking-bg:      #0E1610;
  --footer-bg:       #080E0A;
  --hero-text:       #DCE8E0;
  --about-text:      #D0E0D6;
  --name-color:      #D0E0D6;
  --btn-bg:          #8AAF98;
  --btn-text:        #0E1610;
  --experience-bg:   #0A1008;
  --boundaries-bg:   #0E1610;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0;
  transition: background-color .6s ease, color .6s ease, border-color .6s ease, opacity .6s ease; }
html { scroll-behavior: smooth; }
body { font-family:'Plus Jakarta Sans',sans-serif; font-weight:300; background:var(--bg); color:var(--text-primary); overflow-x:hidden; }
img  { display:block; max-width:100%; }

/* ── THEME TOGGLE ── */
.theme-toggle { background:none; border:1px solid var(--border); cursor:pointer; padding:.45rem .6rem;
  display:flex; align-items:center; gap:.5rem; border-radius:2rem; }
.theme-toggle:hover { border-color:var(--gold); }
.toggle-icon { width:14px; height:14px; color:var(--gold); }
.icon-sun  { display:none; }
.icon-moon { display:block; }
[data-theme="dark"] .icon-sun  { display:block; }
[data-theme="dark"] .icon-moon { display:none; }
.toggle-label { font-family:'Plus Jakarta Sans',sans-serif; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-secondary); }

/* ── HEADER ── */
header { position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem 4rem; background:var(--header-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.wordmark { display:flex; flex-direction:column; align-items:center; line-height:1; text-decoration:none; gap:.15em; }
.wordmark-zuri  { font-family:'Fraunces',serif; font-weight:200; font-style:italic; font-size:1.05rem; letter-spacing:.08em; color:var(--text-secondary); text-transform:lowercase; }
.wordmark-amara { font-family:'Fraunces',serif; font-weight:200; font-style:normal; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-primary); }
.header-right { display:flex; align-items:center; gap:2.5rem; }
nav { display:flex; gap:2.5rem; }
nav a { font-family:'Plus Jakarta Sans',sans-serif; font-weight:400; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-secondary); text-decoration:none; transition:color .3s; }
nav a:hover { color:var(--gold); }

/* ── HERO ── */
.hero { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; position:relative; overflow:hidden; }
.hero-image { position:relative; background:var(--bg-dark); overflow:hidden; }
.hero-image img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-image-placeholder { width:100%; height:100%;
  background:linear-gradient(160deg,#14241C 0%,#0E1C14 50%,#0A1410 100%);
  display:flex; align-items:flex-end; padding:3rem; }
.hero-image-caption { font-family:'Fraunces',serif; font-style:italic; font-weight:200; font-size:.85rem; color:rgba(154,160,173,.5); letter-spacing:.05em; }
.hero-image::after { content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 70%,var(--hero-fade) 100%); pointer-events:none; }
.hero-content { display:flex; flex-direction:column; justify-content:center;
  padding:8rem 5rem 5rem 4rem; position:relative; background:var(--bg); }
.hero-content::before { content:''; position:absolute; top:8rem; left:0; width:1px; height:4rem; background:var(--gold); opacity:.4; }
.hero-eyebrow  { font-size:.65rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:2rem; }
.hero-headline { font-family:'Fraunces',serif; font-weight:200; font-size:clamp(2rem,3vw,2.75rem); line-height:1.25; color:var(--hero-text); margin-bottom:2rem; }
.hero-subline  { font-weight:300; font-size:.85rem; line-height:1.8; color:var(--text-secondary); letter-spacing:.05em; max-width:36ch;
  border-top:1px solid var(--border); padding-top:1.5rem; }

/* ── SHARED ── */
section { padding:7rem 0; }
.container { max-width:1100px; margin:0 auto; padding:0 4rem; }
.section-label { font-size:.65rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  margin-bottom:3rem; display:flex; align-items:center; gap:1rem; }
.section-label::after { content:''; display:block; width:3rem; height:1px; background:var(--gold); opacity:.4; }

/* ── ABOUT ── */
.about { background:var(--about-bg); }
.about-inner { display:grid; grid-template-columns:1fr 2fr; gap:6rem; align-items:start; }
.about-aside { position:sticky; top:8rem; }
.about-aside-name { font-family:'Fraunces',serif; font-weight:200; font-size:3.5rem; line-height:1; color:var(--name-color); letter-spacing:-.01em; }
.about-aside-name span { display:block; color:var(--gold); font-style:normal; }
.about-aside-detail { margin-top:2rem; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-secondary); line-height:2; }
.about-body p { font-family:'Fraunces',serif; font-size:1.35rem; font-weight:200; line-height:1.8; color:var(--about-text); }
.about-body p + p { margin-top:1.5rem; }

/* ── SLIDESHOW ── */
.section-slideshow { position:relative; width:100%; height:70vh; overflow:hidden; background:var(--bg-dark); }
.slideshow-track { position:relative; width:100%; height:100%; }
.slideshow-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; }
.slideshow-slide--active { opacity:1; }
.slideshow-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.slideshow-placeholder { width:100%; height:100%;
  background:linear-gradient(160deg,#14241C 0%,#0E1C14 50%,#0A1410 100%);
  display:flex; align-items:flex-end; padding:2.5rem 4rem; }
.slideshow-placeholder span { font-family:'Fraunces',serif; font-style:italic; font-weight:200; font-size:.85rem; color:rgba(154,160,173,.45); letter-spacing:.08em; }
.slideshow-dots { position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%); display:flex; gap:.6rem; z-index:10; }
.slideshow-dot { width:6px; height:6px; border-radius:50%; border:1px solid rgba(154,160,173,.5); background:transparent; cursor:pointer; padding:0; transition:background .3s,border-color .3s; }
.slideshow-dot--active { background:rgba(154,160,173,.7); border-color:rgba(154,160,173,.7); }

/* ── EXPERIENCE ── */
.experience { background:var(--experience-bg); }
.experience .section-label,.experience .section-label::after { color:var(--gold-light); background:var(--gold-light); }
.experience-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.experience-block { border-top:1px solid rgba(120,126,138,.2); padding-top:2rem; }
.experience-block p { font-family:'Fraunces',serif; font-size:1.2rem; font-weight:200; line-height:1.85; color:var(--text-on-dark); }
.experience-block p + p { margin-top:1.5rem; }

/* ── IMAGE BREAK ── */
.section-image-break { width:100%; height:60vh; overflow:hidden; background:var(--bg-dark); }
.section-image-break img { width:100%; height:100%; object-fit:cover; display:block; }
.section-image-break-placeholder { width:100%; height:100%;
  background:linear-gradient(160deg,#14241C 0%,#0E1C14 50%,#0A1410 100%);
  display:flex; align-items:flex-end; padding:2.5rem 4rem; }
.section-image-break-placeholder span { font-family:'Fraunces',serif; font-style:italic; font-weight:200; font-size:.85rem; color:rgba(154,160,173,.45); letter-spacing:.08em; }

/* ── BOUNDARIES ── */
.boundaries { background:var(--boundaries-bg); }
.boundaries .section-label { color:var(--gold-light); }
.boundaries .section-label::after { background:var(--gold-light); }
.boundaries-inner { display:grid; grid-template-columns:1fr 1.5fr; gap:6rem; align-items:start; }
.boundaries-aside { position:sticky; top:8rem; }
.boundaries-body p { font-family:'Fraunces',serif; font-size:1.15rem; font-weight:200; line-height:1.9; color:var(--text-on-dark); }
.boundaries-body p + p { margin-top:1.75rem; }
.boundaries-closer { margin-top:3rem; padding-top:2rem; border-top:1px solid rgba(120,126,138,.2);
  font-family:'Fraunces',serif; font-size:1.1rem; font-style:italic; font-weight:200; color:var(--gold-light); line-height:1.6; }

/* ── KINDRED TEASER ── */
.kindred-teaser { background:var(--about-bg); }
.kindred-teaser .section-label { color:var(--gold); }
.kindred-teaser .section-label::after { background:var(--gold); }
.kindred-teaser-inner { display:grid; grid-template-columns:1fr 1.5fr; gap:6rem; align-items:start; }
.kindred-teaser-aside { position:sticky; top:8rem; }
.kindred-teaser-body p { font-family:'Fraunces',serif; font-size:1.2rem; font-weight:200; line-height:1.85; color:var(--about-text); }
.kindred-teaser-body p + p { margin-top:1.5rem; }
.kindred-teaser-link { display:inline-block; margin-top:2.5rem; font-size:.7rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); text-decoration:none; border-bottom:1px solid var(--border); padding-bottom:.15em; transition:color .2s,border-color .2s; }
.kindred-teaser-link:hover { color:var(--text-primary); border-color:var(--text-primary); }

/* ── CONTACT / BOOKING ── */
.booking { background:var(--booking-bg); text-align:center; padding:9rem 0; }
.booking-inner { max-width:600px; margin:0 auto; padding:0 2rem; }
.booking .section-label { justify-content:center; }
.booking .section-label::after { display:none; }
.booking-headline { font-family:'Fraunces',serif; font-weight:200; font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.3; color:var(--text-primary); margin-bottom:2rem; }
.booking-body p { font-weight:300; font-size:.9rem; line-height:1.9; color:var(--text-secondary); }
.booking-body p + p { margin-top:1rem; }
.booking-body { margin-bottom:3rem; }

/* ── BUTTON ── */
.btn { display:inline-block; font-weight:400; font-size:.7rem; letter-spacing:.25em; text-transform:uppercase;
  color:var(--btn-text); background:var(--btn-bg); padding:1.1rem 3rem; text-decoration:none;
  border:1px solid var(--btn-bg); position:relative; overflow:hidden; }
.btn::after { content:''; position:absolute; inset:0; background:var(--gold); transform:translateX(-100%); transition:transform .3s ease; z-index:0; }
.btn span { position:relative; z-index:1; }
.btn:hover { border-color:var(--gold); color:#0E1014; }
.btn:hover::after { transform:translateX(0); }

/* ── FOOTER ── */
footer { background:var(--footer-bg); color:var(--text-on-dark-dim); padding:3rem 4rem;
  display:flex; justify-content:space-between; align-items:center; }
.footer-name { font-family:'Fraunces',serif; font-weight:200; font-size:1rem; letter-spacing:.05em; color:var(--gold); }
.fn-zuri  { font-style:italic; }
.fn-amara { font-style:normal; letter-spacing:.08em; text-transform:uppercase; }
.footer-detail { font-size:.7rem; letter-spacing:.1em; line-height:1.8; text-align:center; }
.footer-copy   { font-size:.65rem; letter-spacing:.1em; }

/* ── KINDRED PAGE ── */
.page-kindred { padding-top:5rem; }
.kindred-page-hero { background:var(--about-bg); padding:8rem 0 6rem; border-bottom:1px solid var(--border); }
.kindred-page-hero .section-label { color:var(--gold); }
.kindred-page-hero .section-label::after { background:var(--gold); }
.kindred-page-title { font-family:'Fraunces',serif; font-weight:200; font-size:clamp(2.5rem,6vw,5rem);
  line-height:.95; color:var(--text-primary); letter-spacing:-.01em; margin-bottom:2.5rem; }
.kindred-page-intro { font-family:'Fraunces',serif; font-size:1.2rem; font-weight:200; font-style:italic;
  line-height:1.85; color:var(--text-secondary); max-width:640px; }
.kindred-page-intro + .kindred-page-intro { margin-top:1.25rem; }
.kindred-persons { background:var(--bg); }
.kindred-card { display:grid; grid-template-columns:300px 1fr; border-bottom:1px solid var(--border); }
.kindred-card:first-child { border-top:1px solid var(--border); }
.kindred-card:nth-child(even) { grid-template-columns:1fr 300px; }
.kindred-card:nth-child(even) .kindred-card-image { order:2; border-left:1px solid var(--border); border-right:none; }
.kindred-card:nth-child(even) .kindred-card-body  { order:1; }
.kindred-card-image { border-right:1px solid var(--border); overflow:hidden; min-height:340px; background:var(--bg-dark); }
.kindred-card-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.kindred-card:hover .kindred-card-image img { transform:scale(1.03); }
.kindred-image-placeholder { width:100%; height:100%; min-height:340px;
  background:linear-gradient(160deg,#14241C 0%,#0E1C14 50%,#0A1410 100%);
  display:flex; align-items:flex-end; padding:2rem; }
.kindred-image-placeholder span { font-family:'Fraunces',serif; font-style:italic; font-weight:200; font-size:.8rem; color:rgba(154,160,173,.4); letter-spacing:.08em; }
.kindred-card-body { padding:3.5rem 4rem; display:flex; flex-direction:column; justify-content:center; }
.kindred-card-name { font-family:'Fraunces',serif; font-size:clamp(1.8rem,3vw,2.5rem); font-weight:200; line-height:1.05; color:var(--text-primary); margin-bottom:.35rem; }
.kindred-card-location { font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:400; margin-bottom:1.75rem; }
.kindred-card-desc { font-family:'Fraunces',serif; font-size:1.1rem; font-style:italic; font-weight:200; color:var(--text-secondary); line-height:1.85; margin-bottom:2rem; max-width:52ch; }
.kindred-card-link { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); text-decoration:none;
  border-bottom:1px solid var(--border); padding-bottom:.15em; align-self:flex-start; transition:color .2s,border-color .2s; }
.kindred-card-link:hover { color:var(--text-primary); border-color:var(--text-primary); }
.kindred-closing { background:var(--boundaries-bg); padding:7rem 0; }
.kindred-closing .section-label { color:var(--gold-light); }
.kindred-closing .section-label::after { background:var(--gold-light); }
.kindred-closing-text { font-family:'Fraunces',serif; font-size:1.15rem; font-weight:200; font-style:italic;
  color:var(--text-on-dark); line-height:1.9; max-width:560px; margin-bottom:3rem; }

/* ── HAMBURGER ── */
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:.4rem; width:28px; height:28px; }
.nav-toggle-bar { display:block; width:100%; height:1px; background:var(--text-primary); transition:transform .3s ease,opacity .3s ease; transform-origin:center; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ── DARK GRADIENTS (evening only) ── */
[data-theme="dark"] .experience {
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%,rgba(24,44,36,0.9) 0%,transparent 70%),
    radial-gradient(ellipse 60% 80% at 80% 30%,rgba(14,32,24,0.7) 0%,transparent 65%),
    #182420;
}
[data-theme="dark"] .boundaries {
  background:
    radial-gradient(ellipse 70% 60% at 75% 60%,rgba(20,40,30,0.85) 0%,transparent 65%),
    radial-gradient(ellipse 50% 70% at 15% 25%,rgba(12,28,20,0.6) 0%,transparent 60%),
    #1E2C26;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.hero-eyebrow  { animation:fadeUp .8s ease .2s both; }
.hero-headline { animation:fadeUp .8s ease .4s both; }
.hero-subline  { animation:fadeUp .8s ease .6s both; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  header { padding:1.25rem 1.5rem; flex-wrap:wrap; }
  .header-right { display:flex; align-items:center; gap:1rem; }
  nav#mainNav { display:none; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0;
    background:var(--header-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:.5rem 0 1rem; }
  nav#mainNav.is-open { display:flex; }
  nav#mainNav a { padding:.85rem 1.5rem; font-size:.7rem; letter-spacing:.2em; border-bottom:1px solid var(--border); }
  nav#mainNav a:last-child { border-bottom:none; }
  .toggle-label { display:none; }
  .nav-toggle   { display:flex; }
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-image { height:60vw; }
  .hero-image::after { display:none; }
  .hero-content { padding:4rem 2rem 5rem; }
  .container { padding:0 2rem; }
  .about-inner,.boundaries-inner { grid-template-columns:1fr; gap:3rem; }
  .about-aside,.boundaries-aside { position:static; }
  .experience-grid { grid-template-columns:1fr; gap:2.5rem; }
  .section-slideshow  { height:50vw; }
  .section-image-break{ height:45vw; }
  footer { flex-direction:column; gap:1.5rem; text-align:center; padding:2.5rem 2rem; }
  .kindred-teaser-inner { grid-template-columns:1fr; gap:3rem; }
  .kindred-teaser-aside { position:static; }
  .kindred-card,.kindred-card:nth-child(even) { grid-template-columns:1fr; }
  .kindred-card-image,.kindred-card:nth-child(even) .kindred-card-image { order:0; border-right:none; border-left:none; border-bottom:1px solid var(--border); min-height:260px; }
  .kindred-card:nth-child(even) .kindred-card-body { order:1; }
  .kindred-card-body { padding:2.5rem 2rem; }
}