/* SKRH / After Hours. The approved logo remains untouched. */
:root { color-scheme:dark; --surface:#090909; --ink:#f2eee5; --orange:#f2a000; --muted:#aaa69e; --line:#353430; --ease:cubic-bezier(.2,.75,.25,1); font-family:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--surface); color:var(--ink); }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; border:0; cursor:pointer; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:focus-visible,a:focus-visible { outline:3px solid var(--orange); outline-offset:6px; }
img { display:block; max-width:100%; height:auto; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:0; left:20px; padding:14px; background:var(--orange); color:#10100f; transform:translateY(-150%); z-index:20; }
.skip-link:focus { transform:translateY(0); }
.eyebrow,.masthead-caption,.footer-name,.footer-line,.night-description,.nav-count { font-family:Menlo,Consolas,"Courier New",monospace; font-size:.75rem; line-height:1.5; letter-spacing:.07em; font-weight:400; }
.eyebrow { margin:0; }
.site-shell { max-width:1680px; min-height:100svh; position:relative; margin:auto; padding:0 4.5%; display:flex; flex-direction:column; }
.masthead { height:110px; display:flex; align-items:center; }
.brand { width:81px; height:81px; flex-shrink:0; margin-left:-12px; }
.masthead-caption { margin-left:auto; text-align:right; color:var(--muted); }
.main-nav { position:absolute; left:4.5%; top:43%; display:flex; flex-direction:column; gap:10px; z-index:2; }
.main-nav a { display:flex; align-items:baseline; justify-content:space-between; gap:18px; min-width:130px; min-height:44px; padding:10px 0; font-size:1.0625rem; }
.main-nav a:hover span:first-child { text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:7px; }
.nav-count { color:var(--muted); }
main { flex:1; display:flex; }
.home-stage { position:relative; display:grid; width:100%; grid-template-columns:1fr minmax(270px,1.9fr) 1fr; gap:0 4%; align-content:center; min-height:540px; padding:0 0 50px; }
.night-identity { grid-column:2; align-self:center; text-align:center; min-width:0; }
.night-identity img { width:100%; max-width:470px; margin:auto; }
.night-identity p { color:var(--orange); font-family:Menlo,Consolas,monospace; font-size:.875rem; line-height:1.5; letter-spacing:.2em; margin:0; }
.featured-release { grid-column:3; align-self:center; width:165px; max-width:100%; justify-self:end; margin:0; padding:0; background:transparent; text-align:left; }
.sleeve-wrap { display:block; transform:rotate(-7deg); transition:transform .45s var(--ease); }
.featured-release:hover .sleeve-wrap,.featured-release:focus-visible .sleeve-wrap { transform:rotate(3deg) translateY(-5px); }
.release-caption { display:grid; margin-top:21px; gap:8px; line-height:1.4; }
.release-caption .eyebrow { letter-spacing:.02em; }
.release-caption strong { font-size:1rem; font-weight:500; }
.release-caption .caption-artist { color:var(--muted); font-size:.875rem; }
.release-caption .catalogue-prompt { color:var(--orange); font-size:.875rem; margin-top:4px; }
.night-description { grid-column:2; text-align:center; margin:36px 0 0; color:var(--muted); }
.site-footer { min-height:88px; display:flex; justify-content:space-between; gap:25px; align-items:center; border-top:1px solid var(--line); }
.footer-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; column-gap:24px; }
.footer-links>a { font-size:.875rem; padding:14px 0; white-space:nowrap; }
.footer-links>a:hover { text-decoration:underline; text-underline-offset:5px; }
.footer-line { color:var(--muted); }

/* Each destination opens within the same one-page experience. */
.content-panel { width:min(1160px,92vw); max-width:calc(100vw - 24px); max-height:90svh; margin:auto; padding:32px 44px 44px; border:1px solid var(--line); background:var(--surface); color:var(--ink); overscroll-behavior:contain; overflow:auto; }
.content-panel::backdrop { background:#000b; backdrop-filter:blur(8px); }
.content-panel[open] { animation:panel-in .25s var(--ease); }
.panel-top { display:flex; justify-content:space-between; gap:20px; align-items:center; padding-bottom:28px; }
.close-panel { flex-shrink:0; background:transparent; display:flex; align-items:center; gap:12px; min-height:44px; padding:8px 0 8px 12px; font-size:.875rem; }
.close-panel span { font-size:1.75rem; line-height:1; }
.record-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7%; align-items:center; }
.record-cover { width:100%; }
.content-panel h2 { font-size:clamp(3.25rem,6.5vw,6.5rem); line-height:1; letter-spacing:-.055em; margin:22px 0 25px; overflow-wrap:break-word; }
.content-panel h2 em { font-family:Georgia,"Times New Roman",serif; font-weight:400; }
.artist-name { font-size:1.0625rem; line-height:1.5; }
.record-words { color:var(--muted); font-size:1rem; line-height:1.5; margin:20px 0 28px; }
.primary-link { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:19px 21px; background:var(--orange); color:#10100f; border:1px solid var(--orange); font-size:.9375rem; font-weight:600; line-height:1.4; width:fit-content; max-width:100%; transition:background .2s; }
.primary-link:hover { background:#ffb71c; }
.quiet-link { display:block; padding:16px 0; font-size:.875rem; line-height:1.5; text-decoration:underline; text-underline-offset:5px; }
/* The catalogue keeps released and forthcoming records together. */
.catalogue-panel { width:min(1060px,94vw); padding:28px 40px 32px; }
.catalogue-panel .panel-top { padding-bottom:8px; }
.catalogue-panel .catalogue-heading { font-size:clamp(2.5rem,5vw,4rem); letter-spacing:-.055em; line-height:1.04; margin:16px 0 32px; }
.release-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; align-items:stretch; }
.release-card { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto 1fr auto auto; align-content:start; }
.catalogue-cover { display:block; aspect-ratio:1; background:#171717; }
.catalogue-cover img { width:100%; height:100%; object-fit:contain; }
a.catalogue-cover { transition:transform .2s var(--ease); }
a.catalogue-cover:hover { transform:translateY(-3px); }
.release-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-family:Menlo,Consolas,monospace; font-size:.8125rem; color:var(--muted); line-height:1.5; margin:20px 0 10px; }
.release-available { color:var(--orange); }
.release-card h3 { font-family:Arial,Helvetica,sans-serif; font-size:clamp(1.5rem,2.8vw,2rem); font-style:normal; font-weight:700; line-height:1.1; letter-spacing:-.035em; margin:0 0 12px; overflow-wrap:break-word; }
.catalogue-artist { color:var(--muted); font-size:1rem; line-height:1.5; margin:0 0 22px; }
.release-action { display:flex; align-items:center; width:100%; min-height:59px; padding-top:14px; border-top:1px solid var(--line); }
.catalogue-listen,.release-forthcoming { display:inline-flex; align-items:center; min-height:44px; font-size:1rem; line-height:1.5; }
.catalogue-listen { color:var(--orange); font-weight:600; padding:0 22px 0 0; }
.catalogue-listen:hover { text-decoration:underline; text-underline-offset:5px; }
.release-forthcoming { color:var(--muted); }
.catalogue-footer { border-top:1px solid var(--line); margin-top:30px; padding-top:22px; display:flex; justify-content:space-between; align-items:center; gap:12px 24px; flex-wrap:wrap; }
.catalogue-footer p { font-size:.875rem; line-height:1.5; color:var(--muted); margin:0; }
.catalogue-footer a { font-size:.875rem; line-height:1.5; min-height:44px; display:flex; align-items:center; }
.catalogue-footer a:hover { text-decoration:underline; text-underline-offset:5px; }
.radio-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:10%; padding:20px 0; }
.radio-type>p { font-size:1rem; line-height:1.65; max-width:32ch; }
.radio-type h2 { font-size:clamp(4.5rem,8vw,8rem); }
.radio-listen { padding-top:4px; min-width:0; }
.episode-meta { display:flex; justify-content:space-between; gap:15px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.episode-number { display:block; font-size:clamp(6rem,12vw,12rem); font-weight:700; letter-spacing:-.07em; line-height:1.04; margin:14px 0; }
.radio-listen h3 { font-size:1.25rem; font-weight:500; margin:12px 0; }
.episode-date { font-family:Menlo,Consolas,monospace; color:var(--muted); font-size:.8125rem; margin:12px 0 25px; }
.player-button { width:100%; }
.player-note { color:var(--muted); font-size:.8125rem; line-height:1.5; margin:10px 0; }
.radio-platforms { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.radio-platforms a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 10px; border:1px solid var(--line); font-size:.8125rem; line-height:1.5; white-space:nowrap; transition:border-color .2s,color .2s; }
.radio-platforms a:hover { border-color:var(--orange); color:var(--orange); }
.player-slot iframe { width:100%; height:180px; border:0; display:block; }
.about-panel { max-width:850px; --about-gap:32px; }
.about-panel h2 { margin:22px 0 24px; }
.about-intro { font-size:1.25rem; line-height:1.55; margin:0; }
.about-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:var(--about-gap); margin:var(--about-gap) 0; }
.about-columns>div { min-width:0; }
.about-columns h3 { font-size:1rem; font-weight:600; line-height:1.5; margin:0 0 12px; }
.about-columns p { font-size:1rem; line-height:1.55; color:var(--muted); margin:0; }
.noscript-note { padding:25px; text-align:center; border-top:1px solid var(--line); }
.noscript-note a { text-decoration:underline; }
body:has(dialog[open]) { overflow:hidden; }
@keyframes panel-in { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }

@media(max-width:1050px) {
  .featured-release { width:140px; }
  .home-stage { grid-template-columns:.8fr 1.8fr .8fr; }
}
@media(max-width:760px) {
  .site-shell { padding:0 6%; }
  .masthead { height:72px; }
  .masthead .brand,.masthead-caption { display:none; }
  .main-nav { position:static; margin-left:auto; flex-direction:row; gap:25px; }
  .main-nav a { min-width:0; font-size:.9375rem; }
  .nav-count { display:none; }
  .home-stage { grid-template-columns:minmax(0,1fr); min-height:0; padding:10px 0 40px; }
  .night-identity { grid-column:1; }
  .night-identity img { width:94%; max-width:370px; }
  .night-identity p { margin:-10px 0 23px; font-size:.8125rem; letter-spacing:.18em; }
  .featured-release { grid-column:1; justify-self:center; width:auto; max-width:340px; display:flex; align-items:center; padding:0 5px; margin:28px 0 0; gap:25px; }
  .featured-release .sleeve-wrap { width:88px; flex-shrink:0; }
  .release-caption { margin:0; }
  .night-description,.footer-line { display:none; }
  .site-footer { min-height:85px; flex-wrap:wrap; gap:10px; padding:15px 0; }
  .content-panel { width:94vw; max-height:94svh; padding:22px; }
  .panel-top { padding-bottom:18px; gap:10px; }
  .record-layout,.radio-layout { grid-template-columns:minmax(0,1fr); gap:27px; }
  .record-cover { width:75%; max-width:400px; margin:0 auto; }
  .record-information h2 { font-size:3.5rem; }
  .catalogue-panel { padding:22px; }
  .catalogue-panel .catalogue-heading { font-size:2.75rem; margin:14px 0 26px; }
  .release-grid { grid-template-columns:minmax(0,1fr); gap:38px; }
  .release-card h3 { font-size:2rem; }
  .catalogue-artist { margin-bottom:18px; }
  .release-meta { margin-top:18px; }
  .catalogue-footer { margin-top:28px; gap:8px; }
  .radio-layout { padding-top:0; }
  .radio-type h2 { font-size:4.5rem; margin-top:0; margin-bottom:17px; }
  .radio-type>p { max-width:none; }
  .radio-type { border-top:1px solid var(--line); padding-top:22px; }
  .episode-number { font-size:7rem; }
  .about-panel { --about-gap:24px; }
  .about-columns { grid-template-columns:minmax(0,1fr); }
  .about-panel h2 { font-size:3.3rem; }
  .about-intro { font-size:1.125rem; }
}
@media(max-width:360px) { .main-nav { gap:20px; } .featured-release { gap:16px; } .release-caption .caption-artist { max-width:15ch; } .content-panel { padding:18px; } .catalogue-panel .catalogue-heading { font-size:2.5rem; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Two quiet routes into records and radio. */
.home-radio .home-stage { grid-template-columns:minmax(120px,.65fr) minmax(240px,1.55fr) minmax(220px,1fr); }
.home-highlights { grid-column:3; align-self:center; justify-self:end; width:100%; max-width:270px; display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.home-highlights .home-highlight { grid-column:1; justify-self:stretch; min-width:0; display:grid; grid-template-columns:78px minmax(0,1fr); gap:20px; align-items:center; width:100%; max-width:none; margin:0; padding:0; background:none; text-align:left; }
.home-highlights .release-caption { margin:0; gap:6px; }
.home-highlights .release-caption strong { font-size:1.0625rem; font-weight:500; }
.home-highlights .release-caption .eyebrow { font-size:.6875rem; letter-spacing:.06em; }
.home-highlights .release-caption .caption-artist { font-size:.8125rem; }
.home-highlights .release-caption .catalogue-prompt { font-size:.8125rem; margin-top:4px; }
.home-highlights .featured-radio { border-top:1px solid var(--line); padding-top:24px; }
.radio-sleeve { display:block; transform:rotate(4deg); transition:transform .45s var(--ease); }
.featured-radio:hover .radio-sleeve,.featured-radio:focus-visible .radio-sleeve { transform:rotate(-2deg) translateY(-3px); }
.radio-prompt { color:var(--orange); font-size:.875rem; margin-top:4px; text-decoration:underline; text-underline-offset:5px; }
@media(max-width:760px) {
  .home-radio .masthead { height:62px; }
  .home-radio .home-stage { grid-template-columns:minmax(0,1fr); padding:0 0 30px; }
  .home-radio .night-identity img { width:82%; max-width:290px; }
  .home-radio .night-identity p { margin:-4px 0 30px; }
  .home-highlights { grid-column:1; justify-self:center; width:100%; max-width:340px; gap:22px; }
  .home-highlights .home-highlight { grid-template-columns:76px minmax(0,1fr); gap:24px; padding:0 6px; }
  .home-highlights .featured-release .sleeve-wrap { width:76px; }
  .home-highlights .featured-radio { padding-top:22px; }
  .home-highlights .release-caption .eyebrow { font-size:.75rem; }
  .home-highlights .release-caption strong { font-size:1.0625rem; }
  .home-radio .site-footer { min-height:76px; }
}