/* N020 Chordline Music School - desktop. Palette: spruce cream #F3E6CF / rosewood #2B2118 / string green #2E9E5E. */
body{background:var(--c1)}
.hero{position:relative;min-height:max(100svh,820px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:var(--grid-gap);padding:calc(var(--s8) + 24px) var(--gutter) var(--s6);max-width:1680px;margin-inline:auto}
.hero-copy{grid-column:1 / span 5;grid-row:1 / span 2;align-self:start;display:grid;gap:var(--s4);position:relative;z-index:2;padding-top:var(--s5)}
.lead{max-width:28ch}
.hero-stage{grid-column:7 / span 6;grid-row:1 / span 2;position:relative;min-height:540px;margin-right:calc(var(--gutter) * -1)}
.gesture{right:calc(var(--gutter) + 8px);top:var(--s3)}
.strings{grid-column:1 / span 8;grid-row:3;display:grid;gap:2px;align-self:end;position:relative;z-index:2}
@media (hover:hover) and (pointer:fine){.string:hover{background:color-mix(in oklab,var(--c2) 6%,transparent)}}
.level-card{grid-column:9 / span 4;grid-row:3;align-self:end;position:relative;z-index:2}

.title{font:800 clamp(4.2rem,1.4rem + 7vw,9.4rem)/.82 var(--f-display);letter-spacing:var(--track-display);color:var(--ink)}
.title .serif{font-weight:400;font-style:italic;letter-spacing:-.03em;color:color-mix(in oklab,var(--c2) 70%,var(--c3))}
.gesture{position:absolute;display:flex;align-items:center;gap:8px;color:var(--ink-3);transition:opacity var(--dur) var(--ease-out);pointer-events:none}
.gesture .icon{width:16px;height:16px}
.hero-stage.has-turned .gesture{opacity:0}
.string{position:relative;display:grid;grid-template-columns:3.2rem 1fr 6.2rem;align-items:center;gap:var(--s3);width:100%;min-height:52px;padding:0 var(--s2);border-radius:var(--radius-sm);color:var(--ink);text-align:left;transition:background var(--dur-fast) var(--ease-out)}
.string:focus-visible{outline:2px solid var(--c3);outline-offset:2px}
.s-note{font:700 1.5rem/1 var(--f-display);letter-spacing:-.02em}
.s-line{width:100%;height:24px;overflow:visible}
.s-line path{fill:none;stroke:color-mix(in oklab,var(--c2) 78%,var(--c1));stroke-width:1.6;vector-effect:non-scaling-stroke}
.string[data-string="0"] .s-line path{stroke-width:1.4}.string[data-string="1"] .s-line path{stroke-width:2.4}.string[data-string="2"] .s-line path{stroke-width:2}.string[data-string="3"] .s-line path{stroke-width:1.2}
.string.is-on .s-line path{stroke:var(--c3)}
.string.is-on .s-note{color:var(--c3)}
.s-hz{color:var(--ink-3);text-align:right}
.level-card{display:grid;gap:6px;align-content:start;padding:var(--s4);border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in oklab,var(--c1) 70%,transparent);box-shadow:var(--spec)}
.lc-k{color:var(--c3)}
.lc-h{font:700 clamp(1.6rem,1rem + 1.2vw,2.3rem)/1.05 var(--f-display);letter-spacing:var(--track-h)}
.level-card.flash .lc-h,.level-card.flash .lc-b{animation:lc .48s var(--ease-out)}
@keyframes lc{from{opacity:0;transform:translateY(10px)}}
.levels .tt{list-style:none;margin:var(--s6) 0 0;padding:0;border-top:1px solid var(--line-strong)}
.tt-row{display:grid;align-items:baseline;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.tt-note{font-size:clamp(3rem,2rem + 3vw,5.4rem);line-height:.8;font-style:italic;color:var(--c3)}
.tt-main{display:grid;gap:6px}.tt-main .mono{color:var(--ink-3)}
.tt-main h3{font:700 1.5rem/1.1 var(--f-display);letter-spacing:var(--track-h)}
.tt-time{color:var(--ink-2)}
.chords{background:var(--c2);color:var(--c1)}
.chords .tag,.chords .body{color:var(--on-dark-2)}
.chords .h2{color:var(--c1)}.chords .h2 .serif{font-style:italic;font-weight:400;color:color-mix(in oklab,var(--c1) 70%,var(--c3))}
.ch-row{display:grid;gap:var(--s3)}
.chord{display:grid;justify-items:center;gap:8px;padding:var(--s4) var(--s3);border:1px solid var(--line-dark);border-radius:var(--radius);color:var(--c1);transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.chord svg{width:96px;height:96px;overflow:visible}
.chord .frets path{fill:none;stroke:var(--on-dark-2);stroke-width:1.2}.chord .frets .nut{stroke:var(--c1);stroke-width:3}
.chord .dot{fill:var(--c3)}.chord .open{fill:none;stroke:var(--c1);stroke-width:1.4}
.ch-n{font:700 1.6rem/1 var(--f-display)}.ch-s{color:var(--on-dark-2)}
.chord.is-on{border-color:var(--c3);transform:translateY(-4px)}
.chord:focus-visible{outline:2px solid var(--c3);outline-offset:3px}

.lv-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s3) var(--grid-gap)}
.lv-head .tag{grid-column:1 / -1}.lv-head .h2{grid-column:1 / span 7}.lv-head .body{grid-column:9 / span 4;align-self:end}
.tt-row{grid-template-columns:8rem 1fr 14rem}
.tt-time{text-align:right}
.ch-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s6) var(--grid-gap);align-items:center}
.ch-head{grid-column:1 / span 5;display:grid;gap:var(--s3)}
.ch-row{grid-column:7 / span 6;grid-template-columns:repeat(4,1fr)}
@media (hover:hover) and (pointer:fine){.chord:hover{border-color:color-mix(in oklab,var(--c3) 60%,var(--line-dark))}}
@media (max-width:1100px){.hero-copy{grid-column:1 / span 6}.strings{grid-column:1 / span 7}.level-card{grid-column:8 / span 5}.ch-head,.ch-row{grid-column:1 / -1}}