/* ============================================================
   GastroVin · Studio Nian — design system
   Mörkt läge är grundton; ljust läge via [data-theme="light"].
   ============================================================ */

/* ---------- Fonter (självhostade) ---------- */
@font-face{font-family:'Shippori Mincho';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/shippori-mincho-400.woff2) format('woff2')}
@font-face{font-family:'Shippori Mincho';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/shippori-mincho-500.woff2) format('woff2')}
@font-face{font-family:'Shippori Mincho';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/shippori-mincho-600.woff2) format('woff2')}
/* Skrivmaskinsfonter för "Studio Nian". My Underwood (Michael Tension, fri för
   kommersiellt bruk + webbinbäddning, licens i MyUnderwood-LICENSE.txt) är
   identifierad som Nian-ordmärkets typsnitt; Special Elite är fallback. */
@font-face{font-family:'My Underwood';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/MyUnderwood.ttf) format('truetype')}
@font-face{font-family:'Special Elite';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/special-elite-400.woff2) format('woff2')}
/* Rock Salt = GastroVin-ordmärkets typsnitt (identifierat 2026-07-07, Apache 2.0,
   licens i RockSalt-LICENSE.txt). Används på sektionsrubrikerna (.bighead). */
@font-face{font-family:'Rock Salt';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rock-salt-400.woff2) format('woff2')}
/* Work Sans (OFL, licens i WorkSans-LICENSE.txt) = ersättarkandidat för Kents
   Shree Devanagari 714-önskan. Hämtas bara när ?font=worksans-växeln används. */
@font-face{font-family:'Work Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/work-sans-var.woff2) format('woff2-variations')}

/* ---------- Tokens ---------- */
:root{
  --bg:#101211; --bg2:#0d0f0e; --panel:#151817;
  --text:#b6c1bc;
  --text-soft:rgba(182,193,188,.78);
  --head:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.55);
  --line:rgba(182,193,188,.16);
  --line-strong:rgba(182,193,188,.32);
  --btn-line:rgba(255,255,255,.42);
  --nav-bg:rgba(16,18,17,.82);
  --img-filter:brightness(.78) saturate(.82) contrast(1.03);
  --img-filter-hover:brightness(.9) saturate(.9);
  --logo-invert:0;
  --maxw:1180px;
  /* Work Sans överallt sedan 2026-07-08 (Kents val, Shree 714-bytet fullbordat;
     kvar i egna typsnitt: Rock Salt-rubriker + My Underwood-typewritern).
     --mincho används fortfarande som token för statement-/rubriknivån. */
  --mincho:'Work Sans',system-ui,sans-serif;
  --sans:'Work Sans',system-ui,sans-serif;
  --hand:'Rock Salt','Shippori Mincho',serif;
}
[data-theme="light"]{
  --bg:#ECEAE3; --bg2:#E6E4DC; --panel:#E1DFD6;
  --text:#3F4741;
  --text-soft:rgba(63,71,65,.85);
  --head:rgba(18,21,19,.92);
  --muted:rgba(18,21,19,.55);
  --line:rgba(40,46,42,.16);
  --line-strong:rgba(40,46,42,.34);
  --btn-line:rgba(18,21,19,.45);
  --nav-bg:rgba(236,234,227,.86);
  --img-filter:brightness(.96) saturate(.9) contrast(1.01);
  --img-filter-hover:brightness(1) saturate(.95);
  --logo-invert:1;
}

/* ---------- Bas ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
section[id],main[id]{scroll-margin-top:70px}
body{
  background:var(--bg); color:var(--text-soft);
  /* 1.15rem = samma som Filosofi-texten (Sebastians önskemål 2026-07-07, tidigare 15px) */
  font-family:var(--sans); font-weight:300; font-size:1.15rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; letter-spacing:.015em;
  transition:background .5s ease, color .5s ease;
}
a{color:inherit; text-decoration:none}
img{display:block; width:100%; height:100%; object-fit:cover}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
.rule{height:1px; background:var(--line); border:0; width:100%}
.mt{margin-top:20px}
:focus-visible{outline:1px solid var(--head); outline-offset:4px}
::selection{background:rgba(182,193,188,.28); color:#fff}
[data-theme="light"] ::selection{background:rgba(40,46,42,.18); color:#111}

/* Mjuk övergång vid temabyte — klassen sätts tillfälligt av JS */
html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after{
  transition:background-color .5s ease, color .5s ease, border-color .5s ease, fill .5s ease !important}

.label{font-family:var(--sans); font-weight:400; font-size:.78rem; letter-spacing:.32em; text-transform:uppercase; color:var(--muted)}
h1,h2,h3{font-family:var(--mincho); font-weight:400; color:var(--head); letter-spacing:.01em; line-height:1.12}

.btn{
  display:inline-block; font-family:var(--sans); font-weight:400;
  font-size:.76rem; letter-spacing:.28em; text-transform:uppercase; color:var(--head);
  border:1px solid var(--btn-line); padding:18px 40px; transition:.45s ease; background:transparent;
}
.btn:hover{background:var(--head); color:var(--bg); border-color:var(--head)}

/* ---------- Nav ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:26px 40px; transition:padding .5s, background .5s; mix-blend-mode:difference}
/* iOS-fix: mix-blend-mode på position:fixed komposits långsamt i Safari och får
   naven att "släppa" vid snabb scroll. Blendningen behövs bara översta ~40px,
   så på touch-enheter körs normal blendning (vit text funkar över mörka heron). */
@media (pointer:coarse){
  .nav{mix-blend-mode:normal}
}
.nav.scrolled{mix-blend-mode:normal; background:var(--nav-bg); backdrop-filter:blur(12px); padding:18px 40px; border-bottom:1px solid var(--line)}
.nav-logo{height:26px; width:auto; display:block; transition:height .5s}
.nav.scrolled .nav-logo{height:22px}
.nav.scrolled .nav-logo{filter:invert(var(--logo-invert))}
.nav .links{display:flex; gap:38px}
.nav .links a,.nav .book,.tt-label{font-family:var(--sans); font-weight:400; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:#fff}
.nav.scrolled .links a,.nav.scrolled .book,.nav.scrolled .tt-label{color:var(--head)}
.nav .links a{opacity:.85; transition:opacity .3s;
  background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px;
  padding-bottom:4px; transition:opacity .3s, background-size .45s cubic-bezier(.2,.7,.2,1)}
.nav .links a:hover{opacity:1; background-size:100% 1px}
.nav-actions{display:flex; align-items:center; gap:22px}
.nav .book{border:1px solid rgba(255,255,255,.5); padding:10px 22px; transition:.3s}
.nav.scrolled .book{border-color:var(--btn-line)}
.nav.scrolled .book:hover{background:var(--head); color:var(--bg)}

/* Språkväxlare (SV/EN) */
.lang-switch{display:flex; gap:12px}
.lang-switch a{font-family:var(--sans); font-weight:400; font-size:.72rem; letter-spacing:.2em; color:#fff; opacity:.5; transition:opacity .3s; padding-bottom:3px}
.lang-switch a.active{opacity:1; border-bottom:1px solid currentColor}
.lang-switch a:hover{opacity:1}
.nav.scrolled .lang-switch a{color:var(--head)}
.om-lang{position:absolute; bottom:64px; left:34px; display:flex; gap:18px}
.om-lang a{font-size:.8rem; letter-spacing:.24em; color:var(--muted)}
.om-lang a.active{color:var(--head); border-bottom:1px solid var(--line-strong)}

.theme-toggle{display:flex; align-items:center; gap:9px; opacity:.85; transition:.3s}
.theme-toggle:hover{opacity:1}
.tt-disc{width:13px; height:13px; border-radius:50%; border:1px solid #fff; background:linear-gradient(90deg,#fff 50%,transparent 50%); transition:transform .5s ease}
.nav.scrolled .tt-disc{border-color:var(--head); background:linear-gradient(90deg,var(--head) 50%,transparent 50%)}
[data-theme="light"] .tt-disc{transform:rotate(180deg)}

.burger{display:none; flex-direction:column; gap:6px; padding:6px}
.burger span{display:block; width:24px; height:1px; background:#fff; transition:.4s}
.nav.scrolled .burger span{background:var(--head)}
.burger.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- Overlay-meny (mobil) ---------- */
.overlay-menu{position:fixed; inset:0; z-index:35; background:var(--bg2); display:flex; flex-direction:column; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s}
.overlay-menu.open{opacity:1; visibility:visible}
.om-inner{display:flex; flex-direction:column; gap:8px; padding:0 34px}
.om-inner a{font-family:var(--mincho); font-size:clamp(2rem,9vw,3rem); color:var(--head); padding:8px 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease}
.overlay-menu.open .om-inner a{opacity:1; transform:none}
.om-inner a:nth-child(1){transition-delay:.08s}.om-inner a:nth-child(2){transition-delay:.14s}
.om-inner a:nth-child(3){transition-delay:.2s}.om-inner a:nth-child(4){transition-delay:.26s}
.om-inner a:nth-child(5){transition-delay:.32s}.om-inner a:nth-child(6){transition-delay:.38s}
.om-foot{position:absolute; bottom:30px; left:34px; font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color:var(--muted)}

/* ---------- Hero (alltid mörk, fasta färger) ---------- */
.hero{min-height:100svh; position:relative; display:flex; align-items:center; isolation:isolate; overflow:hidden; background:#101211}
.hero-bg{position:absolute; inset:-12% 0; z-index:-2; will-change:transform}
/* Tallriken roterar sakta medsols. Kvadraten är större än viewport-diagonalen
   (135vmax) så hörnen aldrig blottas, och bilden är beskuren med tallrikens
   mitt i kvadratens mitt = rotationsaxeln. */
.hero-spin{position:absolute; top:50%; left:50%; width:135vmax; height:135vmax;
  animation:hero-rot 150s linear infinite; will-change:transform}
.hero-spin img{width:100%; height:100%; object-fit:cover; filter:brightness(.68) contrast(1.04) saturate(.8)}
@keyframes hero-rot{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(16,18,17,.72) 0%, rgba(16,18,17,.32) 45%, rgba(16,18,17,.08) 100%),
             linear-gradient(180deg, rgba(16,18,17,.28), rgba(16,18,17,.6))}
.hero .wrap{width:100%}
.hero-content{max-width:600px; padding-top:60px}
.hero-logo{width:clamp(260px,40vw,500px); height:auto; display:block; margin-bottom:6px}
.logo-h1 .sub{display:block; font-size:clamp(1.15rem,2.6vw + 0.6rem,2.6rem); font-family:'My Underwood','Special Elite','Courier New',monospace; font-weight:400; letter-spacing:.32em; color:#b6c1bc; margin-top:26px; padding-left:.4em; min-height:1.5em}
/* Typewriter: "Studio Nian" ritas in bokstav för bokstav i Nian-typsnittet.
   Careten ligger permanent i flödet (osynlig när den inte blinkar) så att
   raden inte byter höjd när skrivningen är klar. */
.logo-h1 .sub::after{content:""; display:inline-block; width:1px; height:1.05em; background:#b6c1bc; margin-left:4px; vertical-align:-.14em; opacity:0}
.logo-h1 .sub.typing::after{animation:tw-caret 1.05s steps(1) infinite}
@keyframes tw-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* Varje bokstav "ritas": tonar in ur oskärpa, sätter sig som bläck */
.logo-h1 .sub .tw-ch{display:inline-block; opacity:0; filter:blur(3px); transform:scale(1.15) rotate(1.5deg); animation:tw-ink .55s ease-out forwards}
@keyframes tw-ink{55%{opacity:1}100%{opacity:1; filter:blur(0); transform:none}}
@media(prefers-reduced-motion:reduce){.logo-h1 .sub .tw-ch{animation:none; opacity:1; filter:none; transform:none}}
.hero .quote{font-family:var(--mincho); font-style:italic; font-weight:400; font-size:1.15rem; color:#b6c1bc; line-height:1.7; max-width:42ch; margin:38px 0 46px}
.hero .by{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:42px}
.hero .hrule{width:100%; max-width:560px; height:1px; background:rgba(182,193,188,.32); margin:34px 0; transform-origin:left}
.hero .btn{color:#fff; border-color:rgba(255,255,255,.42)}
.hero .btn:hover{background:#fff; color:#101211; border-color:#fff}

/* Hero-intro: stegvis uppresning vid sidladdning */
.hl-1,.hl-2,.hl-3,.hl-4,.hl-5{opacity:0; animation:hup 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.hl-1{animation-delay:.15s}.hl-2{animation-delay:.4s; animation-name:hline}
.hl-3{animation-delay:.55s}.hl-4{animation-delay:.7s}.hl-5{animation-delay:.85s}
@keyframes hup{from{opacity:0; transform:translateY(30px)}to{opacity:1; transform:none}}
@keyframes hline{from{opacity:0; transform:scaleX(0)}to{opacity:1; transform:scaleX(1)}}

.vert,.vside{position:absolute; right:46px; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; font-family:var(--sans);
  font-size:.72rem; letter-spacing:.42em; text-transform:uppercase; color:var(--muted); z-index:3}
.hero .vert{color:rgba(255,255,255,.55)}
.vside{opacity:.6}
.vside-l{right:auto; left:40px}
/* Sidotexterna (lodräta etiketter) dolda på Kents begäran; markup + övrig stil kvar, ta bort raden för att återställa */
.vert,.vside{display:none}
.scrollcue{position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.55); display:flex; flex-direction:column; align-items:center; gap:12px}
.scrollcue i{width:1px; height:46px; background:linear-gradient(rgba(182,193,188,.6),transparent); animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- Sektioner ---------- */
.intro{padding:clamp(110px,18vh,200px) 0; position:relative}
.intro-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(44px,6vw,90px); align-items:center}
/* Naturligt bildformat (2026-07-07): Kents delfinbild är nästan kvadratisk;
   3:4-tvånget + den inbakade blur-utfyllnaden upplevdes som "svart bild bakom". */
.intro-media{overflow:hidden; background:var(--panel)}
.intro-media img{filter:var(--img-filter); transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s ease}
.intro-media:hover img{transform:scale(1.04); filter:var(--img-filter-hover)}
.intro .inner{max-width:640px}
.intro .label{display:block; margin-bottom:36px}
/* Filosofi: hela texten i samma storlek (Sebastians önskemål 2026-07-05) */
.intro-line,.intro-coda{font-family:var(--mincho); font-weight:400; font-size:1.15rem; line-height:1.9; color:var(--head); max-width:52ch}
.intro-coda{margin-top:26px; color:var(--text-soft)}

.block{padding:clamp(70px,10vh,120px) 0; position:relative}
/* Rubriker i logotypsnittet Rock Salt (test 2026-07-07). Rock Salt löper brett
   och bygger högt ovanför baslinjen — därav mindre maxstorlek än mincho-varianten.
   Halverad 2026-07-07 på Sebastians begäran. */
.bighead{font-family:var(--hand); font-size:clamp(1.1rem,2.75vw,2rem); font-weight:400; line-height:1.3; margin-bottom:6px}
.section-intro{max-width:52ch; margin:18px 0 44px; color:var(--text-soft); line-height:1.8}
.section-grid{display:grid; grid-template-columns:1fr 1.35fr; gap:60px; align-items:start; margin-top:40px}
.col-text h3{font-size:1.35rem; font-weight:500; margin-bottom:20px}
.col-text p{margin-bottom:16px; color:var(--text-soft); max-width:42ch}
.col-text .btn{margin-top:26px}
.head-right{text-align:right}

.single-exp{overflow:hidden; aspect-ratio:3/2}
.exp-list{list-style:none; margin:28px 0 4px; border-top:1px solid var(--line); max-width:44ch}
.exp-list li{display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:14px 2px; border-bottom:1px solid var(--line)}
.exp-list li span:first-child{font-family:var(--mincho); font-size:1.02rem; color:var(--head)}
.el-note{font-size:.8rem; letter-spacing:.08em; color:var(--muted); text-align:right; white-space:nowrap}
.single-exp img{filter:var(--img-filter); transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s ease}
.single-exp:hover img{transform:scale(1.04); filter:var(--img-filter-hover)}

.media-split{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; margin-top:40px}
.media-split .m{overflow:hidden; min-height:520px}
.media-split .m img{filter:brightness(.6) saturate(.78) contrast(1.05); transition:transform 1.2s ease}
[data-theme="light"] .media-split .m img{filter:brightness(.85) saturate(.85) contrast(1.03)}
.media-split:hover .m img{transform:scale(1.04)}
/* Källaren: DRC-bilden lika hög som texten bredvid (Kents "mer samlat") */
#kallaren .media-split .m{min-height:0; position:relative}
/* 50% 80%: fönstret nedskjutet så DRC-etiketten syns hel (Kents önskemål 2026-07-07) */
#kallaren .media-split .m img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 80%; display:block}
#kallaren .media-split .t,#lokaler .media-split .t{border:0}
.media-split .t{padding:clamp(34px,5vw,68px); display:flex; flex-direction:column; justify-content:center; border:1px solid var(--line); border-left:0}
.media-split .t h3{font-size:1.4rem; font-weight:500; margin:16px 0 18px}
.media-split .t p{margin-bottom:14px; color:var(--text-soft)}
.metarow{display:flex; gap:30px; margin-top:30px; flex-wrap:wrap}
.metarow .mi .k{font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.metarow .mi .v{font-family:var(--mincho); font-size:1rem; color:var(--text)}

.statement{padding:clamp(120px,20vh,220px) 0; text-align:center}
.statement p{font-family:var(--mincho); font-weight:400; font-size:clamp(1.4rem,3.6vw,2.6rem); line-height:1.3; color:var(--head); max-width:20ch; margin:0 auto}
.statement p em{font-style:italic; color:var(--text)}
/* Rock Salt på catering-statementet testades 2026-07-07 och byttes tillbaka samma dag
   ("typsnittet passar inte här") — statements förblir mincho. */
.statement .label{display:block; margin-bottom:40px}
/* Explicit storlek: .statement p-regeln (clamp) vinner annars när storleken utelämnas */
.statement .statement-sub{font-family:var(--sans); font-size:1.15rem; color:var(--muted); max-width:44ch; margin:34px auto 0; line-height:1.8}

/* ---------- Lokal-lista ----------
   Yttre grid + subgrid på raderna: kolumnstarterna delas mellan alla rader
   (utan subgrid får varje rad egen auto-kolumn och texterna hamnar ojämnt). */
.venues{margin-top:70px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1.6fr auto; column-gap:34px}
.venue{grid-column:1/-1; display:grid; grid-template-columns:1fr 1.6fr auto; gap:34px; padding:32px 0; border-bottom:1px solid var(--line); align-items:baseline}
@supports (grid-template-columns: subgrid){
  .venue{grid-template-columns:subgrid; column-gap:34px}
}
.venue h3{font-size:1.45rem; font-weight:500}
.venue p{color:var(--text-soft); max-width:52ch}
.v-meta{font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); white-space:nowrap}

/* Familjen: click-to-expand (rubrik + intro synliga, familjelistan fälls ut på klick).
   Linjefri sedan 2026-07-07; plusset ligger direkt intill summary-texten. */
.fam-expand{margin-top:-14px}
.fam-expand>summary{display:flex; justify-content:flex-start; align-items:center; gap:14px; padding:4px 2px 22px; cursor:pointer; list-style:none}
.fam-expand>summary::-webkit-details-marker{display:none}
.fam-expand-label{font-family:var(--mincho); font-size:1.08rem; color:var(--head); transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.fam-expand>summary:hover .fam-expand-label{transform:translateX(8px)}
.fam-expand-mark{position:relative; width:13px; height:13px; flex:0 0 auto; opacity:.6}
.fam-expand-mark::before,.fam-expand-mark::after{content:""; position:absolute; background:var(--head); transition:transform .35s ease}
.fam-expand-mark::before{left:0; right:0; top:6px; height:1px}
.fam-expand-mark::after{top:0; bottom:0; left:6px; width:1px}
.fam-expand[open] .fam-expand-mark::after{transform:scaleY(0)}
.fam-expand .venues{margin-top:0; border-top:0}
.fam-expand .venue{border-bottom:0}

/* Klickbara lokaler: flikrad (samma stil som menyflikarna) växlar panelen under */
.media-split.venue-panel{display:none}
.media-split.venue-panel.active{display:grid}
.venue-panel.fade-in{animation:mfade .6s ease}
/* Ingen helbreddslinje under lokalflikarna; aktiv fliks understrykning behålls.
   Dubbelklass krävs: .menu-tabs-regeln ligger senare i filen och vinner annars. */
.menu-tabs.venue-tabs{margin-top:18px; border-bottom:0}
/* Fast bildhöjd så flikrad + hel panel ryms i en laptopvy; bilden beskärs med cover */
.media-split.venue-panel .m{height:clamp(440px,64vh,620px); min-height:0}
.media-split.venue-panel .t{padding:clamp(28px,4vw,50px)}

/* ---------- Meny ---------- */
.menu-layout{display:grid; grid-template-columns:1fr 1fr; gap:clamp(44px,6vw,90px); align-items:start}
.menu-media{position:sticky; top:110px; aspect-ratio:3/4.1; overflow:hidden; background:var(--panel)}
.menu-media .mm-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:var(--img-filter);
  opacity:0; transform:scale(1.07); transition:opacity .9s ease, transform 1.4s cubic-bezier(.2,.7,.2,1)}
.menu-media .mm-img.active{opacity:1; transform:scale(1)}
#meny .bighead{margin-bottom:14px}
/* Ingen helbreddslinje under flikraderna (2026-07-07); aktiv flik behåller sin understrykning */
.menu-tabs{display:flex; gap:34px; flex-wrap:wrap; margin:0 0 50px}
.menu-tab{padding:0 2px 16px; font-size:.78rem; font-weight:400; letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid transparent; margin-bottom:-1px; transition:color .3s, border-color .3s}
.menu-tab:hover{color:var(--head)}
.menu-tab.active{color:var(--head); border-bottom-color:var(--head)}
.menu-panel{max-width:720px}
@media(min-width:1025px){.menu-panel{max-width:none}}
.menu-panel.fade-in{animation:mfade .6s ease}
@keyframes mfade{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.menu-section-head{font-size:1.05rem; font-weight:500; letter-spacing:.06em; margin:36px 0 8px}
.menu-section-head:first-child{margin-top:0}
.menu-rows{border-top:1px solid var(--line)}
.mrow{padding:14px 0; border-bottom:1px solid var(--line)}
/* Menyflikarna: linjefri presentation, sektioner som spärrade småetiketter
   (Sebastians beslut 2026-07-05 efter stagingtest) */
.menu-main .menu-rows{border-top:0}
.menu-main .mrow{border-bottom:0; padding:9px 0}
.menu-main .menu-section-head{font-family:var(--sans); font-size:.78rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin:44px 0 14px}
.menu-main .menu-section-head:first-child{margin-top:0}
.menu-main .mrow .dish{font-size:1.12rem}
.menu-main .mrow .mdesc{margin-top:2px}
.mrow-head{display:flex; align-items:baseline; justify-content:space-between; gap:24px}
/* Ingen hover på meny-/meritrader (borttagen 2026-07-07): raderna är inte
   klickbara. FAQ-radernas glid finns kvar separat — de ÄR klickbara. */
.mrow .dish{font-family:var(--mincho); font-size:1.08rem; color:var(--head); display:inline-block}
.mrow .price{font-family:var(--sans); font-size:.8rem; letter-spacing:.14em; color:var(--muted); white-space:nowrap}
.mrow .mdesc{margin-top:4px; font-size:.85rem; color:var(--text-soft); font-style:italic; font-weight:300; max-width:52ch}
.menu-tabs{margin-bottom:36px}
.menu-print-link{margin-top:40px; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase}
.menu-print-link a{color:var(--muted); border-bottom:1px solid var(--line-strong); padding-bottom:2px; transition:color .3s, border-color .3s}
.menu-print-link a:hover{color:var(--head); border-color:var(--head)}

.admin-hint{border:1px dashed var(--line-strong); padding:26px; font-size:.85rem; color:var(--muted)}
.admin-hint a{text-decoration:underline}

/* Kommande kvällar: kalenderblad (dag stor + månad spärrad) */
.events-block{padding:clamp(50px,7vh,80px) 0}
.ev-list{margin-top:36px}
.ev-row{display:grid; grid-template-columns:auto 1fr auto; gap:0 clamp(28px,4vw,52px); align-items:center; padding:10px 0}
.ev-cal{display:flex; flex-direction:column; align-items:center; min-width:86px; padding:10px 26px 12px 2px; border-right:1px solid var(--line-strong)}
.ev-day{font-family:var(--mincho); font-size:2.7rem; line-height:1; color:var(--head)}
.ev-mon{font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin-top:8px; padding-left:.34em}
.ev-main{display:flex; flex-direction:column; gap:7px}
.ev-title{font-family:var(--mincho); display:inline-block; font-size:1.35rem; color:var(--head); transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.ev-row:hover .ev-title{transform:translateX(8px)}
.ev-place{font-size:.78rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted)}
.ev-side{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.ev-few{font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:#c9a35f}
.ev-full{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.ev-wl-toggle{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text); border-bottom:1px solid var(--line-strong); padding-bottom:2px; transition:color .3s; cursor:pointer; margin-top:4px}
.ev-wl-toggle:hover{color:var(--head)}
.ev-wl-form{display:flex; gap:16px; align-items:flex-end; max-width:460px; margin:6px 0 18px auto; padding-left:114px}
.ev-wl-form[hidden]{display:none}
.ev-wl-form input[type=email]{flex:1; background:transparent; border:0; border-bottom:1px solid var(--line-strong); color:var(--head); font-family:var(--sans); font-weight:300; font-size:.95rem; padding:6px 2px 9px; border-radius:0}
.ev-wl-form input[type=email]:focus{outline:none; border-bottom-color:var(--head)}
.ev-wl-form .btn{padding:11px 22px; font-size:.68rem}
.ev-wl-status{font-size:.8rem; color:var(--text)}
.ev-wl-done{font-family:var(--mincho); font-size:1rem; color:var(--head)}
.ev-book{align-self:center; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text); border-bottom:1px solid var(--line-strong); padding-bottom:2px; transition:color .3s, border-color .3s; white-space:nowrap}
.ev-book:hover{color:var(--head); border-color:var(--head)}

/* FAQ: accordion i menyradstil (native details/summary) */
.faq-list{border-top:1px solid var(--line); max-width:760px; margin-top:34px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:18px 2px; cursor:pointer; list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .dish{font-family:var(--mincho); font-size:1.05rem; color:var(--head); transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.faq-item summary:hover .dish{transform:translateX(8px)}
.faq-mark{position:relative; width:13px; height:13px; flex:0 0 auto; opacity:.6}
.faq-mark::before,.faq-mark::after{content:""; position:absolute; background:var(--head); transition:transform .35s ease}
.faq-mark::before{left:0; right:0; top:6px; height:1px}
.faq-mark::after{top:0; bottom:0; left:6px; width:1px}
.faq-item[open] .faq-mark::after{transform:scaleY(0)}
.faq-answer{padding:0 2px 20px; max-width:58ch; line-height:1.85; color:var(--text-soft)}
.faq-answer a{border-bottom:1px solid var(--line-strong); padding-bottom:1px; transition:color .3s}
.faq-answer a:hover{color:var(--head)}

.statement-cta{margin-top:40px}

/* Grundaren: tre lika kolumner (bild, text, meriter) */
.founder-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:clamp(30px,4vw,60px); align-items:start; margin-top:18px}
.founder-grid-minna{margin-top:clamp(60px,8vh,100px)}
.founder-media{aspect-ratio:3/4; overflow:hidden; background:var(--panel)}
.founder-media img{filter:var(--img-filter) grayscale(1); transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s ease}
.founder-media:hover img{transform:scale(1.03); filter:var(--img-filter-hover) grayscale(1)}
.founder-text h3{font-size:1.35rem; font-weight:500; margin:14px 0 20px}
.founder-text p{margin-bottom:16px; color:var(--text-soft)}
.founder-merits-col .label{display:block; margin-bottom:16px}
.founder-merits{margin-top:0}
.founder-merits .dish{font-size:.92rem; line-height:1.5}

/* Kurspresentation i menyfliken: platstexter + teman */
/* Menyns infotext (Info-cellen i Excelfilen), t.ex. Studio M-presentationen */
.menu-info{margin-top:48px; max-width:58ch}
.menu-info p{margin:0 0 14px; line-height:1.85; color:var(--text-soft)}
.menu-info .menu-section-head{margin:36px 0 10px}
.menu-info .menu-section-head:first-child{margin-top:0}

/* ---------- Menypris (Studio Nian) ---------- */
.menu-pricing{margin-top:72px; max-width:520px}
.menu-pricing .label{display:block; margin-bottom:20px}
.mp-rows{list-style:none; border-top:1px solid var(--line)}
.mp-rows li{display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:13px 2px; border-bottom:1px solid var(--line)}
.mp-rows li span:first-child{font-family:var(--mincho); font-size:1.02rem; color:var(--head)}
.mp-price{font-family:var(--sans); font-size:.8rem; letter-spacing:.14em; color:var(--muted); white-space:nowrap}
.mp-note{margin-top:18px; font-size:.8rem; color:var(--muted); line-height:1.75}
.mp-note a{border-bottom:1px solid var(--line-strong); padding-bottom:1px; transition:color .3s, border-color .3s}
.mp-note a:hover{color:var(--head); border-color:var(--head)}

/* ---------- Mellanspel (full-bleed parallaxband) ---------- */
.interlude{position:relative; height:clamp(420px,66vh,720px); overflow:hidden; display:flex; align-items:flex-end; isolation:isolate}
.interlude-bg{position:absolute; inset:-14% 0; z-index:-1; will-change:transform}
.interlude-bg img{width:100%; height:100%; object-fit:cover; filter:brightness(.48) saturate(.75) contrast(1.05)}
.interlude::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 72%, var(--bg) 100%)}
.interlude .wrap{width:100%; padding-bottom:clamp(50px,9vh,110px)}
.interlude-line{font-family:var(--mincho); font-weight:400; font-size:clamp(1.5rem,3.4vw,2.6rem); line-height:1.35; color:rgba(255,255,255,.92); max-width:22ch}

/* ---------- Teamet ---------- */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:44px 34px; margin-top:30px}
.tc-media{aspect-ratio:3/4; overflow:hidden; background:var(--panel); margin-bottom:22px}
.tc-media img{filter:grayscale(.35) brightness(.82) contrast(1.04); transition:filter .7s ease, transform 1s ease}
[data-theme="light"] .tc-media img{filter:grayscale(.35) brightness(.98) contrast(1.02)}
.team-card:hover .tc-media img{filter:grayscale(0) brightness(.92); transform:scale(1.03)}
.tc-placeholder{width:100%; height:100%; display:flex; align-items:center; justify-content:center; border:1px solid var(--line)}
.tc-placeholder span{font-family:var(--mincho); font-size:4rem; color:var(--line-strong)}
.tc-role{font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.tc-name{font-size:1.3rem; font-weight:500; margin-bottom:12px}
.tc-bio{font-size:.9rem; color:var(--text-soft); line-height:1.75}
.tc-bio p{margin-bottom:10px}
.tc-skills{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.tc-skills span{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:6px 12px}

/* ---------- Bokning ---------- */
.booking-block{position:relative}
.booking-layout{display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(44px,6vw,100px); align-items:start; margin-top:44px}
.bi-lead{font-family:var(--mincho); font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.6; color:var(--head); max-width:26ch}
.bi-steps{list-style:none; margin-top:36px; border-top:1px solid var(--line)}
.bi-steps li{display:flex; gap:20px; padding:18px 2px; border-bottom:1px solid var(--line)}
.bi-steps .n{font-family:var(--mincho); font-size:1.25rem; color:var(--muted); line-height:1.4}
.bi-steps strong{display:inline-block; font-weight:400; font-family:var(--mincho); font-size:1.02rem; color:var(--head); margin-bottom:2px}
.bi-steps div{font-size:.86rem; line-height:1.65; color:var(--text-soft)}
.bi-direct{margin-top:36px}
.bi-h{font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.bi-direct a{color:var(--text); border-bottom:1px solid var(--line-strong); padding-bottom:2px; transition:color .3s, border-color .3s}
.bi-direct a:hover{color:var(--head); border-color:var(--head)}
.booking-form{margin-top:0}
.booking-event-chip{display:flex; align-items:baseline; gap:14px; border:1px solid var(--line-strong); padding:16px 20px; margin-bottom:34px}
.booking-event-chip[hidden]{display:none}
.booking-event-chip .bec-h{font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.booking-event-chip .bec-label{font-family:var(--mincho); font-size:1.02rem; color:var(--head); flex:1}
.booking-event-chip .bec-x{font-size:1.1rem; color:var(--muted); line-height:1; padding:0 2px; transition:color .3s}
.booking-event-chip .bec-x:hover{color:var(--head)}
.bf-grid{display:grid; grid-template-columns:1fr 1fr; gap:34px 44px}
.bf-wide{grid-column:1/-1}
.bf-field label{display:block; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.bf-field input,.bf-field select,.bf-field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-strong);
  color:var(--head); font-family:var(--sans); font-weight:300; font-size:1rem; padding:8px 2px 12px;
  transition:border-color .3s; border-radius:0; appearance:none; -webkit-appearance:none;
}
.bf-field select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size:5px 5px; background-repeat:no-repeat}
.bf-field select option{background:var(--bg); color:var(--text)}
.bf-field input:focus,.bf-field select:focus,.bf-field textarea:focus{outline:none; border-bottom-color:var(--head)}
.bf-field input::placeholder,.bf-field textarea::placeholder{color:var(--muted)}
.bf-field textarea{resize:vertical; min-height:90px}
.bf-hp{position:absolute; left:-9999px; top:auto}

/* Gäst-stepper: − siffra + på fältets underlinje, inga native spinners */
.bf-stepper{display:flex; align-items:stretch; border-bottom:1px solid var(--line-strong); transition:border-color .3s}
.bf-stepper:focus-within{border-bottom-color:var(--head)}
.bf-stepper input{flex:1; text-align:center; border-bottom:0 !important; -moz-appearance:textfield; appearance:textfield; font-size:1.35rem; font-family:var(--mincho); color:var(--head)}
.bf-stepper input::-webkit-outer-spin-button,.bf-stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.bfs-btn{width:46px; font-family:var(--sans); font-size:1.25rem; font-weight:300; color:var(--muted); transition:color .3s; line-height:1}
.bfs-btn:hover{color:var(--head)}
.bf-actions{display:flex; align-items:center; gap:30px; flex-wrap:wrap; margin-top:46px}
.bf-note{font-size:.78rem; color:var(--muted); max-width:34ch; line-height:1.6}
.bf-status{margin-top:22px; font-size:.85rem; color:var(--text)}
.bf-status.err{color:#c98f8f}
.booking-done{padding:60px 0 20px; max-width:640px}
.bd-head{font-family:var(--mincho); font-size:clamp(1.6rem,3.4vw,2.4rem); color:var(--head); margin-bottom:16px}
.bd-sub{color:var(--text-soft)}

/* ---------- Nyhetsbrev ---------- */
.newsletter-block .nl-lead{font-family:var(--mincho); font-weight:400; font-size:1.15rem; line-height:1.75; color:var(--head); max-width:50ch; margin:26px 0 44px}
.nl-form{max-width:560px}
.nl-row{display:flex; gap:22px; align-items:flex-end}
.nl-row input{flex:1; background:transparent; border:0; border-bottom:1px solid var(--line-strong); color:var(--head);
  font-family:var(--sans); font-weight:300; font-size:1rem; padding:8px 2px 12px; border-radius:0; appearance:none; -webkit-appearance:none}
.nl-row input:focus{outline:none; border-bottom-color:var(--head)}
.nl-row input::placeholder{color:var(--muted)}
.nl-row .btn{padding:16px 32px; white-space:nowrap}
.nl-note{margin-top:20px; font-size:.8rem; color:var(--muted); line-height:1.75; max-width:52ch}
.nl-note a{border-bottom:1px solid var(--line-strong); padding-bottom:1px; transition:color .3s, border-color .3s}
.nl-note a:hover{color:var(--head); border-color:var(--head)}
.nl-done{font-family:var(--mincho); font-size:1.25rem; color:var(--head); margin-top:26px}

/* ---------- Undersidor ---------- */
.page-single{padding:clamp(140px,20vh,200px) 0 90px}
.page-head .label{display:block; margin-bottom:22px}
.page-title{font-size:clamp(2.2rem,5vw,3.6rem); margin-bottom:54px}
.page-body{max-width:68ch; color:var(--text-soft); line-height:1.85}
.page-body h2{font-size:1.5rem; font-weight:500; margin:52px 0 18px}
.page-body h3{font-size:1.12rem; font-weight:500; margin:36px 0 12px}
.page-body p{margin-bottom:16px}
.page-body ul,.page-body ol{margin:0 0 18px 20px}
.page-body li{margin-bottom:8px}
.page-body a{border-bottom:1px solid var(--line-strong); padding-bottom:1px; transition:color .3s, border-color .3s}
.page-body a:hover{color:var(--head); border-color:var(--head)}
.page-body hr{border:0; height:1px; background:var(--line); margin:52px 0}

/* 404 */
.err404{text-align:center}
.e404-code{font-family:'My Underwood','Special Elite',monospace; font-size:clamp(4rem,12vw,8rem); color:var(--head); letter-spacing:.2em; margin-bottom:10px}
.err404 .page-title{margin-bottom:20px}
.e404-sub{color:var(--muted); margin-bottom:44px}
.err404 .page-title,.err404 .e404-sub{margin-left:auto; margin-right:auto}

/* ---------- Kontakt / footer ---------- */
.contact{padding:clamp(80px,12vh,140px) 0 0}
.contact .bighead{margin-bottom:60px}
.cgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:18px}
.cgrid .h{font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-bottom:20px}
.cgrid a,.cgrid p{display:block; color:var(--text); margin-bottom:10px; font-size:.95rem; transition:color .3s}
.cgrid a:hover{color:var(--head)}
/* Karta: självhostad statisk OSM-bild (inga cookies). Underlaget (2339x2660)
   täcker Stockholms-adresserna med marginal för BÅDE desktopvyerna (1400x488)
   och mobilens kvadratvyer (1400x1400) centrerade på varje adress;
   .map-pan translatas vid klick på adresslänkarna (värden ur ref/make-karta.py). */
.contact-map{display:block; margin-top:70px}
.map-frame{display:block; position:relative; overflow:hidden; aspect-ratio:1400/488}
.map-pan{display:block; position:relative; width:167.071%; transform:translate(-40.139%,-64.506%); transition:transform 1.6s cubic-bezier(.22,.61,.36,1); will-change:transform}
.map-pan img{width:100%; height:auto; display:block; opacity:.85; transition:opacity .4s ease}
.map-frame:hover img{opacity:1}
[data-theme="light"] .map-pan img{filter:invert(1) brightness(1.05); opacity:.9}
/* Blippande markörer. Prick och pulsringar har olika perioder + delay,
   och Roslagsgatan ligger extra förskjuten — medvetet lite i ofas. */
/* Bara den valda adressens ping visas (.on sätts av kartsvep-JS:et) */
.map-ping{position:absolute; display:none; width:12.5px; height:12.5px; margin:-6.25px 0 0 -6.25px; border-radius:50%; background:#ff3524; box-shadow:0 0 10px rgba(255,53,36,.7); animation:mp-dot 1.9s ease-in-out infinite}
.map-ping.on{display:block}
.map-ping::before,.map-ping::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:1px solid rgba(255,53,36,.8); animation:mp-ring 2.6s ease-out infinite}
.map-ping::after{animation-delay:1s}
.mp-sib{left:70.067%; top:73.679%}
.mp-ros{left:29.927%; top:26.316%; animation-delay:.7s}
.mp-ros::before{animation-delay:.4s}
.mp-ros::after{animation-delay:1.4s}
.mp-kry{left:64.739%; top:66.403%; animation-delay:1.2s}
.mp-kry::before{animation-delay:.8s}
.mp-kry::after{animation-delay:1.8s}
.mp-ciel{left:50%; top:50%; animation-delay:.3s}
/* Villa Ciel: Provence ligger inte i svep-underlaget — egen vy som tonas in */
.map-vence{position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .9s ease}
.map-vence.active{opacity:1}
.map-vence img{width:100%; height:100%; object-fit:cover; display:block; opacity:.85}
[data-theme="light"] .map-vence img{filter:invert(1) brightness(1.05); opacity:.9}
@keyframes mp-dot{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes mp-ring{0%{transform:scale(.35); opacity:.9}70%{opacity:.15}100%{transform:scale(2.7); opacity:0}}
@media (prefers-reduced-motion: reduce){
  .map-ping{animation:none}
  .map-ping::before,.map-ping::after{animation:none; opacity:.4}
  .map-pan{transition:none}
}
.cm-caption{display:block; margin-top:14px; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.cm-caption em{font-style:normal; float:right; letter-spacing:.06em; text-transform:none; opacity:.7}
.cm-locs{display:flex; gap:26px; flex-wrap:wrap; align-items:baseline}
/* Öppna-länken + OSM-attributionen på samma rad under adresserna */
.cm-openrow{display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-top:12px}
.cm-openrow em{float:none}
.cm-loc{font-size:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--muted); padding-bottom:3px; border-bottom:1px solid transparent; transition:color .3s, border-color .3s}
.cm-loc:hover,#gv-map-open:hover{color:var(--head)}
.cm-loc.active{color:var(--head); border-bottom-color:var(--line-strong)}
#gv-map-open{color:var(--muted); transition:color .3s}

.foot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:50px 0 18px; margin-top:80px; border-top:1px solid var(--line); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.foot a,.foot-links a{transition:color .3s}
.foot a:hover,.foot-links a:hover{color:var(--head)}
/* Egen rad längst ner i footern */
.foot-links{display:flex; gap:26px; flex-wrap:wrap; padding:0 0 44px; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

/* ---------- Scrollrörelse ----------
   Allt döljande ligger bakom .js-klassen — utan JS är innehållet synligt. */
.js .rv{opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1; transform:none}
.js .rv-line{transform:scaleX(0); transform-origin:left; transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.js .rv-line.in{transform:scaleX(1)}
.js .mrow.rv{transition-delay:calc(var(--stagger,0)*90ms)}
.js .team-card.rv{transition-delay:calc(var(--stagger,0)*120ms)}
[data-plx]{will-change:transform}

/* Rubriker: bokstäver reser sig ur baslinjen.
   padding-bottom ger plats åt Shipporis nedstaplar (g, p) innanför masken. */
.js .bh{overflow:hidden; padding-bottom:.18em; margin-bottom:-.12em}
.js .bh .ch{display:inline-block; transform:translateY(130%); transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i)*42ms); will-change:transform}
.js .bh.in .ch{transform:none}

/* Statement: ord för ord */
.js .st-line .st-w{display:inline-block; opacity:0; transform:translateY(26px); transition:opacity .7s ease calc(var(--i)*80ms), transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--i)*80ms)}
.js .st-line.in .st-w{opacity:1; transform:none}

/* Bilder: clip-reveal nedifrån + inre zoom-ut.
   OBS: clip ligger på img/innerlådan, inte containern — en helt clippad
   container får intersection-yta 0 och IO triggar aldrig. */
.js .irv img,.js .irv .tc-placeholder{clip-path:inset(100% 0 0 0)}
.js .irv img{transform:scale(1.16)}
.js .irv.in img,.js .irv.in .tc-placeholder{clip-path:inset(0 0 0 0); transition:clip-path 1.2s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s ease}
.js .irv.in img{transform:scale(1)}
.imgrow .f.irv img,.tc-media.irv img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s ease}
.media-split .m.irv img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
/* Källaren-DRC: "mörkrumsframkallning" (Sebastian 2026-07-07) — det svartvita
   flaskfotot ligger underexponerat och osskarpt som ett fotopapper i framkallnings-
   badet och framkallas långsamt när det scrollas in. Ersätter klipp-revealen
   (clip-path:none i båda lägena); .irv behålls för IO-observern (.in). */
.js .m.dev img{clip-path:none; transform:scale(1.045);
  filter:brightness(.14) contrast(.68) blur(8px)}
.js .m.dev.in img{clip-path:none; transform:scale(1);
  filter:brightness(1) contrast(1) blur(0);
  transition:filter 2.8s cubic-bezier(.3,.55,.25,1), transform 3.4s cubic-bezier(.2,.7,.2,1)}
/* Källarlapp på DRC:n (Sebastians val 2026-07-08 bland 4 testvarianter,
   eess.se/temp/drc-hover.html): handskriven lapp tonar in vid hover (desktop)
   eller tap (.lapp-on via JS på touch); bilden mörknar via ::after-overlay
   i stället för filter — undviker krock med framkallningens 2.8s filter-transition. */
#kallaren .media-split .m::after{content:""; position:absolute; inset:0; z-index:1;
  background:rgba(10,12,11,.45); opacity:0; transition:opacity .8s ease; pointer-events:none}
#kallaren .media-split:hover .m::after,#kallaren .media-split .m.lapp-on::after{opacity:1}
.drc-lapp{position:absolute; left:22px; bottom:22px; z-index:2; max-width:75%; padding:14px 20px;
  background:rgba(16,18,17,.55); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:'My Underwood','Special Elite','Courier New',monospace; font-size:1.02rem;
  line-height:1.5; color:rgba(255,255,255,.9); pointer-events:none;
  opacity:0; transform:translateY(14px) rotate(-1.2deg);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
#kallaren .media-split:hover .drc-lapp,#kallaren .m.lapp-on .drc-lapp{opacity:1; transform:translateY(0) rotate(-1.2deg)}
.drc-lapp small{display:block; font-size:.78rem; color:rgba(255,255,255,.55); margin-top:4px}

/* Scrollprogress under nav */
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:45; background:var(--head); transform-origin:left; transform:scaleX(0); pointer-events:none}

/* Lenis */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- Responsivt ---------- */
@media(max-width:1024px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .menu-layout{grid-template-columns:1fr}
  .menu-media{display:none}
}
@media(max-width:860px){
  .nav .links{display:none}
  .nav{padding:20px 22px}
  .nav .book{display:none}
  .burger{display:flex}
  .section-grid,.section-grid.right{grid-template-columns:1fr; gap:30px}
  .intro-grid{grid-template-columns:1fr; gap:36px}
  .founder-grid{grid-template-columns:1fr; gap:36px}
  .lang-switch{display:none}
  .head-right{text-align:left}
  .media-split{grid-template-columns:1fr}
  .media-split .t{border-left:1px solid var(--line); border-top:0}
  .media-split .m{min-height:360px}
  .media-split.venue-panel .m{height:auto; min-height:360px; max-height:52vh}
  /* Källaren-DRC:n kollapsade till 0 på mobil: absolut-positionerad img (iter 17)
     + min-height:0 ger ingen höjd när kolumnerna staplas — ge bildytan eget format */
  #kallaren .media-split .m{aspect-ratio:4/5}
  .cgrid{grid-template-columns:1fr}
  .vert,.vside{display:none}
  .scrollcue{display:none}
  /* Större Studio Nian på mobil/läsplatta (Sebastians önskemål 2026-07-07) */
  .logo-h1 .sub{font-size:clamp(1.8rem,5vw,2.4rem); letter-spacing:.2em}
  .bf-grid{grid-template-columns:1fr; gap:28px}
  .team-grid{grid-template-columns:1fr; gap:40px}
  .menu-tabs{gap:22px}
  /* Menyflikarna en per rad på mobil (Sebastian 2026-07-07); lokalflikarna behåller radflödet */
  .menu-tabs:not(.venue-tabs){flex-direction:column; align-items:flex-start; gap:16px}
  .menu-tabs:not(.venue-tabs) .menu-tab{padding-bottom:10px}
  /* Kvadratisk karta (Sebastian 2026-07-07): samma zoom, fönstret 1400x1400,
     markören CENTRERAD (underlaget har marginal för det sedan 2026-07-07 kväll).
     Vyvärden ur ref/make-karta.py, JS har samma tabell (MAP_VIEWS_SQ i main.js). */
  .map-frame{aspect-ratio:1/1}
  .map-pan{transform:translate(-40.139%,-47.363%)}
  /* "Öppna i Google Maps" och OSM-attributionen på egna rader (radbröt fult på 390px) */
  .cm-openrow{display:flex; flex-direction:column; gap:8px}
  .cm-caption em{float:none}
  /* Hero-CTA: centrerad + något tightare så den ryms på en rad på 390px */
  .hero .btn{text-align:center; letter-spacing:.22em; padding:18px 26px}
  /* Trimmad sektionsluft på mobil (18-20vh kändes som tomma skärmar) */
  .intro{padding:96px 0}
  .statement{padding:110px 0}
  .interlude{height:clamp(360px,52vh,480px)}
  .venue{grid-template-columns:1fr; gap:10px}
  .booking-layout{grid-template-columns:1fr; gap:44px}
  .el-note{white-space:normal}
  .nl-row{flex-direction:column; align-items:stretch; gap:26px}
  .ev-row{grid-template-columns:auto 1fr; gap:8px 20px}
  .ev-book{grid-column:2; justify-self:start}
}

/* ---------- iPhone/iPad: naven halvgenomskinlig ända upp i notch/statusfältet
   (Sebastian 2026-07-07). Kräver viewport-fit=cover i header.php så sidan går
   bakom statusfältet; env(safe-area-inset-top) lyfter navinnehållet under det.
   Mörk scrim även oscrollat i ljust läge: naven ligger då över heron (vit text).
   Ligger EFTER 860-blocket så padding-top vinner över dess .nav-padding. ---------- */
@media (pointer:coarse){
  .nav{background:rgba(16,18,17,.5);
    -webkit-backdrop-filter:blur(16px) saturate(1.15);
    backdrop-filter:blur(16px) saturate(1.15);
    padding-top:calc(26px + env(safe-area-inset-top,0px))}
  .nav.scrolled{background:rgba(16,18,17,.5); padding-top:calc(18px + env(safe-area-inset-top,0px))}
  [data-theme="light"] .nav.scrolled{background:rgba(236,234,227,.5)}
}
@media (pointer:coarse) and (max-width:860px){
  .nav{padding-top:calc(20px + env(safe-area-inset-top,0px))}
  .nav.scrolled{padding-top:calc(16px + env(safe-area-inset-top,0px))}
}

/* ---------- Reducerad rörelse ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hl-1,.hl-2,.hl-3,.hl-4,.hl-5{animation:none; opacity:1}
  .hero-spin{animation:none; transform:translate(-50%,-50%)}
  .js .rv,.js .rv-line{opacity:1; transform:none; transition:none}
  .js .bh .ch{transform:none; transition:none}
  .js .st-line .st-w{opacity:1; transform:none; transition:none}
  .js .irv{clip-path:none}
  .js .irv img{transform:none}
  .js .m.dev img{filter:none; transform:none; transition:none}
  .drc-lapp{transition:opacity .3s ease; transform:rotate(-1.2deg)}
  .scrollcue i{animation:none}
  [data-plx]{transform:none!important}
  .menu-media .mm-img{transition:opacity .3s ease; transform:none}
  .cta-line,.cta-arrow,.mrow .dish{transition:none}
}