/* Public presentation. Loaded after the shared stylesheet, never in admin.
   Photo widths and natural proportions remain explicit in the templates. */
.public-site {
  --paper-2: #f6f5f1;
  --paper-3: #edf0ef;
  --ink: #414d4f;
  --ink-strong: #243638;
  --ink-soft: #5d696b;
  --link: #315d6c;
  --link-hover: #203f49;
  --nav-tint: #eaf0f0;
  --nav-hover: #f3f5f4;
  --line: #dde3e0;
  --radius-photo: 12px;
  --radius-surface: 16px;
  --section-space: clamp(3.5rem, 6vw, 5.5rem);
}
.public-site h1, .public-site h2 { text-wrap: balance; }
.public-site .site-header { min-height: 6rem; border: 0; }
.public-site .site-name .brand-script { font-size: 2.15rem; }
.public-site .site-name small { letter-spacing: .12em; }
.public-site .site-header nav { gap: .5rem; }
.public-site .site-header nav a {
  min-height: 48px; padding: .75rem 1rem; font-size: 1.0625rem;
  border: 0; border-radius: 8px;
}
.public-site .site-header nav a[aria-current=page] { background: var(--nav-tint); color: var(--ink-strong); }
.public-site .site-header .channel-nav { margin-left: .5rem; }

/* Strong opening, with the photograph and familiar signature doing the work. */
.home-page .legacy-hero { min-height: clamp(29rem, 38vw, 35rem); }
.home-page .legacy-hero h1 { font-size: clamp(4rem, 7.2vw, 6.75rem); text-shadow: none; }
.home-page .hero-route {
  background: #faf9f5; color: #243638; border-color: #faf9f5;
  padding-inline: 1.4rem; font-weight: 600; box-shadow: 0 3px 16px #00000012;
}
.home-page .hero-route:hover { background: #eaf0f0; border-color: #eaf0f0; }
.public-site .section-heading { border: 0; padding-bottom: 0; align-items: baseline; }
.home-page .section-heading h2 { font-size: clamp(2rem, 3.1vw, 2.75rem); }
.home-page .section-heading .text-link { flex-shrink: 0; }
.home-page .home-categories { margin-top: clamp(2.5rem, 4vw, 4rem); }
.home-page .category-card strong { padding-bottom: 0; line-height: 1.45; }
.home-page .category-card:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.home-page .welcome { padding-block: clamp(3rem, 5vw, 5rem); align-items: center; }
.home-page .welcome .motto { max-width: 19ch; margin-bottom: 0; font-size: clamp(2rem, 3.2vw, 3rem); }
.home-page .welcome h2 { color: var(--link); margin-bottom: 1rem; }
.home-page .welcome-copy p:first-child { font-size: 1.1875rem; line-height: 1.8; }
.home-page .welcome-copy p { margin-bottom: .6rem; }
.public-site .featured-instrument { background: var(--paper-2); }
.public-site .featured-copy .featured-type { color: var(--link); font-weight: 600; }
.public-site .featured-instrument:only-child h3 { font-size: clamp(2rem, 3vw, 2.75rem); }
.public-site .featured-route { font-weight: 600; }
.public-site .featured-photo { border-radius: var(--radius-photo); }

/* All page edges match the header, hero and footer. */
.public-site .breadcrumbs { margin-top: 1.5rem; margin-bottom: 1.5rem; font-size: .9375rem; }
.public-site .breadcrumbs > span:not([aria-current]) { color: #818c8c; }
.public-site .page-intro { padding-top: 1rem; padding-bottom: 2.5rem; }
.public-site .page-intro h1,
.public-site .detail-heading h1,
.public-site .standard-page > header h1,
.public-site .article-detail > header h1 {
  font-size: clamp(2.25rem, 4.1vw, 3.5rem); line-height: 1.15; letter-spacing: -.025em;
}
.public-site .instrument-detail > header,
.public-site .article-detail > header,
.public-site .standard-page > header { border: 0; padding: 1rem 0 0; margin-bottom: 2.5rem; }
.public-site .catalogue-intro .eyebrow { color: var(--link); }
.public-site .catalogue-intro .lead { margin-top: .85rem; color: var(--ink-soft); }
.public-site .catalogue-layout {
  max-width: none; margin: 0 var(--edge) var(--section-space); padding: 0;
  grid-template-columns: 14rem minmax(0,1fr); gap: 2.5rem;
}
.public-site .catalogue-navigation { align-self: start; }
.public-site .catalogue-navigation h2 { color: var(--ink-strong); font-size: 1.0625rem; }
.public-site .catalogue-navigation a { border-left: 0; padding: .9rem 1rem; }
.public-site .catalogue-navigation a[aria-current=page] { box-shadow: inset 3px 0 var(--link); }
.public-site .catalogue-search input { background: #fff; border-color: #859395; }
.public-site .catalogue-search .button { background: var(--link); color: #fff; }
.public-site .catalogue-search .button:hover { background: var(--link-hover); }
.public-site .results-summary { border: 0; padding: 1.25rem 0; margin: 0; }
.public-site .instrument-card h3 { font-size: 1.25rem; line-height: 1.35; margin-bottom: .6rem; }
.public-site .instrument-card h3 a { color: var(--ink-strong); }
.public-site .instrument-card:hover h3 a { color: var(--link); }
.public-site .instrument-card .card-body { padding-top: 1rem; }
.public-site .instrument-card p { font-size: 1.0625rem; line-height: 1.6; }
.public-site .instrument-card, .public-site .category-card { border-radius: var(--radius-photo); }
.public-site .instrument-grid > .instrument-card:not(:only-child) {
  display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 1rem;
  align-items: start;
}
.public-site .instrument-grid { row-gap: 1.5rem; }
.public-site .instrument-grid > .instrument-card:not(:only-child) .card-body { padding-top: 0; }
.public-site .category-portrait { overflow: hidden; }
#main-content .cover img { border-radius: var(--radius-photo); }
#main-content .gallery-grid a { border-radius: var(--radius-photo); }
.public-site .instrument-opening .prose p { margin-bottom: .9em; }
.public-site .section-jump {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem;
  margin-top: 1.25rem; border-radius: 8px; background: var(--nav-tint);
  font-size: 1rem; font-weight: 600; text-decoration: none;
}
.public-site .section-jump:hover { background: #dfe9e9; text-decoration: underline; }
.public-site .detail-gallery { margin-top: 3.5rem; }
.public-site .gallery-hint { font-size: 1rem; margin-bottom: 1.25rem; }
.public-site .content-updated { border: 0; padding-top: 0; margin-top: 2.5rem; }
.public-site .collection-return {
  border: 0; padding: 1.25rem 1.5rem; background: var(--paper-2);
  border-radius: var(--radius-surface); align-items: center;
}
.public-site .collection-return a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.public-site .category-return { margin: -1.5rem var(--edge) var(--section-space); }
.public-site .recordings { border: 0; padding-top: 0; }

/* A photograph accompanies long text; the full ordered gallery stays below. */
.public-site .page-opening {
  display: grid; grid-template-columns: minmax(0,1fr) 22rem;
  gap: clamp(2rem,5vw,5rem); align-items: start;
}
.public-site .page-preview { position: sticky; top: 2rem; }
.public-site .page-preview a { display: block; text-decoration: none; }
.public-site .page-preview img { width: 100%; height: auto; border-radius: var(--radius-photo); }
.public-site .page-preview span { display: inline-flex; align-items: center; min-height: 44px; margin-top: .75rem; font-weight: 600; }
.public-site .page-preview a:hover span { text-decoration: underline; }
.public-site .page-links .prose p { border: 0; padding-bottom: 0; margin-bottom: 1.5rem; }
.public-site .page-links .prose p:has(+ p > a:only-child) { margin-bottom: .25rem; }
.public-site .page-links .prose p > a:only-child { padding-top: 0; }
.public-site .article-detail .added { margin-top: 1rem; }

/* Compact placeholders, honest covers and a consistent reading hierarchy. */
.public-site .news-list, .public-site .news-archive { align-items: stretch; }
.public-site .home-page .news-list article.news-card,
.public-site .news-archive article.news-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; background: #fff;
  border-color: var(--line); box-shadow: 0 4px 20px #24363805;
}
.public-site .news-placeholder { aspect-ratio: auto; min-height: 8rem; background: #eef2f1; color: var(--link); }
.public-site .news-placeholder > span { display: flex; align-items: center; gap: .75rem; }
.public-site .news-placeholder svg { width: 32px; height: 32px; }
.public-site .news-card-copy { flex: 1; }
.public-site .news-card-copy h2 a, .public-site .news-card-copy h3 a { color: var(--ink-strong); }
.public-site .news-card-copy h2 a:hover, .public-site .news-card-copy h3 a:hover { color: var(--link); }
.public-site .news-card-copy time { font-size: .9375rem; }
.public-site .news-card-copy p { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.65; }

/* A clear, quiet ending. Contact information stays easy to find. */
.public-site .site-footer {
  background: #243638; border: 0; padding-block: clamp(2.5rem,5vw,4.5rem);
  color: #e8eeee; align-items: start;
}
.public-site .site-footer .footer-brand { color: #fff; font-size: 2.5rem; }
.public-site .site-footer a, .public-site .site-footer .footer-copy { color: #d5e0e0; }
.public-site .site-footer a:hover { color: #fff; }
.public-site .site-footer :focus-visible { outline-color: #fff; }
.public-site .site-footer .footer-contact { min-height: 44px; display: flex; align-items: center; margin-top: .25rem; }
.public-site .site-footer nav { gap: .5rem 3rem; }
.public-site .site-footer nav a { min-height: 44px; }

@media(min-width:761px) and (max-width:1000px) {
  .public-site .site-header { gap: 1rem; }
  .public-site .site-name .brand-script { font-size: 1.85rem; }
  .public-site .site-header .nav-toggle { display: none; }
  .public-site .site-header nav {
    position: static; display: flex; flex-direction: row; width: auto;
    padding: 0; border: 0; gap: 0; background: #fff;
  }
  .public-site .site-header nav a { padding-inline: .65rem; font-size: 1rem; }
  .public-site .site-header .channel-nav { margin-left: 0; }
}
@media(max-width:1000px) {
  .public-site .page-opening { grid-template-columns: minmax(0,1fr) 18rem; gap: 2rem; }
}
@media(max-width:900px) {
  .public-site .catalogue-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .public-site .catalogue-navigation a { border: 0; background: var(--paper-2); }
}
@media(max-width:760px) {
  .public-site .site-header { min-height: 5rem; }
  .public-site .site-name .brand-script { font-size: 1.8rem; }
  .public-site .site-header nav { padding: .75rem var(--edge) 1.25rem; }
  .public-site .site-header nav a { width: 100%; }
  .public-site .site-header .channel-nav { margin-left: 0; }
  .public-site .page-opening { grid-template-columns: 1fr; }
  .public-site .page-preview { position: static; order: -1; max-width: 18rem; }
}
@media(max-width:620px) {
  .home-page .legacy-hero { min-height: 26rem; }
  .home-page .legacy-hero h1 { font-size: clamp(3rem,12vw,4rem); }
  .home-page .section-heading { flex-wrap: wrap; gap: .25rem 1rem; }
  .home-page .welcome .motto { margin-bottom: .5rem; }
  .public-site .breadcrumbs { font-size: .875rem; margin-block: 1rem; }
  .public-site .instrument-card h3 { font-size: 1.125rem; }
  .public-site .instrument-card p { font-size: 1rem; }
  .public-site .catalogue-results .instrument-grid { row-gap: 1.5rem; }
  .public-site .page-preview { max-width: none; }
  .public-site .page-preview img { width: 100%; }
  .public-site .news-placeholder { min-height: 5rem; }
  .public-site .news-card .news-card-copy { padding: 1.25rem; }
  .public-site .collection-return { align-items: start; gap: .5rem; padding: 1rem 1.25rem; }
  .public-site .site-footer nav { border: 0; padding-top: 0; gap: .5rem 1.5rem; grid-template-columns: repeat(2,auto); }
}
@media(prefers-reduced-motion:reduce) {
  .public-site *, .public-site *::before, .public-site *::after { transition: none; scroll-behavior: auto; }
}

/* Resource descriptions and their original URLs form one readable unit. */
.public-site .resource-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.public-site .resource-item { min-width: 0; max-width: none; padding: 1.5rem; background: var(--paper-2); border-radius: var(--radius-surface); }
.public-site .page-links .resource-item p { margin: 0; font-size: 1.125rem; }
.public-site .resource-item p > a { display: block; width: fit-content; min-height: 44px; padding: .35rem 0; font-size: 1rem; overflow-wrap: anywhere; }
.public-site .resource-item:has(h2,h3) { grid-column: 1 / -1; }
@media(max-width:760px) { .public-site .resource-grid { grid-template-columns: 1fr; } }

/* Three homepage stories keep one shared row on tablets with room to read. */
@media(min-width:761px) { .public-site .home-page .news-list { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(min-width:621px) and (max-width:760px) { .public-site .home-page .news-list { grid-template-columns: 1fr; } }
