/* ============================================================
   BLACK DUNES PRESS - shared house design system (site.css)
   Dark-warm editorial canvas. One accent (ember), one theme.
   Type: Newsreader (display) / Hanken Grotesk (UI) / IBM Plex Mono (labels)
   Load Google Fonts + this file, then add page-specific CSS inline.
   ============================================================ */
:root{
  --ink:#14110D; --ink-2:#1A1611; --ink-3:#211C16;
  --bone:#F1EADC; --sand:#C6B9A2; --stone:#8C806C;
  --line:rgba(241,234,220,.11); --line-2:rgba(241,234,220,.06);
  --ember:#C6853F; --ember-hi:#DDA05B; --gold:#D9A961;
  --nav-bg:rgba(20,17,13,.72); --nav-bg-solid:rgba(20,17,13,.96);
  --r:3px; --edge:clamp(20px,5.5vw,88px); --maxw:1360px;
  --ease:cubic-bezier(.16,1,.3,1);
}
/* Light theme (opt-in via data-theme="light"); cinematic image bands stay dark by design */
[data-theme="light"]{
  --ink:#F4EFE6; --ink-2:#ECE5D7; --ink-3:#E2D9C7;
  --bone:#221C13; --sand:#5C5346; --stone:#877B68;
  --line:rgba(20,17,13,.14); --line-2:rgba(20,17,13,.07);
  --ember:#A85E28; --ember-hi:#8F4E1F; --gold:#9C7327;
  --nav-bg:rgba(244,239,230,.82); --nav-bg-solid:rgba(244,239,230,.97);
}
[data-theme="light"] .grain{mix-blend-mode:multiply;opacity:.03}
[data-theme="light"] body{color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--bone);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:clamp(15px,1.02vw,17px);line-height:1.6;letter-spacing:.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ember);color:var(--ink)}

.display{font-family:"Newsreader",Georgia,serif;font-weight:400;line-height:1.06;letter-spacing:-.015em;font-optical-sizing:auto}
h1,h2,h3{font-weight:400}
.kicker{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ember)}
.meta{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.06em;color:var(--stone)}
.lead{color:var(--sand);max-width:56ch}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.crumb a{color:var(--ember)}

.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--edge)}
section{position:relative}
.sec{padding-block:clamp(80px,12vh,150px)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:24px;height:70px;padding-inline:var(--edge);transition:background .5s var(--ease),border-color .5s var(--ease);border-bottom:1px solid transparent}
.nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}
.brand img{height:26px;width:auto;opacity:.94}
.brand .txt{font-family:"Newsreader",serif;font-size:19px;letter-spacing:.02em}
.brand .txt b{font-weight:500}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:14px;color:var(--sand);letter-spacing:.02em;transition:color .3s var(--ease);position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--ember);transition:width .35s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--bone)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{font-size:13.5px;font-weight:500;letter-spacing:.02em;padding:9px 18px;border:1px solid var(--line);border-radius:var(--r);color:var(--bone);transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.nav-cta:hover{background:var(--ember);border-color:var(--ember);color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;color:var(--bone);font-size:22px;cursor:pointer}
.nav-right{display:flex;align-items:center;gap:12px}
.theme-toggle{display:grid;place-items:center;width:38px;height:38px;background:none;border:1px solid var(--line);border-radius:var(--r);color:var(--sand);cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease),transform .18s var(--ease)}
.theme-toggle:hover{color:var(--ember);border-color:var(--ember)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle svg{width:17px;height:17px}

/* buttons + links */
.btn{display:inline-flex;align-items:center;gap:.6ch;font-weight:600;font-size:15px;letter-spacing:.01em;white-space:nowrap;padding:14px 26px;border-radius:var(--r);cursor:pointer;transition:transform .18s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ember);color:var(--ink);border:1px solid var(--ember)}
.btn-primary:hover{background:var(--ember-hi);border-color:var(--ember-hi)}
.btn-ghost{background:transparent;color:var(--bone);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--sand)}
.arrow{transition:transform .3s var(--ease)}
.link-arrow{display:inline-flex;align-items:center;gap:.5ch;color:var(--bone);font-weight:500;font-size:15px}
.link-arrow .arrow{color:var(--ember)}
.link-arrow:hover .arrow{transform:translateX(5px)}

/* interior page header */
.phead{padding-top:clamp(122px,17vh,184px);padding-bottom:clamp(30px,5vh,54px)}
.phead .crumb{margin-bottom:26px}
.phead h1{font-family:"Newsreader",serif;font-weight:400;line-height:1.02;letter-spacing:-.02em;font-size:clamp(42px,7.2vw,104px)}
.phead .lead{font-size:clamp(17px,1.5vw,21px);margin-top:1.1em;max-width:52ch}

/* generic section header (headline left, meta right) */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(30px,4.5vh,52px)}
.shead h2{font-family:"Newsreader",serif;font-weight:400;font-size:clamp(28px,4.2vw,54px);letter-spacing:-.015em;line-height:1.06;max-width:16ch}
.shead .meta{max-width:24ch;text-align:right}

/* forms */
.form{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;max-width:460px}
.form label{position:absolute;left:-9999px}
.form input,.form textarea,.form select{width:100%;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);color:var(--bone);font-family:inherit;font-size:15px;padding:14px 16px;transition:border-color .3s var(--ease)}
.form input::placeholder,.form textarea::placeholder{color:var(--stone)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--ember)}
.form small{display:block;color:var(--stone);font-size:12.5px;margin-top:12px;width:100%}
.form .row{display:flex;gap:10px;flex-wrap:wrap}
.form .row input{flex:1;min-width:200px}

/* footer */
.foot{border-top:1px solid var(--line);padding-block:clamp(56px,8vh,90px) 40px;margin-top:clamp(40px,8vh,90px)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.foot-brand .brand{margin-bottom:16px}.foot-brand .brand img{height:30px}
.foot-brand p{color:var(--stone);font-size:14px;max-width:32ch}
.foot-col h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);margin-bottom:16px}
.foot-col a{display:block;color:var(--stone);font-size:14.5px;padding:6px 0;transition:color .3s var(--ease)}
.foot-col a:hover{color:var(--bone)}
.foot-bot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(44px,7vh,80px);padding-top:26px;border-top:1px solid var(--line)}
.foot-bot .meta{color:var(--stone)}
.social{display:flex;gap:8px}
.social a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r);color:var(--sand);transition:color .3s var(--ease),border-color .3s var(--ease)}
.social a:hover{color:var(--ember);border-color:var(--ember)}
.social svg{width:17px;height:17px;fill:currentColor}
.lang{display:flex;gap:4px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em}
.lang a{color:var(--stone)}.lang a.on{color:var(--bone)}.lang span{color:var(--line)}

/* reveal (progressive enhancement) */
html.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms);will-change:opacity,transform}
html.js [data-reveal].in{opacity:1;transform:none}

/* shared responsive */
@media(max-width:1000px){
  .foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}
}
@media(max-width:820px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-links{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;background:var(--nav-bg-solid);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:8px var(--edge) 20px}
  .nav.open .nav-links a{padding:14px 0;border-bottom:1px solid var(--line-2);width:100%}
  .shead{flex-direction:column;align-items:flex-start}.shead .meta{text-align:left}
}
@media(max-width:520px){
  .foot-top{grid-template-columns:1fr}
}
/* --- designer pass: craft polish --- */
h1,h2,h3,.display{text-wrap:balance}
.meta,.price{font-variant-numeric:tabular-nums}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}
.btn-primary{will-change:transform}

/* --- cinematic motion (wave 4): scroll-driven parallax on image bands (Chrome; degrades gracefully) --- */
@keyframes scrollPar{from{transform:scale(1.16) translateY(-3.5%)}to{transform:scale(1.16) translateY(4.5%)}}
@media(prefers-reduced-motion:no-preference){
  @supports(animation-timeline:view()){
    .hero-media,.a-hero-img .m,.band .bg,.sf-hero .bg{
      animation:scrollPar linear both !important;
      animation-timeline:view() !important;
      animation-range:cover -15% cover 115% !important;
    }
  }
}
/* cover 3D tilt (JS drives the transform; these just prime the compositor) */
.book .cover,.spot-cover,.bd-cover,.sf-cover{will-change:transform}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  html.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .btn-primary{transform:none!important}
}