@font-face{font-family:"Young Serif";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/young-serif-400.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/hanken-grotesk-400.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/hanken-grotesk-500.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/hanken-grotesk-600.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/hanken-grotesk-700.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrains-mono-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrains-mono-500.woff2") format("woff2")}

/* ============================================================
   FOCUS — shared design system (philipz.de redesign, Direction 06)
   ============================================================ */
:root{
  --bg:#fafafa; --ink:#101012; --soft:#86868c; --line:rgba(16,16,18,.1);
  --panel:#ffffff; --accent:#c0772b;
  --sans:"Hanken Grotesk",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --disp:"Young Serif",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --maxw:1080px; --wide:1280px;
  --sp:1.3;                 /* whitespace multiplier (tweakable) */
  /* page-title spacing — single source of truth; mobile overrides just below */
  --ptitle-top:195px;       /* whitespace above the heading (desktop) */
  --ptitle-gap:180px;       /* whitespace below the title block → content (desktop, ~3× the old value) */
  /* hub tiles + work banner: hover-zoom (single source of truth) */
  --tile-zoom-transition:.8s cubic-bezier(.2,.7,.2,1);
  --tile-zoom-scale:1.045;
}
@media(max-width:820px){
  :root{
    --ptitle-top:78px;      /* ~40% of desktop */
    --ptitle-gap:90px;      /* ~1.5× the old value */
  }
}
/* phones in landscape: short viewport → much less space above the heading */
@media(orientation:landscape) and (max-height:500px){
  :root{
    --ptitle-top:34px;
    --ptitle-gap:60px;
  }
}
html[data-theme="dark"]{
  --bg:#0a0a0c; --ink:#f3f3f5; --soft:#7c7c84; --line:rgba(255,255,255,.12); --panel:#141417;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;scrollbar-gutter:stable}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;
  -webkit-font-smoothing:antialiased;font-synthesis:none;transition:background .4s,color .4s}
/* serif display — Young Serif is single-weight, font-synthesis:none keeps it
   consistent even where rules request 600/700 (no faux-bold). */
h1,h2,h3,h4,.fcta{font-family:var(--disp);font-weight:400}
h1 em,h2 em,h3 em{font-style:normal}
a{color:inherit;text-decoration:none}
img{display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 36px}
.wrap.wide{max-width:var(--wide)}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.accent{color:var(--accent)}

/* ---- glass header ---- */
/* Safari 26 (Tahoe): backdrop-filter/background NICHT aufs fixe .nav selbst —
   sonst sampelt Safari es als Toolbar-Tönung. Glas liegt aufs ::before (wird
   beim Sampling ignoriert), Toolbar fällt auf html/body (opak) zurück. */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;
  border-bottom:1px solid transparent;transition:border-color .3s}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(250,250,250,.82);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  transition:background .3s}
html[data-theme="dark"] .nav::before{background:rgba(10,10,12,.82)}
.nav.solid{border-color:var(--line)}
.nav .in{max-width:var(--wide);margin:0 auto;padding:0 36px;display:flex;align-items:center;height:74px}
.nav .brand{font-family:var(--mono);font-size:12px;letter-spacing:.1em;white-space:nowrap}
.nav .brand .d{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);
  margin-right:9px;vertical-align:1px;transition:background .3s}
.nav .links{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav .links a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--soft);transition:.2s;white-space:nowrap}
.nav .links a:hover,.nav .links a.on{color:var(--ink)}
.nav .links a.on{color:var(--accent)}
.tog{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--soft);background:none;
  border:none;cursor:pointer;transition:.2s;display:inline-flex;align-items:center}
.tog:hover{color:var(--ink)}
.tog::before{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;
  border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%);
  margin-right:8px}
.navspacer{height:74px}

/* ---- generic section intro (centered) ---- */
.sintro{padding:0 0 calc(70px*var(--sp));text-align:center}
.sintro h2{font-size:clamp(26px,3.4vw,42px);font-weight:600;letter-spacing:-.025em}
.sintro p{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--soft);letter-spacing:.04em}

/* ---- page title (centered, big) ---- */
.ptitle{padding:var(--ptitle-top) 0 var(--ptitle-gap);text-align:center}
.ptitle .label{margin-bottom:26px}
.ptitle h1{font-size:clamp(50px,10vw,128px);font-weight:400;letter-spacing:-.018em;line-height:.92}
.ptitle p{margin:34px auto 0;max-width:54ch;font-family:var(--mono);font-size:13px;color:var(--soft);
  letter-spacing:.04em;line-height:1.7}
.ptitle p b{color:var(--accent);font-weight:500}

/* ---- buttons / pills ---- */
.pill{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--soft);background:none;
  border:1px solid var(--line);padding:8px 15px;border-radius:999px;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:7px}
.pill:hover{color:var(--ink)}
.pill.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:12px 18px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink);transition:.2s;display:inline-flex;gap:8px;align-items:center}
.btn:hover{border-color:var(--ink)}
.btn.solid{background:var(--accent);color:#fff;border-color:var(--accent)}.btn.solid:hover{opacity:.9}

/* ---- reveal on scroll ---- */
body.js .reveal{opacity:0;transform:translateY(26px)}
body.js .reveal.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){body.js .reveal,body.js .reveal.in{opacity:1!important;transform:none!important;transition:none!important}}

/* ---- shared thumbnail placeholder (NO grayscale) ---- */
.thumb-ph{background:repeating-linear-gradient(135deg,var(--line),var(--line) 12px,transparent 12px,transparent 24px),var(--accent);
  display:flex;align-items:center;justify-content:center}
.thumb-ph span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:#fff;background:rgba(0,0,0,.5);padding:6px 12px}

/* ---- footer (shared) ---- */
footer.site{padding:calc(72px*var(--sp)) 0 60px;text-align:center}
footer.site .fcta{font-size:clamp(36px,6vw,84px);font-weight:400;letter-spacing:-.015em;line-height:1}
footer.site .fcta a{color:var(--accent)}
footer.site .fmail{font-family:var(--mono);font-size:15px;color:var(--accent);display:inline-block}
footer.site .fsocial{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
footer.site .frow{margin-top:34px;display:flex;justify-content:center;gap:26px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--soft)}
footer.site .frow a:hover{color:var(--ink)}
footer.site .colo{margin-top:30px;font-family:var(--mono);font-size:11px;color:var(--soft);letter-spacing:.05em}

/* ===== home ===== */
.hero{padding:calc(200px*var(--sp)) 0 calc(96px*var(--sp));text-align:center}
.hero .label{margin-bottom:34px}
/* phone: split the hero kicker onto two lines */
@media(max-width:600px){
  .hero .hero-kicker{line-height:1.9}
  .hero .hero-kicker .ksep{display:none}
  .hero .hero-kicker .kline{display:block}
}
.hero h1{font-size:clamp(40px,6.6vw,84px);font-weight:400;letter-spacing:-.018em;line-height:1.06;max-width:16ch;margin:0 auto}
.hero h1 .ln{display:block}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .scroll{display:inline-block;margin-top:calc(72px*var(--sp));font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--soft);text-decoration:none;cursor:pointer;transition:color .2s}
.hero .scroll:hover{color:var(--ink)}
.hub{scroll-margin-top:90px}

.hub{max-width:var(--wide);margin:0 auto;padding:0 36px calc(120px*var(--sp))}
.hub .banner{position:relative;display:block;aspect-ratio:24/7;border-radius:8px;overflow:hidden;
  text-decoration:none;color:#fff;background:var(--line)}
.hub .banner .media,.hub .tile .media{position:absolute;inset:0;overflow:hidden;background:var(--line)}
.hub .media .fill,.hub .media img,.hub .media .thumb-ph{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--tile-zoom-transition)}
.hub .banner:hover .media img,.hub .banner:hover .media .fill,
.hub .tile:hover .media img,.hub .tile:hover .media .fill{transform:scale(var(--tile-zoom-scale))}
/* Work-banner slideshow: stacked images, crossfade only (no movement) */
.hub .banner .media .bslide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s ease, transform var(--tile-zoom-transition);will-change:opacity}
.hub .banner .media .bslide.on{opacity:1}
.hub .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,4,.05) 32%,rgba(8,6,4,.72));z-index:1}
.hub .banner .scrim{background:linear-gradient(90deg,rgba(8,6,4,.72),rgba(8,6,4,.12) 60%,rgba(8,6,4,.4))}
.hub .cap{position:absolute;left:0;right:0;bottom:0;padding:20px;z-index:2;display:flex;
  justify-content:space-between;align-items:flex-end;gap:12px}
.hub .banner .cap{padding:clamp(22px,3vw,40px)}
.hub .cap h3{font-family:var(--disp);font-weight:400;letter-spacing:-.01em;line-height:1;color:#fff;font-size:clamp(20px,2vw,27px)}
.hub .banner .cap h3{font-size:clamp(32px,4.4vw,58px)}
.hub .cap .m{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.85);line-height:1.5;text-align:right;max-width:48%}
.hub .banner .cap .m{font-size:12px;max-width:40%}
.hub .arr{position:absolute;top:16px;right:18px;z-index:2;font-family:var(--mono);font-size:13px;color:#fff;
  opacity:0;transform:translateY(-4px);transition:.3s}
.hub .banner .arr{top:22px;right:24px}
.hub .banner:hover .arr,.hub .tile:hover .arr{opacity:1;transform:none}
.hub .four{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.hub .tile{position:relative;display:block;aspect-ratio:3/4;border-radius:8px;overflow:hidden;
  text-decoration:none;color:#fff;background:var(--line)}

@media(max-width:820px){
  .hero{padding:calc(150px*var(--sp)) 0 calc(64px*var(--sp))}
  .hub .banner{aspect-ratio:16/9}
  .hub .four{grid-template-columns:1fr 1fr}
}

/* ===== work ===== */
main.alt .ptitle{padding-top:var(--ptitle-top)}
.pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:6px 0 18px}
.count{text-align:center;font-family:var(--mono);font-size:11px;color:var(--soft);letter-spacing:.08em;
  padding:14px 0 calc(60px*var(--sp));text-transform:uppercase}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:calc(64px*var(--sp)) 32px;padding-bottom:calc(120px*var(--sp))}

/* card */
.card{display:block;color:var(--ink)}
.card .media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:6px;
  background:var(--line);cursor:pointer;text-decoration:none}
.card .media .thumb{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .45s ease}
.card .media .thumb-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:filter .45s ease}
/* hover effects live on the media only — not the title/meta below */
.card .media:hover .thumb,.card .media:hover .thumb-ph{transform:scale(1.04);filter:blur(7px) brightness(.6)}
/* single WATCH/OPEN label — plain text over the blurred image, no pill */
.card .watch{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:#fff;
  opacity:0;transition:opacity .4s ease;pointer-events:none}
.card .media:hover .watch{opacity:1}
.card h3{margin-top:17px;font-size:clamp(20px,2.1vw,27px);font-weight:400;
  letter-spacing:-.02em;line-height:1.1}
.card .meta{font-family:var(--mono);font-size:11px;color:var(--soft);margin-top:8px;line-height:1.5}
.card .meta .client{color:var(--accent)}
.card .meta a.client{text-decoration:none}
.card .meta a.client:hover{text-decoration:underline}
.card .idx{display:block;font-family:var(--mono);font-size:12px;color:var(--accent);
  margin-top:6px;text-align:right}

/* card: hidden state for filter */
.card[hidden]{display:none}

@media(max-width:760px){
  .stack{grid-template-columns:1fr;gap:calc(56px*var(--sp))}
}

/* ===== photography — masonry, keeps each photo's native ratio ===== */
.masonry{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1px;column-gap:8px;row-gap:0;align-items:start;padding-bottom:calc(40px*var(--sp))}
.ptile{break-inside:avoid;margin:0 0 14px;border-radius:5px;overflow:hidden;position:relative;
  cursor:pointer;display:block;background:var(--line)}
.ptile img{width:100%;height:auto;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ptile .thumb-ph{display:block;width:100%;aspect-ratio:3/2;background:var(--line)}
.ptile:hover img{transform:scale(1.04)}
.ptile .cap{position:absolute;left:0;right:0;bottom:0;padding:16px;display:flex;
  flex-direction:column;gap:4px;
  background:linear-gradient(0deg,rgba(8,8,12,.6),transparent);
  opacity:0;transition:.3s}
.ptile:hover .cap{opacity:1}
.ptile .cap .loc{font-family:var(--mono);font-size:12px;color:#fff;letter-spacing:.03em}
.ptile .cap .exif{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.7);line-height:1.4}
/* no grayscale — photos display in full color */
@media(max-width:820px){.masonry{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.masonry{grid-template-columns:1fr}}

/* ===== music ===== */
/* .grid2 is a 2-col video grid — reuses .stack + .card styles; no extra card CSS needed */
.stack.grid2{gap:calc(50px*var(--sp)) 32px}
/* hide the empty meta line on music cards (role · client both blank) */
.stack.grid2 .card .meta:empty{display:none}
@media(max-width:760px){.stack.grid2{grid-template-columns:1fr}}

/* ===== equipment ===== */
.eq-group{padding:calc(70px*var(--sp)) 0;border-top:1px solid var(--line)}
.eq-group--first{border-top:none;padding-top:0}
.gh{display:grid;grid-template-columns:1fr 2fr;gap:32px;align-items:baseline;margin-bottom:36px}
.gh .lt .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.gh .lt h2{margin-top:12px;font-size:clamp(24px,3vw,38px);font-weight:600;letter-spacing:-.025em;line-height:1.05}
.gh .rt{font-family:var(--mono);font-size:12px;color:var(--soft);line-height:1.7}
.kit{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.it{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:15px 0;border-top:1px solid var(--line)}
.it .nm{font-size:15px;font-weight:500;letter-spacing:-.005em;display:flex;align-items:baseline;gap:9px}
.it .nm a.eqlink{color:var(--accent);text-decoration:none}
.it .nm a.eqlink:hover{text-decoration:underline}
.it .ds{font-family:var(--mono);font-size:11px;color:var(--soft);text-align:right;white-space:nowrap;flex:none}
.it .ds.diy{color:var(--accent)}

.callout{margin:0 0 calc(50px*var(--sp));padding:34px 36px;border:1px solid var(--line);border-radius:8px;
  background:color-mix(in srgb,var(--accent) 6%,var(--bg));display:grid;grid-template-columns:1fr 1.4fr;gap:30px;align-items:center}
.callout .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.callout h3{font-size:clamp(22px,2.6vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.callout p{font-family:var(--mono);font-size:12px;color:var(--soft);line-height:1.7}

.soon{border:1px dashed var(--line);border-radius:8px;padding:30px 32px;text-align:center;
  font-family:var(--mono);font-size:12px;color:var(--soft);line-height:1.8}
.soon b{color:var(--ink);font-weight:500}

@media(max-width:820px){
  .gh{grid-template-columns:1fr;gap:14px}
  .kit{grid-template-columns:1fr}
  .callout{grid-template-columns:1fr}
}

/* ===== about ===== */
.ahero{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start;
  padding:calc(150px*var(--sp)) 0 calc(90px*var(--sp))}
.ahero .portrait{border-radius:6px;overflow:hidden;aspect-ratio:1;background:var(--line)}
.ahero .portrait img{width:100%;height:100%;object-fit:cover}
.ahero h1{font-size:clamp(40px,5.6vw,76px);font-weight:400;letter-spacing:-.018em;line-height:1.02}
.ahero .label{margin-bottom:24px}
.ahero p{margin-top:26px;font-size:18px;line-height:1.65;color:var(--ink);max-width:46ch;text-wrap:pretty}
.ahero p .soft{color:var(--soft)}
.ahero .facts{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.ahero .facts .f{padding:13px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px}
.ahero .facts .f .k{color:var(--soft);text-transform:uppercase;letter-spacing:.1em;font-size:10px;margin-bottom:5px}
.ahero .facts .f .v{font-size:13px}
.ahero .cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}

.block{padding:calc(80px*var(--sp)) 0}
.block.line{border-top:1px solid var(--line)}
.block .head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:48px;gap:20px}
.block .head h2{font-size:clamp(26px,3.2vw,40px);font-weight:600;letter-spacing:-.025em}
.block .head .label{flex:none}
.disc{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.disc .d{background:var(--bg);padding:30px}
.disc .d .n{font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:14px}
.disc .d h3{font-size:21px;font-weight:600;letter-spacing:-.01em}
.disc .d p{margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--soft);line-height:1.7}

.beyond{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.beyond a{display:block;border:1px solid var(--line);border-radius:6px;padding:28px;transition:.2s;background:var(--bg)}
.beyond a:hover{border-color:var(--ink);transform:translateY(-2px)}
.beyond a .n{font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:16px}
.beyond a h3{font-size:20px;font-weight:600;letter-spacing:-.01em}
.beyond a p{margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--soft);line-height:1.7}
.beyond a .go{margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--soft)}
.beyond a:hover .go{color:var(--accent)}

@media(max-width:820px){
  .ahero{grid-template-columns:1fr;gap:36px}
  .ahero .portrait{max-width:320px}
  .disc{grid-template-columns:1fr}
  .beyond{grid-template-columns:1fr}
}

/* ===== mobile-nav ===== */

/* Desktop: links pushed to the right (brand stays left); tog+burger follow */
.nav .links{margin-left:auto}
.nav-right{display:flex;align-items:center;gap:14px;margin-left:28px}

/* burger hidden on wide viewports */
.burger{display:none}

@media(max-width:820px){
  /* hide desktop text links, keep tog + burger */
  .nav .links{display:none}
  /* with links hidden, nav-right must push itself to the right */
  .nav-right{margin-left:auto}

  /* theme toggle hidden on mobile — only appears while the burger menu is open */
  .nav-right .tog{display:none}
  body.mnav-lock .nav-right .tog{display:inline-flex;align-items:center}

  /* show burger */
  .burger{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:36px;height:36px;
    background:none;border:none;
    cursor:pointer;
    color:var(--soft);
    padding:4px;
    transition:color .2s;
    flex-shrink:0;
  }
  .burger:hover{color:var(--ink)}
  .burger span{
    display:block;
    width:20px;height:1.5px;
    background:currentColor;
    border-radius:2px;
    transform-origin:center;
    transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s, width .3s;
  }
  /* X state */
  .burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
}

/* mobile sheet overlay */
.mnav{
  position:fixed;top:74px;left:0;right:0;bottom:0;
  z-index:59;
  background:color-mix(in srgb,var(--bg) 97%,transparent);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;
  opacity:0;visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .35s cubic-bezier(.4,0,.2,1),
             visibility .35s,
             transform .35s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.mnav.open{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
}
.mnav a{
  font-family:var(--mono);
  font-size:clamp(22px,6vw,32px);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--soft);
  padding:20px 32px;
  display:block;
  width:100%;
  text-align:center;
  transition:color .2s, transform .2s;
  border-bottom:1px solid var(--line);
}
.mnav a:first-child{border-top:1px solid var(--line)}
.mnav a:hover,.mnav a:focus-visible{color:var(--ink);transform:translateX(4px)}

/* scroll lock */
body.mnav-lock{overflow:hidden}

/* ===== impressum ===== */
.legal{max-width:62ch;margin:0 auto;padding-bottom:calc(110px*var(--sp))}
.legal .addr{font-size:18px;line-height:1.7;margin-bottom:46px}
.legal .addr a{color:var(--accent)}
.legal h2{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:40px 0 12px}
.legal h3{font-size:16px;font-weight:600;margin:24px 0 8px}
.legal p{font-size:14.5px;line-height:1.75;color:var(--ink);margin-bottom:14px}
.legal p.soft{color:var(--soft);font-size:13px}

/* ===== photography: tile is a button now ===== */
.masonry .ptile{width:100%;border:0;background:none;padding:0;margin:0;font:inherit;text-align:left;cursor:zoom-in;display:block}

/* ===== lightbox ===== */
.lightbox{position:fixed;inset:0;width:100vw;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(8,8,12,.93);padding:6vmin;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lightbox.open{display:flex}
.lightbox .lb-fig{margin:0;max-width:94vw;text-align:center}
.lightbox .lb-img{max-width:94vw;max-height:80vh;width:auto;height:auto;object-fit:contain;border-radius:4px;display:block;margin:0 auto}
.lightbox .lb-cap{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.85)}
.lightbox .lb-cap .lb-loc{color:#fff;font-weight:400;margin-right:10px}
.lightbox .lb-cap .lb-exif{display:block;margin-top:6px;color:rgba(255,255,255,.6)}
.lightbox .lb-cap .lb-socials{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin-top:14px}
.lightbox .lb-cap .lb-socials a{display:inline-flex;align-items:center;gap:7px;color:var(--accent);text-decoration:none}
.lightbox .lb-cap .lb-socials svg{display:block}
.lightbox .lb-cap .lb-socials a:hover span{text-decoration:underline}
.lightbox .lb-close{position:absolute;top:20px;right:26px;background:none;border:0;color:#fff;
  font-size:24px;line-height:1;cursor:pointer;padding:8px;opacity:.8;transition:opacity .2s;z-index:2}
.lightbox .lb-close:hover{opacity:1}
.lightbox .lb-prev,.lightbox .lb-next{position:absolute;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;height:40vh;z-index:2;
  background:none;border:0;color:#fff;font-size:46px;line-height:1;cursor:pointer;
  padding:0 26px;opacity:.6;transition:opacity .2s}
.lightbox .lb-prev:hover,.lightbox .lb-next:hover{opacity:1}
.lightbox .lb-prev{left:0}
.lightbox .lb-next{right:0}
/* no prev/next arrows on phones (tablet + desktop only) */
@media(max-width:520px){.lightbox .lb-prev,.lightbox .lb-next{display:none}}

/* ===== video lightbox (in-page player) ===== */
.vlightbox{position:fixed;inset:0;width:100vw;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(8,8,12,.93);padding:6vmin;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.vlightbox.open{display:flex}
.vlightbox .vlb-frame{position:relative;width:min(94vw, 158vh);aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden}
.vlightbox .vlb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vlightbox .vlb-close{position:absolute;top:20px;right:26px;background:none;border:0;color:#fff;
  font-size:24px;line-height:1;cursor:pointer;padding:8px;opacity:.8;transition:opacity .2s;z-index:2}
.vlightbox .vlb-close:hover{opacity:1}
.vlightbox .vlb-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:24px;text-align:center;background:#000;color:#fff;font-family:var(--mono);font-size:13px}
.vlightbox .vlb-fallback p{margin:0;color:rgba(255,255,255,.8);max-width:34ch;line-height:1.5}
.vlightbox .vlb-fallback a{color:var(--accent);text-decoration:none;font-size:14px}
.vlightbox .vlb-fallback a:hover{text-decoration:underline}