/* =============================================================================
   Nathaniel School of Music — Brochure print system
   Print-first. A4. Each page is a full-bleed .page block.
   Imported by every brochure; per-brochure CSS overrides palette + type.
   ============================================================================= */

/* A4 = 210mm × 297mm. Standard editorial scaling — 1mm ≈ 3.78px @ 96dpi. */

@page {
  size: A4;
  margin: 0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #2a2a2a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: 10.5pt;
  line-height: 1.55;
  color: var(--ink);
}

/* ---------- The page primitive ---------- */

.page {
  width: 210mm;
  min-height: 297mm;
  height: 297mm;
  padding: 0;
  margin: 12mm auto;
  background: var(--paper);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  page-break-after: always;
  break-after: page;
  display: flex;
  flex-direction: column;
}

.page:last-child {
  page-break-after: auto;
  break-after: auto;
}

/* Inner padding wrapper — most pages use this */
.page-inner {
  padding: 18mm 20mm 14mm;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.page-inner-tight {
  padding: 14mm 16mm 12mm;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- Folio (page header/footer) ---------- */

.folio {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-folio);
  font-size: 7.5pt;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 8mm 20mm 0;
  font-weight: 500;
  flex-shrink: 0;
}
.folio-bottom {
  padding: 0 20mm 8mm;
  margin-top: auto;
}
.folio span { display: inline-block; }
.folio .folio-num { font-variant-numeric: tabular-nums; }

/* ---------- Type primitives ---------- */

.eyebrow {
  font-family: var(--font-folio);
  font-size: 8pt;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 6mm 0;
}

.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-size: 56pt;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.display-md {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-size: 36pt;
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0;
}

.display-sm {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-size: 22pt;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

h2.section-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-size: 28pt;
  line-height: 1.0;
  letter-spacing: -0.015em;
  margin: 0 0 6mm 0;
}

h3.label {
  font-family: var(--font-folio);
  font-size: 8.5pt;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 3mm 0;
}

p { margin: 0 0 3mm 0; }
p.lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14pt;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 6mm;
  text-wrap: pretty;
}

/* Drop cap utility */
.drop-cap::first-letter {
  font-family: var(--font-display);
  font-size: 4.6em;
  line-height: 0.85;
  float: left;
  padding: 0.05em 0.08em 0 0;
  margin-right: 0.04em;
  font-weight: var(--display-weight, 400);
  color: var(--accent);
}

/* Rules */
.rule {
  border: 0;
  border-top: 0.5pt solid var(--ink);
  margin: 6mm 0;
}
.rule-thin { border-top-width: 0.3pt; }
.rule-accent { border-top-color: var(--accent); border-top-width: 1pt; }

/* ---------- Brand mark ---------- */

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-folio);
  font-size: 8pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.brand-mark img {
  height: 22px;
  width: auto;
}

/* ---------- Image utilities ---------- */

.img-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

figure { margin: 0; }
figcaption {
  font-family: var(--font-folio);
  font-size: 7.5pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 2.5mm;
  font-weight: 500;
}

/* ---------- Grid utilities ---------- */

.grid { display: grid; gap: 6mm; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-sm { gap: 3mm; }
.gap-md { gap: 6mm; }
.gap-lg { gap: 10mm; }

/* ---------- Lists ---------- */

ul.clean {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.clean li {
  padding: 2.5mm 0;
  border-bottom: 0.3pt solid var(--ink-faint);
  font-size: 10pt;
  line-height: 1.45;
}
ul.clean li:last-child { border-bottom: 0; }

ul.numbered {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: nlist;
}
ul.numbered li {
  counter-increment: nlist;
  padding: 3mm 0 3mm 12mm;
  position: relative;
  border-bottom: 0.3pt solid var(--ink-faint);
  font-size: 10.5pt;
  line-height: 1.45;
}
ul.numbered li::before {
  content: counter(nlist, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 3mm;
  font-family: var(--font-folio);
  font-size: 8pt;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
}
ul.numbered li:last-child { border-bottom: 0; }

/* ---------- Pull quote ---------- */

.pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24pt;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.pullquote-attr {
  font-family: var(--font-folio);
  font-size: 8pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-top: 5mm;
}

/* ---------- Spacers ---------- */

.spacer-sm { height: 4mm; }
.spacer    { height: 8mm; }
.spacer-lg { height: 14mm; }
.flex-grow { flex: 1; }

/* ---------- Tabular data ---------- */

.spec {
  display: grid;
  grid-template-columns: 60mm 1fr;
  gap: 0;
}
.spec dt {
  font-family: var(--font-folio);
  font-size: 8pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  padding: 2.5mm 0;
  border-bottom: 0.3pt solid var(--ink-faint);
}
.spec dd {
  margin: 0;
  font-size: 10.5pt;
  padding: 2.5mm 0;
  border-bottom: 0.3pt solid var(--ink-faint);
  color: var(--ink);
}
.spec dt:last-of-type, .spec dd:last-of-type { border-bottom: 0; }

/* ---------- Print-mode tweaks ---------- */

@media print {
  body { background: white; }
  .page {
    margin: 0;
    box-shadow: none;
    page-break-after: always;
  }
  .no-print { display: none !important; }
}

/* ---------- Clickable links (preserve editorial styling) ---------- */

a, a:link, a:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 0.3pt solid currentColor;
  text-decoration-skip-ink: auto;
}
a:hover { opacity: 0.6; }
a.no-underline, .folio a, .cover-meta a, .cover-edition a {
  border-bottom: 0;
}

/* ---------- QR code block ---------- */

.qr {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2mm;
  text-align: center;
  border-bottom: none !important;  /* no underline when used as <a> */
  text-decoration: none;
}
.qr img {
  width: 27mm;
  height: 27mm;
  display: block;
  background: #fff;
  padding: 2mm;
  border: 0.5pt solid var(--ink-faint);
  image-rendering: pixelated; /* keep QR matrix crisp at any scale */
}
.qr-lbl {
  font-family: var(--font-folio);
  font-size: 7.2pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  line-height: 1.4;
}
.qr-row {
  display: flex;
  gap: 6mm;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* ---------- Testimonial / quote text ---------- */

.testimonial {
  font-family: var(--font-body);
  font-size: 10.5pt;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 3mm;
  font-weight: 400;
  text-wrap: pretty;
}
.testimonial-lead {
  font-family: var(--font-body);
  font-size: 14pt;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 5mm;
  text-wrap: balance;
}
.testimonial-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 56pt;
  line-height: 0.6;
  color: var(--accent);
  margin: 0 0 3mm;
  font-weight: 500;
  display: block;
}

/* ---------- FAQ unified styling ---------- */

.faq-q-fmt {
  font-family: var(--font-body);
  font-size: 11pt;
  line-height: 1.3;
  margin: 0 0 1.5mm;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.faq-a-fmt {
  font-family: var(--font-body);
  font-size: 9.5pt;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}

/* ---------- Photo-led cover hero ---------- */

.cover-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cover-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.65) 100%);
}

/* ---------- Photo gallery utility ---------- */

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4mm;
}
.photo-gallery figure {
  aspect-ratio: 4/5;
  overflow: hidden;
  margin: 0;
}
.photo-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.photo-gallery.tall figure { aspect-ratio: 3/4; }
.photo-gallery.wide figure { aspect-ratio: 1/1; }

/* On dark "closer" pages, swap muted foreground */
.closer-page .qr img,
.closer-fdn .qr img,
.closer-int .qr img,
.closer-gtr .qr img,
.closer-vox .qr img {
  width: 24mm;
  height: 24mm;
  border-color: rgba(255,255,255,0.25);
}
.closer-page .qr-lbl,
.closer-fdn .qr-lbl,
.closer-int .qr-lbl,
.closer-gtr .qr-lbl,
.closer-vox .qr-lbl {
  font-size: 6.7pt;
  color: rgba(255,255,255,0.6);
}
.closer-page .spec dt,
.closer-fdn .spec dt,
.closer-int .spec dt,
.closer-gtr .spec dt,
.closer-vox .spec dt {
  padding: 1.8mm 0;
  font-size: 7.1pt;
}
.closer-page .spec dd,
.closer-fdn .spec dd,
.closer-int .spec dd,
.closer-gtr .spec dd,
.closer-vox .spec dd {
  padding: 1.8mm 0;
  font-size: 9.3pt;
}

/* ---------- Next-intake stamp ---------- */

.intake-stamp {
  display: inline-block;
  font-family: var(--font-folio);
  font-size: 7.5pt;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2mm 4mm;
  border: 0.5pt solid currentColor;
  line-height: 1.4;
}

/* ---------- Screen-only print bar ---------- */

.print-bar {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
}
.print-bar a, .print-bar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: white;
  color: #111;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transition: transform 0.15s;
}
.print-bar a:hover, .print-bar button:hover {
  transform: translateY(-1px);
}
.print-bar .home-link { background: rgba(255,255,255,0.85); }

@media print { .print-bar { display: none !important; } }