@import url("/fonts.css");

/* JSB-Ensemble Oslo. Standardpalett: lys varm grå, kald petrol (accent) og dyp plomme (detail, mark).
   Alternativ palett «rust» (petrol, rustrødt og oker) velges med data-palette="rust" på <html>.
   Kraftig grotesk i titlene (Archivo), vennlig grotesk i teksten (Figtree), venstrestilt oppsett med tydelige linjer. */
:root {
  --bg: #ebe6df;
  --paper: #f7f3ee;
  --ink: #24201f;
  --muted: #645b58;
  --line: #d2c8c2;
  --rule: #24201f;
  --accent: #1f5f63;
  --accent-ink: #f7f3ee;
  --detail: #74305a;
  --mark: #a9789a;
  --mark-ink: #6a2d52;
  --mark-tint: #ead9e2;
  --band: #1f5f63;
  --band-ink: #f7f3ee;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --radius: 6px;
  --max: 1260px;
  --gutter: 16px;
  color-scheme: light dark;
}
@media (min-width: 700px) { :root { --gutter: 46px; } }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171516;
    --paper: #211e20;
    --ink: #ede6e3;
    --muted: #ab9fa1;
    --line: #383134;
    --rule: #6c6266;
    --accent: #74b9b9;
    --accent-ink: #171516;
    --detail: #d99abf;
    --mark: #c39ab4;
    --mark-ink: #e6bfd6;
    --mark-tint: #35262f;
    --band: #173e40;
    --band-ink: #e7efea;
  }
}

/* Alternativ palett: petrol, rustrødt og oker. */
html[data-palette="rust"] {
  --bg: #ebe5da; --paper: #f6f2ea; --ink: #23201b; --muted: #645c51; --line: #cfc5b6; --rule: #23201b;
  --accent: #1f5f63; --accent-ink: #f6f2ea; --detail: #a84a2a;
  --mark: #c9973f; --mark-ink: #6e4c12; --mark-tint: #eedcb0; --band: #1f5f63; --band-ink: #f6f2ea;
}
@media (prefers-color-scheme: dark) {
  html[data-palette="rust"] {
    --bg: #171512; --paper: #211e1a; --ink: #ece5d8; --muted: #aaa091; --line: #3a352d; --rule: #6d6558;
    --accent: #74b9b9; --accent-ink: #171512; --detail: #e08a63;
    --mark: #dcb05c; --mark-ink: #e9c57d; --mark-tint: #3b311f; --band: #173e40; --band-ink: #e7efea;
  }
}

/* Palettvelger: vises bare i forhåndsvisningen på localhost (se main.js). */
.palette-picker { position: fixed; right: 12px; bottom: 12px; z-index: 50; display: flex; gap: 6px; align-items: center; padding: 6px 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font: 600 0.75rem/1 var(--sans); box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.palette-picker button { font: inherit; padding: 6px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--ink); cursor: pointer; }
.palette-picker button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1.08rem; line-height: 1.62; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.1; margin: 0; }
em { font-style: italic; }
[hidden] { display: none !important; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-top: 3rem; padding-bottom: 4.5rem; }
@media (min-width: 900px) { .section { padding-top: 4.5rem; padding-bottom: 6rem; } }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper); padding: 0.5rem 1rem; z-index: 10; }

.kicker { font-family: var(--sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--detail); margin: 0 0 1rem; }
.page-title { font-family: var(--display); font-size: clamp(2.3rem, 6.5vw, 4.6rem); font-weight: 700; text-transform: uppercase; letter-spacing: -0.015em; line-height: 0.98; margin-bottom: 1.4rem; overflow-wrap: anywhere; }
.intro { font-size: 1.2rem; max-width: 40rem; color: var(--muted); margin: 0 0 2.5rem; }
.prose { max-width: 40rem; }
.prose p { margin: 0 0 1.1rem; }
.prose h2 { font-family: var(--display); font-weight: 700; font-size: 1.25rem; margin: 2rem 0 0.8rem; }
.more { font-weight: 600; text-decoration: none; }
.more:hover { text-decoration: underline; }
.button { display: inline-block; font: inherit; font-weight: 600; font-size: 0.95rem; padding: 0.7rem 1.3rem; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--accent); border-radius: var(--radius); text-decoration: none; cursor: pointer; }
.button:hover { background: transparent; color: var(--accent); }
.button.ghost { background: transparent; color: var(--accent); }
.tag { display: inline-block; vertical-align: middle; margin-left: 0.6rem; font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.5rem; background: var(--mark-tint); color: var(--mark-ink); border-radius: 4px; }

/* topp */
.site-header { border-bottom: 2px solid var(--rule); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; flex-wrap: wrap; }
.brand { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; font-size: 1.05rem; }
.brand span { color: var(--accent); }
.nav-toggle { font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: none; border: 2px solid var(--rule); color: var(--ink); padding: 0.35rem 0.8rem; border-radius: var(--radius); cursor: pointer; }
.site-nav { display: none; width: 100%; }
.site-nav.open { display: block; }
.site-nav ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.site-nav li a { display: block; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.site-nav a, .lang-switch a { color: var(--ink); text-decoration: none; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); }
.lang-switch { display: flex; gap: 0.9rem; padding: 0.8rem 0; }
.lang-switch a { color: var(--muted); }
.lang-switch a[aria-current="true"] { color: var(--ink); border-bottom: 2px solid var(--mark); }
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; width: auto; align-items: center; gap: 2.5rem; }
  .site-nav ul { display: flex; gap: 2rem; margin: 0; }
  .site-nav li a { border: 0; padding: 0; }
  .lang-switch { padding: 0; }
}

/* forside */
.hero { border-bottom: 2px solid var(--rule); }
.hero-grid { display: grid; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 4fr 8fr; gap: 0 3rem; padding-top: 3.5rem; padding-bottom: 4rem; }
  .display { grid-column: 1 / -1; margin-bottom: 2.5rem; }
  .hero-text { align-self: stretch; display: flex; flex-direction: column; }
  .hero-text .tagline { font-size: clamp(1.25rem, 1.75vw, 1.6rem); line-height: 1.28; max-width: none; padding-top: 1rem; border-top: 3px solid var(--accent); }
  .hero-text .lead { margin-top: auto; padding-top: 1.5rem; }
  /* Venstre spalte følger selve videobildet; bildeteksten står for seg under. */
  .hero-grid { grid-template-rows: auto auto auto; }
  .hero-media, .hero-media .rec { display: contents; }
  .hero-media .yt { grid-column: 2; grid-row: 2; }
  .hero-media figcaption { grid-column: 2; grid-row: 3; }
  .hero-text { grid-column: 1; grid-row: 2; }
  .hero-text .lead { font-size: 1.05rem; line-height: 1.55; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .hero-grid { grid-template-columns: 5fr 7fr; gap: 0 2.5rem; }
}
.display { font-family: var(--display); font-size: clamp(2.6rem, 11vw, 7.4rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.9; margin: 0; }
.display span { display: block; }
.display span:nth-child(2) { color: var(--accent); }
@media (min-width: 900px) { .display { font-size: clamp(4rem, 8.2vw, 6.4rem); white-space: nowrap; } .display span { display: inline; } }
.tagline { font-size: 1.4rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; margin: 0 0 0.75rem; max-width: 22rem; }
.lead { color: var(--muted); margin: 0; max-width: 26rem; }
.hero-media { margin: 0; }
.hero-media .rec-title { font-size: 1.05rem; }
.band-photo { margin: 0; }
.band-photo img { width: 100%; border-radius: var(--radius); filter: grayscale(1) sepia(0.1); }
.about-photo img { width: 100%; border-radius: var(--radius); filter: grayscale(1) sepia(0.1); }
.credit { font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; }

.next { background: var(--band); color: var(--band-ink); padding: 2rem 0; }
.next .kicker { color: var(--band-ink); opacity: 0.8; }
.next-list { list-style: none; margin: 0; padding: 0; }
.next-list a { display: grid; gap: 0.15rem; padding: 0.9rem 0; border-top: 1px solid color-mix(in srgb, var(--band-ink) 30%, transparent); color: var(--band-ink); text-decoration: none; }
.next-list a:hover .n-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (min-width: 900px) { .next-list a { grid-template-columns: 15rem 1fr 1.3fr; gap: 2rem; align-items: baseline; } }
.n-date { font-weight: 600; font-size: 0.95rem; }
.n-title { font-family: var(--display); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.1; }
.n-place { opacity: 0.88; }

.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

/* prosjektliste */
.projects { list-style: none; margin: 0; padding: 0; border-bottom: 2px solid var(--rule); }
.proj { border-top: 2px solid var(--rule); }
.proj-link { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; padding: 1.3rem 0.2rem; color: var(--ink); text-decoration: none; border-radius: var(--radius); transition: background 0.15s; }
.proj-link:hover, .proj-link:focus-visible { background: var(--paper); }
.proj-year { grid-column: 1 / -1; font-weight: 600; color: var(--detail); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.proj-body { display: grid; gap: 0.25rem; }
.proj-title { font-family: var(--display); font-size: clamp(1.45rem, 3.2vw, 2.25rem); font-weight: 700; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1; }
.proj-sub { font-size: 1.05rem; }
.proj-places { font-size: 0.86rem; color: var(--muted); }
.proj-arrow { align-self: center; font-size: 1.5rem; color: var(--detail); padding-right: 0.4rem; transition: transform 0.15s; }
.proj-link:hover .proj-arrow, .proj-link:focus-visible .proj-arrow { transform: translateX(5px); }
.proj-link:hover .proj-title { color: var(--accent); }
@media (min-width: 800px) {
  .proj-link { grid-template-columns: 9rem 1fr auto; padding: 1.6rem 0.6rem; }
  .proj-year { grid-column: auto; padding-top: 0.35rem; }
}

/* bånd med opptak og omtale */
.band { background: var(--paper); border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); padding: 3rem 0 3.5rem; }
.band-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .band-grid { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; } .band-text { padding-top: 2.1rem; } }

/* opptak */
.recs { display: grid; gap: 2.5rem; margin-bottom: 2.5rem; }
@media (min-width: 800px) { .recs { grid-template-columns: repeat(2, 1fr); gap: 3rem 2.5rem; } }
.rec { margin: 0; }
.rec figcaption { padding-top: 0.8rem; }
.rec-title { font-weight: 600; margin: 0; line-height: 1.3; }
.rec-from { margin: 0.1rem 0 0; font-style: italic; }
.rec-meta { margin: 0.35rem 0 0; font-size: 0.86rem; color: var(--muted); }
.rec-proj { margin: 0.35rem 0 0; font-size: 0.86rem; }
.yt { position: relative; aspect-ratio: 16 / 9; background: #171512; overflow: hidden; border-radius: var(--radius); }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt-play { position: absolute; inset: 0; width: 100%; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
.yt-icon { width: 62px; height: 62px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; transition: transform 0.15s; }
.yt-icon svg { width: 15px; height: 18px; margin-left: 3px; }
.yt:hover .yt-icon, .yt-play:focus-visible .yt-icon { transform: scale(1.07); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt > img { position: relative; z-index: 1; }
.yt-play { z-index: 2; }
.yt-pre { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.yt-pre iframe { inset: auto; left: -100%; top: -100%; width: 300%; height: 300%; }
.yt-ready .yt-pre { pointer-events: auto; }
.yt-ready > img { opacity: 1; pointer-events: none; }
.yt-ready .yt-play { pointer-events: none; }
.yt-live .yt-pre iframe { left: 0; top: 0; width: 100%; height: 100%; }
.audio { background: var(--ink); color: var(--bg); border-radius: var(--radius); padding: 1.5rem; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; }
.audio-title { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; line-height: 1.1; }
.audio audio { width: 100%; }

/* prosjektside */
.crumb { margin: 0 0 2rem; font-size: 0.9rem; }
.crumb a { text-decoration: none; font-weight: 600; }
.p-head { border-bottom: 2px solid var(--rule); padding-bottom: 1.5rem; margin-bottom: 2.5rem; }
.p-year { font-weight: 600; color: var(--detail); margin: 0 0 0.6rem; }
.p-head .page-title { margin-bottom: 0.8rem; }
.p-sub { font-size: 1.3rem; margin: 0; max-width: 40rem; }
.p-grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .p-grid { grid-template-columns: 2fr 1fr; gap: 5rem; } .p-side { border-left: 2px solid var(--rule); padding-left: 2rem; } }
.p-main > section, .p-side > section { margin-top: 2.5rem; }
.p-side > section:first-child { margin-top: 0; }
.p-media .rec { margin-bottom: 2rem; max-width: 40rem; }
.partners { margin: 1.5rem 0 0; }
.partners .kicker { display: block; margin-bottom: 0.3rem; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 0.45rem 0; border-top: 1px solid var(--line); }
.plain.small li { font-size: 0.93rem; padding: 0.3rem 0; }
.prog-works { list-style: none; margin: 0.25rem 0 0; padding: 0 0 0 1rem; }
.plain .prog-works li { border-top: 0; padding: 0.15rem 0; }
.plain .prog-works .prog-label { padding-top: 0.6rem; font-style: italic; color: var(--muted); }
.concerts { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.concert { display: grid; gap: 0.15rem; padding: 0.8rem 0; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .concert { grid-template-columns: 16rem 1fr; gap: 1.5rem; } .c-when { white-space: nowrap; } }
.c-date { font-weight: 600; }
.c-time { color: var(--muted); margin-left: 0.5rem; }
.c-frame, .c-note { display: block; font-size: 0.86rem; color: var(--muted); }
.c-where a { text-decoration: none; color: inherit; }
.c-where a:hover { color: var(--accent); }

/* om og kontakt */
.about-grid, .contact-grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 3fr 2fr; gap: 5rem; } .contact-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.about-photo { margin: 0 0 2rem; }
.leaders { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.leaders li { display: grid; padding: 0.8rem 0; border-top: 2px solid var(--rule); }
.l-name { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; }
.l-role { color: var(--muted); }
.leaders a { font-size: 0.9rem; }
.contact-form { display: grid; gap: 1.1rem; align-content: start; }
.contact-form label { display: grid; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 400; padding: 0.7rem 0.8rem; background: var(--paper); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); }
.contact-form .button { justify-self: start; }
.hp { position: absolute; left: -9999px; }
.form-status { margin: 0; min-height: 1.5em; }
.form-status.ok { color: var(--accent); font-weight: 600; }
.form-status.err { color: #a8321f; font-weight: 600; }

/* bunn */
.site-footer { border-top: 2px solid var(--rule); padding: 2rem 0 2.5rem; font-size: 0.9rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; }
.footer-inner p { margin: 0; }
.footer-name { font-family: var(--display); font-weight: 800; text-transform: uppercase; }
.site-footer a { color: var(--ink); }

/* ===================================================================================
   Alternativ: DIPTYK. To felt hengslet sammen: et lyst «gammelt» felt (lys plommegrå, Bodoni)
   og et mørkt «nytt» felt (petrol, Archivo), skilt av en tynn gullinje. Velges med
   data-palette="diptyk" på <html>. Bygget som et eget lag oppå standardoppsettet.
   =================================================================================== */
html[data-palette="diptyk"] {
  /* lys bakgrunn med et skjær av plomme, dyp petrol i de mørke feltene og messing som hengsel */
  --old: #ede4e9; --old-ink: #241e22; --old-muted: #675a62;
  --new: #163a3c; --new-ink: #eef0ec; --new-muted: #a7bcbb;
  /* messing: gull med et svakt kjølig skjær, mellom varmt gull og grønnlig messing */
  --hinge: #ad924a; --hinge-soft: rgba(173, 146, 74, 0.5);
  --bg: var(--old); --paper: #f6f1f4; --ink: var(--old-ink); --muted: var(--old-muted);
  --line: #d9cbd3; --rule: var(--old-ink);
  --accent: #1f5f63; --accent-ink: #f6f1f4; --detail: #74305a;
  --mark: var(--hinge); --mark-ink: #6a2d52; --mark-tint: #e6d3de;
  --band: var(--new); --band-ink: var(--new-ink);
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --radius: 2px;
}
@media (prefers-color-scheme: dark) {
  html[data-palette="diptyk"] {
    --old: #1e191c; --old-ink: #eee6ea; --old-muted: #ad9fa7;
    --new: #0f2a2b; --new-ink: #e7efea; --new-muted: #98b0ae;
    --hinge: #c8ae6a; --hinge-soft: rgba(200, 174, 106, 0.5);
    --paper: #282125; --line: #3b3237; --rule: #6e6369;
    --accent: #74b9b9; --accent-ink: #0f2a2b; --detail: #d99abf;
    --mark-ink: #e6bfd6; --mark-tint: #37272f;
  }
}

/* Fargevariant av diptyken: GRAFITT/SIGNAL (data-farger="signal"). Samme oppsett, andre farger:
   ubleket papir (håndverk), grafitt i de mørke feltene (moderne) og signalrødt hengsel (risiko). */
html[data-palette="diptyk"][data-farger="signal"] {
  --old: #f1eee7; --old-ink: #161616; --old-muted: #5f5c57;
  --new: #1a1b1d; --new-ink: #f1eee7; --new-muted: #a3a09a;
  --hinge: #f04e2b; --hinge-soft: rgba(240, 78, 43, 0.45);
  --paper: #f8f6f1; --line: #dcd7cd;
  --accent: #b93216; --accent-ink: #ffffff; --detail: #161616;
  --mark-ink: #a52d14; --mark-tint: #f6ddd5;
}
@media (prefers-color-scheme: dark) {
  html[data-palette="diptyk"][data-farger="signal"] {
    --old: #121212; --old-ink: #ece9e2; --old-muted: #a29f98;
    --new: #2a2b2e; --new-ink: #ece9e2; --new-muted: #9b9892;
    --hinge: #ff5a36; --hinge-soft: rgba(255, 90, 54, 0.45);
    --paper: #1b1b1b; --line: #2f2e2c; --rule: #6b6862;
    --accent: #ff6a47; --accent-ink: #121212; --detail: #ece9e2;
    --mark-ink: #ff9a80; --mark-tint: #3a1f18;
  }
}

/* Fargevariant av diptyken: KALK/SKIFER (data-farger="utstilling"). Tenkt som et skandinavisk arkitektkontors
   utstillingsdesign for diptyker fra kirkekunsten: kalket vegg, skifergrå vegger bak verkene,
   bladgull som hengsel, ultramarin (lasur) og eik som små aksenter. */
html[data-palette="diptyk"][data-farger="utstilling"] {
  --old: #f2f0eb; --old-ink: #1f2224; --old-muted: #646a6c;
  --new: #2c383d; --new-ink: #eef0ee; --new-muted: #a9b4b6;
  --hinge: #c4a364; --hinge-soft: rgba(196, 163, 100, 0.5);
  --paper: #f8f7f3; --line: #dcd9d1;
  --accent: #31507f; --accent-ink: #ffffff; --detail: #7d5f38;
  --mark-ink: #31507f; --mark-tint: #e3e7ee;
}
@media (prefers-color-scheme: dark) {
  html[data-palette="diptyk"][data-farger="utstilling"] {
    --old: #1b1e1f; --old-ink: #ecebe6; --old-muted: #a3a8a9;
    --new: #263136; --new-ink: #ecebe6; --new-muted: #a2aeb1;
    --hinge: #c9a96a; --hinge-soft: rgba(201, 169, 106, 0.5);
    --paper: #212526; --line: #343a3c; --rule: #6c7375;
    --accent: #8fa9d6; --accent-ink: #1b1e1f; --detail: #c9a97a;
    --mark-ink: #b7c8e6; --mark-tint: #28303b;
  }
}

/* typografi: Bodoni for titler (det gamle), Archivo for etiketter (det nye) */
html[data-palette="diptyk"] .page-title,
html[data-palette="diptyk"] .proj-title,
html[data-palette="diptyk"] .n-title,
html[data-palette="diptyk"] .l-name,
html[data-palette="diptyk"] .audio-title,
html[data-palette="diptyk"] .footer-name { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -0.01em; }
html[data-palette="diptyk"] .page-title { font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: 1.02; }
html[data-palette="diptyk"] .kicker { font-family: var(--display); font-weight: 700; letter-spacing: 0.2em; color: var(--detail); }
html[data-palette="diptyk"] .button { border-radius: 0; }

/* topp: navnet delt i to skrifter */
html[data-palette="diptyk"] .site-header { border-bottom: 1px solid var(--hinge-soft); }
html[data-palette="diptyk"] .brand { font-family: var(--serif); font-weight: 400; text-transform: none; font-size: 1.35rem; letter-spacing: 0; }
html[data-palette="diptyk"] .brand span { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.08em; color: var(--accent); }
html[data-palette="diptyk"] .lang-switch a[aria-current="true"] { border-bottom-color: var(--hinge); }

/* forsiden: to felt med hengsel */
html[data-palette="diptyk"] .hero { border-bottom: 0; background: var(--old); }
html[data-palette="diptyk"] .display { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -0.02em; line-height: 0.95; white-space: normal; }
html[data-palette="diptyk"] .display span { display: block; }
html[data-palette="diptyk"] .display span:nth-child(2) { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--accent); font-size: 0.62em; margin-top: 0.25em; }
html[data-palette="diptyk"] .hero-text .tagline { border-top: 0; padding-top: 0; font-weight: 400; font-family: var(--serif); font-style: italic; }
html[data-palette="diptyk"] .hero-media .yt { border-radius: 0; }
@media (min-width: 900px) {
  html[data-palette="diptyk"] .hero { background: linear-gradient(90deg, var(--old) 50%, var(--new) 50%); }
  html[data-palette="diptyk"] .hero-grid { position: relative; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 0; padding-top: 0; padding-bottom: 0; }
  html[data-palette="diptyk"] .hero-grid::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--hinge); }
  html[data-palette="diptyk"] .display { grid-column: 1; grid-row: 1; font-size: clamp(3.4rem, 6vw, 5.6rem); margin: 0; padding: 4rem 3rem 1.5rem 0; }
  html[data-palette="diptyk"] .hero-text { grid-column: 1; grid-row: 2 / span 2; padding: 0 3rem 4rem 0; }
  html[data-palette="diptyk"] .hero-text .lead { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--hinge-soft); }
  html[data-palette="diptyk"] .hero-media .yt { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 4rem 0 0 3rem; }
  html[data-palette="diptyk"] .hero-media figcaption { grid-column: 2; grid-row: 3; padding: 1rem 0 4rem 3rem; color: var(--new-ink); }
  html[data-palette="diptyk"] .hero-media figcaption .rec-meta { color: var(--new-muted); }
  html[data-palette="diptyk"] .hero-media figcaption a { color: var(--hinge); }
}
@media (max-width: 899px) {
  html[data-palette="diptyk"] .hero-media { display: block; background: var(--new); color: var(--new-ink); margin: 0 calc(-1 * var(--gutter)); padding: 1.5rem var(--gutter) 2rem; border-top: 1px solid var(--hinge); }
  html[data-palette="diptyk"] .hero-media .rec-meta { color: var(--new-muted); }
  html[data-palette="diptyk"] .hero-media a { color: var(--hinge); }
  html[data-palette="diptyk"] .hero-grid { padding-bottom: 0; }
}

/* neste konserter: etikett i det ene feltet, listen i det andre */
html[data-palette="diptyk"] .next { border-top: 1px solid var(--hinge); }
html[data-palette="diptyk"] .next .kicker { color: var(--hinge); opacity: 1; }
html[data-palette="diptyk"] .n-title { font-size: 1.5rem; }
@media (min-width: 900px) {
  html[data-palette="diptyk"] .next-box { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  html[data-palette="diptyk"] .next .kicker { padding-top: 1rem; padding-right: 3rem; }
  html[data-palette="diptyk"] .next { position: relative; }
  html[data-palette="diptyk"] .next::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--hinge); }
  html[data-palette="diptyk"] .next-list { padding-left: 3rem; }
  html[data-palette="diptyk"] .next-list a { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* prosjektlisten: tittel i det ene feltet, innhold i det andre */
html[data-palette="diptyk"] .projects, html[data-palette="diptyk"] .proj { border-color: var(--old-ink); border-width: 1px; }
html[data-palette="diptyk"] .proj-year { color: var(--detail); font-family: var(--display); font-weight: 700; letter-spacing: 0.08em; }
html[data-palette="diptyk"] .proj-title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.05; text-transform: none; }
html[data-palette="diptyk"] .proj-arrow { color: var(--hinge); }
html[data-palette="diptyk"] .proj-link:hover .proj-title { color: var(--accent); }
@media (min-width: 900px) {
  /* hengselet går ubrutt gjennom hele prosjektdelen, på samme sted som i delene over og under */
  html[data-palette="diptyk"] section.wrap:has(> .projects) { position: relative; }
  html[data-palette="diptyk"] section.wrap:has(> .projects)::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--hinge); }
  html[data-palette="diptyk"] .projects { position: relative; }
  html[data-palette="diptyk"] .projects::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--hinge); }
  html[data-palette="diptyk"] .proj-link { grid-template-columns: 1fr 1fr; column-gap: 0; position: relative; padding: 1.7rem 0; }
  html[data-palette="diptyk"] .proj-body { display: contents; }
  html[data-palette="diptyk"] .proj-year { grid-column: 1; grid-row: 1; padding: 0 3rem 0 0; }
  html[data-palette="diptyk"] .proj-title { grid-column: 1; grid-row: 2; padding-right: 3rem; }
  html[data-palette="diptyk"] .proj-sub { grid-column: 2; grid-row: 1 / span 2; align-self: end; padding: 0 3.5rem 0 3rem; font-family: var(--serif); font-style: italic; font-size: 1.15rem; }
  html[data-palette="diptyk"] .proj-places { grid-column: 2; grid-row: 3; padding: 0.3rem 3.5rem 0 3rem; }
  html[data-palette="diptyk"] .proj-arrow { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); }
  html[data-palette="diptyk"] .proj-link:hover .proj-arrow, html[data-palette="diptyk"] .proj-link:focus-visible .proj-arrow { transform: translate(5px, -50%); }
  html[data-palette="diptyk"] .section-head { position: relative; z-index: 1; }
}

/* båndet nederst: speilvendt i forhold til toppen (bilde i det mørke feltet, tekst i det lyse) */
html[data-palette="diptyk"] .band { border: 0; padding: 0; background: var(--old); }
html[data-palette="diptyk"] .band-photo img { border-radius: 0; }
@media (min-width: 900px) {
  html[data-palette="diptyk"] .band { background: linear-gradient(90deg, var(--new) 50%, var(--old) 50%); border-top: 1px solid var(--hinge); border-bottom: 1px solid var(--hinge); }
  html[data-palette="diptyk"] .band-grid { grid-template-columns: 1fr 1fr; gap: 0; position: relative; }
  html[data-palette="diptyk"] .band-grid::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--hinge); }
  html[data-palette="diptyk"] .band-photo { padding: 3.5rem 3rem 3.5rem 0; }
  html[data-palette="diptyk"] .band-photo .credit { color: var(--new-muted); }
  html[data-palette="diptyk"] .band-text { padding: 3.5rem 0 3.5rem 3rem; }
}
@media (max-width: 899px) {
  html[data-palette="diptyk"] .band-photo { background: var(--new); margin: 0 calc(-1 * var(--gutter)); padding: 2rem var(--gutter); }
  html[data-palette="diptyk"] .band-photo .credit { color: var(--new-muted); }
  html[data-palette="diptyk"] .band-text { padding: 2rem 0 2.5rem; }
}

/* prosjektsiden: tekst i det lyse feltet, program og medvirkende i det mørke */
html[data-palette="diptyk"] .p-head { border-bottom: 1px solid var(--hinge); }
html[data-palette="diptyk"] .p-year { color: var(--detail); font-family: var(--display); font-weight: 700; letter-spacing: 0.1em; }
html[data-palette="diptyk"] .p-sub { font-family: var(--serif); font-style: italic; }
html[data-palette="diptyk"] .p-side { background: var(--new); color: var(--new-ink); padding: 2rem; border: 0; border-left: 1px solid var(--hinge); }
html[data-palette="diptyk"] .p-side .kicker { color: var(--hinge); }
html[data-palette="diptyk"] .p-side .plain li { border-top-color: rgba(236, 230, 218, 0.16); }
@media (min-width: 900px) {
  html[data-palette="diptyk"] .p-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  html[data-palette="diptyk"] .p-side { padding: 2.5rem 2.5rem 2rem; }
}

/* om og kontakt: lederne og skjemaet i det mørke feltet */
html[data-palette="diptyk"] .leaders li { border-top-width: 1px; }
html[data-palette="diptyk"] .about-photo img { border-radius: 0; }
html[data-palette="diptyk"] .contact-form { background: var(--new); color: var(--new-ink); padding: 2rem; border-left: 1px solid var(--hinge); }
html[data-palette="diptyk"] .contact-form input, html[data-palette="diptyk"] .contact-form textarea { background: rgba(255,255,255,0.06); color: var(--new-ink); border: 1px solid rgba(236,230,218,0.25); border-radius: 0; }
html[data-palette="diptyk"] .contact-form input:focus, html[data-palette="diptyk"] .contact-form textarea:focus { border-color: var(--hinge); }
html[data-palette="diptyk"] .contact-form .button { background: var(--hinge); border-color: var(--hinge); color: var(--new); }

/* opptak */
html[data-palette="diptyk"] .yt, html[data-palette="diptyk"] .audio { border-radius: 0; }
html[data-palette="diptyk"] .yt-icon { background: var(--hinge); color: var(--new); }
html[data-palette="diptyk"] .audio { background: var(--new); color: var(--new-ink); }

/* bunn: to halvdeler */
html[data-palette="diptyk"] .site-footer { background: var(--new); color: var(--new-ink); border-top: 1px solid var(--hinge); }
html[data-palette="diptyk"] .site-footer a { color: var(--new-ink); }

/* Personer (lederne som et par, sangerne på rad). Vises foreløpig bare i diptyk-versjonen. */
.only-diptyk { display: none; }
html[data-palette="diptyk"] .only-diptyk { display: block; }
html[data-palette="diptyk"] .people { background: var(--old); border-top: 1px solid var(--hinge); padding: 3.5rem 0 4rem; position: relative; }
html[data-palette="diptyk"] .people .kicker { margin-bottom: 1.5rem; }
html[data-palette="diptyk"] .person { margin: 0; }
html[data-palette="diptyk"] .person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.03); }
html[data-palette="diptyk"] .person figcaption { display: grid; gap: 0.1rem; padding-top: 0.8rem; }
html[data-palette="diptyk"] .person .l-name { font-size: 1.5rem; }
html[data-palette="diptyk"] .person .credit { margin-top: 0.3rem; }
html[data-palette="diptyk"] .leader-pair { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  html[data-palette="diptyk"] .people::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--hinge); }
  html[data-palette="diptyk"] .leader-pair { grid-template-columns: 1fr 1fr; gap: 0; }
  html[data-palette="diptyk"] .leader-pair .person:first-child { padding-right: 3rem; }
  html[data-palette="diptyk"] .leader-pair .person:last-child { padding-left: 3rem; }
  html[data-palette="diptyk"] .leader-pair img { max-height: 560px; }
  /* to og to på hver side av hengselet: et smalt, tomt midtspor i rutenettet */
    html[data-palette="diptyk"] .singer-row .person:nth-child(4n+1) { grid-column: 1; }
  html[data-palette="diptyk"] .singer-row .person:nth-child(4n+2) { grid-column: 2; }
  html[data-palette="diptyk"] .singer-row .person:nth-child(4n+3) { grid-column: 4; }
  html[data-palette="diptyk"] .singer-row .person:nth-child(4n) { grid-column: 5; }
}

/* Presentasjoner under «Om ensemblet» (alle versjoner) */
.bios { margin-top: 4rem; }
.bios .kicker { margin-top: 2.5rem; }
.bio-list { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .bio-list { grid-template-columns: 1fr 1fr; gap: 3rem 4rem; } }
.bio { display: grid; grid-template-columns: 130px 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 600px) { .bio { grid-template-columns: 170px 1fr; gap: 1.75rem; } }
.bio .person { margin: 0; }
.bio .person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.bio .person figcaption { display: grid; gap: 0.05rem; padding-top: 0.6rem; }
.bio .l-name { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0; }
.bio .l-role { font-size: 0.86rem; color: var(--muted); }
.bio .credit { margin-top: 0.25rem; font-size: 0.72rem; }
.bio-text p { margin: 0 0 0.6rem; }
.bio-link { font-size: 0.9rem; }

/* Diptyk: hver presentasjon er en liten diptyk, bilde og tekst på hver sin side av hengselet */
html[data-palette="diptyk"] .bio .person img { border-radius: 0; filter: grayscale(1) contrast(1.03); }
html[data-palette="diptyk"] .bio .l-name { font-family: var(--serif); font-weight: 400; text-transform: none; font-size: 1.3rem; }
.bio-pair { display: contents; }
/* Sangerne to og to: hvert par er en diptyk, med bildene inn mot hengselet og feltene i sjakkmønster
   (samme oppbygning som prosjektsidene). På mobil står presentasjonene under hverandre i vekslende felt. */
html[data-palette="diptyk"] .bio-dark { background: var(--new); color: var(--new-ink); }
html[data-palette="diptyk"] .bio-dark .l-role, html[data-palette="diptyk"] .bio-dark .credit { color: var(--new-muted); }
html[data-palette="diptyk"] .bio-dark a { color: var(--hinge); }
@media (max-width: 899px) {
  html[data-palette="diptyk"] .bio-list { gap: 0; }
  html[data-palette="diptyk"] .bio { margin: 0 calc(-1 * var(--gutter)); padding: 2rem var(--gutter); }
  html[data-palette="diptyk"] .bio-dark { border-top: 1px solid var(--hinge); border-bottom: 1px solid var(--hinge); }
}
@media (min-width: 900px) {
  html[data-palette="diptyk"] main:has(.bio-pair) { overflow-x: clip; }
  html[data-palette="diptyk"] .bio-list { grid-template-columns: 1fr; gap: 0; isolation: isolate; }
  html[data-palette="diptyk"] .bio-pair { display: grid; grid-template-columns: 1fr 1fr; }
  html[data-palette="diptyk"] .bio { position: relative; background: var(--old); grid-template-columns: 1fr 190px; gap: 2rem; padding: 3rem 3rem 3rem 0; align-items: start; }
  html[data-palette="diptyk"] .bio.bio-dark { background: var(--new); }
  html[data-palette="diptyk"] .bio .person { grid-column: 2; grid-row: 1; }
  html[data-palette="diptyk"] .bio .bio-text { grid-column: 1; grid-row: 1; }
  html[data-palette="diptyk"] .bio .person figcaption { text-align: right; }
  html[data-palette="diptyk"] .bio-pair .bio:last-child { grid-template-columns: 190px 1fr; padding: 3rem 0 3rem 3rem; border-left: 1px solid var(--hinge); }
  html[data-palette="diptyk"] .bio-pair .bio:last-child .person { grid-column: 1; }
  html[data-palette="diptyk"] .bio-pair .bio:last-child .bio-text { grid-column: 2; }
  html[data-palette="diptyk"] .bio-pair .bio:last-child .person figcaption { text-align: left; }
  html[data-palette="diptyk"] .bio::before { content: ""; position: absolute; top: 0; bottom: 0; width: 100vw; background: inherit; z-index: -1; margin: 0; }
  html[data-palette="diptyk"] .bio-pair .bio:first-child::before { right: 100%; }
  html[data-palette="diptyk"] .bio-pair .bio:last-child::before { left: 100%; }
}

/* Diptyk: to av de medvirkende som et par øverst på prosjektsiden */
html[data-palette="diptyk"] .p-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 3rem; }
html[data-palette="diptyk"] .p-pair .person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.03); }
html[data-palette="diptyk"] .p-pair figcaption { display: grid; padding-top: 0.6rem; }
html[data-palette="diptyk"] .p-pair .l-name { font-family: var(--serif); font-size: 1.25rem; }
html[data-palette="diptyk"] .p-pair .l-role { color: var(--muted); font-size: 0.86rem; }
@media (min-width: 900px) {
  html[data-palette="diptyk"] .p-pair { gap: 0; position: relative; }
  html[data-palette="diptyk"] .p-pair::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--hinge); }
  html[data-palette="diptyk"] .p-pair .person:first-child { padding-right: 3rem; display: grid; justify-items: end; }
  html[data-palette="diptyk"] .p-pair .person:last-child { padding-left: 3rem; }
  html[data-palette="diptyk"] .p-pair .person img { max-width: 300px; }
  html[data-palette="diptyk"] .p-pair .person:first-child figcaption { text-align: right; }
}

/* Diptyk-parene som ett verk: felles ramme, to like tavler, hengselet som eneste skille,
   bildetekster som leses inn mot midten. Parene holder sammen også på mobil. */
html[data-palette="diptyk"] .p-pair,
html[data-palette="diptyk"] .leader-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative;
  max-width: 700px; margin: 0 auto 3rem; padding: 12px;
  background: var(--paper); border: 1px solid var(--hinge);
}
html[data-palette="diptyk"] .p-pair::before,
html[data-palette="diptyk"] .leader-pair::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--hinge);
}
html[data-palette="diptyk"] .p-pair .person:first-child,
html[data-palette="diptyk"] .leader-pair .person:first-child { display: block; margin: 0; padding: 0 6px 0 0; }
html[data-palette="diptyk"] .p-pair .person:last-child,
html[data-palette="diptyk"] .leader-pair .person:last-child { display: block; margin: 0; padding: 0 0 0 6px; }
html[data-palette="diptyk"] .p-pair .person:nth-child(n) img,
html[data-palette="diptyk"] .leader-pair .person:nth-child(n) img { width: 100%; max-width: none; max-height: none; aspect-ratio: 4 / 5; object-fit: cover; }
html[data-palette="diptyk"] .p-pair figcaption,
html[data-palette="diptyk"] .leader-pair figcaption { padding: 0.7rem 0.2rem 0.1rem; }
html[data-palette="diptyk"] .p-pair .person:first-child figcaption,
html[data-palette="diptyk"] .leader-pair .person:first-child figcaption { text-align: right; }
html[data-palette="diptyk"] .p-pair .person:last-child figcaption,
html[data-palette="diptyk"] .leader-pair .person:last-child figcaption { text-align: left; }
html[data-palette="diptyk"] .leader-pair .l-name { font-size: 1.35rem; }
@media (max-width: 599px) {
  html[data-palette="diptyk"] .p-pair, html[data-palette="diptyk"] .leader-pair { padding: 8px; }
  html[data-palette="diptyk"] .p-pair .l-name, html[data-palette="diptyk"] .leader-pair .l-name { font-size: 1.05rem; }
  html[data-palette="diptyk"] .p-pair .credit, html[data-palette="diptyk"] .leader-pair .credit { display: none; }
}

/* Diptyk: de delte feltene og hengselet tegnes av samme element, så de alltid faller sammen.
   Toppen og neste konserter har petrol til høyre (én sammenhengende søyle), båndet nederst til venstre. */
@media (min-width: 900px) {
  html[data-palette="diptyk"] .hero,
  html[data-palette="diptyk"] .next,
  html[data-palette="diptyk"] .band { position: relative; background: var(--old); }
  html[data-palette="diptyk"] .hero::before,
  html[data-palette="diptyk"] .next::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; background: var(--new); }
  html[data-palette="diptyk"] .band::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 50%; background: var(--new); }
  html[data-palette="diptyk"] .hero::after,
  html[data-palette="diptyk"] .next::after,
  html[data-palette="diptyk"] .band::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; background: var(--hinge); z-index: 2; }
  html[data-palette="diptyk"] .hero-grid::after,
  html[data-palette="diptyk"] .band-grid::after { content: none; }
  html[data-palette="diptyk"] .hero-grid,
  html[data-palette="diptyk"] .next .wrap,
  html[data-palette="diptyk"] .band-grid { position: relative; z-index: 1; }
  /* neste konserter: etiketten i det lyse feltet, listen i det mørke */
  html[data-palette="diptyk"] .next { color: var(--old-ink); border-top: 0; }
  html[data-palette="diptyk"] .next .kicker { color: var(--detail); }
  html[data-palette="diptyk"] .next-list a { color: var(--new-ink); border-top-color: rgba(238, 240, 236, 0.18); }
  html[data-palette="diptyk"] .next-list a .n-place { color: var(--new-muted); opacity: 1; }
  /* de andre hengslene: samme bredde og plassering */
  html[data-palette="diptyk"] section.wrap:has(> .projects)::before,
  html[data-palette="diptyk"] .projects::before,
  html[data-palette="diptyk"] .people::before,
  html[data-palette="diptyk"] .p-pair::before,
  html[data-palette="diptyk"] .leader-pair::before { margin-left: -0.5px; }
}

/* Diptyk: «Neste konserter» som et par over hengselet – tittelen i det lyse feltet, inn mot streken,
   listen i det mørke. En gullinje over hele bredden skiller stripen fra videoen over. */
@media (min-width: 900px) {
  html[data-palette="diptyk"] .next { border-top: 1px solid var(--hinge); padding: 2.6rem 0 2.8rem; }
  html[data-palette="diptyk"] .next-box { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  html[data-palette="diptyk"] .next .kicker {
    font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -0.01em;
    font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.05; color: var(--old-ink);
    text-align: right; margin: 0; padding: 0 3rem 0 0;
  }
  html[data-palette="diptyk"] .next-list { padding-left: 3rem; }
  html[data-palette="diptyk"] .next-list li:first-child a { border-top: 0; padding-top: 0.15rem; }
}
@media (min-width: 900px) {
  /* gullinje under neste konserter, så petrolfeltet avsluttes like tydelig som det begynner */
  html[data-palette="diptyk"] .next { border-bottom: 1px solid var(--hinge); }
}

.all-link { margin: 2rem 0 0; }
html[data-palette="diptyk"] .all-link { position: relative; z-index: 1; text-align: center; }
html[data-palette="diptyk"] .all-link .button { background: var(--old); }

/* Prosjektlisten: programmet foran årstallet */
.proj-composers { font-weight: 600; color: var(--accent); font-size: 1.02rem; }
.proj-places { letter-spacing: 0.02em; }
@media (min-width: 800px) {
  .proj-link { grid-template-columns: 1fr auto; }
}
html[data-palette="diptyk"] .proj-composers { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.2rem; color: var(--old-ink); }
html[data-palette="diptyk"] .proj-sub { font-family: var(--sans); font-style: normal; font-size: 0.98rem; }
@media (min-width: 900px) {
  /* diptyk: tittelen i det ene feltet, programmet (komponister, undertittel, år og steder) i det andre */
  html[data-palette="diptyk"] .proj-link { grid-template-columns: 1fr 1fr; grid-template-rows: auto; align-items: start; }
  html[data-palette="diptyk"] .proj-title { grid-column: 1; grid-row: 1 / span 3; align-self: start; padding-right: 3rem; }
  html[data-palette="diptyk"] .proj-composers { grid-column: 2; grid-row: 1; padding: 0.3rem 3.5rem 0 3rem; }
  html[data-palette="diptyk"] .proj-sub { grid-column: 2; grid-row: 2; align-self: start; padding: 0.25rem 3.5rem 0 3rem; font-style: normal; font-family: var(--sans); font-size: 0.98rem; }
  html[data-palette="diptyk"] .proj-places { grid-column: 2; grid-row: 3; padding: 0.35rem 3.5rem 0 3rem; }
}

.bios-note { margin: -0.4rem 0 1.6rem; color: var(--muted); max-width: 40rem; }

/* Prosjektside satt opp som diptyk (oppsett: "diptyk"): to fløyer per rad, rad på rad som et sjakkmønster.
   Hver fløy har sin egen farge og strekker den ut til skjermkanten, og hengselet er venstrekanten
   på høyre fløy. Da står farger og gullstrek på nøyaktig samme piksel i alle rader. */
.p-dip { display: grid; gap: 2.5rem; margin: 3rem 0; }
.p-dip-top { margin-top: 0; }
.p-after > section { margin-top: 2.5rem; }
.p-leaf-media .rec + .rec { margin-top: 2rem; }
@media (min-width: 900px) {
  .p-dip { grid-template-columns: 1fr 1fr; gap: 0; }
  .p-leaf:first-child { padding-right: 3rem; }
  .p-leaf:last-child { padding-left: 3rem; border-left: 2px solid var(--rule); }
}
html[data-palette="diptyk"] .p-diptyk .p-head { border-bottom: 0; padding-bottom: 0.5rem; }
html[data-palette="diptyk"] .p-leaf-new { background: var(--new); color: var(--new-ink); margin: 0 calc(-1 * var(--gutter)); padding: 2rem var(--gutter) 2.25rem; border-top: 1px solid var(--hinge); }
html[data-palette="diptyk"] .p-leaf-new .kicker { color: var(--hinge); }
html[data-palette="diptyk"] .p-leaf-new .plain li { border-top-color: rgba(236, 230, 218, 0.16); }
html[data-palette="diptyk"] .p-leaf-media .rec-meta { color: var(--new-muted); }
html[data-palette="diptyk"] .p-leaf-media a { color: var(--hinge); }
@media (max-width: 899px) {
  html[data-palette="diptyk"] .p-dip-top { margin-top: -1rem; }
  html[data-palette="diptyk"] .p-dip-top .p-leaf-media { border-top: 0; }
}
@media (min-width: 900px) {
  html[data-palette="diptyk"] main:has(.p-dip) { overflow-x: clip; }
  html[data-palette="diptyk"] .p-dip { margin: 3.5rem 0 1rem; isolation: isolate; }
  html[data-palette="diptyk"] .p-dip-top { margin-top: 0; margin-bottom: 0; }
  html[data-palette="diptyk"] .p-dip-top + .p-dip { margin-top: 0; }
  html[data-palette="diptyk"] .p-leaf { position: relative; margin: 0; border: 0; background: var(--old); padding: 3.5rem 3rem 3.5rem 0; }
  html[data-palette="diptyk"] .p-leaf-new { background: var(--new); }
  html[data-palette="diptyk"] .p-leaf:last-child { padding: 3.5rem 0 3.5rem 3rem; border-left: 1px solid var(--hinge); }
  html[data-palette="diptyk"] .p-leaf::before { content: ""; position: absolute; top: 0; bottom: 0; width: 100vw; background: inherit; z-index: -1; }
  html[data-palette="diptyk"] .p-leaf:first-child::before { right: 100%; }
  html[data-palette="diptyk"] .p-leaf:last-child::before { left: 100%; }
}

/* Variant: diptykfeltene innenfor marginene, som programfeltet på de andre prosjektsidene (data-felt="ramme").
   De mørke feltene får luft på alle kanter; tekst i de lyse feltene står i flukt med resten av siden. */
html[data-palette="diptyk"][data-felt="ramme"] .p-leaf-new,
html[data-palette="diptyk"][data-felt="ramme"] .bio-dark { margin-left: 0; margin-right: 0; padding-left: 1.5rem; padding-right: 1.5rem; border-top: 0; border-bottom: 0; }
@media (max-width: 899px) {
  html[data-palette="diptyk"][data-felt="ramme"] .bio { margin: 0; padding-left: 0; padding-right: 0; }
  html[data-palette="diptyk"][data-felt="ramme"] .bio-dark { padding: 2rem 1.5rem; }
  html[data-palette="diptyk"][data-felt="ramme"] .p-dip-top { margin-top: 0; }
}
@media (min-width: 900px) {
  html[data-palette="diptyk"][data-felt="ramme"] .p-leaf::before,
  html[data-palette="diptyk"][data-felt="ramme"] .bio::before { display: none; }
  html[data-palette="diptyk"][data-felt="ramme"] .p-leaf:first-child,
  html[data-palette="diptyk"][data-felt="ramme"] .bio-pair .bio:first-child { padding-left: 0; }
  html[data-palette="diptyk"][data-felt="ramme"] .p-leaf:last-child,
  html[data-palette="diptyk"][data-felt="ramme"] .bio-pair .bio:last-child { padding-right: 0; }
  html[data-palette="diptyk"][data-felt="ramme"] .p-leaf-new:first-child,
  html[data-palette="diptyk"][data-felt="ramme"] .bio-pair .bio-dark:first-child { padding-left: 2.5rem; }
  html[data-palette="diptyk"][data-felt="ramme"] .p-leaf-new:last-child,
  html[data-palette="diptyk"][data-felt="ramme"] .bio-pair .bio-dark:last-child { padding-right: 2.5rem; }
}

/* Om ensemblet: portrettene i hvert par står inntil hengselet med litt luft, som personparene på prosjektsidene */
@media (min-width: 900px) {
  html[data-palette="diptyk"] .bio-pair .bio:first-child { padding-right: 6px; }
  html[data-palette="diptyk"] .bio-pair .bio:last-child { padding-left: 6px; }
  html[data-palette="diptyk"] .bio-pair .bio:first-child .person figcaption { padding-right: 0.2rem; }
  html[data-palette="diptyk"] .bio-pair .bio:last-child .person figcaption { padding-left: 0.2rem; }
}
/* Ramme rundt hver halvdel av portrettparet; hengselet er den felles midtstreken */
@media (min-width: 900px) {
  html[data-palette="diptyk"] .bio-pair .bio:first-child { grid-template-columns: 1fr 208px; }
  html[data-palette="diptyk"] .bio-pair .bio:last-child { grid-template-columns: 208px 1fr; }
  html[data-palette="diptyk"] .bio-pair .bio .person { border: 1px solid var(--hinge); }
  html[data-palette="diptyk"] .bio-pair .bio:first-child .person { border-right: 0; padding: 12px 6px 12px 12px; margin-right: -6px; }
  html[data-palette="diptyk"] .bio-pair .bio:last-child .person { border-left: 0; padding: 12px 12px 12px 6px; margin-left: -6px; }
}

/* Komponistbilde i stedet for opptak: samme 16:9-format som videoene */
.still { aspect-ratio: 16 / 9; overflow: hidden; background: #fff; }
.still img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-palette="diptyk"] .still img { filter: grayscale(1) contrast(1.05); }