:root{
  --bg:      #0B0805;
  --bg-2:    #100B07;
  --bg-3:    #17100A;
  --ash:     #E7DFD1;
  --ash-dim: rgba(231,223,209,.55);
  --ash-faint:rgba(231,223,209,.28);
  --ember:   #C77B3A;
  --ember-dim:#8A5427;
  --line:    rgba(231,223,209,.10);
  --serif:  "Cormorant", Georgia, serif;
  --serif-sc:"Cormorant SC", Georgia, serif;
  --sans:   "Manrope", -apple-system, sans-serif;
  --mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease:   cubic-bezier(.16,1,.3,1);
  --gut:    clamp(1.25rem,5vw,5rem);
  --content-w: 1400px;
  --glass-bg: rgba(23,16,10,.42);
  --glass-border: rgba(231,223,209,.14);
  --radius: 8px;
  --photo-glow: 0 24px 60px -16px rgba(0,0,0,.55), 0 0 40px -18px rgba(199,123,58,.35);
  --photo-glow-near: 0 32px 74px -18px rgba(0,0,0,.7), 0 0 46px -18px rgba(199,123,58,.4);
  --photo-filter: saturate(.78) brightness(.75) contrast(1.05);
  --photo-filter-hover: saturate(.88) brightness(.85) contrast(1.05);
  --photo-filter-bright: saturate(.8) brightness(.86) contrast(1.04);
  --photo-filter-bright-hover: saturate(.9) brightness(.94) contrast(1.04);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; overflow-x:hidden}
body{
  background:var(--bg); color:var(--ash);
  font-family:var(--sans); font-weight:300; letter-spacing:.01em;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--ember); color:var(--bg)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif); font-weight:400; letter-spacing:0}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding-block:1.6rem; padding-inline:max(var(--gut), calc((100% - var(--content-w)) / 2));
  background:rgba(11,8,5,.32); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(231,223,209,.08);
  transition:padding .5s var(--ease), background .5s var(--ease);
}
.nav.scrolled{padding-top:1rem;padding-bottom:1rem; background:rgba(11,8,5,.55)}
.nav__mark{display:flex; align-items:center}
.nav__logo{height:34px; width:auto; display:block}
.nav__links{display:flex; gap:2.4rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase}
.nav__links a{position:relative; padding-bottom:2px}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ash);transition:width .4s var(--ease)}
.nav__links a:hover::after{width:100%}
.nav__book{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; padding:.6rem 1.3rem;
  border:1px solid var(--glass-border); border-radius:var(--radius); background:var(--glass-bg);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.nav__book:hover{background:rgba(231,223,209,.14); border-color:var(--ash)}
@media(max-width:820px){.nav__links{display:none}}

/* ---------- section shell ---------- */
section{position:relative; padding:clamp(6rem,14vw,11rem) var(--gut)}
:focus-visible{outline:2px solid var(--ember); outline-offset:3px}
.kicker{
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ember);
  margin-bottom:1.4rem; display:inline-flex; align-items:center;
}
.kicker::before{
  content:""; display:inline-block; width:22px; height:9px; margin-right:.6em; vertical-align:-1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 30'%3E%3Cpath d='M2 18 Q14 4 26 15 T50 12 T74 19 T88 9' fill='none' stroke='%23C77B3A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.65;
}

/* ---------- buttons ---------- */
.btn{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; padding:1rem 2.1rem;
  border:1px solid var(--ash); border-radius:var(--radius); display:inline-block;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease),
             transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0); transition-duration:.1s}
.btn--solid{background:var(--ember); border-color:var(--ember); color:var(--bg)}
.btn--solid:hover{background:transparent; color:var(--ash); box-shadow:0 12px 28px -12px rgba(199,123,58,.4)}
.btn--ghost{
  border-color:var(--glass-border); background:var(--glass-bg);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{background:rgba(231,223,209,.14); border-color:var(--ash); color:var(--ash); box-shadow:0 12px 28px -14px rgba(0,0,0,.55)}

/* ---------- footer ---------- */
footer{padding-block:3rem 2.5rem; padding-inline:max(var(--gut), calc((100% - var(--content-w)) / 2)); border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem}
footer .mark{font-family:var(--serif-sc); font-size:1.3rem; letter-spacing:.14em}
.footer__brand{display:flex; flex-direction:column; gap:.45rem}
.footer__tag{font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash-faint)}
footer .cols{display:flex; gap:2.4rem; flex-wrap:wrap; font-size:.78rem; color:var(--ash-faint)}
footer .cols a:hover{color:var(--ash)}
footer .copy{font-size:.68rem; color:var(--ash-faint); letter-spacing:.05em}
/* desktop: whole footer is one row — brand, tag, links, copyright */
@media(min-width:641px){
  .footer__brand{flex-direction:row; align-items:baseline; gap:1rem}
  footer .cols{gap:1.6rem}
}
@media(max-width:640px){
  footer{flex-direction:column; align-items:flex-start; gap:.9rem; padding-bottom:calc(2.5rem + 76px)}
  footer .cols{flex-direction:column; gap:.9rem}
  footer .copy{width:auto; text-align:left; margin-top:0}
  footer .copy__sep{display:none}
  footer .copy__dev{display:block; margin-top:.9rem}
}