:root { --clay:#e48a44; --ink:#1c100d; --rule:rgb(28 16 13 / .3); --reader-gap:48px; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--clay); color:var(--ink); }
body { font-family:"Cardo",Georgia,serif; font-size:clamp(18px,1.35vw,21px); line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-shell { max-width:1120px; margin:auto; padding:32px; }
.reader-window { width:100%; margin:auto; }
.note-page { max-width:700px; }
.credits-page { max-width:820px; }
.reader-controls { display:flex; justify-content:center; align-items:center; gap:28px; width:100%; margin:24px auto 0; }
.reader-controls a { display:flex; align-items:center; justify-content:center; width:48px; height:44px; font-size:28px; line-height:1; text-decoration:none; transition:transform 180ms ease, opacity 180ms ease; }
.reader-controls a[aria-disabled="true"] { opacity:.2; cursor:default; pointer-events:none; }
.reader-controls .previous:hover { transform:translateX(-3px); }
.reader-controls .next:hover { transform:translateX(3px); }
a:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.skip-link { position:absolute; left:24px; top:12px; z-index:10; background:var(--ink); color:var(--clay); padding:8px 12px; transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
footer { display:flex; justify-content:space-between; gap:10px; margin-top:20px; font-size:12px; }
footer a { text-decoration:none; padding:6px 0; opacity:.75; }
footer a:hover { text-decoration:underline; }
.hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); grid-template-rows:auto 1fr; align-content:center; gap:0 56px; margin:0; }
.hero-front { display:contents; }
.hero picture { grid-column:1; grid-row:1/3; align-self:start; display:block; width:100%; }
.cover { display:block; width:100%; height:auto; aspect-ratio:1; }
.head { text-align:center; grid-column:2; grid-row:1; padding-top:var(--name-inset,56px); }
.name { margin:0; font-size:clamp(26px,2.4vw,34px); font-weight:700; letter-spacing:.22em; padding-left:.22em; line-height:1.3; text-transform:uppercase; }
.date { display:block; margin-top:8px; font-size:14px; letter-spacing:.12em; text-transform:uppercase; }
.actions { grid-column:2; grid-row:2; margin-top:26px; display:grid; align-content:start; gap:10px; text-align:center; }
.btn { display:block; padding:13px 16px; border:1px solid var(--ink); border-radius:2px; font-size:14px; font-weight:700; letter-spacing:.14em; text-decoration:none; text-transform:uppercase; transition:background-color 180ms ease,transform 180ms ease; break-inside:avoid; }
.btn small { display:block; margin-top:3px; font-size:15px; line-height:1.4; font-weight:400; font-style:italic; letter-spacing:0; text-transform:none; }
.primary { background:var(--ink); color:var(--clay); }
@media (hover:hover) { .btn:hover { transform:translateY(-2px); } .primary:hover { background:#382018; } .secondary:hover { background:rgb(28 16 13 / .07); } }
.note { margin:0; }
.note p { margin:0 0 20px; text-wrap:pretty; orphans:3; widows:3; }
.note b { font-weight:700; letter-spacing:.04em; }
.note-ending { display:contents; }
.sig { display:block; height:44px; max-width:100%; width:auto; margin:28px auto 0; color:var(--ink); overflow:visible; break-inside:avoid; }
.label { font-size:13px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; }
.tl { display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.side { break-inside:avoid; }
.side .label { display:block; margin:0 0 24px; padding-top:0; font-size:clamp(22px,1.65vw,26px); font-weight:700; letter-spacing:.18em; line-height:1.3; break-after:avoid; }
.trk { margin:0 0 24px; padding-left:34px; break-inside:avoid; }
.trk .t { position:relative; font-size:clamp(18px,1.4vw,22px); font-weight:700; line-height:1.35; text-wrap:pretty; }
.trk .t i { position:absolute; left:-34px; top:3px; font-style:normal; font-size:13px; font-weight:400; }
.trk .sub { margin-top:3px; font-style:italic; font-size:clamp(16px,1.1vw,18px); }
.trk .w, .trk .l { margin-top:4px; font-size:clamp(14px,1vw,16px); line-height:1.5; }
.credits { margin:0; }
.credits dl { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.credits dl > div:last-child { grid-column:1/-1; }
.credits .label { display:block; margin-bottom:5px; }
.credits dd { margin:0; }
.rights { margin-top:28px; padding-top:20px; border-top:1px solid var(--rule); font-size:14px; line-height:1.6; break-inside:avoid; }
.reader-ready, .reader-ready body { height:100%; overflow:hidden; overscroll-behavior:none; }
.reader-ready .site-shell { height:100svh; height:100dvh; display:grid; grid-template-rows:minmax(0,1fr) 44px auto; gap:10px; padding:max(28px,env(safe-area-inset-top)) max(32px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(32px,env(safe-area-inset-left)); }
.reader-ready .reader-window { height:100%; overflow:hidden; min-height:0; align-self:center; touch-action:pinch-zoom; outline-offset:0; }
.reader-ready .reader-flow { height:var(--reader-height,100%); width:100%; column-width:var(--column-width); column-gap:var(--reader-gap); column-fill:auto; transform:translate3d(var(--reader-offset,0px),var(--reader-y,0px),0); transition:transform 200ms ease; }
.reader-boot .reader-window, .reader-boot .reader-controls { visibility:hidden; }
.reader-ready .reader-controls, .reader-ready footer { margin-top:0; }
.reader-ready .hero { height:var(--reader-height); align-content:start; }
.reader-ready .hero picture { max-width:var(--cover-size); justify-self:center; }
.reader-ready .main-split .hero { display:block; }
.reader-ready .main-split .hero-front { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; height:var(--reader-height); break-after:column; }
.reader-ready .main-split .hero picture { grid-row:1; }
.reader-ready .main-split .actions { width:100%; max-width:420px; margin:0 auto; }
.reader-ready .tracklist-page .tl { display:contents; }
.reader-ready .has-spread .side + .side { break-before:column; }
.reader-ready .tracklist-page:not(.has-spread) .side + .side { margin-top:32px; }
.reader-ready .credits dl { display:block; }
.reader-ready .credits dl > div { display:inline-block; width:calc(50% - 18px); vertical-align:top; margin:0 24px 24px 0; break-inside:avoid; }
.reader-ready .credits dl > div:nth-child(2) { margin-right:0; }
.reader-ready .credits dl > div:last-child { width:100%; margin-right:0; }
.reader-ready .reader-flow.is-measuring { transition:none; }
.reader-ready .reader-flow.is-sizing { column-width:auto; height:auto; }
.reader-ready .is-sizing .hero { height:auto; }
.reader-ready .allow-split { break-inside:auto!important; }
.reader-ready .credits dl > div.allow-split { display:block; }
.reader-ready .single-screen .reader-flow { height:auto; columns:auto; }
.reader-ready .single-screen .hero { height:auto; }
.reader-ready .single-screen.note-page .note { font-size:calc(18px * var(--page-fit,1)); line-height:1.35; }
.reader-ready .single-screen.note-page .note p { margin:0 0 10px; }
.reader-ready .single-screen.note-page .sig { height:28px; margin-top:8px; }
.reader-ready .single-screen.tracklist-page { --track-gap:10px; --side-gap:16px; --side-label-gap:10px; }
.reader-ready .single-screen.tracklist-page .tl { display:block; }
.reader-ready .single-screen.has-spread .tl { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.reader-ready .single-screen.tracklist-page .side + .side { margin-top:var(--side-gap); }
.reader-ready .single-screen.has-spread .side + .side { margin-top:0; }
.reader-ready .single-screen .side .label { font-size:calc(20px * var(--page-fit,1)); line-height:1.2; margin-bottom:var(--side-label-gap); }
.reader-ready .single-screen .trk { margin-bottom:var(--track-gap); padding-left:28px; }
.reader-ready .single-screen .trk .t { font-size:calc(17px * var(--page-fit,1)); line-height:1.2; }
.reader-ready .single-screen .trk .t i { font-size:calc(12px * var(--page-fit,1)); left:-28px; }
.reader-ready .single-screen .trk .sub { font-size:calc(14px * var(--page-fit,1)); line-height:1.3; margin-top:2px; }
.reader-ready .single-screen .trk .w, .reader-ready .single-screen .trk .l { font-size:calc(13px * var(--page-fit,1)); line-height:1.3; margin-top:2px; }
.reader-ready .single-screen .credits { font-size:calc(18px * var(--page-fit,1)); }
.reader-ready .single-screen .credits .label { font-size:calc(13px * var(--page-fit,1)); }
.reader-ready .single-screen .credits .rights { font-size:calc(13px * var(--page-fit,1)); }
@media (max-height:600px) {
  .reader-ready .single-screen.tracklist-page { --track-gap:5px; --side-gap:8px; --side-label-gap:7px; }
}
@media (max-width:760px), (max-width:900px) and (orientation:portrait) {
  .site-shell { padding:24px; }
  .hero { display:flex; flex-direction:column; align-items:center; gap:18px; }
  .hero-front { display:flex; flex-direction:column; align-items:center; gap:18px; width:100%; }
  .hero picture { width:100%; max-width:420px; align-self:center; }
  .head { padding-top:0; width:100%; }
  .name { font-size:25px; letter-spacing:.22em; }
  .date { font-size:13px; }
  .actions { width:100%; max-width:420px; margin-top:0; gap:8px; }
  .btn { padding:11px 12px; font-size:13px; letter-spacing:.12em; }
  .btn small { font-size:14px; }
  .tl { display:block; }
  .side + .side { margin-top:36px; }
  .reader-ready .site-shell { padding:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); gap:4px; }
  .reader-ready .hero { gap:18px; justify-content:center; }
  .reader-ready .hero picture { flex:none; width:var(--cover-size); }
  .reader-ready .main-split .hero { display:block; }
  .reader-ready .main-split .hero-front { display:flex; gap:18px; justify-content:center; }
  .reader-ready .main-split .actions { padding-top:min(30px,3vh); }
  .reader-ready .side { break-inside:auto; }
  .reader-ready .note p { break-inside:avoid; }
  .reader-ready .note-ending { display:block; break-inside:avoid; }
  .reader-ready .side + .side { margin-top:0; }
  .reader-ready .credits dl > div { display:block; width:100%; margin:0 0 16px; }
  .reader-ready .credits dl > div:nth-child(-n+2) { display:inline-block; width:calc(50% - 12px); vertical-align:top; }
  .reader-ready .credits dl > div:first-child { margin-right:18px; }
  .reader-ready .credits .rights { margin-top:20px; padding-top:16px; font-size:13px; }
  .reader-ready .single-screen .hero, .reader-ready .single-screen .hero-front { gap:12px; }
  .reader-ready .single-screen .btn { padding-top:8px; padding-bottom:8px; }
}
@media (max-width:380px) {
  .reader-ready .site-shell { padding-left:18px; padding-right:18px; }
  .name { font-size:23px; }
  footer { font-size:11px; }
}
@media (min-width:761px) and (max-height:480px) {
  .reader-ready .credits dl > div { margin-bottom:16px; }
  .reader-ready .credits .rights { margin-top:16px; padding-top:14px; }
}
@media (orientation:landscape) and (max-height:600px) {
  .reader-ready .single-screen.main-page .hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; gap:0 20px; }
  .reader-ready .single-screen .hero-front { display:contents; }
  .reader-ready .single-screen .hero picture { grid-column:1; grid-row:1/3; align-self:center; }
  .reader-ready .single-screen .head { grid-column:2; grid-row:1; padding-top:var(--name-inset,0); }
  .reader-ready .single-screen .name { font-size:22px; }
  .reader-ready .single-screen .date { margin-top:5px; font-size:12px; }
  .reader-ready .single-screen .actions { grid-column:2; grid-row:2; width:100%; margin-top:10px; gap:6px; }
  .reader-ready .single-screen .btn { padding:5px 8px; font-size:12px; line-height:1.3; }
  .reader-ready .single-screen .btn small { font-size:12px; line-height:1.25; }
}
@media (prefers-reduced-motion:reduce) {
  @view-transition { navigation:none; }
  .reader-ready .reader-flow, .btn, .reader-controls a { transition:none; }
  .btn:hover, .reader-controls a:hover { transform:none; }
}
@media print {
  .reader-ready, .reader-ready body { height:auto; overflow:visible; }
  .reader-ready .site-shell { display:block; height:auto; }
  .reader-ready .reader-window { height:auto; overflow:visible; }
  .reader-ready .reader-flow { height:auto; columns:auto; transform:none; }
  .reader-controls, footer, .skip-link { display:none; }
}