/* ==========================================================================
   Little Wonder Records & Bubble Books — modern design system
   Palette derived from the original site:
   blue #0066FF · periwinkle #accbfa · orange #FF9933 · navy #000099/#003399
   ========================================================================== */

:root {
  --blue: #0057d8;
  --blue-bright: #0066ff;
  --blue-deep: #003399;
  --navy: #10214d;
  --sky: #accbfa;
  --sky-soft: #dce7fb;
  --paper: #f4f7fd;
  --card: #ffffff;
  --ink: #22293a;
  --ink-soft: #59637d;
  --orange: #ff9933;
  --orange-deep: #d97a14;
  --line: #ccd8ef;
  --shadow: 0 1px 2px rgba(16, 33, 77, .06), 0 8px 24px rgba(16, 33, 77, .08);
  --shadow-lift: 0 2px 4px rgba(16, 33, 77, .08), 0 14px 36px rgba(16, 33, 77, .16);
  --radius: 12px;
  --serif: "Book Antiqua", "Palatino Linotype", Palatino, "URW Palladio L", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --measure: 70ch;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  /* Body type per the author's pick (round-2 "Option 1"): smaller and tighter */
  font-size: .95rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
/* <picture> wrappers (AVIF sources with JPEG fallback) must not become
   layout boxes — the img inside stays the flex/grid item, as before. */
picture { display: contents; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* Round-4 author picks: flat muted "Blue 2" banner (from Variant B2), no
   orange rule — the D3 subsection band below provides the division. */
.site-header {
  background: #2f4e9e;
  color: #fff;
}

.site-header .masthead {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.1rem 1.25rem .9rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-disc { flex: 0 0 auto; width: 58px; height: 58px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); }
/* Original site logo, background keyed out so the banner blue shows through
   (assets/logo.png — cut from childrens-records.JPG, 2x sharpened) */
.logo-img { flex: 0 0 auto; width: 96px; height: auto; filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)); }

/* Header face: Libre Caslon (author's pick — "Option 3" of the type explorations) */
.site-title { margin: 0; font-family: "Libre Caslon Text", var(--serif); font-weight: 700; font-size: clamp(1.15rem, .95rem + 1.3vw, 1.75rem); line-height: 1.2; letter-spacing: .01em; }
.site-title a { color: #fff; }
.site-title a:hover { color: var(--sky); text-decoration: none; }
/* Round 5: the year range moved out of the title onto its own line where the
   tagline used to sit, still in parentheses.
   Round 7: author picked Y2 (the title's own serif, white) made bold. */
.site-years { margin: .2rem 0 0; font-family: "Libre Caslon Text", Georgia, serif; font-size: 1.05rem; font-weight: 700; letter-spacing: .05em; color: #fff; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px;
  font: 600 .9rem var(--sans);
  padding: .5rem .8rem;
  cursor: pointer;
}

.site-nav { background: none; }
.site-nav ul {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.site-nav a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .85rem;
  border-radius: 6px 6px 0 0;
  color: #fff;
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.site-nav a:hover { color: #fff; background: rgba(255,255,255,.14); text-decoration: none; }
.site-nav a[aria-current="page"],
.site-nav a.active { color: var(--navy); background: var(--rec, var(--orange)); }

/* Color-coded record icons — modern rendition of the original five record
   nav buttons (label colors match the originals / section scrollbar accents). */
.site-nav a.rec::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.32), rgba(255,255,255,0) 44%),
    radial-gradient(circle,
      #0d1015 0 8%,
      var(--rec, #ff9933) 8% 38%,
      #14181f 38% 52%,
      #2b303b 52% 55%,
      #14181f 55% 68%,
      #2b303b 68% 71%,
      #14181f 71% 84%,
      #2b303b 84% 87%,
      #14181f 87% 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  transition: transform .5s ease;
}
.site-nav a.rec:hover::before { transform: rotate(150deg); }
/* Section colors per the author's round-3 picks: R1 softened red,
   G1 softened green, Y1 warm gold */
.rec-home { --rec: #ff9933; }
.rec-history { --rec: #6cbf47; }
.rec-discography { --rec: #29cfdb; }
.rec-sales { --rec: #ffd54d; }
.rec-music { --rec: #c94848; }
.rec-links { --rec: #8a2be2; }
/* Red/purple label colors are dark — active pills need light text */
.site-nav a.rec-music[aria-current="page"],
.site-nav a.rec-links[aria-current="page"] { color: #fff; }

/* Site search — S1 (author's round-5 pick): a magnifier at the end of the
   record nav that expands an inline field, like the table search. Interim
   behavior until Webflow: submits a domain-restricted Google search in a
   new tab (see site.js). Ships hidden; JS reveals it. */
.nav-search form { display: flex; align-items: center; gap: .5rem; padding-left: .5rem; }
.nav-search input[name="q"] {
  width: 0;
  opacity: 0;
  padding: .32rem 0;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: .88rem;
  background: #fff;
  color: #1c2740;
  transition: width .25s ease, opacity .2s ease, padding .25s ease;
}
.nav-search.open input[name="q"] { width: 200px; opacity: 1; padding: .32rem .8rem; }
.ns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  color: #fff;
  cursor: pointer;
}
.ns-btn:hover { background: rgba(255,255,255,.3); }

/* Section sub-navigation — round-4 "D3" treatment: the subsections sit on
   their own pale band (no pills); the current entry is underlined in the
   section color. */
.subnav {
  background: #e4ebf8;
  border-bottom: 1px solid #c3d0e8;
}
.subnav ul {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0;
}
.subnav a, .subnav .current {
  display: inline-block;
  padding: .5rem .8rem;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue-deep);
  border-bottom: 3px solid transparent;
}
.subnav a:hover { text-decoration: none; border-bottom-color: var(--line); color: var(--navy); }

/* The active chip inherits the section's record-label color (set from the
   primary nav's aria-current item; defaults to the main section's orange). */
/* Each page declares its section as a body class (works in any browser that
   understands CSS variables — no :has() required). Pages without a class fall
   back to the home orange via var(--section, var(--orange)). */
body.sec-history { --section: #6cbf47; }
body.sec-discography { --section: #29cfdb; }
body.sec-sales { --section: #ffd54d; }
body.sec-music { --section: #c94848; }
body.sec-links { --section: #8a2be2; }
.subnav .current {
  color: var(--navy);
  font-weight: 700;
  border-bottom-color: var(--section, var(--orange));
}
/* On sub-pages the highlighted entry is a LINK back to its subsection top
   (author round 4) — keep the underline on hover. */
.subnav a.current:hover { border-bottom-color: var(--section, var(--orange)); }

/* --------------------------------------------------------------------------
   Page scaffolding
   -------------------------------------------------------------------------- */

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.page-hero { padding: 1.6rem 0 .4rem; text-align: center; }
.page-hero h1 {
  margin: 0;
  color: var(--navy);
  font-size: 1.6rem;   /* author's round-4 pick */
  line-height: 1.15;
}
.page-hero .lede { max-width: var(--measure); font-size: 1.1em; color: var(--ink-soft); margin: .7rem auto 0; }
.page-hero::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 1rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange), var(--blue-bright));
}

h2, h3, h4 { color: var(--navy); line-height: 1.25; text-align: center; }
/* Round 7: subheads reduced to the Music Library's third-level size ("A") so
   page names stay the largest text on the page. */
h2 { font-size: 1.15rem; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1.15rem; margin: 1.8rem 0 .5rem; }

/* Body copy fills the entire line (author's request; was capped at 70ch) */
.prose { max-width: none; }
.prose p { margin: 0 0 1.05rem; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* Two-column layout: article + figure rail (replaces the old 25/75 tables) */
.layout-rail {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.layout-rail > .rail { display: flex; flex-direction: column; gap: 1.2rem; }
.layout-rail.rail-right { grid-template-columns: minmax(0, 1fr) 260px; }

/* A table beside a rail starts level with its image (author's request) */
.layout-rail > div > .table-wrap:first-child { margin-top: 0; }

/* Related image pairs (Harper/Hodder covers, Victor front/back) touch each
   other and read as one card; the breathing room comes AFTER the pair.
   Consecutive pair sections were touching, which hid the grouping. */
.layout-rail + .layout-rail { margin-top: 1.8rem; }
.rail.pair-rail { gap: 0; }
.rail.pair-rail figure.card:first-child {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: .2rem;
}
.rail.pair-rail figure.card:last-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: .2rem;
}

/* --------------------------------------------------------------------------
   Figures, galleries, lightbox
   -------------------------------------------------------------------------- */

figure.card, .gallery figure {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem;
  box-shadow: var(--shadow);
  text-align: center;
}
figure.card > a, .gallery figure > a { display: block; }
/* The original homepage montage displays at its native width */
figure.card.montage img { width: 184px; max-width: 100%; }
figure.card img, .gallery figure img {
  border-radius: 6px;
  display: inline-block;
}
/* .figcap = figcaption styling for captions that sit mid-figure (figcaption
   itself is only valid as a figure's first or last child — W3C validator) */
figcaption, .figcap {
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ink-soft);
  padding: .55rem .25rem .1rem;
  text-align: center;
}
figcaption strong, .figcap strong { color: var(--navy); }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.1rem;
  margin: 1.4rem 0;
}
.gallery.dense { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.gallery.wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.gallery figure { display: flex; flex-direction: column; }
.gallery figure > a {
  /* grow to center images in equal-height rows, but NEVER shrink below the
     image itself — shrinking let visuals escape their card (sheet-music page) */
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery img {
  /* no `width: auto` here — it would override the width/height attributes
     that reserve space for lazy images (back-button scroll restoration) */
  max-height: 340px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform .18s ease;
}
.gallery a:hover img { transform: scale(1.025); }

/* Round 5: galleries where every image renders the same size, so the white
   border around each picture matches and captions start at the same distance.
   The media box height comes from --media-h on the gallery element. */
.gallery.even figure > a {
  flex: 0 0 auto;
  height: var(--media-h, 300px);
}
.gallery.even figure img { max-height: 100%; }

/* Round 7: centered galleries — fixed-width tracks (instead of stretchy 1fr)
   so a partial row of cards centers under the page title. */
.gallery.center { grid-template-columns: repeat(auto-fit, 240px); justify-content: center; }
.gallery.wide.center { grid-template-columns: repeat(auto-fit, 340px); justify-content: center; }
/* A card holding two pictures under one shared caption (the Cut-Out book's
   pair of 1922 ads). Round 8: stacked vertically so the card stays narrow. */
.two-up .duo { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.two-up .duo a { display: block; }

/* Round 11: combined pair cards (record-albums page) — same height as the
   neighbouring cards, roughly double the width (two grid tracks), NOT a
   full-width strip. */
.gallery figure.row-card { grid-column: span 2; }
/* Horizontal combined card: two related photos side by side in one card,
   each keeping its own caption. */
.duo-h-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.duo-h-cols > div { display: flex; flex-direction: column; }
.duo-h-cols > div > a { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; }
/* Below the collapse point the gallery may have a single track — a span-2
   card would overflow it, so pair cards fall back to normal placement. */
@media (max-width: 560px) {
  .duo-h-cols { grid-template-columns: 1fr; }
  .gallery figure.row-card { grid-column: auto; }
}

/* Round 7: a touch more air where a new paragraph follows the radio-show
   players on the Music Library page */
.mt-loose { margin-top: 1.8rem; }

/* Lightbox — round 5: "Current paper" tint backdrop with black type
   (the author's pick from the page-tint exploration). */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(244, 247, 253, .97);
  padding: 2.5rem 1rem 1rem;
}
.lb-overlay.open { display: flex; }
.lb-overlay img {
  max-width: min(1100px, 94vw);
  max-height: 82vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(16, 33, 77, .35);
  border: 1px solid var(--line);
  background: #fff;
}
/* Round 6: the Bravenet guest book widget arrives configured with the
   ORIGINAL site's periwinkle (#accbfa). Its markup is inline (not an iframe),
   so this override applies the finalized page tint regardless of the
   Bravenet account setting. */
.bn-service-widget { background: var(--paper) !important; }

/* Round 6: on the two sales book-galleries the ENLARGED images also display
   at one uniform size, regardless of each scan's native resolution (small
   scans are gently upscaled) — same size on both pages. */
body.lb-even .lb-overlay img { height: min(82vh, 860px); width: auto; max-width: 94vw; }
.lb-caption {
  color: #111;
  font-family: var(--sans);
  font-size: .9rem;
  text-align: center;
  margin-top: .8rem;
  max-width: 80ch;
}
.lb-btn {
  position: absolute;
  background: #fff;
  border: 1px solid var(--navy);
  color: var(--navy);
  font: 600 1.1rem var(--sans);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-btn:hover { background: var(--section, var(--orange)); border-color: var(--section, var(--orange)); color: var(--navy); }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   Tables (discographies, price lists)
   -------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin: 1.4rem 0; border-radius: var(--radius); box-shadow: var(--shadow); }
/* Wider, page-centered table (use on a section WITHOUT the .prose width cap) */
.table-wrap.wide-center { width: min(1080px, 100%); margin-left: auto; margin-right: auto; }
/* Round 5: narrow table (LW release dates); round 6: centered under the text */
.table-wrap.slim { max-width: 24rem; margin-left: auto; margin-right: auto; }
/* Round 5: discography tables share fixed column widths (via <colgroup>), so
   the Record / Take / Side / Matrix columns line up across every table on the
   page; .center-c1/.center-c2 center those columns' labels and entries. */
table.data.fixed-cols { table-layout: fixed; }
table.data.center-heads th { text-align: center; }
table.data.center-c1 th:first-child:not([colspan]),
table.data.center-c1 td:first-child { text-align: center; }
table.data.center-c2 th:nth-child(2),
table.data.center-c2 td:nth-child(2) { text-align: center; }
/* Footnote under a wide-center table, aligned to its edges */
.table-note { max-width: 1080px; margin: -.5rem auto 0; font-size: .92em; color: var(--ink-soft); }
table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  font-size: .92rem;
}
table.data th {
  background: var(--navy);
  color: #fff;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  padding: .6rem .8rem;
}
table.data td { padding: .5rem .8rem; border-top: 1px solid var(--line); vertical-align: top; }
/* Keep identifier/price cells on one line; opt-in via .num or .nw (never blanket
   first-column — some tables lead with prose). */
table.data .num, table.data .nw { white-space: nowrap; }

/* Sold-out / delisted content: kept in the markup but hidden. Remove the class
   from an element to restock/republish it. (Replaces the old site's practice of
   commenting items out; table striping skips hidden rows via the
   `even of :not(.hidden-item)` selector above.) */
.hidden-item { display: none; }
table.data tr:nth-child(even of :not(.hidden-item):not(.search-miss)) td { background: var(--paper); }

/* Click-to-sort headers (site.js adds data-sortable to <thead> tables).
   Sorted column = underlined heading; reversed sort = double underline. */
table.data th[data-sortable] { cursor: pointer; user-select: none; }
table.data th[data-sortable]:hover { background: #1c3568; text-decoration: underline dotted 1px; text-underline-offset: 4px; }
table.data th[aria-sort="ascending"] { text-decoration: underline solid 2px; text-underline-offset: 4px; }
table.data th[aria-sort="descending"] { text-decoration: underline double; text-underline-offset: 4px; }

/* Per-table live search: magnifier expands to an input (site.js) */
.table-tools[hidden] { display: none; }  /* static markup stays hidden until site.js binds it */
/* Zero-height bar just above the table: the controls rise onto the section
   HEADING's line, right-aligned with the table edge — no space of their own. */
.table-tools {
  position: relative;
  z-index: 2;
  height: 0;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: .5rem;
  padding: 0 .2rem;
}
/* match the wide-center tables' width so the controls hug the table's right edge */
.table-tools.wide-center { width: min(1080px, 100%); margin-left: auto; margin-right: auto; }
.table-tools > * { margin-top: -2.5rem; }   /* up onto the heading line */
/* Round 6 (author's W2 pick): the button carries the words "Search List"
   before the magnifier, instead of being an icon-only circle. */
.tsearch-btn {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 .6rem;
  gap: .35rem;
  font: 600 .72rem var(--sans);
  letter-spacing: .04em;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--blue-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(-2.5rem + 3px);   /* optically centered against the input */
}
.tsearch-btn:hover { border-color: var(--blue); color: var(--blue); box-shadow: var(--shadow); }
.tsearch-btn svg { width: 15px; height: 15px; }
.table-tools .tsearch {
  width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font: .9rem var(--sans);
  border-radius: 8px;
  background: #fff;
  transition: width .22s ease, opacity .18s ease, padding .22s ease;
}
.table-tools.open .tsearch {
  width: min(220px, 55vw);
  padding: .34rem 4.2rem .34rem .6rem;   /* room for the "N of M" count at right */
  border: 1px solid var(--blue);
  opacity: 1;
  outline: none;
}
/* "N of M" sits INSIDE the right end of the search box, in lighter text */
.tsearch-count {
  position: absolute;
  right: calc(.2rem + 22px + .5rem + .65rem);    /* pad + button + gap + inset */
  top: calc(-2.5rem + 7px);                      /* follows the raised input */
  margin: 0;                                     /* .table-tools > * margin doesn't apply here */
  font: .78rem var(--sans);
  color: #9aa3b5;
  white-space: nowrap;
  pointer-events: none;
}
.search-miss { display: none; }
table.data td.num, table.data th.num { text-align: center; font-variant-numeric: tabular-nums; }
/* Round 9 (author): on the record sales tables the price column gets more
   room (taken from the Condition column). Each table's widest price sits
   centered under the centered "Price" heading and every other price
   right-aligns to it, so all decimal points line up under the widest one's.
   The equal side padding makes this self-centering in auto-layout tables
   (the column sizes to widest price + padding); fixed-cols tables size the
   price <col> to calc(padding + widest-price width) to match. */
table.data.price-align td.num:last-child {
  text-align: right;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Generic no-wrap helper (e.g. keep "(courtesy of …)" on one line in captions) */
.nowrap { white-space: nowrap; }

/* Center a run of content on the page (links page banner list) */
.centered { text-align: center; }

/* --------------------------------------------------------------------------
   Audio (music library)
   -------------------------------------------------------------------------- */

.audio-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .8rem 1rem;
  margin: .7rem 0;
}
.audio-item .track-title { font-weight: 700; color: var(--navy); }
.audio-item .track-meta { font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); margin: .1rem 0 .45rem; }
.audio-item audio { width: 100%; height: 36px; }

.audio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .8rem; }
.audio-grid .audio-item { margin: 0; }

/* A titled run of tracks (e.g. "Tunes composed by E. T. Paull") — the box
   denotes where the section ENDS as well as where it begins. */
.track-group {
  border: 1px solid var(--line);
  border-left: 4px solid var(--section, var(--orange));
  background: #fff;   /* fallback where color-mix() is unsupported */
  background: color-mix(in srgb, #fff 92%, var(--section, var(--orange)));
  border-radius: var(--radius);
  padding: .9rem 1rem 1rem;
  margin: 1.6rem 0;
}
.track-group > h3 { margin: .1rem 0 .9rem; }

/* --------------------------------------------------------------------------
   Callouts, buttons, misc
   -------------------------------------------------------------------------- */

.callout {
  background: var(--sky-soft);
  border-left: 4px solid var(--blue-bright);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
  max-width: var(--measure);
}
.callout.orange { border-left-color: var(--orange); background: #fdf1e2; }

.btn {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font: 600 .9rem var(--sans);
  padding: .6rem 1.2rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.btn:hover { background: var(--blue-deep); color: #fff; text-decoration: none; }
.btn.orange { background: var(--orange); color: var(--navy); }
.btn.orange:hover { background: var(--orange-deep); color: #fff; }

/* Forms (contact page) */
.form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem;
  max-width: 640px;
}
.form-card label { display: block; font: 600 .82rem var(--sans); color: var(--navy); margin: .9rem 0 .25rem; }
.form-card label span { color: var(--orange-deep); }
.form-card input, .form-card textarea, .form-card select {
  width: 100%;
  font: 1rem var(--serif);
  color: var(--ink);
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.form-card input:focus, .form-card textarea:focus { outline: 2px solid var(--sky); border-color: var(--blue); }
/* Submit states (Aug 2026: form de-jQueryed — these were unstyled before).
   Field-level errors use the browser's native validation UI. */
.turnstile.error .turnstile__target { outline: 2px solid #b3261e; outline-offset: 2px; border-radius: 4px; }
.form-status { font: 600 .85rem var(--sans); color: var(--navy); margin: .8rem 0 0; }
.form-status.is-error { color: #b3261e; }
.btn:disabled { opacity: .6; cursor: default; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: var(--sky);
  margin-top: 3rem;
  border-top: 4px solid var(--orange);
}
.site-footer .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.6rem 1.25rem 2rem;
  text-align: center;
}
.site-footer nav { font-family: var(--sans); font-size: .85rem; margin-bottom: 1rem; }
.site-footer nav a { color: #fff; margin: 0 .55rem; }
.site-footer nav a:hover { color: var(--orange); }
.site-footer .legal { font-size: .82rem; line-height: 1.6; color: #9fb4e6; }

/* --------------------------------------------------------------------------
   Document carousel — "page through" documents (approved round 4).
   Light overlay; accents take the host page's section color; the prev/next
   buttons sit BESIDE the image at every width, never on it.
   -------------------------------------------------------------------------- */
.cv-overlay { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column;
  align-items: center; justify-content: center; background: rgba(244,247,253,.97); padding: 1rem; }
.cv-overlay.open { display: flex; }
.cv-title { color: #10214d; font-family: "Libre Caslon Text", Georgia, serif; font-size: 1.05rem; margin: 0 0 .6rem; text-align: center; }
.cv-stage { display: flex; align-items: center; justify-content: center; gap: .8rem; max-width: 97vw; }
.cv-stage img { max-width: min(1000px, calc(97vw - 2 * (46px + .8rem))); max-height: 74vh;
  object-fit: contain; background: #fff; border-radius: 4px;
  box-shadow: 0 10px 40px rgba(16,33,77,.35); border: 1px solid #ccd8ef; }
.cv-btn { flex: 0 0 auto; width: 46px; height: 46px;
  border-radius: 999px; border: 1px solid #10214d; background: #fff;
  color: #10214d; font: 700 1.2rem sans-serif; cursor: pointer; }
.cv-btn:hover { background: var(--section, #ff9933); border-color: var(--section, #ff9933); }
.cv-close { position: fixed; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid #10214d; background: #fff; color: #10214d; font: 700 1.1rem sans-serif; cursor: pointer; }
.cv-close:hover { background: var(--section, #ff9933); border-color: var(--section, #ff9933); }
.cv-bar { color: #59637d; font-family: var(--sans, sans-serif); font-size: .9rem; margin-top: .7rem; text-align: center; }
.cv-bar b { color: #10214d; }
.cv-dots { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .6rem; }
.cv-dots button { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #10214d; background: #fff; cursor: pointer; padding: 0; }
.cv-dots button[aria-current="true"] { background: var(--section, #ff9933); border-color: var(--section, #ff9933); }
@media (max-width: 640px) {
  .cv-btn { width: 40px; height: 40px; }
  .cv-stage { gap: .4rem; }
  .cv-stage img { max-width: calc(97vw - 2 * (40px + .4rem)); }
}

/* --------------------------------------------------------------------------
   Featured sheet-music card (round 5, "Size D"): a small card whose pages can
   be flipped in place — the page-through buttons sit beside the sheet music —
   and clicking the page opens the full-screen document carousel above.
   -------------------------------------------------------------------------- */
figure.featured-entry { max-width: 380px; width: 100%; margin: 1.6rem auto; }
.mini-carousel .mc-stage { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.mini-carousel .mc-stage img { max-height: var(--page-h, 340px); width: auto;
  max-width: calc(100% - 2 * (34px + .5rem)); border-radius: 4px; cursor: zoom-in; }
.mc-btn { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--navy); background: #fff; color: var(--navy);
  font: 700 1rem sans-serif; cursor: pointer; padding: 0; }
.mc-btn:hover { background: var(--section, var(--orange)); border-color: var(--section, var(--orange)); }
.mc-bar { font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); padding-top: .45rem; text-align: center; }
.mc-bar b { color: var(--navy); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Mid widths: shrink the two columns instead of stacking (author's request) */
@media (max-width: 900px) {
  .layout-rail { grid-template-columns: clamp(120px, 26vw, 220px) minmax(0, 1fr); gap: 1.2rem; }
  .layout-rail.rail-right { grid-template-columns: minmax(0, 1fr) clamp(120px, 26vw, 220px); }
  body { font-size: .97rem; }
}
/* Phones: too narrow for two columns — article first, rail follows. */
@media (max-width: 560px) {
  .layout-rail, .layout-rail.rail-right { grid-template-columns: 1fr; }
  .layout-rail > .rail {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .layout-rail > .rail figure { max-width: 260px; }
}

/* Round 5: the author wants the full nav on half a 17" screen (~768 CSS px).
   Below 900px the six records tighten up (smaller type, padding, icons) so
   they + the search magnifier fit one row down to ~740px; only below that
   does the Menu button take over. */
@media (max-width: 900px) {
  .site-nav a { font-size: .78rem; letter-spacing: .02em; padding: .5rem .55rem; gap: .4rem; }
  .site-nav a.rec::before { width: 18px; height: 18px; }
}
@media (max-width: 740px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; padding: .4rem 0; }
  .site-nav a { font-size: .86rem; padding: .7rem 1.25rem; }
  /* inside the opened Menu the search field is always expanded */
  .nav-search form { padding: .5rem 1.25rem; }
  .nav-search input[name="q"] { width: min(200px, 60vw); opacity: 1; padding: .32rem .8rem; }
}

@media print {
  .site-header, .subnav, .site-footer, .nav-toggle { display: none; }
}