@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Source Sans 3';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-italic-latin.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: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-normal-latin.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;
}

/* Arnbak Banjos — clawhammer.dk
   Phase 2.1. The palette, proportions and page furniture are taken from the
   previous clawhammer.dk (Bulma 0.9 defaults plus Ole's own base.css) and then
   modernised where the old values failed contrast, touch or small screens.
   Every value marked "legacy" is the old site's own number. */

/* ---------- 1. Brand typeface -------------------------------------------
   Yellowtail (Astigmatic, Apache-2.0) is the exact display face the old site
   loaded from Google Fonts. It is now self-hosted, so the page makes no
   third-party request. See assets/fonts/LICENSE-Yellowtail.txt. */
@font-face {
  font-family: "Yellowtail";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/yellowtail-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Yellowtail";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/yellowtail-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ---------------------------------------------------- */
:root {
  --paper: #fff;              /* legacy html background */
  --paper-2: #fafafa;         /* legacy footer background */
  --paper-3: #f5f5f5;
  --ink: #4a4a4a;             /* legacy body colour, 8.9:1 on white */
  --ink-strong: #363636;      /* legacy heading colour */
  --ink-soft: #6a6a6a;
  --line: #dbdbdb;            /* legacy border colour */
  --link: #2360b8;            /* legacy #3273dc darkened to 5.6:1 for WCAG AA */
  --link-hover: #17457f;
  --brass: #8a6a2f;           /* from the brass hardware in Ole's header photo */
  --timber: #30251f;          /* from the mahogany rims in the same photo */
  --danger: #9f3831;
  --focus: #1769aa;
  --card-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1); /* legacy .box */
  --image-shadow: 0 2px 5px rgba(0, 0, 0, .2);                                    /* legacy .gallery-image */
  --radius: 4px;              /* legacy .gallery-image radius */
  --content: 72rem;           /* ≈ legacy 1152px container */
  /* One shared edge inset so header, hero, sections and footer all line up. */
  --edge: max(1rem, calc((100% - var(--content)) / 2 + 1rem));
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";  /* legacy base.css stack */
}

/* ---------- 3. Base ----------------------------------------------------- */
* { box-sizing: border-box }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;      /* legacy 16px, raised slightly for readability */
  line-height: 1.65;         /* legacy 1.5 */
}
img, video, audio { display: block; max-width: 100%; height: auto }
h1, h2, h3, h4, p, ul, ol, figure { margin-top: 0 }
h1, h2, h3, h4 { color: var(--ink-strong); font-weight: 600; line-height: 1.2 }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); letter-spacing: -.02em; margin-bottom: 1rem }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); letter-spacing: -.015em }
h3 { font-size: 1.2rem }
a { color: var(--link); text-underline-offset: .18em }
a:hover { color: var(--link-hover) }
button, input, select, textarea { font: inherit }
button, a, input, select, textarea { outline-offset: 3px }
:focus-visible { outline: 3px solid var(--focus) }
.brand-script { font-family: "Yellowtail", "Brush Script MT", cursive; font-weight: 400 }
.eyebrow, .kicker {
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-soft); margin-bottom: .6rem;
}
.text-link { font-weight: 600; display: inline-block; padding: .5rem 0 }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 4. Header and navigation ------------------------------------
   Legacy: a white bar with the plain "Clawhammer.dk" wordmark on the left and
   the root menu on the right. Modernised: a real burger button with an
   aria-expanded state instead of the old jQuery/Bulma toggle, 48px targets. */
.site-header {
  min-height: 4rem; background: var(--paper); border-bottom: 1px solid var(--line);
  /* Legacy arrangement: wordmark first, then the menu immediately beside it. */
  display: flex; align-items: center; justify-content: flex-start;
  gap: 1.25rem; padding: .5rem var(--edge);
  position: relative; z-index: 20;
}
.site-name { color: var(--ink); text-decoration: none; font-size: 1.05rem; padding: .75rem .25rem }
.site-header nav { display: flex; align-items: center; gap: .15rem }
.site-header nav a {
  color: var(--ink); text-decoration: none; padding: .8rem 1rem;
  border-bottom: 3px solid transparent;
}
.site-header nav a:hover { background: var(--paper-3); color: var(--link) }
.site-header nav a[aria-current=page] { border-bottom-color: var(--brass); color: var(--ink-strong); font-weight: 600 }
.nav-toggle {
  display: none; margin-left: auto; min-height: 3rem; min-width: 3.25rem;
  border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius); cursor: pointer;
}

/* ---------- 5. Hero ----------------------------------------------------
   Legacy: Ole's header photograph, a 0.8→0.4 black gradient, the "Arnbak
   Banjos" script at 89px with a dark text shadow, and the Danish subtitle. */
.legacy-hero {
  min-height: 30rem;
  background:
    linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .4)),
    url("/assets/arnbak-header-original.jpg") center 52% / cover no-repeat;
  color: #fff; display: flex; align-items: center;
}
.legacy-hero > div { width: 100%; padding: 4rem var(--edge) }
.legacy-hero h1 {
  font-size: clamp(3.6rem, 9vw, 5.6rem); line-height: 1;
  color: #fff; text-shadow: 4px 4px 4px #021310;   /* legacy shadow */
  margin: 0 0 .75rem; letter-spacing: 0;
}
.legacy-hero p { font-size: 1.3rem; margin: 0; color: #f2f2f2 }

/* ---------- 6. Sections and cards -------------------------------------- */
.section { max-width: var(--content); margin: 0 auto 4.5rem; padding: 0 1rem }
.section-heading {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem 2rem;
  border-bottom: 1px solid var(--line); padding-bottom: .8rem; margin-bottom: 2rem;
}
.section-heading h2 { margin: 0 }
.welcome { margin-top: 4rem }
.welcome > * { max-width: 52rem }
.welcome .motto { font-weight: 700; letter-spacing: .02em; color: var(--ink-strong); margin-bottom: 1.4rem }
.welcome p { margin-bottom: 1rem }

/* Legacy card: a white .box with the photograph on top and the name beneath. */
.category-cards, .instrument-grid { display: grid; gap: 1.5rem }
.category-cards { grid-template-columns: repeat(4, 1fr) }
.instrument-grid { grid-template-columns: repeat(4, 1fr) }
.category-card, .instrument-card {
  background: var(--paper); border-radius: 6px;      /* legacy .box radius */
  box-shadow: var(--card-shadow); overflow: hidden; display: flex; flex-direction: column;
}
.category-card { text-decoration: none; color: var(--ink) }
.category-card strong {
  display: block; padding: 1rem; text-align: center; color: var(--link);
  font-size: 1.05rem; font-weight: 600;
}
.category-card:hover strong { color: var(--link-hover); text-decoration: underline }
/* Public photographs retain their complete original proportions. */
.card-figure {
  position: relative; aspect-ratio: 4 / 5; background: #fff;
  display: block; overflow: hidden; text-decoration: none;
}
.card-figure img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.instrument-card .card-body { padding: 1rem 1.1rem 1.25rem; text-align: center }
.instrument-card h3 { margin: 0 0 .5rem; font-size: 1.1rem; line-height: 1.35 }
.instrument-card { position: relative }
.instrument-card h3 a { text-decoration: none }
.instrument-card h3 a:hover { text-decoration: underline }
/* The card's single link covers the whole card, so the target is large and the
   photograph is not a second, duplicate link to the same page. */
.instrument-card h3 a.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1 }
.instrument-card h3 a.stretched:focus-visible { outline: none }
.instrument-card:has(a.stretched:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px }
.instrument-card p { margin: 0; font-size: .95rem; color: var(--ink-soft); text-align: left }

/* Honest placeholder: no photograph is invented when the original is missing. */
.missing-photo {
  display: block; padding: 1rem; text-align: center; color: #7a7a7a;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; line-height: 1.7;
}
.media-pending { margin: 1rem 0; border: 1px dashed var(--line); background: var(--paper-3) }
.media-pending .missing-photo { padding: 2rem 1rem }

/* ---------- 7. Content pages ------------------------------------------- */
.breadcrumbs {
  max-width: var(--content); margin: 1.25rem auto .5rem;
  padding: 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem;
  font-size: .9rem; color: var(--ink-soft);
}
.page-intro { max-width: var(--content); margin: 0 auto; padding: 1.5rem 1rem 2.5rem }
.intro-prose { margin: 0; max-width: 48rem }
/* One container width for every page, as on the old site. Only the reading
   measure inside .prose is narrowed. */
.instrument-detail, .article-detail, .standard-page {
  max-width: var(--content); margin: 1rem auto 5rem; padding: 0 1rem;
}
.prose { max-width: 48rem; font-size: 1.075rem }
.prose > :last-child { margin-bottom: 0 }
.prose p, .prose ul, .prose ol { margin-bottom: 1em }
.prose h2 { font-size: 1.45rem; margin-top: 2rem }
.prose h3 { font-size: 1.2rem; margin-top: 1.6rem }
.prose li { margin-bottom: .3em }
.prose a { overflow-wrap: anywhere }
/* On Ole's Links page each link is a paragraph of its own. Giving those a little
   height meets the 24 px target minimum without touching links inside sentences. */
.prose p > a:only-child { display: inline-block; padding: .25rem 0 }
.prose blockquote {
  border-left: 4px solid var(--brass); margin-left: 0; padding-left: 1.25rem; font-style: italic;
}
.added, .content-updated { color: var(--ink-soft); font-size: .9rem }
.content-updated { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1rem }
.archive-note {
  background: var(--paper-3); border-left: 4px solid var(--brass);
  padding: .9rem 1.1rem; max-width: 48rem;
}

/* Legacy detail layout: description in a wide column, photographs beside it. */
.detail-columns { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; align-items: start }
.detail-media h2 { font-size: 1.35rem; margin-bottom: 1rem }
.detail-media h3 { font-size: 1rem; color: var(--ink-soft); font-weight: 600; margin-bottom: .8rem }
.cover { margin: 0 0 1rem }
/* Ole's photographs are mostly portrait and were never cropped on the old site.
   A column flow keeps every original aspect ratio and still fills the space. */
.gallery-grid { columns: 2; column-gap: 1rem }
.gallery-grid figure { margin: 0 0 1rem; break-inside: avoid }
.gallery-grid img, .cover img {
  width: 100%; border-radius: var(--radius); box-shadow: var(--image-shadow);
}
.article-gallery { max-width: 48rem; margin: 2rem 0; columns: 3 }
.cover figcaption, .gallery-grid figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: .4rem }
.recordings { max-width: 60rem; margin: 3.5rem 0 0 }
.recordings h2 { font-size: 1.45rem; margin-bottom: .25rem }
.recordings h3 { font-size: 1rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 1.25rem }
.player { margin: 0 0 1.5rem }
.player audio { width: 100%; min-height: 2.5rem }
.player video { width: 100%; height: auto; background: #000; border-radius: var(--radius) }
.player figcaption { font-size: .88rem; color: var(--ink-soft); margin: .4rem 0 }
.player audio + figcaption, .player > figcaption:first-child { margin-bottom: .4rem }

.news-archive { display: grid; gap: 2.5rem }
.news-archive article {
  max-width: 56rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
  align-items: start; border-top: 1px solid var(--line); padding-top: 2rem;
}
.news-archive article.with-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 2rem }
.news-archive h2 { font-size: 1.5rem; margin-bottom: .4rem }
.news-archive h2 a { text-decoration: none }
.news-archive h2 a:hover { text-decoration: underline }
.news-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem }
.news-list article { border-top: 3px solid var(--brass); padding-top: 1rem }
.news-list h3 { margin: .4rem 0 .5rem; font-size: 1.15rem }
.news-list h3 a { display: inline-block; padding: .2rem 0 }
.news-list h3 a { text-decoration: none }
.news-list time, .news-archive time { color: var(--ink-soft); font-size: .85rem }
.news-list p { font-size: .95rem; color: var(--ink-soft) }

.error-page { max-width: 40rem; margin: auto; padding: 6rem 1rem; text-align: center }

/* Development-only banner: obviously not part of the site's own content. */
.dev-note {
  max-width: 48rem; margin: 2.5rem 0 0; padding: .9rem 1.1rem;
  border: 2px dashed #b08b3a; background: #fdf8ec; color: #4a3c1d; font-size: .95rem;
}
.dev-note p { margin: 0 }
.dev-note p:first-child {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .4rem;
}

/* ---------- 8. Footer ---------------------------------------------------
   Legacy: a light grey footer with "Arnbak Banjos" in the script face and the
   copyright line. The link column is new and replaces the old version stamp. */
.site-footer {
  background: var(--paper-2); border-top: 1px solid var(--line); color: var(--ink);
  padding: 3rem var(--edge);
  display: grid; grid-template-columns: 2fr 1fr; gap: 2rem;
}
.site-footer .brand-script { font-size: 1.9rem; color: var(--ink-strong); margin-bottom: .3rem }
.site-footer .footer-copy { margin: 0; font-size: .95rem; color: var(--ink-soft) }
.site-footer nav { display: grid; gap: .5rem; font-size: .95rem }

.dev-banner {
  background: #fdf8ec; border-top: 2px dashed #b08b3a; color: #4a3c1d;
  padding: 1rem var(--edge); font-size: .92rem;
}
.dev-banner b { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; display: block; margin-bottom: .25rem }
.dev-banner p { margin: 0; max-width: 60rem }
.preview-bar {
  background: #f0c56d; color: #21190d; text-align: center;
  font-weight: 700; font-size: .9rem; padding: .7rem; position: sticky; top: 0; z-index: 30;
}

/* ---------- 9. Shared controls ----------------------------------------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: .65rem 1.35rem; border-radius: var(--radius);
  border: 2px solid var(--link); background: var(--link); color: #fff;
  text-decoration: none; font-weight: 700; cursor: pointer;
}
.button:hover { background: var(--link-hover); border-color: var(--link-hover); color: #fff }
.button.secondary { background: transparent; color: var(--link) }
.button.secondary:hover { background: var(--paper-3); color: var(--link-hover) }
.button.ghost { background: #fff; color: var(--ink); border-color: var(--line) }
.button.danger-secondary { background: transparent; color: var(--danger); border-color: var(--danger) }
.button.wide { width: 100% }
.link-button { background: none; border: 0; text-decoration: underline; cursor: pointer; color: inherit; padding: .8rem .25rem }
label { display: grid; gap: .45rem; font-weight: 700 }
input, select, textarea {
  width: 100%; border: 2px solid #b5b5b5; background: #fff; color: #201e1b;
  border-radius: var(--radius); padding: .8rem .9rem; min-height: 3rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--focus) }
textarea { resize: vertical; line-height: 1.55 }
.notice { padding: 1rem 1.2rem; border-left: 5px solid #317438; background: #e4f2e5; margin-bottom: 1.5rem }
.notice.error { border-color: var(--danger); background: #f8e4e2 }
.status {
  display: inline-block; border-radius: 2rem; padding: .25rem .65rem; font-size: .72rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.status-published { background: #dceadd; color: #1c5623 }
.status-draft { background: #f3e7bf; color: #66510e }
.status-archived { background: #e4e1dc; color: #554f48 }
.split { display: flex; justify-content: space-between; gap: 1rem }
.muted, .help, .label-help { color: var(--ink-soft) }
.label-help { font-weight: 400; font-size: .88rem }

/* ---------- 10. Administration ------------------------------------------
   The Phase 2 interaction design is unchanged; only the surface now belongs to
   Arnbak Banjos: the script wordmark, the site's timber/brass accents and the
   same neutral greys as the public pages. */
.admin-body { background: var(--paper-3); color: var(--ink); font-size: 1rem }
.admin-header {
  min-height: 5rem; background: #fff; border-top: 4px solid var(--timber);
  border-bottom: 1px solid var(--line);
  padding: 1rem max(1.5rem, calc((100% - 86rem) / 2));
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; position: relative;
}
.admin-brand { text-decoration: none; display: flex; align-items: baseline; gap: .65rem }
.admin-brand .brand-script { font-size: 1.9rem; color: var(--ink-strong) }
.admin-brand small { font-size: .85rem; color: var(--ink-soft) }
.admin-header nav { display: flex; align-items: center; gap: 1.2rem }
.admin-header nav a { color: var(--ink) }
.admin-header form { margin: 0 }
.admin-main { max-width: 86rem; margin: auto; padding: 3rem 2rem 7rem }
.admin-main h1 { font-size: clamp(2rem, 4vw, 2.9rem) }
.admin-main h2 { font-size: 1.5rem }
.admin-welcome { margin-bottom: 2.5rem }
.primary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 3.5rem }
.primary-actions > a {
  background: var(--timber); color: #fff; text-decoration: none; padding: 2rem;
  display: flex; align-items: center; gap: 1.5rem; min-height: 8rem;
  border-radius: 6px; box-shadow: var(--card-shadow);
}
.primary-actions b { font-size: 2.4rem; color: #d8b878 }
.primary-actions strong, .primary-actions small { display: block }
.primary-actions strong { font-size: 1.4rem }
.primary-actions small { color: #ddd3c4; margin-top: .3rem }
.admin-summary, .stat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 3.5rem }
.admin-summary article, .stat-cards article, .chart-card, .insight-grid > section {
  background: #fff; border-radius: 6px; box-shadow: var(--card-shadow); padding: 2rem;
}
.big-number, .stat-cards strong { font-size: 3.4rem; line-height: 1; font-weight: 700 }
.stat-cards strong { display: block; margin-top: .5rem }
.admin-section { margin-top: 3.5rem }
.admin-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem }
.admin-content-card {
  background: #fff; border-radius: 6px; box-shadow: var(--card-shadow);
  display: grid; grid-template-columns: 10rem 1fr; min-height: 10rem; overflow: hidden;
}
.admin-content-card img, .admin-thumb {
  width: 10rem; height: 100%; object-fit: cover; background: var(--paper-3);
  display: grid; place-items: center; color: var(--ink-soft); font-size: .85rem; text-align: center;
}
.admin-content-card > div:last-child { padding: 1.2rem }
.admin-content-card h3 { margin: 0; font-size: 1.2rem }
.admin-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-bottom: 2.5rem }
.back-link { display: inline-block; margin-bottom: 1.2rem }
.filters {
  background: #fff; border-radius: 6px; box-shadow: var(--card-shadow); padding: 1.4rem;
  display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 1rem; align-items: end; margin-bottom: 2rem;
}
.login-shell {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem;
  background: linear-gradient(rgba(0, 0, 0, .82), rgba(0, 0, 0, .55)),
    url("/assets/arnbak-header-original.jpg") center / cover no-repeat;
}
.login-card { width: min(31rem, 100%); background: var(--paper); padding: 3rem; border-radius: 6px; box-shadow: 0 18px 45px rgba(0, 0, 0, .35) }
.login-card .back-to-site { display: inline-block; padding: .5rem 0 }
.login-card .brand-script { font-size: 2.2rem; display: block; margin-bottom: 2rem; color: var(--ink-strong); text-decoration: none }
.form-stack { display: grid; gap: 1.4rem; margin: 2rem 0 }
/* Grid items default to min-width:auto, and a <select> is as wide as its longest
   option — which pushed the whole editor past a phone's viewport. */
.form-stack > *, .editor-card > * { min-width: 0 }
input, select, textarea { max-width: 100% }
.editor-page { max-width: 76rem }
.save-state { color: var(--ink-soft) }
.editor-form { margin: 0 }
.editor-card {
  background: #fff; border-radius: 6px; box-shadow: var(--card-shadow); padding: 2rem;
  display: grid; grid-template-columns: 3rem 1fr; gap: 1.5rem; margin-bottom: 1.5rem;
}
.step-number {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--timber);
  color: #fff; display: grid; place-items: center; font-weight: 800;
}
.content-editor { min-height: 22rem; font-size: 1.05rem }
.check { display: flex; align-items: flex-start; gap: .8rem; background: var(--paper-3); padding: 1rem; border-radius: var(--radius) }
.check input { width: 1.6rem; height: 1.6rem; min-height: 1.6rem; margin-top: .2rem; flex: none }
.check b, .check small { display: block }
.check small { font-weight: 400; color: var(--ink-soft) }
.sticky-actions {
  position: sticky; bottom: 0; z-index: 10; background: rgba(245, 246, 246, .96);
  border-top: 1px solid var(--line); padding: 1rem 0; display: flex; gap: .8rem;
  flex-wrap: wrap; margin-bottom: 2rem;
}
.upload-box { border: 2px dashed #a9a093; background: #fbfaf7; padding: 1.5rem; display: grid; gap: 1rem; border-radius: var(--radius) }
.media-manager { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem }
.media-manager article { background: #fff; border-radius: 6px; box-shadow: var(--card-shadow); padding: .7rem }
.media-manager article[draggable=true] { cursor: grab }
.media-manager img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--radius) }
.media-manager p { font-size: .8rem; overflow-wrap: anywhere }
.media-actions { display: grid; gap: .5rem }
.small-button { border: 1px solid #aaa298; background: #fff; padding: .6rem; cursor: pointer; border-radius: var(--radius); min-height: 2.75rem }
.small-button.danger { color: var(--danger) }
.media-kind, .empty-inline { aspect-ratio: 4 / 3; background: var(--paper-3); display: grid; place-items: center; font-weight: 700 }
.revision-row { border-top: 1px solid var(--line); padding: 1rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem }
.revision-row span > * { display: block }
.revision-row small { color: var(--ink-soft) }
.chart-card { margin-bottom: 1.5rem }
.bar-chart { height: 15rem; display: flex; align-items: end; gap: 1rem; border-bottom: 1px solid var(--line); padding-top: 2rem }
.bar-chart > div { min-width: 0 }
.bar-chart small { font-size: .72rem; white-space: nowrap }
.bar-chart > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: .2rem }
/* Bar heights are one of eleven classes chosen on the server, so the visitor
   chart needs no inline style and the policy stays at `style-src 'self'`. */
.bar-chart span.bar { width: min(3rem, 80%); background: var(--brass); height: 3px }
.bar-chart span.bar.h1 { height: 10% }
.bar-chart span.bar.h2 { height: 20% }
.bar-chart span.bar.h3 { height: 30% }
.bar-chart span.bar.h4 { height: 40% }
.bar-chart span.bar.h5 { height: 50% }
.bar-chart span.bar.h6 { height: 60% }
.bar-chart span.bar.h7 { height: 70% }
.bar-chart span.bar.h8 { height: 80% }
.bar-chart span.bar.h9 { height: 90% }
.bar-chart span.bar.h10 { height: 100% }
.bar-chart b, .bar-chart small { font-size: .78rem }
.insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem }
.insight-grid ol { padding: 0; list-style: none }
.insight-grid li { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding: .7rem 0 }
.privacy-note { margin-top: 2rem; color: var(--ink-soft) }
.empty-state { background: #fff; padding: 3rem; text-align: center; grid-column: 1 / -1; border-radius: 6px; box-shadow: var(--card-shadow) }

/* ---------- 11. Responsive ---------------------------------------------
   The old site only had Bulma's desktop breakpoint and a jQuery burger. These
   rules are new work: tablet/iPad and phone layouts, and a keyboard-operable
   menu button with 48px targets. */
@media (max-width: 1000px) {
  .category-cards, .instrument-grid { grid-template-columns: repeat(3, 1fr) }
  .detail-columns { grid-template-columns: 1fr; gap: 2.5rem }
  .detail-media { max-width: 48rem }
  .gallery-grid { columns: 3 }
  .news-list { grid-template-columns: 1fr 1fr }
}
@media (max-width: 900px) {
  .site-header nav, .admin-header nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 16px rgba(10, 10, 10, .1);
    flex-direction: column; align-items: stretch; padding: .5rem 1rem 1rem; gap: 0;
  }
  .site-header nav.open, .admin-header nav.open { display: flex }
  .site-header nav a, .admin-header nav a { padding: 1rem .5rem; border-bottom: 1px solid var(--paper-3) }
  .site-header nav a[aria-current=page] { border-bottom-color: var(--brass) }
  .nav-toggle { display: block }
  .legacy-hero { min-height: 24rem }
  .legacy-hero > div { padding: 3rem 1rem }
  .category-cards, .instrument-grid { grid-template-columns: repeat(2, 1fr) }
  .admin-card-grid, .primary-actions, .insight-grid { grid-template-columns: 1fr }
  .filters { grid-template-columns: 1fr 1fr }
  .media-manager { grid-template-columns: 1fr 1fr }
}
@media (max-width: 620px) {
  body { font-size: 1rem }
  .legacy-hero { min-height: 19rem; background-position: 56% center }
  .legacy-hero h1 { font-size: clamp(2.8rem, 13vw, 3.6rem) }
  .legacy-hero p { font-size: 1.1rem }
  .welcome { margin-top: 2.5rem }
  .section { margin-bottom: 3rem }
  .category-cards, .instrument-grid, .news-list { grid-template-columns: 1fr }
  .gallery-grid, .article-gallery { columns: 2 }
  .news-archive article { grid-template-columns: 1fr; gap: 1rem }
  .site-footer { grid-template-columns: 1fr }
  .content-updated { margin-top: 2rem }
  .admin-main { padding: 2rem 1rem 5rem }
  .admin-summary, .stat-cards { grid-template-columns: 1fr }
  .admin-content-card { grid-template-columns: 7rem 1fr }
  .admin-content-card img, .admin-thumb { width: 7rem }
  .admin-title-row { flex-direction: column }
  .filters, .media-manager { grid-template-columns: 1fr }
  .bar-chart { gap: .35rem; height: 12rem }
  .editor-card { grid-template-columns: 1fr; padding: 1.2rem }
  .sticky-actions .button { flex: 1 }
  .login-card { padding: 2rem 1.4rem }
  .admin-brand small { display: none }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important }
}

/* ---------- 12. Phase 3 administration ---------------------------------
   Written for Ole: words instead of icons, large targets, one obvious action,
   and nothing that needs a mouse. Everything below is admin-only. */

.notice { border-radius: var(--radius); display: flex; gap: .6rem; align-items: flex-start }
.notice p { margin: 0 }
.notice.success { border-left: 5px solid #2f7a37; background: #e8f5ea }
.notice.error { border-left: 5px solid var(--danger); background: #fbe9e7 }

/* Publication state, in a sentence. */
.publish-panel {
  background: #fff; border-radius: 6px; box-shadow: var(--card-shadow);
  padding: 1.5rem 1.75rem; margin-bottom: 1.5rem;
}
.publish-panel h2 { font-size: 1.15rem; margin-bottom: .5rem }
.publish-panel .state-line { margin: 0; font-size: 1.05rem }
.publish-panel .state { display: inline }
.publish-panel .state.on { color: #1c5623 }
.publish-panel .state.draft { color: #7a5c0a }
.publish-panel .state.off { color: #6b4a46 }
.publish-panel .save-state { margin: .5rem 0 0; font-size: .92rem }

.editor-card { display: block; padding: 1.75rem }
.editor-card > h2 { font-size: 1.3rem; margin-bottom: .4rem }
.editor-card > .help { margin-bottom: 1.25rem }
.sticky-actions { align-items: center }

/* Secondary areas on the admin home: words, not icon tiles. */
.secondary-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem }
.secondary-actions a {
  background: #fff; border-radius: 6px; box-shadow: var(--card-shadow);
  padding: 1.25rem 1.4rem; text-decoration: none; color: var(--ink); display: grid; gap: .2rem;
  min-height: 5.5rem; align-content: center;
}
.secondary-actions a:hover { box-shadow: 0 4px 10px rgba(20, 27, 33, .16) }
.secondary-actions b { font-size: 1.15rem; color: var(--link) }
.secondary-actions small { color: var(--ink-soft) }

/* ---- rich text ---- */
.rich-text { display: grid; gap: .45rem }
.rich-label { font-weight: 700 }
trix-toolbar .trix-button-row { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: .5rem }
.rich-text { min-width: 0 }
trix-toolbar .trix-button-group { display: flex; flex-wrap: wrap; gap: .3rem; border: 0; margin: 0 }
trix-toolbar .trix-button-group:not(:first-child) { margin-left: 0 }
trix-toolbar .trix-button {
  border: 1px solid #b5b5b5; background: #fff; border-radius: var(--radius);
  min-height: 2.9rem; padding: 0 .9rem; font: inherit; font-size: .95rem; font-weight: 600;
  color: var(--ink); cursor: pointer; width: auto; opacity: 1;
}
trix-toolbar .trix-button:hover { background: var(--paper-3) }
/* Explicit, so the editor's own stylesheet cannot remove the keyboard ring. */
trix-toolbar .trix-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
trix-toolbar .trix-button:focus { outline: 3px solid var(--focus); outline-offset: 2px }
trix-toolbar .trix-button.trix-active { background: var(--timber); border-color: var(--timber); color: #fff }
trix-toolbar .trix-button:disabled { opacity: .55; cursor: default; background: var(--paper-3) }
trix-toolbar .trix-button::before { display: none }
trix-editor {
  border: 2px solid #b5b5b5; border-radius: var(--radius); background: #fff;
  min-height: 20rem; padding: 1rem; font-size: 1.05rem; line-height: 1.6;
}
trix-editor:focus { border-color: var(--focus); outline: 3px solid var(--focus); outline-offset: 1px }
trix-editor h1, trix-editor h2 { font-size: 1.35rem; margin: 1.2rem 0 .5rem }
trix-editor ul, trix-editor ol { padding-left: 1.6rem }
trix-editor blockquote { border-left: 4px solid var(--brass); margin-left: 0; padding-left: 1rem }
/* Trix drives dialog visibility from a data attribute and expects the
   stylesheet to hide the inactive ones. Its shipped CSS does not include that
   rule, so it lives here — which also means no style is injected at runtime and
   the Content-Security-Policy stays at `style-src 'self'`. */
trix-toolbar [data-trix-dialog] { display: none }
trix-toolbar [data-trix-dialog][data-trix-active] { display: block }
trix-toolbar .trix-button-row { justify-content: flex-start; flex-wrap: wrap; overflow-x: visible }
trix-toolbar .trix-dialog {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 10px 30px rgba(20, 27, 33, .18); padding: 1rem; z-index: 20; font-size: 1rem;
}
.trix-dialog .trix-input--dialog { margin-bottom: .6rem }
.trix-dialog .trix-button--dialog { min-height: 2.9rem; padding: 0 1rem; border: 1px solid #b5b5b5; background: #fff; border-radius: var(--radius) }

/* ---- upload ---- */
.upload-box { border-radius: 6px }
.file-field { gap: .3rem }
.file-field input[type=file] { padding: .75rem; border-style: dashed; min-height: 3.5rem }
.file-count { font-weight: 600; color: #1c5623 }
form.upload-box.busy button { opacity: .7 }

/* ---- media manager: show the whole photograph (§19) ---- */
.media-manager { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem }
.media-card {
  background: #fff; border-radius: 6px; box-shadow: var(--card-shadow);
  padding: .9rem; display: grid; gap: .7rem; align-content: start;
}
.media-thumb {
  position: relative; aspect-ratio: 4 / 3; background: var(--paper-3);
  border-radius: var(--radius); overflow: hidden;
}
.media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain }
.media-kind {
  display: grid; place-items: center; align-content: center; gap: .2rem;
  font-weight: 700; color: var(--ink-soft); position: static;
}
.media-kind small { font-weight: 400 }
.media-card .is-cover { margin: 0; font-weight: 700; color: #7a5c0a; font-size: .92rem }
.media-card .describe { display: grid; gap: .4rem; margin: 0 }
.media-card .describe input { min-height: 2.9rem; font-size: .95rem }
.media-card .describe label { font-size: .92rem }
.media-actions { display: grid; gap: .45rem }
.move-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem }
.media-actions form { margin: 0 }
.small-button { width: 100%; font-weight: 600 }

/* ---- instrument types ---- */
.type-list { list-style: none; padding: 0; display: grid; gap: 1rem }
.type-row {
  background: #fff; border-radius: 6px; box-shadow: var(--card-shadow); padding: 1rem;
  display: grid; grid-template-columns: 8rem 1fr 14rem; gap: 1.25rem; align-items: center;
}
.type-row.is-hidden { opacity: .72 }
.type-thumb {
  position: relative; aspect-ratio: 4 / 3; background: var(--paper-3); border-radius: var(--radius);
  overflow: hidden; display: grid; place-items: center; font-size: .8rem; color: var(--ink-soft); text-align: center;
}
.type-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain }
.type-main h2 { font-size: 1.2rem; margin: 0 0 .25rem }
.type-main p { margin: 0; font-size: .95rem }
.type-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem }
.type-actions .button { grid-column: 1 / -1 }
.type-actions form { margin: 0 }
.type-actions form:last-of-type { grid-column: 1 / -1 }

.cover-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem }
.cover-picker form { margin: 0 }
.cover-choice {
  width: 100%; background: #fff; border: 2px solid var(--line); border-radius: 6px;
  padding: .5rem; cursor: pointer; display: grid; gap: .4rem; font: inherit; font-weight: 600;
}
.cover-choice img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--paper-3); border-radius: var(--radius) }
.cover-choice.chosen { border-color: var(--brass); background: #fdf8ec; color: #7a5c0a }
.cover-choice:hover { border-color: var(--link) }

/* ---- picture list ---- */
.library { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem }
.library-card { background: #fff; border-radius: 6px; box-shadow: var(--card-shadow); padding: .9rem; display: grid; gap: .6rem; align-content: start }
.library-card.unused { border: 2px dashed #c9a95c }
.library-card .used-by { margin: 0; font-size: .9rem; color: var(--ink-soft) }
.library-card .describe { display: grid; gap: .4rem; margin: 0 }
.count { font-weight: 400; color: var(--ink-soft); font-size: .9em }
.admin-content-card.no-thumb { grid-template-columns: 1fr }
.admin-thumb { position: relative; overflow: hidden }
.admin-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain }

@media (max-width: 900px) {
  .secondary-actions { grid-template-columns: 1fr 1fr }
  .type-row { grid-template-columns: 7rem 1fr; row-gap: 1rem }
  .type-actions { grid-column: 1 / -1 }
}
@media (max-width: 620px) {
  .secondary-actions { grid-template-columns: 1fr }
  .media-manager, .library, .cover-picker { grid-template-columns: 1fr }
  .type-row { grid-template-columns: 1fr }
  .editor-card { padding: 1.1rem }
  trix-editor { min-height: 15rem }
  trix-toolbar .trix-button { padding: 0 .6rem; font-size: .9rem; min-height: 2.75rem }
}

/* ---------- UI refinement: proportions, reading rhythm, whole photographs ---
   Legacy palette and type remain. The scale below is shared by public/admin;
   photographic frames use contain, never crop or colour processing. */
:root {
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --space-16: 4rem; --space-24: 6rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --edge: max(var(--gutter), calc((100% - 70rem) / 2));
  --section-space: clamp(3.5rem, 6vw, 6rem);
  --paper-2: #f7f7f5; --paper-3: #f2f3f1;
  --line: #dedfda; --ink-soft: #626660;
}
html { scroll-padding-top: var(--space-8) }
body { line-height: 1.7 }
h1, h2, h3 { overflow-wrap: break-word; text-wrap: pretty }
h1 { font-size: clamp(2.1rem, 3.5vw, 3.25rem); line-height: 1.13; letter-spacing: -.035em }
h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); letter-spacing: -.025em; line-height: 1.25 }
h3 { line-height: 1.4; letter-spacing: -.01em }
a, button { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease }
a:hover { text-decoration-thickness: 2px }
.skip-link { position: fixed; left: var(--gutter); top: -5rem; z-index: 100; padding: .75rem 1rem; background: #fff; color: var(--link) }
.skip-link:focus { top: 1rem }
.site-header { min-height: 5rem; gap: var(--space-12); padding: .5rem var(--edge); border-bottom-color: #e9eae6 }
.site-name { font-weight: 600; letter-spacing: -.025em; padding-left: 0; white-space: nowrap }
.site-header nav { gap: var(--space-2) }
.site-header nav a { font-size: .95rem; padding: .75rem 1rem; border-bottom-width: 2px }
.site-header nav a:hover { background: var(--paper-2) }
.nav-toggle { align-items: center; justify-content: center; gap: .75rem; padding: .5rem .75rem; color: var(--ink-strong) }
.nav-toggle-icon { width: 1rem; height: .65rem; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; position: relative }
.nav-toggle[aria-expanded=true] .nav-toggle-icon { border: 0 }
.nav-toggle[aria-expanded=true] .nav-toggle-icon::before,
.nav-toggle[aria-expanded=true] .nav-toggle-icon::after { content: ''; position: absolute; top: .3rem; left: 0; width: 1rem; height: 1px; background: currentColor; transform: rotate(45deg) }
.nav-toggle[aria-expanded=true] .nav-toggle-icon::after { transform: rotate(-45deg) }
.legacy-hero {
  min-height: clamp(25rem, 36vw, 33rem); align-items: flex-end;
  background-image: linear-gradient(90deg, rgba(9,12,16,.72), rgba(9,12,16,.36) 55%, rgba(9,12,16,.2)), url('/assets/arnbak-header-original.jpg');
  background-position: center 52%;
}
.legacy-hero > div { padding: 5rem var(--edge) }
.legacy-hero h1 { font-size: clamp(4rem, 7vw, 6rem); line-height: 1.12; text-shadow: 0 2px 8px rgba(0,0,0,.3); margin-bottom: var(--space-4) }
.legacy-hero p { font-size: 1.2rem; letter-spacing: .025em; color: #fff }
.section, .page-intro, .breadcrumbs, .instrument-detail, .article-detail, .standard-page {
  width: auto; max-width: none; margin-left: var(--edge); margin-right: var(--edge); padding-left: 0; padding-right: 0;
}
.section { margin-bottom: var(--section-space) }
.section-heading { border-bottom: 1px solid var(--line); padding-bottom: var(--space-6); margin-bottom: var(--space-8); gap: 1rem 2rem }
.section-heading .text-link { font-size: .95rem }
.welcome { margin-top: var(--space-16); display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-24); align-items: start }
.welcome h2 { max-width: 20ch; margin-bottom: var(--space-6) }
.welcome .motto { font-size: .95rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; margin-bottom: 0 }
.welcome-copy { max-width: 60ch }
.welcome-copy p:first-child { font-size: 1.125rem; line-height: 1.75 }
.welcome-copy p:last-child { margin-bottom: 0 }
.text-link { font-weight: 500; text-decoration-thickness: 1px; padding: .5rem 0 }
.category-cards { grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--space-6) }
.category-card, .instrument-card { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; min-width: 0 }
.card-figure { background: #fff; border-radius: 2px; aspect-ratio: 3 / 4 }
.category-card strong { text-align: left; padding: var(--space-4) 0; font-size: 1rem; line-height: 1.5; font-weight: 500; border-bottom: 1px solid var(--line) }
.category-card:hover strong, .category-card:focus-visible strong { border-color: var(--link); color: var(--link-hover) }
.instrument-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-12) var(--space-8) }
.instrument-card .card-body { padding: var(--space-6) 0 0; text-align: left }
.instrument-card h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: var(--space-3) }
.instrument-card p { font-size: 1rem; line-height: 1.65; max-width: 48ch }
.instrument-card:hover h3 a { text-decoration: underline }
.instrument-grid:has(> :only-child) { grid-template-columns: 1fr }
.instrument-grid > .instrument-card:only-child { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: var(--space-12); max-width: 56rem; align-items: center }
.instrument-grid > .instrument-card:only-child .card-figure { max-height: 26rem; width: 100% }
.instrument-grid > .instrument-card:only-child h3 { font-size: clamp(1.5rem,2.4vw,2rem) }
.instrument-grid > .instrument-card:only-child .card-body { padding: 0 }
.collection-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line) }
.collection-nav a { padding: .5rem 0; max-width: 36ch; font-size: 1rem; line-height: 1.5 }
.collection { scroll-margin-top: var(--space-8) }
.collection .section-heading h2 { max-width: 42ch; font-size: clamp(1.4rem,2.2vw,1.8rem) }
.collection .section-heading a { text-decoration: none; color: var(--ink-strong) }
.collection .section-heading a:hover { color: var(--link); text-decoration: underline }
.collection-arrow::after { content: "→" }
.collection .section-heading a span { color: var(--link); white-space: nowrap }
.breadcrumbs { margin-top: var(--space-6); margin-bottom: var(--space-6); font-size: .85rem; gap: .35rem .65rem; align-items: baseline }
.breadcrumbs a { color: var(--ink-soft); display: inline-block; padding: .25rem 0 }
.breadcrumbs a:hover { color: var(--link) }
.page-intro { padding-top: var(--space-4); padding-bottom: var(--space-12) }
.page-intro h1 { max-width: 26ch; margin-bottom: 0 }
.category-intro { display: grid; grid-template-columns: 1fr auto; gap: var(--space-12); align-items: center; padding-bottom: var(--space-12) }
.category-intro .intro-prose { margin-top: var(--space-6) }
.category-portrait { margin: 0; width: 14rem; height: 17rem; background: #fff }
.category-portrait img { width: 100%; height: 100%; object-fit: contain }
.instrument-detail, .article-detail, .standard-page { margin-top: 0; margin-bottom: var(--section-space) }
.instrument-detail > header, .article-detail > header, .standard-page > header { padding: var(--space-4) 0 var(--space-8); margin-bottom: var(--space-8); border-bottom: 1px solid var(--line) }
.instrument-detail h1, .article-detail h1 { max-width: 30ch; margin-bottom: 0 }
.prose { font-size: 1.125rem; line-height: 1.8; max-width: 64ch; overflow-wrap: break-word }
.prose p, .prose ul, .prose ol { margin-bottom: 1.25em }
.prose h2 { font-size: 1.5rem; margin: var(--space-12) 0 var(--space-6) }
.prose h3 { margin: var(--space-8) 0 var(--space-4) }
.prose > :first-child { margin-top: 0 }
.prose a:visited { color: #625080 }
.detail-columns { gap: clamp(2rem,5vw,5rem); grid-template-columns: minmax(0,1.25fr) minmax(0,1fr) }
.instrument-opening { align-items: start }
.instrument-opening .cover { max-width: 26rem; justify-self: end; width: 100%; margin: 0 }
.instrument-opening .cover img { width: 100%; height: auto; max-height: 40rem; object-fit: contain; background: #fff }
.instrument-opening:not(:has(.cover)) { grid-template-columns: minmax(0,1fr) }
.gallery-grid img, .cover img { border-radius: 2px; box-shadow: none }
.gallery-grid a, .cover a { display: block }
.gallery-grid { column-gap: var(--space-6) }
.gallery-grid figure { margin-bottom: var(--space-6) }
.detail-gallery { margin-top: var(--space-12) }
.detail-gallery:not(:has(figure)) { display: none }
.detail-gallery .gallery-grid { columns: 3 }
.detail-gallery .gallery-grid img { height: auto }
.gallery-grid figcaption, .cover figcaption { font-size: .875rem; line-height: 1.6; padding-top: var(--space-2); margin: 0 }
.standard-page.with-media .detail-columns { grid-template-columns: minmax(0,1.6fr) minmax(0,.8fr); gap: var(--space-16) }
.standard-page .detail-media .gallery-grid { columns: 1 }
.standard-page .detail-media h2 { font-size: 1rem; margin-bottom: var(--space-6) }
.standard-page .detail-media img { max-height: 25rem; object-fit: contain; background: #fff }
.standard-page .detail-media figure { margin-bottom: var(--space-8) }
.standard-page:not(.with-media) .prose { max-width: 64ch }
.page-links .prose p { padding-bottom: var(--space-4); border-bottom: 1px solid #eceee8 }
.content-updated { margin-top: var(--space-12); padding-top: var(--space-6); font-size: .875rem }
.content-updated i { font-style: normal }
.article-detail { max-width: 56rem }
.article-detail .prose { max-width: 64ch }
.article-detail .added { margin: var(--space-6) 0 0 }
.article-gallery { max-width: none; columns: 3; margin: var(--space-12) 0 }
.recordings { border-top: 1px solid var(--line); padding-top: var(--space-8); margin-top: var(--space-12); max-width: 56rem }
.recordings h2 { font-size: 1.5rem; margin-bottom: var(--space-6) }
.player { margin-bottom: var(--space-6) }
.player.audio { padding: var(--space-6); background: var(--paper-3); border-radius: 2px }
.player audio { min-height: 3rem }
.player video { max-height: 40rem; object-fit: contain; background: #171917; border-radius: 2px }
.player figcaption { font-size: .9rem; color: var(--ink); margin: 0 0 var(--space-3) }
.news-list { gap: var(--space-8) }
.news-list article { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 var(--space-6) }
.news-list article:first-child { border-left: 0; padding-left: 0 }
.news-list h3 { margin: var(--space-3) 0; font-size: 1.2rem }
.news-list p { font-size: 1rem }
.news-list time, .news-archive time, .added { font-size: .9rem; font-variant-numeric: tabular-nums }
.news-archive { gap: 0 }
.news-archive article { max-width: none; padding: var(--space-8) 0; gap: var(--space-8) }
.news-archive article > div { display: grid; grid-template-columns: 11rem minmax(0,40rem); column-gap: var(--space-12) }
.news-archive article h2 { grid-column: 2; margin-bottom: var(--space-4); font-size: 1.55rem }
.news-archive article .added { grid-column: 1; grid-row: 1 / 4; margin: .25rem 0 0 }
.news-archive article p:not(.added), .news-archive article .text-link { grid-column: 2; justify-self: start }
.news-archive article.with-photo { grid-template-columns: minmax(0,12rem) minmax(0,1fr) }
.news-archive article.with-photo > div { display: block }
.site-footer { padding: var(--space-12) var(--edge); grid-template-columns: 1fr auto; align-items: center; gap: var(--space-8) }
.site-footer .footer-brand { display: block; font-size: 2rem; text-decoration: none; margin-bottom: var(--space-3) }
.footer-contact { display: inline-block; padding: .25rem 0; font-size: .95rem }
.site-footer .footer-copy { font-size: .85rem; margin-top: var(--space-3) }
.site-footer nav { grid-template-columns: repeat(2,auto); gap: var(--space-2) var(--space-12) }
.site-footer nav a { display: inline-block; padding: .5rem 0; color: var(--ink) }

/* Admin: useful hierarchy, readable controls, no decorative dashboard. */
.admin-header { border-top-width: 2px; gap: var(--space-6) }
.admin-header nav { gap: var(--space-4); font-size: .95rem }
.admin-header nav a { text-decoration-thickness: 1px; padding: .5rem 0 }
.admin-main { max-width: 78rem; padding-top: var(--space-12) }
.admin-main h1 { font-size: clamp(1.8rem,3.1vw,2.5rem); max-width: 34ch }
.editor-page { max-width: 68rem }
.admin-title-row { gap: var(--space-6); margin-bottom: var(--space-8) }
.admin-title-row h1 { margin-bottom: 0 }
.admin-title-row > .button { flex-shrink: 0 }
.admin-content-card, .secondary-actions a, .editor-card, .publish-panel,
.stat-cards article, .chart-card, .insight-grid > section, .primary-actions > a,
.filters, .media-manager article, .library-card, .type-row { box-shadow: none; border-radius: 4px }
.editor-card { padding: var(--space-8); margin-bottom: var(--space-8); border: 1px solid var(--line) }
.editor-card > h2 { font-size: 1.4rem; margin-bottom: var(--space-4) }
.publish-panel { background: transparent; border-left: 3px solid var(--line); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-6) }
.publish-published { border-color: #527659 }
.publish-draft { border-color: #947737 }
.publish-archived { border-color: #7a746e }
.publish-panel h2 { font-size: .9rem; color: var(--ink-soft); font-weight: 500; margin-bottom: var(--space-2) }
.editor-sections { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); margin: var(--space-6) 0; border-bottom: 1px solid var(--line) }
.editor-sections a { padding: .75rem 0; font-size: .95rem }
.form-stack { gap: var(--space-8); margin: var(--space-6) 0 0 }
input, select, textarea { font-weight: 400; border-width: 1px; border-color: #989d94; border-radius: 3px }
label, .rich-label { font-weight: 600 }
.label-help { font-size: .95rem; line-height: 1.55 }
.form-stack .check { margin-top: var(--space-4); background: var(--paper-2) }
.button { border-width: 1px; font-weight: 600; padding: .65rem 1.15rem; border-radius: 3px }
.button.danger-secondary { border-color: transparent; text-decoration: underline; text-underline-offset: .2em }
.sticky-actions { background: var(--paper-3); gap: var(--space-3); padding: var(--space-4) 0 }
.sticky-actions .danger-secondary { margin-left: auto }
trix-editor { border-width: 1px; border-color: #989d94; padding: var(--space-6); line-height: 1.75 }
trix-toolbar .trix-button-group { gap: var(--space-1); margin-right: var(--space-2) }
trix-toolbar .trix-button { font-weight: 500 }
.upload-box { padding: var(--space-6); border: 1px dashed #989d94; background: var(--paper-2); border-radius: 3px }
.upload-box > button { justify-self: start }
.upload-box .help { margin-bottom: 0 }
.media-manager { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-8) }
.media-manager .media-card { padding: var(--space-4); gap: var(--space-4); border: 1px solid var(--line); background: #fff }
.media-thumb { aspect-ratio: 4 / 5; border-radius: 2px }
.media-card:has(.is-cover) { border-color: #947737 }
.media-card .is-cover { background: #f7f2e5; padding: var(--space-2) var(--space-3) }
.media-card .describe { gap: var(--space-3) }
.media-card .describe label { font-size: 1rem }
.media-card .describe input { font-size: 1rem }
.media-actions { padding-top: var(--space-4); border-top: 1px solid var(--line); gap: var(--space-3) }
.small-button { border-color: #989d94; font-weight: 500 }
.small-button:hover { background: var(--paper-3); border-color: var(--ink-soft) }
.small-button.danger { border-color: transparent; text-decoration: underline; text-underline-offset: .2em }
.status { font-size: .8rem; text-transform: none; letter-spacing: 0; font-weight: 600; border-radius: 3px; white-space: normal; line-height: 1.5 }
.admin-content-card .split { align-items: start; flex-wrap: wrap; gap: var(--space-3) }
.admin-content-card { border: 1px solid var(--line) }
.admin-content-card > div:last-child { padding: var(--space-6) }
.admin-thumb { background: #e9ebe6 }
.secondary-actions a { border-bottom: 1px solid var(--line); background: transparent; padding: var(--space-6) 0 }
.secondary-actions a:hover { box-shadow: none; border-color: var(--link) }
.primary-actions > a { background: #363a35; padding: var(--space-8) }
.primary-actions > a:hover { background: #262a25 }
.primary-actions small { color: #e5e7e0 }
.stat-cards { grid-template-columns: 1.6fr 1fr; gap: var(--space-6); margin-bottom: var(--space-8) }
.stat-cards article { padding: var(--space-8); background: transparent; border: 1px solid var(--line) }
.stat-cards strong { font-size: 2.5rem; font-weight: 500; font-variant-numeric: tabular-nums }
.stat-cards .stat-primary { background: #fff }
.stat-primary strong { font-size: 4rem; letter-spacing: -.04em }
.chart-card, .insight-grid > section { padding: var(--space-8) }
.bar-chart { height: 11rem }
.bar-chart span.bar { background: #717c70; width: min(2rem,70%) }
.empty-inline { aspect-ratio: auto; display: block; font-weight: 400; padding: var(--space-6); line-height: 1.7; grid-column: 1 / -1 }
.notice.success { background: #eef5ed; border-color: #527659 }
.notice.error { background: #fcf2ed; border-color: #a4583f }
.notice { padding: var(--space-4) var(--space-6) }

@media (min-width: 901px) and (max-width: 1200px) {
  .admin-header { flex-wrap: wrap }
  .admin-header nav { flex-wrap: wrap; column-gap: var(--space-6) }
}
@media (max-width: 1000px) {
  .category-cards { grid-template-columns: repeat(6,minmax(0,1fr)); gap: var(--space-6) }
  .category-cards > * { grid-column: span 2 }
  .category-cards > :nth-last-child(2):nth-child(4) { grid-column: 2 / span 2 }
  .instrument-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-8) }
  .welcome { gap: var(--space-8) }
  .detail-columns { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: var(--space-8) }
  .standard-page.with-media .detail-columns { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: var(--space-8) }
  .prose { font-size: 1.0625rem }
  .instrument-opening .cover img { max-height: 32rem }
  .news-archive article > div { grid-template-columns: 9rem minmax(0,1fr); gap: 0 var(--space-8) }
}
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex }
  .site-header { gap: var(--space-4); min-height: 4.5rem }
  .site-header nav, .admin-header nav { padding: var(--space-3) var(--gutter) var(--space-6); border-bottom: 1px solid var(--line); box-shadow: none; z-index: 25 }
  .site-header nav a, .admin-header nav a { padding: .85rem .5rem; min-height: 3rem }
  .site-header nav a[aria-current=page] { border-left: 2px solid var(--brass); border-bottom-color: var(--line) }
  .legacy-hero { min-height: 26rem }
  .legacy-hero > div { padding: var(--space-12) var(--edge) }
  .editor-page { padding-left: var(--gutter); padding-right: var(--gutter) }
}
@media (max-width: 620px) {
  .legacy-hero { min-height: 23rem; background-position: 57% center; background-image: linear-gradient(0deg,rgba(9,12,16,.72),rgba(9,12,16,.15)),url('/assets/arnbak-header-original.jpg') }
  .legacy-hero h1 { font-size: clamp(2.8rem,12vw,3.6rem); margin-bottom: var(--space-3) }
  .legacy-hero p { font-size: 1.05rem }
  .legacy-hero > div { padding: var(--space-8) var(--edge) }
  .welcome { grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-8) }
  .welcome h2 { max-width: 24ch; margin-bottom: var(--space-4) }
  .welcome-copy p:first-child { font-size: 1.0625rem }
  .section-heading { margin-bottom: var(--space-6); padding-bottom: var(--space-4) }
  .category-cards { display: flex; flex-direction: column; gap: var(--space-6) }
  .category-card { display: grid; grid-template-columns: 7rem minmax(0,1fr); gap: var(--space-6); align-items: center }
  .category-card .card-figure { width: 7rem; aspect-ratio: 2 / 3 }
  .category-card strong { font-size: 1.0625rem; padding: .5rem 0; border: 0 }
  .instrument-grid { grid-template-columns: minmax(0,1fr); row-gap: var(--space-12) }
  .instrument-card .card-figure { aspect-ratio: 4 / 5; max-height: 27rem }
  .instrument-card .card-body { padding-top: var(--space-4) }
  .instrument-grid > .instrument-card:only-child { display: block }
  .instrument-grid > .instrument-card:only-child .card-body { padding-top: var(--space-6) }
  .collection-nav { gap: var(--space-2) var(--space-6); margin-top: var(--space-6) }
  .collection-nav a { width: 100%; padding: .45rem 0; max-width: none }
  .breadcrumbs { margin-top: var(--space-4); margin-bottom: var(--space-4); font-size: .8rem }
  .page-intro { padding-bottom: var(--space-8) }
  .category-intro { gap: var(--space-6); align-items: start }
  .category-intro:has(.category-portrait) { grid-template-columns: 1fr }
  .category-portrait { width: 8rem; height: 10rem }
  .instrument-detail > header, .standard-page > header, .article-detail > header { padding-bottom: var(--space-6); margin-bottom: var(--space-6) }
  .detail-columns, .standard-page.with-media .detail-columns { display: flex; flex-direction: column; gap: var(--space-8) }
  .instrument-opening .cover { order: -1; max-width: none }
  .instrument-opening .cover img { max-height: 30rem }
  .detail-gallery .gallery-grid { columns: 2; column-gap: var(--space-4) }
  .gallery-grid figure { margin-bottom: var(--space-4) }
  .standard-page .detail-media { width: 100% }
  .standard-page .detail-media .gallery-grid { columns: 2 }
  .article-gallery { columns: 2; column-gap: var(--space-4) }
  .news-list { grid-template-columns: 1fr; gap: var(--space-6) }
  .news-list article, .news-list article:first-child { border-left: 0; border-top: 1px solid var(--line); padding: var(--space-6) 0 0 }
  .news-list article:first-child { border-top: 0; padding-top: 0 }
  .news-archive article > div { display: flex; flex-direction: column }
  .news-archive article .added { order: -1; margin: 0 0 var(--space-3) }
  .news-archive article h2 { font-size: 1.35rem }
  .news-archive article.with-photo { grid-template-columns: 1fr }
  .player.audio { padding: var(--space-4) }
  .site-footer { grid-template-columns: 1fr; padding-top: var(--space-8); padding-bottom: var(--space-8) }
  .site-footer nav { grid-template-columns: repeat(4,auto); gap: var(--space-4); justify-content: start; padding-top: var(--space-6); border-top: 1px solid var(--line) }
  .admin-main { padding-top: var(--space-8) }
  .admin-title-row { gap: var(--space-4); margin-bottom: var(--space-6) }
  .admin-title-row > .button { align-self: start }
  .publish-panel { padding: var(--space-3) var(--space-4) }
  .editor-card { padding: var(--space-6) var(--space-4) }
  .editor-sections { gap: 0 var(--space-6) }
  .sticky-actions { position: static; padding: var(--space-4) 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3) }
  .sticky-actions .danger-secondary { margin-left: 0 }
  .media-manager { grid-template-columns: 1fr }
  .media-manager .media-thumb { max-height: 23rem }
  .upload-box { padding: var(--space-4) }
  .upload-box > button { justify-self: stretch }
  .stat-cards { grid-template-columns: 1fr }
  .stat-cards article { padding: var(--space-6) }
  .stat-cards article:not(.stat-primary) { display: flex; align-items: center; gap: var(--space-6); justify-content: space-between }
  .stat-cards article:not(.stat-primary) p { margin: 0 }
  .chart-card, .insight-grid > section { padding: var(--space-6) }
  .admin-content-card > div:last-child { padding: var(--space-4) }
  .admin-content-card { grid-template-columns: 5.5rem minmax(0,1fr) }
  .admin-thumb { width: 5.5rem }
}

.admin-content-card.no-thumb h2 { font-size: 1.3rem; margin-bottom: 0 }

/* Recordings need a label, not an empty photograph-sized frame. */
.media-thumb.media-kind { aspect-ratio: auto; min-height: 8rem }
@media (min-width: 621px) and (max-width: 1000px) {
  .news-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-6) }
  .news-list article { padding-left: var(--space-4) }
}

/* Familiar project editing and deliberately loaded YouTube films. */
.youtube-editor { border-top: 1px solid var(--line, #d9dcd7); padding-top: 1rem; }
.youtube-editor[hidden] { display: none; }
.youtube-editor summary { cursor: pointer; padding: .75rem 0; font-weight: 600; min-height: 44px; }
.youtube-editor > .form-stack { margin-top: 1rem; }
.youtube-editor [role="status"]:empty { display: none; }
.youtube-editor [role="status"] { padding: .75rem 1rem; background: #f0f3ee; color: #303a2d; }
.youtube-editor input[aria-invalid="true"] { border: 2px solid #a43d32; }
.youtube-film { margin: 1rem 0 2rem; padding: 1.25rem; background: #f1f3f1; }
.youtube-film .help { margin: .75rem 0 0; }
.youtube-film:has(iframe) { padding: 0; }
.youtube-film iframe { display: block; border: 0; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; }
.admin-main .editor-actions { align-items: center; }
.admin-main .editor-actions .danger-secondary { margin-left: auto; }
@media (max-width: 620px) { .admin-main .editor-actions .danger-secondary { margin-left: 0; } }

/* Navigation and overview: one clear hierarchy across the workshop and site. */
.site-header { min-height: 5.5rem; justify-content: space-between; gap: 2rem; }
.site-name { display: flex; flex-direction: column; line-height: 1.1; text-decoration: none; flex-shrink: 0; }
.site-name .brand-script { font-size: 2rem; color: var(--ink-strong); }
.site-name small { margin-top: .35rem; font-size: .75rem; letter-spacing: .08em; font-weight: 400; color: var(--ink-soft); }
.site-header nav { gap: 1.8rem; }
.site-header .channel-nav { color: var(--link); }
.legacy-hero { min-height: 25rem; }
.hero-route { display: inline-block; margin-top: 1.25rem; padding: .55rem 0; color: #fff; text-decoration: underline; font-size: 1rem; text-shadow: none; }
.hero-route:hover { color: #fff; text-decoration-thickness: 2px; }
.home-categories { margin-top: 2.5rem; }
.home-categories .section-heading { margin-bottom: 1.5rem; }
.welcome { border-top: 1px solid var(--line); padding-top: 3rem; }
.catalogue-intro { padding-bottom: 1.5rem; }
.catalogue-intro .lead { margin-bottom: 0; }
.catalogue-layout { max-width: var(--content); margin: 0 auto 5rem; padding: 0 var(--gutter); display: grid; grid-template-columns: 15rem minmax(0,1fr); gap: 3rem; }
.catalogue-navigation h2 { font-size: 1rem; margin: 0 0 1rem; }
.catalogue-navigation nav { display: flex; flex-direction: column; gap: .25rem; }
.catalogue-navigation a { padding: .8rem 1rem; color: var(--ink); line-height: 1.45; border-left: 3px solid transparent; text-decoration: none; }
.catalogue-navigation a:hover { background: #f3f4f1; text-decoration: underline; }
.catalogue-navigation a[aria-current=page] { color: #254a31; background: #edf1e9; border-left-color: #527659; font-weight: 600; }
.catalogue-search label { display: block; margin-bottom: .5rem; }
.catalogue-search > div { display: flex; gap: .75rem; }
.catalogue-search input { min-width: 0; flex: 1; }
.results-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; margin-bottom: 1rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.results-summary p { margin: 0; }
.catalogue-results .instrument-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem 1.5rem; }
.catalogue-results .instrument-grid > .instrument-card:only-child { display: block; }
.catalogue-results .instrument-card .card-figure { max-height: 25rem; }
.collection-return { display: flex; justify-content: space-between; gap: 2rem; padding: 1.5rem 0; margin-top: 2rem; border-top: 1px solid var(--line); }
.collection-return a { padding: .5rem 0; }
.admin-nav-group { display: flex; flex-direction: column; gap: .25rem; }
.nav-group-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); font-weight: 600; padding: 1rem .9rem .5rem; }
.admin-header nav a { display: block; padding: .7rem .9rem; border: 0; border-left: 3px solid transparent; text-decoration: none; line-height: 1.4; }
.admin-header nav a:hover { background: #f1f3ef; text-decoration: underline; }
.admin-header nav a[aria-current=page] { background: #e9eee4; color: #254a31; border-left-color: #527659; font-weight: 600; }
.admin-header .link-button { padding: .7rem .9rem; min-height: 44px; margin: 0; }
.admin-nav-outside { padding-top: 1rem; border-top: 1px solid var(--line); margin-top: 1rem; }
.admin-main .admin-title-row { margin-bottom: 2rem; }
.admin-main .lead { font-size: 1.1rem; margin: .6rem 0 0; }
.workspace-shortcuts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line); background: #fff; }
.workspace-shortcuts a { padding: 1.25rem; text-decoration: none; border-left: 1px solid var(--line); }
.workspace-shortcuts a:first-child { border-left: 0; }
.workspace-shortcuts strong, .workspace-shortcuts span { display: block; }
.workspace-shortcuts strong { color: var(--ink-strong); font-size: 1.1rem; }
.workspace-shortcuts span { margin-top: .35rem; font-size: .9rem; }
.workspace-shortcuts a:hover strong { text-decoration: underline; }
.admin-main .admin-card-grid { grid-template-columns: 1fr; gap: 0; background: #fff; border-top: 1px solid var(--line); }
.admin-main .admin-content-card { grid-template-columns: 6rem minmax(0,1fr); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; gap: 1.5rem; padding: 1rem; align-items: center; }
.admin-main .admin-thumb { width: 6rem; height: 7.5rem; background: #f3f4f1; }
.admin-main .admin-thumb img { object-fit: contain; width: 100%; height: 100%; }
.admin-main .admin-content-card > div:last-child { padding: 0; }
.admin-content-card h3 { font-size: 1.1rem; line-height: 1.4; margin: 0; }
.admin-content-card h3 a { color: var(--ink-strong); text-decoration: none; }
.admin-content-card h3 a:hover { text-decoration: underline; }
.admin-content-card .muted { font-size: .9rem; margin: .4rem 0; }
.record-meta { display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-size: .875rem; }
.record-meta a { padding: .5rem 0; min-height: 44px; }
.admin-content-card.no-thumb { grid-template-columns: 1fr; }
.admin-content-card.no-thumb h2 { font-size: 1.2rem; }
.recent-news article { display: flex; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--line); padding: 1rem 0; }
.recent-news h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.recent-news p { margin: 0; font-size: .9rem; }
.workspace-help { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 3rem; max-width: 65ch; }
.workspace-help summary { cursor: pointer; padding: .75rem 0; font-weight: 600; }
.workspace-help p { margin: 1rem 0; }
.admin-main .sticky-actions { position: static; box-shadow: none; border-top: 1px solid var(--line); padding: 1.5rem 0; }
@media(min-width:1100px) {
 .admin-header { position: fixed; inset: 0 auto 0 0; width: 15rem; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: start; padding: 2rem 1rem; border-top: 0; border-right: 1px solid var(--line); gap: 1.5rem; }
 .admin-brand { flex-direction: column; align-items: flex-start; gap: .5rem; padding: 0 .9rem; }
 .admin-brand .brand-script { font-size: 1.75rem; }
 .admin-header nav { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
 .admin-header .nav-toggle { display: none; }
 .admin-body:has(.admin-header) .admin-main { margin-left: 15rem; max-width: 80rem; padding: 3rem clamp(2rem,4vw,4rem) 5rem; }
}
@media(min-width:621px) and (max-width:1099px) {
 .admin-header { display: flex; flex-wrap: wrap; padding: 1.25rem 2rem; gap: 1rem; }
 .admin-header .nav-toggle { display: none; }
 .admin-header nav { position: static; display: flex; flex-wrap: wrap; flex-direction: row; width: 100%; padding: 0; box-shadow: none; border: 0; gap: .3rem; }
 .admin-nav-group { display: contents; }
 .admin-header .nav-group-label { display: none; }
 .admin-header nav a { font-size: .9rem; padding: .65rem .75rem; min-height: 44px; }
 .admin-header nav .admin-nav-outside a { color: var(--link); }
 .admin-main .filters { flex-wrap: wrap; }
}
@media(max-width:900px) {
 .catalogue-layout { grid-template-columns: 1fr; gap: 1.5rem; }
 .catalogue-navigation nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .25rem; }
 .catalogue-navigation a { border: 1px solid var(--line); border-left: 3px solid transparent; }
 .site-header nav { gap: 0; }
 .legacy-hero { min-height: 22rem; }
}
@media(max-width:620px) {
 .site-header { min-height: 5rem; gap: 1rem; }
 .site-name .brand-script { font-size: 1.75rem; }
 .legacy-hero { min-height: 20rem; }
 .home-categories { margin-top: 2rem; }
 .catalogue-navigation nav { grid-template-columns: 1fr; }
 .catalogue-navigation a { padding: .7rem .8rem; }
 .catalogue-results .instrument-grid { grid-template-columns: 1fr; }
 .catalogue-layout { padding: 0 1.25rem; }
 .catalogue-search > div { gap: .5rem; }
 .results-summary, .collection-return { flex-direction: column; gap: .5rem; }
 .admin-header { padding: 1rem 1.25rem; }
 .admin-brand { flex-direction: column; align-items: start; gap: .2rem; }
 .admin-header nav { max-height: calc(100dvh - 6rem); overflow-y: auto; }
 .admin-header nav a { padding: .7rem .9rem; }
 .workspace-shortcuts { grid-template-columns: 1fr; }
 .workspace-shortcuts a { border-left: 0; border-top: 1px solid var(--line); padding: 1rem; }
 .workspace-shortcuts a:first-child { border-top: 0; }
 .admin-main .admin-content-card { grid-template-columns: 4rem minmax(0,1fr); padding: 1rem .75rem; gap: 1rem; }
 .admin-main .admin-thumb { width: 4rem; height: 6rem; }
 .admin-content-card .split { display: flex; flex-direction: column; align-items: start; gap: .4rem; }
 .record-meta { flex-direction: column; align-items: start; gap: 0; }
 .record-meta span { display: none; }
 .admin-content-card .muted { margin-bottom: 0; }
}

.category-select-mobile { display: none; }
@media(max-width:620px) { .catalogue-navigation > nav, .catalogue-navigation > h2 { display: none; } .category-select-mobile { display: grid; gap: .65rem; } .category-select-mobile select { min-width: 0; width: 100%; } .category-select-mobile button { justify-self: start; } }

.site-footer .footer-contact { display: block; width: fit-content; margin-top: .65rem; }
.recent-news article { align-items: flex-start; }
.results-summary h2 { font: inherit; font-weight: 600; margin: 0; letter-spacing: 0; }
.catalogue-results .instrument-card .card-figure { max-height: 18rem; }
@media(min-width:1250px) { .catalogue-results .instrument-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:620px) {
 .catalogue-results .instrument-grid { gap: 1.5rem; }
 .catalogue-results .instrument-card .card-body { padding: 0; }
 .catalogue-results .instrument-card h3 { font-size: 1.05rem; line-height: 1.4; }
 .catalogue-results .instrument-card p { font-size: .95rem; }
}

/* Source Sans 3: consistent humanist reading and interface typography. */
:root { --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { font-family: var(--sans); font-kerning: normal; }
h1, h2, h3 { font-weight: 600; }
h1 { letter-spacing: -.025em; line-height: 1.12; }
h2 { letter-spacing: -.015em; line-height: 1.22; }
.prose { font-size: 1.1875rem; line-height: 1.75; }
.prose p { margin-bottom: 1.3em; }
.site-header nav { font-size: 1.0625rem; }
.admin-body { font-size: 1.0625rem; }
.admin-content-card h3, .recent-news h3 { font-size: 1.1875rem; }
.instrument-card h3 { font-size: 1.25rem; line-height: 1.3; }
.category-card strong { font-weight: 600; }
.added, time, .record-meta, .save-state { font-variant-numeric: tabular-nums; }
@media(max-width:620px) { .prose { font-size: 1.125rem; } .catalogue-results .instrument-card h3 { font-size: 1.125rem; } }

/* Quiet, full-photograph viewing; native dialog keeps the page behind it inert. */
html.viewer-open { overflow: hidden; }
[data-gallery-image] { cursor: zoom-in; }
.image-viewer { box-sizing: border-box; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: clamp(12px, 2vw, 28px); border: 0; background: #202221; color: #fff; }
.image-viewer[open] { display: flex; flex-direction: column; gap: 12px; }
.image-viewer::backdrop { background: #202221; }
.viewer-toolbar, .viewer-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.image-viewer p { margin: 0; }
.image-viewer button, .image-viewer a { color: #fff; background: transparent; border: 1px solid #858986; border-radius: 3px; min-height: 48px; padding: 10px 16px; font: inherit; font-size: 18px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.image-viewer [hidden] { display: none; }
.image-viewer button:hover, .image-viewer a:hover { background: #3b403d; }
.image-viewer :focus-visible { outline: 3px solid #f0d28a; outline-offset: 3px; }
.viewer-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.viewer-stage img { width: 100%; height: 100%; object-fit: contain; }
.viewer-caption { text-align: center; max-height: 5em; overflow: auto; line-height: 1.5; flex-shrink: 0; }
.viewer-count { font-variant-numeric: tabular-nums; }
@media(max-width:620px) {
 .image-viewer { padding: 12px; gap: 10px; }
 .image-viewer button, .image-viewer a { padding: 10px; font-size: 16px; }
 .viewer-controls { gap: 8px; }
}

/* Public galleries keep the photographs in left-to-right reading order. */
.gallery-grid, .detail-gallery .gallery-grid, .article-gallery,
.standard-page .detail-media .gallery-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6); columns: auto;
}
.gallery-grid figure, .standard-page .detail-media figure { min-width: 0; margin: 0; }
.gallery-grid a { aspect-ratio: 1; background: #fff; overflow: hidden; }
.gallery-grid a > img, .detail-gallery .gallery-grid a > img,
.standard-page .detail-media .gallery-grid a > img {
  display: block; width: 100%; height: 100%; max-height: none; object-fit: contain;
}
.standard-page.with-media .detail-columns { display: block; }
.standard-page .detail-media { margin-top: var(--space-12); }
.standard-page .detail-media h2 { font-size: 1.5rem; }
@media(max-width:1000px) {
 .gallery-grid, .detail-gallery .gallery-grid, .article-gallery,
 .standard-page .detail-media .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width:620px) {
 .gallery-grid, .detail-gallery .gallery-grid, .article-gallery,
 .standard-page .detail-media .gallery-grid { gap: var(--space-4); }
}

.editor-options { border-top: 1px solid var(--line); padding-top: 16px; }
.editor-options summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-weight: 600; }
.editor-options[open] summary { margin-bottom: 12px; }
[data-save-state] { border-left: 3px solid #899d88; padding: 10px 16px; background: #f1f5ef; }
[data-save-state].has-changes { border-color: #94712c; background: #fff8e8; }
[aria-invalid="true"] { border: 2px solid #a34235; }
.preview-bar a { display: inline-block; margin: 8px 16px; padding: 10px 14px; min-height: 44px; color: inherit; text-decoration: underline; }
.image-viewer .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.viewer-controls button, .viewer-original { white-space: nowrap; }
.gallery-hint { color: var(--ink-soft); margin: 0 0 20px; }

.rich-label .label-help { display: block; margin-top: 4px; }

/* Softer edges, with the same quiet shapes and complete photographs. */
:root { --radius: 8px; --radius-surface: 12px; --radius-photo: 10px; }
.button, .small-button, .nav-toggle, input:not([type=checkbox]):not([type=radio]),
select, textarea, trix-editor, .trix-dialog, .trix-dialog input,
.image-viewer button, .image-viewer a { border-radius: var(--radius); }
.editor-card, .upload-box, .empty-state, .login-card, .library-card,
.media-manager article, .filters, .notice, .secondary-actions a,
.workspace-shortcuts a, .player.audio { border-radius: var(--radius-surface); }
.card-figure, .media-thumb, .admin-thumb, .gallery-grid a,
.cover img, .player video, .cover-choice { border-radius: var(--radius-photo); }
/* Round the gallery frame, keeping every photograph's native proportions. */
.gallery-grid a > img { border-radius: 0; }
.card-figure, .admin-thumb { overflow: hidden; }
.status, .check, [data-save-state] { border-radius: var(--radius); }

/* A quieter legacy blue, warm neutral surfaces and consistent menu states. */
:root {
  --paper: #ffffff;
  --paper-2: #f7f7f4;
  --paper-3: #eef1ef;
  --ink: #3e494b;
  --ink-strong: #293638;
  --ink-soft: #596568;
  --line: #d9dedc;
  --link: #315f75;
  --link-hover: #21465a;
  --brass: #826329;
  --focus: #176187;
  --nav-tint: #e7eff3;
  --nav-hover: #f0f4f5;
  --control-border: #7e8c8e;
}
.site-header { border-bottom-color: var(--line); }
.site-header nav a, .admin-header nav a, .catalogue-navigation a {
  border-radius: var(--radius);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.site-header nav a:hover, .site-header nav a:focus-visible,
.admin-header nav a:hover, .admin-header nav a:focus-visible,
.catalogue-navigation a:hover, .catalogue-navigation a:focus-visible {
  color: var(--link-hover); background: var(--nav-hover);
  text-decoration: underline; text-underline-offset: .25em;
}
.site-header nav a[aria-current=page] {
  color: var(--link-hover); background: var(--nav-tint); border-bottom-color: var(--brass);
}
.admin-header nav a[aria-current=page], .catalogue-navigation a[aria-current=page] {
  color: var(--link-hover); background: var(--nav-tint); border-left-color: var(--link);
}
.nav-toggle { border-color: var(--control-border); color: var(--link-hover); }
.nav-toggle:hover, .nav-toggle[aria-expanded=true] { background: var(--nav-tint); }
.button.secondary { background: #f5f8fa; }
.button.secondary:hover, .button.ghost:hover { background: var(--nav-tint); color: var(--link-hover); border-color: var(--link); }
.button.ghost, .small-button, input, select, textarea, trix-editor { border-color: var(--control-border); }
.small-button:not(.danger):hover { background: var(--nav-hover); border-color: var(--link); color: var(--link-hover); }
.workspace-shortcuts a:hover, .workspace-shortcuts a:focus-visible,
.admin-main .admin-content-card:hover { background: var(--nav-hover); }
.workspace-shortcuts strong, .admin-content-card h3 a { color: var(--link-hover); }
.site-footer { background: var(--paper-2); border-top: 1px solid var(--line); }
.site-footer nav a:hover { color: var(--link-hover); }
.admin-main .admin-thumb, .youtube-film { background: var(--paper-3); }
/* Preserve the meaning of validation states when neutral controls are refined. */
[aria-invalid=true], .youtube-editor input[aria-invalid=true] { border-color: var(--danger); }
@media(prefers-reduced-motion:reduce) {
 .site-header nav a, .admin-header nav a, .catalogue-navigation a { transition: none; }
}

/* Category photographs use the whole width without an inset border. */
.category-card .card-figure img { inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Public presentation: a photographic opening, distinct sections and room for
   Ole's words. These rules deliberately stay outside the editing interface. */
.home-page .legacy-hero {
  min-height: clamp(29rem, 42vw, 38rem);
  background-image: linear-gradient(90deg, rgba(9,12,16,.76), rgba(9,12,16,.3) 58%, rgba(9,12,16,.12)), url('/assets/arnbak-header-original.jpg');
  align-items: center;
}

/* Ole's editing workspace: familiar tasks and a clear place to save. */
.workspace-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; border: 0; background: transparent; }
.workspace-tasks a { border: 1px solid var(--line); background: #fff; padding: 1.5rem; }
.workspace-tasks a:first-child { border-left: 1px solid var(--line); }
.workspace-tasks strong { font-size: 1.25rem; }
.workspace-tasks span { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.5; }
.editor-page trix-editor { min-height: 18rem; max-height: 36rem; overflow-y: auto; overscroll-behavior: contain; }
.editor-save-panel { margin: 0 0 2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-surface); background: #fff; }
.editor-save-panel h2 { margin: 0 0 1rem; font-size: 1.375rem; }
.editor-save-panel .save-state { margin: 0 0 .75rem; }
.editor-save-panel > .help { margin-bottom: 1.25rem; }
.editor-save-panel .editor-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; }
.editor-publish { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.editor-publish p { margin: 0; }
.editor-publish .help { flex-basis: 100%; }
.editor-removal { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.editor-removal summary, .revision-history summary { cursor: pointer; padding: .75rem 0; min-height: 44px; font-weight: 600; }
.editor-removal summary { color: var(--ink-soft); }
.editor-removal[open] summary, .revision-history[open] summary { margin-bottom: .75rem; }
.revision-history summary { font-size: 1.25rem; }
.media-live-note { padding: 1rem; background: var(--nav-tint); border-left: 3px solid var(--link); border-radius: var(--radius); }
.media-next-step { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem; }
.media-next-step p { width: 100%; margin: 0; }
.media-next-step > a { min-height: 44px; display: inline-flex; align-items: center; }
@media(max-width:620px) {
  .workspace-tasks { grid-template-columns: 1fr; }
  .workspace-tasks a { padding: 1.25rem; }
  .editor-page trix-editor { min-height: 16rem; max-height: 28rem; }
  .editor-save-panel { padding: 1.25rem; }
  .editor-save-panel .editor-actions { flex-direction: column; align-items: stretch; }
  .editor-save-panel .button { white-space: normal; text-align: center; }
}
.home-page .legacy-hero > div { padding-block: 4rem; }
.home-page .legacy-hero h1 { font-size: clamp(4rem, 7.6vw, 7rem); letter-spacing: 0; margin-bottom: 1rem; }
.home-page .legacy-hero p { font-size: clamp(1.125rem, 1.6vw, 1.4rem); }
.home-page .hero-route {
  margin-top: 2rem; padding: .8rem 1.25rem; min-height: 48px;
  border: 1px solid rgba(255,255,255,.75); border-radius: var(--radius);
  background: rgba(9,12,16,.3); text-decoration: none; font-size: 1.0625rem;
}
.home-page .hero-route:hover { background: #fff; color: var(--ink-strong); }
.home-page .hero-route:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.home-page .section-heading { padding-bottom: 1.5rem; margin-bottom: 2rem; }
.home-page .section-heading h2 { font-size: clamp(2rem, 3.3vw, 3rem); }
.home-page .section-heading .text-link { font-size: 1.0625rem; }
.home-page .home-categories { margin-top: clamp(3rem, 5vw, 5rem); }
.home-page .category-card strong { font-size: 1.125rem; color: var(--ink-strong); line-height: 1.4; padding-block: 1.25rem; }
.home-page .category-card:hover strong { color: var(--link); }
.home-page .category-card:focus-visible { outline-offset: 6px; }
.home-page .welcome {
  margin-inline: 0; padding: clamp(3rem, 6vw, 6rem) var(--edge);
  background: var(--paper-2); border-block: 1px solid var(--line);
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 6vw, 6rem);
}
.home-page .welcome h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: .01em; margin-bottom: 1.5rem; max-width: none; }
.home-page .welcome .motto { font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.2; letter-spacing: -.025em; font-weight: 600; color: var(--ink-strong); max-width: 18ch; }
.home-page .welcome-copy p:first-child { font-size: 1.25rem; line-height: 1.8; }
.home-page .welcome-copy .text-link { display: inline-block; min-height: 44px; }
.featured-instruments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.featured-instrument { position: relative; min-width: 0; background: var(--paper-2); border-radius: var(--radius-surface); }
.featured-photo { margin: 0; padding: 0; background: #fff; border-radius: var(--radius-photo); overflow: hidden; }
.featured-photo img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.featured-copy { padding: 1.5rem; }
.featured-copy .featured-type { font-size: 1rem; color: var(--ink-soft); margin-bottom: 1rem; }
.featured-copy h3 { font-size: 1.5rem; line-height: 1.3; margin-bottom: 1rem; overflow-wrap: anywhere; }
.featured-copy h3 a { color: var(--ink-strong); text-decoration: none; }
.featured-copy h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-surface); }
.featured-copy h3 a:focus-visible { outline: none; }
.featured-instrument:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 5px; }
.featured-instrument:hover h3 a { color: var(--link); text-decoration: underline; text-underline-offset: .12em; }
.featured-copy > p:not(.featured-type) { font-size: 1.0625rem; line-height: 1.65; }
.featured-route { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; color: var(--link); font-size: 1.0625rem; }
.featured-route > span { font-size: 1.75rem; }
.featured-instrument:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.featured-instrument:only-child .featured-copy { padding: clamp(1.5rem, 4vw, 4rem); }
.featured-instrument:only-child h3 { font-size: clamp(2rem, 3.5vw, 3.25rem); }
.featured-instrument:not(:has(.featured-photo)) { display: block; }
.home-page .news-list h3 { font-size: 1.375rem; line-height: 1.35; }
.home-page .news-list h3 a { color: var(--ink-strong); text-decoration: none; }
.home-page .news-list h3 a:hover { color: var(--link); text-decoration: underline; }
.home-page .news-list time { font-size: .9375rem; }
.page-intro h1, .detail-heading h1, .standard-page > header h1, .article-detail > header h1 {
  font-size: clamp(2.25rem, 4.4vw, 4rem); line-height: 1.12; letter-spacing: -.03em;
}
.instrument-detail > .detail-heading { padding-block: 1.5rem 2.5rem; margin-bottom: 3rem; }
.instrument-opening .cover a { background: #fff; padding: 1rem; border-radius: var(--radius-photo); }
.instrument-opening .cover img { border-radius: 0; }
.category-portrait { border-radius: var(--radius-photo); padding: .5rem; }
.site-footer .footer-brand { font-size: 2.25rem; }
@media(max-width:1000px) {
  .home-page .legacy-hero { min-height: 29rem; }
  .home-page .welcome { gap: 2rem; }
  .featured-instruments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width:620px) {
  .home-page .legacy-hero { min-height: 27rem; align-items: flex-end; background-image: linear-gradient(0deg, rgba(9,12,16,.85), rgba(9,12,16,.2)), url('/assets/arnbak-header-original.jpg'); }
  .home-page .legacy-hero > div { padding-block: 2.5rem; }
  .home-page .legacy-hero h1 { font-size: clamp(3rem, 12vw, 4rem); }
  .home-page .hero-route { margin-top: 1.5rem; }
  .home-page .section-heading { gap: .5rem; margin-bottom: 1.5rem; }
  .home-page .home-categories { margin-top: 2.5rem; }
  .home-page .category-cards { gap: 1.25rem; }
  .home-page .category-card { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
  .home-page .category-card strong { padding: 0; }
  .home-page .welcome { grid-template-columns: 1fr; }
  .home-page .welcome-copy p:first-child { font-size: 1.1875rem; }
  .featured-instrument:only-child { grid-template-columns: 1fr; }
  .featured-instruments { grid-template-columns: 1fr; }
  .featured-copy { padding: 1.5rem; }
  .featured-copy h3 { margin-bottom: 1rem; }
  .featured-route { margin-top: 1.5rem; }
  .instrument-detail > .detail-heading { padding-block: 1rem 1.5rem; margin-bottom: 2rem; }
}

/* Selected files are clearly separate from photographs already saved. */
.file-count:empty, .file-previews:empty { display: none; }
.file-count { margin: 0; }
.file-previews { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 1rem; }
.file-previews li { min-width: 0; padding: .75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow-wrap: anywhere; }
.file-previews img { display: block; width: 100%; height: 8rem; object-fit: contain; margin-bottom: .5rem; }
input[type=file]::file-selector-button { font: inherit; padding: .5rem .75rem; margin-right: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-3); color: var(--ink); cursor: pointer; }

/* The public collections stay photographic grids on phones as well. */
.home-page .category-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
.home-page .category-cards > .category-card { display: block; grid-column: auto; padding: 0; border: 0; }
.home-page .category-card .card-figure { width: 100%; aspect-ratio: 1; }
.home-page .category-card strong { display: block; padding-top: 1rem; }
.home-page .news-list article, .home-page .news-list article:first-child { border: 1px solid var(--line); padding: 1.5rem; border-radius: var(--radius-surface); background: var(--paper-2); }
@media(max-width:1000px) {
 .home-page .category-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media(max-width:620px) {
 .home-page .category-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
 .home-page .category-card strong { font-size: 1.0625rem; }
 .instrument-grid, .catalogue-results .instrument-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
 .instrument-grid > .instrument-card, .catalogue-results .instrument-grid > .instrument-card { display: block; padding: 0; border: 0; }
 .instrument-grid > .instrument-card .card-figure, .catalogue-results .instrument-card .card-figure { width: 100%; height: auto; aspect-ratio: 4 / 5; }
 .instrument-grid > .instrument-card .card-body, .catalogue-results .instrument-card .card-body { padding-top: 1rem; }
 .instrument-grid > .instrument-card h3 { font-size: 1.0625rem; line-height: 1.4; }
 .instrument-card h3, .instrument-card p { overflow-wrap: anywhere; }
}

/* Natural-height public photo tiles: full column width, no crop or letterbox. */
#main-content .gallery-grid { align-items: start; }
#main-content .gallery-grid a { aspect-ratio: auto; }
#main-content .gallery-grid a > img,
#main-content .card-figure img,
#main-content .category-card .card-figure img,
#main-content .featured-photo img,
#main-content .category-portrait img,
#main-content .instrument-opening .cover img {
  position: static; display: block; width: 100%; height: auto;
  max-height: none; aspect-ratio: auto; object-fit: contain;
}
#main-content .card-figure,
#main-content .instrument-grid > .instrument-card:only-child .card-figure,
#main-content .category-portrait {
  height: auto; max-height: none; aspect-ratio: auto;
}
#main-content .instrument-opening .cover a,
#main-content .category-portrait { padding: 0; }

/* News uses only explicitly selected cover photos. */
.home-page .news-list, .news-archive { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.home-page .news-list article.news-card, .news-archive article.news-card { display: block; min-width: 0; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-surface); background: var(--paper-2); }
.news-photo { display: block; position: relative; border-radius: var(--radius-surface) var(--radius-surface) 0 0; overflow: hidden; background: #fff; }
.news-photo img { display: block; width: 100%; height: auto; }
.news-photo:focus-visible { outline-offset: 4px; }
.news-card .news-card-copy, .news-archive article > .news-card-copy { display: block; padding: 1.5rem; }
.news-card-copy time { display: block; color: var(--ink-soft); font-size: .9375rem; margin-bottom: .75rem; }
.news-card-copy h2, .news-card-copy h3 { font-size: 1.375rem; line-height: 1.35; margin: 0 0 .75rem; overflow-wrap: anywhere; }
.news-card-copy p { margin: 0; }
@media(max-width:1000px) { .home-page .news-list, .news-archive { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:620px) { .home-page .news-list, .news-archive { grid-template-columns: 1fr; } }

/* Shared image/title rows keep mixed photo proportions orderly without cropping. */
.home-page .category-cards { row-gap: 1rem; }
.home-page .category-cards > .category-card {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid; grid-row: span 2; row-gap: 1rem;
  align-items: start;
}
.home-page .category-card strong { border: 0; padding: 0 0 1rem; }
.home-page .section-heading { border: 0; padding-bottom: 0; }
.home-page .welcome { border: 0; }
.home-page .featured-route { border: 0; padding-top: 0; }

/* Intentional graphic for news without a selected cover photo. */
.news-placeholder { display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--nav-tint); color: var(--link); text-decoration: none; }
.news-placeholder > span { display: grid; justify-items: center; gap: .75rem; font-weight: 600; }
.news-placeholder:hover { color: var(--link-hover); }