/* Instrument guide: shared paper, typography and spacing from style.css. */
.instrument-page { padding-top: calc(var(--nav-height) + var(--space-md)); }
.guide-back { display: inline-block; padding-block: var(--space-xs); color: var(--color-text-light); font-size: var(--fs-sm); }
.guide-eyebrow { color: var(--color-rose-deep); font-size: var(--fs-sm); letter-spacing: var(--ls-wide); margin-bottom: var(--space-ms); }
.guide-hero { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: var(--space-md); padding-block: var(--space-ml) var(--space-lg); }
.guide-hero h1 { font-family: var(--font-serif); color: var(--color-ink); font-size: var(--fs-heading); line-height: 1.6; letter-spacing: var(--ls-wide); }
.guide-lead { font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--color-rose-deep); line-height: var(--lh-body); margin-block: var(--space-md) var(--space-sm); }
.guide-intro { max-width: 25em; line-height: var(--lh-loose); }
.guide-hero-copy { position: relative; z-index: 1; }
.guide-hero-art { margin: 0 calc(-1 * var(--space-md)) 0 calc(-1 * var(--space-lg)); }
.guide-hero-art img {
    width: 100%;
    mix-blend-mode: multiply;
    /* Feather the watercolor paper while retaining the instrument at the center. */
    mask-image: radial-gradient(ellipse 72% 68% at 55% 53%, #000 48%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 72% 68% at 55% 53%, #000 48%, transparent 80%);
}
.guide-hero-art figcaption { text-align: right; font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-xs); }
.guide-contents { display: flex; flex-wrap: wrap; border-block: 1px solid var(--color-paper-line); gap: var(--space-md); padding-block: var(--space-sm); }
.guide-contents a { min-height: 44px; display: inline-flex; align-items: baseline; gap: var(--space-sm); color: var(--color-text); padding-block: var(--space-xs); font-size: var(--fs-sm); }
.guide-contents span { color: var(--color-rose-deep); font-family: Georgia, serif; }
.guide-contents a:hover, .guide-back:hover { color: var(--color-rose-deep); text-decoration: underline; }
.guide-section { padding-block: var(--section-space); }
.guide-section h2, .guide-invitation h2 { font-family: var(--font-serif); font-size: var(--fs-heading); line-height: var(--lh-snug); letter-spacing: var(--ls-wide); color: var(--color-ink); }
.guide-section-head > p:last-child { margin-top: var(--space-ms); color: var(--color-text-light); line-height: var(--lh-loose); }
.guide-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-ml); margin-top: var(--space-lg); }
.guide-part { border-top: 1px solid var(--color-paper-line); padding-top: var(--space-ms); }
.part-index { font-family: Georgia, serif; font-size: var(--fs-lg); color: var(--color-rose-deep); margin-bottom: var(--space-sm); }
.guide-part h3 { font-family: var(--font-serif); font-size: var(--fs-lg); line-height: var(--lh-body); }
.guide-part h3 span { display: block; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--color-rose-deep); margin-block: var(--space-xs) var(--space-sm); }
.guide-part > p:last-child { color: var(--color-text-light); line-height: var(--lh-loose); }
.guide-note { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-md); margin-top: var(--space-ml); padding: var(--space-md); background: var(--color-bg-alt); }
.guide-note h3 { font-family: var(--font-serif); font-size: var(--fs-lg); }
.guide-note p { max-width: var(--w-reading); color: var(--color-text-light); }
.guide-encounter { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-lg); align-items: center; border-block: 1px solid var(--color-paper-line); }
.encounter-mark { font-family: var(--font-serif); font-size: clamp(8rem, 16vw, 14rem); color: var(--color-rose-deep); text-align: center; line-height: 1.3; }
.encounter-mark span { display: block; font-family: var(--font-sans); font-size: var(--fs-sm); letter-spacing: var(--ls-widest); margin-top: var(--space-md); }
.encounter-copy > p:not(.guide-eyebrow) { max-width: var(--w-reading); margin-top: var(--space-md); line-height: 2.2; }
.special-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-lg); margin-top: var(--space-ml); }
.special-story > p { max-width: var(--w-reading); line-height: 2.2; margin-bottom: var(--space-md); }
.special-story .special-lead { font-family: var(--font-serif); font-size: var(--fs-xl); }
.special-lead strong { color: var(--color-rose-deep); font-weight: 600; }
.instrument-profile { border-block: 1px solid var(--color-paper-line); padding-block: var(--space-md); align-self: start; }
.instrument-profile h3 { font-family: Georgia, var(--font-serif); font-size: var(--fs-2xl); line-height: var(--lh-tight); }
.instrument-profile h3 span { display: block; font-family: var(--font-sans); font-size: var(--fs-sm); letter-spacing: var(--ls-widest); margin-bottom: var(--space-xs); }
.profile-subtitle { font-size: var(--fs-sm); margin-top: var(--space-sm); color: var(--color-text-light); }
.instrument-profile dl { margin-block: var(--space-ms); }
.instrument-profile dl > div { display: grid; grid-template-columns: 3em 1fr; gap: var(--space-sm); padding-block: var(--space-sm); border-top: 1px solid var(--color-paper-line); }
.instrument-profile dt { color: var(--color-text-light); }
.profile-note { color: var(--color-text-light); font-size: var(--fs-sm); }
.guide-invitation { text-align: center; border-block: 1px solid var(--color-paper-line); background: var(--color-bg-alt); color: var(--color-text); padding: var(--space-lg) var(--space-md); }
.guide-invitation h2, .guide-invitation .guide-eyebrow { color: var(--color-wine); }
.guide-invitation > p:not(.guide-eyebrow) { margin-top: var(--space-md); line-height: var(--lh-loose); }
.guide-invitation .invitation-date { font-size: var(--fs-sm); }
.guide-invitation .btn { margin-top: var(--space-ms); background: var(--color-wine); color: var(--color-photo-cream); }
.guide-invitation .btn:hover { background: var(--color-rose-hover); }
.guide-sources { padding-block: var(--space-md) var(--space-lg); font-size: var(--fs-sm); color: var(--color-text-light); }
.guide-sources summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-ms); width: 100%; min-height: 44px; padding: var(--space-sm); border: 1px solid var(--color-paper-line); color: var(--color-text); list-style: none; }
.guide-sources summary::-webkit-details-marker { display: none; }
.guide-sources summary::after { content: '+'; flex: none; font-size: var(--fs-lg); color: var(--color-rose-deep); }
.guide-sources[open] summary::after { content: '−'; }
.guide-sources summary:hover { background: var(--color-bg-alt); }
.guide-sources[open] summary { background: var(--color-bg-alt); }
.guide-sources p { max-width: var(--w-reading); margin-block: var(--space-sm); }
.guide-sources a { display: inline-block; padding-block: var(--space-xs); text-decoration: underline; }
.guide-art-canvas { position: relative; }
.instrument-page p { overflow-wrap: anywhere; }
@media (max-width: 900px) {
    .guide-hero { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
    .guide-hero-art { margin-inline: calc(-1 * var(--space-ms)); }
    .guide-parts { gap: var(--space-ms); }
    .guide-encounter { grid-template-columns: .6fr 1fr; gap: var(--space-md); }
    .special-layout { grid-template-columns: 1fr; gap: var(--space-md); }
    .instrument-profile { width: 100%; }
}
@media (max-width: 600px) {
    .instrument-page { padding-top: calc(var(--nav-height) + var(--space-sm)); }
    .guide-hero { grid-template-columns: 1fr; padding-block: var(--space-md); gap: var(--space-sm); }
    .guide-hero h1 { font-size: var(--fs-2xl); }
    .guide-lead { font-size: var(--fs-lg); margin-top: var(--space-ms); }
    .guide-lead br { display: none; }
    .guide-hero-art { margin: var(--space-xs) calc(-1 * var(--space-sm)) 0; }
    .guide-contents { gap: 0; justify-content: space-between; padding-block: var(--space-xs); }
    .guide-contents a { font-size: var(--fs-xs); }
    .guide-section { padding-block: var(--space-ml); }
    .guide-eyebrow { margin-bottom: var(--space-sm); }
    .guide-contents a { gap: var(--space-xs); }
    .guide-section h2, .guide-invitation h2 { font-size: var(--fs-xl); }
    .guide-parts { grid-template-columns: 1fr; margin-top: var(--space-md); gap: var(--space-md); }
    .guide-part { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-sm); }
    .guide-part > p:last-child { grid-column: 2; }
    .part-index { padding-top: var(--space-2xs); }
    .guide-note { grid-template-columns: 1fr; gap: var(--space-sm); padding: var(--space-ms); }
    .guide-encounter { grid-template-columns: 1fr; gap: var(--space-md); }
    .encounter-mark { font-size: var(--space-lg); display: flex; align-items: center; gap: var(--space-ms); text-align: left; }
    .encounter-mark span { margin-top: 0; font-size: var(--fs-xs); }
    .encounter-copy > p:not(.guide-eyebrow) { margin-top: var(--space-ms); }
    .desktop-break { display: none; }
    .special-layout { margin-top: var(--space-md); }
    .special-story .special-lead { font-size: var(--fs-lg); line-height: var(--lh-body); }
    .special-story > p { margin-bottom: var(--space-ms); }
    .guide-invitation > p:not(.guide-eyebrow) { margin-top: var(--space-ms); }
    .guide-invitation { padding: var(--space-ml) var(--space-ms); }
    .guide-invitation .guide-eyebrow { font-size: var(--fs-xs); }
}
@media print {
    .instrument-page { padding-top: 0; }
    .guide-back, .guide-contents { display: none; }
    .guide-section { padding-block: var(--space-md); }
    .guide-invitation { background: none; color: var(--color-ink); border-top: 1px solid var(--color-paper-line); }
}

/* Quiet discovery link, still available to keyboard and screen readers. */
.model-secret-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: var(--ls-wide); }
.model-secret-link:hover { color: var(--color-rose-deep); text-decoration: underline; }