/* kurtholes.com music pages: the Wall's grammar (music-gen/gen.ts, M1 Sep 28 2026). Tokens = site/index.html. */
:root{
  --ink:#070505;--tile:#150e0e;--signal:#d7141e;--blood:#5a0b10;--ember:#ff5a4e;--bone:#f3ece6;--ash:#a1938d;--onred:#0a0707;--white:#ffffff;
  --gut:16px;--gap:6px;
  --display:"Big Shoulders Display","Oswald","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--mono);font-size:15px;line-height:1.45;overflow-x:hidden}
::selection{background:var(--signal);color:var(--white)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--bone);outline-offset:3px}
ul,ol{list-style:none;margin:0;padding:0}
p,h1,h2,figure,pre{margin:0}
.wrap{width:min(100% - 2*var(--gut), 1400px);margin-left:auto;margin-right:auto}
.tile{background:var(--tile);min-width:0}

/* grain on the red fields: printed ink, not flat screen red */
.red{position:relative}
.red::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.28;mix-blend-mode:multiply;pointer-events:none}
.red>*{position:relative}

/* ---------- masthead: the name, slim, on red; it links home ---------- */
.mast{background:var(--signal);color:var(--onred);overflow:hidden}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0 10px}
.mast .home{font:900 34px/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em;transition:color .18s}
.mast .home:hover{color:var(--white)}
.mast .sect{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.mast .sect:hover{color:var(--onred)}
.mast a:focus-visible{outline-color:var(--white)}

/* ---------- breadcrumb ---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:baseline;margin-top:12px;font:500 12px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}
.crumb a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:4px;transition:color .18s,text-decoration-color .18s}
.crumb a:hover{color:var(--ember);text-decoration-color:var(--signal)}
.crumb .sep{color:var(--ember);margin:0 .6em}
.crumb [aria-current]{color:var(--bone)}

.page{margin-top:var(--gut);display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
.crumb+.page{margin-top:12px}

/* ---------- plates: the name tile's treatment, the page's own name on it ---------- */
.plate{background:var(--signal);color:var(--onred);padding:18px 18px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:22px;overflow:hidden}
.plate .in{container-type:inline-size}
.plate h1{font:900 40px/.86 var(--display);font-size:clamp(30px,calc(var(--fs,20) * 1cqw),220px);text-transform:uppercase;letter-spacing:-.01em;overflow-wrap:break-word;word-break:keep-all;text-wrap:balance}
.plate .what{font:500 12px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.plate .what a{color:var(--white);text-decoration:underline;text-decoration-color:var(--onred);text-decoration-thickness:2px;text-underline-offset:4px}
.plate .what a:hover{color:var(--onred)}
.plate a:focus-visible{outline-color:var(--white)}

/* ---------- doors: every album is a door with a numbered wall label ---------- */
.doors{display:grid;gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense}
.doors>.plate,.doors>.listen,.doors>.d-az{grid-column:1/-1}
.door{display:flex;flex-direction:column;overflow:hidden;color:var(--bone);background:var(--tile);min-width:0}
.frame{position:relative;display:block;overflow:hidden;aspect-ratio:var(--ar,1);background:#0d0909}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--signal);transition:box-shadow .22s ease;pointer-events:none}
/* the typographic door: no art, so the title is the art */
.type{container-type:inline-size;background:var(--tile);border-bottom:1px solid #2b1c1c}
.type .ti{position:absolute;inset:0;padding:8cqw;display:flex;flex-direction:column;justify-content:space-between;gap:3cqw}
.type .yr{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.type .tt{font:700 28px/.9 var(--display);font-size:calc(var(--fs,20) * 1cqw);text-transform:uppercase;letter-spacing:.01em;color:var(--bone);overflow-wrap:break-word;word-break:keep-all;text-wrap:balance}
.d-az .frame{--ar:2}
.d-az .type .ti{padding:6cqw}
.d-az .type .tt{font-size:calc(var(--fsm,12) * 1cqw)}
/* the wall label: number, title, arrow; under it the ash line that says what is behind the door */
.label{flex:1 0 auto;display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-start;column-gap:10px;row-gap:3px;padding:10px 12px 11px;background:var(--tile);transition:background-color .22s ease}
.label .no{font:500 11px/1 var(--mono);color:var(--ember);letter-spacing:.06em}
/* M1.2: a door on a TRACK page never shows the album's wall number (that number is the album's place on /music/); it says where it leads */
.label .k{font:500 11px/1 var(--mono);color:var(--ember);letter-spacing:.14em;text-transform:uppercase}
.label .t{flex:1 0 calc(100% - 40px);font:700 20px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--bone);overflow-wrap:break-word}
.label .s{flex:1 1 60%;min-width:0;font:400 12px/1.25 var(--mono);color:var(--ash);overflow-wrap:anywhere}
.label .go{margin-left:auto;font:500 14px/1 var(--mono);color:var(--ember)}
.door:hover .frame img,.door:focus-visible .frame img{transform:scale(1.035)}
.door:hover .frame::after,.door:focus-visible .frame::after{box-shadow:inset 0 0 0 6px var(--signal)}
.door:hover .label,.door:focus-visible .label{background:var(--signal)}
.door:hover .label *,.door:focus-visible .label *{color:var(--white)}

/* ---------- the cover: the subject, not a link (no hover) ---------- */
.cover{position:relative;aspect-ratio:1;background:#0d0909;overflow:hidden}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- listen placard (the Wall's) ---------- */
.listen{padding:16px 16px 18px;display:flex;flex-direction:column;justify-content:center}
.kick{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ember);margin-bottom:12px}
.svc{display:flex;flex-wrap:wrap;column-gap:.1em;row-gap:4px;font:700 clamp(26px,7.4vw,36px)/1.05 var(--display);text-transform:uppercase}
.svc li:not(:last-child)::after{content:"/";color:var(--signal);margin:0 .22em 0 .24em;font-weight:900}
.svc a{color:var(--bone);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:3px;text-underline-offset:5px;transition:color .18s,text-decoration-color .18s}
.svc a:hover,.svc a:focus-visible{color:var(--ember);text-decoration-color:var(--signal)}
.listen .soon{font:400 13px/1.4 var(--mono);color:var(--ash)}

/* ---------- tracklist rows: the wall label without its frame ---------- */
.rows{display:flex;flex-direction:column;gap:3px}
.row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:5px;padding:12px 14px 13px;background:var(--tile);color:var(--bone);transition:background-color .22s ease}
.row .no{flex:none;min-width:1.9em;font:500 11px/1 var(--mono);color:var(--ember);letter-spacing:.06em}
.row .t{flex:1 1 0;min-width:0;font:700 21px/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em;overflow-wrap:break-word}
.row .s{flex:0 1 auto;min-width:0;font:400 12px/1.25 var(--mono);color:var(--ash);overflow-wrap:anywhere}
.row .go{flex:none;margin-left:auto;font:500 14px/1 var(--mono);color:var(--ember)}
a.row:hover,a.row:focus-visible{background:var(--signal)}
a.row:hover *,a.row:focus-visible *{color:var(--white)}
.rows.wide .t{flex:1 0 calc(100% - 40px)}
.rows.wide .s{flex:1 1 60%;min-width:0;overflow-wrap:anywhere}
.section-h{margin-bottom:10px}

/* ---------- letters (Singles, A-Z) ---------- */
.groups{display:flex;flex-direction:column;gap:22px}
.group{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.letter{font:900 60px/.8 var(--display);color:var(--ember);text-transform:uppercase;scroll-margin-top:16px}
.jump,.pager{display:flex;flex-wrap:wrap;gap:4px}
.jump a,.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;background:var(--ink);color:var(--bone);transition:background-color .18s,color .18s}
.jump a{font:700 22px/1 var(--display);text-transform:uppercase}
.pager a,.pager span{font:500 13px/1 var(--mono);letter-spacing:.06em}
.jump a:hover,.jump a:focus-visible,.pager a:hover,.pager a:focus-visible{background:var(--signal);color:var(--white)}
.pager [aria-current]{background:var(--signal);color:var(--white)}
.side{padding:16px 16px 18px}

/* ---------- the song page ---------- */
.s-main,.s-side{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.lyr{padding:20px 18px 26px}
.lyrics{white-space:pre-wrap;overflow-wrap:break-word;font:400 15px/1.6 var(--mono);color:var(--bone);max-width:60ch;tab-size:4}
.lyrics .ln{display:block;padding-left:1.5em;text-indent:-1.5em}
.lyrics .tag{font:500 12px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ember)}
.embed{padding:16px 16px 18px}
.embed iframe{display:block;width:100%;height:152px;border:0;border-radius:12px;background:#0d0909}
.pn{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
.pn .row{flex-wrap:wrap}
.pn .dir{flex:1 0 100%;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ember)}
.pn .s{flex:1 1 100%}
.from .kick{margin:14px 0 10px}
.d-from{flex-direction:row;align-items:stretch}
.d-from .frame{flex:0 0 40%;aspect-ratio:1}
.d-from .label{flex:1 1 0;align-content:center}
.d-from .label .s{padding-left:0}
/* the song page's cover (M1.1): its release's art beside the plate, hung as the door to the album; phone: a row under the plate */
.s-cover .label .t{font-size:20px}
.s-top{display:contents}

/* ---------- the album page ---------- */
.a-side,.a-main{display:contents}
.album .plate{order:1}.album .cover{order:2}.album .listen{order:3}.album .tracks{order:4}
.more{margin-top:calc(var(--gap) * 5)}
.d-more .door:nth-child(1),.d-more .door:nth-child(6){display:none}

/* ---------- the close: the wall ends on red, the way it opens (the Wall's, unchanged) ---------- */
.end{position:relative;margin-top:calc(var(--gap) * 6);background:var(--signal);color:var(--onred);overflow:hidden;container-type:inline-size}
.end-in{position:relative;width:min(100% - 2*var(--gut), 1400px);margin:0 auto;padding:18px 0 22px}
.end-h{font:900 calc((100vw - 2*var(--gut) - 20px) / 4.78)/.8 var(--display);font-size:min(calc((100cqw - 2*var(--gut)) / 4.78), calc(1400px / 4.78));text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;margin-bottom:.2em}
.end-foot{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font:400 12px/1.4 var(--mono);color:var(--white);letter-spacing:.04em}
.end-foot a{color:var(--white);text-decoration:underline;text-decoration-color:var(--onred);text-decoration-thickness:2px;text-underline-offset:4px}
.end-foot a:hover{color:var(--onred)}
.end a:focus-visible{outline-color:var(--white)}

/* ---------- desktop (the Wall's one breakpoint) ---------- */
@media (min-width:820px){
  :root{--gut:24px;--gap:10px;--cell:calc((min(100vw - 2*var(--gut), 1400px) - 5*var(--gap)) / 6)}
  .mast .wrap{padding:13px 0 12px}
  .mast .home{font-size:46px}
  .mast .sect{font-size:13px}
  .crumb{margin-top:14px}
  .crumb+.page{margin-top:14px}
  .plate{padding:26px 30px 24px}
  .listen,.side,.embed{padding:22px 30px 24px}
  .svc{font-size:clamp(26px,calc(var(--cell) * .16),38px)}
  .label{padding:12px 16px 13px}
  .label .t{font-size:24px}
  .label .s{padding-left:calc(1.21em + 10px)}
  .doors{grid-template-columns:repeat(6,minmax(0,1fr))}
  .doors>.idx-plate{grid-column:1/4;grid-row:1/3}
  .doors>.idx-listen{grid-column:1/4;grid-row:3/4}
  .doors>.d-az,.doors>.d-singles{grid-column:span 3}
  .d-singles .frame,.d-az .frame{--ar:3}
  .d-singles .type .ti,.d-az .type .ti{padding:4cqw 5cqw}
  .d-singles .type .tt,.d-az .type .tt{font-size:calc(var(--fsd,10) * 1cqw)}
  .d-more .door:nth-child(1),.d-more .door:nth-child(6){display:flex}
  .row{padding:13px 18px 14px}
  .row .t{font-size:23px}
  .rows.wide .t{flex:1 1 0}
  .rows.wide .s{flex:0 1 auto;max-width:48%;text-align:right}
  .album,.song,.list{grid-template-columns:repeat(6,minmax(0,1fr));align-items:start}
  /* the album page (M1.3; Kurt Sep 28 20:10 "4. Sure"): plate + Listen beside the cover in the top row, then the tracklist
     FULL WIDTH under both (M1.2 hung it in the right column and left the left one empty below Listen). .a-main stays
     display:contents (the phone rule), so the cover and the tracklist are this grid's own cells; nothing is sticky now */
  .a-side{grid-column:1/4;grid-row:1;display:flex;flex-direction:column;gap:var(--gap)}
  .album .cover{grid-column:4/7;grid-row:1}
  .album .tracks{grid-column:1/-1;grid-row:2;margin-top:var(--gap)}
  .album .plate{min-height:calc(var(--cell) * 2 + var(--gap))}
  .has-cover .a-side{min-height:calc(var(--cell) * 3 + var(--gap) * 2)}
  .has-cover .a-side .plate{flex:1 0 auto;min-height:0}
  /* no cover (none today; the fixture shows it): plate and Listen share the top row, 4 cells + 2, like the list pages */
  .album:not(.has-cover) .a-side{grid-column:1/-1;flex-direction:row;align-items:stretch}
  .album:not(.has-cover) .a-side .plate{flex:0 0 calc(var(--cell) * 4 + var(--gap) * 3)}
  .album:not(.has-cover) .a-side .listen{flex:1 1 0;min-width:0}
  /* the song's top row (M1.2): plate + cover door + Listen in one flex row; the plate takes what the others leave and
     the Listen placard is only as wide as its links (one per line, each its own link; Kurt 18:23 "keep the player add the links") */
  .s-top{grid-column:1/-1;display:flex;gap:var(--gap);align-items:stretch;min-width:0}
  .s-plate{flex:1 1 0;min-width:0;min-height:calc(var(--cell) * 1.4)}
  .s-listen{flex:0 0 auto;width:max-content;max-width:calc(var(--cell) * 2 + var(--gap))}
  .s-listen .svc{flex-direction:column;row-gap:8px}
  .s-listen .svc li:not(:last-child)::after{content:none}
  .s-main{grid-column:1/4}
  .s-side{grid-column:4/7;position:sticky;top:var(--gut)}
  .song.no-main .s-side{grid-column:1/-1;position:static}
  .song.has-cover .s-cover{flex:0 0 var(--cell);flex-direction:column}
  .song.has-cover .s-cover .frame{flex:none}
  .song.has-cover .s-cover .label{flex:1 0 auto;align-content:flex-start}
  .song.has-cover .s-cover .label .t{flex-basis:100%;font-size:22px}
  .lyr{padding:28px 30px 34px}
  .pn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .l-plate{grid-column:1/5;align-self:stretch;min-height:calc(var(--cell) * 1.2)}
  .l-side{grid-column:5/7;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
  .groups,.list>.pn{grid-column:1/-1}
  .groups{gap:calc(var(--gap) * 3)}
  .group{grid-template-columns:minmax(0,1fr) minmax(0,5fr);gap:var(--gap)}
  .letter{font-size:clamp(56px,calc(var(--cell) * .4),96px);position:sticky;top:var(--gut);align-self:start;text-align:right;padding-right:8px}
  .end-in{padding:24px 0 26px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .door:hover .frame img,.door:focus-visible .frame img{transform:none}
}