/* ============ TOKENS ============ */
:root{
  --serif:'Fraunces', Georgia, serif;
  --serif2:'Newsreader', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1280px;
  --nav-h:92px;
}
html.dark{
  --bg:#0B0E1A; --bg2:#111629; --bg3:#171D34; --panel:rgba(255,255,255,.045);
  --ink:#F5EFE2; --ink-2:#D2CAB6; --ink-soft:#9A9585; --line:rgba(226,197,120,.18);
  --gold:#E6C374; --gold-2:#CFA24A; --gold-deep:#9A7A2E; --sage:#93B6A7;
  --hero-veil:linear-gradient(180deg, rgba(9,12,22,.62) 0%, rgba(9,12,22,.14) 20%, rgba(9,12,22,0) 40%, rgba(9,12,22,.55) 74%, #0B0E1A 100%);
  --card:rgba(255,255,255,.038); --card-line:rgba(226,197,120,.18);
  --shadow:0 34px 90px -34px rgba(0,0,0,.8);
}
html.light{
  --bg:#FBF8F1; --bg2:#F4EDDD; --bg3:#EDE3CE; --panel:rgba(30,34,48,.035);
  --ink:#1C2030; --ink-2:#3C4254; --ink-soft:#6E7588; --line:rgba(146,107,29,.22);
  --gold:#B48A2A; --gold-2:#946E1C; --gold-deep:#7D5E1F; --sage:#3F6B5E;
  --hero-veil:linear-gradient(180deg, rgba(252,250,244,.5) 0%, rgba(252,250,244,.1) 22%, rgba(252,250,244,0) 42%, rgba(252,250,244,.55) 76%, #FBF8F1 100%);
  --card:#FFFFFF; --card-line:rgba(146,107,29,.18);
  --shadow:0 34px 80px -38px rgba(30,34,48,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:18.5px;
  -webkit-font-smoothing:antialiased; line-height:1.65; overflow-x:hidden; line-height:1.7;
  transition:background .55s var(--ease), color .55s var(--ease);}
h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0}
h1{line-height:.94; letter-spacing:-.024em}
h2{line-height:1.05; letter-spacing:-.02em}
h3{line-height:1.14; letter-spacing:-.012em}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(22px,5vw,56px)}
.eyebrow{font-family:var(--sans); text-transform:uppercase; letter-spacing:.26em; font-size:12px; font-weight:600; color:var(--gold-2)}
.serif2{font-family:var(--serif2); font-weight:300}
.hr-gold{height:1px; background:linear-gradient(90deg, transparent, var(--gold-2), transparent); border:0; opacity:.55}

/* ============ NAV ============ */
.nav{position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:100; display:flex; align-items:center;
  transition:background .4s var(--ease), border-color .4s, height .4s; border-bottom:1px solid transparent}
.nav.scrolled{height:76px; background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; width:100%}
.brand{display:flex; align-items:center; gap:11px; letter-spacing:.28em; font-family:var(--serif2);
  text-transform:uppercase; font-size:20px}
.brand svg{width:34px; height:34px; color:var(--gold-2)}
.brandmark{width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; flex:none}
.brandmark.brandmark-sm{width:28px; height:28px}
.brandmark img{width:100%; height:100%; object-fit:contain}
.brandmark .mk-bird{display:none}
body.brand-samu .brandmark .mk-sl{display:none}
body.brand-samu .brandmark .mk-bird{display:block}
.nav-links{display:flex; gap:40px; font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-soft)}
.nav-links a{position:relative; padding:6px 0; transition:color .25s}
.nav-links a::after{content:''; position:absolute; left:0; bottom:-1px; height:1.5px; width:0; background:var(--gold-2); transition:width .35s var(--ease)}
.nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{width:100%}
.nav-links a.is-active,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a.is-active::after,.nav-links a[aria-current="page"]::after{width:100%}
.nav-tools{display:flex; align-items:center; gap:11px}
.pill{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px;
  padding:10px 15px; font-size:12.5px; font-weight:700; letter-spacing:.1em; cursor:pointer; background:var(--panel);
  color:var(--ink-2); transition:.25s; min-height:42px}
.pill:hover{border-color:var(--gold-2); color:var(--ink); transform:translateY(-1px)}
.pill.icon{padding:10px 12px}
.langbtn b{color:var(--ink)}
.menu-btn{display:none; font-size:18px}

/* ============ BUTTONS ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:11px; padding:17px 30px; border-radius:2px;
  font-family:var(--sans); font-weight:600; font-size:14.5px; letter-spacing:.06em; cursor:pointer;
  transition:.32s var(--ease); border:1.5px solid var(--gold-2); min-height:54px}
.btn-primary{background:linear-gradient(180deg, var(--gold), var(--gold-2)); color:#221900; border-color:transparent;
  box-shadow:0 14px 30px -12px color-mix(in srgb, var(--gold-2) 60%, transparent)}
.btn-primary:hover{filter:brightness(1.08); transform:translateY(-3px); box-shadow:0 20px 40px -14px color-mix(in srgb, var(--gold-2) 70%, transparent)}
.btn-ghost{background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink); border-color:color-mix(in srgb, var(--gold-2) 55%, transparent)}
.btn-ghost:hover{background:color-mix(in srgb, var(--gold-2) 12%, transparent); border-color:var(--gold); transform:translateY(-3px)}
.btn-sm{padding:13px 20px; font-size:13px; min-height:46px}

/* ============ HERO ============ */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-photo{position:absolute; inset:-4% 0 0; background:radial-gradient(120% 90% at 50% 20%, var(--bg3), var(--bg)); will-change:transform}
.hero-photo img{position:absolute; inset:0; width:100%; height:104%; object-fit:cover; object-position:42% 28%}
.hero-veil{position:absolute; inset:0; background:var(--hero-veil); z-index:1}
.hero-vignette{position:absolute; inset:0; z-index:1; pointer-events:none; box-shadow:inset 0 0 260px 70px rgba(5,7,14,.72)}
html.light .hero-vignette{box-shadow:inset 0 0 240px 60px rgba(30,26,14,.28)}
.hero-grain{position:absolute; inset:0; z-index:1; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.hero-flank{position:absolute; top:calc(var(--nav-h) + 5vh); z-index:2; display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--gold-2)}
.hero-flank.left{left:max(22px, calc(50vw - var(--maxw)/2 + 16px))}
.hero-flank .lab{font-family:var(--sans); writing-mode:vertical-rl; text-transform:uppercase; letter-spacing:.36em; font-size:11px; font-weight:600; color:var(--ink-soft)}
.hero-flank svg{width:48px;height:48px}

/* right-side feature — nutzt den Leerraum */
.hero-feature{position:absolute; z-index:3; right:max(22px, calc(50vw - var(--maxw)/2 + 16px)); top:50%; transform:translateY(-50%);
  width:230px; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:14px}
.hero-feature .tag{font-family:var(--sans); text-transform:uppercase; letter-spacing:.28em; font-size:11px; font-weight:700; color:var(--gold-2)}
.hero-feature .mini{width:150px; aspect-ratio:.66; border-radius:3px; box-shadow:0 26px 50px -18px rgba(0,0,0,.7);
  border:1px solid var(--card-line); background:linear-gradient(160deg,#1c2b23,#0f1a15); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center; transition:transform .5s var(--ease)}
.hero-feature .mini:hover{transform:translateY(-4px) rotate(-1deg)}
.hero-feature .mini span{font-family:var(--serif); color:var(--gold); font-size:14px; line-height:1.15; padding:12px; letter-spacing:.02em}
.hero-feature .mini img{width:100%;height:100%;object-fit:cover}
.hero-feature .ft-title{font-family:var(--serif2); font-size:15px; color:var(--ink-2)}

.hero-inner{position:relative; z-index:3; padding-bottom:clamp(46px,9vh,104px)}
.hero-inner .eyebrow{margin-bottom:20px; display:inline-block}
.hero h1{font-size:clamp(58px,12vw,160px); font-weight:400; letter-spacing:-.03em; line-height:.92}
.hero h1 .l2{font-style:italic; font-weight:300; color:var(--gold-2); display:block; letter-spacing:.004em; margin-top:-.03em}
.hero .tag{font-family:var(--serif2); font-weight:300; font-size:clamp(20px,2.1vw,27px); line-height:1.55; color:var(--ink-2); margin:30px 0 0; max-width:36ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:16px; margin-top:40px; align-items:center}
.scroll-cue{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3; font-size:10.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:8px}
.scroll-cue i{width:1px; height:38px; background:linear-gradient(var(--gold-2), transparent); display:block; animation:cue 2.2s infinite}
@keyframes cue{0%{transform:scaleY(.3);opacity:.3}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.3);opacity:.3}}

/* ============ SECTIONS ============ */
.sec{padding:clamp(84px,12vh,152px) 0}
.sec-head{max-width:720px; margin-bottom:clamp(40px,6vh,72px)}
.sec-head .eyebrow{margin-bottom:18px; display:block}
.sec-head h2{font-size:clamp(40px,6.4vw,80px)}
.sec-head p{color:var(--ink-2); font-family:var(--serif2); font-weight:300; font-size:clamp(18px,2.1vw,24px); line-height:1.62; margin:22px 0 0; max-width:58ch}

/* BIBLIOTHEK */
.lib{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,44px)}
.vol{background:var(--card); border:1px solid var(--card-line); border-radius:5px; box-shadow:var(--shadow); overflow:hidden;
  display:grid; grid-template-columns:230px 1fr; transition:transform .55s var(--ease), border-color .4s}
.vol:hover{transform:translateY(-8px); border-color:var(--gold-2)}
.vol .cover{position:relative; overflow:hidden; background:linear-gradient(160deg,#1e2f26,#0f1a15)}
.vol.v2 .cover{background:linear-gradient(160deg,#2a2320,#15100c)}
.vol .cover .art{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:22px; gap:14px}
.vol .cover .kicker{font-family:var(--sans); font-size:9.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold)}
.vol .cover .tt{font-family:var(--serif); font-size:22px; line-height:1.1; color:var(--gold); letter-spacing:.01em}
.vol .cover .rule{width:34px;height:1px;background:var(--gold-deep)}
.vol .cover .au{font-family:var(--serif2); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb,var(--gold) 70%, transparent)}
.vol .cover img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
.vol .body{padding:clamp(22px,2.4vw,34px); display:flex; flex-direction:column; justify-content:center}
.vol .editions{display:flex; gap:8px; margin-bottom:14px}
.badge.ku{color:var(--sage); border-color:color-mix(in srgb,var(--sage) 50%, transparent)}
.reels{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:clamp(12px,1.6vw,20px)}
.rcell{aspect-ratio:9/16; border-radius:6px; overflow:hidden; background:var(--bg2); border:1px solid var(--card-line); box-shadow:var(--shadow); transition:transform .5s var(--ease)}
.rcell:hover{transform:translateY(-5px)}
.rcell video{width:100%;height:100%;object-fit:cover;display:block}
.badge{font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:5px 10px; border:1px solid var(--line); border-radius:999px; color:var(--gold-2)}
.vol h3{font-size:clamp(26px,2.8vw,36px)}
.vol .desc{color:var(--ink-2); font-family:var(--serif2); font-weight:300; margin:14px 0 22px; font-size:17px; line-height:1.68; max-width:42ch}
.vol .acts{display:flex; gap:12px; flex-wrap:wrap}
.btn-amz{background:#232F3E; color:#fff; border-color:#232F3E}
.btn-amz:hover{background:#2f3d50; border-color:var(--gold-2); transform:translateY(-3px)}

/* COLORING */
.band{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band .inner{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(34px,5vw,76px); align-items:center}
.band .art{aspect-ratio:16/10; border-radius:5px; background:repeating-linear-gradient(135deg, var(--bg3) 0 24px, var(--bg) 24px 48px);
  border:1px solid var(--card-line); display:flex; align-items:center; justify-content:center; color:var(--gold-2); font-family:var(--serif2); box-shadow:var(--shadow)}
.tagpill{display:inline-block; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--sage);
  border:1px solid var(--line); border-radius:999px; padding:7px 15px; margin-bottom:20px}

/* GALLERY */
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,26px)}
.gal .cell{aspect-ratio:1; border-radius:4px; overflow:hidden; position:relative; background:var(--bg2); border:1px solid var(--card-line); cursor:pointer}
.gal .cell::after{content:''; position:absolute; inset:0; background:linear-gradient(160deg,var(--bg3),var(--bg2)); transition:opacity .45s}
.gal .cell:hover::after{opacity:.6}
.gal .cell span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; color:var(--gold-2); font-family:var(--serif2); font-size:14px}
.gal .cell.tall{grid-row:span 2; aspect-ratio:auto}
.gal .cell img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}

/* ABOUT */
.about{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(34px,5vw,80px); align-items:center}
.about .portrait{aspect-ratio:.82; border-radius:5px; background:linear-gradient(160deg,var(--bg3),var(--bg2)); border:1px solid var(--card-line);
  box-shadow:var(--shadow); position:relative; overflow:hidden; display:flex;align-items:center;justify-content:center; color:var(--gold-2); font-family:var(--serif2)}
.about .portrait img{width:100%;height:100%;object-fit:cover}
.about h2{font-size:clamp(34px,4.6vw,58px)}
.about p{color:var(--ink-2); font-family:var(--serif2); font-weight:300; font-size:clamp(17px,1.7vw,21px); line-height:1.68; margin:20px 0 0}
.sig{font-family:var(--serif); font-style:italic; font-size:30px; color:var(--gold-2); margin-top:26px}

/* NEWSLETTER */
.news{text-align:center; max-width:680px; margin:0 auto}
.news h2{font-size:clamp(32px,4.6vw,56px)}
.news p{color:var(--ink-2); font-family:var(--serif2); font-weight:300; font-size:clamp(17px,1.7vw,20px); margin:16px 0 30px}
.news form{display:flex; gap:12px; max-width:500px; margin:0 auto; flex-wrap:wrap; justify-content:center}
.news input{flex:1; min-width:240px; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  padding:17px 18px; border-radius:2px; font-family:var(--sans); font-size:15px; outline:none; min-height:54px}
.news input:focus{border-color:var(--gold-2)}

/* FOOTER */
footer{border-top:1px solid var(--line); padding:64px 0 44px; background:var(--bg2)}
footer .cols{display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; align-items:flex-start}
footer .brand{font-size:20px}
footer .fnav{display:flex; gap:28px; flex-wrap:wrap; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
footer .fnav a:hover,footer .fnav a.is-active,footer .fnav a[aria-current="page"]{color:var(--gold-2)}
footer .legal{margin-top:38px; font-size:12px; color:var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px}
footer .legal a:hover{color:var(--ink-2)}
.studio-link{opacity:.7}

.reveal{opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media print{.reveal{opacity:1; transform:none}}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .hero-flank, .hero-feature{display:none}
  .lib{grid-template-columns:1fr}
  .band .inner{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal .cell.tall{grid-row:auto; aspect-ratio:1}
}
@media (max-width:560px){
  :root{--nav-h:74px}
  body{font-size:17px}
  .wrap{padding:0 22px}
  .vol{grid-template-columns:1fr}
  .vol .cover{aspect-ratio:1.9}
  .vol .cover .art{flex-direction:row; gap:16px; justify-content:flex-start}
  .hero h1{font-size:clamp(54px,17vw,86px); line-height:.94} .hero .tag{font-size:19px; line-height:1.5; max-width:32ch} .hero-inner{padding-bottom:70px}
  .hero-cta{gap:12px}
  .hero-cta .btn{width:100%}
  .btn{width:auto}
}
.mmenu{position:fixed; inset:0; z-index:200; background:color-mix(in srgb,var(--bg) 97%, transparent); backdrop-filter:blur(10px);
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:30px}
.mmenu.open{display:flex}
.mmenu a{font-family:var(--serif2); font-size:30px; letter-spacing:.06em}
.mmenu a.is-active,.mmenu a[aria-current="page"]{color:var(--gold-2)}
.mmenu .close{position:absolute; top:24px; right:26px; font-size:32px; cursor:pointer; color:var(--ink-soft)}

/* ===== SCROLL UI ===== */
.scroll-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:300; pointer-events:none}
.scroll-progress__bar{display:block; width:0; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-2)); box-shadow:0 0 18px color-mix(in srgb,var(--gold-2) 55%, transparent)}
.back-top{position:fixed; right:clamp(18px,3vw,34px); bottom:clamp(18px,3vw,34px); z-index:180; width:46px; height:46px;
  display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:999px;
  background:color-mix(in srgb,var(--bg) 88%, transparent); color:var(--gold-2); box-shadow:var(--shadow); backdrop-filter:blur(14px);
  font-size:22px; line-height:1; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(12px); transition:.28s var(--ease)}
.back-top:hover{color:var(--ink); border-color:var(--gold-2); transform:translateY(-2px)}
.back-top.visible{opacity:1; pointer-events:auto; transform:none}

/* ===== TOP LINKTREE BAR ===== */
:root{ --top-h:42px; }
.toplinks{position:fixed; top:0; left:0; right:0; height:var(--top-h); z-index:110;
  background:color-mix(in srgb, var(--bg) 92%, #000); border-bottom:1px solid var(--line);
  display:flex; align-items:center; transition:transform .4s var(--ease); backdrop-filter:blur(10px)}
.toplinks.hide{transform:translateY(-100%)}
.toplinks .wrap{display:flex; align-items:center; justify-content:space-between; width:100%}
.tl-name{font-family:var(--serif2); letter-spacing:.28em; text-transform:uppercase; font-size:11.5px; color:var(--ink-soft)}
.tl-icons{display:flex; align-items:center; gap:6px}
.tl-icons a{width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  color:var(--ink-soft); border:1px solid transparent; transition:.22s}
.tl-icons a:hover{color:var(--gold); border-color:var(--line); background:var(--panel); transform:translateY(-1px)}
.tl-icons svg{width:15px; height:15px; fill:currentColor}
/* nav sits below the top bar */
.nav{top:var(--top-h)}
.nav.scrolled{top:0}
@media (max-width:560px){ .tl-name{display:none} .tl-icons{width:100%; justify-content:space-between; gap:2px} }

/* ===== ALT HERO (author bottom-left → content top-right) ===== */
.hero.alt{justify-content:flex-start}
.hero.alt .hero-photo img{object-position:20% 100%}
.hero.alt .hero-inner{margin-left:auto; text-align:right; max-width:760px; padding-top:calc(var(--nav-h) + var(--top-h) + 8vh); padding-bottom:0}
.hero.alt .hero-inner .tag{margin-left:auto}
.hero.alt .hero-cta{justify-content:flex-end}
.hero.alt .hero-veil{background:linear-gradient(120deg, rgba(9,12,22,.72) 0%, rgba(9,12,22,.2) 45%, rgba(9,12,22,.55) 100%), linear-gradient(0deg, rgba(9,12,22,.6), transparent 30%)}
@media (max-width:900px){ .hero.alt .hero-inner{text-align:left; margin-left:0} .hero.alt .hero-inner .tag{margin-left:0} .hero.alt .hero-cta{justify-content:flex-start} }

/* ===== SUBPAGE HEADER ===== */
.pagehead{padding:calc(var(--nav-h) + var(--top-h) + clamp(48px,10vh,110px)) 0 clamp(30px,5vh,54px); position:relative; border-bottom:1px solid var(--line)}
.pagehead .eyebrow{display:block; margin-bottom:16px}
.pagehead h1{font-size:clamp(44px,7vw,92px); line-height:.96}
.pagehead p{color:var(--ink-2); font-family:var(--serif2); font-weight:300; font-size:clamp(18px,2vw,23px); margin:20px 0 0; max-width:60ch}
.backlink{display:inline-block; margin-bottom:26px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.backlink:hover{color:var(--gold)}
body.page{padding-top:0}

/* teaser cards on home */
.teasers{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,32px)}
.teaser{position:relative; border:1px solid var(--card-line); border-radius:6px; overflow:hidden; background:var(--card);
  box-shadow:var(--shadow); min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; transition:transform .5s var(--ease), border-color .4s}
.teaser:hover{transform:translateY(-6px); border-color:var(--gold-2)}
.teaser .k{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-2); font-weight:600}
.teaser h3{font-size:clamp(24px,2.4vw,32px); margin:10px 0 8px}
.teaser p{color:var(--ink-2); font-family:var(--serif2); font-weight:300; font-size:15.5px; margin:0}
.teaser .arrow{margin-top:16px; color:var(--gold); font-size:20px}
@media (max-width:900px){ .teasers{grid-template-columns:1fr} }

/* ===== HOME LIFE + JSON LIBRARIES ===== */
.home-life{padding-top:clamp(56px,8vh,96px)}
.fact-row{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 clamp(28px,4vh,46px); padding:0}
.fact-row li{list-style:none; display:inline-flex; align-items:center; min-height:38px; padding:8px 14px; border:1px solid var(--line);
  border-radius:999px; background:var(--panel); color:var(--ink-2); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:800}
.quote-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(28px,4.8vw,54px) 0; margin-bottom:clamp(36px,6vh,72px);
  display:grid; grid-template-columns:.38fr 1fr; gap:clamp(18px,4vw,60px); align-items:start}
.quote-strip blockquote{margin:0; color:var(--ink); font-family:var(--serif2); font-weight:300; font-size:clamp(25px,3.6vw,46px); line-height:1.18}
.quote-strip .eyebrow{margin-top:.45em}
.page-quote{max-width:980px; margin:0 auto; text-align:center}
.page-quote blockquote{margin:0; color:var(--ink); font-family:var(--serif2); font-weight:300; font-size:clamp(24px,3.2vw,40px); line-height:1.28}
.asset-toolbar{display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:clamp(24px,4vh,42px); flex-wrap:wrap}
.filter-group{display:flex; flex-wrap:wrap; gap:9px}
.filter-pill{border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--ink-2); min-height:40px; padding:8px 14px;
  font:700 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:.25s var(--ease)}
.filter-pill:hover,.filter-pill.is-active{border-color:var(--gold-2); color:var(--ink); background:color-mix(in srgb,var(--gold-2) 10%, transparent)}
.json-status{color:var(--ink-soft); font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:700}
.asset-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,32px)}
.asset-card{display:flex; flex-direction:column; min-height:100%; border:1px solid var(--card-line); border-radius:8px; overflow:hidden;
  background:var(--card); box-shadow:var(--shadow); transition:transform .38s var(--ease), border-color .32s var(--ease)}
.asset-card:hover{transform:translateY(-5px); border-color:var(--gold-2)}
.asset-thumb{display:block; aspect-ratio:4/3; background:linear-gradient(145deg,var(--bg2),var(--bg3)); border-bottom:1px solid var(--card-line); overflow:hidden}
.asset-thumb img{width:100%; height:100%; object-fit:cover}
.asset-thumb__fallback{height:100%; display:flex; align-items:center; justify-content:center; padding:22px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold-2) 16%, transparent),var(--bg2))}
.asset-thumb__fallback span{display:inline-flex; align-items:center; justify-content:center; min-width:74px; min-height:74px; border:1px solid var(--line);
  border-radius:999px; color:var(--gold-2); font-family:var(--serif2); font-size:18px}
.asset-card__body{display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:clamp(22px,2.6vw,32px); flex:1}
.asset-card__meta{display:flex; flex-wrap:wrap; gap:8px; min-height:25px}
.asset-card h2{font-size:clamp(24px,2.6vw,34px); line-height:1.05}
.asset-card p{color:var(--ink-2); font-family:var(--serif2); font-weight:300; font-size:17px; line-height:1.58; margin:0 0 8px}
.asset-card .btn{margin-top:auto}
.badge.soft{color:var(--ink-soft); border-color:var(--line)}
.gallery-download .asset-thumb{aspect-ratio:1}
.quiz-shell{max-width:900px; margin:0 auto}
.quiz-card{background:var(--card); border:1px solid var(--card-line); border-radius:8px; padding:clamp(26px,4vw,54px); box-shadow:var(--shadow)}
.quiz-card h2{font-size:clamp(34px,5vw,64px); line-height:1.05; margin:clamp(24px,4vh,42px) 0}
.quiz-progress{position:relative; display:flex; justify-content:space-between; gap:18px; min-height:36px; color:var(--ink-soft);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; border-bottom:1px solid var(--line); padding-bottom:18px}
.quiz-progress i{position:absolute; left:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--gold),var(--gold-2)); transition:width .35s var(--ease)}
.quiz-answers{display:grid; gap:12px}
.quiz-answer{width:100%; text-align:left; border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:8px;
  padding:18px 20px; font:700 16px/1.35 var(--sans); cursor:pointer; transition:.25s var(--ease)}
.quiz-answer:hover{border-color:var(--gold-2); background:color-mix(in srgb,var(--gold-2) 10%, transparent); transform:translateY(-2px)}
.quiz-result{text-align:center; display:flex; flex-direction:column; align-items:center}
.quiz-result__media{width:min(240px,64vw); margin:18px auto 8px; border:1px solid var(--card-line); border-radius:8px; overflow:hidden; box-shadow:var(--shadow)}
.quiz-result__media img{width:100%; aspect-ratio:.66; object-fit:cover}
.quiz-result .cta-stack{justify-content:center}
@media (max-width:900px){
  .quote-strip{grid-template-columns:1fr}
  .asset-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .asset-grid{grid-template-columns:1fr}
  .asset-toolbar{align-items:flex-start}
  .filter-pill{font-size:11px}
  .quote-strip blockquote,.page-quote blockquote{font-size:clamp(23px,8vw,34px)}
}

/* ===== BRAND SWITCH ===== */
.brand-switch{display:inline-flex; align-items:center; gap:4px; padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--panel)}
.brand-tab{min-height:28px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:5px 12px; border-radius:999px;
  font-size:10.5px; line-height:1; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); white-space:nowrap}
.brandtab-mark{width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; flex:none}
.brandtab-mark img{width:100%; height:100%; object-fit:contain}
.brand-tab:hover{color:var(--ink)}
.brand-tab.active{background:linear-gradient(180deg, var(--gold), var(--gold-2)); color:#221900; box-shadow:0 10px 24px -18px var(--gold-2)}

/* ===== SAMU LIND BRAND ===== */
html.dark body.brand-samu{
  --bg:#251713; --bg2:#331f18; --bg3:#493024; --panel:rgba(255,232,204,.07);
  --ink:#FFF4E7; --ink-2:#F4D9C3; --ink-soft:#CBA990; --line:rgba(246,185,59,.22);
  --gold:#D14E32; --gold-2:#F6B93B; --gold-deep:#8D321F; --sage:#82C7A5;
  --card:rgba(255,244,231,.062); --card-line:rgba(246,185,59,.22);
  --shadow:0 34px 80px -38px rgba(0,0,0,.75);
}
html.light body.brand-samu{
  --bg:#FFF8EF; --bg2:#FBE8D4; --bg3:#F6D4B4; --panel:rgba(209,78,50,.055);
  --ink:#352018; --ink-2:#664534; --ink-soft:#8F6C57; --line:rgba(209,78,50,.2);
  --gold:#D14E32; --gold-2:#F6B93B; --gold-deep:#9E3B25; --sage:#4B846D;
  --card:#FFFCF7; --card-line:rgba(209,78,50,.18);
  --shadow:0 34px 70px -42px rgba(87,47,24,.38);
}
body.brand-samu h1,body.brand-samu h2,body.brand-samu h3,body.brand-samu .brand,body.brand-samu .serif2{font-family:'Fredoka', var(--sans)}
body.brand-samu .brand{letter-spacing:.12em}
body.brand-samu .btn,body.brand-samu .pill,body.brand-samu .vol,body.brand-samu .teaser,body.brand-samu .rcell,body.brand-samu .news input,
body.brand-samu .samu-bird-card,body.brand-samu .promo-card,body.brand-samu .linktree-card,body.brand-samu .press-card{border-radius:18px}
body.brand-samu .btn-primary{color:#2b1608}
body.brand-samu .hero-vignette{box-shadow:inset 0 0 230px 52px rgba(80,30,10,.36)}

/* ===== BOOK DETAIL ===== */
.book-hero{display:grid; grid-template-columns:minmax(240px, .72fr) 1.15fr; gap:clamp(34px,6vw,86px); align-items:center}
.book-cover{max-width:410px; justify-self:center; border:1px solid var(--card-line); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); background:var(--bg2)}
.book-cover img{width:100%; aspect-ratio:.66; object-fit:cover}
.book-copy h1{font-size:clamp(42px,6vw,86px)}
.book-copy .lead{color:var(--ink-2); font-family:var(--serif2); font-weight:300; font-size:clamp(18px,2vw,24px); line-height:1.58; margin:22px 0 0}
.book-meta{display:flex; gap:9px; flex-wrap:wrap; margin:0 0 20px}
.ku-ribbon{display:inline-flex; align-items:center; gap:9px; padding:10px 15px; border:1px solid color-mix(in srgb,var(--sage) 54%, transparent);
  border-radius:999px; color:var(--sage); background:color-mix(in srgb,var(--sage) 10%, transparent); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:800}
.detail-grid{display:grid; grid-template-columns:1fr .72fr; gap:clamp(26px,4vw,54px); align-items:start}
.text-block{background:var(--card); border:1px solid var(--card-line); border-radius:8px; padding:clamp(24px,3vw,38px); box-shadow:var(--shadow)}
.text-block h2{font-size:clamp(30px,3.5vw,46px); margin-bottom:18px}
.text-block p,.text-block li{color:var(--ink-2); font-family:var(--serif2); font-weight:300}
.text-block p{margin:0 0 18px}
.clean-list{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.clean-list li{position:relative; padding-left:25px}
.clean-list li::before{content:''; position:absolute; left:0; top:.72em; width:8px; height:8px; border-radius:50%; background:var(--gold-2)}
.format-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.cta-stack{display:flex; flex-wrap:wrap; gap:13px; margin-top:28px}
.share-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.share-row .btn{min-height:44px; padding:12px 18px}
.related{display:grid; grid-template-columns:120px 1fr; gap:20px; align-items:center}
.related img{width:120px; border-radius:5px; border:1px solid var(--card-line); box-shadow:0 18px 42px -28px rgba(0,0,0,.65)}
.related h3{font-size:24px}

/* ===== SAMU LANDING ===== */
.samu-hero{padding:calc(var(--nav-h) + var(--top-h) + clamp(44px,8vh,86px)) 0 clamp(70px,9vh,118px); overflow:hidden; position:relative}
.samu-hero::before{content:''; position:absolute; inset:0; background:
  radial-gradient(70% 70% at 80% 14%, color-mix(in srgb,var(--gold-2) 22%, transparent), transparent 55%),
  linear-gradient(180deg, var(--bg), var(--bg2)); pointer-events:none}
.samu-hero .inner{position:relative; display:grid; grid-template-columns:1.02fr .88fr; gap:clamp(36px,6vw,90px); align-items:center}
.samu-hero h1{font-size:clamp(56px,10vw,130px); line-height:.88; text-transform:lowercase}
.samu-hero .tag{color:var(--ink-2); font-family:'Fredoka',var(--sans); font-size:clamp(18px,2vw,24px); line-height:1.55; max-width:42ch; margin:24px 0 0}
.samu-wordmark{display:inline-flex; align-items:center; gap:.6em; color:var(--gold); font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:12px; line-height:1.35; margin-bottom:18px; flex-wrap:wrap}
.samu-dots{display:inline-flex; align-items:center; gap:.35em; flex:none}
.samu-dot{width:12px; height:12px; border-radius:50%; flex:none}
.samu-dot.dot-yellow{background:var(--gold-2)}
.samu-dot.dot-red{background:var(--gold)}
.samu-dot.dot-green{background:var(--sage)}
.samu-bird-card{position:relative; min-height:430px; border:1px solid var(--card-line); background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--gold-2) 9%, transparent));
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; padding:clamp(18px,3vw,40px)}
.samu-bird-card img{width:min(100%,430px); filter:drop-shadow(0 24px 36px rgba(70,25,8,.22))}
.promo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px)}
.promo-card{background:var(--card); border:1px solid var(--card-line); padding:clamp(22px,2.8vw,34px); min-height:250px; box-shadow:var(--shadow)}
.promo-card h3{font-size:clamp(25px,2.7vw,36px)}
.promo-card p{color:var(--ink-2); font-family:'Fredoka',var(--sans); line-height:1.62}

/* ===== BLOG ===== */
.blog-shell{padding-top:clamp(64px,9vh,110px)}
.blog-status{color:var(--ink-soft); font-size:13px; letter-spacing:.12em; text-transform:uppercase}
.blog-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,32px)}
.blog-card{display:flex; flex-direction:column; align-items:flex-start; gap:14px; background:var(--card); border:1px solid var(--card-line);
  border-radius:8px; padding:clamp(24px,3vw,38px); min-height:280px; box-shadow:var(--shadow); transition:transform .38s var(--ease), border-color .32s var(--ease)}
.blog-card:hover{transform:translateY(-5px); border-color:var(--gold-2)}
.blog-card time,.blog-detail time{font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--gold-2)}
.blog-card h2{font-size:clamp(30px,3.6vw,48px); line-height:1.02}
.blog-card p{color:var(--ink-2); font-family:var(--serif2); font-weight:300; font-size:clamp(17px,1.7vw,20px); line-height:1.6; margin:0}
.blog-card .read-more{margin-top:auto; color:var(--gold-2); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:800}
.blog-detail{max-width:900px; background:var(--card); border:1px solid var(--card-line); border-radius:8px; padding:clamp(26px,4vw,54px); box-shadow:var(--shadow)}
.blog-detail .backlink,.blog-detail time{display:block}
.blog-detail h2{font-size:clamp(40px,6vw,78px); line-height:1; margin:14px 0 20px}
.blog-detail .lead{color:var(--ink-2); font-family:var(--serif2); font-weight:300; font-size:clamp(19px,2vw,24px); line-height:1.58; margin:0 0 30px}
.blog-body{display:grid; gap:18px; color:var(--ink-2); font-family:var(--serif2); font-weight:300; font-size:clamp(18px,1.75vw,21px); line-height:1.72}
.blog-body p{margin:0}

/* ===== LINKTREE + PRESS ===== */
.linktree-wrap{min-height:100svh; padding:calc(var(--nav-h) + var(--top-h) + 34px) 0 70px; display:flex; align-items:center}
.linktree-card{width:min(100%,620px); margin:0 auto; background:var(--card); border:1px solid var(--card-line); box-shadow:var(--shadow); padding:clamp(24px,4vw,42px); text-align:center}
.linktree-photo{width:118px; height:118px; border-radius:50%; object-fit:cover; margin:0 auto 18px; border:1px solid var(--card-line); box-shadow:0 18px 42px -24px rgba(0,0,0,.75)}
.linktree-card h1{font-size:clamp(34px,5vw,58px); line-height:1}
.linktree-card p{color:var(--ink-2); font-family:var(--serif2); margin:14px auto 24px; max-width:38ch}
.link-buttons{display:grid; gap:12px}
.link-buttons .btn{width:100%; justify-content:space-between; min-height:58px}
.press-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,70px); align-items:start}
.press-card{background:var(--card); border:1px solid var(--card-line); padding:clamp(24px,3vw,38px); box-shadow:var(--shadow)}
.press-photo{border-radius:8px; overflow:hidden; border:1px solid var(--card-line); box-shadow:var(--shadow); background:var(--bg2)}
.press-photo img{width:100%; aspect-ratio:.82; object-fit:cover}
.download-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px}
.download-tile{border:1px solid var(--card-line); border-radius:8px; padding:14px; background:var(--panel); transition:.25s}
.download-tile:hover{border-color:var(--gold-2); transform:translateY(-2px)}
.download-tile img{width:100%; aspect-ratio:.68; object-fit:cover; border-radius:4px; margin-bottom:10px}
.facts{display:grid; gap:10px; margin:0; padding:0}
.facts li{list-style:none; display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); padding:10px 0; color:var(--ink-2)}
.facts b{color:var(--ink)}

@media (max-width:1120px){
  .nav-links{gap:22px}
  .nav-links a{font-size:12px}
}
@media (max-width:900px){
  .book-hero,.detail-grid,.samu-hero .inner,.press-grid{grid-template-columns:1fr}
  .book-copy{order:-1}
  .promo-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .samu-bird-card{min-height:300px}
}
@media (max-width:700px){
  .tl-icons a:not(:first-child){display:none}
  .brand-tab{font-size:9.5px; padding:5px 9px; letter-spacing:.08em}
  .toplinks .wrap{gap:10px}
  .related{grid-template-columns:84px 1fr}
  .related img{width:84px}
  .download-grid{grid-template-columns:1fr}
  .linktree-wrap{align-items:flex-start}
}
@media (max-width:560px){
  .brand-switch{max-width:calc(100vw - 86px)}
  .brand-tab{flex:1}
  .tl-icons{width:auto; justify-content:flex-end}
  .book-cover{max-width:290px}
  .book-meta{gap:6px}
  .cta-stack .btn,.share-row .btn{width:100%}
  .samu-hero h1{font-size:clamp(50px,18vw,82px)}
}