/* wander.css — shared styles for all Wander• pages */

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── VARIABLES ── */
:root{
  --black:   #100b06;
  --ink:     #181008;
  --ink-lt:  #201608;
  --coal:    #2a1c0c;
  --bark:    #382410;
  --terra:   #8a3c1c;
  --terra-lt:#a84e28;
  --ember:   #b86820;
  --gold:    #c47e2a;
  --warm:    #d49838;
  --glow:    #e4b850;
  --cream:   #f2e4b8;
}

/* ── BASE ── */
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--cream);font-family:'Cormorant Garamond',Georgia,serif;overflow-x:hidden;cursor:none}

/* ── TEXTURE OVERLAYS ── */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:998;
  background-image:radial-gradient(circle,rgba(180,100,30,.05) 1px,transparent 1px);
  background-size:4px 4px;mix-blend-mode:screen;
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* ── CURSOR ── */
#cur{position:fixed;width:5px;height:5px;background:var(--warm);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:screen;transition:width .15s,height .15s}
#cur-ring{position:fixed;width:22px;height:22px;border:1px solid rgba(180,104,32,.3);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .25s,height .25s}

/* ── NAV ── */
nav,nav.wsn{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;justify-content:space-between;align-items:center;padding:1.6rem 3rem;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
nav.solid,nav.wsn.solid{background:transparent;border-color:rgba(138,60,28,.2)}
.nav-logo{text-decoration:none}
.nav-wm{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:400;color:var(--cream);letter-spacing:.02em}
.nav-wm em{font-style:italic}
.nav-wm b{color:var(--terra);font-weight:400}
.nav-links{display:flex;gap:2.5rem;list-style:none;align-items:center}
.nav-links a{font-family:'DM Mono',monospace;font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,228,184,.72);text-decoration:none;transition:color .3s;text-shadow:0 0 8px rgba(16,11,6,.75)}
.nav-links a:hover{color:var(--warm)}
.nav-links a[aria-current="page"]{color:var(--warm)}
.nav-links .nav-ai a{color:rgba(196,126,42,.82);letter-spacing:.13em;font-weight:500}
.nav-links .nav-ai a:hover{color:var(--gold)}
.nav-links .nav-ai a[aria-current="page"]{color:var(--gold)}

/* ── SECTIONS ── */
section{position:relative}
.wrap{max-width:1100px;margin:0 auto;padding:6.5rem 3rem}
.s-label{font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--terra);display:flex;align-items:center;gap:.65rem;margin-bottom:.8rem}
.s-label::before,.s-label::after{content:'';flex:0 0 18px;height:1px;background:var(--terra);opacity:.26}
.s-label.center{justify-content:center}
.pvl{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:1px;background:linear-gradient(to bottom,rgba(138,60,28,0) 0%,rgba(138,60,28,.12) 8%,rgba(138,60,28,.12) 92%,rgba(138,60,28,0) 100%);pointer-events:none;z-index:0}
.jdot{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:var(--terra);z-index:2}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ── REVEALS ── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .85s ease,transform .85s ease}
.reveal.in{opacity:1;transform:none}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.36s}

/* ── BUTTONS ── */
.cta-btns{display:flex;gap:1rem;justify-content:center}
.btn-p{font-family:'DM Mono',monospace;font-size:.70rem;letter-spacing:.16em;text-transform:uppercase;color:var(--black);background:var(--ember);border:none;padding:.92rem 2.4rem;cursor:none;text-decoration:none;display:inline-block;transition:background .3s,transform .2s}
.btn-p:hover{background:var(--warm);transform:translateY(-1px)}
.btn-g{font-family:'DM Mono',monospace;font-size:.70rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);background:transparent;border:1px solid rgba(184,104,32,.28);padding:.92rem 2.4rem;cursor:none;text-decoration:none;display:inline-block;transition:border-color .3s,color .3s}
.btn-g:hover{border-color:var(--ember);color:var(--warm)}

/* ── CRED BADGES (homepage + about) ── */
.creds-list{display:flex;gap:.8rem;flex-wrap:wrap}
.cred-badge{font-family:'DM Mono',monospace;font-size:.69rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(242,228,184,.65);border:1px solid rgba(138,60,28,.4);padding:.38rem .8rem}

/* ── PAGE HEADER (interior pages) ── */
#page-header{position:relative;min-height:56vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:var(--black);padding:6rem 2rem 4rem}
.ph-dither{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:3}
.ph-content{position:relative;z-index:10;text-align:center;max-width:900px}
.ph-title{font-family:'Playfair Display',serif;font-size:clamp(3.4rem,8vw,6.4rem);font-weight:400;line-height:.92;letter-spacing:-.025em;color:var(--cream)}
.ph-title em{font-style:italic;color:var(--glow)}
.hero-kicker{font-family:'DM Mono',monospace;font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terra-lt);display:block;margin-bottom:1.8rem;opacity:0;animation:fadeUp .9s ease forwards .2s}
.hero-rule{display:flex;align-items:center;gap:1.2rem;justify-content:center;margin:1.8rem 0;opacity:0;animation:fadeUp .9s ease forwards .8s;width:100%}
.hero-rule-line{flex:0 0 60px;height:1px;background:rgba(138,60,28,.4)}
.hero-rule-dot{width:4px;height:4px;border-radius:50%;background:var(--terra);flex-shrink:0}
.hero-descriptor{font-family:'DM Mono',monospace;font-size:.72rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,228,184,.55)}
.hero-scan{position:absolute;inset:0;pointer-events:none;z-index:4;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(16,11,6,.18) 3px,rgba(16,11,6,.18) 4px);opacity:.35}
.hero-vignette{position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse 70% 70% at 50% 50%,transparent 30%,rgba(16,11,6,.5) 65%,rgba(16,11,6,.95) 100%)}

/* ── SUB-SECTIONS (interior pages) ── */
.sub-section{position:relative}
.sub-section+.sub-section{border-top:1px solid rgba(138,60,28,.1)}
.sub-section .wrap{padding:5.5rem 3rem}
.sub-section h2{font-family:'Playfair Display',serif;font-size:clamp(1.75rem,3.2vw,2.6rem);font-weight:400;line-height:1.1;color:var(--cream);margin-bottom:.85rem}
.sub-section h2 em{font-style:italic;color:var(--glow)}
.sub-section .lead{font-size:1.17rem;font-weight:300;line-height:1.82;color:rgba(242,228,184,.65);max-width:620px}
.sub-section .lead+.lead{margin-top:.85rem}
.bg-ink{background:var(--ink)}
.bg-ink-lt{background:var(--ink-lt)}
.bg-dark{background:var(--black)}

/* ── NAV TOGGLE (hamburger) ── */
#nav-toggle{display:none;background:none;border:none;padding:.45rem .5rem;flex-direction:column;gap:5px;position:relative;z-index:2;flex-shrink:0}
#nav-toggle span{display:block;width:22px;height:2px;background:rgba(242,228,184,.8);transition:transform .3s,opacity .3s;transform-origin:center}
nav.nav-open #nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
nav.nav-open #nav-toggle span:nth-child(2){opacity:0;transform:scaleX(0)}
nav.nav-open #nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── HERO REELS CTA ── */
.hero-reels-cta{font-family:'DM Mono',monospace;font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;color:var(--black);background:var(--ember);text-decoration:none;display:inline-block;margin-top:1.8rem;transition:background .3s;opacity:0;animation:fadeUp .9s ease forwards 1.1s;padding:.8rem 1.8rem;font-weight:400}
.hero-reels-cta:hover{background:var(--warm)}

/* ── FOOTER ── */
footer{background:var(--ink);border-top:1px solid rgba(138,60,28,.15);padding:0;position:relative;overflow:hidden}
#ditherFooter{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}
.footer-inner{position:relative;z-index:2;max-width:100%;padding:2.4rem 3rem;display:flex;justify-content:space-between;align-items:center}
.fl{font-family:'Playfair Display',serif;font-size:1.09rem;color:rgba(220,170,80,.85)}
.fl em{font-style:italic}
.fc{font-family:'DM Mono',monospace;font-size:.69rem;letter-spacing:.1em;color:rgba(220,170,100,.6)}
.flinks{display:flex;gap:1.8rem;list-style:none}
.flinks a{font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(230,180,90,.78);text-decoration:none;transition:color .3s;padding:.2rem 0}
.flinks a:hover{color:var(--glow)}

/* ── TOUCH DEVICES: HIDE CURSOR ── */
@media(pointer:coarse){
  #cur,#cur-ring{display:none}
  body{cursor:auto}
  a,button{cursor:pointer}
}

/* ── MOBILE ── */
@media(max-width:768px){
  /* nav */
  nav,nav.wsn{padding:1.2rem 1.5rem;background:rgba(16,11,6,.72)}
  nav.solid,nav.wsn.solid{background:rgba(16,11,6,.92)}
  #nav-toggle{display:flex}
  .nav-links{display:none;position:fixed;inset:0;background:rgba(16,11,6,.97);flex-direction:column;align-items:center;justify-content:center;gap:0;z-index:1}
  nav.nav-open .nav-links{display:flex}
  .nav-links li{width:100%;max-width:340px;text-align:center;border-bottom:1px solid rgba(138,60,28,.12)}
  .nav-links li:last-child{border-bottom:none}
  .nav-links a{display:block;padding:1.1rem 0;font-size:.78rem;letter-spacing:.22em}
  .nav-links .nav-ai a{font-size:.78rem;letter-spacing:.18em;font-weight:500}

  /* wrap */
  .wrap{padding:4rem 1.5rem}
  .sub-section .wrap{padding:3.5rem 1.5rem}

  /* page header — applies to pages that don't override #page-header */
  #page-header{min-height:44vh;padding:5rem 1.5rem 2.5rem}
  .ph-title{font-size:clamp(2.2rem,9vw,3.8rem)}
  .hero-kicker{margin-bottom:1.2rem}
  .hero-rule{gap:.4rem;flex-wrap:wrap}
  .hero-rule-line{flex:0 0 20px}
  .hero-descriptor{font-size:.63rem;letter-spacing:.18em}

  /* buttons */
  .cta-btns{flex-direction:column;align-items:center}
  .btn-p,.btn-g{width:100%;max-width:280px;text-align:center;box-sizing:border-box}

  /* footer */
  .footer-inner{flex-direction:column;gap:1rem;text-align:center;padding:2rem 1.5rem}
  .flinks{flex-wrap:wrap;justify-content:center;gap:.8rem 1.2rem}

  /* misc */
  .client-strip{gap:1.5rem 2.5rem}
  .s-label{font-size:.62rem}
}