/* ============================================================
   Mentanura — shared site stylesheet
   Foundation, chrome (topbar/nav/footer), and common components
   used across all pages. Page-specific rules live inline per page.
   ============================================================ */

:root{
  --paper:#F5F4EF; --paper-2:#EDEBE3; --paper-3:#2B3A30;
  --ink:#2C3D33; --ink-soft:#5E6F62; --sage:#8A9A8C;
  --gold:#A98B5D; --gold-soft:#C2A878;
  --line:rgba(44,61,51,.14); --line-2:rgba(44,61,51,.08);
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Mulish",system-ui,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden; }
body{ font-family:var(--sans); background:var(--paper); color:var(--ink); font-weight:300; line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-tap-highlight-color:transparent; text-rendering:optimizeLegibility; }
::selection{ background:rgba(169,141,87,.22); }
img{ max-width:100%; }
a{ color:var(--gold); }
a:hover{ color:var(--ink); }

.wrap{ max-width:1180px; margin:0 auto; padding:0 48px; }
.narrow{ max-width:780px; }

/* ---------- shared type ---------- */
.kicker{ font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); font-weight:500; }
.eyebrow{ font-size:12.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; }
h2.section-title{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,4vw,48px); line-height:1.12; letter-spacing:.01em; color:var(--ink); }
p.lead{ font-family:var(--serif); font-weight:400; font-size:clamp(21px,2.4vw,28px); line-height:1.5; color:var(--ink); font-style:italic; }
.body{ font-size:16.5px; color:var(--ink-soft); max-width:62ch; }
.body + .body{ margin-top:18px; }

section{ padding:120px 0; }
.section-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:54px; }

/* ---------- top bar ---------- */
header.topbar{ position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:22px 48px; transition:background .4s ease, padding .4s ease, box-shadow .4s ease; }
header.topbar.scrolled{ background:rgba(245,244,239,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); padding:14px 48px; box-shadow:0 1px 0 var(--line-2); }
.topbar .mark{ font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing:.46em; text-transform:uppercase; color:var(--ink); text-indent:.46em; text-decoration:none; position:relative; z-index:1002; }
.topbar .mark:hover{ color:var(--gold); }
.topbar nav{ display:flex; gap:30px; align-items:center; }
.topbar nav a{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; font-weight:400; transition:color .25s; }
.topbar nav a:hover, .topbar nav a.active{ color:var(--gold); }

/* hamburger (mobile) */
.nav-toggle{ display:none; position:relative; z-index:1002; width:44px; height:44px; margin:-10px -10px -10px 0; padding:0; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.nav-toggle span{ position:absolute; left:11px; right:11px; height:1.5px; background:var(--ink); transition:transform .32s cubic-bezier(.4,.1,.2,1), opacity .2s ease, top .32s ease; }
.nav-toggle span:nth-child(1){ top:15px; }
.nav-toggle span:nth-child(2){ top:21px; }
.nav-toggle span:nth-child(3){ top:27px; }
body.nav-open .nav-toggle span:nth-child(1){ top:21px; transform:rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ top:21px; transform:rotate(-45deg); }

@media(max-width:1024px){
  header.topbar, header.topbar.scrolled{ padding:14px 22px; }
  .nav-toggle{ display:block; }
  .topbar nav{ position:fixed; inset:0; z-index:1001; flex-direction:column; justify-content:center; align-items:center; gap:4px; background:rgba(245,244,239,.97); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); opacity:0; visibility:hidden; transition:opacity .34s ease, visibility .34s ease; padding:80px 24px 40px; overflow-y:auto; }
  body.nav-open .topbar nav{ opacity:1; visibility:visible; }
  .topbar nav a{ font-size:17px; letter-spacing:.18em; padding:13px 8px; color:var(--ink); opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease, color .25s; }
  body.nav-open .topbar nav a{ opacity:1; transform:none; }
  body.nav-open .topbar nav a:nth-child(1){ transition-delay:.06s; }
  body.nav-open .topbar nav a:nth-child(2){ transition-delay:.10s; }
  body.nav-open .topbar nav a:nth-child(3){ transition-delay:.14s; }
  body.nav-open .topbar nav a:nth-child(4){ transition-delay:.18s; }
  body.nav-open .topbar nav a:nth-child(5){ transition-delay:.22s; }
  body.nav-open .topbar nav a:nth-child(6){ transition-delay:.26s; }
  body.nav-open .topbar nav a:nth-child(7){ transition-delay:.30s; }
}
@media(max-width:1024px) and (prefers-reduced-motion:reduce){
  .topbar nav, .topbar nav a, .nav-toggle span{ transition:none !important; }
}

/* ---------- page hero (subpages) ---------- */
.page-hero{ padding:170px 0 70px; text-align:center; }
.page-hero .kicker{ display:block; }
.page-hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(40px,7vw,84px); letter-spacing:.02em; color:var(--ink); line-height:1.04; margin:20px auto 0; max-width:16ch; }
.page-hero .tagline{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,3vw,32px); color:var(--gold); margin-top:16px; }
.page-hero .body{ margin:26px auto 0; text-align:center; }
.page-hero .meta{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:32px; }

/* breadcrumb / back link */
.backlink{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; font-weight:500; transition:color .25s, gap .25s; }
.backlink:hover{ color:var(--gold); gap:13px; }
.backlink .arr{ color:var(--gold); }

/* ---------- buttons & chips ---------- */
.btn{ display:inline-flex; align-items:center; gap:12px; font-family:var(--sans); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper); background:var(--ink); font-weight:500; padding:17px 34px; border-radius:100px; text-decoration:none; transition:background .3s, transform .3s; }
.btn:hover{ background:var(--gold); color:var(--paper); transform:translateY(-2px); }
.chip{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); padding:7px 14px; border-radius:100px; font-weight:400; }
.chip.soon{ color:var(--gold); border-color:rgba(169,141,87,.4); }
.meta{ display:flex; flex-wrap:wrap; gap:10px; }

.offer-link{ display:inline-flex; align-items:center; gap:9px; margin-top:28px; font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); text-decoration:none; font-weight:500; border-bottom:1px solid var(--gold); padding-bottom:5px; width:fit-content; transition:color .25s, gap .25s; }
.offer-link:hover{ color:var(--gold); gap:14px; }
.offer-link .arr{ color:var(--gold); }

/* ---------- offer block (detail pages) ---------- */
.offer{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:20px 0; }
.offer.flip .offer-media{ order:-1; }
.offer-index{ font-family:var(--serif); font-style:italic; font-size:20px; color:var(--gold); letter-spacing:.04em; margin-bottom:18px; display:block; }
.offer h3{ font-family:var(--serif); font-weight:400; line-height:1.08; font-size:clamp(26px,3.2vw,40px); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:8px; }
.offer .tagline{ font-family:var(--serif); font-style:italic; font-size:19px; color:var(--ink-soft); margin-bottom:22px; }
.offer .meta{ margin-top:26px; }
.offer-img{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.offer-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.offer:hover .offer-img img{ transform:scale(1.035); }
.offer-img::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px var(--line); }
.offer-duo{ display:flex; gap:16px; align-items:stretch; }
.offer-duo .offer-img{ flex:1 1 0; aspect-ratio:4/5; margin:0; }
.offer-img.book{ aspect-ratio:auto; background:transparent; overflow:visible; display:flex; align-items:center; justify-content:center; min-height:460px; }
.offer-img.book::after{ display:none; }
.offer-img.book img{ width:auto; height:auto; max-width:86%; max-height:460px; object-fit:contain; filter:drop-shadow(0 28px 52px rgba(20,28,22,.34)); transform:none; }
@media (hover:hover){ .offer:hover .offer-img.book img{ transform:translateY(-5px); } }
@media (prefers-reduced-motion:reduce){ .offer-img img, .offer-img.book img{ transition:none !important; } }

/* ---------- founder / about ---------- */
.founder{ display:grid; grid-template-columns:0.85fr 1fr; gap:64px; align-items:center; }
.founder-portrait{ position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; }
.founder-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.founder-portrait::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line); }
.founder .kicker{ margin-bottom:18px; }
.founder h2{ font-family:var(--serif); font-weight:400; line-height:1.1; font-size:clamp(28px,3.4vw,44px); letter-spacing:.03em; color:var(--ink); margin-bottom:24px; }
.founder .body + .body{ margin-top:18px; }
.founder .creds{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:28px; }
.founder .creds span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); padding:6px 12px; border-radius:100px; }
.founder .signoff{ margin-top:34px; font-family:var(--serif); font-style:italic; font-size:22px; color:var(--gold); }
.founder .signoff .role{ display:block; margin-top:6px; font-style:normal; font-family:var(--sans); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- philosophy (inverted) ---------- */
.philo{ position:relative; isolation:isolate; background:var(--paper-3); color:#E7E9E2; text-align:center; padding:150px 0; overflow:hidden; }
.philo .philo-bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center 55%; }
.philo::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse 64% 52% at 50% 46%, rgba(18,26,20,.52), rgba(18,26,20,0) 72%), linear-gradient(180deg, rgba(26,36,30,.34), rgba(26,36,30,.22) 50%, rgba(26,36,30,.5)); }
.philo .kicker{ color:var(--gold-soft); text-shadow:0 1px 12px rgba(15,22,17,.5); }
.philo blockquote{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(26px,4vw,46px); line-height:1.34; letter-spacing:.01em; color:#FBFCF8; max-width:24ch; margin:34px auto 0; text-shadow:0 2px 26px rgba(13,20,15,.62), 0 1px 3px rgba(13,20,15,.4); }
.philo .by{ margin-top:34px; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:#D7DDD3; text-shadow:0 1px 10px rgba(15,22,17,.5); }

/* ---------- map / anfahrt ---------- */
.map-frame{ position:relative; margin-top:48px; border:1px solid var(--line); background:var(--paper-2); overflow:hidden; min-height:440px; }
.map-embed{ width:100%; height:440px; border:0; display:block; -webkit-filter:sepia(.30) hue-rotate(58deg) saturate(.72) brightness(1.03) contrast(.95); filter:sepia(.30) hue-rotate(58deg) saturate(.72) brightness(1.03) contrast(.95); }
@media(max-width:700px){ .map-frame{ min-height:340px; } .map-embed{ height:340px; } }

/* ---------- reveal ---------- */
.reveal{ opacity:1; }
@keyframes revealUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
html.js-on .reveal.animate{ animation:revealUp .9s cubic-bezier(.22,.61,.36,1) both; }

/* ---------- footer ---------- */
footer.foot{ border-top:1px solid var(--line); padding:56px 0 40px; }
.foot-inner{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px 48px; }
.foot-brand .fm{ font-family:var(--sans); font-size:12px; letter-spacing:.4em; text-transform:uppercase; color:var(--ink); text-indent:.4em; }
.foot-brand .fc{ font-size:11.5px; letter-spacing:.08em; color:var(--sage); margin-top:8px; }
.foot-col-title{ font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--sage); margin-bottom:16px; }
.foot-links, .foot-social{ display:flex; flex-direction:column; gap:11px; }
.foot-links a, .foot-social a, .foot-link-btn{ font-size:13px; letter-spacing:.04em; color:var(--ink-soft); text-decoration:none; transition:color .25s; width:fit-content; }
.foot-links a:hover, .foot-social a:hover, .foot-link-btn:hover{ color:var(--gold); }
.foot-link-btn{ font-family:var(--sans); font-weight:300; background:none; border:0; padding:0; cursor:pointer; text-align:left; }
.foot-social a{ display:inline-flex; align-items:center; gap:9px; }
.foot-social svg{ width:16px; height:16px; flex:none; }
.foot-base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:44px; padding-top:22px; border-top:1px solid var(--line-2); }
.foot-base span{ font-size:11.5px; letter-spacing:.06em; color:var(--sage); }

/* ---------- responsive ---------- */
@media(max-width:860px){
  .wrap{ padding:0 28px; }
  section{ padding:84px 0; }
  .offer{ grid-template-columns:1fr; gap:34px; }
  .offer.flip .offer-media{ order:0; }
  .offer-img.book{ min-height:340px; }
  .offer-img.book img{ max-height:340px; }
  .founder{ grid-template-columns:1fr; gap:34px; }
  .founder-portrait{ aspect-ratio:4/3; }
  .page-hero{ padding:132px 0 56px; }
  .philo{ padding:110px 0; }
}
@media(max-width:560px){
  .wrap{ padding:0 22px; }
  section{ padding:68px 0; }
  .foot-inner{ flex-direction:column; gap:26px; }
}
@media(prefers-reduced-motion:reduce){
  html.js-on .reveal.animate{ animation:none !important; }
  html{ scroll-behavior:auto; }
}