:root {
  --home-bg: #eeeae1;
  --home-surface: rgba(255, 253, 247, 0.72);
  --home-ink: #1c1b18;
  --home-muted: rgba(28, 27, 24, 0.48);
  --home-line: rgba(28, 27, 24, 0.105);
  --home-flow: #d9ff52;
  --home-radio: #b9c9bc;
  --home-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] {
  --home-bg: #11110f;
  --home-surface: rgba(30, 30, 26, 0.72);
  --home-ink: rgba(249, 247, 239, 0.96);
  --home-muted: rgba(249, 247, 239, 0.43);
  --home-line: rgba(255, 255, 255, 0.1);
  --home-flow: #d8f266;
  --home-radio: #9fb3a6;
}

body[data-nav-context="home"] {
  color: var(--home-ink) !important;
  background: var(--home-bg) !important;
}

.home-page {
  position: relative;
  isolation: isolate;
  width: min(100%, 1260px);
  margin: 0 auto;
  padding: 26px 18px max(40px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.home-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.home-glow {
  position: absolute;
  display: block;
  border-radius: 999px;
  filter: blur(2px);
  opacity: 0.5;
}

.home-glow-one {
  width: 46rem;
  height: 30rem;
  top: -20rem;
  left: 9%;
  background: radial-gradient(ellipse, rgba(194, 211, 111, 0.32), transparent 68%);
}

.home-glow-two {
  width: 34rem;
  height: 34rem;
  right: -18rem;
  top: 34rem;
  background: radial-gradient(circle, rgba(111, 141, 128, 0.17), transparent 69%);
}

.home-grain {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.home-reveal {
  animation: home-reveal 780ms var(--home-ease) both;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes home-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.home-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.home-kicker,
.shelf-heading p {
  margin: 0 0 8px;
  color: var(--home-muted);
  font: 720 9px/1.1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.home-intro h1 {
  max-width: 760px;
  margin: 0;
  font-family: ui-serif, "Iowan Old Style", serif;
  font-size: clamp(38px, 6.2vw, 76px);
  font-weight: 520;
  letter-spacing: -0.065em;
  line-height: 0.98;
}

.home-library-status {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  padding: 0 4px 0 0;
  color: var(--home-muted);
  font-size: 11px;
  font-weight: 620;
  text-decoration: none;
  white-space: nowrap;
}

.home-library-status svg { width: 14px; height: 14px; }
.home-library-status:hover { color: var(--home-ink); }
.home-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--home-flow);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--home-flow) 20%, transparent);
}

.home-modes {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(280px, 0.72fr);
  gap: 12px;
}

.mode-card {
  position: relative;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 22px 70px rgba(26, 24, 18, 0.12);
  transform: translateZ(0);
}

.mode-card-flow { background: #171815; }
.mode-card-radio { background: #34423b; }

.mode-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0);
  pointer-events: none;
  transition: border-color 220ms ease, inset 360ms var(--home-ease);
}

.mode-card:hover::after,
.mode-card:focus-visible::after {
  inset: 7px;
  border-color: rgba(255, 255, 255, 0.38);
}

.mode-card:focus-visible { outline: 2px solid var(--home-ink); outline-offset: 3px; }

.mode-card-topline,
.mode-card-copy {
  position: relative;
  z-index: 4;
}

.mode-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 22px;
  color: rgba(255, 255, 255, 0.68);
  font: 680 9px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mode-number { color: var(--home-flow); }
.mode-card-radio .mode-number { color: #d6e3d9; }

.mode-card-copy { padding: 26px; }
.mode-label {
  display: block;
  margin-bottom: 10px;
  color: var(--home-flow);
  font: 760 10px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.2em;
}

.mode-card-radio .mode-label { color: #d6e3d9; }
.mode-card h2 {
  margin: 0;
  font-family: ui-serif, "Iowan Old Style", serif;
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 480;
  letter-spacing: -0.065em;
  line-height: 0.96;
}

.mode-card-radio h2 { max-width: 330px; font-size: clamp(31px, 3.5vw, 48px); }
.mode-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 23px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.025em;
}

.mode-action svg { width: 15px; height: 15px; transition: transform 280ms var(--home-ease) !important; }
.mode-card:hover .mode-action svg { transform: translateX(5px); }

.flow-collage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 0.7fr;
  grid-template-rows: 1fr 0.78fr;
  gap: 2px;
  opacity: 0.92;
}

.flow-collage img,
.flow-collage-placeholder {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #282923;
  transition: transform 900ms var(--home-ease), filter 350ms ease !important;
}

.flow-collage > :first-child { grid-row: 1 / 3; }
.flow-collage > :nth-child(2) { grid-column: 2 / 4; }
.mode-card:hover .flow-collage img { transform: scale(1.025); filter: saturate(1.08); }
.mode-card-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(5, 6, 5, 0.16), rgba(5, 6, 5, 0.03) 36%, rgba(5, 6, 5, 0.88) 100%);
}

.radio-signal {
  position: absolute;
  inset: 16% -8% auto 5%;
  height: 140px;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.18;
  transform: rotate(-7deg);
}

.radio-signal span {
  flex: 1;
  height: var(--bar-height, 48%);
  border-radius: 99px;
  background: #dbe8df;
  animation: home-signal 2.8s ease-in-out infinite alternate;
}
.radio-signal span:nth-child(2) { --bar-height: 88%; animation-delay: -1.4s; }
.radio-signal span:nth-child(3) { --bar-height: 62%; animation-delay: -0.6s; }
.radio-signal span:nth-child(4) { --bar-height: 100%; animation-delay: -1.8s; }
.radio-signal span:nth-child(5) { --bar-height: 73%; animation-delay: -0.9s; }
.radio-signal span:nth-child(6) { --bar-height: 42%; animation-delay: -2.1s; }
.radio-signal span:nth-child(7) { --bar-height: 82%; animation-delay: -0.3s; }
@keyframes home-signal { to { transform: scaleY(0.42); } }

.radio-orbit {
  position: absolute;
  top: 37%;
  left: 50%;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(224, 238, 229, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.radio-orbit::before,
.radio-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(224, 238, 229, 0.12);
  border-radius: 50%;
}
.radio-orbit::before { inset: -23px; }
.radio-orbit::after { inset: 23px; }
.radio-orbit-core {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #34423b;
  background: #d6e3d9;
  box-shadow: 0 15px 34px rgba(7, 15, 11, 0.24);
}
.radio-orbit-core svg { width: 19px; height: 19px; }

.home-shelf { margin-top: 44px; }
.shelf-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}
.shelf-heading h2 {
  margin: 0;
  font-family: ui-serif, "Iowan Old Style", serif;
  font-size: 25px;
  font-weight: 560;
  letter-spacing: -0.04em;
}
.shelf-heading a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 0;
  color: var(--home-muted);
  font-size: 10px;
  font-weight: 680;
  text-decoration: none;
}
.shelf-heading a:hover { color: var(--home-ink); }
.shelf-heading svg { width: 13px; height: 13px; }

.media-ribbon {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 1fr);
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 7px;
  scrollbar-width: none;
}
.media-ribbon::-webkit-scrollbar { display: none; }
.media-tile {
  position: relative;
  min-height: 212px;
  overflow: hidden;
  border-radius: 3px;
  color: #fff;
  background: rgba(127, 127, 127, 0.12);
  text-decoration: none;
}
.media-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--home-ease) !important; }
.media-tile:hover img { transform: scale(1.045); }
.media-tile::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(8, 8, 7, 0.76));
  pointer-events: none;
}
.media-tile-copy {
  position: absolute;
  right: 11px;
  bottom: 10px;
  left: 11px;
  z-index: 1;
  overflow: hidden;
  font-size: 10px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-kind {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 1;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(12, 12, 11, 0.45);
  backdrop-filter: blur(10px);
}
.media-kind svg { width: 12px; height: 12px; }

.media-tile-loading,
.collection-empty.is-loading span {
  background: linear-gradient(105deg, rgba(127,127,127,.08) 34%, rgba(127,127,127,.17) 45%, rgba(127,127,127,.08) 56%);
  background-size: 220% 100%;
  animation: home-loading 1.35s linear infinite;
}
@keyframes home-loading { to { background-position-x: -220%; } }

.home-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(310px, 0.68fr);
  gap: 42px;
}
.rediscover-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 0.8fr; gap: 7px; }
.rediscover-tile { min-height: 265px; }
.rediscover-tile:first-child { min-height: 310px; }

.collection-list { display: grid; gap: 7px; }
.collection-card {
  min-height: 82px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 6px 13px 6px 6px;
  border: 1px solid var(--home-line);
  border-radius: 4px;
  color: var(--home-ink);
  background: var(--home-surface);
  text-decoration: none;
  transition: transform 250ms var(--home-ease), background-color 180ms ease;
}
.collection-card:hover { transform: translateX(4px); background: color-mix(in srgb, var(--home-surface) 75%, var(--home-flow) 7%); }
.collection-preview { height: 68px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; overflow: hidden; border-radius: 2px; background: rgba(127,127,127,.12); }
.collection-preview img { width: 100%; height: 100%; object-fit: cover; }
.collection-preview img:only-child { grid-column: 1 / 3; }
.collection-copy { min-width: 0; }
.collection-copy strong { display: block; overflow: hidden; font-family: ui-serif, "Iowan Old Style", serif; font-size: 15px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.collection-copy span { display: block; margin-top: 4px; color: var(--home-muted); font-size: 9px; }
.collection-card > svg { width: 14px; height: 14px; color: var(--home-muted); }
.collection-empty { min-height: 171px; display: grid; place-items: center; padding: 20px; border: 1px dashed var(--home-line); color: var(--home-muted); font-size: 11px; text-align: center; }
.collection-empty.is-loading { grid-template-columns: 1fr; gap: 7px; }
.collection-empty.is-loading span { width: 100%; height: 70px; display: block; border-radius: 3px; }

.home-empty { min-height: 170px; display: grid; place-items: center; grid-column: 1 / -1; padding: 28px; border: 1px dashed var(--home-line); color: var(--home-muted); font-size: 11px; text-align: center; }
.home-empty a { color: var(--home-ink); text-underline-offset: 3px; }

.home-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 64px;
  padding-top: 18px;
  border-top: 1px solid var(--home-line);
  color: var(--home-muted);
  font: 620 9px/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .home-page { padding-top: 18px; }
  .home-intro { align-items: flex-start; flex-direction: column; gap: 13px; }
  .home-library-status { margin: 0; }
  .home-modes { grid-template-columns: 1fr; }
  .mode-card { min-height: 410px; }
  .mode-card-radio { min-height: 330px; }
  .home-lower-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 560px) {
  .home-page { padding-right: 12px; padding-left: 12px; }
  .home-intro { margin-bottom: 20px; }
  .home-intro h1 { max-width: 340px; font-size: 42px; }
  .home-kicker { margin-bottom: 6px; }
  .home-modes { gap: 8px; }
  .mode-card { min-height: 390px; }
  .mode-card-radio { min-height: 300px; }
  .mode-card-copy { padding: 21px; }
  .mode-card h2 { font-size: 42px; }
  .mode-card-radio h2 { max-width: 280px; font-size: 34px; }
  .radio-orbit { top: 35%; width: 118px; height: 118px; }
  .home-shelf { margin-top: 38px; }
  .media-ribbon { margin-right: -12px; grid-auto-columns: 46vw; padding-right: 12px; }
  .media-tile { min-height: 230px; }
  .rediscover-grid { grid-template-columns: 1.15fr .85fr; }
  .rediscover-tile { min-height: 220px; }
  .rediscover-tile:first-child { grid-row: 1 / 3; min-height: 447px; }
  .rediscover-tile:nth-child(n+4) { display: none; }
  .home-footer { margin-top: 48px; }
}

@media (min-width: 768px) and (min-height: 600px) {
  .home-page { padding: 38px 34px 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-reveal { animation: none; }
  .radio-signal span, .media-tile-loading, .collection-empty.is-loading span { animation: none; }
  .mode-card::after, .mode-action svg, .flow-collage img, .media-tile img, .collection-card { transition-duration: 0.01ms !important; }
}