/* ============================================================
   Sennbrink Theme — assets/css/main.css
   v3.3 — ESAH Visual Identity v.01
   Palett: 10 färger (Asfalt · Dimma · Natt Blå · Lyktsken ·
           Papper · Gräddvit · Bokeh · Glödlampa · Hudrosa · Salvia)
   Typografi: Bebas Neue / Fraunces / Inter Tight / JetBrains Mono
   ============================================================ */

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

/* ── ESAH DESIGN TOKENS ──────────────────────────────────── */
:root {
  /* Core */
  --esah-01: #0B0D10;   /* Asfalt        — primär mörk yta */
  --esah-02: #1A1E23;   /* Dimma Djup    — djup panel */
  --esah-03: #3E4652;   /* Natt Blå      — midton */
  --esah-04: #7E8796;   /* Lyktsken      — muted text */
  --esah-05: #EDE7DE;   /* Papper        — primär ljus yta */
  --esah-06: #F6F1E8;   /* Gräddvit      — alt. bakgrund */
  --esah-07: #E9B274;   /* Bokeh         — highlight accent */
  --esah-08: #C76A3C;   /* Glödlampa     — primär accent / CTA */
  --esah-09: #D9A3A0;   /* Hudrosa       — mjuk ton */
  --esah-10: #8FA08C;   /* Salvia        — sekundär */

  /* Semantiska alias */
  --bg:          var(--esah-06);   /* Gräddvit — sidans bakgrund */
  --bg-alt:      var(--esah-05);   /* Papper   — sektionsväxling */
  --bg-dark:     var(--esah-01);   /* Asfalt   — mörka sektioner */
  --bg-mid:      var(--esah-02);   /* Dimma Djup */
  --text-body:   var(--esah-02);   /* Dimma Djup — body på ljus yta */
  --text-muted:  var(--esah-04);   /* Lyktsken */
  --text-on-dark: var(--esah-05);  /* Papper på mörk yta */
  --accent:      var(--esah-08);   /* Glödlampa — CTA */
  --highlight:   var(--esah-07);   /* Bokeh — highlight */
  --border:      var(--esah-03);   /* Natt Blå — borders */
  --border-light: rgba(62,70,82,0.2); /* Lättare border på ljus yta */

  /* Typografi */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-serif:   'Fraunces', Georgia, serif;
  --font-body:    'Inter Tight', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Skala */
  --body-size:    18px;
  --nav-h:        64px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body-size);
  line-height: 1.7;
  background: var(--bg);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  transition: opacity 0.2s;
}
a:hover { opacity: 0.75; }

/* ── NAV ─────────────────────────────────────────────────── */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3rem;
  height: var(--nav-h);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--esah-01);
  text-transform: uppercase;
  text-decoration: none;
}

.nav-links,
.nav .menu {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a,
.nav .menu a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav .menu a:hover,
.nav-links .current-menu-item > a {
  color: var(--accent);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--esah-01);
  transition: opacity 0.2s, transform 0.2s;
}

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  display: flex;
  border-bottom: 1px solid var(--border-light);
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  max-height: 780px;
  min-height: 480px;
}

/* Bildpanel — aspect-ratio matchar bokomslagets 2:3 */
.hero-panel-light {
  aspect-ratio: 2 / 3;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: var(--esah-01);
}

.hero-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hero-cover-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--esah-01) 0%, var(--esah-02) 60%, var(--esah-01) 100%);
}

/* Textpanel — Papper (ESAH-05) enligt parning "Asfalt + Papper = primär yta" */
.hero-panel-dark {
  flex: 1;
  background: var(--esah-05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 4rem 5rem 3.5rem;
  min-width: 0;
}

/* Eyebrow — JetBrains Mono / Glödlampa */
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.75rem;
}

/* Huvudrubrik — Bebas Neue, display */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(72px, 7vw, 120px);
  font-weight: 400;            /* Bebas Neue är alltid 400 */
  line-height: 0.9;
  color: var(--esah-01);
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hero-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.75em;           /* Fraunces kursiv är generösare */
  color: var(--accent);
  text-transform: none;
}

/* Tagline — Fraunces Light Italic */
.hero-tagline {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.4vw, 20px);
  font-style: italic;
  font-weight: 300;
  color: var(--esah-03);
  margin-bottom: 2rem;
  letter-spacing: 0.3px;
}

.hero-rule {
  width: 40px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 1.75rem;
}

/* Brödtext — Inter Tight 400 */
.hero-desc {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-body);
  max-width: 440px;
  margin-bottom: 2.5rem;
}

/* ── KNAPPAR ─────────────────────────────────────────────── */
/* CTA — Glödlampa (ESAH-08), parning "Gräddvit + Glödlampa = CTA" */
.btn-gold {
  display: inline-block;
  background: var(--accent);
  color: var(--esah-06);
  padding: 0.8rem 2rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.btn-gold:hover {
  background: transparent;
  color: var(--accent);
}

.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--esah-03);
  padding: 0.8rem 2rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Knapp-wrapper — gap i stället för margin så att en ensam knapp ser bra ut */
.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* ── TRE RÖSTER ─────────────────────────────────────────── */
/* Parning: Dimma Djup + Salvia = lugn yta */
.characters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-alt);
}

.character {
  padding: 3rem 2.5rem;
  border-right: 1px solid var(--border-light);
}

.character:last-child { border-right: none; }

/* Kapitelmarkör — JetBrains Mono / Bokeh */
.char-number {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--highlight);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* Karaktärsnamn — Bebas Neue / Asfalt */
.char-name {
  font-family: var(--font-display);
  font-size: clamp(36px, 3vw, 52px);
  font-weight: 400;
  color: var(--esah-01);
  margin-bottom: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
}

.char-rule {
  width: 24px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 1rem;
}

/* Karaktärstext — Inter Tight 400 / Dimma Djup */
.char-text {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-body);
}

/* ── SYNOPSIS ───────────────────────────────────────────── */
.synopsis {
  padding: 5rem 3rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 4rem;
  align-items: start;
}

/* Sektionsetikett — JetBrains Mono */
.syn-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 8px;
}

/* Ingress — Fraunces Italic / Asfalt */
.syn-lead {
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 300;
  font-style: italic;
  color: var(--esah-01);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.syn-lead em {
  font-style: normal;
  color: var(--accent);
}

/* Brödtext — Inter Tight 400 */
.syn-body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.85;
  color: var(--text-body);
}

.syn-body p { margin-bottom: 1rem; }
.syn-body p:last-child { margin-bottom: 0; }

.syn-cta {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  text-decoration: none;
  transition: color 0.2s;
}

.syn-cta:hover { color: var(--highlight); }

/* ── RECENSIONER / CITAT ─────────────────────────────────── */
/* Parning: Natt Blå + Bokeh = citat/pull */
.quotes {
  background: var(--esah-02);
  padding: 5rem 3rem;
  border-bottom: 1px solid rgba(126,135,150,0.3);
}

.quotes-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--highlight);
  margin-bottom: 3rem;
}

.quote-block {
  padding: 3rem 0;
  border-bottom: 1px solid rgba(126,135,150,0.25);
}

.quote-block:first-of-type { padding-top: 1rem; }
.quote-block:last-child { border-bottom: none; padding-bottom: 0; }

/* Citattecken — Fraunces / Bokeh */
.q-mark {
  font-family: var(--font-serif);
  font-size: 80px;
  font-weight: 300;
  color: var(--highlight);
  opacity: 0.4;
  line-height: 1;
  display: block;
  margin-bottom: -0.75rem;
}

/* Citattext — Fraunces Light Italic / Papper */
.q-body {
  font-family: var(--font-serif);
  font-size: var(--body-size);
  font-weight: 300;
  font-style: italic;
  line-height: 1.9;
  color: var(--text-on-dark);
  margin-bottom: 1.25rem;
  max-width: 740px;
}

.q-body em {
  font-style: normal;
  font-weight: 400;
  color: var(--highlight);
}

.q-rule {
  width: 20px;
  height: 1px;
  background: var(--highlight);
  margin-bottom: 0.75rem;
}

/* Attribution — JetBrains Mono / Bokeh */
.q-attr {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--highlight);
  display: block;
}

/* Roll — Inter Tight / Lyktsken */
.q-role {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--esah-04);
  margin-top: 4px;
  font-style: italic;
  display: block;
}

/* ── KONTAKT ─────────────────────────────────────────────── */
.contact {
  background: var(--bg);
  padding: 5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--border-light);
}

/* Rubrik — Bebas Neue / Asfalt */
.contact-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 80px);
  font-weight: 400;
  color: var(--esah-01);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.contact-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.8em;
  color: var(--accent);
  text-transform: none;
}

/* Undertext — Inter Tight 400 / Lyktsken */
.contact-sub {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 0.75rem;
}

/* ── FOOTER ──────────────────────────────────────────────── */
/* Mörk yta — Asfalt (ESAH-01) */
.footer {
  padding: 2rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--esah-04);
  background: var(--esah-01);
}

.footer a {
  color: var(--esah-04);
  text-decoration: none;
  transition: color 0.2s;
}

.footer a:hover { color: var(--highlight); }

/* ── RESPONSIV ──────────────────────────────────────────── */
@media (max-width: 800px) {
  .nav { padding: 0 1.5rem; position: relative; }

  .nav-links,
  .nav .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border-light);
    padding: 1.5rem;
    gap: 1.5rem;
    z-index: 99;
  }

  .nav-links.open,
  .nav .menu.open { display: flex; }

  .nav-toggle { display: flex; }

  .hero {
    flex-direction: column;
    height: auto;
    max-height: none;
    min-height: 0;
  }
  .hero-panel-dark {
    order: -1;
    padding: 3rem 1.5rem;
  }
  .hero-panel-light {
    aspect-ratio: 2 / 3;
    height: auto;
    width: 100%;
    flex-shrink: 0;
  }
  .hero-title { font-size: 64px; }
  .btn-ghost { margin-left: 0; margin-top: 0.75rem; }

  .characters { grid-template-columns: 1fr; }
  .character {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    padding: 2.5rem 1.5rem;
  }
  .character:last-child { border-bottom: none; }

  .synopsis {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 3.5rem 1.5rem;
  }

  .quotes { padding: 3.5rem 1.5rem; }

  .contact {
    flex-direction: column;
    align-items: flex-start;
    padding: 3.5rem 1.5rem;
  }

  .footer {
    padding: 1.5rem;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}