/* ══════════════════════════════════════════════════════════════════════════
   speculum.css — Gemeinsames Stylesheet für alle Seiten
   Eleonoras Reise · Speculum Sapientiae · valwebmedia · MMXXV
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root{
  /* Ink / Text */
  --ink:         #1a1410;
  --ink-mid:     #3d3024;
  --ink-soft:    #5a4e3e;
  --ink-muted:   #7a6a58;

  /* Backgrounds */
  --parchment:   #f6f0e4;
  --parch-warm:  #ede4d0;
  --parch-deep:  #d8ccb4;

  /* Gold — three roles */
  --gold:            #b8820f;   /* decorative, borders              */
  --gold-bright:     #e8b84b;   /* accents, icons, hover            */
  --gold-pale:       #f5edd4;   /* background tints                 */
  --gold-text-light: #7a5208;   /* text on light/parchment bg       */
  --gold-text-dark:  #f5d060;   /* text on dark/navy bg             */

  /* Navy */
  --navy:        #1e3a5f;
  --navy-mid:    #2e5f9a;
  --navy-pale:   #d4e4f4;

  /* High-contrast text for dark backgrounds */
  --on-dark:         #f6f0e4;   /* main body text on navy           */
  --on-dark-sub:     #d8c89a;   /* secondary text on navy           */
  --on-dark-muted:   #b8a880;   /* tertiary / captions on navy      */

  /* Typography */
  --display: 'Cormorant SC', serif;
  --serif:   'Cormorant Garamond', serif;
  --body:    'Crimson Pro', serif;

  /* Layout */
  --w:   1080px;
  --gap: clamp(3.5rem, 7vw, 6rem);
}

/* ── Base body ────────────────────────────────────────────────────────────── */
body{
  background:    var(--parchment);
  color:         var(--ink);
  font-family:   var(--body);
  font-size:     20px;
  line-height:   1.75;
  overflow-x:    hidden;
}

/* Parchment grain texture overlay */
body::after{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  opacity:.45;
}

a{color:inherit;text-decoration:none}

/* ── Navigation ───────────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;width:100%;z-index:900;
  background:rgba(20,14,10,.97);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(232,184,75,.25);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2.5rem;height:56px;
  transition:box-shadow .3s;
}
.nav.scrolled{box-shadow:0 4px 30px rgba(0,0,0,.4)}

.nav-brand{
  font-family:var(--display);
  font-size:.8rem;letter-spacing:.18em;
  color:var(--gold-bright);line-height:1.2;
  text-decoration:none;
}
.nav-brand span{
  display:block;font-size:.6rem;letter-spacing:.12em;
  color:var(--on-dark-muted);font-family:var(--body);font-weight:300;
}

.nav-links{display:flex;list-style:none}
.nav-links a{
  display:block;padding:0 .9rem;height:56px;line-height:56px;
  font-family:var(--body);font-size:.97rem;font-weight:400;letter-spacing:.04em;
  color:var(--on-dark-sub);
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
  text-decoration:none;
}
.nav-links a:hover{color:var(--gold-bright);border-bottom-color:var(--gold-bright)}
.nav-links a.active{color:var(--gold-bright);border-bottom-color:var(--gold-bright)}

.nav-cta{
  background:var(--gold-bright)!important;color:#1a1410!important;
  font-weight:700!important;border-bottom:none!important;
  height:34px!important;line-height:34px!important;
  padding:0 1.2rem!important;
  align-self:center;border-radius:2px;margin-left:.5rem;
}
.nav-cta:hover{background:#f5cc6a!important}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hamburger span{width:20px;height:1.5px;background:var(--gold-bright);display:block;transition:all .3s}

/* ── Page header (dark, shared pattern) ──────────────────────────────────── */
.page-header{
  background:var(--navy);
  padding:9rem 2.5rem 5rem;
  position:relative;overflow:hidden;
}
.page-header-inner{max-width:var(--w);margin:0 auto}

.page-eyebrow{
  font-family:var(--display);font-size:1rem;letter-spacing:.22em;
  color:var(--gold-bright);text-transform:uppercase;
  margin-bottom:1rem;
  display:flex;align-items:center;gap:.75rem;font-weight:500;
}
.page-eyebrow::before{content:'';width:28px;height:1.5px;background:var(--gold-bright);opacity:.6}

.page-title{
  font-family:var(--display);
  font-size:clamp(2.4rem,5vw,4rem);
  font-weight:600;letter-spacing:.05em;
  color:var(--on-dark);line-height:1;margin-bottom:.75rem;
}
.page-subtitle{
  font-family:var(--serif);font-size:1.2rem;
  font-style:italic;color:var(--on-dark-sub);line-height:1.55;
}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.breadcrumb{background:var(--parch-warm);border-bottom:1px solid var(--parch-deep);padding:.75rem 2.5rem}
.breadcrumb-inner{
  max-width:var(--w);margin:0 auto;
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--body);font-size:.9rem;color:var(--ink-muted);
}
.breadcrumb a{color:var(--navy-mid);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb-sep{color:var(--parch-deep)}

/* ── Anchor nav (sticky sub-navigation) ──────────────────────────────────── */
.anchor-nav{
  background:var(--parchment);border-bottom:1px solid var(--parch-deep);
  padding:0 2.5rem;position:sticky;top:56px;z-index:800;
}
.anchor-nav-inner{max-width:var(--w);margin:0 auto;display:flex;overflow-x:auto}
.anchor-nav a{
  display:block;padding:.85rem 1.2rem;
  font-family:var(--display);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent;transition:color .2s,border-color .2s;
}
.anchor-nav a:hover,.anchor-nav a.current{color:var(--navy);border-bottom-color:var(--gold-bright)}

/* ── Section scaffolding ──────────────────────────────────────────────────── */
.section{padding:var(--gap) 2.5rem}
.section-inner{max-width:var(--w);margin:0 auto}

/* Eyebrow — small all-caps label above headings */
.eyebrow{
  font-family:var(--display);font-size:1rem;letter-spacing:.22em;
  color:var(--gold-text-light);text-transform:uppercase;
  display:flex;align-items:center;gap:1rem;
  margin-bottom:1.4rem;font-weight:500;
}
.eyebrow::after{content:'';flex:1;max-width:80px;height:1.5px;background:var(--gold-text-light);opacity:.7}

/* Dark section overrides → brighter gold */
.on-dark-section .eyebrow{color:var(--gold-text-dark)}
.on-dark-section .eyebrow::after{background:var(--gold-text-dark);opacity:.6}

/* Section headings */
.section-h{
  font-family:var(--serif);
  font-size:clamp(1.7rem,3vw,2.5rem);
  font-weight:400;color:var(--navy);line-height:1.2;margin-bottom:1.5rem;
}
.on-dark-section .section-h{color:var(--on-dark)}

/* Body text */
.prose{font-family:var(--body);font-size:1.1rem;color:var(--ink-mid);line-height:1.85;max-width:70ch}
.prose+.prose{margin-top:1.1rem}
.on-dark-section .prose{color:var(--on-dark-sub)}

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start;margin-top:2rem}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}

/* ── Blockquote ───────────────────────────────────────────────────────────── */
.bq{border-left:3px solid var(--gold-bright);padding:1.25rem 0 1.25rem 2rem;margin:2rem 0}
.bq-text{font-family:var(--serif);font-size:1.2rem;font-style:italic;color:var(--ink-mid);line-height:1.65}
.bq-attr{
  font-family:var(--display);font-size:.78rem;letter-spacing:.15em;
  color:var(--gold-text-light);text-transform:uppercase;margin-top:.75rem;
}
.on-dark-section .bq-text{color:var(--on-dark)}
.on-dark-section .bq-attr{color:var(--gold-text-dark)}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 2rem;
  font-family:var(--body);font-size:1rem;font-weight:600;letter-spacing:.04em;
  border-radius:2px;border:none;cursor:pointer;text-decoration:none;
  transition:all .2s;
}
.btn-navy{background:var(--navy);color:var(--gold-bright)}
.btn-navy:hover{background:var(--navy-mid)}
.btn-gold{background:var(--gold-bright);color:#1a1410}
.btn-gold:hover{background:#f5cc6a}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn-outline:hover{background:var(--navy);color:var(--gold-bright)}

/* ── CTA band ─────────────────────────────────────────────────────────────── */
.cta-section{
  background:var(--gold-pale);
  border-top:1px solid var(--parch-deep);border-bottom:1px solid var(--parch-deep);
  text-align:center;
}
.cta-inner{max-width:680px;margin:0 auto}
.cta-quote{font-family:var(--serif);font-size:1.5rem;font-style:italic;color:var(--navy);line-height:1.5;margin-bottom:.75rem}
.cta-attr{
  font-family:var(--display);font-size:.78rem;letter-spacing:.18em;
  color:var(--gold-text-light);text-transform:uppercase;margin-bottom:3rem;
}

/* ── Reviews (shared pattern used on multiple pages) ─────────────────────── */
.reviews-section{background:var(--navy);padding:var(--gap) 2.5rem}
.reviews-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem}
.review{background:rgba(246,240,228,.06);border-top:2px solid var(--gold-bright);padding:1.75rem 1.75rem 1.25rem}
.review-text{
  font-family:var(--serif);font-size:1.1rem;font-style:italic;
  color:var(--on-dark);line-height:1.72;margin-bottom:1rem;
}
.review-text::before{content:'\201E';color:var(--gold-bright);font-size:1.5rem;line-height:0;vertical-align:-.4em;margin-right:.1em}
.review-source{
  font-family:var(--display);font-size:.88rem;letter-spacing:.12em;
  color:var(--gold-text-dark);text-transform:uppercase;font-weight:500;
}
.review-note{font-family:var(--body);font-size:.88rem;font-style:italic;color:var(--on-dark-muted);margin-top:.5rem}
.ki-disclaimer{margin-top:2rem;font-family:var(--serif);font-size:.95rem;font-style:italic;color:var(--on-dark-muted);max-width:65ch}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer{background:#120e0a;padding:4rem 2.5rem 2rem}
.footer-inner{max-width:var(--w);margin:0 auto}
.footer-brand{font-family:var(--display);font-size:1.1rem;letter-spacing:.15em;color:var(--gold-bright);margin-bottom:.4rem}
.footer-tagline{font-family:var(--serif);font-size:.95rem;font-style:italic;color:var(--on-dark-muted);margin-bottom:3rem}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-bottom:3rem}
.footer-col-label{
  font-family:var(--display);font-size:.78rem;letter-spacing:.2em;
  color:var(--gold-text-dark);text-transform:uppercase;margin-bottom:.75rem;font-weight:500;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.footer-col a{font-family:var(--body);font-size:1rem;color:var(--on-dark-sub);transition:color .2s;text-decoration:none}
.footer-col a:hover{color:var(--gold-bright)}
.footer-bottom{
  border-top:1px solid rgba(246,240,228,.1);padding-top:1.5rem;
  display:flex;justify-content:space-between;
  font-family:var(--body);font-size:.88rem;color:var(--on-dark-muted);
}

/* ── Scroll reveal animation ──────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.up{opacity:1;transform:translateY(0)}

/* ── Mobile — shared breakpoints ─────────────────────────────────────────── */
@media(max-width:900px){
  /* Nav → hamburger */
  .nav-links{
    display:none;flex-direction:column;
    position:absolute;top:56px;left:0;right:0;
    background:rgba(14,10,6,.98);
    padding:.5rem 2rem 1.5rem;
  }
  .nav-links.open{display:flex}
  .nav-links a{height:auto;line-height:1;padding:.7rem 0;border-bottom:1px solid rgba(232,184,75,.1)}
  .nav-cta{margin-left:0;height:auto!important;line-height:1!important;padding:.7rem 0!important}
  .hamburger{display:flex}

  /* Layout stacks */
  .two-col{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center}
  .page-header-inner{grid-template-columns:1fr}
}

@media(max-width:480px){
  body{font-size:18px}
  .anchor-nav a{font-size:.7rem;padding:.75rem .85rem}
}

/* ── Coming-soon popup ────────────────────────────────────────────────────── */
.cs-overlay{
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(20,14,10,.55);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;
}
.cs-overlay.open{display:flex}
.cs-box{
  background:var(--parchment);
  border-top:4px solid var(--gold-bright);
  padding:2.5rem 2.75rem 2rem;
  max-width:420px;width:90%;
  text-align:center;
  box-shadow:0 16px 48px rgba(0,0,0,.35);
}
.cs-icon{
  font-family:var(--display);font-size:2rem;
  color:var(--gold-bright);display:block;margin-bottom:1rem;
}
.cs-title{
  font-family:var(--display);font-size:1.2rem;letter-spacing:.06em;
  color:var(--navy);margin-bottom:.6rem;
}
.cs-text{
  font-family:var(--serif);font-size:1.05rem;font-style:italic;
  color:var(--ink-muted);line-height:1.65;margin-bottom:1.75rem;
}
.cs-close{
  background:var(--navy);color:var(--gold-bright);
  font-family:var(--body);font-size:.92rem;font-weight:600;
  border:none;padding:.7rem 2rem;border-radius:2px;cursor:pointer;
  transition:background .2s;
}
.cs-close:hover{background:var(--navy-mid)}