:root { --ink:#070b0f; --paper:#eee5d5; --muted:#b8afa1; --gold:#c9a65c; --gold-soft:#8c7444; --serif:"Cormorant Garamond",Georgia,serif; --sans:"Inter",system-ui,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; }
body { margin:0; color:var(--paper); background:var(--ink); font-family:var(--serif); font-size:1rem; line-height:1.45; }
body::before { content:""; position:fixed; inset:0; z-index:-1; opacity:.32; background:radial-gradient(circle at 15% 20%,rgba(66,78,86,.18),transparent 27%),radial-gradient(circle at 85% 58%,rgba(91,59,40,.13),transparent 30%),linear-gradient(135deg,transparent 48%,rgba(255,255,255,.018) 49%,transparent 50%); background-size:auto,auto,22px 22px; }
a { color:inherit; }
.skip-link { position:fixed; left:1rem; top:-6rem; z-index:200; padding:.7rem 1rem; background:var(--gold); color:#080a0c; font-family:var(--sans); text-decoration:none; }
.skip-link:focus { top:1rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.site-header { height:4.8rem; position:sticky; top:0; z-index:50; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:3rem; padding:0 max(4vw,calc((100vw - 92rem)/2)); background:rgba(5,9,12,.95); border-bottom:1px solid var(--gold-soft); backdrop-filter:blur(14px); }
.brand { color:#dec07c; font-size:clamp(1.4rem,2.1vw,2rem); font-weight:500; letter-spacing:.02em; text-decoration:none; white-space:nowrap; }
.brand span { color:#e8d6b3; }
.site-header nav { display:flex; justify-content:center; gap:clamp(1rem,2.1vw,2.3rem); height:100%; }
.site-header nav a { display:grid; place-items:center; position:relative; color:#e6e2da; font:500 .73rem/1 var(--sans); text-decoration:none; text-transform:uppercase; }
.site-header nav a::after { content:""; position:absolute; left:0; right:100%; bottom:.65rem; height:2px; background:var(--gold); transition:right .25s; }
.site-header nav a:hover::after,.site-header nav a:focus-visible::after,.site-header nav a.active::after { right:0; }
.header-motto { margin:0; color:#a9a399; font:500 .67rem/1.25 var(--sans); letter-spacing:.13em; text-transform:uppercase; }
.menu-button { display:none; border:0; background:none; color:var(--paper); padding:.5rem; }
.menu-button span { display:block; width:1.5rem; height:1px; margin:.3rem; background:currentColor; }

.hero { min-height:31rem; position:relative; display:grid; align-items:center; overflow:hidden; border-bottom:1px solid rgba(201,166,92,.22); background:linear-gradient(90deg,rgba(5,8,10,.97) 0%,rgba(5,8,10,.78) 34%,rgba(5,8,10,.08) 66%,rgba(5,8,10,.35) 100%),url("wilder-family-hero-4x1.png") center/cover no-repeat; }
.hero-copy { width:min(90%,92rem); margin:0 auto; padding:3.5rem 0; }
.kicker { margin:0 0 .4rem; color:#e4dccf; font-size:1.2rem; letter-spacing:.18em; text-transform:uppercase; }
h1 { max-width:9ch; margin:0; color:#e3c984; font-size:clamp(3.9rem,6.7vw,7rem); font-weight:500; letter-spacing:-.035em; line-height:.74; text-transform:uppercase; }
.hero-copy>p:nth-of-type(2) { margin:1.25rem 0 1.6rem; color:#ded6c9; font-size:1.2rem; }
.hero-actions { display:flex; align-items:center; gap:2rem; }
.button { display:inline-flex; gap:2rem; align-items:center; padding:1rem 1.6rem; border:1px solid var(--gold); background:rgba(75,22,18,.62); color:#efe3ce; font:500 .78rem/1 var(--sans); letter-spacing:.13em; text-decoration:none; text-transform:uppercase; }
.button span,.text-link { color:#e0bd6e; }
.text-link { padding-bottom:.35rem; border-bottom:1px solid var(--gold-soft); font:500 .75rem/1 var(--sans); letter-spacing:.13em; text-decoration:none; text-transform:uppercase; }
.hero-script { position:absolute; right:19%; top:2rem; margin:0; color:rgba(237,226,207,.72); font-size:1.65rem; font-style:italic; line-height:1.05; transform:rotate(-5deg); text-align:center; }
.hero-note { position:absolute; right:3.8vw; bottom:2.25rem; max-width:17rem; padding:1rem 0 1rem 1.35rem; border-left:2px solid var(--gold); color:#f0d7aa; font-size:1.38rem; font-style:italic; font-weight:500; line-height:1.35; text-shadow:0 2px 10px rgba(0,0,0,.9); }

.content-section { width:min(92%,92rem); margin:0 auto; padding:1.05rem 0 0; }
.section-title { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.25rem; margin-bottom:.85rem; }
.section-title h2 { margin:0; font-size:clamp(2rem,3.1vw,3rem); font-weight:500; letter-spacing:.03em; line-height:1; text-transform:uppercase; }
.section-title span { height:1px; background:linear-gradient(90deg,var(--gold),rgba(201,166,92,.2)); }
.section-title p { margin:0; color:#a8a29a; font-size:.77rem; letter-spacing:.12em; text-transform:uppercase; }

.chapter-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.cast-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.image-card,.cast-card,.place-card,.memory { position:relative; overflow:hidden; border:1px solid rgba(201,166,92,.3); background-color:#111820; background-size:cover; background-position:center; }
.image-card::after,.cast-card::after,.place-card::after,.memory::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,6,8,.98),rgba(3,6,8,.05) 72%); }
.card-copy { position:absolute; z-index:2; inset:auto .9rem .85rem; }
.card-copy small { color:var(--gold); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.card-copy h3 { margin:.05rem 0 .25rem; color:#f2e7d5; font-size:1.55rem; font-weight:500; line-height:.92; text-transform:uppercase; }
.card-copy p { margin:0; color:#d0c8bc; font-size:.91rem; line-height:1.25; }
.chapter-card { aspect-ratio:1.35; }
.chapter-card.beginning { background-image:url("wilder-family-hero.png"); background-position:79% center; }
.chapter-card.bay { background-image:url("wilder-bay-hero.png"); }
.chapter-card.growing { background-image:url("next-generation.png"); }
.chapter-card.change { background-image:url("wilder-family-hero.png"); background-position:64% center; }

.cast-card { min-height:17rem; }
.cast-card[data-full-image] { cursor:zoom-in; }
.cast-card[data-full-image]:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.cast-card.rave { background-image:url("rave-wilder-cast.png"); background-position:center 30%; }
.cast-card.djembe { background-image:url("djembe-wilder-cast.png"); background-position:center 34%; }
.cast-card.cole { background-image:url("cole-wilder-cast.png"); background-position:center 28%; }
.cast-card.devin { background-image:url("devin-wilder-cast.png"); background-position:center 34%; }
.cast-card.dagan { background-image:url("dagan-wilder-cast.png"); background-position:center 34%; }
.cast-card.storm { background-image:url("next-generation.png"); background-position:center; }
.cast-card .card-copy h3 { text-transform:none; }

.cast-lightbox { width:min(94vw,100rem); max-width:none; padding:0; border:1px solid rgba(201,166,92,.65); background:#05080b; color:var(--paper); box-shadow:0 1.5rem 5rem rgba(0,0,0,.8); overflow:hidden; }
.cast-lightbox::backdrop { background:rgba(2,4,6,.9); backdrop-filter:blur(8px); }
.lightbox-frame { position:relative; display:grid; place-items:center; width:100%; overflow:hidden; padding:1rem; }
.lightbox-frame img { display:block; max-width:calc(94vw - 2rem); max-height:82vh; object-fit:contain; }
.lightbox-frame p { margin:.8rem 0 .1rem; color:#e8d6b3; font-size:1.25rem; }
.lightbox-close { position:absolute; z-index:2; top:.6rem; right:.6rem; width:2.7rem; height:2.7rem; display:grid; place-items:center; border:1px solid rgba(201,166,92,.7); border-radius:50%; background:rgba(5,8,11,.88); color:#f4e8d4; font:300 1.8rem/1 var(--sans); cursor:pointer; }
.lightbox-close:hover,.lightbox-close:focus-visible { background:var(--gold); color:#070b0f; outline:none; }
body.lightbox-open { overflow:hidden; }

.places-grid { display:grid; grid-template-columns:1.05fr 1.05fr 1fr; gap:.8rem; }
.place-card { min-height:13.5rem; }
.bay-place { background-image:url("wilder-bay-retreat.png"); background-position:center; }
.mountain-place { background-image:url("wilder-mountain.png"); background-position:center; }
.inferno-place { background-image:url("inferno-nightclub-stylized.png"); background-position:center; }
.place-card .card-copy h3 { font-size:1.8rem; }

.chronicles { padding-bottom:.5rem; }
.chronicle-line { position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:.85rem; margin:2rem 0 0; padding:0; list-style:none; text-align:center; }
.chronicle-line::before { content:""; position:absolute; left:4%; right:4%; top:1.65rem; height:1px; background:var(--gold); }
.chronicle-line li { position:relative; z-index:1; }
.chronicle-line b { width:3.3rem; height:3.3rem; display:grid; place-items:center; margin:0 auto .7rem; border:1px solid var(--gold); border-radius:50%; background:#0b1116; color:#dfbd6c; font-size:1.4rem; }
.chronicle-line h3 { margin:0 0 .25rem; font-size:1.15rem; font-weight:500; }
.chronicle-line time { display:block; margin:0 0 .35rem; color:#d7b76c; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.chronicle-line p { max-width:12rem; margin:auto; color:#c8c0b3; font-size:.88rem; line-height:1.3; }

.lore-section { padding-bottom:1.5rem; }
.lore-layout { display:grid; grid-template-columns:1fr 1.28fr; gap:.8rem; }
.lore-feature { min-height:19rem; display:grid; grid-template-columns:.68fr 1fr; border:1px solid rgba(201,166,92,.3); background:#0c1217; }
.lore-image {
  background-color:#050608;
  background-image:linear-gradient(90deg,transparent 70%,#0c1217),url("family-crest.png");
  background-position:center,center;
  background-repeat:no-repeat;
  background-size:auto,cover;
}
.lore-copy { align-self:center; padding:1.3rem 1.5rem; }
.lore-copy blockquote { margin:0 0 1rem; padding:0; border:0; color:#dfbd6c; font-size:1.25rem; font-style:italic; line-height:1.25; text-align:left; }
.lore-copy p { margin:.65rem 0; color:#c8c0b5; font-size:.9rem; }
.lore-copy a { display:inline-block; margin-top:.35rem; padding-bottom:.25rem; border-bottom:1px solid var(--gold-soft); color:var(--gold); font:500 .7rem/1 var(--sans); letter-spacing:.13em; text-decoration:none; text-transform:uppercase; }
.memory-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr); gap:.45rem; }
.memory { min-height:9.2rem; }
.memory span { position:absolute; z-index:2; left:.65rem; bottom:.5rem; color:rgba(242,231,213,.86); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.memory.m1 { background-image:url("wilder-family-hero.png"); background-position:75% center; }
.memory.m2 { background-image:url("wilder-bay-hero.png"); }
.memory.m3 { background-image:url("inferno-interior.png"); }
.memory.m4 { background-image:url("next-generation.png"); }
.memory.m5 { background-image:url("wilder-family-hero.png"); background-position:92% center; }
.memory.quote { background:linear-gradient(145deg,#4d321f,#101418); }
.memory.quote span { inset:1rem; font-family:var(--serif); font-size:1rem; font-style:italic; line-height:1.15; text-transform:none; }
.memory.neon { grid-column:span 2; background:radial-gradient(circle,rgba(170,31,92,.42),transparent 58%),#100b12; }
.memory.neon span { inset:50% auto auto 50%; color:#ff55b0; font-family:var(--serif); font-size:1.45rem; font-style:italic; line-height:.85; text-shadow:0 0 15px #ff248c; transform:translate(-50%,-50%) rotate(-5deg); text-align:center; text-transform:none; }

footer { position:relative; min-height:13rem; border-top:1px solid rgba(201,166,92,.36); background:linear-gradient(90deg,rgba(5,9,12,.97),rgba(5,9,12,.7),rgba(5,9,12,.9)),url("wilder-bay-hero.png") center 55%/cover; }
.footer-inner { width:min(92%,92rem); margin:auto; display:grid; grid-template-columns:1fr 1.6fr .8fr; gap:1.5rem; align-items:center; padding:2.4rem 0; }
.footer-inner p { margin:.35rem 0; color:#c6beb1; font-size:.9rem; }
.footer-inner nav { display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem; }
.footer-inner nav a { color:#d9d2c7; font:500 .65rem/1 var(--sans); text-decoration:none; text-transform:uppercase; }
.footer-inner small { color:#827d75; font-family:var(--sans); font-size:.62rem; }
.footer-inner small:first-of-type { grid-column:1; text-align:left; }
.footer-inner small:last-child { grid-column:2/4; text-align:right; }

@media (hover:hover) {
  .image-card,.cast-card,.place-card,.memory { transition:border-color .25s,transform .25s; }
  .image-card:hover,.cast-card:hover,.place-card:hover,.memory:hover { z-index:3; border-color:var(--gold); transform:translateY(-3px); }
}
@media (max-width:1000px) {
  .site-header { grid-template-columns:auto auto; justify-content:space-between; }
  .header-motto { display:none; }
  .menu-button { display:block; }
  .site-header nav { position:absolute; inset:4.8rem 0 auto; display:none; height:auto; flex-direction:column; gap:0; padding:.8rem 5vw 1rem; background:rgba(5,9,12,.98); border-bottom:1px solid var(--gold-soft); }
  .site-header nav.open { display:flex; }
  .site-header nav a { display:block; padding:.7rem 0; }
  .site-header nav a::after { display:none; }
  .chapter-grid,.cast-grid { grid-template-columns:repeat(2,1fr); }
  .hero-note,.hero-script { display:none; }
  .lore-layout { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .hero { min-height:35rem; background-position:70% center; }
  .hero::after { content:""; position:absolute; inset:0; background:rgba(4,7,9,.25); pointer-events:none; }
  .hero-copy { position:relative; z-index:2; align-self:end; padding-bottom:2.5rem; }
  .kicker { font-size:.9rem; }
  .hero-copy>p:nth-of-type(2) { max-width:18rem; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:1rem; }
  .section-title { grid-template-columns:1fr; gap:.35rem; }
  .section-title span { display:none; }
  .section-title p { font-size:.66rem; }
  .chapter-grid,.cast-grid,.places-grid { grid-template-columns:1fr; }
  .chapter-card { aspect-ratio:1.4; }
  .cast-card { min-height:19rem; }
  .chronicle-line { grid-template-columns:1fr; text-align:left; }
  .chronicle-line::before { left:1.65rem; right:auto; top:0; bottom:0; width:1px; height:auto; }
  .chronicle-line li { display:grid; grid-template-columns:3.3rem 1fr; column-gap:1rem; }
  .chronicle-line b { grid-row:span 3; margin:0; }
  .chronicle-line h3,.chronicle-line time,.chronicle-line p { max-width:none; margin:0; }
  .lore-feature { grid-template-columns:1fr; }
  .lore-image {
    min-height:20rem;
    background-image:linear-gradient(0deg,#0c1217,transparent 74%),url("family-crest.png");
    background-size:auto,contain;
  }
  .memory-grid { grid-template-columns:repeat(2,1fr); }
  .memory.neon { grid-column:span 2; }
  .footer-inner { grid-template-columns:1fr; }
  .footer-inner nav { justify-content:flex-start; }
  .footer-inner small:last-child { grid-column:auto; text-align:left; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}