/* ============================================================
   SKOTIA · SHARED STYLESHEET
   Saint Laurent meets Hexenzirkel
   ============================================================ */

:root{
  --bg:#0a0608;
  --bg-2:#13090c;
  --bg-3:#1a0c11;
  --ink:#f0e7d8;
  --ink-soft:#d8cfc0;
  --gold:#c9a96a;
  --gold-2:#d4b67a;
  --gold-dim:rgba(201,169,106,.6);
  --bordeaux:#5a1e2a;
  --bordeaux-deep:#3d1219;
  --muted:#8a7c6a;
  --line:rgba(201,169,106,.18);
  --line-strong:rgba(201,169,106,.35);

  --serif:'Cormorant Garamond', 'Bodoni Moda', Didot, serif;
  --display:'Cinzel', serif;
  --sans:'Inter', system-ui, sans-serif;

  --ease-noir:cubic-bezier(.2,.6,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--bg)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:300;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:transparent; color:inherit}

/* ============================================================
   NAV (top)
============================================================ */
nav.site{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:24px 48px;
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg, rgba(10,6,8,.85) 0%, rgba(10,6,8,.4) 70%, transparent 100%);
  backdrop-filter:blur(8px);
  transition:.3s;
}
nav.site.scrolled{background:rgba(10,6,8,.94); border-bottom:1px solid var(--line)}

.brand{
  font-family:var(--display); font-size:20px;
  letter-spacing:.45em; font-weight:500; color:var(--ink);
}

.nav-links{
  display:flex; gap:36px;
  font-family:var(--sans); font-size:11px;
  letter-spacing:.32em; text-transform:uppercase;
}
.nav-links a{color:var(--ink); opacity:.82; transition:.3s; position:relative}
.nav-links a:hover, .nav-links a.active{color:var(--gold); opacity:1}
.nav-links a.active::after{
  content:''; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; background:var(--gold); border-radius:50%;
}

@media (max-width:760px){
  nav.site{padding:18px 24px}
  .nav-links{gap:18px; font-size:10px; letter-spacing:.22em}
}

/* ============================================================
   PAGE HEADER (sub-pages)
============================================================ */
header.page{
  padding:180px 32px 80px;
  text-align:center;
  max-width:1080px; margin:0 auto;
  position:relative;
}
.page-num{
  font-family:var(--display); font-size:13px; letter-spacing:.5em;
  color:var(--gold); text-transform:uppercase; opacity:.85;
  margin-bottom:32px;
}
.page-num span{color:var(--gold); margin:0 12px}
header.page h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(48px, 7vw, 96px); line-height:1.05; letter-spacing:.06em;
  margin-bottom:32px;
}
header.page h1 em{
  font-family:var(--serif); font-style:italic;
  color:var(--gold-2); font-weight:300;
}
header.page p.lead{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(20px, 2.2vw, 26px);
  color:var(--ink); opacity:.9;
  max-width:680px; margin:0 auto;
  line-height:1.55;
}

/* ============================================================
   SECTIONS
============================================================ */
section.scene{padding:120px 0}
.scene-inner{max-width:1080px; margin:0 auto; padding:0 32px}
.scene-inner.narrow{max-width:780px}
.scene-inner.wide{max-width:1480px}

.eyebrow{
  font-family:var(--sans); font-size:11px; letter-spacing:.55em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:32px; opacity:.85;
}
.section-num{
  font-family:var(--display); font-size:12px; letter-spacing:.5em;
  color:var(--gold); text-transform:uppercase;
  margin-bottom:24px;
}
.section-num span{margin:0 12px; color:var(--gold)}

h2.section{
  font-family:var(--display); font-weight:400;
  font-size:clamp(40px, 5.5vw, 72px); line-height:1.1;
  letter-spacing:.06em; margin-bottom:56px;
}
h2.section em{
  font-family:var(--serif); font-style:italic;
  color:var(--gold-2); font-weight:300;
}

h3.sub{
  font-family:var(--display); font-weight:400;
  font-size:24px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:24px;
}

p{
  font-family:var(--serif); font-size:20px; line-height:1.7;
  margin-bottom:24px; color:var(--ink); opacity:.92;
}
p em{font-style:italic; color:var(--gold-2)}
p strong{font-weight:500; color:var(--ink); opacity:1}

/* ============================================================
   BUTTONS
============================================================ */
.btn{
  display:inline-block; padding:22px 64px;
  border:1px solid var(--gold); color:var(--gold);
  background:transparent;
  font-family:var(--sans); font-size:11px; letter-spacing:.5em;
  text-transform:uppercase; transition:.4s; cursor:pointer;
}
.btn:hover{background:var(--gold); color:#000}
.btn.solid{background:var(--bordeaux); color:var(--ink); border-color:var(--bordeaux)}
.btn.solid:hover{background:transparent; color:var(--gold); border-color:var(--gold)}

/* ============================================================
   FOOTER (gemeinsam)
============================================================ */
footer.site{
  background:#000;
  padding:96px 32px 48px;
  border-top:1px solid var(--line);
  text-align:center;
  margin-top:80px;
}
.footer-brand{
  font-family:var(--display); font-size:28px; letter-spacing:.5em;
  color:var(--gold); margin-bottom:24px;
}
.footer-tag{
  font-family:var(--serif); font-style:italic;
  color:var(--ink-soft); opacity:.6;
  margin-bottom:56px; font-size:18px;
}
.footer-links{
  display:flex; justify-content:center; gap:42px;
  font-family:var(--sans); font-size:10px; letter-spacing:.42em;
  text-transform:uppercase; margin-bottom:48px;
  flex-wrap:wrap;
}
.footer-links a{color:var(--muted); transition:.3s}
.footer-links a:hover{color:var(--gold)}
.footer-legal{
  font-family:var(--sans); font-size:10px;
  color:var(--muted); letter-spacing:.18em;
  line-height:1.8;
}

/* ============================================================
   VOICE BUTTON (wiederverwendbar)
============================================================ */
.voice-trigger{
  display:inline-flex; align-items:center; gap:18px;
  padding:16px 28px; border:1px solid var(--gold);
  background:rgba(10,6,8,.5); backdrop-filter:blur(6px);
  font-family:var(--sans); font-size:10px; letter-spacing:.4em;
  text-transform:uppercase; color:var(--gold);
  transition:.3s;
}
.voice-trigger:hover{background:var(--gold); color:#000}
.voice-trigger.playing{
  background:var(--bordeaux); color:var(--ink); border-color:var(--bordeaux);
}
.voice-circle{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:1px solid currentColor;
  border-radius:50%; font-size:11px;
}
.voice-meta{display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.voice-time{opacity:.7; font-size:9px; letter-spacing:.3em}

/* ============================================================
   UTILITIES
============================================================ */
.grain{position:relative}
.grain::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='1' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.32'/></svg>");
  mix-blend-mode:overlay; opacity:.15; z-index:1;
}

.gold-line{
  width:80px; height:1px; background:var(--gold);
  margin:32px auto;
}