@font-face {
  font-family: "Bodoni Moda";
  src: url("./assets/fonts/bodoni-moda-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bodoni Moda";
  src: url("./assets/fonts/bodoni-moda-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("./assets/fonts/barlow-condensed-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("./assets/fonts/barlow-condensed-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #090b0a;
  --ink-deep: #060807;
  --ink-raised: #151715;
  --copper: #bc7f4c;
  --copper-pale: #d2a36d;
  --olive: #66684d;
  --olive-dark: #363e31;
  --paper: #c7b392;
  --cream: #d9c39f;
  --rust: #743b2f;
  --rust-deep: #4d251f;
  --muted: #817967;
  --line: rgba(191, 130, 80, 0.52);
  --line-soft: rgba(205, 161, 108, 0.18);
  --stage-width: 1728px;
  --stage-height: 1024px;
  --stage-page-height: 1560px;
  --stage-scale: 1;
  --stage-render-width: 1728px;
  --stage-render-height: 1024px;
  --stage-render-page-height: 1560px;
  --stage-inline-gutter: 0px;
  --stage-block-gutter: 0px;
  --stage-render-block-gutter: 0px;
  --display: "Bodoni Moda", Didot, serif;
  --condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--ink);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  padding-top: var(--stage-render-block-gutter);
  overflow-x: hidden;
  color: var(--cream);
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 50% 18%, rgba(166, 108, 66, 0.035), transparent 30%),
    linear-gradient(101deg, rgba(255, 255, 255, 0.009), transparent 26%),
    url("./assets/textures/dark-paper.png");
  background-size: auto, auto, 320px 320px;
  font-family: var(--sans);
  font-size: 14px;
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }

.desktop-stage-frame {
  position: relative;
  z-index: 3;
  width: var(--stage-render-width);
  height: var(--stage-render-page-height);
  margin-inline: auto;
}

.site-shell {
  position: relative;
  width: var(--stage-width);
  height: var(--stage-page-height);
  overflow: visible;
  transform: scale(var(--stage-scale));
  transform-origin: left top;
}

.paper-grain {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: soft-light;
  background: url("./assets/textures/dark-paper.png") repeat;
  background-size: 320px 320px;
}

.masthead {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: grid;
  grid-template-rows: 126px 52px;
  justify-items: center;
  width: 1728px;
  height: 178px;
  padding-inline: 300px;
}

.ribbon-mark {
  width: 630px;
  max-width: 100%;
  height: auto;
  align-self: start;
}

.masthead nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 35px;
  align-self: stretch;
  width: 100%;
  color: #c18f60;
  font: 500 13px/1 var(--condensed);
  letter-spacing: 0.025em;
}

.masthead nav a {
  position: relative;
  display: block;
  padding: 2px 0 10px;
  white-space: nowrap;
}

.masthead nav a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 3px;
  left: 50%;
  height: 2px;
  background: var(--copper);
  transition: left 180ms ease, right 180ms ease;
}

.masthead nav a:hover::after,
.masthead nav a.active::after { right: 0; left: 0; }

.masthead nav a:focus-visible,
.section-heading > a:focus-visible,
.time-machine a:focus-visible { outline: 1px solid var(--copper-pale); outline-offset: 5px; }

.duty-corner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 6;
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-content: start;
  width: 270px;
  height: 170px;
  padding: 24px 4px 0 101px;
  color: #d0aa83;
  background: url("./assets/ui/corner-panel.png") 100% 0 / 100% 100% no-repeat;
  pointer-events: none;
  transform: translate(var(--stage-inline-gutter), calc(-1 * var(--stage-block-gutter)));
}

.duty-corner strong { font: 500 34px/0.95 var(--condensed); font-variant-numeric: tabular-nums; }
.duty-corner span { margin-top: 7px; font: 9px/1 var(--condensed); letter-spacing: 0.15em; }
.duty-corner small { margin-top: 9px; font: 8px/1 var(--condensed); letter-spacing: 0.08em; }

.rail-kicker {
  position: absolute;
  top: 32px;
  left: 4px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 108px;
  margin: 0;
  padding: 8px 0;
  color: var(--copper-pale);
  font: 10px/1.42 var(--condensed);
  letter-spacing: 0.26em;
  transform: rotate(-14deg);
}

.rail-kicker::before,
.rail-kicker::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 106px;
  height: 1px;
  background: var(--copper);
  transform: translateX(-50%);
}

.rail-kicker::before { top: 0; }
.rail-kicker::after { bottom: 0; }

.brand-rail {
  position: absolute;
  top: 178px;
  left: 22px;
  width: 370px;
  height: 1180px;
  border-right: 1px solid rgba(188, 127, 76, 0.28);
}

.brand-lockup {
  position: absolute;
  top: 4px;
  left: 0;
  width: 370px;
}

.wordmark {
  width: 370px;
  height: auto;
  filter: drop-shadow(0 1px 0 rgba(245, 181, 109, 0.12));
}

.est-mark {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  margin-top: -52px;
  color: #b09a7b;
  border: 1px solid rgba(191, 130, 80, 0.58);
  border-radius: 50%;
  font: 9px/1.4 var(--condensed);
  letter-spacing: 0.08em;
  text-align: center;
}

.brand-copy {
  margin: 24px 0 0;
  color: #d0aa7c;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 500;
  letter-spacing: 0.045em;
}

.brand-note { margin: 7px 0 0; color: #a98d6b; font-size: 12px; letter-spacing: 0.06em; }

.live-ticket {
  position: absolute;
  top: 318px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 340px;
  height: 84px;
  padding: 0 20px 0 25px;
  color: #171713;
  background: url("./assets/ui/live-ticket.png") center / 100% 100% no-repeat;
  transition: transform 180ms ease, filter 180ms ease;
}

.live-ticket:hover { transform: translateX(4px); filter: brightness(1.045); }
.live-ticket:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.live-ticket > span { display: flex; align-items: center; gap: 31px; }
.live-ticket b { font: 700 16px/0.98 var(--condensed); letter-spacing: 0.11em; }
.live-ticket small { font-size: 12px; font-weight: 600; }
.live-ticket i { display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid currentColor; border-radius: 50%; }
.live-ticket i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transform: translateX(1px); }

.music-card {
  position: absolute;
  top: 422px;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  width: 326px;
  height: 160px;
  margin: 0;
  padding: 21px 18px 17px 32px;
  color: #28241d;
  background: url("./assets/ui/music-card-paper.png") center / 100% 100% no-repeat;
}

.music-card b { display: block; font: 600 16px/1 var(--condensed); letter-spacing: 0.1em; }
.music-card strong { font-size: 11px; }
.music-card p { margin: 9px 0 6px; font-size: 10px; line-height: 1.5; }
.music-card label { display: block; font: 10px/1 var(--condensed); letter-spacing: 0.07em; }
.uid-row { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.uid-row input { width: 76px; padding: 2px 0; color: #27231d; background: transparent; border: 0; border-bottom: 1px solid rgba(38, 33, 26, 0.45); outline: none; font-size: 10px; }
.uid-row input:focus { border-bottom-color: #2d281f; }
.uid-row button { padding: 0; color: #2d281f; background: none; border: 0; font-size: 10px; font-weight: 700; }
.music-card-device { align-self: center; justify-self: end; display: grid; place-items: center; width: 58px; height: 91px; border: 1px solid rgba(52, 47, 38, 0.6); border-radius: 3px; }
.music-card-device svg { width: 43px; height: 63px; fill: none; stroke: #51493b; stroke-width: 1; }
.music-card-device small { margin-top: -11px; padding: 2px 4px; color: #c0ae8e; background: #3f3a30; font: 5px/1 var(--condensed); letter-spacing: 0.12em; }

.rail-notice-row { position: absolute; top: 600px; left: 74px; width: 250px; height: 100px; }
.notice-stamp {
  position: absolute;
  top: 0;
  right: 0;
  width: 207px;
  height: 110px;
  padding: 23px 47px 16px 28px;
  color: #c6aa82;
  background: url("./assets/ui/notice-ticket.png") center / 100% 100% no-repeat;
  transform: rotate(-3.5deg);
}
.notice-stamp b { display: inline-block; padding: 2px 7px; color: #171714; background: #b86847; font: 9px/1.2 var(--condensed); letter-spacing: 0.1em; }
.notice-stamp p { margin: 7px 0 0; font-size: 11px; line-height: 1.5; }
.notice-stamp > span { position: absolute; top: 29px; right: 24px; color: #d1ad78; }
.notice-stamp svg { width: 24px; height: 24px; fill: currentColor; }

.sponsor-plaque {
  position: absolute;
  top: 728px;
  left: 0;
  width: 330px;
  height: 112px;
  padding: 14px 23px 10px;
  color: #cbb88c;
  background-color: transparent;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 8px 13px rgba(0, 0, 0, 0.22));
}

.plaque-heading { display: flex; align-items: center; justify-content: center; gap: 12px; transform: translateY(4px); }
.plaque-heading h2 { margin: 0; font: 600 14px/1 var(--sans); letter-spacing: 0.08em; }
.plaque-heading span { color: #a88455; font-size: 8px; }
.sponsor-plaque ul { display: flex; justify-content: center; gap: 9px; margin: 11px 0 0; padding: 0; list-style: none; }
.sponsor-plaque li { position: relative; }
.sponsor-avatar { display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; color: #d5bf94; background: radial-gradient(circle at 35% 28%, #766b53, #292d25 68%); border: 1px solid #c2935f; border-radius: 50%; box-shadow: 0 0 0 2px #2b3027, 0 0 0 3px rgba(197, 157, 94, 0.42), 0 3px 8px rgba(0, 0, 0, 0.42); font: 600 14px/1 var(--condensed); }
.sponsor-avatar > span { transform: translateY(-1px); }
.sponsor-avatar img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) sepia(0.08) contrast(1.04); }
.sponsor-plaque li b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sponsor-plaque > small { position: absolute; right: 23px; bottom: 7px; color: #958d70; font: 7px/1 var(--condensed); letter-spacing: 0.06em; }

.suggestion-box {
  position: absolute;
  top: 862px;
  left: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 286px;
  height: 106px;
  padding: 28px 49px 12px 69px;
  color: #cf9e7e;
  text-align: left;
  background-color: transparent;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 0;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.3));
  transition: transform 160ms ease, filter 160ms ease;
}
.suggestion-box:hover { transform: translateY(-2px) rotate(-0.35deg); filter: brightness(1.08) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.3)); }
.suggestion-box:focus-visible { outline: 2px solid #d7b18d; outline-offset: 4px; }
.suggestion-copy { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 9px; min-width: 0; padding-left: 0; }
.suggestion-copy b { font-size: 14px; letter-spacing: 0.12em; }
.suggestion-copy small { color: #ab705c; font: 9px/1 var(--condensed); letter-spacing: 0.1em; }
.suggestion-copy em { grid-column: 1 / -1; margin-top: 6px; color: #b77f65; font-size: 9px; font-style: normal; }
.suggestion-box > i { position: absolute; right: 16px; bottom: 15px; display: grid; place-items: center; width: 28px; height: 28px; color: #4b251f; background: transparent; border-radius: 50%; font-style: normal; }
.suggestion-box > i > span { transform: translate(1px, -1px); }

.vinyl-clip {
  position: absolute;
  left: calc(-1 * var(--stage-inline-gutter));
  bottom: 0;
  z-index: 2;
  width: 200px;
  height: 315px;
  overflow: hidden;
  pointer-events: none;
}

.vinyl-edge {
  position: absolute;
  left: -8px;
  bottom: -118px;
  width: 236px;
  height: auto;
  opacity: 0.84;
  clip-path: circle(54% at 31% 35%);
  filter: none;
}

.rail-copyright { position: absolute; top: 987px; left: 104px; margin: 0; color: #a08c69; font: 10px/1 var(--condensed); letter-spacing: 0.08em; }

.main-stage {
  position: absolute;
  top: 178px;
  left: 446px;
  width: 1236px;
}

.lead-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; min-width: 0; }
.news-section, .history-section { min-width: 0; }

.section-heading {
  display: flex;
  align-items: center;
  height: 58px;
  color: #c39a6d;
}

.section-no {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  margin-right: 15px;
  color: var(--copper);
  border: 1px solid rgba(191, 130, 80, 0.66);
  border-radius: 50%;
  font: 500 21px/1 var(--condensed);
}
.section-no > span { transform: translateY(-1px); }

.section-heading > div { display: flex; align-items: baseline; gap: 15px; min-width: 0; }
.section-heading h2 { margin: 0; color: #c5a57a; font-size: 20px; line-height: 1; font-weight: 600; letter-spacing: 0.08em; white-space: nowrap; }
.section-heading small { color: #9b937b; font: 500 11px/1 var(--condensed); letter-spacing: 0.1em; white-space: nowrap; }
.section-heading > i { flex: 1; height: 1px; margin: 0 16px; background: linear-gradient(90deg, var(--line-soft), var(--line)); }
.section-heading > a { display: flex; align-items: center; gap: 8px; color: #bd9067; font: 11px/1 var(--condensed); letter-spacing: 0.07em; }
.section-heading > a span { font-size: 18px; }
.section-heading.compact > div { display: block; }
.section-heading.compact h2 { color: #3a3026; font-size: 15px; }
.section-heading.compact small { display: block; margin-top: 6px; color: #655343; }
.section-heading.compact .section-no { margin-right: 11px; color: #5f4633; border-color: rgba(62, 47, 35, 0.66); }

.news-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 10px; height: 300px; }
.news-card { position: relative; display: block; min-width: 0; overflow: hidden; border: 1px solid rgba(191, 130, 80, 0.38); border-radius: 7px; background: var(--ink-raised) url("./assets/textures/dark-paper.png") repeat; background-size: 320px 320px; transition: border-color 160ms ease, transform 160ms ease, filter 160ms ease; }
.news-card:hover { border-color: rgba(202, 153, 99, 0.68); filter: brightness(1.05); transform: translateY(-2px); }
.news-card:focus-visible { outline: 2px solid var(--copper-pale); outline-offset: 3px; }
.editorial-thumb { position: relative; min-width: 0; overflow: hidden; background: #292a25; }
.editorial-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) contrast(1.05) brightness(0.82); transition: transform 350ms ease; }
.news-card:hover .editorial-thumb img { transform: scale(1.025); }
.editorial-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 14, 12, 0.02), rgba(10, 11, 10, 0.42)); box-shadow: inset 0 0 0 1px rgba(226, 192, 139, 0.07), inset 0 0 28px rgba(0, 0, 0, 0.24); }
.card-meta { color: #c18b60; font: 600 10px/1 var(--condensed); letter-spacing: 0.05em; }
.card-meta b { display: inline-block; padding: 3px 6px; border: 1px solid rgba(193, 139, 96, 0.42); border-radius: 2px; }
.card-meta span { margin-left: 7px; color: #96927c; }
.news-card h3 { color: #dec49c; font-weight: 600; }
.news-card p { color: #b8b0a1; font-weight: 500; }
.news-card small { color: #bba080; font: 10px/1 var(--condensed); }
.card-arrow { display: grid; place-items: center; color: #bd8654; border: 1px solid rgba(191, 130, 80, 0.62); border-radius: 50%; }
.card-arrow svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: translate(0.5px, -0.5px); }

.news-card.featured { height: 300px; }
.news-card.featured .editorial-thumb { position: absolute; inset: 0; }
.news-card.featured .editorial-thumb::after { background: linear-gradient(180deg, rgba(11, 12, 10, 0.04) 30%, rgba(13, 13, 11, 0.94) 100%), linear-gradient(90deg, rgba(106, 38, 30, 0.2), transparent 58%); }
.news-card.featured .news-copy { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 19px 21px 17px; }
.news-card.featured h3 { max-width: 92%; margin: 10px 0 7px; font: 700 25px/1.3 var(--display); }
.news-card.featured p { max-width: 88%; margin: 0 0 14px; font-size: 12px; line-height: 1.62; }
.news-card.featured .card-arrow { position: absolute; right: 17px; bottom: 16px; z-index: 3; width: 28px; height: 28px; }

.news-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 93px; gap: 10px; min-width: 0; }
.news-card.secondary { display: grid; grid-template-columns: 76px minmax(0, 1fr); height: 93px; padding: 7px; }
.news-card.secondary.no-image { grid-template-columns: 1fr; padding: 10px 11px; background-image: linear-gradient(135deg, rgba(188, 127, 76, 0.07), transparent 56%), url("./assets/textures/dark-paper.png"); }
.news-card.secondary.no-image .news-copy { padding-left: 0; }
.news-card.secondary.no-image h3 { max-width: 92%; font-size: 12.5px; }
.news-card.secondary:nth-child(odd):last-child { grid-column: 1 / -1; }
.news-card.secondary .editorial-thumb { height: 77px; border-radius: 3px; }
.news-card.secondary .news-copy { min-width: 0; padding: 0 2px 0 9px; }
.news-card.secondary .card-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-card.secondary .card-meta b { padding: 2px 4px; }
.news-card.secondary .card-meta span { display: none; }
.news-card.secondary h3 { display: -webkit-box; margin: 7px 0 0; overflow: hidden; font-size: 12.5px; line-height: 1.34; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.news-card.secondary p { display: none; }
.news-card.secondary small { position: absolute; right: 7px; bottom: 7px; }
.news-card.secondary .card-arrow { display: none; }
.news-secondary.count-3 { grid-template-rows: 93px 197px; grid-auto-rows: auto; }
.news-secondary.count-3 .news-card.secondary:last-child { grid-column: 1 / -1; grid-template-columns: 160px minmax(0, 1fr); height: 197px; }
.news-secondary.count-3 .news-card.secondary:last-child .editorial-thumb { height: 181px; }
.news-secondary.count-3 .news-card.secondary:last-child h3 { margin-top: 12px; font-size: 16px; }
.news-secondary.count-3 .news-card.secondary:last-child p { display: block; margin: 10px 0 0; font-size: 11px; line-height: 1.6; }

.paper-heading { padding: 0 13px; background: #c5b18e url("./assets/textures/kraft-paper.png") repeat; background-size: 280px 280px; border-radius: 18px 18px 0 0; }
.history-card { position: relative; height: 300px; overflow: hidden; color: #3b3025; background: #c7b392 url("./assets/textures/kraft-paper.png") repeat; background-size: 300px 300px; border-radius: 0 0 23px 19px; box-shadow: inset 0 0 28px rgba(79, 54, 34, 0.16); }
.history-card::before { content: ""; position: absolute; top: 10px; right: 9px; bottom: 12px; left: 8px; border: 1px solid rgba(79, 54, 34, 0.22); border-radius: 8px 8px 18px 12px; pointer-events: none; }
.history-copy { position: relative; z-index: 2; display: flex; flex-direction: column; width: 62%; height: 100%; padding: 28px 0 20px 23px; }
.history-copy > small { color: #6f5842; font: 9.5px/1 var(--condensed); letter-spacing: 0.09em; }
.history-card time { display: block; margin-top: 18px; color: #8b4336; font: 600 25px/1 var(--condensed); letter-spacing: 0.03em; }
.history-card h3 { display: -webkit-box; width: 158px; margin: 10px 0 8px; overflow: hidden; color: #3b2f23; font: 700 15px/1.3 var(--display); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.history-card p { display: -webkit-box; width: 156px; margin: 0; overflow: hidden; font-size: 10.5px; line-height: 1.55; font-weight: 600; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.history-card strong { display: -webkit-box; width: 156px; margin-top: 7px; overflow: hidden; color: #6d5741; font-size: 10px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.history-card a { position: static; display: flex; align-items: center; align-self: flex-start; gap: 8px; margin-top: auto; padding: 8px 13px; border: 1px solid #67513e; border-radius: 20px; font: 10.5px/1 var(--condensed); letter-spacing: 0.07em; }
.history-card a span { transform: translate(1px, -1px); }
.history-art { position: absolute; top: 41px; right: -36px; z-index: 1; width: 166px; height: 218px; overflow: hidden; border: 1px solid rgba(73, 50, 34, 0.5); border-radius: 50%; box-shadow: -10px 0 22px rgba(66, 45, 30, 0.2), 0 0 0 10px rgba(70, 54, 39, 0.08); }
.history-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(120, 79, 50, 0.12), transparent 48%), radial-gradient(circle, transparent 60%, rgba(29, 18, 12, 0.2)); }
.history-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) sepia(0.06) contrast(1.03) brightness(0.85); }
.history-art span { position: absolute; right: 55px; bottom: 13px; z-index: 2; color: #d7b78f; font: 8px/1.35 var(--condensed); text-align: right; letter-spacing: 0.08em; }

.classic-section, .liveroom-section, .last-live { margin-top: 30px; }
.classic-review { display: grid; grid-template-columns: 30% 36% 34%; height: 260px; overflow: hidden; border: 1px solid rgba(191, 130, 80, 0.42); border-radius: 8px; background: var(--ink-raised) url("./assets/textures/dark-paper.png") repeat; background-size: 320px 320px; }
.classic-copy { position: relative; z-index: 2; padding: 25px 25px 19px 27px; }
.classic-copy small { color: #a77e56; font: 10px/1 var(--condensed); letter-spacing: 0.1em; }
.classic-copy h3 { margin: 24px 0 4px; color: #d09a65; font: 700 24px/1.25 var(--display); }
.classic-copy b { color: #b9aa8a; font-size: 11.5px; font-weight: 500; }
.classic-copy p { margin: 17px 0 0; color: #b7afa0; font-size: 11.5px; line-height: 1.72; }
.classic-copy a { position: absolute; bottom: 20px; left: 27px; display: flex; align-items: center; gap: 8px; color: #c68c58; font: 10.5px/1 var(--sans); }
.classic-art { position: relative; overflow: hidden; }
.classic-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(24, 26, 23, 0.5), transparent 26%, transparent 72%, rgba(24, 26, 23, 0.42)); }
.classic-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.65) sepia(0.08) contrast(1.05) brightness(0.78); }
.time-machine { position: relative; padding: 22px 24px 18px 27px; border-left: 1px solid rgba(191, 130, 80, 0.26); }
.time-machine h3 { margin: 0 0 12px; color: #c18c5b; font: 600 12.5px/1 var(--condensed); letter-spacing: 0.08em; }
.time-machine h3 span { margin-left: 8px; color: #89836c; font: 500 9px/1 var(--sans); }
.time-machine ol { margin: 0; padding: 0; list-style: none; }
.time-machine li { display: grid; grid-template-columns: 25px minmax(0, 1fr) 118px; align-items: center; min-height: 30px; border-bottom: 1px solid rgba(191, 130, 80, 0.14); }
.time-machine li > span:first-child { color: #b67a48; font: 11px/1 var(--condensed); }
.time-machine li b { overflow: hidden; color: #c0ad8d; font: 400 13.5px/1 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.track-platform-links { display: flex; justify-content: flex-end; gap: 7px; }
.track-platform-links a { color: #928c76; font: 8.5px/1 var(--condensed); white-space: nowrap; }
.track-platform-links a:hover { color: #d1a16e; }
.monthly-platform-links { position: absolute; right: 22px; bottom: 15px; display: flex; gap: 6px; }
.monthly-platform-links a { padding: 7px 9px; color: #bd8553; border: 1px solid rgba(188, 127, 76, 0.5); font: 9px/1 var(--sans); white-space: nowrap; }
.monthly-platform-links a:hover { color: #d9aa76; border-color: rgba(207, 151, 95, 0.78); }

.data-status { color: #8a8972; font: 9px/1 var(--condensed); letter-spacing: 0.09em; }
.liveroom-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 14px; height: 286px; }
.mvp-card { position: relative; align-self: stretch; height: 286px; overflow: visible; color: #c0b888; filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.2)); }
.mvp-card::before { content: ""; position: absolute; top: -11.8%; right: 0; bottom: -15.4%; left: 0; z-index: 0; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.decor-assets-ready .sponsor-plaque { background-image: url("./assets/ui/sponsor-plaque-reference-v2.png"); }
.decor-assets-ready .suggestion-box { background-image: url("./assets/ui/suggestion-box-reference-v3.png"); }
.decor-assets-ready .mvp-card::before { background-image: url("./assets/ui/mvp-dossier-reference-v4_alpha.png"); }
.mvp-card header { position: absolute; top: 2.5%; right: 24%; left: 8.7%; z-index: 2; display: flex; align-items: center; gap: 7px; min-width: 0; }
.mvp-card header strong { flex: 0 0 auto; color: #c7a35c; font: 600 17px/1 var(--condensed); letter-spacing: 0.08em; }
.mvp-card header small { overflow: hidden; color: #b8b084; font-size: 7.5px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.mvp-real { position: absolute; top: 6.3%; right: 8.6%; z-index: 2; display: grid; place-items: center; width: 13.2%; height: 8.3%; color: #d8a083; font: 8px/1 var(--condensed); letter-spacing: 0.07em; text-align: center; }
.mvp-body { position: absolute; inset: 0; z-index: 1; display: block; }
.mvp-body img { position: absolute; top: 31.5%; left: 9.2%; width: 34.5%; height: auto; aspect-ratio: 1; object-fit: cover; border: 0; border-radius: 2px; box-shadow: none; filter: saturate(0.82) contrast(1.03) brightness(0.88); }
.mvp-body > div { position: absolute; top: 31.5%; right: 8.5%; left: 48.2%; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; padding: 0; }
.mvp-body b { color: #d6bd82; font: 700 14px/1.32 var(--display); }
.mvp-body small { margin-top: 7px; color: #c2af7d; font-size: 9.5px; }
.mvp-body em { margin-top: 13px; color: #bdb080; font: 8.5px/1 var(--condensed); font-style: normal; letter-spacing: 0.04em; }
.mvp-card > a { position: absolute; right: 8.5%; bottom: 5.4%; z-index: 2; display: grid; place-items: center; width: 22.5%; height: 10%; color: #dfb895; font-size: 8px; line-height: 1; text-align: center; }
.mvp-card > a > span { grid-area: 1 / 1; }
.mvp-card-arrow { position: absolute; right: 7px; top: 50%; display: grid; place-items: center; width: auto; height: auto; color: #d0b48a; background: transparent; border: 0; border-radius: 0; font-style: normal; transform: translateY(-50%); }
.mvp-card-arrow > span { transform: translate(1px, -1px); }

.room-data-board { display: grid; grid-template-columns: 145px minmax(225px, 1.5fr) repeat(3, minmax(125px, 1fr)); min-width: 0; overflow: hidden; border: 1px solid rgba(191, 130, 80, 0.36); border-radius: 7px; background: rgba(22, 24, 22, 0.72) url("./assets/textures/dark-paper.png") repeat; background-size: 320px 320px; }
.data-cell { position: relative; min-width: 0; padding: 18px 14px; border-right: 1px solid rgba(191, 130, 80, 0.2); }
.data-cell:last-child { border-right: 0; }
.data-cell > small { display: block; min-height: 30px; color: #aaa084; font-size: 10px; line-height: 1.5; font-weight: 600; }
.data-cell > strong { display: block; margin-top: 35px; color: #b48a65; font: 600 16px/1 var(--condensed); }
.data-cell > p { margin: 8px 0 0; color: #777a69; font: 9px/1 var(--condensed); letter-spacing: 0.07em; }
.signal-line { display: none; }
.ranking-cell ol, .compact-ranking-cell ol { margin: 8px 0 0; padding: 0; list-style: none; }
.ranking-cell li, .compact-ranking-cell li { display: grid; align-items: center; min-height: 32px; border-bottom: 1px solid rgba(191, 130, 80, 0.11); }
.ranking-cell li { grid-template-columns: 22px minmax(0, 1fr) 42px; }
.compact-ranking-cell li { grid-template-columns: 18px minmax(0, 1fr) 25px; }
.ranking-cell li span, .compact-ranking-cell li span { color: #b67949; font: 10px/1 var(--condensed); }
.ranking-cell li b, .compact-ranking-cell li b { overflow: hidden; color: #bdab8a; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.compact-ranking-cell li b { font-size: 9.5px; }
.ranking-cell li small, .compact-ranking-cell li small { color: #918a75; font: 9px/1 var(--condensed); text-align: right; }
.interaction-cell > strong { font-size: 14px; }
.waiting-cell::after { display: none; }

.section-heading.slim { height: 50px; }
.section-heading.slim .section-no { font-size: 21px; }
.last-live-strip { display: grid; grid-template-columns: 132px minmax(0, 1fr) 300px; height: 110px; color: #b3a27c; background: linear-gradient(95deg, rgba(50, 55, 43, 0.94), rgba(74, 78, 57, 0.92) 53%, rgba(48, 55, 44, 0.94)), url("./assets/textures/olive-paper.png") repeat; background-size: auto, 320px 320px; border-radius: 7px; box-shadow: inset 0 0 35px rgba(10, 12, 10, 0.3); }
.last-live-strip > time { display: flex; flex-direction: column; justify-content: center; padding-left: 24px; color: #c59b67; border-right: 1px solid rgba(205, 177, 125, 0.22); font: 600 17px/1.2 var(--condensed); letter-spacing: 0.04em; }
.last-live-strip > time small { margin-bottom: 7px; color: #9e997b; font: 9px/1 var(--condensed); letter-spacing: 0.09em; }
.summary-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.summary-stats > div { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 12px; border-right: 1px solid rgba(205, 177, 125, 0.19); }
.summary-stats strong { overflow: hidden; color: #c0ae83; font: 500 18px/1.1 var(--condensed); text-overflow: ellipsis; white-space: nowrap; }
.summary-stats small { margin-top: 7px; color: #aaa688; font-size: 9px; }
.music-dna { display: grid; grid-template-columns: 50px 1fr 27px; align-items: center; gap: 10px; padding: 0 18px; color: #c1b486; background: rgba(28, 31, 26, 0.24); }
.dna-icon { display: grid; place-items: center; width: 45px; height: 45px; color: #b17d4f; border: 1px solid #a87648; border-radius: 7px; font: 30px/1 var(--display); }
.dna-icon > span { transform: translateY(-2px); }
.music-dna b { display: block; font-size: 12px; }
.music-dna b small { margin-left: 8px; color: #929078; font: 8px/1 var(--condensed); letter-spacing: 0.1em; }
.music-dna em { display: block; margin-top: 8px; color: #969477; font-size: 9px; font-style: normal; }
.music-dna i { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #9d8a61; border-radius: 50%; font-style: normal; }
.music-dna i > span { transform: translate(1px, -1px); }

footer { display: grid; grid-template-columns: 40px 1fr auto 48px; align-items: center; height: 74px; color: #ab9875; font: 10.5px/1 var(--condensed); letter-spacing: 0.14em; }
footer > span { color: #9e764d; font-size: 22px; }
footer p { margin: 0; }
footer small { margin-right: 39px; font: inherit; }
footer > img { width: 44px; height: 44px; object-fit: contain; }
.load-error { grid-column: 1 / -1; color: #b98963; }

dialog { border: 0; }
dialog::backdrop { background: rgba(5, 7, 6, 0.84); backdrop-filter: blur(2px); }
.dialog-close { position: absolute; top: 10px; right: 13px; z-index: 3; padding: 0; color: inherit; background: none; border: 0; font-size: 25px; }
.paper-dialog { max-width: 380px; padding: 29px; color: #2d281e; background: var(--paper) url("./assets/textures/kraft-paper.png") repeat; background-size: 320px 320px; border: 1px solid #7c563a; border-radius: 2px; box-shadow: 0 26px 80px #000; }
.paper-dialog > small { font: 11px/1 var(--condensed); letter-spacing: 0.16em; }
.paper-dialog h2 { margin: 10px 0; font: 28px/1.15 var(--display); }
.paper-dialog p { margin: 0; line-height: 1.7; }

.feedback-dialog { width: min(590px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; color: #2c211b; background: #b69a77 url("./assets/textures/kraft-paper.png") repeat; background-size: 320px 320px; border: 1px solid #8d5542; border-radius: 4px; box-shadow: 0 30px 110px rgba(0, 0, 0, 0.76); }
.feedback-header { position: relative; padding: 28px 33px 22px; color: #d5ad8d; background: linear-gradient(120deg, rgba(255, 255, 255, 0.025), transparent 50%), var(--rust-deep); border-bottom: 1px solid #8d5542; }
.feedback-header > small { font: 9px/1 var(--condensed); letter-spacing: 0.17em; }
.feedback-header h2 { margin: 10px 0 6px; font: 700 30px/1.1 var(--display); }
.feedback-header p { max-width: 430px; margin: 0; color: #be9075; font-size: 11px; line-height: 1.7; }
.feedback-stamp { position: absolute; top: 24px; right: 55px; padding: 4px 8px; color: #c88e70; border: 1px solid rgba(205, 141, 108, 0.5); border-radius: 2px; font: 8px/1 var(--condensed); letter-spacing: 0.1em; transform: rotate(-3deg); }
.feedback-dialog form { display: grid; gap: 16px; padding: 23px 33px 28px; }
.feedback-dialog label { display: block; color: #4f3a2d; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.feedback-dialog label > span { float: right; color: #7c6653; font: 9px/1 var(--condensed); }
.feedback-dialog select,
.feedback-dialog textarea,
.feedback-dialog input { width: 100%; margin-top: 7px; padding: 10px 11px; color: #30241d; background: rgba(230, 210, 178, 0.42); border: 1px solid rgba(86, 59, 41, 0.48); border-radius: 2px; outline: none; }
.feedback-dialog textarea { resize: vertical; min-height: 126px; line-height: 1.65; }
.feedback-dialog select:focus,
.feedback-dialog textarea:focus,
.feedback-dialog input:focus { border-color: #7f3e32; box-shadow: 0 0 0 2px rgba(127, 62, 50, 0.16); }
.feedback-optional { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.feedback-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.feedback-actions p { flex: 1; margin: 0; color: #6d5441; font-size: 10px; line-height: 1.5; }
.feedback-actions p[data-state="success"] { color: #405539; }
.feedback-actions p[data-state="error"] { color: #8b3329; }
.feedback-actions button { flex: 0 0 auto; padding: 10px 15px; color: #d5ad8d; background: var(--rust-deep); border: 1px solid #8d5542; border-radius: 2px; font-weight: 600; }
.feedback-actions button:disabled { opacity: 0.55; cursor: wait; }

@media (max-width: 899px) {
  body { padding-top: 0; }
  .desktop-stage-frame { width: 100%; height: auto; margin: 0; }
  .site-shell { display: flex; flex-direction: column; width: 100%; height: auto; min-height: 100vh; transform: none; }
  .paper-grain { position: fixed; }
  .rail-kicker, .duty-corner, .vinyl-clip { display: none; }

  .masthead { position: relative; top: auto; left: auto; order: 0; grid-template-rows: 86px 46px; width: 100%; height: 132px; padding: 4px 16px 0; }
  .ribbon-mark { width: min(470px, 100%); }
  .masthead nav { justify-content: flex-start; gap: 24px; overflow-x: auto; width: 100%; padding: 0 4px 5px; scrollbar-width: none; }
  .masthead nav::-webkit-scrollbar { display: none; }

  .brand-rail, .main-stage { display: contents; }
  .main-stage[hidden] { display: none !important; }
  .news-view, .history-view { position: relative; top: auto; left: auto; order: 3; width: auto; margin: 0 16px; }
  .news-view .news-archive-main, .history-view .history-archive-main { padding-top: 28px; }
  .brand-lockup, .live-ticket, .music-card, .rail-notice-row, .sponsor-plaque, .suggestion-box, .rail-copyright { position: relative; top: auto; left: auto; }
  .brand-lockup { order: 1; width: min(calc(100% - 36px), 370px); margin: 27px 18px 0; }
  .wordmark { width: min(100%, 370px); }
  .brand-copy { margin-top: 20px; }
  .live-ticket { order: 2; width: min(calc(100% - 36px), 350px); margin: 22px 18px 30px; }
  .music-card { order: 4; width: min(calc(100% - 36px), 326px); margin: 32px 18px 0; }
  .rail-notice-row { display: block; order: 3; width: 250px; height: 108px; margin: 0 18px 8px; }
  .sponsor-plaque { order: 5; width: min(calc(100% - 36px), 340px); height: 116px; margin: 22px 18px 0; }
  .suggestion-box { order: 6; align-self: flex-end; width: min(calc(100% - 36px), 300px); margin: 20px 18px 0; }
  .rail-copyright { display: none; }

  .lead-grid { display: block; order: 3; margin: 0 16px; }
  .section-heading { min-height: 68px; height: auto; padding-block: 8px; }
  .section-heading > div { display: block; }
  .section-heading h2 { font-size: 17px; white-space: normal; }
  .section-heading small { display: block; margin-top: 6px; }
  .section-heading > i, .section-heading > a, .data-status { display: none; }
  .section-no { width: 44px; height: 44px; margin-right: 12px; font-size: 19px; }

  .news-grid { display: block; height: auto; }
  .news-card.featured { height: 330px; }
  .news-card.featured h3 { font-size: 21px; }
  .news-secondary { grid-template-columns: 1fr; grid-auto-rows: 112px; gap: 10px; margin-top: 10px; }
  .news-secondary.count-3 { grid-template-rows: repeat(3, 112px); grid-auto-rows: 112px; }
  .news-card.secondary,
  .news-card.secondary:nth-child(odd):last-child,
  .news-secondary.count-3 .news-card.secondary:last-child { grid-column: auto; grid-template-columns: 92px minmax(0, 1fr); height: 112px; }
  .news-card.secondary .editorial-thumb { height: 96px; }
  .news-secondary.count-3 .news-card.secondary:last-child .editorial-thumb { height: 96px; }
  .news-card.secondary h3 { font-size: 12px; }
  .news-secondary.count-3 .news-card.secondary:last-child h3 { margin-top: 6px; font-size: 12px; }
  .news-secondary.count-3 .news-card.secondary:last-child p { display: none; }

  .history-section { margin-top: 30px; }
  .paper-heading { min-height: 68px; padding-inline: 16px; }
  .history-card { height: 348px; }
  .history-copy { width: 65%; padding-top: 31px; }
  .history-art { top: 67px; right: -51px; width: 210px; height: 235px; }

  .classic-section, .liveroom-section, .last-live { margin-right: 16px; margin-left: 16px; }
  .classic-section { order: 7; margin-top: 38px; }
  .liveroom-section { order: 8; margin-top: 34px; }
  .last-live { order: 9; margin-top: 34px; }
  .classic-review { grid-template-columns: 1fr; height: auto; }
  .classic-copy { min-height: 230px; }
  .classic-art { height: 240px; }
  .time-machine { min-height: 245px; border-top: 1px solid rgba(191, 130, 80, 0.26); border-left: 0; }

  .liveroom-layout { display: block; height: auto; }
  .mvp-card { width: min(100%, 320px); height: auto; min-height: 0; aspect-ratio: 270 / 286; margin-inline: auto; }
  .mvp-card header strong { font-size: 21px; }
  .mvp-card header small { font-size: 9px; }
  .mvp-card header span { font-size: 8px; }
  .mvp-body b { font-size: 16px; }
  .mvp-body small { font-size: 10px; }
  .mvp-body em { margin-top: 15px; font-size: 8px; }
  .mvp-card > a { font-size: 8px; }
  .room-data-board { grid-template-columns: 1fr; margin-top: 12px; }
  .data-cell { min-height: 128px; border-right: 0; border-bottom: 1px solid rgba(191, 130, 80, 0.2); }
  .data-cell:last-child { border-bottom: 0; }
  .ranking-cell, .compact-ranking-cell { min-height: 235px; }
  .data-cell > strong { margin-top: 17px; }
  .signal-line { left: 52%; }

  .section-heading.slim { min-height: 64px; height: auto; }
  .last-live-strip { grid-template-columns: 1fr; height: auto; }
  .last-live-strip > time { min-height: 82px; padding-left: 20px; border-right: 0; border-bottom: 1px solid rgba(205, 177, 125, 0.22); }
  .summary-stats { grid-template-columns: repeat(2, 1fr); }
  .summary-stats > div { min-height: 82px; padding: 13px 20px; border-bottom: 1px solid rgba(205, 177, 125, 0.14); }
  .music-dna { min-height: 96px; }

  footer { order: 10; height: auto; min-height: 96px; margin: 0 16px 38px; grid-template-columns: 1fr 43px; }
  footer > span, footer small { display: none; }

  .feedback-dialog { max-height: calc(100vh - 20px); }
}

@media (max-width: 420px) {
  .notice-stamp { right: -3px; transform: rotate(-3deg) scale(0.94); transform-origin: right top; }
  .sponsor-plaque { padding-inline: 12px; }
  .sponsor-plaque ul { gap: 7px; }
  .sponsor-plaque li > span { width: 39px; height: 39px; }
  .news-card.featured { height: 310px; }
  .news-card.featured .news-copy { padding: 17px; }
  .news-card.featured h3 { font-size: 19px; }
  .history-copy { width: 69%; padding-left: 19px; }
  .history-card time { font-size: 22px; }
  .history-art { opacity: 0.78; }
  .mvp-card { width: min(100%, 320px); }
  .feedback-header { padding: 25px 20px 20px; }
  .feedback-stamp { display: none; }
  .feedback-dialog form { padding: 21px 20px 24px; }
  .feedback-optional { grid-template-columns: 1fr; }
  .feedback-actions { align-items: stretch; flex-direction: column; }
  .feedback-actions button { width: 100%; }
}

/* MUSIC NEWS archive */
.news-view {
  position: absolute;
  top: 178px;
  left: 446px;
  width: 1236px;
}
.news-view[hidden] { display: none !important; }
.news-view .news-archive-main { padding-top: 34px; }
body[data-view="news"] .vinyl-clip,
body[data-view="history"] .vinyl-clip { display: none; }

body.news-page { padding-top: var(--stage-render-block-gutter); }
.news-shared-header-frame { position: relative; width: var(--stage-render-width); height: calc(178px * var(--stage-scale)); margin-inline: auto; }
.news-masthead { position: relative; transform: scale(var(--stage-scale)); transform-origin: left top; }
.news-page-brand { align-self: start; width: 630px; max-width: 100%; }
.news-page-brand .ribbon-mark { width: 100%; }
.news-page-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.news-archive-main { padding: 54px 0 72px; }
.news-archive-intro { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 22px; align-items: start; padding-bottom: 34px; border-bottom: 1px solid rgba(191, 130, 80, 0.28); }
.news-archive-number { display: grid; place-items: center; width: 50px; height: 50px; color: #c48b55; border: 1px solid rgba(191, 130, 80, 0.68); border-radius: 50%; font: 600 20px/1 var(--condensed); }
.news-archive-intro small { color: #948a73; font: 500 11px/1 var(--condensed); letter-spacing: 0.11em; }
.news-archive-intro h1 { margin: 12px 0 11px; color: #d6a773; font: 700 46px/0.95 var(--display); letter-spacing: 0.02em; }
.news-archive-intro p { max-width: 740px; margin: 0; color: #b8ad9a; font-size: 13.5px; line-height: 1.75; }
.news-archive-intro > a { align-self: end; display: flex; gap: 9px; padding-bottom: 3px; color: #bd8d63; font: 500 11px/1 var(--condensed); letter-spacing: 0.07em; }
.news-week-tabs { display: flex; gap: 22px; padding: 24px 0 8px 80px; border-bottom: 1px solid rgba(191, 130, 80, 0.16); }
.news-week-tabs button { position: relative; padding: 4px 0 10px; color: #817b69; background: transparent; border: 0; font: 600 14px/1 var(--condensed); letter-spacing: 0.06em; }
.news-week-tabs button::after { content: ""; position: absolute; right: 50%; bottom: 0; left: 50%; height: 2px; background: #b87949; transition: left 160ms ease, right 160ms ease; }
.news-week-tabs button:hover, .news-week-tabs button.active { color: #d0a473; }
.news-week-tabs button.active::after { right: 0; left: 0; }
.news-week-tabs button:focus-visible { outline: 1px solid var(--copper-pale); outline-offset: 4px; }
.news-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 10px 80px; }
.news-filter-bar button { padding: 8px 14px; color: #9a9178; background: transparent; border: 1px solid rgba(191, 130, 80, 0.28); border-radius: 20px; font: 500 11px/1 var(--sans); }
.news-filter-bar button:hover, .news-filter-bar button.active { color: #d1ad82; border-color: rgba(191, 130, 80, 0.72); background: rgba(123, 76, 45, 0.12); }
.news-days { margin-top: 16px; }
.news-day-group { margin-top: 34px; }
.news-day-heading { display: grid; grid-template-columns: 118px 110px minmax(0, 1fr) auto; gap: 15px; align-items: center; padding-bottom: 13px; border-bottom: 1px solid rgba(191, 130, 80, 0.38); }
.news-day-heading time { color: #d09b66; font: 600 19px/1 var(--condensed); letter-spacing: 0.05em; }
.news-day-heading > span, .news-day-heading small { color: #8a8671; font: 500 10px/1 var(--condensed); letter-spacing: 0.1em; }
.news-day-heading i { height: 1px; background: linear-gradient(90deg, rgba(191, 130, 80, 0.2), transparent); }
.archive-news-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 42px; }
.archive-news-item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; min-width: 0; padding: 24px 0 25px; border-bottom: 1px solid rgba(191, 130, 80, 0.17); }
.archive-news-index { padding-top: 3px; color: #8d623e; font: 600 12px/1 var(--condensed); }
.archive-news-copy { min-width: 0; }
.archive-news-meta { display: flex; gap: 10px; align-items: center; color: #918a76; font: 600 10px/1 var(--condensed); letter-spacing: 0.07em; }
.archive-news-meta b { color: #c38652; font-weight: 600; }
.archive-news-item h3 { margin: 10px 0 8px; color: #d9b789; font: 600 19px/1.42 var(--display); }
.archive-news-artists { margin: 0 0 9px !important; color: #aa9678 !important; font: 600 10px/1.3 var(--condensed) !important; letter-spacing: 0.05em; }
.archive-news-item p { margin: 0; color: #b1a99a; font-size: 12.5px; line-height: 1.68; }
.archive-news-item a { display: inline-flex; gap: 5px; margin-top: 13px; color: #bc875b; font: 500 10.5px/1 var(--condensed); letter-spacing: 0.07em; }
.archive-news-item a:hover { color: #d4a36f; }
.archive-news-thumb { width: 120px; height: 88px; margin-top: 3px; overflow: hidden; border: 1px solid rgba(191, 130, 80, 0.26); border-radius: 4px; background: #1a1c1a; }
.archive-news-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) contrast(1.04) brightness(0.82); }
.news-page-loading { padding: 40px 0; color: #8e846f; }
.news-page-footer { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; min-height: 96px; border-top: 1px solid rgba(191, 130, 80, 0.24); color: #7b7565; }
.news-page-footer p { margin: 0; font: 500 9px/1 var(--condensed); letter-spacing: 0.13em; }
.news-page-footer > a { color: #a97e58; font: 600 10px/1 var(--condensed); letter-spacing: 0.09em; }

@media (max-width: 860px) {
  body.news-page { padding-top: 0; }
  .news-view { position: relative; top: auto; left: auto; order: 3; width: auto; margin: 0 16px; }
  .news-view .news-archive-main { padding-top: 28px; }
  .news-shared-header-frame { width: 100%; height: 132px; }
  .news-masthead { transform: none; }
  .news-page-brand { width: min(470px, 100%); }
  .news-page-shell { width: min(100% - 28px, 720px); }
  .news-archive-main { padding-top: 34px; }
  .news-archive-intro { grid-template-columns: 50px minmax(0, 1fr); gap: 14px; }
  .news-archive-number { width: 44px; height: 44px; font-size: 18px; }
  .news-archive-intro h1 { font-size: 34px; }
  .news-archive-intro > a { grid-column: 2; justify-self: start; margin-top: 4px; }
  .news-week-tabs, .news-filter-bar { padding-left: 0; }
  .archive-news-list { grid-template-columns: 1fr; }
  .news-day-heading { grid-template-columns: 105px minmax(0, 1fr) auto; }
  .news-day-heading > span { display: none; }
}

@media (max-width: 520px) {
  .news-page-shell { width: calc(100% - 24px); }
  .news-archive-main { padding: 28px 0 52px; }
  .news-archive-intro { grid-template-columns: 42px minmax(0, 1fr); padding-bottom: 25px; }
  .news-archive-number { width: 38px; height: 38px; font-size: 16px; }
  .news-archive-intro small { font-size: 9px; }
  .news-archive-intro h1 { margin-top: 9px; font-size: 32px; }
  .news-archive-intro p { font-size: 12.5px; line-height: 1.72; }
  .news-week-tabs { gap: 18px; padding-top: 18px; overflow-x: auto; }
  .news-week-tabs button { flex: 0 0 auto; font-size: 13px; }
  .news-filter-bar { gap: 6px; padding-top: 14px; }
  .news-filter-bar button { padding: 7px 10px; font-size: 10px; }
  .news-day-group { margin-top: 26px; }
  .news-day-heading { grid-template-columns: 94px 1fr auto; gap: 9px; }
  .news-day-heading time { font-size: 16px; }
  .archive-news-item { grid-template-columns: 27px minmax(0, 1fr); gap: 10px; padding: 20px 0; }
  .archive-news-thumb { grid-column: 2; width: 100%; height: 150px; margin-top: 11px; }
  .archive-news-item h3 { font-size: 18px; }
  .news-page-footer { grid-template-columns: auto 1fr; min-height: 82px; }
  .news-page-footer > a { display: none; }
}

/* ON THIS DAY archive */
.history-view {
  position: absolute;
  top: 178px;
  left: 446px;
  width: 1236px;
}
.history-view[hidden] { display: none !important; }
.history-archive-main { padding: 34px 0 72px; }
.history-archive-intro { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 22px; align-items: start; padding-bottom: 34px; border-bottom: 1px solid rgba(191, 130, 80, 0.28); }
.history-archive-number { display: grid; place-items: center; width: 50px; height: 50px; color: #c48b55; border: 1px solid rgba(191, 130, 80, 0.68); border-radius: 50%; font: 600 20px/1 var(--condensed); }
.history-archive-intro small { color: #948a73; font: 500 11px/1 var(--condensed); letter-spacing: 0.11em; }
.history-archive-intro h1 { margin: 12px 0 11px; color: #d6a773; font: 700 46px/0.95 var(--display); letter-spacing: 0.02em; }
.history-archive-intro p { max-width: 720px; margin: 0; color: #b8ad9a; font-size: 13.5px; line-height: 1.75; }
.history-archive-intro > a { align-self: end; display: flex; gap: 9px; padding-bottom: 3px; color: #bd8d63; font: 500 11px/1 var(--condensed); letter-spacing: 0.07em; }
.history-day-tabs { display: flex; gap: 22px; padding: 24px 0 8px 80px; border-bottom: 1px solid rgba(191, 130, 80, 0.16); }
.history-day-tabs button { position: relative; padding: 4px 0 10px; color: #817b69; background: transparent; border: 0; font: 600 14px/1 var(--condensed); letter-spacing: 0.06em; }
.history-day-tabs button::after { content: ""; position: absolute; right: 50%; bottom: 0; left: 50%; height: 2px; background: #b87949; transition: left 160ms ease, right 160ms ease; }
.history-day-tabs button:hover, .history-day-tabs button.active { color: #d0a473; }
.history-day-tabs button.active::after { right: 0; left: 0; }
.history-day-tabs button:focus-visible { outline: 1px solid var(--copper-pale); outline-offset: 4px; }
.history-days { margin-top: 26px; }
.history-day-group { margin-top: 22px; }
.history-day-heading { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 18px; align-items: end; padding-bottom: 14px; border-bottom: 1px solid rgba(191, 130, 80, 0.34); }
.history-day-heading > div { display: flex; flex-direction: column; gap: 7px; }
.history-day-heading small { color: #847d6b; font: 500 9px/1 var(--condensed); letter-spacing: 0.12em; }
.history-day-heading time { color: #d09b66; font: 600 20px/1 var(--condensed); letter-spacing: 0.06em; }
.history-day-heading i { height: 1px; margin-bottom: 3px; background: linear-gradient(90deg, rgba(191, 130, 80, 0.28), transparent); }
.history-day-heading > span { padding-bottom: 1px; color: #817b69; font: 500 10px/1 var(--condensed); letter-spacing: 0.1em; }
.history-archive-list { display: grid; gap: 28px; padding-top: 28px; }
.history-archive-item { position: relative; display: grid; grid-template-columns: 34px 300px minmax(0, 1fr); gap: 24px; min-height: 360px; padding: 0 0 28px; border-bottom: 1px solid rgba(191, 130, 80, 0.18); }
.history-archive-index { padding-top: 6px; color: #8d623e; font: 600 12px/1 var(--condensed); }
.history-archive-art { position: relative; overflow: hidden; min-height: 330px; border: 1px solid rgba(191, 130, 80, 0.26); border-radius: 4px; background: #171917; }
.history-archive-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 58%, rgba(8, 10, 9, 0.28)); }
.history-archive-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.74) sepia(0.05) contrast(1.04) brightness(0.84); }
.history-archive-copy { min-width: 0; padding: 7px 0 4px; }
.history-archive-meta { display: flex; align-items: center; gap: 14px; color: #918a76; font: 600 10px/1 var(--condensed); letter-spacing: 0.08em; }
.history-archive-meta b { color: #c38652; }
.history-archive-copy h2 { max-width: 650px; margin: 18px 0 15px; color: #d9b789; font: 600 30px/1.25 var(--display); }
.history-archive-copy > p { max-width: 690px; margin: 0; color: #b9b0a1; font-size: 13px; line-height: 1.86; }
.history-archive-note { max-width: 690px; margin-top: 25px; padding: 15px 18px; border-left: 2px solid rgba(191, 130, 80, 0.58); background: rgba(95, 65, 43, 0.1); }
.history-archive-note small, .history-archive-listen small { display: block; color: #a07754; font: 600 9px/1 var(--condensed); letter-spacing: 0.12em; }
.history-archive-note strong { display: block; margin-top: 8px; color: #c6b294; font-size: 11.5px; line-height: 1.7; font-weight: 500; }
.history-archive-listen { max-width: 690px; margin-top: 20px; }
.history-archive-listen p { margin: 8px 0 0; color: #aaa18e; font-size: 11.5px; line-height: 1.68; }
.history-source-link { display: inline-flex; gap: 6px; margin-top: 22px; color: #b78055; font: 500 10px/1 var(--condensed); letter-spacing: 0.08em; }
.history-source-link:hover { color: #d1a16e; }
.history-page-loading { padding: 40px 0; color: #8e846f; }
.history-page-footer { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; min-height: 96px; border-top: 1px solid rgba(191, 130, 80, 0.24); color: #7b7565; }
.history-page-footer p { margin: 0; font: 500 9px/1 var(--condensed); letter-spacing: 0.13em; }
.history-page-footer > a { color: #a97e58; font: 600 10px/1 var(--condensed); letter-spacing: 0.09em; }

@media (max-width: 860px) {
  .history-view { position: relative; top: auto; left: auto; order: 3; width: auto; margin: 0 16px; }
  .history-archive-main { padding-top: 28px; }
  .history-archive-intro { grid-template-columns: 50px minmax(0, 1fr); gap: 14px; }
  .history-archive-number { width: 44px; height: 44px; font-size: 18px; }
  .history-archive-intro h1 { font-size: 34px; }
  .history-archive-intro > a { grid-column: 2; justify-self: start; margin-top: 4px; }
  .history-day-tabs { padding-left: 0; }
  .history-archive-item { grid-template-columns: 28px 230px minmax(0, 1fr); gap: 18px; }
  .history-archive-art { min-height: 290px; }
  .history-archive-copy h2 { font-size: 25px; }
}

@media (max-width: 520px) {
  .history-archive-main { padding: 28px 0 52px; }
  .history-archive-intro { grid-template-columns: 42px minmax(0, 1fr); padding-bottom: 25px; }
  .history-archive-number { width: 38px; height: 38px; font-size: 16px; }
  .history-archive-intro small { font-size: 9px; }
  .history-archive-intro h1 { margin-top: 9px; font-size: 31px; }
  .history-archive-intro p { font-size: 12.5px; line-height: 1.72; }
  .history-day-tabs { gap: 18px; padding-top: 18px; overflow-x: auto; }
  .history-day-tabs button { flex: 0 0 auto; font-size: 13px; }
  .history-days { margin-top: 20px; }
  .history-day-heading { grid-template-columns: 110px 1fr auto; gap: 10px; }
  .history-day-heading time { font-size: 17px; }
  .history-archive-item { grid-template-columns: 25px minmax(0, 1fr); gap: 10px; min-height: 0; }
  .history-archive-art { grid-column: 2; min-height: 0; height: 280px; }
  .history-archive-copy { grid-column: 2; padding-top: 0; }
  .history-archive-copy h2 { margin-top: 14px; font-size: 23px; }
  .history-archive-copy > p { font-size: 12.5px; line-height: 1.78; }
  .history-archive-note { margin-top: 20px; padding: 13px 14px; }
  .history-page-footer { grid-template-columns: auto 1fr; min-height: 82px; }
  .history-page-footer > a { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}