/* Lesterwund – soft pastel, Japan-inspired look.
   Self-hosted font: Zen Maru Gothic (OFL), latin subset. */
@font-face {
  font-family: "Zen Maru Gothic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/zen-maru-gothic-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Zen Maru Gothic"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/zen-maru-gothic-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Zen Maru Gothic"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/zen-maru-gothic-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Light and dark theme. light-dark(light, dark) picks by color-scheme: it follows the visitor's
   system setting, and theme.js sets data-theme on <html> when they choose one with the header button.
   Dark = "night sakura": deep plum ink, the same pastel accents brightened for contrast. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root {
  --bg: light-dark(#fffaf6, #17131c);          /* washi paper / night */
  --bg2: light-dark(#fff0f4, #1f1926);         /* blush tint */
  --panel: light-dark(#ffffff, #241d2c);
  --line: light-dark(#f1dfe6, #3a3046);
  --text: light-dark(#4a4358, #eee7f3);        /* soft ink */
  --muted: light-dark(#736b82, #b2a8c2);
  --neon: light-dark(#b8446e, #f394b8);        /* sakura (text accent) */
  --neon2: light-dark(#27728f, #82cbe8);       /* sky (text accent) */
  --pink: light-dark(#d9638c, #ee7fa6);
  --sakura: #f8bdd0;
  --peach: #ffd9c4;
  --matcha: #d3ebc5;
  --sky: #c4e5f4;
  --lavender: #ddd3f5;
  --hl: light-dark(var(--sakura), rgba(243, 148, 184, .3));   /* highlighter stripe behind text */
  --glass: light-dark(rgba(255, 250, 246, .9), rgba(23, 19, 28, .88));   /* header, menus, popovers */
  --pop-shadow: 0 16px 40px light-dark(rgba(120, 80, 110, .18), rgba(0, 0, 0, .5));
  --shadow: 0 10px 28px light-dark(rgba(194, 76, 120, .08), rgba(0, 0, 0, .35));
  --gutter: 16px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 "Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
::selection { background: var(--sakura); color: #4a4358; }
a { color: inherit; }
h1, h2, h3 { font-family: "Zen Maru Gothic", system-ui, sans-serif; font-weight: 700; letter-spacing: 0; }

/* ---------- Header ---------- */
.nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 56px; padding: 6px var(--gutter);
  background: var(--glass); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--sakura), var(--peach), var(--matcha), var(--sky), var(--lavender), var(--sakura)) 0 0 / 600px 100% repeat-x;
  animation: nav-line 14s linear infinite;
}
@keyframes nav-line { to { background-position: 600px 0; } }
@media (prefers-reduced-motion: reduce) { .nav::after { animation: none; } }
.logo { font-size: 1.3rem; text-decoration: none; }
.nav .logo { display: inline-flex; align-items: center; }
.nav .logo img { display: block; height: 38px; width: auto; max-width: 100%; }

.nav nav { display: flex; align-items: center; gap: 2px; }
.nav nav a {
  text-decoration: none; color: var(--muted); font-size: .92rem; font-weight: 500;
  letter-spacing: .04em; padding: 10px 12px; border-radius: 999px;
}
.nav nav a:hover, .nav nav a:focus-visible, .nav nav a[aria-current="page"] { color: var(--neon); }

.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 -8px 0 0; padding: 0;
  background: none; border: 0; border-radius: 50%; color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle:focus-visible { outline: 2px solid var(--neon2); outline-offset: 2px; }
.bars, .bars::before, .bars::after {
  display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s, background-color .2s, top .2s;
}
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -7px; }
.bars::after { top: 7px; }
.nav.menu-open .bars { background: transparent; }
.nav.menu-open .bars::before { top: 0; transform: rotate(45deg); }
.nav.menu-open .bars::after { top: 0; transform: rotate(-45deg); }

.has-dropdown { position: relative; display: flex; align-items: center; }
.dd-toggle {
  background: none; border: 0; margin: 0 0 0 -6px; padding: 8px; cursor: pointer;
  color: var(--muted); font-size: .85rem; line-height: 1; border-radius: 50%;
}
.dd-toggle:hover, .dd-toggle:focus-visible, .has-dropdown.open .dd-toggle { color: var(--neon); }
.dd-toggle span { display: inline-block; transition: transform .2s; }
.has-dropdown.open .dd-toggle span { transform: rotate(180deg); }
.dropdown {
  display: none; position: absolute; top: 100%; right: -8px; z-index: 40;
  min-width: 250px; margin: 0; padding: 8px; list-style: none;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--pop-shadow);
  max-height: calc(100vh - 80px); overflow-y: auto;
}
.has-dropdown.open .dropdown { display: block; }
/* Desktop: hang the menu from the bottom edge of the header (nav padding 6px + 1px border below the link),
   with an invisible bridge so hover isn't lost in the gap */
@media (min-width: 760px) {
  .has-dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
  .dropdown {
    top: calc(100% + 7px);
    right: calc(-1 * var(--gutter));   /* flush with the header's right edge */
    border-top-left-radius: 0; border-top-right-radius: 0; border-top-color: transparent;
    clip-path: inset(0 -60px -60px -60px);
  }
}
@media (hover: hover) { .has-dropdown:hover .dropdown { display: block; } }
.nav nav .dropdown a {
  display: block; padding: 10px 14px; border-radius: 12px;
  letter-spacing: .01em; font-size: .97rem; color: var(--text);
}
.nav nav .dropdown a:hover, .nav nav .dropdown a:focus-visible { background: var(--bg2); color: var(--neon); }
.nav nav .dropdown a[aria-current="page"] { color: var(--neon); }
.dropdown .all { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.nav nav .dropdown .all a { color: var(--text); font-weight: 700; }

/* Phones: hamburger opens a full-width panel with every link, projects listed inline. */
@media (max-width: 759px) {
  .menu-toggle { display: inline-flex; }
  .nav nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px var(--gutter) 16px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.menu-open nav { display: flex; }
  .nav nav a { padding: 15px 4px; font-size: 1rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .has-dropdown { display: flex; flex-wrap: wrap; align-items: stretch; }
  .has-dropdown > a { flex: 1 1 auto; display: block; }
  .dd-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; margin: 0; padding: 0; font-size: 1rem; border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .dropdown {
    display: none; position: static; flex: 1 0 100%; min-width: 0; padding: 0 0 0 16px;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    max-height: none; overflow: visible;   /* no inner scroller: the panel itself scrolls */
  }
  .has-dropdown.open .dropdown { display: block; }
  .has-dropdown:not(.open):hover .dropdown { display: none; }
  .nav nav .dropdown a { padding: 13px 4px; font-size: .97rem; border-radius: 0; }
  .dropdown .all { margin: 0; padding: 0; border: 0; }
}

.eyebrow { color: var(--neon2); letter-spacing: .22em; text-transform: uppercase; font-size: .8rem; font-weight: 500; margin: 0 0 12px; }
h1 { font-size: clamp(2.3rem, 9vw, 5rem); line-height: 1.12; margin: 0 0 24px; }
h1 span {
  color: var(--neon);
  background: linear-gradient(transparent 62%, var(--hl) 62%, var(--hl) 92%, transparent 92%);
  padding: 0 .08em;
}
.hero-next { font-size: 1.15rem; color: var(--muted); margin: 0 0 28px; }
.btn {
  display: inline-block; padding: 14px 30px; text-decoration: none; font-weight: 700;
  letter-spacing: .04em; font-size: 1rem;
  background: var(--sakura); border: 2px solid var(--sakura); color: #5a2540; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(240, 150, 185, .35);
  transition: background .2s, border-color .2s, transform .2s;
}
.btn:hover, .btn:focus-visible { background: #f5a6c1; border-color: #f5a6c1; transform: translateY(-2px); }

/* ---------- Sections ---------- */
.section { max-width: 1100px; margin: 0 auto; padding: 56px var(--gutter); }
.section[hidden] { display: none; }
.section h2 { font-size: clamp(1.7rem, 5vw, 2.4rem); margin: 0 0 28px; position: relative; padding-bottom: 14px; line-height: 1.2; }
.section h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--sakura), var(--peach), var(--matcha), var(--sky), var(--lavender), var(--sakura)) 0 0 / 600px 100% repeat-x;
  animation: nav-line 14s linear infinite;   /* same flowing colours as the line under the header */
}
@media (prefers-reduced-motion: reduce) { .section h2::after { animation: none; } }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.live { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; }
.live i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.live.on i { background: #62c99b; box-shadow: 0 0 0 4px rgba(98, 201, 155, .25); animation: pulse 1.6s infinite; }
.live.off i { background: var(--pink); }
@keyframes pulse { 50% { opacity: .4; } }

.event-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 24px;
  box-shadow: var(--shadow); container-type: inline-size;
}
.event-card h3 { margin: 0 0 4px; font-size: 1.4rem; }
.event-card .sub { color: var(--muted); margin: 0 0 16px; font-size: .92rem; }
.big { border-color: var(--sakura); box-shadow: 0 14px 40px rgba(240, 150, 185, .22); }
.slots { list-style: none; margin: 0; padding: 0; }
.slot {
  display: grid; grid-template-columns: 9.5em 1fr auto; gap: 12px; align-items: baseline;
  padding: 14px 0; border-top: 1px dashed var(--line);
}
.slot .time { color: var(--neon2); font-variant-numeric: tabular-nums; font-weight: 500; }
.slot .name { font-size: 1.25rem; font-weight: 700; overflow-wrap: break-word; min-width: 0; }
.slot .name.open { color: var(--muted); font-weight: 400; }
.slot .vibe { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.slot.b2b .name { color: var(--pink); }
.slot.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: rgba(248, 189, 208, .6); } to { background: transparent; } }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.grid.mini .event-card { padding: 16px 18px; opacity: .8; box-shadow: none; }
.grid.mini h3 { font-size: 1rem; }
.grid.mini .slot { padding: 6px 0; grid-template-columns: 1fr; gap: 0; }
.grid.mini .slot .time, .grid.mini .slot .vibe { display: none; }
.grid.mini .slot .name { font-size: .95rem; font-weight: 400; }

.how ul { padding-left: 1.2em; max-width: 70ch; }
.how li { margin-bottom: 10px; color: var(--muted); }
.how li::marker { color: var(--sakura); }
.how b { color: var(--text); }

/* ---------- Footer ---------- */
.footer {
  text-align: center; padding: 56px var(--gutter);
  background: var(--bg2); border-top: 1px solid var(--line); color: var(--muted);
  position: relative; z-index: 1;
}
.footer-logo { display: block; height: 44px; width: auto; max-width: 100%; margin: 0 auto 28px; }
.social-label { margin: 0; font-weight: 700; color: var(--text); letter-spacing: .04em; }
.social { list-style: none; display: flex; justify-content: center; gap: 18px; padding: 0; margin: 10px 0 28px; flex-wrap: nowrap; }
.footer-rule { border: 0; border-top: 1px solid var(--line); margin: 40px auto 20px; max-width: 520px; }
.footer-copy { margin: 0; font-size: .9rem; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; background: var(--panel); border: 1px solid var(--line); border-radius: 50%;
  color: var(--text); text-decoration: none;
  transition: color .2s, border-color .2s, box-shadow .2s, transform .2s;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
/* Brand colours on hover/focus. */
.social a[href*="instagram.com"] { --brand: #dd2a7b; }
.social a[href*="instagram.com"]:hover svg, .social a[href*="instagram.com"]:focus-visible svg { fill: url(#ig-gradient); }
.social a[href*="soundcloud.com"] { --brand: #ff5500; }
.social a[href*="mixcloud.com"] { --brand: light-dark(#5000ff, #a58bff); }
.social a[href*="spotify.com"] { --brand: #1db954; }
.social a[href*="facebook.com"] { --brand: #1877f2; }
.social a[href]:hover, .social a[href]:focus-visible {
  color: var(--brand, var(--neon2)); border-color: var(--brand, var(--neon2));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand, var(--neon2)) 30%, transparent);
  transform: translateY(-2px);
}
/* Official Simple Icons glyphs (CC0) are filled shapes. */
@media (max-width: 420px) {   /* all five icons stay on one row down to 320px */
  .social { gap: 10px; }
  .social a { width: 46px; height: 46px; }
}
.social svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Narrow cards (and phones): time on its own line, name + vibe below. */
@container (max-width: 480px) {
  .slot { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .slot .time { grid-column: 1 / -1; }
}

/* ---------- Projects ---------- */
.page-hero { max-width: 1100px; margin: 0 auto; padding: 72px var(--gutter) 8px; }
/* Breadcrumb at the top of project pages */
.crumbs { max-width: 1100px; margin: 0 auto; padding: 18px var(--gutter) 0; position: relative; z-index: 1; }
.crumbs ol {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--neon); }
.crumbs a { color: var(--neon2); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--neon); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); }
.crumbs + .page-hero { padding-top: 36px; }
.page-hero h1 { margin-bottom: 16px; }
.page-hero .btn { margin: 4px 0 20px; }
.page-hero .hero-next { max-width: 62ch; }
.projects { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.project {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 24px;
  box-shadow: var(--shadow);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.project:hover { border-color: var(--sakura); box-shadow: 0 16px 40px rgba(240, 150, 185, .25); transform: translateY(-3px); }
.project .tag { margin: 0 0 8px; color: var(--neon2); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .2em; }
.project h3 { margin: 0 0 8px; font-size: 1.4rem; }
.project p { color: var(--muted); margin: 0 0 18px; }
.project .more { margin-top: auto; color: var(--neon); text-decoration: none; font-weight: 700; font-size: .95rem; letter-spacing: .03em; }
.project .more:hover { text-decoration: underline; }

.about p { color: var(--muted); max-width: 70ch; font-size: 1.1rem; margin: 0; }
.back { display: inline-block; color: var(--muted); text-decoration: none; font-size: .95rem; }
.back:hover { color: var(--neon); }
.text-link { color: var(--neon); text-decoration: none; font-weight: 700; font-size: .95rem; }
.text-link:hover { text-decoration: underline; }
.how p { color: var(--muted); max-width: 70ch; }
.poem { line-height: 1.95; }
.poem b { color: var(--neon); }

/* Images on project pages and cards */
.page-hero.has-media { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.hero-media {
  order: -1; width: 100%; max-width: 200px; height: auto; padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow);
}
.hero-media[src$=".jpg"] { padding: 0; overflow: hidden; }
@media (min-width: 760px) {
  .page-hero.has-media { grid-template-columns: 1fr minmax(220px, 340px); gap: 40px; }
  .hero-media { order: 0; max-width: 340px; justify-self: end; }
}
/* Wide banner image at the bottom of a project page hero (e.g. Phantasia). */
.hero-banner {
  display: block; width: 100%; height: auto; margin-top: 28px;
  border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow);
}
.card-media {
  display: flex; align-items: center; justify-content: center; height: 150px;
  margin: 0 0 16px; border-radius: 16px; overflow: hidden; background: #fff7f9; border: 1px solid var(--line);
}
.card-img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 10px; }
.card-img.cover { width: 100%; height: 100%; padding: 0; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .live.on i, .slot.flash { animation: none; }
  .btn, .social a, .project { transition: none; }
  .bars, .bars::before, .bars::after, .dd-toggle span { transition: none; }
}

/* Dormant projects: quieter, no hover lift */
.project.dormant { border-style: dashed; background: light-dark(#fffafb, #1f1926); box-shadow: none; scroll-margin-top: 80px; }
.project.dormant:hover { border-color: var(--line); box-shadow: none; transform: none; }
.project.dormant .tag { color: var(--muted); }

/* Group labels inside the Projects menu */
.dropdown .group {
  padding: 10px 14px 4px; font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--neon);
}
@media (max-width: 759px) {
  .dropdown { max-height: none; overflow: visible; }
  .dropdown .group { padding: 14px 4px 2px; }
}

/* DJ: places I've played */
.section-intro { color: var(--muted); max-width: 70ch; margin: -8px 0 24px; font-size: 1.05rem; }
.venues { margin: 0; overflow-x: clip; }   /* plain text, no card */
.chips li.g-own { --chip: var(--hl); --ink: var(--neon); }
.chips li.g-festivals { --chip: light-dark(var(--peach), rgba(255, 190, 150, .26)); --ink: light-dark(#a85a26, #ffbf94); }
.chips li.g-other { --chip: light-dark(var(--sky), rgba(130, 203, 232, .26)); --ink: var(--neon2); }
.chips li.g-clubs { --chip: light-dark(var(--matcha), rgba(160, 220, 140, .24)); --ink: light-dark(#3f7f3a, #a8dc94); }
.chips li.g-more { --chip: light-dark(var(--lavender), rgba(190, 170, 245, .28)); --ink: light-dark(#6a56b0, #c4b3f7); }
.chips { list-style: none; margin: 0; padding: 0 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px 28px; }   /* right padding keeps the last "/" of a line inside the column */
/* Plain text; on hover: bold, group ink colour and a highlighter stripe. ::after reserves the bold width so nothing shifts. */
.chips li {
  display: inline-grid; font-size: 1rem; line-height: 1.6; color: var(--text);
  transition: color .15s;
}
.chips li::after {
  content: attr(data-t); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; pointer-events: none;
}
/* "/" between items, centred in the gap after each one (not part of the hover target) */
.chips li { position: relative; }
.chips li:not(:last-child)::before {
  content: "/"; position: absolute; left: 100%; width: 28px; text-align: center;
  color: var(--muted); opacity: .55; font-weight: 400; pointer-events: none;
}
/* group headings run inline in the flow: bold label, then an en dash */
.chips li.label { font-weight: 700; color: var(--ink); }
.chips li.label::after { content: none; }
.chips li:not(.label):not(:last-child):has(+ .label)::before { content: "–"; }
.chips li.label:not(:last-child)::before { content: "–"; opacity: .55; color: var(--muted); font-weight: 400; }
.chips li:not(.label):hover {
  font-weight: 700; color: var(--ink);
  background: linear-gradient(transparent 58%, var(--chip) 58%, var(--chip) 92%, transparent 92%);
}
.chips a { text-decoration: none; }
.chips a:focus-visible { outline: 2px solid var(--neon2); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .chips li { transition: none; } }

/* Language switch (EN / SV) */
.nav nav a.lang-switch {
  margin: 0 6px 0 0; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; background: var(--panel);
}
@media (max-width: 759px) {
  .nav nav a.lang-switch { margin: 14px 0 0; align-self: flex-start; border-bottom: 1px solid var(--line); padding: 8px 18px; }
}

/* Venue items that open a details dialog */
.chip-btn {
  font: inherit; color: inherit; cursor: pointer; margin: 0; padding: 0;
  background: none; border: 0; text-align: left;
}
.chip-btn:focus-visible { outline: 2px solid var(--neon2); outline-offset: 3px; }
.info-dialog {
  width: min(92vw, 420px); padding: 26px 24px 24px; border: 1px solid var(--sakura); border-radius: 22px;
  background: var(--panel); color: var(--text); box-shadow: 0 24px 60px light-dark(rgba(120, 80, 110, .3), rgba(0, 0, 0, .6));
  max-height: min(85vh, 640px); overflow-y: auto;
}
.info-dialog::backdrop { background: light-dark(rgba(74, 67, 88, .45), rgba(8, 5, 12, .65)); backdrop-filter: blur(2px); }
.info-dialog h3 { margin: 0 32px 6px 0; font-size: 1.35rem; }
.info-meta { margin: 0 0 12px; color: var(--neon2); font-weight: 500; font-size: .92rem; }
.info-text { margin: 0 0 18px; color: var(--muted); white-space: pre-line; }
.info-dialog .btn { padding: 11px 22px; font-size: .95rem; }
.info-close {
  position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--bg2); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.info-close:hover, .info-close:focus-visible { background: var(--sakura); color: #4a4358; }

/* Dialog with several events */
.info-event + .info-event { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); }
.info-event h4 { margin: 0 0 4px; font-size: 1.05rem; }
.info-more { display: inline-block; margin-top: 18px; color: var(--neon); font-weight: 700; text-decoration: none; }
.info-more:hover { text-decoration: underline; }
.info-event .info-text:last-child { margin-bottom: 0; }

/* Many events: a tidy list instead of one big button per event */
.compact .info-event { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 10px 0; margin: 0; border-top: 1px dashed var(--line); }
.compact .info-event + .info-event { margin-top: 0; padding-top: 10px; }
.compact .info-event:first-of-type { border-top: 0; }
.compact .info-event h4 { grid-column: 1; margin: 0; font-size: 1rem; }
.compact .info-event .info-meta { grid-column: 1; margin: 0; font-size: .88rem; }
.compact .info-event .info-link {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 0; background: none; border: 0; box-shadow: none;
  color: var(--neon); font-size: .9rem; transform: none; white-space: nowrap;
}
.compact .info-event .info-link:hover { text-decoration: underline; background: none; transform: none; }

/* Event details: multi-line text, schedule, note, tickets */
.info-sub { margin: 14px 0 6px; font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.info-schedule { list-style: none; margin: 0 0 14px; padding: 0; font-size: .95rem; }
.info-schedule li { display: grid; grid-template-columns: 3.6em 1fr; gap: 0 8px; padding: 3px 0; }
.info-schedule b { color: var(--neon2); font-variant-numeric: tabular-nums; }
.info-note { margin: 0 0 14px; font-size: .88rem; color: var(--muted); font-style: italic; }
.info-tickets { display: inline-block; margin: 0 16px 12px 0; color: var(--neon); font-weight: 700; text-decoration: none; }
.info-tickets:hover { text-decoration: underline; }

/* About me: multi-paragraph text */
.about p + p { margin-top: 1.1em; }

/* Photo backdrop: stays put, the page content scrolls up over it.
   The photos are stacked. Without JavaScript only the first one shows. With JS (slideshow.js) the next
   photo is faded in on top of the current one, and dragging sets how far the fade has gone. */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #2a2030; }
.backdrop img {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  object-fit: cover; object-position: 50% 28%; display: block; opacity: 0;
  transition-property: opacity; transition-timing-function: ease-in-out;
}
.backdrop img:first-child { opacity: 1; }
.backdrop img:nth-child(2) { object-position: 40% 30%; }
.backdrop img:nth-child(3) { object-position: 40% 50%; }
.backdrop img:nth-child(5) { object-position: 50% 45%; }
.backdrop img:nth-child(6) { object-position: 40% 35%; }
.backdrop img:nth-child(7) { object-position: 25% 30%; }
.backdrop img:nth-child(8) { object-position: 45% 40%; }
.backdrop img:nth-child(9) { object-position: 35% 25%; }
/* the visible part of the photo: swipe here (vertical scroll still works) */
.hero-spacer.swipe { position: relative; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.hero-spacer.dragging { cursor: grabbing; }
.hero-spacer { height: 74vh; height: 74svh; }
main { position: relative; z-index: 1; }
.curtain > .section:first-child { padding-top: 28px; }   /* "Om mig" sits closer to the curtain edge */
.curtain {
  position: relative; background: var(--bg);
  border-radius: 28px 28px 0 0;
}

/* Poster / extra image under a project hero */
.poster { margin: 0; }
.poster figcaption { margin-top: 8px; color: var(--muted); font-size: .9rem; text-align: center; }

/* Contact form (footer) */
.contact { max-width: 520px; margin: 0 auto 30px; text-align: left; }
.contact[hidden] { display: none; }
.contact-form { display: grid; gap: 14px; }
.contact-form label { display: grid; gap: 6px; font-weight: 500; color: var(--text); font-size: .95rem; }
.contact-form .req { color: var(--neon); }
.contact-form input, .contact-form textarea {
  font: inherit; color: var(--text); background: light-dark(#fff, var(--bg)); width: 100%;
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible {
  outline: 2px solid var(--neon2); outline-offset: 1px; border-color: transparent;
}
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn { justify-self: start; cursor: pointer; font: inherit; font-weight: 700; }
.contact-form .btn:disabled { opacity: .6; cursor: default; transform: none; }
.contact-status { margin: 0; min-height: 1.5em; font-size: .95rem; color: var(--muted); }
.contact-status.ok { color: light-dark(#2f7a4f, #7fd6a4); }
.contact-status.err { color: var(--neon); }
.contact-form .lab { display: block; }

/* Wide screens: keep everything in one centred column so the photos aren't stretched past their resolution */
@media (min-width: 1200px) {
  html { background: var(--bg); }
  /* Left edge snapped to 2px steps (whole device pixels at 1x/1.5x/2x) so header and photo get identical edges */
  body { max-width: 900px; margin: 0 auto }
  @supports (margin-left: round(down, 5px, 2px)) {
    body { margin: 0 0 0 round(down, calc((100% - 900px) / 2), 2px) }
  }
  /* Sticky inside <main> instead of fixed, so the photo shares the page's exact edges (a fixed layer rounds
     differently and let a sliver peek past the header). The -57px lifts it behind the 57px header; the bottom margin keeps the page height unchanged. */
  .backdrop { position: sticky; inset: auto; top: 0; width: auto; height: 100vh; margin: -57px 0 calc(57px - 100vh); }
}

/* ---------- Playing now (menu item + popover) ---------- */
.nav nav .np-menu {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .92rem; font-weight: 500; letter-spacing: .04em; color: var(--muted);
  padding: 10px 12px; border-radius: 999px;
}
.nav nav .np-menu[hidden] { display: none; }
.nav nav .np-menu:hover, .nav nav .np-menu:focus-visible, .nav nav .np-menu[aria-expanded="true"] { color: var(--neon); }
.np-label-row { display: flex; align-items: center; gap: 7px; }
.np-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.np-eq i { width: 2.5px; height: 100%; background: var(--pink); border-radius: 1px; transform-origin: bottom;
  transform: scaleY(.35); }
.np-live .np-eq i { animation: np-eq 1s ease-in-out infinite; }
.np-live .np-eq i:nth-child(2) { animation-delay: -.35s; }
.np-live .np-eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes np-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .np-live .np-eq i { animation: none; transform: scaleY(.8); } }

.np-pop {
  position: absolute; top: 100%; right: var(--gutter); z-index: 45; margin-top: 8px;
  width: min(340px, calc(100vw - 2 * var(--gutter))); padding: 10px;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--pop-shadow);
}
.np-pop[hidden], .np-pop [hidden] { display: none; }
/* Same height as Spotify's player (80px) so the box does not grow when play is pressed. */
.np-card { display: flex; align-items: center; gap: 12px; min-height: 80px; }
.np-cover { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.np-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.np-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--neon2); }
.np-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-artist { font-size: .9rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-play { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--pink), #c4547e); box-shadow: 0 3px 8px rgba(194, 76, 120, .3);
  -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.np-play:hover { transform: scale(1.06); }
.np-play:focus-visible { outline: 2px solid var(--neon2); outline-offset: 2px; }
.np-play svg { width: 18px; height: 18px; margin-left: -2px; fill: currentColor; }
.np-embed iframe { display: block; width: 100%; height: 80px; border: 0; border-radius: 12px; }
.np-open { flex: none; display: block; border-radius: 50%; line-height: 0; }
.np-open:focus-visible { outline: 2px solid var(--neon2); outline-offset: 2px; }

@media (max-width: 759px) {
  .nav nav .np-menu { padding: 15px 4px; font-size: 1rem; border-radius: 0; border-bottom: 1px solid var(--line); width: 100%; }
}

/* Parallax photo band between sections (parallax.js moves the image slower than the page) */
.parallax { position: relative; overflow: hidden; height: clamp(220px, 40vh, 380px); margin: 16px 0; background: #14080a; }
.parallax img {
  position: absolute; left: 0; top: -36%; width: 100%; height: 172%;
  object-fit: cover; object-position: 50% 28%; will-change: transform;
}

/* Photos: not draggable/selectable, no iOS long-press save menu (see protect-images.js) */
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.backdrop img, .parallax img { pointer-events: none; }

/* Clickable logos on the project cards */
a.card-media { cursor: pointer; }
a.card-media .card-img { transition: transform .3s ease; }
.project:hover a.card-media .card-img { transform: scale(1.05); }
/* Several buttons side by side in a page hero */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero .hero-actions .btn { margin: 4px 0 20px; }
@media (prefers-reduced-motion: reduce) { a.card-media .card-img { transition: none; } }

/* ---------- Light/dark switch (header; theme.js) ----------
   Shows the moon in light mode and the sun in dark mode: the icon is where a press takes you. */
.theme-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 50%;
  -webkit-tap-highlight-color: transparent; transition: border-color .2s, box-shadow .2s, transform .3s;
}
/* The icons keep their own colours in every state (an orange sun like the logo's, a warm beige moon);
   hover only lights up the ring, and only on devices with a real hover (after a tap it would stay stuck). */
@media (hover: hover) {
  .theme-toggle:hover { border-color: var(--sakura); box-shadow: 0 0 0 3px light-dark(rgba(248, 189, 208, .35), rgba(248, 189, 208, .18)); }
}
.theme-toggle:focus-visible { outline: 2px solid var(--neon2); outline-offset: 2px; }
.theme-toggle:active { transform: rotate(-20deg); }
.theme-toggle svg { width: 18px; height: 18px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { fill: #ffb547; stroke: #f5862a; }
.theme-toggle .i-moon { fill: #f2d9a0; stroke: #c4943a; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
/* Desktop: logo left; light/dark switch first in the menu, then the links, all on the right */
@media (min-width: 760px) {
  .nav .logo { margin-right: auto; }
  .theme-toggle { order: 1; margin-right: 8px; }
  .nav nav { order: 2; }
}
@media (max-width: 759px) {
  .theme-toggle { width: 44px; height: 44px; margin-left: auto; border: 0; background: none; color: var(--text); }
  .theme-toggle svg { width: 21px; height: 21px; }
  .menu-toggle { order: 2; }
}
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }

/* Dark: the logo swaps to logo-dark.png (white letters, same sun); the white logo tiles on
   project cards are dimmed a little so they don't glare. */
:root img.logo-dark { display: none; }
:root[data-theme="dark"] img.logo-light { display: none; }
:root[data-theme="dark"] img.logo-dark { display: block; }
:root[data-theme="dark"] .card-media { background: #efe7ec; }
:root[data-theme="dark"] .hero-media { filter: brightness(.94); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.logo-light { display: none; }
  :root:not([data-theme="light"]) img.logo-dark { display: block; }
  :root:not([data-theme="light"]) .card-media { background: #efe7ec; }
  :root:not([data-theme="light"]) .hero-media { filter: brightness(.94); }
}

/* Footer: the word "Lesterwund" quietly links to the admin login */
.footer-copy .footer-admin { color: inherit; text-decoration: none; cursor: default; }
.footer-copy .footer-admin:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 3px; }

/* Skip link: first thing a keyboard user tabs to (WCAG 2.4.1) */
.skip-link { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--panel); color: var(--text); border: 2px solid var(--pink); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }