/* Tuning guides share the homepage shell; these bands style the content below the tuner. */
.guide-content {
    --guide-yellow: var(--sunshine);
    --guide-coral: #EC5C4E;
    --guide-card: var(--card-fill);
    --guide-card-border: var(--card-border);
    --guide-paper: #FFFDF6;
    font-size: 18px;
    line-height: 1.6;
}

.guide-band { position: relative; overflow: hidden; padding: 80px 0; }
.guide-band-inner { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; padding: 0 40px; }
.guide-band-light { background-color: var(--white-stripes); color: var(--deep-purple); }

.guide-content h2 { font: 700 40px/1.15 'Byrd Simply', sans-serif; margin: 0 0 16px; }
.guide-content p { font-size: 18px; line-height: 1.6; margin: 0 0 16px; }
.guide-content p:last-child { margin-bottom: 0; }
.guide-content span { font-size: inherit; }
.guide-content .guide-lead { max-width: 720px; font-size: 20px; }
.guide-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.guide-content a:hover { text-decoration-thickness: 2px; }
.guide-content a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.guide-band-light a { color: var(--purple-haze); }
.guide-content .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.guide-content .guide-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 900 13px/1.4 'Basis Grotesque Pro', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--guide-yellow); }
.guide-band-light .guide-eyebrow { color: var(--purple-haze); }

.guide-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px; border: 2px solid var(--purple-haze); border-radius: 30px; background: var(--purple-haze); color: var(--white-stripes); font: 700 16px/1.2 'Byrd Simply', sans-serif; letter-spacing: .02em; text-transform: uppercase; transition: background-color .2s, border-color .2s, color .2s; }
.guide-content .guide-button { color: var(--white-stripes); text-decoration: none; }
.guide-content .guide-button:hover { background: #7600D5; border-color: #7600D5; }
.guide-content .guide-button-outline { background: transparent; border-color: var(--white-stripes); }
.guide-content .guide-button-outline:hover { background: var(--white-stripes); border-color: var(--white-stripes); color: var(--purple4); }

/* At a glance */
.guide-summary { padding-top: 48px; }
.guide-content .breadcrumb { flex: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; font-size: 15px; color: var(--text-hover-color); }
.guide-content .breadcrumb a { color: var(--white-stripes); }
.guide-summary-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.guide-content .intro { font-size: 20px; }
.guide-sound { margin-top: 28px; padding-left: 20px; border-left: 3px solid var(--guide-yellow); }
.guide-glance { padding: 28px; border: 1px solid var(--guide-card-border); border-radius: 28px; background: var(--guide-card); }
.glance-strings { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 6px 0 18px; }
.glance-strings li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.guide-content .glance-note { display: grid; place-items: center; width: 100%; max-width: 52px; aspect-ratio: 1; border: 2px solid #F4F0DD59; border-radius: 50%; font: 700 19px/1 'Byrd Simply', sans-serif; }
.is-retuned .glance-note { border-color: var(--guide-yellow); background: var(--guide-yellow); color: var(--deep-purple); box-shadow: 0 0 0 5px #FFD44F2E; }
.guide-content .glance-string { font-size: 13px; color: var(--text-hover-color); }
.guide-content .glance-legend { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-hover-color); }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--guide-yellow); }
.glance-facts { margin-top: 20px; border-top: 1px solid var(--guide-card-border); }
.glance-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0 0; }
.glance-facts dt { flex: none; font-size: 15px; color: var(--text-hover-color); }
.glance-facts dd { font: 700 17px/1.3 'Byrd Simply', sans-serif; text-align: right; }

/* Notes: the chart draws each string at its gauge, highlighting retuned strings. */
.guide-notes { background: var(--white-stripes) url('/assets/images/standard-tuning-background.svg') center / cover no-repeat; }
.guide-notes-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.guide-content .guide-notes-hint { font-size: 16px; opacity: .8; }
.string-chart { padding: 24px 28px 20px; border-radius: 28px; background: var(--purple4); color: var(--white-stripes); box-shadow: 0 24px 48px rgb(20 0 55 / 24%); }
.string-chart table { width: 100%; border-collapse: collapse; text-align: left; }
.string-chart caption { padding-bottom: 14px; text-align: left; font: 900 13px/1.4 'Basis Grotesque Pro', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--guide-yellow); }
.string-chart thead th { padding: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--text-hover-color); }
.string-chart thead th:last-child { text-align: right; }
.string-chart tbody tr { --gauge: 2px; --string: #F4F0DD4D; }
.string-chart tbody tr:nth-child(1) { --gauge: 5px; }
.string-chart tbody tr:nth-child(2) { --gauge: 4px; }
.string-chart tbody tr:nth-child(3) { --gauge: 3.5px; }
.string-chart tbody tr:nth-child(4) { --gauge: 2.5px; }
.string-chart tbody tr:nth-child(6) { --gauge: 1.5px; }
.string-chart tbody tr.is-retuned { --string: var(--guide-yellow); }
.string-chart tbody th, .string-chart tbody td { padding: 7px 0; vertical-align: middle; }
.string-chart tbody th { width: 1%; padding-right: 16px; white-space: nowrap; font-weight: 400; }
.string-chart tbody td { background: linear-gradient(var(--string), var(--string)) center / 100% var(--gauge) no-repeat; }
.string-chart tbody td:first-of-type { width: 1%; text-align: center; }
.string-chart tbody td:last-child { text-align: right; }
.string-chart .string-number { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid #F4F0DD66; border-radius: 50%; font: 700 14px/1 'Byrd Simply', sans-serif; vertical-align: middle; }
.string-chart .string-label { margin-left: 10px; font-size: 13px; color: var(--text-hover-color); vertical-align: middle; }
.string-chart .string-note { display: inline-grid; place-items: center; min-width: 54px; height: 54px; padding: 0 10px; border: 2px solid #F4F0DD80; border-radius: 30px; white-space: nowrap; background: var(--purple4); font: 700 18px/1 'Byrd Simply', sans-serif; }
.string-chart .is-retuned .string-note { border-color: var(--guide-yellow); background: var(--guide-yellow); color: var(--deep-purple); }
.string-chart .string-change { display: inline-block; padding: 5px 12px; border: 1.5px solid transparent; border-radius: 30px; background: var(--purple4); font-size: 14px; line-height: 1.3; color: var(--text-hover-color); }
.string-chart .is-retuned .string-change { border-color: var(--guide-yellow); color: var(--guide-yellow); font-weight: 500; }

/* Steps */
.guide-steps { background: url('/assets/images/guide-shape.svg') right -220px top -180px / 640px auto no-repeat; }
.guide-steps ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin: 40px 0 0; counter-reset: step; list-style: none; }
.guide-steps ol li { counter-increment: step; padding: 28px 24px; border: 1px solid var(--guide-card-border); border-radius: 24px; background: var(--guide-card); font-size: 17px; line-height: 1.55; }
.guide-steps ol li::before { content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 50%; background: var(--purple-haze); box-shadow: 0 8px 20px rgb(142 0 255 / 40%); font: 800 22px/1 'Byrd Simply', sans-serif; }
.guide-steps-extra { display: grid; gap: 24px; margin-top: 24px; }
.guide-content .guide-tip, .guide-more { margin: 0; padding: 28px 32px; border-radius: 24px; }
.guide-content .guide-tip { display: flex; align-items: baseline; gap: 24px; background: #14003766; font-size: 17px; }
.guide-content .guide-tip .guide-eyebrow { flex: none; margin: 0; }
.guide-more { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 48px; background: var(--white-stripes); color: var(--deep-purple); }
.guide-content .guide-more h2 { margin-bottom: 8px; font-size: 26px; }
.guide-content .guide-more p { font-size: 17px; }
.guide-content .guide-more p:last-child { grid-column: 2; grid-row: 1 / span 2; margin: 0; }

/* Songs and trivia */
.guide-songs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin: 40px 0 0; }
.guide-songs li { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border-radius: 24px; background: var(--guide-paper); box-shadow: 0 12px 32px rgb(20 0 55 / 8%); font-size: 16px; line-height: 1.5; }
.guide-songs .song-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 16px; background: var(--purple-haze); color: var(--white-stripes); }
.guide-songs li:nth-child(3n + 2) .song-icon { background: var(--guide-coral); }
.guide-songs li:nth-child(3n + 3) .song-icon { background: var(--purple4); color: var(--guide-yellow); }
.guide-songs strong { font: 700 22px/1.25 'Byrd Simply', sans-serif; }
.guide-songs .song-artist { margin-top: 4px; font-size: 16px; opacity: .8; }
.guide-songs .song-note { margin-top: 10px; font-size: 14px; opacity: .75; }
.guide-songs .song-source { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 500; }
.guide-songs .song-source::after { content: ' ↗'; }
.guide-trivia { display: flex; align-items: flex-start; gap: 24px; margin-top: 32px; padding: 32px; border-radius: 28px; background: var(--purple4); color: var(--white-stripes); }
.guide-trivia .trivia-icon { display: grid; flex: none; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #FFD44F26; color: var(--guide-yellow); }
.guide-content .guide-trivia h2 { margin-bottom: 8px; font-size: 28px; color: var(--guide-yellow); }
.guide-content .guide-trivia a { color: inherit; }

/* Related guides use the shared .tuning-cards from styles.css. */
.guide-content .related-guides { flex: none; margin: 0; }
.related-guides .tuning-cards { margin: 36px 0 40px; }
.tuning-guide .footer { border-top: 1px solid var(--card-border); }

@media (max-width: 900px) {
    .guide-band { padding: 64px 0; }
    .guide-summary { padding-top: 40px; }
    .guide-summary-grid, .guide-notes-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .guide-steps-extra { gap: 20px; }
    .guide-content .guide-tip { flex-direction: column; gap: 0; }
    .guide-content .guide-tip .guide-eyebrow { margin-bottom: 10px; }
    .guide-more { grid-template-columns: minmax(0, 1fr); }
    .guide-content .guide-more p:last-child { grid-column: auto; grid-row: auto; margin-top: 20px; }
    .guide-content h2 { font-size: 34px; }
}

@media (max-width: 600px) {
    .guide-band { padding: 52px 0; }
    .guide-summary { padding-top: 32px; }
    .guide-band-inner { padding: 0 20px; }
    .guide-content h2 { font-size: 30px; }
    .guide-content .intro, .guide-content .guide-lead { font-size: 18px; }
    .guide-content .breadcrumb { margin-bottom: 28px; }
    .guide-glance, .guide-content .guide-tip, .guide-more { padding: 24px 20px; }
    .string-chart { padding: 20px 16px 16px; border-radius: 24px; }
    .string-chart tbody th { padding-right: 12px; }
    .string-chart .string-label { display: block; margin: 4px 0 0; font-size: 11px; }
    .string-chart .string-note { min-width: 48px; height: 48px; padding: 0 8px; font-size: 16px; }
    .guide-content .glance-note { font-size: 16px; }
    .glance-strings { gap: 6px; }
    .string-chart .string-change { max-width: 150px; padding: 4px 10px; font-size: 13px; text-align: center; }
    .guide-steps ol, .guide-songs { margin-top: 28px; gap: 16px; }
    .guide-steps ol li { position: relative; min-height: 80px; padding: 20px 20px 20px 76px; }
    .guide-steps ol li::before { position: absolute; top: 18px; left: 20px; width: 40px; height: 40px; margin: 0; font-size: 19px; }
    .guide-content .guide-more .guide-button { width: 100%; text-align: center; }
    .guide-songs li { display: block; position: relative; min-height: 104px; padding: 20px 20px 20px 88px; }
    .guide-songs .song-icon { position: absolute; top: 20px; left: 20px; width: 48px; height: 48px; margin: 0; }
    .guide-songs strong, .guide-songs .song-artist, .guide-songs .song-note, .guide-songs .song-source { display: block; }
    .guide-songs strong { font-size: 20px; }
    .guide-songs .song-source { padding-top: 10px; }
    .guide-steps { background-size: 420px auto; background-position: right -200px top -120px; }
    .guide-trivia { flex-direction: column; gap: 16px; padding: 28px 24px; }
    .guide-content .guide-trivia h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .guide-button { transition: none; }
}