@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500;600&display=swap');

:root {
  --ink: #f4ecdd;
  --muted: #a99e8e;
  --gold: #cda762;
  --gold-bright: #ebc879;
  --wine: #40161d;
  --panel: rgba(13, 10, 8, .86);
  --line: rgba(214, 181, 117, .2);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background: #080706;
  font: 400 1rem/1.6 Inter, system-ui, sans-serif;
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 15% 18%, rgba(105, 32, 42, .45), transparent 32%),
    radial-gradient(circle at 82% 74%, rgba(99, 66, 26, .2), transparent 34%),
    linear-gradient(145deg, #0d0908 0%, #080706 45%, #120b09 100%);
}
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .13;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.site-header, footer {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header { min-height: 86px; }
.brand { display: inline-flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; letter-spacing: .22em; font-weight: 600; }
.brand img { border-radius: 50%; border: 1px solid rgba(235, 200, 121, .38); box-shadow: 0 0 30px rgba(173, 105, 37, .18); }
.original-mark { color: #8f8577; font-size: .72rem; letter-spacing: .18em; }
.header-actions { display: flex; align-items: center; gap: 26px; }
.menu-toggle { width: 48px; height: 48px; display: grid; place-content: center; gap: 6px; padding: 0; border: 1px solid var(--line); background: rgba(10,8,7,.5); color: var(--ink); cursor: pointer; }
.menu-toggle span { display: block; width: 21px; height: 1px; background: currentColor; transition: transform .25s, opacity .2s; }
.menu-toggle:hover { border-color: var(--gold); color: var(--gold-bright); }
.menu-toggle:focus-visible, .menu-close:focus-visible, .menu-panel a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.menu-panel { position: fixed; z-index: 20; top: 0; right: 0; width: min(460px, 92vw); height: 100dvh; padding: 30px clamp(24px,5vw,52px) 45px; display: flex; flex-direction: column; background: #100c0a; border-left: 1px solid var(--line); box-shadow: -30px 0 80px rgba(0,0,0,.45); transform: translateX(105%); visibility: hidden; transition: transform .35s ease, visibility .35s; }
.menu-open { overflow: hidden; }
.menu-open .menu-panel { transform: translateX(0); visibility: visible; }
.menu-head { display: flex; align-items: center; justify-content: space-between; color: #857b6d; font-size: .68rem; letter-spacing: .2em; }
.menu-close { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); font: 300 2rem/1 Inter, sans-serif; cursor: pointer; }
.menu-panel ol { list-style: none; margin: auto 0; padding: 0; }
.menu-panel li + li { border-top: 1px solid var(--line); }
.menu-panel a { padding: 20px 4px; display: grid; grid-template-columns: 38px 1fr; color: #a9a092; text-decoration: none; }
.menu-panel a > span { grid-row: 1 / 3; color: #655e55; font-size: .68rem; padding-top: 8px; }
.menu-panel a b { font: 600 clamp(1.7rem,5vw,2.25rem)/1.1 "Cormorant Garamond", serif; }
.menu-panel a small { color: #756d63; font-size: .7rem; letter-spacing: .06em; }
.menu-panel a:hover, .menu-panel a.current { color: var(--gold-bright); }
.menu-panel a.current > span { color: var(--gold); }
.menu-backdrop { position: fixed; z-index: 19; inset: 0; border: 0; background: rgba(0,0,0,.58); opacity: 0; visibility: hidden; cursor: default; transition: opacity .3s, visibility .3s; }
.menu-open .menu-backdrop { opacity: 1; visibility: visible; }

main { width: min(1180px, calc(100% - 40px)); margin: 5vh auto 6vh; }
.player {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(390px, .8fr);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 34px 90px rgba(0,0,0,.52);
  min-height: 610px;
}
.artwork-wrap { position: relative; min-height: 610px; overflow: hidden; background: #170d0d; }
.artwork { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.74) contrast(1.06) brightness(.72); transform: scale(1.015); }
.artwork-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(4,3,3,.86) 100%), linear-gradient(90deg, transparent 75%, rgba(8,6,5,.48)); }
#visualizer { position: absolute; left: 7%; right: 7%; bottom: 7%; width: 86%; height: 84px; opacity: .8; }
.on-air { position: absolute; left: 26px; top: 24px; display: none; align-items: center; gap: 9px; color: #f2dfbd; font-size: .69rem; letter-spacing: .2em; }
.on-air.visible { display: flex; }
.on-air span { width: 7px; height: 7px; background: #d65045; border-radius: 50%; box-shadow: 0 0 0 5px rgba(214,80,69,.12); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .42; } }

.console { padding: clamp(32px, 5vw, 58px); display: flex; flex-direction: column; }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: .72rem; letter-spacing: .19em; }
h1 { margin: 0; font: 600 clamp(2.55rem, 4.3vw, 4.6rem)/.95 "Cormorant Garamond", Georgia, serif; letter-spacing: -.035em; }
.description { color: var(--muted); max-width: 38ch; margin: 20px 0 0; }
.transport { display: flex; align-items: center; gap: 18px; margin: 44px 0 34px; padding: 24px 0; border-block: 1px solid var(--line); }
.play { width: 64px; height: 64px; flex: 0 0 auto; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; color: #17110a; background: linear-gradient(135deg, var(--gold-bright), #aa7e39); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.play:hover { transform: scale(1.045); box-shadow: 0 0 28px rgba(205,167,98,.25); }
.play:focus-visible, .mood:focus-visible, input:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.play svg { width: 25px; height: 25px; fill: currentColor; }
.pause-icon { display: none; }
.play.playing .play-icon { display: none; }
.play.playing .pause-icon { display: block; }
.time-block { display: grid; min-width: 70px; }
.time-block span { color: var(--gold); font-size: .68rem; letter-spacing: .18em; }
.time-block time { font-variant-numeric: tabular-nums; color: #cfc4b3; font-size: .9rem; }
.volume { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.volume svg { width: 21px; height: 21px; fill: none; stroke: #a99e8e; stroke-width: 1.5; }
input[type="range"] { width: 92px; accent-color: var(--gold); }
.moods { display: grid; gap: 3px; }
.mood { width: 100%; border: 0; border-left: 2px solid transparent; padding: 13px 12px; display: grid; grid-template-columns: 36px 1fr; align-items: center; text-align: left; color: #b8ad9d; background: transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.mood:hover { background: rgba(255,255,255,.03); color: var(--ink); }
.mood.active { border-left-color: var(--gold); color: var(--ink); background: linear-gradient(90deg, rgba(205,167,98,.1), transparent); }
.mood-number { color: #70685e; font: 500 .7rem Inter, sans-serif; }
.mood b, .mood small { display: block; }
.mood b { font: 600 1.04rem "Cormorant Garamond", serif; letter-spacing: .04em; }
.mood small { color: #7f766a; font-size: .73rem; }
.sound-note { margin: auto 0 0; padding-top: 28px; color: #777064; font-size: .72rem; line-height: 1.6; }

footer { min-height: 72px; border-top: 1px solid rgba(214,181,117,.1); color: #766f65; font-size: .72rem; letter-spacing: .06em; }
footer nav { display: flex; gap: 22px; }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--gold); }
.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; }

.policy { max-width: 780px; margin: 6vh auto 10vh; padding: 0 20px; }
.policy h1 { margin-bottom: 10px; }
.policy h2 { margin-top: 34px; font: 600 1.55rem "Cormorant Garamond", serif; color: var(--gold-bright); }
.policy p, .policy li { color: #b7ad9e; }
.policy a { color: var(--gold); }
.back { display: inline-block; margin-bottom: 35px; color: var(--gold); text-decoration: none; }

.collection-page { margin-top: clamp(3vh,7vh,86px); }
.page-intro { max-width: 850px; margin-bottom: 52px; }
.page-intro h1 { font-size: clamp(3.4rem,8vw,7rem); }
.page-intro > p:last-child { max-width: 650px; margin: 25px 0 0; color: var(--muted); font-size: clamp(.95rem,1.4vw,1.12rem); }
.page-intro::after { content: ""; display: block; width: 72px; height: 1px; margin-top: 30px; background: var(--gold); }
.feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; padding: 1px; background: var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.34); }
.feature-card { position: relative; min-height: 340px; padding: clamp(28px,4vw,48px); display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; overflow: hidden; color: var(--ink); text-decoration: none; background: #17110e; }
.feature-card::before, .insta-card::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .75; transition: transform .5s, opacity .4s; }
.feature-card:hover::before, .insta-card:hover::before { transform: scale(1.035); opacity: .92; }
.feature-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,rgba(5,4,4,.08),rgba(6,5,4,.94)); }
.card-late::before { background: radial-gradient(circle at 70% 20%,rgba(200,127,51,.6),transparent 24%),linear-gradient(135deg,#481b20,#120b09 72%); }
.card-rain::before { background: repeating-linear-gradient(105deg,transparent 0 16px,rgba(180,202,205,.04) 17px 18px),radial-gradient(circle at 25% 30%,#384953,transparent 38%),#101519; }
.card-focus::before { background: radial-gradient(circle at 78% 20%,rgba(213,180,111,.42),transparent 17%),linear-gradient(150deg,#3a3026,#0e0c0a 68%); }
.card-tokyo::before { background: linear-gradient(105deg,transparent 40%,rgba(170,45,57,.22) 41% 43%,transparent 44%),radial-gradient(circle at 25% 18%,#6a1f2c,transparent 30%),#0e0909; }
.card-index { color: var(--gold); font-size: .67rem; letter-spacing: .18em; }
.feature-card h2, .club-card h2, .insta-card h2 { margin: 10px 0 5px; font: 600 clamp(2rem,3.6vw,3.4rem)/1 "Cormorant Garamond",serif; }
.feature-card p { max-width: 38ch; margin: 6px 0 26px; color: #b4aa9b; }
.external-action { color: var(--gold-bright); font-size: .74rem; letter-spacing: .12em; }

.club-list { display: grid; border-top: 1px solid var(--line); }
.club-card { min-height: 210px; padding: 34px clamp(24px,4vw,52px); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg,rgba(65,24,30,.16),transparent 55%); transition: background .25s; }
.club-card:hover { background: linear-gradient(90deg,rgba(98,38,46,.27),rgba(205,167,98,.025)); }
.club-card p { max-width: 64ch; margin: 8px 0 0; color: var(--muted); }
.club-card a { margin-bottom: 10px; padding: 12px 18px; border: 1px solid rgba(205,167,98,.42); color: var(--gold-bright); text-decoration: none; white-space: nowrap; font-size: .76rem; letter-spacing: .08em; }
.club-card a:hover { background: var(--gold); color: #120d08; }

.insta-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.insta-card { position: relative; min-height: 280px; padding: 30px; display: grid; grid-template-columns: 45px 1fr; align-content: space-between; isolation: isolate; overflow: hidden; color: var(--ink); text-decoration: none; border: 1px solid var(--line); }
.insta-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(120deg,rgba(6,5,5,.25),rgba(6,5,5,.93)); }
.insta-jam::before { background: radial-gradient(circle at 75% 20%,#9d6536,transparent 25%),linear-gradient(135deg,#3d1820,#100a09); }
.insta-tokyo::before { background: radial-gradient(circle at 20% 25%,#61212e,transparent 30%),linear-gradient(140deg,#121119,#18100d); }
.insta-player::before { background: radial-gradient(circle at 80% 30%,#7e5331,transparent 25%),linear-gradient(140deg,#30291f,#100c09); }
.insta-photo::before { background: radial-gradient(circle at 20% 20%,#384451,transparent 30%),linear-gradient(140deg,#171717,#160a0d); }
.insta-card > span { color: var(--gold); font-size: .7rem; }
.insta-card > div { align-self: end; }
.insta-card small { color: var(--gold); letter-spacing: .14em; }
.insta-card p { margin: 5px 0 0; color: #aca294; }
.insta-card > b { grid-column: 2; align-self: end; color: var(--gold-bright); font-size: .73rem; letter-spacing: .1em; }
.external-note { margin: 22px 0 0; color: #766f65; font-size: .72rem; }

@media (max-width: 860px) {
  .original-mark { display: none; }
  main { margin-top: 1vh; }
  .player { grid-template-columns: 1fr; min-height: 0; }
  .artwork-wrap { min-height: min(62vw, 450px); }
  .artwork-shade { background: linear-gradient(180deg, transparent 44%, rgba(4,3,3,.82) 100%); }
  .console { padding: 34px 28px; }
  .sound-note { margin-top: 25px; }
  .feature-card { min-height: 300px; }
}
@media (max-width: 520px) {
  .site-header, main, footer { width: min(100% - 24px, 1180px); }
  .site-header { min-height: 72px; }
  .brand { font-size: .86rem; }
  .brand img { width: 38px; height: 38px; }
  .artwork-wrap { min-height: 58vw; }
  #visualizer { height: 52px; }
  .console { padding: 28px 20px 26px; }
  h1 { font-size: 2.8rem; }
  .transport { margin: 30px 0 24px; gap: 13px; }
  .play { width: 57px; height: 57px; }
  input[type="range"] { width: 66px; }
  footer { align-items: flex-start; padding: 22px 0; gap: 14px; }
  footer nav { gap: 13px; flex-wrap: wrap; justify-content: flex-end; }
  .menu-toggle { width: 43px; height: 43px; }
  .feature-grid, .insta-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 285px; }
  .club-card { grid-template-columns: 1fr; gap: 20px; }
  .club-card a { justify-self: start; }
  .page-intro { margin-bottom: 38px; }
  .page-intro h1 { font-size: 3.4rem; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }