/* ==========================================================================
   Mannheim — Ghost theme for Das Neue Mannheimer Orchester
   Enlightenment typography (Caslon, Garamond, the printer's flourish)
   set in a contemporary "liquid glass" interface: translucent, refractive
   surfaces floating over fields of 18th-century pigment — cochineal,
   Prussian blue (first made in 1706) and gilt.
   ========================================================================== */

/* Fonts (self-hosted; SIL Open Font License) ------------------------------- */
@font-face { font-family: "Libre Caslon Display"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/libre-caslon-display-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Caslon Display"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/libre-caslon-display-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("../fonts/eb-garamond-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("../fonts/eb-garamond-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap;
    src: url("../fonts/eb-garamond-latin-wght-italic.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap;
    src: url("../fonts/eb-garamond-latin-ext-wght-italic.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Tokens ------------------------------------------------------------------- */
:root {
    --bg: #f5f2ec;
    --bg-2: #ece6dc;
    --ink: #15110d;
    --ink-2: #4a4038;
    --muted: #8a7d6f;
    --line: rgba(21, 17, 13, .1);
    --accent: #8f1d2c;      /* cochineal */
    --accent-2: #6e1420;
    --gold: #b0883d;        /* gilt */
    --prussian: #1d3a63;    /* Prussian blue */
    --night: #120e0b;
    --on-night: #f4ede1;

    --font-display: "Libre Caslon Display", "EB Garamond", Georgia, serif;
    --font-text: "EB Garamond", Garamond, Georgia, serif;
    --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    --r-xl: 32px;
    --r-lg: 24px;
    --r-md: 16px;
    --r-sm: 10px;

    --measure: 40rem;
    --wide: 66rem;
    --max: 80rem;
    --gutter: clamp(1rem, 4vw, 3rem);
    --step: clamp(4rem, 9vw, 7.5rem);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --ghost-accent-color: var(--accent);
}

/* Base --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: var(--font-ui); font-size: 17px; line-height: 1.55;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.dn-site { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }
.dn-main { flex: 1; }
.home-template .dn-main { padding-top: 0; }
img, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent-2); }
::selection { background: rgba(143, 29, 44, .18); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; }
.dn-visually-hidden, .dn-skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dn-skip { position: fixed; left: 1rem; top: 1rem; z-index: 100; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 999px; }

/* Ambient pigment fields (what the glass refracts) ------------------------- */
.dn-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.dn-ambient span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .32; will-change: transform; }
.dn-ambient span:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: -10vw; background: var(--accent); animation: dn-drift 28s var(--ease) infinite alternate; }
.dn-ambient span:nth-child(2) { width: 40vw; height: 40vw; right: -10vw; top: 22vh; background: var(--gold); opacity: .3; animation: dn-drift 34s var(--ease) infinite alternate-reverse; }
.dn-ambient span:nth-child(3) { width: 52vw; height: 52vw; left: 20vw; bottom: -26vw; background: var(--prussian); opacity: .22; animation: dn-drift 40s var(--ease) infinite alternate; }
@keyframes dn-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vw, 4vh, 0) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .dn-ambient span { animation: none; } html { scroll-behavior: auto; } }

/* Liquid glass ------------------------------------------------------------- */
.glass {
    position: relative; isolation: isolate;
    background: linear-gradient(160deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .42));
    -webkit-backdrop-filter: blur(24px) saturate(185%);
            backdrop-filter: blur(24px) saturate(185%);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -1px 0 rgba(255, 255, 255, .25),
        0 1px 2px rgba(30, 18, 8, .05),
        0 18px 50px -18px rgba(30, 18, 8, .28);
}
.glass::before { /* specular rim: bright at top-left and bottom-right */
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, .7));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.glass::after { /* soft sheen across the upper surface */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    background: radial-gradient(120% 60% at 20% 0%, rgba(255, 255, 255, .55), transparent 55%);
}
.glass--dark {
    background: linear-gradient(160deg, rgba(36, 26, 20, .62), rgba(16, 11, 8, .48));
    border-color: rgba(255, 255, 255, .14);
    color: var(--on-night);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 24px 60px -20px rgba(0, 0, 0, .55);
}
.glass--dark::before { background: linear-gradient(135deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .2)); }
.glass--dark::after { background: radial-gradient(120% 60% at 20% 0%, rgba(255, 255, 255, .12), transparent 55%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: rgba(250, 247, 242, .96); }
    .glass--dark { background: rgba(24, 18, 14, .94); }
}

/* Layout helpers ------------------------------------------------------------ */
.dn-wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.dn-wrap--mid { width: min(100% - 2 * var(--gutter), var(--wide)); }
.dn-wrap--narrow { width: min(100% - 2 * var(--gutter), var(--measure)); }
.dn-section { padding-block: var(--step) 0; }
.dn-section:last-child { padding-bottom: var(--step); }
.dn-section__head { margin-bottom: 2.4rem; max-width: 46rem; }
.dn-section__title { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); margin: 0 0 1.4rem; }
.dn-section__head .dn-section__title { margin-bottom: 0; }
.dn-band { position: relative; }
.dn-more { margin-top: 2rem; }
.dn-more a { font-weight: 550; text-decoration: none; font-size: .95rem; display: inline-flex; gap: .4rem; align-items: center; }
.dn-more a:hover { text-decoration: underline; }
.dn-note { color: var(--muted); }

.dn-label {
    font-family: var(--font-ui); font-size: .74rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 .9rem;
}
.dn-label a { color: inherit; text-decoration: none; }
.dn-label--accent { color: var(--accent); }
.dn-label--light { color: rgba(244, 237, 225, .85); }

.dn-ornament {
    width: 7.5rem; height: .8rem; margin: 1.4rem 0 0; background: var(--gold);
    -webkit-mask: url("../images/ornament.svg") center / contain no-repeat;
            mask: url("../images/ornament.svg") center / contain no-repeat;
}
.dn-ornament--light { background: rgba(244, 237, 225, .75); }

/* Buttons — pills */
.dn-button, .gh-content .kg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    font-family: var(--font-ui); font-size: .95rem; font-weight: 600; letter-spacing: -.005em; line-height: 1;
    padding: .95rem 1.5rem; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
    background: var(--ink); color: #fff;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
    box-shadow: 0 8px 22px -10px rgba(21, 17, 13, .6);
}
.dn-button:hover, .gh-content .kg-btn:hover { transform: translateY(-1px) scale(1.02); color: #fff; background: #000; }
.dn-button--solid-light { background: var(--on-night); color: var(--ink); box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.dn-button--solid-light:hover { background: #fff; color: var(--ink); }
.dn-button--glass {
    background: rgba(255, 255, 255, .16); color: #fff;
    -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.dn-button--glass:hover { background: rgba(255, 255, 255, .26); }
.gh-content .kg-btn-accent { background: var(--accent); }
.gh-content .kg-btn-accent:hover { background: var(--accent-2); }

/* Top bar — dark and persistent, in the manner of apple.com --------------- */
.dn-masthead {
    position: sticky; top: 0; z-index: 50; color: #f4ede1;
    background: rgba(11, 8, 6, .86);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.dn-bar { width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; height: 4.25rem; display: flex; align-items: center; gap: 2rem; }
.dn-brand { display: flex; align-items: center; flex-shrink: 0; color: inherit; text-decoration: none; }
.dn-brand img { height: 3rem; width: auto; max-width: 15rem; object-fit: contain; }
.dn-nav { margin-left: auto; }
.dn-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1rem; }
.dn-nav__item { position: relative; display: flex; align-items: center; }
.dn-nav__item > a {
    position: relative; color: rgba(244, 237, 225, .76); text-decoration: none;
    font-size: .86rem; font-weight: 450; letter-spacing: .005em; padding: .55rem .8rem; transition: color .2s;
}
.dn-nav__item > a:hover, .dn-nav__item.is-current > a { color: #fff; }
.dn-nav__item.is-current > a::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .15rem; height: 1px; background: #c9a45a; }
.dn-nav__subtoggle { appearance: none; background: none; border: 0; padding: .4rem .35rem .4rem 0; margin-left: -.55rem; cursor: pointer; color: rgba(244, 237, 225, .55); }
.dn-nav__subtoggle::after { content: ""; display: block; width: .34rem; height: .34rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.dn-nav__sub {
    list-style: none; margin: 0; padding: .45rem; position: absolute; top: calc(100% + 1rem); left: 50%;
    transform: translateX(-50%) translateY(-4px); min-width: 15rem; border-radius: 14px; z-index: 60;
    background: rgba(16, 12, 10, .97); border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
    opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s var(--ease), visibility .2s;
}
.dn-nav__sub .dn-nav__item { display: block; }
.dn-nav__sub a { display: block; padding: .65rem .9rem; border-radius: 9px; }
.dn-nav__sub a:hover { background: rgba(255, 255, 255, .06); }
.dn-nav__sub .is-current > a::after { display: none; }
.has-sub:hover > .dn-nav__sub, .has-sub:focus-within > .dn-nav__sub, .has-sub.is-open > .dn-nav__sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dn-menu-toggle { display: none; }

@media (max-width: 860px) {
    .dn-bar { height: 3.6rem; }
    .dn-brand img { height: 2.4rem; }
    .dn-menu-toggle {
        display: grid; place-items: center; margin-left: auto; width: 2.6rem; height: 2.6rem; border: 0;
        background: none; cursor: pointer; color: #f4ede1;
    }
    .dn-menu-toggle__bars, .dn-menu-toggle__bars::before, .dn-menu-toggle__bars::after { display: block; width: 1.15rem; height: 1.5px; background: currentColor; position: relative; transition: transform .25s var(--ease); }
    .dn-menu-toggle__bars::before, .dn-menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
    .dn-menu-toggle__bars::before { top: -6px; } .dn-menu-toggle__bars::after { top: 6px; }
    .is-open .dn-menu-toggle__bars { background: transparent; }
    .is-open .dn-menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
    .is-open .dn-menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
    .dn-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
        background: rgba(11, 8, 6, .97); border-bottom: 1px solid rgba(255, 255, 255, .08);
        padding: .5rem var(--gutter) 1.5rem; max-height: calc(100svh - 3.6rem); overflow-y: auto;
    }
    .is-open .dn-nav { display: block; }
    .dn-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .dn-nav__item { flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .06); }
    .dn-nav__item > a { flex: 1; padding: .95rem 0; font-size: 1.05rem; }
    .dn-nav__item.is-current > a::after { left: 0; right: auto; width: 1.5rem; bottom: .6rem; }
    .dn-nav__sub { position: static; transform: none !important; opacity: 1; visibility: visible; background: none; border: 0; box-shadow: none; padding: 0 0 .6rem 1rem; width: 100%; }
    .dn-nav__sub .dn-nav__item { border: 0; }
    .dn-nav__sub a { padding: .5rem 0; font-size: .95rem; }
    .dn-nav__subtoggle { display: none; }
}

/* Hero (home) --------------------------------------------------------------- */
.dn-hero {
    position: relative; min-height: min(calc(100svh - 4.25rem), 56rem); display: grid; align-items: end; overflow: hidden;
    background: var(--night); color: var(--on-night);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.dn-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.04); }
.dn-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,14,11,.25) 0%, rgba(18,14,11,.05) 35%, rgba(18,14,11,.75) 100%); }
.dn-hero__inner { position: relative; width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; padding: 6rem 0 clamp(3rem, 8vh, 6rem); }
.dn-hero__title { font-size: clamp(3.4rem, 1rem + 9vw, 9.5rem); line-height: .92; letter-spacing: -.03em; margin: 0 0 .15em; max-width: 12ch; }
.dn-hero__sub { font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem); font-style: normal; color: rgba(244,237,225,.85); margin: 0; }
.dn-hero__actions { margin-top: 2.2rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.dn-release {
    position: absolute; right: var(--gutter); bottom: clamp(3rem, 8vh, 6rem);
    display: flex; align-items: center; gap: 1rem; padding: .7rem 1.1rem .7rem .7rem; border-radius: var(--r-lg);
    max-width: 23rem; color: var(--on-night); text-decoration: none; transition: transform .3s var(--ease);
}
.dn-release:hover { transform: translateY(-3px); color: var(--on-night); }
.dn-release img { width: 4.2rem; height: 4.2rem; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 8px 20px -8px rgba(0,0,0,.6); }
.dn-release__text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.dn-release__label { font-size: .68rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.dn-release__title { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dn-release__go { margin-left: auto; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); flex-shrink: 0; }
@media (max-width: 900px) { .dn-release { position: relative; right: auto; bottom: auto; margin: 0 var(--gutter) 2rem; } .dn-hero { align-items: end; } .dn-hero__inner { padding-bottom: 2rem; } }

/* Page heads ---------------------------------------------------------------- */
.dn-pagehead { width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); }
.dn-pagehead__inner { max-width: 52rem; }
.dn-pagehead__title { font-size: clamp(2.8rem, 1.4rem + 5.2vw, 6.2rem); line-height: .96; letter-spacing: -.028em; margin-bottom: .3em; }
.dn-pagehead__dek { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--ink-2); max-width: 38rem; margin: 0; line-height: 1.45; }
.dn-pagehead.has-image { position: relative; padding: 0; margin-top: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.dn-pagehead__media { border-radius: var(--r-xl); overflow: hidden; height: clamp(22rem, 62vh, 40rem); background: var(--night); }
.dn-pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.dn-pagehead.has-image .dn-pagehead__inner {
    position: absolute; left: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3vw, 2.2rem); right: clamp(1rem, 3vw, 2.2rem);
    max-width: 44rem; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: var(--r-lg);
}
.dn-pagehead.has-image .dn-pagehead__title { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.6rem); }
@media (max-width: 640px) {
    .dn-pagehead.has-image .dn-pagehead__inner { position: relative; left: auto; right: auto; bottom: auto; margin: -4rem .75rem 0; }
}

/* Plates (feature images inside articles) ---------------------------------- */
.dn-plate { width: min(100% - 2 * var(--gutter), var(--wide)); margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.dn-plate img { width: 100%; border-radius: var(--r-xl); box-shadow: 0 30px 70px -35px rgba(30,18,8,.55); }
.dn-plate figcaption { text-align: center; color: var(--muted); font-size: .88rem; margin-top: .9rem; }

/* Cards --------------------------------------------------------------------- */
.dn-grid { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); }
.dn-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.dn-grid--products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.dn-grid--projects { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }

.dn-card__link, .dn-project-card a, .dn-product-card a {
    display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none;
    padding: .6rem .6rem 1.4rem; border-radius: var(--r-lg);
    background: linear-gradient(160deg, rgba(255,255,255,.66), rgba(255,255,255,.36));
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 40px -22px rgba(30,18,8,.35);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.dn-card__link:hover, .dn-project-card a:hover, .dn-product-card a:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 #fff, 0 26px 60px -24px rgba(30,18,8,.45); }
.dn-card__image { margin: 0 0 1.2rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--r-lg) - .5rem); background: var(--bg-2); }
.dn-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.dn-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--bg-2), #fff); }
.dn-card__link:hover .dn-card__image img { transform: scale(1.045); }
.dn-card .dn-label, .dn-card__title, .dn-card__excerpt { padding: 0 .8rem; }
.dn-card .dn-label { color: var(--muted); margin-bottom: .45rem; }
.dn-card__title { font-size: 1.55rem; line-height: 1.12; margin-bottom: .55rem; }
.dn-card__excerpt { color: var(--ink-2); font-size: .94rem; line-height: 1.5; margin: 0; }

.dn-product-card a { padding-bottom: 1.2rem; }
.dn-product-card__image { margin: 0 0 1rem; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--r-lg) - .5rem); background: var(--bg-2); }
.dn-product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.dn-product-card a:hover img { transform: scale(1.04); }
.dn-product-card__title { font-size: 1.2rem; line-height: 1.2; margin: 0 .6rem .4rem; }
.dn-product-card__price { margin: auto .6rem 0; font-weight: 600; font-size: .92rem; color: var(--accent); }

.dn-project-card__image { margin: 0 0 1.1rem; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--r-lg) - .5rem); background: var(--bg-2); }
.dn-project-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.dn-project-card a:hover img { transform: scale(1.04); }
.dn-project-card__title { font-size: 1.6rem; margin: 0 .8rem; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 3rem; color: var(--muted); font-size: .9rem; }
.pagination a { text-decoration: none; font-weight: 600; padding: .6rem 1.1rem; border-radius: 999px; background: rgba(255,255,255,.6); }

/* Events --------------------------------------------------------------------- */
.dn-events { display: grid; gap: .8rem; margin-bottom: 3rem; }
.dn-event__link {
    display: grid; grid-template-columns: 4.6rem 1fr auto; gap: 1.3rem; align-items: center;
    padding: .7rem; padding-right: .8rem; border-radius: var(--r-lg); color: inherit; text-decoration: none;
    background: linear-gradient(160deg, rgba(255,255,255,.66), rgba(255,255,255,.38));
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 30px -20px rgba(30,18,8,.3);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dn-event__link:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 20px 44px -22px rgba(30,18,8,.4); }
.dn-event.is-upcoming .dn-event__link { grid-template-columns: 1fr auto; padding-left: 1.4rem; }
.dn-event__date { text-align: center; line-height: 1; padding: .8rem 0 .7rem; border-radius: var(--r-md); background: var(--ink); color: var(--on-night); }
.dn-event__day { display: block; font-family: var(--font-display); font-size: 1.9rem; }
.dn-event__month { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-top: .3rem; color: var(--gold); }
.dn-event__year { display: block; font-size: .7rem; color: rgba(244,237,225,.6); margin-top: .2rem; }
.dn-event__title { font-size: 1.4rem; line-height: 1.15; margin: 0 0 .3rem; }
.dn-event__meta { margin: 0; color: var(--ink-2); font-size: .9rem; }
.dn-event__image { margin: 0; width: 6.5rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); }
.dn-event__image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) { .dn-event__link { grid-template-columns: 4rem 1fr; } .dn-event__image { display: none; } }

/* Product page */
.dn-crumb { font-size: .9rem; font-weight: 600; margin-bottom: 2rem; }
.dn-crumb a { text-decoration: none; display: inline-flex; padding: .55rem 1rem; border-radius: 999px; background: rgba(255,255,255,.6); color: var(--ink); }
.dn-crumb--end { text-align: center; margin: 3rem 0 var(--step); }
.dn-product { padding-top: 1rem; }
.dn-product__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.dn-product__image { margin: 0; position: sticky; top: 6rem; }
.dn-product__image img { border-radius: var(--r-lg); box-shadow: 0 40px 80px -40px rgba(30,18,8,.6); }
.dn-product__title { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.4rem); line-height: 1.02; }
.dn-product__price { font-size: 1.4rem; font-weight: 600; color: var(--accent); margin-bottom: 1.6rem; }
@media (max-width: 800px) { .dn-product__grid { grid-template-columns: 1fr; } .dn-product__image { position: static; } }

/* ==========================================================================
   Post & page content
   ========================================================================== */
.gh-content {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [wide-start] minmax(0, calc((var(--wide) - var(--measure)) / 2))
        [main-start] min(var(--measure), 100% - 2 * var(--gutter)) [main-end]
        minmax(0, calc((var(--wide) - var(--measure)) / 2)) [wide-end]
        minmax(var(--gutter), 1fr) [full-end];
    padding-bottom: var(--step);
    font-family: var(--font-text); font-size: clamp(1.15rem, 1.05rem + .35vw, 1.32rem); line-height: 1.62;
    font-feature-settings: "kern", "liga", "onum";
}
.gh-content > * { grid-column: main; }
.gh-content > .kg-width-wide, .gh-content > .dn-wide { grid-column: wide; }
.gh-content > .kg-width-full, .gh-content > .dn-full { grid-column: full; }
.gh-content > .kg-width-full img { width: 100%; }
.dn-prose--flush { display: block; padding: 0; }

.gh-content p, .gh-content li { hyphens: auto; -webkit-hyphens: auto; }
.gh-content > p, .gh-content > ul, .gh-content > ol { margin: 0 0 1.1em; }
.gh-content h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin: 1.8em 0 .55em; }
.gh-content h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); margin: 1.6em 0 .5em; }
.gh-content h4 { font-family: var(--font-ui); font-size: .78rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 2.4em 0 .8em; line-height: 1.4; }
.gh-content > :first-child { margin-top: 0; }
.gh-content strong { font-weight: 600; }
.gh-content blockquote { margin: 2em 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--accent); font-style: italic; font-size: 1.12em; color: var(--ink-2); }
.gh-content blockquote.kg-blockquote-alt { border: 0; padding: 0; text-align: center; font-family: var(--font-display); font-style: normal; font-size: 1.6em; line-height: 1.3; color: var(--ink); }
.gh-content ol, .gh-content ul { padding-left: 1.3em; }
.gh-content li { margin-bottom: .35em; }
.gh-content li::marker { color: var(--accent); }
.gh-content hr, .dn-finis {
    border: 0; height: .9rem; margin: 3.5rem auto; width: 8rem; background: var(--gold);
    -webkit-mask: url("../images/ornament.svg") center / contain no-repeat;
            mask: url("../images/ornament.svg") center / contain no-repeat;
}
.dn-finis { font-size: 0; margin-top: 0; }
.gh-content figure { margin: 2.4em 0; }
.gh-content figcaption { text-align: center; color: var(--muted); font-family: var(--font-ui); font-size: .82rem; margin-top: .8rem; }
.gh-content .kg-image-card img { margin: 0 auto; border-radius: var(--r-lg); box-shadow: 0 24px 60px -34px rgba(30,18,8,.5); }
.gh-content .kg-width-full.kg-image-card img { border-radius: 0; }
.gh-content .kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.gh-content .kg-embed-card iframe { width: 100%; border-radius: var(--r-lg); }
.gh-content iframe[src*="youtube"], .gh-content iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-lg); }
.gh-content iframe[src*="spotify"] { border-radius: var(--r-md); }
.gh-content .kg-gallery-image img { border-radius: var(--r-md); }
.gh-content .kg-gallery-container { gap: .75rem; }
.gh-content .kg-button-card { margin: 1.6em 0; }
.gh-content .kg-btn { height: auto; }

/* A nod to the 18th-century compositor */
.dn-prose--dropcap > p:first-of-type::first-letter {
    font-family: var(--font-display); float: left; font-size: 4.4em; line-height: .8; padding: .06em .09em 0 0; color: var(--accent);
}

/* ==========================================================================
   Components used in migrated page content (HTML cards)
   ========================================================================== */
.gh-content .dn-lede { font-size: 1.2em; color: var(--ink-2); }

.dn-glass-panel, .dn-bio, .dn-quote, .dn-pillar, .dn-album, .dn-card-box {
    background: linear-gradient(160deg, rgba(255,255,255,.68), rgba(255,255,255,.4));
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255,255,255,.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 50px -26px rgba(30,18,8,.35);
    border-radius: var(--r-xl);
}

/* Portrait grid */
.dn-people { display: grid; gap: 2rem 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); margin: 1rem 0 3rem; font-family: var(--font-ui); }
.dn-person { margin: 0; }
.dn-person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); margin-bottom: .9rem; box-shadow: 0 18px 40px -26px rgba(30,18,8,.55); transition: transform .4s var(--ease); }
.dn-person:hover img { transform: translateY(-3px); }
.dn-person h3 { font-size: 1.15rem; margin: 0 0 .3rem; line-height: 1.2; }
.dn-person p { font-size: .85rem; color: var(--ink-2); line-height: 1.45; margin: 0; }
.dn-person--oval img { border-radius: 50%; aspect-ratio: 1; }
.dn-person--oval { text-align: center; }

/* Biographies */
.dn-bio { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: clamp(1.4rem, 3.5vw, 2.6rem); align-items: start; padding: clamp(1.2rem, 3vw, 2rem); margin: 0 0 1.4rem; }
.dn-bio__portrait { margin: 0; }
.dn-bio__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); }
.dn-bio h2 { margin: .2rem 0 .3rem; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); }
.dn-bio .dn-label { margin-bottom: 1.2rem; }
.dn-bio p { font-size: 1.04rem; }
.dn-bio p:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .dn-bio { grid-template-columns: 1fr; } .dn-bio__portrait { max-width: 12rem; } }

/* Quotation */
.dn-quote { display: grid; grid-template-columns: 8rem 1fr; gap: 1.8rem; align-items: center; margin: 3rem 0; padding: clamp(1.4rem, 3vw, 2.2rem); }
.dn-quote img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.dn-quote blockquote { margin: 0; padding: 0; border: 0; font-family: var(--font-display); font-style: normal; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); line-height: 1.3; color: var(--ink); }
.dn-quote blockquote::before { content: "“"; display: block; font-size: 3.2rem; line-height: .55; color: var(--accent); margin-bottom: .1rem; }
.dn-quote figcaption { text-align: left; font-family: var(--font-ui); font-size: .78rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 1rem; }
@media (max-width: 600px) { .dn-quote { grid-template-columns: 1fr; } .dn-quote img { max-width: 6rem; } }

/* Pillars */
.dn-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin: 2rem 0 3rem; font-family: var(--font-ui); }
.dn-pillar { padding: 1.6rem 1.4rem 1.8rem; }
.dn-pillar img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 50%; margin: 0 0 1.2rem; box-shadow: 0 8px 20px -10px rgba(30,18,8,.5); }
.dn-pillar h3 { font-size: 1.3rem; line-height: 1.15; margin: 0 0 .7rem; }
.dn-pillar p { font-size: .9rem; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* Image tiles */
.dn-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.4rem; margin: 2rem 0; font-family: var(--font-ui); }
.dn-tile { position: relative; display: block; color: #fff; text-decoration: none; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--night); }
.dn-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.dn-tile:hover img { transform: scale(1.05); }
.dn-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7)); }
.dn-tile h3, .dn-tile p { position: relative; z-index: 1; margin: 0 1.4rem; }
.dn-tile h3 { position: absolute; left: 0; right: 0; bottom: 3.6rem; font-size: 1.6rem; color: #fff; }
.dn-tile p { position: absolute; left: 0; right: 0; bottom: 1.3rem; font-size: .85rem; color: rgba(255,255,255,.8); line-height: 1.4; }
.dn-tile:hover { color: #fff; }

/* Albums */
.dn-album { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: clamp(1.4rem, 3.5vw, 2.6rem); align-items: start; padding: clamp(1.2rem, 3vw, 2rem); margin: 0 0 1.6rem; }
.dn-album__cover img { width: 100%; border-radius: var(--r-md); box-shadow: 0 24px 50px -24px rgba(30,18,8,.6); }
.dn-album__text h2 { margin-top: 0; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.dn-album__text p { font-size: 1.04rem; }
.dn-album__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.4rem 0; }
.dn-album__actions .dn-button:nth-child(2) { background: rgba(21,17,13,.07); color: var(--ink); box-shadow: none; }
.dn-album iframe { margin-top: 1rem; border-radius: var(--r-md); }
@media (max-width: 700px) { .dn-album { grid-template-columns: 1fr; } .dn-album__cover { max-width: 15rem; } }

/* Supporters */
.dn-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; margin: 2.5rem 0; padding: 2rem; border-radius: var(--r-xl); background: rgba(255,255,255,.45); }
.dn-logos img { max-height: 3.6rem; max-width: 10rem; width: auto; filter: brightness(0) opacity(.7); }
.dn-logos span { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-2); }

/* Native media */
.dn-video { margin: 2.4em 0; }
.dn-video video { width: 100%; display: block; border-radius: var(--r-xl); background: var(--night); box-shadow: 0 30px 70px -35px rgba(30,18,8,.6); }
.gh-content audio { width: 100%; margin: 1rem 0; }

.dn-card-box { padding: 2rem 2.2rem; margin: 2rem 0; }
.dn-card-box h3 { margin-top: 0; }

/* Footer -------------------------------------------------------------------- */
.dn-footer { margin-top: auto; padding: var(--step) 0 2rem; }
.dn-footer__panel { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.5rem; padding: clamp(1.8rem, 4vw, 3.4rem); border-radius: var(--r-xl); background: linear-gradient(160deg, rgba(28,20,15,.92), rgba(14,10,8,.86)); }
.dn-footer__panel .dn-label { color: var(--gold); }
.dn-footer__heading { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); line-height: 1.05; margin-bottom: 1.6rem; max-width: 20ch; }
.dn-subscribe { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4rem; padding: .35rem; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.1); max-width: 30rem; }
.dn-subscribe.success, .dn-subscribe.error { margin-bottom: 3.6rem; }
.dn-subscribe .dn-button { white-space: nowrap; }
@media (max-width: 380px) { .dn-subscribe .dn-button { padding-inline: 1rem; } }
.dn-subscribe input { width: 100%; min-width: 0; padding: .8rem .4rem .8rem 1rem; font: inherit; font-size: .98rem; background: transparent; color: var(--on-night); border: 0; outline: none; }
.dn-subscribe input::placeholder { color: rgba(244,237,225,.5); }
/* Messages sit under the field, outside the pill */
.dn-subscribe__msg { display: none; position: absolute; left: 1rem; right: 0; top: calc(100% + .6rem); margin: 0; font-size: .9rem; }
.dn-subscribe.success .dn-subscribe__msg--success, .dn-subscribe.error .dn-subscribe__msg--error { display: block; }
.dn-subscribe.loading .dn-button { opacity: .6; }
.dn-footer__side { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.dn-footer__follow .dn-label { margin: 0 0 .8rem; }
.dn-social { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.dn-social__link { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; color: var(--on-night); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background .2s, color .2s, transform .2s; }
.dn-social__link svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.dn-social__link:hover, .dn-social__link:focus-visible { background: rgba(255,255,255,.2); color: #fff; transform: translateY(-1px); }
.dn-social__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.dn-footer__colophon { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center; color: var(--muted); font-size: .82rem; margin: 1.6rem 0 0; }
@media (max-width: 760px) { .dn-footer__panel { grid-template-columns: 1fr; } }

/* Required by Ghost for editor width options */
.kg-width-wide, .kg-width-full { position: relative; }

/* Home: the editable middle section runs wider */
.home-template .gh-content { --measure: 58rem; }
.home-template .gh-content > h2 { margin-top: 0; }

/* Components and media break out to the wide column */
.gh-content > .dn-video, .gh-content > .dn-quote, .gh-content > .dn-people, .gh-content > .dn-pillars,
.gh-content > .dn-tiles, .gh-content > .dn-album, .gh-content > .dn-bio, .gh-content > .dn-logos,
.gh-content > .kg-embed-card, .gh-content > .kg-gallery-card { grid-column: wide; }
.gh-content > .dn-quote { grid-template-columns: 9rem 1fr; padding: clamp(1.6rem, 4vw, 3rem); }
.gh-content .kg-image-card:not(.kg-width-wide):not(.kg-width-full) img { max-height: 78vh; width: auto; }
.dn-bio { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
.dn-bio__portrait { position: sticky; top: 6rem; }
.dn-bio__text { columns: 2 22rem; column-gap: 2.4rem; }
.dn-bio__text h2, .dn-bio__text .dn-label { column-span: all; }
@media (max-width: 700px) {
  .dn-bio { grid-template-columns: 1fr; }
  .dn-bio__portrait { position: static; }
}
@media (max-width: 600px) { .gh-content > .dn-quote { grid-template-columns: 1fr; } }
/* Long URLs and words in body text wrap instead of widening the page */
.gh-content { overflow-wrap: break-word; }

.dn-pagehead + .dn-section, .dn-pagehead + .dn-wrap.dn-section { padding-top: .5rem; }
.dn-bio__text { columns: auto; }

/* Feature images: never taller than the screen */
.dn-plate img { max-height: 72vh; width: auto; max-width: 100%; margin: 0 auto; }
@media (max-width: 420px) { .dn-brand__name { display: none !important; } }

/* Footer logo */
.dn-footer__logo img { height: 3.4rem; width: auto; }

/* ==========================================================================
   Dark colour scheme (default). Theme setting "Color scheme: Light" opts out.
   ========================================================================== */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d0a08;
    --bg-2: #1b1613;
    --ink: #f2ebdf;
    --ink-2: #c8bdae;
    --muted: #8f8476;
    --line: rgba(255, 255, 255, .1);
    --accent: #e0697b;        /* cochineal, lifted for contrast on dark */
    --accent-2: #f08c9b;
    --gold: #cfa95e;
    --prussian: #2f5c9a;
    --glass-1: rgba(255, 255, 255, .085);
    --glass-2: rgba(255, 255, 255, .03);
    --glass-edge: rgba(255, 255, 255, .1);
    --glass-hi: rgba(255, 255, 255, .14);
}
html[data-theme="dark"] .dn-ambient span { opacity: .26; }
html[data-theme="dark"] .dn-ambient span:nth-child(2) { opacity: .18; }
html[data-theme="dark"] .dn-ambient span:nth-child(3) { opacity: .3; }
html[data-theme="dark"] ::selection { background: rgba(224, 105, 123, .3); }

/* glass surfaces */
html[data-theme="dark"] .glass:not(.glass--dark),
html[data-theme="dark"] .dn-card__link, html[data-theme="dark"] .dn-project-card a, html[data-theme="dark"] .dn-product-card a,
html[data-theme="dark"] .dn-event__link,
html[data-theme="dark"] .dn-glass-panel, html[data-theme="dark"] .dn-bio, html[data-theme="dark"] .dn-quote,
html[data-theme="dark"] .dn-pillar, html[data-theme="dark"] .dn-album, html[data-theme="dark"] .dn-card-box {
    background: linear-gradient(160deg, var(--glass-1), var(--glass-2));
    border-color: var(--glass-edge);
    box-shadow: inset 0 1px 0 var(--glass-hi), 0 24px 60px -30px rgba(0, 0, 0, .8);
}
html[data-theme="dark"] .dn-card__link:hover, html[data-theme="dark"] .dn-project-card a:hover,
html[data-theme="dark"] .dn-product-card a:hover, html[data-theme="dark"] .dn-event__link:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 30px 70px -28px rgba(0, 0, 0, .9);
    background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04));
}
html[data-theme="dark"] .glass:not(.glass--dark)::before { background: linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .15)); }
html[data-theme="dark"] .glass:not(.glass--dark)::after { background: radial-gradient(120% 60% at 20% 0%, rgba(255, 255, 255, .08), transparent 55%); }
html[data-theme="dark"] .dn-pagehead.has-image .dn-pagehead__inner { background: linear-gradient(160deg, rgba(20, 15, 12, .62), rgba(12, 9, 7, .42)); }
html[data-theme="dark"] .dn-card__placeholder { background: linear-gradient(135deg, #1b1613, #2a221d); }

/* buttons: light pill on dark */
html[data-theme="dark"] .dn-button, html[data-theme="dark"] .gh-content .kg-btn { background: var(--ink); color: var(--bg); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .dn-button:hover, html[data-theme="dark"] .gh-content .kg-btn:hover { background: #fff; color: var(--bg); }
html[data-theme="dark"] .gh-content .kg-btn-accent { background: #b02a3e; color: #fff; }
html[data-theme="dark"] .gh-content .kg-btn-accent:hover { background: #c7364b; color: #fff; }
html[data-theme="dark"] .dn-button--glass { background: rgba(255, 255, 255, .14); color: #fff; }
html[data-theme="dark"] .dn-album__actions .dn-button:nth-child(2) { background: rgba(255, 255, 255, .09); color: var(--ink); }

/* small parts */
html[data-theme="dark"] .dn-event__date { background: rgba(255, 255, 255, .07); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
html[data-theme="dark"] .dn-event__year { color: var(--muted); }
html[data-theme="dark"] .dn-crumb a, html[data-theme="dark"] .pagination a { background: rgba(255, 255, 255, .07); color: var(--ink); }
html[data-theme="dark"] .dn-logos { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .dn-logos img { filter: brightness(0) invert(1) opacity(.72); }
html[data-theme="dark"] .gh-content .kg-image-card img, html[data-theme="dark"] .dn-plate img,
html[data-theme="dark"] .dn-person img, html[data-theme="dark"] .dn-video video { box-shadow: 0 30px 70px -35px rgba(0, 0, 0, .95); }
html[data-theme="dark"] .dn-footer__panel { background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .09); }
html[data-theme="dark"] .gh-content blockquote.kg-blockquote-alt { color: var(--ink); }
html[data-theme="dark"] .gh-content iframe[src*="spotify"] { color-scheme: normal; }

/* Larger logo; the bar condenses once the page is scrolled */
.dn-bar { height: 5.25rem; transition: height .3s var(--ease); }
.dn-brand img { height: 4rem; max-width: 18rem; transition: height .3s var(--ease); }
.is-scrolled .dn-bar { height: 4rem; }
.is-scrolled .dn-brand img { height: 3rem; }
.dn-hero { min-height: min(calc(100svh - 5.25rem), 56rem); }
@media (max-width: 860px) {
    .dn-bar, .is-scrolled .dn-bar { height: 4rem; }
    .dn-brand img, .is-scrolled .dn-brand img { height: 3rem; }
    .dn-nav { max-height: calc(100svh - 4rem); }
}

/* Click-to-load third-party players */
/* Grid so the notice sits in flow: the box grows when its text is taller than min-height
   (small embeds, narrow screens) instead of clipping it, and still fills a 16:9 video frame. */
.dn-consent-wrap { position: relative; display: grid; width: 100%; min-height: 12rem; border-radius: var(--r-lg); overflow: hidden; }
.dn-consent-wrap.is-video { aspect-ratio: 16 / 9; min-height: 0; }
.dn-consent-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.dn-consent {
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    gap: .2rem; padding: clamp(1.2rem, 4vw, 2.2rem); font-family: var(--font-ui); text-align: left;
    background: linear-gradient(160deg, var(--glass-1, rgba(255,255,255,.7)), var(--glass-2, rgba(255,255,255,.4)));
    border: 1px solid var(--glass-edge, rgba(255,255,255,.6)); border-radius: inherit;
}
.dn-consent .dn-consent__title { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 .3rem; color: var(--ink); }
.dn-consent .dn-consent__text { font-size: .88rem; color: var(--ink-2); max-width: 34rem; margin: 0 0 1rem; line-height: 1.5; }
.dn-consent .dn-consent__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; margin: 0; font-size: .85rem; color: var(--ink-2); }
.dn-consent__actions label { display: inline-flex; gap: .45rem; align-items: center; cursor: pointer; }
.dn-album .dn-consent-wrap { margin-top: 1rem; min-height: 9.5rem; }
.gh-content .dn-consent-wrap + figcaption { margin-top: .8rem; }

/* supporter logos are white originals: show them as-is on dark */
html[data-theme="dark"] .dn-logos img { filter: none; opacity: .85; }
html[data-theme="light"] .dn-logos img { filter: brightness(0) opacity(.7); }

.dn-footer__colophon a { color: inherit; text-decoration: none; }
.dn-footer__colophon a:hover { color: var(--ink); text-decoration: underline; }

/* ==========================================================================
   Floating excerpt player
   ========================================================================== */
.dn-player { position: fixed; right: clamp(.75rem, 2vw, 1.5rem); bottom: clamp(.75rem, 2vw, 1.5rem); z-index: 45; font-family: var(--font-ui); color: #f4ede1; }
.dn-player[hidden] { display: none; }
.dn-player button { font: inherit; color: inherit; cursor: pointer; }
.dn-player__fab {
    display: flex; align-items: center; gap: .65rem; max-width: 17rem; padding: .7rem 1.1rem .7rem .9rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(160deg, rgba(34, 26, 20, .9), rgba(14, 10, 8, .86));
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px -16px rgba(0,0,0,.7);
    font-size: .85rem; font-weight: 550; transition: transform .25s var(--ease);
}
.dn-player__fab:hover { transform: translateY(-2px); }
.dn-player__fabtext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-player.is-open .dn-player__fab { display: none; }
.dn-player__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.dn-player__eq i { width: 3px; height: 40%; background: #cfa95e; border-radius: 1px; }
.dn-player.is-playing .dn-player__eq i { animation: dn-eq .9s ease-in-out infinite alternate; }
.dn-player.is-playing .dn-player__eq i:nth-child(2) { animation-delay: -.3s; }
.dn-player.is-playing .dn-player__eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes dn-eq { from { height: 25%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .dn-player.is-playing .dn-player__eq i { animation: none; height: 80%; } }

.dn-player__panel {
    display: none; width: min(22rem, calc(100vw - 1.5rem)); padding: 1rem 1.1rem 1.1rem; border-radius: 22px;
    border: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(160deg, rgba(34, 26, 20, .92), rgba(12, 9, 7, .9));
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 70px -24px rgba(0,0,0,.8);
}
.dn-player.is-open .dn-player__panel { display: block; animation: dn-pop .25s var(--ease); }
@keyframes dn-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.dn-player__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.dn-player__label { font-size: .66rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: #cfa95e; }
.dn-player__icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.07); transition: background .2s; }
.dn-player__icon:hover { background: rgba(255,255,255,.15); }
.dn-player__icon svg { width: 1.05rem; height: 1.05rem; }
.dn-player__now { display: flex; gap: .9rem; align-items: center; }
.dn-player__cover { width: 3.6rem; height: 3.6rem; border-radius: 10px; object-fit: cover; flex-shrink: 0; box-shadow: 0 8px 20px -8px rgba(0,0,0,.7); }
.dn-player__meta { min-width: 0; }
.dn-player__title { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.2; margin: 0 0 .2rem; }
.dn-player__sub { font-size: .76rem; color: rgba(244,237,225,.65); margin: 0; line-height: 1.35; }
.dn-player__bar { display: flex; align-items: center; gap: .7rem; margin: .95rem 0 .7rem; }
.dn-player__seek { flex: 1; height: 4px; accent-color: #cfa95e; cursor: pointer; }
.dn-player__time { font-size: .7rem; color: rgba(244,237,225,.6); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dn-player__controls { display: flex; align-items: center; gap: .45rem; }
.dn-player__play { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 0; background: #f4ede1; color: #120e0b !important; transition: transform .2s; }
.dn-player__play:hover { transform: scale(1.06); }
.dn-player__play svg { width: 1.25rem; height: 1.25rem; }
.dn-player__spotify { margin-left: auto; font-size: .74rem; font-weight: 600; color: #f4ede1; text-decoration: none; padding: .5rem .8rem; border-radius: 999px; background: rgba(30, 215, 96, .14); box-shadow: inset 0 0 0 1px rgba(30, 215, 96, .35); white-space: nowrap; }
.dn-player__spotify:hover { background: rgba(30, 215, 96, .26); color: #fff; }
.dn-player__list { list-style: none; margin: .9rem 0 0; padding: .4rem 0 0; border-top: 1px solid rgba(255,255,255,.08); max-height: 14rem; overflow-y: auto; }
.dn-player__list button { display: flex; flex-direction: column; width: 100%; text-align: left; padding: .5rem .6rem; border: 0; border-radius: 10px; background: none; }
.dn-player__list button:hover { background: rgba(255,255,255,.06); }
.dn-player__list button.is-current span { color: #cfa95e; }
.dn-player__list span { font-size: .85rem; }
.dn-player__list small { font-size: .72rem; color: rgba(244,237,225,.55); }
@media (max-width: 600px) { .dn-player.is-open { left: .75rem; right: .75rem; } .dn-player__panel { width: 100%; } }

.dn-player [hidden] { display: none !important; }

/* Discography -------------------------------------------------------------- */
.dn-grid--albums { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.dn-album-card__meta { margin: 0 .6rem .9rem; font-size: .85rem; color: var(--muted); }
.dn-album-card__go { margin: auto .6rem 0; font-weight: 600; font-size: .88rem; color: var(--accent); }

.dn-disc { padding-top: 1rem; }
.dn-disc__grid { display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.dn-disc__side { position: sticky; top: 6.5rem; display: grid; gap: 1.4rem; }
.dn-disc__cover { margin: 0; }
.dn-disc__cover img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); box-shadow: 0 40px 80px -40px rgba(30,18,8,.6); }
.dn-disc__title { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.4rem); line-height: 1.02; margin-bottom: 1.6rem; }
.dn-disc__main .dn-label { color: var(--muted); }
.dn-disc__body h2, .dn-disc__body h3 { font-size: 1.7rem; margin-top: 2.4rem; }
.dn-disc__body ol { padding-left: 1.6rem; }
.dn-disc__body li { margin-bottom: .25rem; }

/* The standard listen block: buy + streaming links and the Spotify player */
.dn-listen { margin: 0 0 2.4rem; font-family: var(--font-ui); }
.dn-listen__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.gh-content .dn-listen__links { margin-bottom: 1.6rem; }
.dn-listen__links li { margin: 0; }
.dn-listen__links a {
    display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem; border-radius: 999px;
    font-size: .95rem; font-weight: 600; line-height: 1.1; text-decoration: none; color: var(--ink);
    background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.6);
    -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 24px -16px rgba(30,18,8,.4);
    transition: transform .25s var(--ease), background .25s;
}
.dn-listen__links a:hover { transform: translateY(-1px); background: rgba(255,255,255,.8); color: var(--ink); }
.dn-listen__links a::before {
    content: ""; flex: none; width: 1.35rem; height: 1.35rem; background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.dn-listen__links a::after { content: "↗"; margin-left: auto; font-weight: 400; opacity: .5; }
.dn-listen__links .dn-listen__buy { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 10px 26px -12px rgba(143,29,44,.7); }
.dn-listen__links .dn-listen__buy:hover { background: var(--accent-2); color: #fff; }
.dn-listen__buy span { font-weight: 500; opacity: .8; margin-left: .2rem; }
.dn-listen__buy { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 7.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6Zm0 1.8a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3C/svg%3E"); }
.dn-listen__service.is-spotify { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.6 14.4a.62.62 0 0 1-.86.2c-2.35-1.43-5.3-1.76-8.79-.96a.62.62 0 1 1-.28-1.21c3.81-.87 7.08-.5 9.72 1.12.3.18.39.56.21.85Zm1.22-2.72a.78.78 0 0 1-1.07.26c-2.69-1.65-6.79-2.13-9.97-1.17a.78.78 0 1 1-.45-1.49c3.63-1.1 8.15-.57 11.23 1.33.37.22.48.7.26 1.07Zm.1-2.83C14.7 8.94 9.38 8.76 6.3 9.7a.94.94 0 1 1-.54-1.8c3.53-1.07 9.4-.86 13.1 1.34a.94.94 0 0 1-.95 1.61Z'/%3E%3C/svg%3E"); }
.dn-listen__service.is-apple { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3.2v11.6a3.2 3.2 0 1 1-1.8-2.88V7.3l-8 1.66v7.84a3.2 3.2 0 1 1-1.8-2.88V5.6Z'/%3E%3C/svg%3E"); }
.dn-listen__service.is-youtube { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 3.6a6.4 6.4 0 1 0 0 12.8 6.4 6.4 0 0 0 0-12.8Zm0 1.4a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm-1.7 2.2v5.6l4.6-2.8Z'/%3E%3C/svg%3E"); }
.dn-listen__player, .gh-content .dn-listen__player { display: block; margin: 0; }
.gh-content .dn-listen__note { margin: .6rem 0 0; }
.dn-listen__player iframe { display: block; width: 100%; border: 0; border-radius: var(--r-md); }
.dn-listen__note { margin: .6rem 0 0; font-size: .78rem; color: var(--muted); }
.dn-disc__links .dn-listen__links { margin: 0; }

@media (max-width: 820px) {
    /* phone order: cover, title, links, player + notes */
    .dn-disc__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .dn-disc__side, .dn-disc__main { display: contents; }
    .dn-disc__cover { order: 1; max-width: 20rem; margin-bottom: 1.8rem; }
    .dn-disc__main > .dn-label { order: 2; }
    .dn-disc__title { order: 3; }
    .dn-disc__links { order: 4; margin-bottom: 1.8rem; }
    .dn-disc__body { order: 5; }
}

html[data-theme="dark"] .dn-listen__links a { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 30px -20px rgba(0,0,0,.9); }
html[data-theme="dark"] .dn-listen__links a:hover { background: rgba(255,255,255,.13); }
html[data-theme="dark"] .dn-listen__links .dn-listen__buy { background: #b02a3e; color: #fff; }
html[data-theme="dark"] .dn-listen__links .dn-listen__buy:hover { background: #c7364b; }
html[data-theme="dark"] .dn-disc__cover img { box-shadow: 0 40px 80px -40px rgba(0,0,0,.95); }

/* ==========================================================================
   Project pages (#project). See "Projects" in CLAUDE.md.
   Body components, all in HTML cards: .dn-lead, .dn-media, .dn-programme,
   .dn-composers, .dn-credits, .dn-sponsors. The album band (.dn-yield) comes
   from partials/project-album.hbs.
   ========================================================================== */

/* The recording: one horizontal card under the header */
.dn-yield { margin-top: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.dn-yield__card {
    display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem); align-items: center;
    padding: clamp(1rem, 2.4vw, 1.4rem); border-radius: var(--r-xl); color: inherit; text-decoration: none;
    transition: transform .35s var(--ease);
}
.dn-yield__card:hover { transform: translateY(-2px); }
.dn-yield__cover { margin: 0; }
.dn-yield__cover img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); box-shadow: 0 24px 50px -28px rgba(0,0,0,.8); }
.dn-yield__text .dn-label { margin-bottom: .5rem; }
.dn-yield__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.1; margin: 0 0 .5rem; }
.dn-yield__note { font-family: var(--font-ui); font-size: .88rem; color: var(--muted); margin: 0 0 1.1rem; }
.dn-yield__card:hover .dn-button { background: #000; color: #fff; }
@media (max-width: 520px) { .dn-yield__card { grid-template-columns: 6.5rem 1fr; align-items: start; } .dn-yield__note { display: none; } }

/* Album page: link back to the project */
.dn-disc__project {
    display: grid; gap: .2rem; padding: 1rem 1.2rem; border-radius: var(--r-lg); text-decoration: none; color: inherit;
    border: 1px solid var(--line); background: var(--glass-2, rgba(255,255,255,.4));
}
.dn-disc__project .dn-label { margin: 0; }
.dn-disc__project-title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; }
.dn-disc__project-go { font-family: var(--font-ui); font-size: .82rem; font-weight: 600; color: var(--accent); }
.dn-disc__project:hover .dn-disc__project-title { text-decoration: underline; text-decoration-thickness: 1px; }
@media (max-width: 860px) { .dn-disc__project { order: 4; margin-bottom: 1.8rem; } }

/* Lead paragraph */
.dn-project > .dn-lead, .gh-content > p.dn-lead { font-size: 1.16em; line-height: 1.5; color: var(--ink); }

/* Section labels inside projects: one quiet style instead of ad-hoc caps headings */
.dn-project h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); margin: 2.2em 0 .6em; }

/* Videos side by side */
.gh-content > .dn-media { grid-column: wide; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.6rem; margin: 2.4rem 0; }
.dn-media figure { margin: 0; }
.dn-media video, .dn-media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--r-lg); background: var(--night); }
.dn-media .dn-consent-wrap { border-radius: var(--r-lg); }
.dn-media figcaption { font-family: var(--font-ui); font-size: .85rem; color: var(--muted); margin-top: .7rem; text-align: left; }

/* Programme: one line per work, two columns on wide screens */
.gh-content > .dn-programme { grid-column: wide; list-style: none; padding: 0; margin: 1rem 0 2.6rem; columns: 2 20rem; column-gap: 3rem; }
.dn-programme li { break-inside: avoid; margin: 0 0 1.1rem; line-height: 1.4; }
.dn-programme li::marker { content: none; }
.dn-programme strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.15em; }
.dn-programme span { color: var(--ink-2); }

/* Composers: two up; the portrait floats so the text wraps around and under it */
.gh-content > .dn-composers { grid-column: wide; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr)); gap: 1.2rem 1.4rem; margin: 1.4rem 0 2.6rem; align-items: start; }
.dn-composer {
    display: block; text-align: left; margin: 0; padding: 1.25rem 1.35rem 1.1rem;
    border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--glass-2, rgba(255,255,255,.4));
}
.dn-composer::after { content: ""; display: block; clear: both; }
.dn-composer img { float: left; width: 7.2rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); margin: .2rem 1.15rem .5rem 0; shape-outside: margin-box; }
.dn-composer > div { display: contents; }
.dn-composer h3 { font-size: 1.3rem; line-height: 1.15; margin: 0 0 .45rem; }
.dn-composer p { font-size: .96rem; line-height: 1.52; color: var(--ink-2); margin: 0; }
@media (max-width: 480px) { .dn-composer img { width: 5.2rem; margin-right: .9rem; } .dn-composer { padding: 1rem; } }

/* Credits: a booklet page. Soloists are billed first in display type; the orchestra,
   instruments and production follow in columns, each a step quieter. */
.gh-content > .dn-credits {
    grid-column: wide; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.8rem 2.6rem;
    margin: 1.2rem 0 2.6rem; padding: clamp(1.3rem, 3.5vw, 2.4rem); font-family: var(--font-ui);
    border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--glass-2, rgba(255,255,255,.4));
}
.dn-credits section { margin: 0; min-width: 0; }
.dn-credits h3 { font-family: var(--font-ui); font-size: .72rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 .8rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.dn-credits ul { list-style: none; padding: 0; margin: 0; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.dn-credits li { margin: 0 0 .45rem; hyphens: manual; }
.dn-credits li::marker { content: none; }
.dn-credits li b { font-weight: 600; color: var(--ink); }
.dn-credits--wide { grid-column: 1 / -1; }
/* Billing row */
.dn-credits > .dn-billing { grid-column: 1 / -1; }
.dn-billing ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 1.1rem 2rem; }
.dn-billing li { margin: 0; }
.dn-billing li b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.15; letter-spacing: 0; }
.dn-billing li span { display: block; margin-top: .15rem; font-size: .82rem; color: var(--muted); }
/* Orchestra: section names in a narrow column, players beside them */
.dn-roster li { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .8rem; margin-bottom: .5rem; }
.dn-roster li b { font-weight: 600; font-size: .8rem; color: var(--ink); padding-top: .08rem; }
@media (min-width: 761px) {
    .gh-content > .dn-credits:has(> .dn-roster) { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
    .dn-credits > .dn-roster { grid-column: 1; grid-row: 2 / span 6; }
    .dn-credits:has(> .dn-roster) > .dn-fine { grid-column: 2; }
    .gh-content > .dn-credits:has(> .dn-roster) { row-gap: 0; }
    .dn-credits:has(> .dn-roster) > section { margin-bottom: 1.8rem; }
    .dn-credits:has(> .dn-roster) > section:last-child { margin-bottom: 0; }
    .gh-content > .dn-credits:not(:has(> .dn-roster)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gh-content > .dn-credits:not(:has(> .dn-roster)):has(> section:nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dn-credits .dn-fine ul { font-size: .82rem; color: var(--muted); }
.dn-credits .dn-fine li { margin-bottom: .6rem; }
.dn-credits .dn-fine li b { display: block; color: var(--ink-2); font-size: .78rem; }

/* Sponsors: one white board with the logos grouped as on a concert poster.
   site.js sizes each logo by visual area so wide and compact marks weigh the same. */
.gh-content > .dn-sponsors {
    grid-column: wide; margin: 3rem 0 0; padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.2rem, 4vw, 3rem) clamp(1.8rem, 4.5vw, 2.8rem);
    background: #fff; color: #2a221b; border-radius: var(--r-xl); text-align: center;
    box-shadow: 0 30px 60px -36px rgba(0,0,0,.75), inset 0 0 0 1px rgba(42,34,27,.06);
}
.gh-content .dn-sponsors h2, .dn-sponsors > p {
    display: flex; align-items: center; gap: 1rem; justify-content: center;
    font-family: var(--font-ui); font-size: .7rem; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; color: #7a6a5b; margin: 0 0 clamp(1.4rem, 3vw, 2rem);
}
.dn-sponsors h2::before, .dn-sponsors h2::after { content: ""; flex: 0 1 4rem; height: 1px; background: rgba(42,34,27,.18); }
.dn-sponsors ul { list-style: none; padding: 0; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.4rem, 3vw, 2rem) clamp(1.8rem, 4vw, 3rem); }
.dn-sponsors li { margin: 0; }
.dn-sponsors li::marker { content: none; }
.dn-sponsors a, .dn-sponsors li > span { display: block; padding: 0; background: none; box-shadow: none; text-decoration: none; transition: opacity .25s var(--ease); }
.dn-sponsors a:hover { opacity: .75; }
.dn-sponsors img { display: block; height: 3.4rem; width: auto; max-width: min(100%, 16rem); object-fit: contain; filter: none !important; opacity: 1 !important; }
.dn-sponsors .dn-wordmark { display: block; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.02; color: #2a221b; letter-spacing: .01em; max-width: 6.2em; text-align: center; }
@media (max-width: 520px) { .dn-sponsors img { max-width: 9.5rem; } .dn-sponsors h2::before, .dn-sponsors h2::after { display: none; } .dn-sponsors ul { gap: 1.5rem 1.8rem; } .dn-sponsors .dn-wordmark { font-size: 1.2rem; } }

/* Essay: images sit in the text. On wide screens they hang into the margin, like marginalia. */
.dn-essay::after { content: ""; display: block; clear: both; }
.dn-essay p { margin: 0 0 1.1em; }
.dn-essay .dn-inset { margin: 0 0 1rem; }
.dn-inset img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); display: block; }
.dn-inset figcaption { font-family: var(--font-ui); font-size: .78rem; line-height: 1.4; color: var(--muted); margin-top: .5rem; text-align: left; }
.dn-essay blockquote { margin: 1.4em 0; }
@media (min-width: 700px) {
    .dn-essay .dn-inset { float: right; width: 13rem; margin: .35rem 0 1rem 1.8rem; }
    .dn-essay .dn-inset--left { float: left; margin: .35rem 1.8rem 1rem 0; }
}
@media (min-width: 1180px) {
    .dn-essay .dn-inset { width: 17rem; margin-right: -11rem; margin-left: 2.2rem; }
    .dn-essay .dn-inset--left { margin-left: -11rem; margin-right: 2.2rem; }
}
@media (max-width: 699px) { .dn-essay .dn-inset { max-width: 12rem; } }

/* Portrait rows: figures inside .gh-content keep the grid gap only */
.gh-content .dn-person { margin: 0; }
.dn-project .dn-people { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 1.6rem 1.2rem; }

/* Video poster: self-hosted thumbnail and one play button (site.js); YouTube loads on click */
.dn-poster { display: none; }
.dn-consent-wrap.has-poster > .dn-consent { display: none; }
.dn-consent-wrap.has-poster > .dn-poster { all: unset; position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; background: var(--night); }
.dn-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s var(--ease); filter: saturate(.92) brightness(.86); }
.dn-poster:hover img, .dn-poster:focus-visible img { transform: scale(1.025); filter: none; }
.dn-poster__play { position: relative; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 18px 40px -16px rgba(0,0,0,.8); backdrop-filter: blur(8px); transition: transform .3s var(--ease); }
.dn-poster__play::after { content: ""; position: absolute; left: 53%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: .72rem 0 .72rem 1.2rem; border-color: transparent transparent transparent #1b1510; }
.dn-poster:hover .dn-poster__play { transform: scale(1.06); }
.dn-poster:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.dn-poster__note { display: none; }
.has-poster > .dn-poster__note { display: block; position: absolute; left: .9rem; bottom: .7rem; margin: 0; font-family: var(--font-ui); font-size: .72rem; color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.8); pointer-events: auto; }
.has-poster > .dn-poster__note a { color: inherit; }
.dn-essay--lead p { font-size: 1.08em; line-height: 1.55; }
@media (min-width: 700px) { .dn-essay .dn-inset--sm { width: 9.5rem; } }
@media (min-width: 1180px) { .dn-essay .dn-inset--sm { width: 11rem; } .dn-essay .dn-inset--left.dn-inset--sm { margin-left: -6rem; } }

/* ==========================================================================
   Event pages (#event). Date card + venue map in a side column on landscape
   screens; stacked on portrait (date first, map after the text).
   site.js builds the date card from the excerpt and moves figure.dn-venue in.
   ========================================================================== */
.dn-eventlayout { display: flex; flex-direction: column; }
.dn-eventside { display: contents; }
.dn-when, .dn-eventside__venue { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }
.dn-when { order: 0; margin-bottom: clamp(1.8rem, 5vw, 2.6rem); }
.dn-eventbody { order: 1; }
.dn-eventside__venue { order: 2; }
.dn-eventside__venue:empty { display: none; }

.dn-when {
    position: relative; padding: clamp(1.3rem, 4vw, 1.8rem); border-radius: var(--r-xl); font-family: var(--font-ui);
    border: 1px solid var(--glass-edge, var(--line)); background: linear-gradient(160deg, var(--glass-1, rgba(255,255,255,.7)), var(--glass-2, rgba(255,255,255,.4)));
    box-shadow: 0 30px 60px -40px rgba(0,0,0,.7);
}
.dn-when__label { font-size: .72rem; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 .9rem; }
.is-upcoming .dn-when__label { color: var(--accent); }
.dn-when__fallback { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--ink); }
.dn-when__date { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; margin: 0 0 1.1rem; }
.dn-when__day { grid-row: span 2; font-family: var(--font-display); font-size: clamp(4.4rem, 3.6rem + 3vw, 5.8rem); line-height: .82; color: var(--ink); font-variant-numeric: lining-nums; letter-spacing: -.02em; }
.dn-when__month { font-family: var(--font-display); font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); line-height: 1.05; color: var(--ink); align-self: end; }
.dn-when__year { font-size: .95rem; letter-spacing: .14em; color: var(--muted); align-self: start; margin-top: .25rem; }
.dn-when__meta { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; margin: 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .95rem; color: var(--ink-2); }
.dn-when__meta b { font-weight: 600; color: var(--ink); }
.dn-when__time { font-variant-numeric: tabular-nums; }
.dn-when__venue { margin: .8rem 0 0; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; color: var(--ink); }
.dn-when__venue small { display: block; margin-top: .2rem; font-family: var(--font-ui); font-size: .85rem; color: var(--muted); }

/* Venue card: self-hosted static map (OpenFreeMap / OpenStreetMap), links to the interactive map */
.dn-venue { margin: 0; }
.gh-content > .dn-venue { margin: 2.4rem 0; }
.dn-venue__map { display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 50px -32px rgba(0,0,0,.8); }
.dn-venue__map img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--ease); }
.dn-venue__map:hover img { transform: scale(1.03); }
.dn-venue figcaption { margin-top: .75rem; font-family: var(--font-ui); text-align: left; }
.dn-venue__name { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--ink); }
.dn-venue__address { display: block; font-size: .86rem; color: var(--ink-2); margin-top: .1rem; }
.dn-venue__credit { display: block; font-size: .7rem; color: var(--muted); margin-top: .5rem; }
.dn-venue__credit a { color: inherit; }
/* In the side column the date card already names the venue */
.dn-eventside__venue .dn-venue__name, .dn-eventside__venue .dn-venue__address { display: none; }
.dn-eventmain { display: contents; }
.dn-eventplate { order: -1; }

@media (min-width: 900px) and (orientation: landscape) {
    .dn-eventlayout {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); column-gap: clamp(2.5rem, 5vw, 4.5rem);
        align-items: start; width: min(100% - 2 * var(--gutter), var(--wide)); margin: 0 auto;
    }
    .dn-eventside { display: flex; flex-direction: column; gap: 1.6rem; grid-column: 2; grid-row: 1; position: sticky; top: 6rem; }
    .dn-when, .dn-eventside__venue { width: auto; margin: 0; }
    .dn-eventbody { grid-column: 1; grid-row: 1; --gutter: 0px; }
    .dn-eventbody > :first-child { margin-top: 0; }
    /* Image and text share the left column; the image floats so the text wraps around it */
    .dn-eventmain { display: block; grid-column: 1; grid-row: 1; min-width: 0; }
    .dn-eventmain::after { content: ""; display: block; clear: both; }
    .dn-eventplate { float: left; width: clamp(13rem, 38%, 24rem); margin: .3rem 2.4rem 1.4rem 0; }
    .dn-eventplate img { width: 100%; height: auto; max-height: 70vh; object-fit: cover; margin: 0; }
}

/* ==========================================================================
   Flowing prose (.dn-flow: blog posts and event pages). A wider measure and
   block layout instead of the content grid, so ordinary images can float and
   the text wraps around them. Wide/full images and components break out.
   ========================================================================== */
.gh-content.dn-flow {
    --measure: 48rem; --wide: 74rem;
    display: block; width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto;
}
.dn-flow::after { content: ""; display: block; clear: both; }
.dn-flow > h2, .dn-flow > hr, .dn-flow > .kg-width-wide, .dn-flow > .kg-width-full, .dn-flow > .kg-gallery-card { clear: both; }
/* Breakouts: wide (and the components that used the grid's wide column) and full bleed */
.dn-flow > .kg-width-wide, .dn-flow > .dn-wide, .dn-flow > .kg-gallery-card, .dn-flow > .kg-embed-card, .dn-flow > .dn-video,
.dn-flow > .dn-quote, .dn-flow > .dn-people, .dn-flow > .dn-pillars, .dn-flow > .dn-tiles, .dn-flow > .dn-album,
.dn-flow > .dn-bio, .dn-flow > .dn-logos, .dn-flow > .dn-media {
    clear: both; margin-inline: calc((100% - min(var(--wide), 100vw - 2 * var(--gutter))) / 2);
}
.dn-flow > .kg-width-full, .dn-flow > .dn-full { clear: both; margin-inline: calc(50% - 50vw); }
.dn-eventpage, .post-template article { overflow-x: clip; }

/* Ordinary images float on wide screens, alternating right and left */
@media (min-width: 1000px) {
    .dn-flow > .kg-image-card:not(.kg-width-wide):not(.kg-width-full) {
        float: right; width: 46%; margin: .35em -4rem 1.2em 2.4rem;
    }
    .dn-flow > .kg-image-card:not(.kg-width-wide):not(.kg-width-full):nth-child(even of .kg-image-card) { float: left; margin: .35em 2.4rem 1.2em -4rem; }
    .dn-flow > .kg-image-card:not(.kg-width-wide):not(.kg-width-full) img { width: 100%; height: auto; max-height: none; }
    .dn-flow > .kg-image-card:not(.kg-width-wide):not(.kg-width-full) figcaption { text-align: left; }
}

/* Event pages: a wider layout so the text beside the date card gets a proper measure */
@media (min-width: 900px) and (orientation: landscape) {
    .dn-eventlayout { width: min(100% - 2 * var(--gutter), 82rem); }
    .gh-content.dn-eventbody.dn-flow { width: auto; margin: 0; --measure: 100%; }
    /* no breakouts inside the column: they would run under the side column */
    .dn-eventbody.dn-flow > * { margin-inline: 0 !important; }
    .dn-eventbody.dn-flow > .kg-image-card:not(.kg-width-wide):not(.kg-width-full) { margin: .35em 0 1.2em 2.2rem !important; }
    .dn-eventbody.dn-flow > .kg-image-card:not(.kg-width-wide):not(.kg-width-full):nth-child(even of .kg-image-card) { margin: .35em 2.2rem 1.2em 0 !important; }
}

/* Thumbnail framing: cards crop the feature image to 4:3 from the centre. An internal tag
   moves the crop window: #thumb-top (portraits: keep the head), #thumb-bottom. */
.tag-hash-thumb-top .dn-card__image img, .tag-hash-thumb-top .dn-event__image img { object-position: 50% 15%; }
.tag-hash-thumb-bottom .dn-card__image img, .tag-hash-thumb-bottom .dn-event__image img { object-position: 50% 85%; }

/* ==========================================================================
   Privacy banner (external media consent)
   ========================================================================== */
.dn-privacy {
    position: fixed; left: clamp(.75rem, 2vw, 1.5rem); bottom: clamp(.75rem, 2vw, 1.5rem); z-index: 46;
    width: min(38rem, calc(100vw - 1.5rem)); padding: 1.2rem 1.3rem; border-radius: 22px;
    display: flex; flex-direction: column; gap: 1rem;
    font-family: var(--font-ui); color: #f4ede1;
    background: linear-gradient(160deg, rgba(34, 26, 20, .94), rgba(12, 9, 7, .92));
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 70px -24px rgba(0, 0, 0, .8);
    animation: dn-pop .3s var(--ease);
}
.dn-privacy[hidden] { display: none; }
.dn-privacy__title { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 .35rem; }
.dn-privacy__text p:not(.dn-privacy__title) { font-size: .86rem; line-height: 1.5; color: rgba(244, 237, 225, .78); margin: 0; }
.dn-privacy a { color: #f4ede1; text-decoration: underline; text-underline-offset: .18em; }
.dn-privacy__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
/* both choices equally prominent */
.dn-privacy .dn-privacy__btn {
    flex: 1 1 12rem; background: rgba(244, 237, 225, .1); color: #f4ede1;
    box-shadow: inset 0 0 0 1px rgba(244, 237, 225, .28); font-size: .9rem; padding: .85rem 1.2rem;
}
.dn-privacy .dn-privacy__btn:hover { background: rgba(244, 237, 225, .2); color: #fff; }
.dn-privacy-open { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.dn-privacy-open:hover { color: var(--ink); text-decoration: underline; }
/* keep the music player clear of the banner on narrower screens */
@media (max-width: 1100px) { .has-privacy-bar .dn-player { display: none; } }
/* Project cards are wider (16:10), so "top" sits higher there */
.tag-hash-thumb-top .dn-project-card__image img { object-position: 50% 8%; }
.tag-hash-thumb-bottom .dn-project-card__image img { object-position: 50% 90%; }

/* Contact form (partials/contact-form.hbs) --------------------------------- */
.dn-contact-wrap { margin-block: 0 var(--step); }
.gh-content + .dn-contact-wrap { margin-top: calc(var(--step) * -.5); }
.dn-contact { max-width: 48rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: var(--r-xl); }
.dn-contact__title { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); margin: 0 0 1.25rem; }
.dn-contact__form { display: grid; gap: 1rem; }
.dn-contact [hidden] { display: none !important; }
.dn-contact__row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.dn-field { display: grid; gap: .4rem; font-family: var(--font-ui); font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-2); }
.dn-field em { font-style: normal; font-weight: 400; color: var(--muted); }
.dn-field input, .dn-field select, .dn-field textarea {
    width: 100%; min-width: 0; font: 400 1rem/1.4 var(--font-ui); color: var(--ink);
    padding: .8rem 1rem; border-radius: var(--r-md); border: 1px solid var(--line);
    background: rgba(255, 255, 255, .62); box-shadow: inset 0 1px 2px rgba(30, 18, 8, .06);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.dn-field select { appearance: none; padding-right: 2.5rem; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.25rem) 55%, calc(100% - .95rem) 55%; background-size: .32rem .32rem; background-repeat: no-repeat; }
.dn-field textarea { resize: vertical; min-height: 10rem; font: 400 1.12rem/1.55 var(--font-text); }
.dn-field input:focus, .dn-field select:focus, .dn-field textarea:focus {
    outline: none; border-color: var(--accent); background-color: rgba(255, 255, 255, .85); box-shadow: 0 0 0 4px rgba(143, 29, 44, .12);
}
.dn-contact__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dn-contact__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: .25rem; }
.dn-contact__privacy { flex: 1 1 18rem; margin: 0; font: 400 .82rem/1.5 var(--font-ui); color: var(--muted); }
.dn-contact__privacy a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.dn-contact__form.is-sending .dn-button { opacity: .6; pointer-events: none; }
.dn-contact__error { margin: 0; font: 500 .9rem/1.5 var(--font-ui); color: var(--accent); }
.dn-contact__done p { font-size: 1.2rem; margin: 0; }
.dn-contact__done:focus { outline: none; }
html[data-theme="dark"] .dn-field input, html[data-theme="dark"] .dn-field select, html[data-theme="dark"] .dn-field textarea {
    background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); box-shadow: none;
}
html[data-theme="dark"] .dn-field select option { background: #1b1613; color: var(--ink); }
html[data-theme="dark"] .dn-field input:focus, html[data-theme="dark"] .dn-field select:focus, html[data-theme="dark"] .dn-field textarea:focus {
    background-color: rgba(255, 255, 255, .1); box-shadow: 0 0 0 4px rgba(224, 105, 123, .18);
}