/* ---------------------------------------------------
   Deandro / palette
--------------------------------------------------- */
:root {
  --ground: #4a4e42;
  --paper: #efe6d2;
  --paper-deep: #e6d9ba;
  --paper-light: #f5eddc;
  --ink: #2a2018;
  --ink-soft: #5c4d3c;
  --line: #c7b98f;
  --indigo: #333f6b;
  --indigo-deep: #232c4c;
  --olive: #56642f;
  --sage: #7a875d;
  --rust: #9c4a2e;
  --terracotta: #c3744d;
  --mustard: #a97c22;
  --ochre: #c4a24c;
  --teal: #486b63;
  --plum: #685064;

  --serif-type: 'Special Elite', 'Courier New', monospace;
  --mono-type: 'Courier Prime', 'MS Gothic', 'Courier New', monospace;
  --devanagari: 'Noto Sans Devanagari', serif;
}

* {
  box-sizing: border-box;
  scrollbar-color: rgba(20,16,2,.19) transparent;
  scroll-behavior: smooth;
}

html {
  background: var(--paper);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(239,230,210,.97), rgba(239,230,210,.97)),
    radial-gradient(rgba(90,70,40,.06) 1px, transparent 1px);
  background-size: auto, 4px 4px;
  font-family: var(--mono-type);
  font-size: 15px;
  line-height: 1.62;
  animation: fadeIn .75s ease forwards;
  opacity: 0;
}

@keyframes fadeIn { to { opacity: 1; } }

body.splash-open {
  overflow: hidden;
}

::selection {
  background: var(--indigo);
  color: var(--paper-light);
}

a {
  color: var(--indigo);
  text-decoration: underline dotted;
  text-decoration-color: rgba(51,63,107,.48);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: .2s ease;
}

a:hover,
a:focus-visible {
  color: var(--rust);
  text-decoration-color: currentColor;
}

h1, h2 {
  margin: 0;
  font-family: var(--serif-type);
  font-weight: 400;
}

p {
  max-width: 66ch;
  margin: 0 0 1em;
}

em { color: var(--ink); }

/* ---------------------------------------------------
   home screen
--------------------------------------------------- */
.home-shell {
  width: min(980px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 4rem 0 3rem;
}

.home-header {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .9fr) auto;
  align-items: end;
  gap: 1.35rem;
}

.home-copy {
  min-width: 0;
}

.home-title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .7rem 1rem;
}

.eyebrow,
.section-label {
  margin: 0 0 .45rem;
  color: var(--rust);
  font-family: var(--serif-type);
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: lowercase;
}

.home-header h1 {
  font-size: clamp(2.6rem, 7vw, 4.1rem);
}

.home-intro {
  max-width: 58ch;
  margin: .8rem 0 0;
  color: var(--ink-soft);
}

.home-stamp {
  display: inline-block;
  padding: .18rem .42rem .14rem;
  color: var(--rust);
  background: rgba(169,124,34,.11);
  border: 1px dashed rgba(156,74,46,.5);
  font-family: var(--serif-type);
  font-size: .64rem;
  letter-spacing: .035em;
  text-transform: lowercase;
  transform: rotate(-1.5deg);
}

.lastfm-now {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: .72rem;
  padding: .68rem .72rem;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(156,74,46,.12), transparent 62%),
    rgba(255,255,255,.3);
  border: 1px solid rgba(42,32,24,.16);
  border-bottom: 3px solid var(--rust);
  box-shadow: 0 8px 18px rgba(42,32,24,.055);
  text-decoration: none;
  transform: rotate(.25deg);
}

.lastfm-now:hover,
.lastfm-now:focus-visible {
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(156,74,46,.2), transparent 62%),
    rgba(255,255,255,.55);
  transform: translateY(-2px) rotate(0deg);
  box-shadow: 0 12px 24px rgba(42,32,24,.1);
}

.lastfm-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  color: var(--paper-light);
  background: var(--indigo-deep);
  border: 1px solid rgba(42,32,24,.2);
  box-shadow: 3px 3px 0 rgba(156,74,46,.18);
  font-size: 1.35rem;
}

.lastfm-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lastfm-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.lastfm-kicker {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .27rem;
  color: var(--rust);
  font-family: var(--serif-type);
  font-size: .62rem;
  letter-spacing: .045em;
  text-transform: lowercase;
}

.lastfm-dot {
  width: .45rem;
  height: .45rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--line);
}

.lastfm-dot.is-live {
  background: var(--sage);
  box-shadow: 0 0 0 4px rgba(122,135,93,.13);
  animation: signal-pulse 1.8s ease-in-out infinite;
}

@keyframes signal-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(122,135,93,.1); }
  50% { box-shadow: 0 0 0 7px rgba(122,135,93,0); }
}

.lastfm-track,
.lastfm-artist,
.lastfm-album {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lastfm-track {
  font-family: var(--serif-type);
  font-size: .9rem;
  font-weight: 400;
}

.lastfm-artist {
  margin-top: .12rem;
  color: var(--ink-soft);
  font-size: .72rem;
}

.lastfm-album {
  margin-top: .12rem;
  color: rgba(92,77,60,.78);
  font-size: .63rem;
}

.lastfm-arrow {
  align-self: start;
  color: var(--rust);
  font-size: .82rem;
}

.home-om {
  flex: 0 0 auto;
  color: var(--indigo);
  font-family: var(--devanagari);
  font-size: 3.7rem;
  line-height: 1;
  transform: rotate(-7deg);
  text-shadow: 0 0 26px rgba(156,74,46,.25), 0 0 46px rgba(177,136,47,.16);
}

.home-rule,
.om-rule {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.home-rule {
  margin: 2rem 0 1.55rem;
}

.home-rule::before,
.home-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.home-rule span {
  width: .45rem;
  height: .45rem;
  border: 1px solid var(--rust);
  transform: rotate(45deg);
}

.home-switchboard {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem .65rem;
  margin: -.25rem 0 1.3rem;
  padding: .62rem .75rem;
  background: rgba(230,217,186,.48);
  border: 1px dashed rgba(92,77,60,.32);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.18);
  font-size: .72rem;
}

.switchboard-label {
  margin-right: .15rem;
  color: var(--rust);
  font-family: var(--serif-type);
  letter-spacing: .055em;
}

.home-switchboard a,
.home-switchboard button {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .45rem;
  color: var(--ink-soft);
  background: rgba(255,255,255,.22);
  border: 1px solid transparent;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.home-switchboard a:hover,
.home-switchboard a:focus-visible,
.home-switchboard button:hover,
.home-switchboard button:focus-visible {
  color: var(--paper-light);
  background: var(--indigo);
  border-color: var(--indigo);
}

.home-switchboard a span,
.home-switchboard button span {
  color: var(--rust);
}

.home-switchboard a:hover span,
.home-switchboard a:focus-visible span,
.home-switchboard button:hover span,
.home-switchboard button:focus-visible span {
  color: var(--ochre);
}

/* ---------------------------------------------------
   menu cards
--------------------------------------------------- */
.home-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.menu-card {
  position: relative;
  min-height: 145px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: .3rem .85rem;
  padding: 1rem 1.05rem .95rem;
  color: var(--ink);
  background: rgba(255,255,255,.25);
  border: 1px solid rgba(42,32,24,.14);
  border-left: 5px solid var(--accent, var(--indigo));
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(42,32,24,.035);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.menu-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.28), transparent 48%);
  pointer-events: none;
}

.menu-card:hover,
.menu-card:focus-visible {
  color: var(--ink);
  background: rgba(255,255,255,.57);
  transform: translateY(-3px) rotate(-.2deg);
  box-shadow: 0 11px 22px rgba(42,32,24,.09);
}

.menu-number {
  color: var(--accent);
  font-family: var(--serif-type);
  font-size: .78rem;
  opacity: .85;
}

.menu-symbol {
  justify-self: end;
  color: var(--accent);
  font-size: 1.2rem;
  line-height: 1;
}

.menu-name {
  grid-column: 1 / -1;
  margin-top: .1rem;
  font-family: var(--serif-type);
  font-size: 1.35rem;
  letter-spacing: .01em;
}

.menu-desc {
  color: var(--ink-soft);
  font-size: .78rem;
}

.menu-arrow {
  align-self: end;
  justify-self: end;
  color: var(--accent);
  font-size: 1.05rem;
}

.card-rust { --accent: var(--rust); }
.card-olive { --accent: var(--olive); }
.card-indigo { --accent: var(--indigo); }
.card-mustard { --accent: var(--mustard); }
.card-teal { --accent: var(--teal); }
.card-plum { --accent: var(--plum); }
.card-rust-soft { --accent: var(--terracotta); }
.card-indigo-soft { --accent: #6a7195; }
.card-sage { --accent: var(--sage); }


.menu-card {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent, var(--indigo)) 16%, transparent), transparent 65%),
    rgba(255,255,255,.3);
}

.menu-card:hover,
.menu-card:focus-visible {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent, var(--indigo)) 26%, transparent), transparent 70%),
    rgba(255,255,255,.6);
}

.menu-symbol {
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}


.home-menu .menu-card:nth-child(3n + 1) { transform: rotate(-.08deg); }
.home-menu .menu-card:nth-child(3n + 2) { transform: rotate(.08deg); }
.home-menu .menu-card:hover,
.home-menu .menu-card:focus-visible { transform: translateY(-3px) rotate(-.2deg); }

/* ---------------------------------------------------
   webring station
--------------------------------------------------- */
.webring-yard {
  position: relative;
  overflow: hidden;
  margin-top: 1.6rem;
  padding: 1.2rem 1.25rem 1.15rem;
  color: var(--paper);
  background:
    radial-gradient(circle at 86% 18%, rgba(196,162,76,.12), transparent 26%),
    linear-gradient(145deg, rgba(104,80,100,.15), transparent 45%),
    #40382f;
  border: 1px solid rgba(42,32,24,.25);
  box-shadow: 0 10px 24px rgba(42,32,24,.11);
}

.webring-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  align-items: center;
  gap: 1.2rem;
}

.webring-head .eyebrow { color: var(--ochre); }

.webring-head h2 {
  color: var(--paper-light);
  font-size: 1.45rem;
}

.webring-head p:not(.eyebrow) {
  max-width: 62ch;
  margin: .42rem 0 0;
  color: rgba(239,230,210,.72);
  font-size: .78rem;
}

.webring-orbit {
  position: relative;
  width: 94px;
  height: 94px;
  justify-self: end;
}

.webring-orbit span {
  position: absolute;
  inset: var(--orbit-inset, 0);
  border: 1px solid rgba(239,230,210,.25);
  border-radius: 50%;
}

.webring-orbit span:nth-child(2) { --orbit-inset: 13px; border-color: rgba(196,162,76,.48); }
.webring-orbit span:nth-child(3) { --orbit-inset: 27px; border-color: rgba(195,116,77,.5); }

.webring-orbit b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ochre);
  font-size: 1.15rem;
  font-weight: 400;
  animation: orbit-wobble 7s linear infinite;
}

@keyframes orbit-wobble { to { transform: rotate(360deg); } }

.webring-rack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-top: 1rem;
}

.webring-socket {
  position: relative;
  min-width: 0;
  padding: .72rem .75rem .68rem 1.65rem;
  background: rgba(239,230,210,.055);
  border: 1px dashed rgba(239,230,210,.22);
}

.webring-socket strong {
  display: block;
  overflow: hidden;
  color: var(--paper-light);
  font-family: var(--serif-type);
  font-size: .78rem;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.socket-light {
  position: absolute;
  top: .89rem;
  left: .7rem;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: rgba(239,230,210,.22);
  box-shadow: inset 0 0 0 1px rgba(239,230,210,.18);
}

.webring-socket.is-live .socket-light {
  background: var(--ochre);
  box-shadow: 0 0 9px rgba(196,162,76,.5);
}

.socket-note {
  display: block;
  margin-top: .2rem;
  color: rgba(239,230,210,.5);
  font-size: .62rem;
}

.webring-socket nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .55rem;
  margin-top: .32rem;
  font-size: .63rem;
}

.webring-socket nav a {
  color: var(--ochre);
  text-decoration-color: rgba(196,162,76,.45);
}

.webring-socket nav a:hover,
.webring-socket nav a:focus-visible { color: var(--paper-light); }

.home-footer,
.page-footer {
  margin-top: 2.4rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: .76rem;
}

.home-footer .om,
.page-footer .om {
  display: block;
  margin-bottom: .5rem;
  color: var(--indigo);
  font-family: var(--devanagari);
}

/* ---------------------------------------------------
   inner pages
--------------------------------------------------- */
.page-shell {
  width: min(840px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.inner-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1rem;
}

.home-link {
  justify-self: start;
  color: var(--ink-soft);
  text-decoration: none;
}

.home-link:hover,
.home-link:focus-visible {
  color: var(--rust);
}

.inner-title {
  text-align: center;
}

.inner-title .eyebrow {
  color: var(--ink-soft);
}

.inner-title h1 {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
}

.inner-om {
  justify-self: end;
  color: var(--indigo);
  font-family: var(--devanagari);
  font-size: 2.1rem;
}

.section {
  padding: 1.35rem 1.25rem 1.45rem;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(42,32,24,.10);
  border-left: 5px solid var(--section-accent, var(--indigo));
  box-shadow: 0 6px 18px rgba(42,32,24,.04);
}

.section-rust { --section-accent: var(--rust); }
.section-olive { --section-accent: var(--olive); }
.section-indigo { --section-accent: var(--indigo); }
.section-mustard { --section-accent: var(--mustard); }
.section-teal { --section-accent: var(--teal); }
.section-plum { --section-accent: var(--plum); }
.section-sage { --section-accent: var(--sage); }

.section h2 {
  margin-bottom: .85rem;
  font-size: 1.5rem;
}

.button-link {
  display: inline-block;
  margin-top: .2rem;
  padding: .45rem .78rem;
  color: var(--paper-light);
  background: var(--indigo);
  border: 1px solid var(--indigo);
  text-decoration: none;
}

.button-link:hover,
.button-link:focus-visible {
  color: var(--paper-light);
  background: var(--rust);
  border-color: var(--rust);
}

.button-link-filled {
  background: var(--rust);
  border-color: var(--rust);
}

/* ---------------------------------------------------
   content components
--------------------------------------------------- */
.chart {
  list-style: none;
  counter-reset: chart;
  margin: 1.35rem 0 .15rem;
  padding: 0;
}

.chart li {
  counter-increment: chart;
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1.1fr) minmax(0, 1.55fr);
  align-items: baseline;
  gap: .45rem;
  padding: .47rem 0;
  border-bottom: 1px dotted rgba(92,77,60,.35);
}

.chart li::before {
  content: counter(chart, decimal-leading-zero) ".";
  color: var(--ink-soft);
  font-family: var(--serif-type);
  font-size: .8rem;
}

.chart .artist { font-weight: 700; }
.chart .album { color: var(--ink-soft); }
.chart .album::before { content: "— "; color: var(--terracotta); }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 1.5rem;
}

.photo {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: .52rem .52rem .82rem;
  background: var(--paper-deep);
  border: 1px solid rgba(42,32,24,.18);
  box-shadow: 0 3px 0 rgba(42,32,24,.06);
  transform: rotate(var(--rot, 0deg));
}

.photo::before {
  content: "";
  position: absolute;
  top: -.58rem;
  left: 50%;
  width: 2.6rem;
  height: .82rem;
  background: rgba(239,230,210,.72);
  border: 1px solid rgba(42,32,24,.12);
  transform: translateX(-50%) rotate(-2deg);
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
}

.photo figcaption {
  margin-top: .52rem;
  color: var(--ink-soft);
  font-size: .8rem;
  font-style: italic;
}

.two-column {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.two-column > div {
  flex: 1 1 auto;
}

.photo--small {
  width: 155px;
  flex: 0 0 auto;
}

.note-card {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-top: 1.25rem;
  padding: .8rem .9rem;
  background: rgba(72,107,99,.10);
  border: 1px dashed rgba(72,107,99,.55);
}

.note-card p { margin: 0; }
.note-card-mark { color: var(--terracotta); }

.linklist {
  list-style: none;
  padding: 0;
  margin: 1.15rem 0 0;
}

.linklist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .48rem 0;
  border-bottom: 1px dotted rgba(92,77,60,.35);
}

.linklist li span { color: var(--plum); }

.linklist li a {
  flex: 1 1 auto;
}

/* ---------------------------------------------------
   notes feed (live obsidian sync)
--------------------------------------------------- */
.notes-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 1.1rem 0 0;
  color: var(--ink-soft);
  font-size: .78rem;
}

.notes-status .dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--sage);
}

.notes-status.is-error .dot { background: var(--rust); }

.notes-refresh {
  padding: .3rem .6rem;
  color: var(--ink);
  background: transparent;
  border: 1px dotted rgba(92,77,60,.5);
  cursor: pointer;
  font-family: var(--mono-type);
  font-size: .74rem;
}

.notes-refresh:hover,
.notes-refresh:focus-visible {
  color: var(--paper-light);
  background: var(--sage);
  border-color: var(--sage);
}

.notes-feed {
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px dotted rgba(92,77,60,.35);
}

.notes-feed h1,
.notes-feed h2,
.notes-feed h3 {
  margin: 1.1rem 0 .5rem;
  font-family: var(--serif-type);
}

.notes-feed h1:first-child,
.notes-feed h2:first-child,
.notes-feed h3:first-child { margin-top: 0; }

.notes-feed ul,
.notes-feed ol {
  margin: .5rem 0;
  padding-left: 1.3rem;
}

.notes-feed li { margin: .25rem 0; }

.notes-feed blockquote {
  margin: .8rem 0;
  padding: .5rem .9rem;
  color: var(--ink-soft);
  background: rgba(122,135,93,.10);
  border-left: 3px solid var(--sage);
}

.notes-feed code {
  padding: .05rem .3rem;
  background: rgba(42,32,24,.08);
  font-family: var(--mono-type);
  font-size: .88em;
}

.notes-feed pre {
  padding: .7rem .85rem;
  overflow-x: auto;
  background: rgba(42,32,24,.08);
}

.notes-feed pre code {
  padding: 0;
  background: none;
}

.notes-feed hr {
  margin: 1.1rem 0;
  border: none;
  border-top: 1px dotted rgba(92,77,60,.35);
}

/* ---------------------------------------------------
   splash
--------------------------------------------------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
  color: var(--paper);
  opacity: 1;
}


.splash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #4a4e42;
  opacity: 1;
  pointer-events: none;
}

.splash-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(660px, 82vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.splash-rings {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform-origin: 50% 50%;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.splash-ring-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.splash-portrait {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 39%;
  width: clamp(96px, 13vw, 126px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: opacity;
}

.splash-portrait-frame {
  width: 100%;
  height: 100%;
  padding: 7px;
  background: var(--paper);
  border: 1px solid rgba(239,230,210,.45);
  box-shadow: 0 7px 26px rgba(20,16,2,.19);
}

.splash-portrait-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.splash-copy {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 63%;
  width: min(430px, 70%);
  text-align: center;
  transform: translate(-50%, -50%);
  will-change: opacity, transform;
}

.splash-title {
  margin: 0;
  color: var(--paper);
  font-family: var(--serif-type);
  font-size: clamp(2.15rem, 6vw, 3.4rem);
}

.splash-tagline {
  max-width: 31ch;
  margin: .55rem auto 1.05rem;
  color: rgba(239,230,210,.78);
  font-size: .92rem;
}

.splash-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}

.splash-sound,
.splash-enter {
  padding: .48rem .82rem;
  font-family: var(--mono-type);
  font-size: .8rem;
}

.splash-sound {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(239,230,210,.45);
  cursor: pointer;
}

.splash-sound:hover,
.splash-sound:focus-visible {
  color: var(--ochre);
  border-color: var(--ochre);
}

.splash-enter {
  background: var(--terracotta);
  color: var(--paper-light);
  border: 1px solid var(--terracotta);
  text-decoration: none;
}

.splash-enter:hover,
.splash-enter:focus-visible {
  background: var(--mustard);
  border-color: var(--mustard);
}

.splash.rings-transition .splash-rings {
  animation: rings-forward 3.5s linear forwards;
}

.splash.rings-transition::before {
  animation: splash-backdrop-reveal 3.5s linear forwards;
}

.splash.rings-transition .splash-portrait {
  animation: portrait-fade .72s ease-out forwards;
}

.splash.rings-transition .splash-copy {
  animation: splash-copy-fade .55s ease-out forwards;
}

.splash-hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes rings-forward {
  from {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, 0, 0) scale(6) rotate(720deg);
    opacity: 0;
  }
}

@keyframes splash-backdrop-reveal {
  0%, 74% { opacity: 1; }
  84%, 100% { opacity: 0; }
}

@keyframes portrait-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes splash-copy-fade {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -57%);
  }
}

/* ---------------------------------------------------
   player
--------------------------------------------------- */
.player {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: .7rem;
  width: min(760px, calc(100% - 2rem));
  margin: 0 auto;
  padding: .5rem .7rem;
  color: var(--ink-soft);
  background: rgba(239,230,210,.97);
  border: 1px solid rgba(42,32,24,.16);
  box-shadow: 0 10px 25px rgba(20,16,2,.12);
  font-size: .78rem;
  backdrop-filter: blur(4px);
}

.player-note { color: var(--rust); }

.player-track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.player-btn {
  padding: .28rem .55rem;
  color: var(--ink-soft);
  background: transparent;
  border: 1px dotted var(--line);
  cursor: pointer;
  font-size: .74rem;
}

.player-btn:hover,
.player-btn:focus-visible {
  color: var(--rust);
  border-color: var(--rust);
}

/* ---------------------------------------------------
   responsive
--------------------------------------------------- */
@media (max-width: 700px) {
  .home-shell,
  .page-shell {
    width: min(100% - 1rem, 840px);
  }

  .home-shell {
    padding-top: 2.3rem;
  }

  .home-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: .9rem;
  }

  .home-copy {
    grid-column: 1 / -1;
  }

  .lastfm-now {
    grid-column: 1;
    width: min(100%, 390px);
  }

  .home-om {
    grid-column: 2;
    align-self: center;
    font-size: 2.6rem;
  }

  .webring-head {
    grid-template-columns: 1fr auto;
  }

  .webring-orbit {
    width: 76px;
    height: 76px;
  }

  .webring-rack {
    grid-template-columns: 1fr;
  }

  .home-menu {
    grid-template-columns: 1fr;
  }

  .inner-header {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .inner-title {
    grid-row: 1;
    grid-column: 1 / -1;
    margin-top: .35rem;
    text-align: left;
  }

  .inner-om {
    grid-row: 2;
    grid-column: 2;
  }

  .inner-header .home-link {
    grid-row: 2;
    grid-column: 1;
  }

  .gallery {
    grid-template-columns: 1fr;
  }

  .gallery .photo {
    width: min(100%, 360px);
  }

  .two-column {
    flex-direction: column;
  }

  .chart li {
    grid-template-columns: 2rem 1fr;
  }

  .chart .album {
    grid-column: 2;
    margin-top: -.2rem;
  }

  .splash-center {
    width: min(620px, 92vw);
  }

  .splash-portrait {
    width: 105px;
  }

  .splash-copy {
    width: 70%;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  .menu-card {
    min-height: 132px;
  }

  .home-switchboard {
    align-items: stretch;
  }

  .switchboard-label {
    width: 100%;
  }

  .home-switchboard a,
  .home-switchboard button {
    flex: 1 1 145px;
    justify-content: center;
  }

  .lastfm-now {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .lastfm-art {
    width: 48px;
    height: 48px;
  }

  .webring-head {
    grid-template-columns: 1fr;
  }

  .webring-orbit {
    display: none;
  }

  .splash-inner {
    padding: 1.25rem;
  }

  .splash-center {
    width: 98vw;
  }

  .splash-portrait {
    top: 29%;
    width: 92px;
  }

  .splash-copy {
    top: 64%;
    width: 72%;
  }

  .splash-title {
    font-size: 2rem;
  }

  .splash-tagline {
    margin-bottom: 1rem;
    font-size: .83rem;
  }

  .player {
    left: .55rem;
    right: .55rem;
    width: calc(100% - 1.1rem);
    bottom: .55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }

  body {
    animation: none;
    opacity: 1;
  }

  .splash.rings-transition .splash-rings,
  .splash.rings-transition .splash-portrait,
  .splash.rings-transition .splash-copy {
    animation: none;
    opacity: 0;
  }

  .lastfm-dot.is-live,
  .webring-orbit b {
    animation: none;
  }

  a,
  .menu-card,
  .splash,
  .player-btn {
    transition: none;
  }
}

/* ---------------------------------------------------
   radio (nieuwe player met shuffle)
--------------------------------------------------- */
.radio {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: .7rem;
  width: min(760px, calc(100% - 2rem));
  margin: 0 auto;
  padding: .5rem .7rem;
  color: var(--paper-light);
  background: rgba(62,48,36,.92);
  border: 1px solid rgba(239,230,210,.18);
  box-shadow: 0 10px 25px rgba(20,16,2,.16);
  font-size: .78rem;
  backdrop-filter: blur(4px);
}

.radio-note { color: var(--ochre); }

.radio-track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.radio-btn {
  padding: .28rem .55rem;
  color: var(--paper-light);
  background: transparent;
  border: 1px dotted rgba(239,230,210,.35);
  cursor: pointer;
  font-size: .74rem;
  transition: .2s ease;
}

.radio-btn:hover,
.radio-btn:focus-visible {
  color: var(--ochre);
  border-color: var(--ochre);
}

/* Responsive aanpassingen voor radio */
@media (max-width: 480px) {
  .radio {
    left: .55rem;
    right: .55rem;
    width: calc(100% - 1.1rem);
    bottom: .55rem;
  }
}



.home-page {
  background:
    radial-gradient(circle at 11% 9%, rgba(195,116,77,.12) 0 7rem, transparent 18rem),
    radial-gradient(circle at 88% 26%, rgba(86,100,47,.12) 0 8rem, transparent 22rem),
    radial-gradient(circle at 56% 76%, rgba(51,63,107,.075) 0 9rem, transparent 25rem),
    repeating-linear-gradient(0deg, rgba(42,32,24,.018) 0 1px, transparent 1px 5px),
    var(--paper);
}

.home-page .eyebrow,
.home-page .section-label {
  color: var(--rust);
}

.home-page .home-stamp {
  color: var(--rust);
  background: color-mix(in srgb, var(--ochre) 20%, var(--paper-deep));
  border-color: color-mix(in srgb, var(--rust) 68%, var(--paper));
  box-shadow: 2px 2px 0 rgba(86,100,47,.11);
}


.home-page .lastfm-now {
  background:
    repeating-linear-gradient(
      -9deg,
      rgba(156,74,46,.035) 0 1px,
      transparent 1px 7px
    ),
    color-mix(in srgb, var(--terracotta) 12%, var(--paper-deep));
  border: 1px solid color-mix(in srgb, var(--rust) 44%, var(--line));
  border-bottom: 4px solid var(--rust);
  box-shadow:
    4px 5px 0 color-mix(in srgb, var(--mustard) 17%, transparent),
    0 8px 16px rgba(42,32,24,.045);
}

.home-page .lastfm-now:hover,
.home-page .lastfm-now:focus-visible {
  background:
    repeating-linear-gradient(
      -9deg,
      rgba(156,74,46,.055) 0 1px,
      transparent 1px 7px
    ),
    color-mix(in srgb, var(--terracotta) 18%, var(--paper-light));
  box-shadow:
    5px 7px 0 color-mix(in srgb, var(--mustard) 22%, transparent),
    0 10px 18px rgba(42,32,24,.07);
}

.home-page .lastfm-art {
  background: var(--indigo-deep);
  border-color: color-mix(in srgb, var(--indigo) 55%, var(--ink));
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--rust) 28%, transparent);
}

.home-page .home-om {
  color: var(--indigo-deep);
  text-shadow:
    2px 3px 0 rgba(196,162,76,.16),
    0 0 28px rgba(156,74,46,.18);
}


.home-page .home-switchboard {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(86,100,47,.035) 0 1px,
      transparent 1px 8px
    ),
    color-mix(in srgb, var(--sage) 14%, var(--paper-deep));
  border-color: color-mix(in srgb, var(--olive) 35%, var(--line));
  box-shadow: inset 0 0 0 2px rgba(239,230,210,.28);
}

.home-page .home-switchboard a,
.home-page .home-switchboard button {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper-light) 82%, var(--ochre));
  border-color: rgba(92,77,60,.12);
}

.home-page .home-switchboard a:nth-of-type(2),
.home-page .home-switchboard button {
  background: color-mix(in srgb, var(--paper-light) 84%, var(--sage));
}

.home-page .home-switchboard a:nth-of-type(3) {
  background: color-mix(in srgb, var(--paper-light) 85%, var(--terracotta));
}

.home-page .home-switchboard a:hover,
.home-page .home-switchboard a:focus-visible,
.home-page .home-switchboard button:hover,
.home-page .home-switchboard button:focus-visible {
  color: var(--paper-light);
  background: var(--indigo-deep);
  border-color: var(--indigo-deep);
}


.home-page .menu-card {
  background:
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--accent) 4%, transparent) 0 1px,
      transparent 1px 6px
    ),
    color-mix(in srgb, var(--accent) 18%, var(--paper-light));
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  border-left-color: var(--accent);
  box-shadow:
    4px 5px 0 color-mix(in srgb, var(--accent) 12%, rgba(42,32,24,.12)),
    0 4px 10px rgba(42,32,24,.03);
}

.home-page .menu-card::before {
  background:
    linear-gradient(
      118deg,
      rgba(239,230,210,.28),
      transparent 38% 72%,
      color-mix(in srgb, var(--accent) 7%, transparent)
    );
}

.home-page .menu-card:hover,
.home-page .menu-card:focus-visible {
  background:
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--accent) 6%, transparent) 0 1px,
      transparent 1px 6px
    ),
    color-mix(in srgb, var(--accent) 27%, var(--paper-light));
  box-shadow:
    5px 7px 0 color-mix(in srgb, var(--accent) 17%, rgba(42,32,24,.12)),
    0 7px 14px rgba(42,32,24,.055);
}

.home-page .menu-symbol {
  text-shadow: none;
}


.home-page .card-rust,
.home-page .card-rust-soft {
  background-color: color-mix(in srgb, var(--terracotta) 13%, var(--paper-light));
}

.home-page .card-olive,
.home-page .card-sage {
  background-color: color-mix(in srgb, var(--sage) 14%, var(--paper-light));
}

.home-page .card-indigo {
  background-color: color-mix(in srgb, var(--indigo) 12%, var(--paper-light));
}

.home-page .card-mustard {
  background-color: color-mix(in srgb, var(--ochre) 16%, var(--paper-light));
}

.home-page .card-teal {
  background-color: color-mix(in srgb, var(--teal) 13%, var(--paper-light));
}

.home-page .card-plum {
  background-color: color-mix(in srgb, var(--plum) 13%, var(--paper-light));
}


.home-page .webring-yard {
  background:
    radial-gradient(circle at 86% 18%, rgba(196,162,76,.14), transparent 26%),
    repeating-linear-gradient(
      -12deg,
      rgba(239,230,210,.018) 0 1px,
      transparent 1px 8px
    ),
    color-mix(in srgb, var(--plum) 15%, var(--ink));
  border-color: color-mix(in srgb, var(--rust) 24%, var(--ink));
  box-shadow:
    5px 6px 0 rgba(156,74,46,.13),
    0 10px 20px rgba(42,32,24,.08);
}

.home-page .webring-socket {
  background: color-mix(in srgb, var(--paper) 5%, transparent);
  border-color: rgba(239,230,210,.27);
}


.home-page .radio {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(239,230,210,.025) 0 1px,
      transparent 1px 8px
    ),
    color-mix(in srgb, var(--plum) 14%, #3e3024);
  border-color: color-mix(in srgb, var(--ochre) 22%, rgba(239,230,210,.18));
  box-shadow: 4px 5px 0 rgba(156,74,46,.12);
  backdrop-filter: none;
}

.home-page .home-footer {
  color: color-mix(in srgb, var(--ink-soft) 86%, var(--olive));
}




.home-page {
  background:
    radial-gradient(circle at 9% 12%, rgba(195,116,77,.15) 0 6rem, transparent 17rem),
    radial-gradient(circle at 90% 24%, rgba(86,100,47,.14) 0 7rem, transparent 20rem),
    radial-gradient(circle at 63% 82%, rgba(51,63,107,.09) 0 8rem, transparent 23rem),
    repeating-linear-gradient(0deg, rgba(42,32,24,.018) 0 1px, transparent 1px 5px),
    var(--paper);
}


.home-page .home-title-row h1 {
  text-shadow:
    1px 2px 0 rgba(196,162,76,.12),
    0 0 18px rgba(156,74,46,.055);
}

.home-page .home-stamp {
  background: color-mix(in srgb, var(--ochre) 28%, var(--paper-deep));
  border-color: color-mix(in srgb, var(--rust) 74%, var(--paper));
  box-shadow:
    2px 2px 0 rgba(86,100,47,.11),
    inset 0 0 0 1px rgba(245,237,220,.28);
}


.home-page .lastfm-now {
  background:
    radial-gradient(circle at 90% 18%, rgba(196,162,76,.10), transparent 24%),
    repeating-linear-gradient(
      -9deg,
      rgba(156,74,46,.035) 0 1px,
      transparent 1px 7px
    ),
    color-mix(in srgb, var(--terracotta) 15%, var(--paper-deep));
  border-color: color-mix(in srgb, var(--rust) 52%, var(--line));
  box-shadow:
    4px 5px 0 color-mix(in srgb, var(--mustard) 19%, transparent),
    0 8px 16px rgba(42,32,24,.05);
}

.home-page .lastfm-now:hover,
.home-page .lastfm-now:focus-visible {
  transform: translateY(-2px);
  background:
    radial-gradient(circle at 90% 18%, rgba(196,162,76,.15), transparent 25%),
    repeating-linear-gradient(
      -9deg,
      rgba(156,74,46,.05) 0 1px,
      transparent 1px 7px
    ),
    color-mix(in srgb, var(--terracotta) 20%, var(--paper-light));
}

.home-page .lastfm-live-dot {
  box-shadow: 0 0 0 3px rgba(86,100,47,.09);
  animation: home-live-pulse 2.8s ease-in-out infinite;
}

@keyframes home-live-pulse {
  0%, 100% { transform: scale(1); opacity: .82; }
  50% { transform: scale(1.18); opacity: 1; }
}


.home-page .home-switchboard {
  background:
    linear-gradient(
      90deg,
      rgba(86,100,47,.055),
      rgba(196,162,76,.04) 40%,
      rgba(156,74,46,.045) 72%,
      rgba(51,63,107,.035)
    ),
    color-mix(in srgb, var(--sage) 12%, var(--paper-deep));
}

.home-page .home-switchboard a,
.home-page .home-switchboard button {
  box-shadow: 0 1px 0 rgba(255,255,255,.30);
}

.home-page .home-switchboard a:hover,
.home-page .home-switchboard a:focus-visible,
.home-page .home-switchboard button:hover,
.home-page .home-switchboard button:focus-visible {
  transform: translateY(-1px);
}


.home-page .menu-card {
  background:
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 27%),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--accent) 4%, transparent) 0 1px,
      transparent 1px 6px
    ),
    color-mix(in srgb, var(--accent) 21%, var(--paper-light));
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  box-shadow:
    4px 5px 0 color-mix(in srgb, var(--accent) 14%, rgba(42,32,24,.10)),
    0 4px 11px rgba(42,32,24,.035);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.home-page .menu-card:hover,
.home-page .menu-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background:
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 29%),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--accent) 6%, transparent) 0 1px,
      transparent 1px 6px
    ),
    color-mix(in srgb, var(--accent) 29%, var(--paper-light));
  box-shadow:
    5px 7px 0 color-mix(in srgb, var(--accent) 19%, rgba(42,32,24,.10)),
    0 8px 15px rgba(42,32,24,.06);
}

.home-page .menu-symbol {
  color: color-mix(in srgb, var(--accent) 84%, var(--ink));
}

.home-page .menu-number {
  color: color-mix(in srgb, var(--accent) 82%, var(--ink));
}


.home-page .card-rust,
.home-page .card-rust-soft {
  background-color: color-mix(in srgb, var(--terracotta) 17%, var(--paper-light));
}

.home-page .card-olive,
.home-page .card-sage {
  background-color: color-mix(in srgb, var(--sage) 18%, var(--paper-light));
}

.home-page .card-indigo {
  background-color: color-mix(in srgb, var(--indigo) 16%, var(--paper-light));
}

.home-page .card-mustard {
  background-color: color-mix(in srgb, var(--ochre) 21%, var(--paper-light));
}

.home-page .card-teal {
  background-color: color-mix(in srgb, var(--teal) 17%, var(--paper-light));
}

.home-page .card-plum {
  background-color: color-mix(in srgb, var(--plum) 17%, var(--paper-light));
}


.home-page .webring-yard {
  background:
    radial-gradient(circle at 14% 20%, rgba(156,74,46,.11), transparent 23%),
    radial-gradient(circle at 88% 18%, rgba(196,162,76,.16), transparent 27%),
    repeating-linear-gradient(
      -12deg,
      rgba(239,230,210,.018) 0 1px,
      transparent 1px 8px
    ),
    color-mix(in srgb, var(--plum) 17%, var(--ink));
  border-color: color-mix(in srgb, var(--rust) 30%, var(--ink));
  box-shadow:
    5px 6px 0 rgba(156,74,46,.15),
    0 10px 20px rgba(42,32,24,.085);
}

.home-page .webring-socket {
  background:
    linear-gradient(
      135deg,
      rgba(239,230,210,.035),
      transparent 60%
    );
  border-color: rgba(239,230,210,.30);
}

.home-page .webring-socket:hover {
  background: rgba(239,230,210,.055);
}


.home-page .radio {
  border-color: color-mix(in srgb, var(--ochre) 27%, rgba(239,230,210,.18));
  box-shadow:
    4px 5px 0 rgba(156,74,46,.13),
    0 8px 16px rgba(42,32,24,.055);
}

.home-page .home-footer {
  color: color-mix(in srgb, var(--ink-soft) 82%, var(--olive));
}

@media (prefers-reduced-motion: reduce) {
  .home-page .lastfm-live-dot {
    animation: none;
  }

  .home-page .menu-card,
  .home-page .lastfm-now,
  .home-page .home-switchboard a,
  .home-page .home-switchboard button {
    transition: none;
  }
}



.home-page .menu-card {
  border-left: 5px solid var(--accent);
}

.home-page .menu-card:hover,
.home-page .menu-card:focus-visible {
  border-left-color: var(--accent);
}



.home-page .lastfm-live-dot {
  box-shadow: 0 0 0 5px rgba(86,100,47,.11);
}

@keyframes home-live-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: .82;
  }
  50% {
    transform: scale(1.35);
    opacity: 1;
  }
}



.home-page .lastfm-dot.is-live {
  position: relative;
  z-index: 2;
  background: var(--sage);
  animation: signal-pulse-wide 2.15s ease-out infinite;
}

@keyframes signal-pulse-wide {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(122,135,93,.18),
      0 0 0 3px rgba(122,135,93,.08);
  }
  55% {
    box-shadow:
      0 0 0 11px rgba(122,135,93,0),
      0 0 18px 7px rgba(122,135,93,.08);
  }
}

.home-page .lastfm-now {
  overflow: visible;
  isolation: isolate;
}

.home-page .lastfm-now:has(.lastfm-dot.is-live)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  pointer-events: none;
  border: 2px solid rgba(122,135,93,.28);
  border-radius: 2px;
  box-shadow: 0 0 0 0 rgba(122,135,93,.14);
  animation: lastfm-card-pulse 2.15s ease-out infinite;
}

@keyframes lastfm-card-pulse {
  0% {
    transform: scale(1);
    opacity: .5;
    box-shadow: 0 0 0 0 rgba(122,135,93,.14);
  }
  72% {
    transform: scale(1.035, 1.16);
    opacity: 0;
    box-shadow: 0 0 0 8px rgba(122,135,93,0);
  }
  100% {
    transform: scale(1.035, 1.16);
    opacity: 0;
    box-shadow: 0 0 0 8px rgba(122,135,93,0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .lastfm-dot.is-live,
  .home-page .lastfm-now:has(.lastfm-dot.is-live)::after {
    animation: none;
  }

  .home-page .lastfm-now:has(.lastfm-dot.is-live)::after {
    opacity: .22;
    transform: none;
  }
}


/* ---------------------------------------------------
   SITE-WIDE DARK MODE
   Auto: 18:00–07:00 local device time.
   Manual override: the floating switch.
--------------------------------------------------- */

.theme-toggle {
  position: fixed;
  top: .8rem;
  right: .8rem;
  z-index: 1400;
  width: 2.25rem;
  max-width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .48rem;
  overflow: hidden;
  padding: 0 .63rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper-light) 84%, var(--ochre));
  border: 1px solid color-mix(in srgb, var(--ink-soft) 28%, var(--line));
  border-radius: 999px;
  box-shadow:
    2px 3px 0 rgba(42,32,24,.10),
    0 5px 14px rgba(42,32,24,.06);
  font-family: var(--mono-type);
  font-size: .63rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    max-width .24s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .18s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  max-width: 13.7rem;
  background: color-mix(in srgb, var(--paper-light) 74%, var(--ochre));
  transform: translateY(-1px);
  outline: none;
}

.theme-toggle-icon {
  flex: 0 0 1rem;
  width: 1rem;
  font-size: .93rem;
  line-height: 1;
  text-align: center;
}

.theme-toggle-copy {
  opacity: 0;
  transform: translateX(-.2rem);
  transition: opacity .16s ease .04s, transform .16s ease .04s;
}

.theme-toggle:hover .theme-toggle-copy,
.theme-toggle:focus-visible .theme-toggle-copy {
  opacity: 1;
  transform: translateX(0);
}


html[data-theme="dark"] {
  color-scheme: dark;

  --ground: #1a1d19;
  --paper: #1b1916;
  --paper-deep: #242019;
  --paper-light: #efe4ce;
  --ink: #eee4d0;
  --ink-soft: #bcae90;
  --line: #504838;

  --indigo: #8190c4;
  --indigo-deep: #6776ac;
  --olive: #95a36b;
  --sage: #a7b489;
  --rust: #cf7656;
  --terracotta: #d98e6c;
  --mustard: #c89a42;
  --ochre: #ddb95f;
  --teal: #79a49a;
  --plum: #9f829b;

  background: #171512;
}

html[data-theme="dark"] body {
  color: var(--ink);
  background:
    linear-gradient(rgba(27,25,22,.965), rgba(27,25,22,.965)),
    radial-gradient(rgba(222,185,95,.055) 1px, transparent 1px);
  background-size: auto, 5px 5px;
}

html[data-theme="dark"] ::selection {
  background: var(--rust);
  color: #fff5e5;
}

html[data-theme="dark"] a {
  text-decoration-color: color-mix(in srgb, var(--indigo) 55%, transparent);
}

html[data-theme="dark"] em {
  color: var(--ink);
}

html[data-theme="dark"] .theme-toggle {
  color: var(--ink);
  background: color-mix(in srgb, #28231c 88%, var(--indigo));
  border-color: color-mix(in srgb, var(--indigo) 34%, var(--line));
  box-shadow:
    2px 3px 0 rgba(0,0,0,.22),
    0 6px 16px rgba(0,0,0,.18);
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus-visible {
  background: color-mix(in srgb, #2b261f 78%, var(--indigo));
}

/* Home */
html[data-theme="dark"] .home-page {
  background:
    radial-gradient(circle at 9% 12%, rgba(207,118,86,.105) 0 6rem, transparent 17rem),
    radial-gradient(circle at 90% 24%, rgba(149,163,107,.095) 0 7rem, transparent 20rem),
    radial-gradient(circle at 63% 82%, rgba(129,144,196,.07) 0 8rem, transparent 23rem),
    repeating-linear-gradient(0deg, rgba(239,228,206,.012) 0 1px, transparent 1px 5px),
    #1b1916;
}

html[data-theme="dark"] .home-intro,
html[data-theme="dark"] .menu-desc,
html[data-theme="dark"] .lastfm-artist,
html[data-theme="dark"] .lastfm-album {
  color: var(--ink-soft);
}

html[data-theme="dark"] .home-stamp {
  color: var(--rust);
  background: rgba(200,154,66,.095);
  border-color: rgba(207,118,86,.52);
  box-shadow:
    2px 2px 0 rgba(0,0,0,.15),
    inset 0 0 0 1px rgba(239,228,206,.03);
}

html[data-theme="dark"] .lastfm-now,
html[data-theme="dark"] .home-page .lastfm-now {
  color: var(--ink);
  background:
    radial-gradient(circle at 90% 18%, rgba(221,185,95,.075), transparent 24%),
    repeating-linear-gradient(-9deg, rgba(207,118,86,.018) 0 1px, transparent 1px 7px),
    color-mix(in srgb, #242019 88%, var(--rust));
  border-color: color-mix(in srgb, var(--rust) 42%, var(--line));
  border-bottom-color: var(--rust);
  box-shadow:
    4px 5px 0 rgba(0,0,0,.18),
    0 10px 22px rgba(0,0,0,.16);
}

html[data-theme="dark"] .lastfm-now:hover,
html[data-theme="dark"] .lastfm-now:focus-visible {
  color: var(--ink);
  background:
    radial-gradient(circle at 90% 18%, rgba(221,185,95,.11), transparent 25%),
    repeating-linear-gradient(-9deg, rgba(207,118,86,.025) 0 1px, transparent 1px 7px),
    color-mix(in srgb, #29241d 84%, var(--rust));
}

html[data-theme="dark"] .lastfm-art {
  border-color: rgba(239,228,206,.10);
  box-shadow: 3px 3px 0 rgba(0,0,0,.25);
}

html[data-theme="dark"] .home-om,
html[data-theme="dark"] .inner-om,
html[data-theme="dark"] .home-footer .om,
html[data-theme="dark"] .page-footer .om {
  color: var(--indigo);
  text-shadow:
    0 0 26px rgba(129,144,196,.12),
    0 0 40px rgba(207,118,86,.08);
}

html[data-theme="dark"] .home-rule::before,
html[data-theme="dark"] .home-rule::after {
  background: var(--line);
}

html[data-theme="dark"] .home-switchboard,
html[data-theme="dark"] .home-page .home-switchboard {
  background:
    linear-gradient(
      90deg,
      rgba(149,163,107,.045),
      rgba(221,185,95,.025) 40%,
      rgba(207,118,86,.035) 72%,
      rgba(129,144,196,.03)
    ),
    #242019;
  border-color: rgba(188,174,144,.24);
  box-shadow: inset 0 0 0 3px rgba(239,228,206,.018);
}

html[data-theme="dark"] .home-switchboard a,
html[data-theme="dark"] .home-switchboard button,
html[data-theme="dark"] .home-page .home-switchboard a,
html[data-theme="dark"] .home-page .home-switchboard button {
  color: var(--ink-soft);
  background: rgba(239,228,206,.035);
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .home-switchboard a:hover,
html[data-theme="dark"] .home-switchboard a:focus-visible,
html[data-theme="dark"] .home-switchboard button:hover,
html[data-theme="dark"] .home-switchboard button:focus-visible {
  color: #fff4de;
  background: var(--indigo-deep);
  border-color: var(--indigo);
}


html[data-theme="dark"] .home-page .menu-card {
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 27%),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--accent) 2.2%, transparent) 0 1px,
      transparent 1px 6px
    ),
    color-mix(in srgb, var(--accent) 12%, #242019);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  border-left: 5px solid var(--accent);
  box-shadow:
    4px 5px 0 rgba(0,0,0,.14),
    0 7px 16px rgba(0,0,0,.08);
}

html[data-theme="dark"] .home-page .menu-card::before {
  background: linear-gradient(115deg, rgba(239,228,206,.025), transparent 48%);
}

html[data-theme="dark"] .home-page .menu-card:hover,
html[data-theme="dark"] .home-page .menu-card:focus-visible {
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 29%),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--accent) 3%, transparent) 0 1px,
      transparent 1px 6px
    ),
    color-mix(in srgb, var(--accent) 18%, #29241d);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  border-left-color: var(--accent);
  box-shadow:
    5px 7px 0 rgba(0,0,0,.16),
    0 10px 20px rgba(0,0,0,.12);
}

html[data-theme="dark"] .home-page .menu-symbol,
html[data-theme="dark"] .home-page .menu-number,
html[data-theme="dark"] .home-page .menu-arrow {
  color: var(--accent);
  text-shadow: none;
}

html[data-theme="dark"] .home-page .card-rust,
html[data-theme="dark"] .home-page .card-rust-soft,
html[data-theme="dark"] .home-page .card-olive,
html[data-theme="dark"] .home-page .card-sage,
html[data-theme="dark"] .home-page .card-indigo,
html[data-theme="dark"] .home-page .card-mustard,
html[data-theme="dark"] .home-page .card-teal,
html[data-theme="dark"] .home-page .card-plum {
  background-color: transparent;
}

html[data-theme="dark"] .webring-yard,
html[data-theme="dark"] .home-page .webring-yard {
  background:
    radial-gradient(circle at 14% 20%, rgba(207,118,86,.08), transparent 23%),
    radial-gradient(circle at 88% 18%, rgba(221,185,95,.11), transparent 27%),
    repeating-linear-gradient(-12deg, rgba(239,228,206,.012) 0 1px, transparent 1px 8px),
    #26211c;
  border-color: rgba(207,118,86,.22);
  box-shadow:
    5px 6px 0 rgba(0,0,0,.17),
    0 12px 24px rgba(0,0,0,.15);
}

html[data-theme="dark"] .webring-head p:not(.eyebrow),
html[data-theme="dark"] .socket-note {
  color: rgba(239,228,206,.62);
}

html[data-theme="dark"] .webring-socket,
html[data-theme="dark"] .home-page .webring-socket {
  background: linear-gradient(135deg, rgba(239,228,206,.025), transparent 60%);
  border-color: rgba(239,228,206,.18);
}

html[data-theme="dark"] .home-footer,
html[data-theme="dark"] .page-footer,
html[data-theme="dark"] .home-page .home-footer {
  color: var(--ink-soft);
}

/* Inner pages */
html[data-theme="dark"] .home-link {
  color: var(--ink-soft);
}

html[data-theme="dark"] .inner-title .eyebrow {
  color: var(--ink-soft);
}

html[data-theme="dark"] .section {
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(239,228,206,.022), transparent 58%),
    #211e19;
  border-color: rgba(188,174,144,.14);
  border-left-color: var(--section-accent, var(--indigo));
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
}

html[data-theme="dark"] .chart li,
html[data-theme="dark"] .notes-feed hr {
  border-color: rgba(188,174,144,.25);
}

html[data-theme="dark"] .chart .album,
html[data-theme="dark"] .chart li::before {
  color: var(--ink-soft);
}

html[data-theme="dark"] .photo {
  background: #29251f;
  border-color: rgba(188,174,144,.18);
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}

html[data-theme="dark"] .button-link {
  color: #fff3dd;
  background: var(--indigo-deep);
  border-color: var(--indigo);
}

html[data-theme="dark"] .button-link:hover,
html[data-theme="dark"] .button-link:focus-visible {
  color: #fff3dd;
  background: var(--rust);
  border-color: var(--rust);
}


html[data-theme="dark"] .radio,
html[data-theme="dark"] .home-page .radio {
  color: var(--paper-light);
  background: rgba(35,30,25,.96);
  border-color: rgba(239,228,206,.12);
  box-shadow:
    4px 5px 0 rgba(0,0,0,.18),
    0 12px 28px rgba(0,0,0,.20);
  backdrop-filter: blur(4px);
}

html[data-theme="dark"] .splash::before {
  background: #23221f;
}

html[data-theme="dark"] .splash {
  background: transparent;
}

html[data-theme="dark"] .splash-title,
html[data-theme="dark"] .splash-sound {
  color: var(--paper-light);
}

html[data-theme="dark"] .splash-tagline {
  color: rgba(239,228,206,.76);
}

html[data-theme="dark"] .splash-portrait-frame {
  background: #2b271f;
  border-color: rgba(239,228,206,.20);
  box-shadow: 0 8px 28px rgba(0,0,0,.30);
}


html.theme-ready body,
html.theme-ready .menu-card,
html.theme-ready .section,
html.theme-ready .lastfm-now,
html.theme-ready .home-switchboard,
html.theme-ready .theme-toggle {
  transition:
    color .24s ease,
    background-color .24s ease,
    border-color .24s ease,
    box-shadow .24s ease;
}

@media (max-width: 600px) {
  .theme-toggle {
    top: .55rem;
    right: .55rem;
  }

  .theme-toggle:hover,
  .theme-toggle:focus-visible {
    max-width: 12.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle-copy {
    transition: none;
  }
}

/* ---------------------------------------------------
   quiet return greeting
---------------------------------------------------- */
.return-greeting {
  margin: .55rem 0 0;
  color: var(--ink-soft);
  font-family: var(--mono-type);
  font-size: .68rem;
  letter-spacing: .04em;
  opacity: .72;
}

html[data-theme="dark"] .return-greeting {
  color: var(--ink-soft);
  opacity: .68;
}


.leave-behind {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) auto minmax(210px, .9fr);
  align-items: center;
  gap: 1rem 1.35rem;
  margin-top: 1rem;
  padding: 1rem 1.05rem;
  background:
    repeating-linear-gradient(-8deg, rgba(42,32,24,.015) 0 1px, transparent 1px 7px),
    color-mix(in srgb, var(--paper-light) 76%, var(--sage));
  border: 1px solid color-mix(in srgb, var(--olive) 24%, var(--line));
  box-shadow: 3px 4px 0 rgba(42,32,24,.035);
}

.leave-behind-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 400;
}

.leave-behind-copy p {
  max-width: 48ch;
  margin: .35rem 0 0;
  color: var(--ink-soft);
  font-size: .72rem;
  line-height: 1.45;
}

.leave-symbols {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .42rem;
}

.leave-symbol {
  --leave-accent: var(--rust);
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  color: var(--leave-accent);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.48), transparent 42%),
    color-mix(in srgb, var(--leave-accent) 9%, var(--paper-light));
  border: 1px solid color-mix(in srgb, var(--leave-accent) 34%, var(--line));
  border-radius: 50%;
  box-shadow: 2px 2px 0 rgba(42,32,24,.055);
  font-family: var(--serif-type);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.leave-symbol:hover,
.leave-symbol:focus-visible {
  transform: translateY(-2px) rotate(-1.5deg);
  border-color: color-mix(in srgb, var(--leave-accent) 62%, var(--line));
  box-shadow: 2px 4px 0 color-mix(in srgb, var(--leave-accent) 12%, transparent);
}

.leave-symbol.is-tucked {
  animation: leave-tuck .45s ease;
}

.leave-symbol-sun { --leave-accent: var(--mustard); }
.leave-symbol-star { --leave-accent: var(--rust); }
.leave-symbol-moon { --leave-accent: var(--indigo); }
.leave-symbol-music { --leave-accent: var(--olive); }
.leave-symbol-om { --leave-accent: var(--plum); font-family: var(--devanagari); }

@keyframes leave-tuck {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-4px) rotate(-3deg); }
}

.leave-history-wrap {
  min-width: 0;
  text-align: right;
}

.leave-history-label,
.leave-status {
  display: block;
  color: var(--ink-soft);
  font-size: .6rem;
  letter-spacing: .035em;
  text-transform: lowercase;
}

.leave-history {
  display: flex;
  min-height: 1.55rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .25rem;
  margin: .34rem 0 .3rem;
}

.leave-history-empty {
  color: color-mix(in srgb, var(--ink-soft) 70%, transparent);
  font-size: .66rem;
  font-style: italic;
}

.leave-history-mark {
  --leave-accent: var(--rust);
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  color: var(--leave-accent);
  background: color-mix(in srgb, var(--leave-accent) 8%, var(--paper-light));
  border: 1px solid color-mix(in srgb, var(--leave-accent) 24%, var(--line));
  border-radius: 50%;
  font-family: var(--serif-type);
  font-size: .72rem;
  line-height: 1;
  transform: rotate(-1deg);
}

.leave-history-mark:nth-child(2n) { transform: rotate(1.5deg); }
.leave-history-mark:nth-child(3n) { transform: rotate(-2deg); }
.leave-symbol-sun { --leave-accent: var(--mustard); }
.leave-symbol-star { --leave-accent: var(--rust); }
.leave-symbol-moon { --leave-accent: var(--indigo); }
.leave-symbol-music { --leave-accent: var(--olive); }
.leave-symbol-om { --leave-accent: var(--plum); }

html[data-theme="dark"] .leave-behind {
  color: var(--ink);
  background:
    repeating-linear-gradient(-8deg, rgba(239,228,206,.014) 0 1px, transparent 1px 7px),
    color-mix(in srgb, var(--sage) 7%, #242019);
  border-color: rgba(188,174,144,.17);
  box-shadow: 3px 4px 0 rgba(0,0,0,.11);
}

html[data-theme="dark"] .leave-symbol {
  background:
    radial-gradient(circle at 34% 28%, rgba(239,228,206,.035), transparent 42%),
    color-mix(in srgb, var(--leave-accent) 12%, #29251f);
  border-color: color-mix(in srgb, var(--leave-accent) 35%, rgba(188,174,144,.18));
  box-shadow: 2px 2px 0 rgba(0,0,0,.13);
}

html[data-theme="dark"] .leave-symbol:hover,
html[data-theme="dark"] .leave-symbol:focus-visible {
  border-color: color-mix(in srgb, var(--leave-accent) 55%, rgba(239,228,206,.2));
  box-shadow: 2px 4px 0 rgba(0,0,0,.16);
}

html[data-theme="dark"] .leave-history-mark {
  background: color-mix(in srgb, var(--leave-accent) 11%, #2a261f);
  border-color: color-mix(in srgb, var(--leave-accent) 28%, rgba(188,174,144,.16));
}

@media (max-width: 700px) {
  .leave-behind {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .leave-symbols {
    justify-content: flex-start;
  }

  .leave-history-wrap {
    text-align: left;
  }

  .leave-history {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leave-symbol {
    transition: none;
  }

  .leave-symbol.is-tucked {
    animation: none;
  }
}


body.receipt-open {
  overflow: hidden;
}

.receipt-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(35,29,22,.56);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .16s ease;
}

.receipt-overlay[hidden] {
  display: none;
}

.receipt-overlay.is-open {
  opacity: 1;
}

.site-receipt {
  position: relative;
  width: min(342px, 92vw);
  max-height: min(760px, 88vh);
  overflow: auto;
  padding: 1.05rem 1.15rem 1rem;
  color: #29231d;
  background:
    repeating-linear-gradient(0deg, rgba(82,67,49,.018) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(132,104,65,.025), transparent 22%, transparent 78%, rgba(132,104,65,.025)),
    #f2e9d5;
  border: 1px solid rgba(91,72,52,.28);
  box-shadow:
    5px 7px 0 rgba(24,18,13,.13),
    0 18px 48px rgba(20,15,10,.24);
  transform: translateY(7px) rotate(-.35deg);
  transition: transform .16s ease;
}

.receipt-overlay.is-open .site-receipt {
  transform: translateY(0) rotate(-.35deg);
}

.site-receipt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0 48%, rgba(94,73,48,.018) 50%, transparent 52% 100%);
}

.receipt-label {
  margin: 0 2rem .85rem 0;
  color: #75624d;
  font-family: var(--mono-type);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.receipt-close {
  position: absolute;
  top: .7rem;
  right: .72rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  color: #665441;
  background: transparent;
  border: 1px solid rgba(91,72,52,.25);
  border-radius: 50%;
  font: inherit;
  cursor: pointer;
}

.receipt-close:hover,
.receipt-close:focus-visible {
  color: #2c251e;
  border-color: rgba(91,72,52,.58);
  background: rgba(255,255,255,.28);
}

.receipt-text {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: visible;
  white-space: pre-wrap;
  word-break: normal;
  color: #2e271f;
  background: transparent;
  border: 0;
  font-family: var(--mono-type);
  font-size: .72rem;
  line-height: 1.52;
}

.receipt-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: .45rem;
  margin-top: 1rem;
  padding-top: .78rem;
  border-top: 1px dashed rgba(91,72,52,.32);
}

.receipt-actions button {
  padding: .3rem .58rem;
  color: #675541;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(91,72,52,.28);
  font-family: var(--mono-type);
  font-size: .65rem;
  cursor: pointer;
}

.receipt-actions button:hover,
.receipt-actions button:focus-visible {
  color: #f7efde;
  background: #625f83;
  border-color: #625f83;
}

.receipt-copy-status {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1em;
  margin-top: .45rem;
  color: #7b6852;
  font-family: var(--mono-type);
  font-size: .58rem;
}

html[data-theme="dark"] .receipt-overlay {
  background: rgba(8,7,6,.7);
}


html[data-theme="dark"] .site-receipt {
  color: #29231d;
  background:
    repeating-linear-gradient(0deg, rgba(82,67,49,.018) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(132,104,65,.025), transparent 22%, transparent 78%, rgba(132,104,65,.025)),
    #f2e9d5;
  border-color: rgba(91,72,52,.3);
  box-shadow:
    5px 7px 0 rgba(0,0,0,.23),
    0 22px 58px rgba(0,0,0,.45);
}

@media (max-width: 520px) {
  .receipt-overlay {
    padding: .75rem;
  }

  .site-receipt {
    width: min(350px, 94vw);
    max-height: 91vh;
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .receipt-overlay,
  .site-receipt {
    transition: none;
  }

  .site-receipt,
  .receipt-overlay.is-open .site-receipt {
    transform: none;
  }
}

@media print {
  @page {
    margin: 12mm;
  }

  body {
    background: #fff !important;
  }

  body > *:not(.receipt-overlay) {
    display: none !important;
  }

  .receipt-overlay,
  .receipt-overlay[hidden] {
    position: static !important;
    display: block !important;
    padding: 0 !important;
    background: #fff !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
  }

  .site-receipt,
  html[data-theme="dark"] .site-receipt {
    width: 76mm !important;
    max-height: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
    color: #000 !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .receipt-text {
    color: #000 !important;
  }

  .receipt-close,
  .receipt-actions,
  .receipt-copy-status {
    display: none !important;
  }
}

/* No AI Webring: compact official widget in the first station socket. */
.webring-socket-widget {
  display: grid;
  place-items: center;
  padding: .28rem;
  border-style: solid;
}

.webring-widget-wrap {
  width: 250px;
  height: 124px;
  max-width: 100%;
  overflow: hidden;
  line-height: 0;
}

.noai-widget {
  display: block;
  width: 250px;
  height: 124px;
  max-width: none;
  image-rendering: auto;
}

/* ---------------------------------------------------
   on rotation / Last.fm archive
--------------------------------------------------- */
.rotation-page .page-shell {
  width: min(980px, calc(100% - 2rem));
}

.rotation-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1rem;
  padding: .1rem .15rem;
}

.rotation-intro h2,
.panel-heading h2 {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
}

.rotation-intro p:last-child {
  margin: .45rem 0 0;
  color: var(--ink-soft);
}

.archive-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  margin-bottom: .14rem;
  padding: .32rem .52rem;
  color: var(--ink-soft);
  background: rgba(255,255,255,.24);
  border: 1px dashed rgba(92,77,60,.38);
  font-size: .68rem;
  line-height: 1.25;
}

.archive-status-light {
  width: .47rem;
  height: .47rem;
  border-radius: 50%;
  background: var(--mustard);
  box-shadow: 0 0 0 2px rgba(169,124,34,.12);
}

.archive-status.is-ready .archive-status-light {
  background: var(--olive);
  box-shadow: 0 0 8px rgba(86,100,47,.4);
}

.now-listening {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.55rem;
  min-height: 220px;
  padding: 1.1rem 1.2rem;
  overflow: hidden;
  color: var(--paper-light);
  background:
    radial-gradient(circle at 13% 24%, rgba(196,162,76,.14), transparent 22%),
    repeating-linear-gradient(-8deg, rgba(239,230,210,.018) 0 1px, transparent 1px 7px),
    #30251f;
  border: 1px solid rgba(42,32,24,.36);
  border-bottom: 5px solid var(--rust);
  box-shadow: 5px 7px 0 rgba(42,32,24,.10), 0 16px 28px rgba(42,32,24,.11);
}

.now-listening::after {
  content: "LAST.FM / DEANDRO";
  position: absolute;
  right: -1.4rem;
  bottom: 1.1rem;
  color: rgba(239,230,210,.045);
  font-family: var(--serif-type);
  font-size: clamp(2.3rem, 8vw, 5rem);
  letter-spacing: -.04em;
  line-height: .8;
  pointer-events: none;
  transform: rotate(-3deg);
}

.now-record {
  position: relative;
  z-index: 1;
  width: 180px;
  height: 180px;
}

.now-record-disc {
  position: absolute;
  inset: 4px 0 4px 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #b1882f 0 7%, #efe6d2 7.5% 9%, #1a1714 9.5% 17%, transparent 17.5%),
    repeating-radial-gradient(circle, #181512 0 2px, #27211c 3px 4px);
  border: 1px solid rgba(239,230,210,.1);
  box-shadow: 5px 7px 12px rgba(0,0,0,.32);
  transform: translateX(14px);
}

.now-cover-wrap {
  position: absolute;
  top: 15px;
  left: 0;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--paper-light);
  background:
    linear-gradient(145deg, rgba(196,162,76,.28), rgba(156,74,46,.38)),
    #4d3328;
  border: 4px solid #e2d5ba;
  box-shadow: 5px 6px 0 rgba(0,0,0,.3);
  transform: rotate(-1.5deg);
}

.now-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.now-cover-fallback {
  font-family: var(--serif-type);
  font-size: 3.7rem;
  opacity: .84;
}

.now-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.now-kicker {
  display: flex;
  align-items: center;
  gap: .46rem;
  margin: 0 0 .45rem;
  color: var(--ochre);
  font-family: var(--serif-type);
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.now-live-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: rgba(239,230,210,.35);
}

.now-live-dot.is-live {
  background: #9cba73;
  box-shadow: 0 0 10px rgba(156,186,115,.72);
  animation: rotation-live-pulse 1.7s ease-out infinite;
}

@keyframes rotation-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(156,186,115,.45), 0 0 9px rgba(156,186,115,.55); }
  55% { box-shadow: 0 0 0 6px rgba(156,186,115,0), 0 0 13px rgba(156,186,115,.7); }
}

.now-track {
  max-width: 18ch;
  overflow: hidden;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  line-height: 1.05;
  text-overflow: ellipsis;
}

.now-artist {
  margin: .55rem 0 0;
  color: var(--paper-light);
  font-size: 1.03rem;
  font-weight: 700;
}

.now-album {
  margin: .08rem 0 .72rem;
  color: rgba(239,230,210,.68);
  font-size: .82rem;
}

.now-link {
  color: var(--ochre);
  font-size: .72rem;
  text-decoration-color: rgba(196,162,76,.5);
}

.now-link:hover,
.now-link:focus-visible {
  color: var(--paper-light);
}

.now-stamp {
  position: relative;
  z-index: 2;
  align-self: start;
  display: inline-block;
  margin: .2rem .15rem 0 0;
  padding: .25rem .42rem .19rem;
  color: var(--terracotta);
  border: 1px solid currentColor;
  font-family: var(--serif-type);
  font-size: .62rem;
  line-height: 1.15;
  text-transform: uppercase;
  transform: rotate(2.5deg);
}

.listening-numbers,
.activity-panel,
.archive-panel {
  margin-top: 1.15rem;
  padding: 1.2rem 1.25rem 1.3rem;
  background:
    repeating-linear-gradient(0deg, rgba(42,32,24,.012) 0 1px, transparent 1px 6px),
    rgba(255,255,255,.25);
  border: 1px solid rgba(42,32,24,.13);
  box-shadow: 4px 5px 0 rgba(42,32,24,.055);
}

.listening-numbers { border-top: 4px solid var(--mustard); }
.activity-panel { border-top: 4px solid var(--indigo); }
.archive-panel { border-top: 4px solid var(--rust); }

.panel-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.panel-heading .eyebrow { margin-bottom: .25rem; }

.panel-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: .68rem;
  text-align: right;
}

.number-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px dotted rgba(92,77,60,.38);
  border-bottom: 1px dotted rgba(92,77,60,.38);
}

.number-grid > div {
  position: relative;
  padding: .9rem 1rem .8rem;
  text-align: center;
}

.number-grid > div + div { border-left: 1px dotted rgba(92,77,60,.38); }

.number-grid dt {
  color: var(--ink-soft);
  font-family: var(--serif-type);
  font-size: .63rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.number-grid dd {
  margin: .08rem 0 0;
  color: var(--indigo);
  font-family: var(--serif-type);
  font-size: clamp(1.6rem, 4vw, 2.35rem);
  line-height: 1.15;
}

.activity-chart-wrap {
  position: relative;
  padding: .1rem 0 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(92,77,60,.035) 50%, transparent 50.2%),
    rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(92,77,60,.18);
}

.activity-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.activity-grid-line {
  stroke: rgba(92,77,60,.22);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}

.activity-axis-label {
  fill: var(--ink-soft);
  font-family: var(--mono-type);
  font-size: 10px;
}

.activity-area {
  fill: color-mix(in srgb, var(--indigo) 12%, transparent);
}

.activity-line {
  fill: none;
  stroke: var(--indigo);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.activity-point-hit {
  fill: transparent;
  outline: none;
}

.activity-point-dot {
  fill: var(--paper-light);
  stroke: var(--rust);
  stroke-width: 2;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.activity-point:hover .activity-point-dot,
.activity-point:focus-within .activity-point-dot {
  fill: var(--rust);
  r: 5px;
}

.chart-empty,
.bar-chart-empty {
  display: grid;
  min-height: 180px;
  margin: 0;
  place-items: center;
  color: var(--ink-soft);
  font-size: .8rem;
  font-style: italic;
  text-align: center;
}

.chart-controls {
  display: grid;
  gap: .65rem;
  margin-bottom: 1.1rem;
  padding: .7rem .75rem;
  background: rgba(42,32,24,.035);
  border: 1px dotted rgba(92,77,60,.38);
}

.control-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
}

.control-label {
  width: 3.6rem;
  color: var(--ink-soft);
  font-family: var(--serif-type);
  font-size: .61rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.control-group button {
  min-height: 2rem;
  padding: .3rem .58rem;
  color: var(--ink-soft);
  background: var(--paper-light);
  border: 1px solid rgba(92,77,60,.3);
  border-radius: 0;
  font: inherit;
  font-size: .69rem;
  cursor: pointer;
  box-shadow: 1px 2px 0 rgba(42,32,24,.06);
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.control-group button:hover,
.control-group button:focus-visible {
  color: var(--rust);
  border-color: var(--rust);
  transform: translateY(-1px);
}

.control-group button.is-active {
  color: var(--paper-light);
  background: var(--indigo);
  border-color: var(--indigo);
}

.chart-kind button.is-active {
  background: var(--rust);
  border-color: var(--rust);
}

.bar-chart {
  display: grid;
  gap: .22rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.bar-row {
  display: grid;
  grid-template-columns: 2.1rem 2.7rem minmax(145px, 1.1fr) minmax(180px, 1.7fr) 4rem;
  align-items: center;
  gap: .62rem;
  min-height: 3.25rem;
  padding: .25rem .35rem;
  border-bottom: 1px dotted rgba(92,77,60,.3);
}

.bar-row:hover {
  background: linear-gradient(90deg, rgba(156,74,46,.055), transparent 72%);
}

.bar-rank {
  color: var(--rust);
  font-family: var(--serif-type);
  font-size: .72rem;
}

.bar-art {
  position: relative;
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  overflow: hidden;
  color: var(--paper-light);
  background: linear-gradient(145deg, var(--teal), var(--indigo-deep));
  border: 1px solid rgba(42,32,24,.18);
  box-shadow: 2px 2px 0 rgba(42,32,24,.1);
}

.bar-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bar-art-fallback {
  font-family: var(--serif-type);
  font-size: 1.05rem;
}

.bar-title-wrap {
  min-width: 0;
  display: block;
  color: var(--ink);
  text-decoration: none;
}

a.bar-title-wrap:hover,
a.bar-title-wrap:focus-visible { color: var(--rust); }

.bar-title,
.bar-subtitle {
  display: block;
  overflow: hidden;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-title { font-size: .79rem; }

.bar-subtitle {
  margin-top: .12rem;
  color: var(--ink-soft);
  font-size: .65rem;
}

.bar-track {
  position: relative;
  height: 1.05rem;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(92,77,60,.11) 0 1px, transparent 1px 12.5%),
    rgba(42,32,24,.045);
  border-bottom: 1px solid rgba(92,77,60,.22);
}

.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 5px),
    var(--indigo);
  transition: width .7s cubic-bezier(.22,.8,.26,1);
}

.bar-row:nth-child(3n + 2) .bar-fill { background-color: var(--rust); }
.bar-row:nth-child(3n) .bar-fill { background-color: var(--olive); }
.bars-ready .bar-fill { width: var(--bar-size); }

.bar-count {
  color: var(--ink-soft);
  font-family: var(--serif-type);
  font-size: .71rem;
  text-align: right;
}

.lastfm-credit {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: 1rem .15rem 0;
  color: var(--ink-soft);
  font-size: .69rem;
}

.lastfm-credit > span {
  color: var(--teal);
  font-size: 1.15rem;
  line-height: 1.25;
}

.lastfm-credit p { margin: 0; }

html[data-theme="dark"] .archive-status,
html[data-theme="dark"] .listening-numbers,
html[data-theme="dark"] .activity-panel,
html[data-theme="dark"] .archive-panel {
  background:
    repeating-linear-gradient(0deg, rgba(239,228,206,.012) 0 1px, transparent 1px 6px),
    #211e19;
  border-color: rgba(188,174,144,.16);
  box-shadow: 4px 5px 0 rgba(0,0,0,.13);
}

html[data-theme="dark"] .listening-numbers { border-top-color: var(--mustard); }
html[data-theme="dark"] .activity-panel { border-top-color: var(--indigo); }
html[data-theme="dark"] .archive-panel { border-top-color: var(--rust); }

html[data-theme="dark"] .archive-status {
  color: var(--ink-soft);
  background: rgba(239,228,206,.025);
  border-color: rgba(188,174,144,.28);
}

html[data-theme="dark"] .now-listening {
  background:
    radial-gradient(circle at 13% 24%, rgba(221,185,95,.11), transparent 22%),
    repeating-linear-gradient(-8deg, rgba(239,228,206,.018) 0 1px, transparent 1px 7px),
    #29211d;
  border-color: rgba(188,174,144,.18);
  border-bottom-color: var(--rust);
  box-shadow: 5px 7px 0 rgba(0,0,0,.22), 0 16px 28px rgba(0,0,0,.18);
}

html[data-theme="dark"] .number-grid,
html[data-theme="dark"] .number-grid > div + div,
html[data-theme="dark"] .bar-row,
html[data-theme="dark"] .activity-chart-wrap {
  border-color: rgba(188,174,144,.22);
}

html[data-theme="dark"] .chart-controls {
  background: rgba(239,228,206,.025);
  border-color: rgba(188,174,144,.24);
}

html[data-theme="dark"] .control-group button {
  color: var(--ink-soft);
  background: #29251f;
  border-color: rgba(188,174,144,.25);
  box-shadow: 1px 2px 0 rgba(0,0,0,.15);
}

html[data-theme="dark"] .control-group button.is-active {
  color: #fff3dd;
  background: var(--indigo-deep);
  border-color: var(--indigo);
}

html[data-theme="dark"] .chart-kind button.is-active {
  background: var(--rust);
  border-color: var(--rust);
}

html[data-theme="dark"] .bar-title-wrap { color: var(--ink); }

html[data-theme="dark"] .bar-track {
  background:
    repeating-linear-gradient(90deg, rgba(239,228,206,.09) 0 1px, transparent 1px 12.5%),
    rgba(239,228,206,.035);
  border-color: rgba(188,174,144,.2);
}

html[data-theme="dark"] .activity-grid-line { stroke: rgba(188,174,144,.19); }
html[data-theme="dark"] .activity-area { fill: color-mix(in srgb, var(--indigo) 13%, transparent); }
html[data-theme="dark"] .activity-point-dot { fill: #211e19; }

@media (max-width: 720px) {
  .rotation-intro,
  .panel-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: .55rem;
  }

  .archive-status,
  .panel-note { text-align: left; }

  .now-listening {
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 1rem;
    min-height: 185px;
  }

  .now-record {
    width: 132px;
    height: 132px;
  }

  .now-record-disc { inset: 3px 0 3px 12px; }

  .now-cover-wrap {
    top: 11px;
    width: 110px;
    height: 110px;
    border-width: 3px;
  }

  .now-stamp {
    position: absolute;
    right: .75rem;
    top: .65rem;
  }

  .number-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .number-grid > div:nth-child(3) { border-left: 0; }
  .number-grid > div:nth-child(n + 3) { border-top: 1px dotted rgba(92,77,60,.38); }

  .bar-row {
    grid-template-columns: 1.8rem 2.5rem minmax(0, 1fr) 3.5rem;
    grid-template-areas:
      "rank art title count"
      ". art graph graph";
    gap: .28rem .5rem;
    padding: .38rem .25rem .5rem;
  }

  .bar-rank { grid-area: rank; }
  .bar-art { grid-area: art; width: 2.5rem; height: 2.5rem; }
  .bar-title-wrap { grid-area: title; }
  .bar-track { grid-area: graph; height: .72rem; }
  .bar-count { grid-area: count; }
}

@media (max-width: 480px) {
  .rotation-page .page-shell { width: min(100% - 1.1rem, 980px); }

  .now-listening {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 148px;
    padding: .8rem;
  }

  .now-record {
    width: 88px;
    height: 88px;
  }

  .now-record-disc { inset: 2px 0 2px 8px; transform: translateX(8px); }

  .now-cover-wrap {
    top: 8px;
    width: 74px;
    height: 74px;
  }

  .now-cover-fallback { font-size: 2rem; }
  .now-track { font-size: 1.45rem; }
  .now-artist { font-size: .86rem; }
  .now-album { font-size: .7rem; }
  .now-stamp { display: none; }

  .listening-numbers,
  .activity-panel,
  .archive-panel { padding: 1rem .8rem 1.1rem; }

  .control-label { width: 100%; }
  .control-group button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .now-live-dot.is-live { animation: none; }
  .bar-fill { transition: none; }
}

/* ---------------------------------------------------
   on rotation / Discogs wantlist
--------------------------------------------------- */
.discogs-panel {
  margin-top: 2.65rem;
  padding: 1.35rem 1.25rem 1.45rem;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(92,77,60,.025) 50%, transparent 50.2%),
    repeating-linear-gradient(0deg, rgba(42,32,24,.012) 0 1px, transparent 1px 6px),
    rgba(255,255,255,.25);
  border: 1px solid rgba(42,32,24,.13);
  border-top: 4px solid var(--teal);
  box-shadow: 4px 5px 0 rgba(42,32,24,.055);
}

.discogs-heading { align-items: flex-start; }

.discogs-intro {
  max-width: 46rem;
  margin: .38rem 0 0;
  color: var(--ink-soft);
  font-size: .77rem;
}

.discogs-status {
  display: grid;
  gap: .12rem;
  min-width: 9rem;
  padding: .48rem .58rem;
  text-align: right;
  border: 1px dotted rgba(92,77,60,.38);
}

.discogs-status strong {
  color: var(--teal);
  font-family: var(--serif-type);
  font-size: 1rem;
}

.discogs-status span {
  color: var(--ink-soft);
  font-size: .6rem;
}

.discogs-tools {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) minmax(285px, 2fr) minmax(145px, .8fr) auto;
  align-items: end;
  gap: .7rem;
  margin: 1rem 0 1.15rem;
  padding: .75rem;
  background: rgba(42,32,24,.035);
  border: 1px dotted rgba(92,77,60,.38);
}

.wantlist-search,
.wantlist-sort {
  display: grid;
  gap: .3rem;
  color: var(--ink-soft);
  font-family: var(--serif-type);
  font-size: .61rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.wantlist-search input,
.wantlist-sort select {
  width: 100%;
  min-height: 2.25rem;
  padding: .42rem .55rem;
  color: var(--ink);
  background: var(--paper-light);
  border: 1px solid rgba(92,77,60,.32);
  border-radius: 0;
  font: .7rem var(--mono-type);
}

.wantlist-search input:focus,
.wantlist-sort select:focus {
  outline: 2px solid color-mix(in srgb, var(--teal) 60%, transparent);
  outline-offset: 1px;
}

.wantlist-format {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem;
}

.wantlist-format .control-label { width: 100%; }

.wantlist-format button,
.wantlist-random,
.wantlist-more,
.wantlist-pick-again {
  min-height: 2.25rem;
  padding: .38rem .58rem;
  color: var(--ink-soft);
  background: var(--paper-light);
  border: 1px solid rgba(92,77,60,.3);
  border-radius: 0;
  font: .68rem var(--mono-type);
  cursor: pointer;
  box-shadow: 1px 2px 0 rgba(42,32,24,.06);
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.wantlist-format button:hover,
.wantlist-format button:focus-visible,
.wantlist-random:hover,
.wantlist-random:focus-visible,
.wantlist-more:hover,
.wantlist-more:focus-visible,
.wantlist-pick-again:hover,
.wantlist-pick-again:focus-visible {
  color: var(--teal);
  border-color: var(--teal);
  transform: translateY(-1px);
}

.wantlist-format button.is-active {
  color: var(--paper-light);
  background: var(--teal);
  border-color: var(--teal);
}

.wantlist-random {
  color: var(--paper-light);
  background: var(--rust);
  border-color: var(--rust);
  white-space: nowrap;
}

.wantlist-random:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.wantlist-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem .8rem;
}

.wantlist-card {
  min-width: 0;
  padding: .48rem .48rem .62rem;
  background: color-mix(in srgb, var(--paper-light) 68%, transparent);
  border: 1px solid rgba(92,77,60,.22);
  box-shadow: 2px 3px 0 rgba(42,32,24,.055);
  transition: transform .18s ease, box-shadow .18s ease;
}

.wantlist-card:nth-child(4n + 2) { transform: rotate(.35deg); }
.wantlist-card:nth-child(4n + 3) { transform: rotate(-.3deg); }

.wantlist-card:hover,
.wantlist-card:focus-within {
  position: relative;
  z-index: 1;
  transform: translateY(-3px) rotate(0);
  box-shadow: 4px 6px 0 rgba(42,32,24,.09);
}

.wantlist-card-link {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.wantlist-cover {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  color: var(--paper-light);
  background:
    radial-gradient(circle, transparent 0 9%, rgba(239,230,210,.16) 9.5% 11%, transparent 11.5%),
    repeating-radial-gradient(circle, #2c2926 0 2px, #191817 3px 5px);
  border: 1px solid rgba(42,32,24,.25);
}

.wantlist-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13);
}

.wantlist-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wantlist-cover-fallback {
  font-family: var(--serif-type);
  font-size: clamp(1.5rem, 5vw, 3rem);
}

.wantlist-card-copy {
  display: grid;
  gap: .16rem;
  min-width: 0;
  padding: .55rem .15rem .05rem;
}

.wantlist-card-copy strong,
.wantlist-card-title,
.wantlist-card-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wantlist-card-copy strong {
  font-size: .76rem;
  line-height: 1.3;
}

.wantlist-card-title {
  color: var(--ink-soft);
  font-size: .67rem;
}

.wantlist-card-meta {
  margin-top: .15rem;
  color: var(--rust);
  font-family: var(--serif-type);
  font-size: .59rem;
  text-transform: uppercase;
}

.wantlist-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 190px;
  margin: 0;
  place-items: center;
  color: var(--ink-soft);
  font-size: .78rem;
  font-style: italic;
  text-align: center;
}

.wantlist-more {
  display: block;
  margin: 1.2rem auto 0;
}

.wantlist-more[hidden] { display: none; }

.wantlist-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 330px) auto;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 1.2rem;
  padding: 1rem;
  background:
    radial-gradient(circle at 15% 25%, rgba(196,162,76,.15), transparent 26%),
    color-mix(in srgb, var(--teal) 8%, var(--paper-light));
  border: 1px dashed var(--teal);
}

.wantlist-pick[hidden] { display: none; }

.wantlist-pick .wantlist-card {
  width: 100%;
  transform: rotate(-.5deg);
}

.wantlist-pick .wantlist-card-link {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
}

.wantlist-pick-label {
  max-width: 6rem;
  margin: 0;
  color: var(--teal);
  font-family: var(--serif-type);
  font-size: .66rem;
  line-height: 1.4;
  text-align: right;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.wantlist-pick-again { color: var(--teal); }

.discogs-attribution {
  display: grid;
  gap: .35rem;
  margin: 1.35rem 0 0;
  padding-top: .75rem;
  color: var(--ink-soft);
  border-top: 1px dotted rgba(92,77,60,.35);
  font-size: .61rem;
  line-height: 1.5;
}

.discogs-attribution p { margin: 0; }
.discogs-attribution a { color: var(--teal); }

html[data-theme="dark"] .discogs-panel {
  background:
    repeating-linear-gradient(0deg, rgba(239,228,206,.012) 0 1px, transparent 1px 6px),
    #211e19;
  border-color: rgba(188,174,144,.16);
  border-top-color: var(--teal);
  box-shadow: 4px 5px 0 rgba(0,0,0,.13);
}

html[data-theme="dark"] .discogs-tools,
html[data-theme="dark"] .wantlist-card {
  background: rgba(239,228,206,.025);
  border-color: rgba(188,174,144,.22);
}

html[data-theme="dark"] .wantlist-search input,
html[data-theme="dark"] .wantlist-sort select,
html[data-theme="dark"] .wantlist-format button,
html[data-theme="dark"] .wantlist-more,
html[data-theme="dark"] .wantlist-pick-again {
  color: var(--ink);
  background: #29251f;
  border-color: rgba(188,174,144,.25);
}

html[data-theme="dark"] .wantlist-format button.is-active {
  color: #fff3dd;
  background: var(--teal);
  border-color: var(--teal);
}

html[data-theme="dark"] .wantlist-random {
  color: #fff3dd;
  background: var(--rust);
  border-color: var(--rust);
}

html[data-theme="dark"] .wantlist-pick {
  background:
    radial-gradient(circle at 15% 25%, rgba(196,162,76,.09), transparent 26%),
    #25221d;
}

@media (max-width: 900px) {
  .discogs-tools { grid-template-columns: 1fr 1.5fr; }
  .wantlist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .discogs-panel { padding: 1rem .8rem 1.15rem; }
  .discogs-heading { gap: .7rem; }
  .discogs-status { text-align: left; }
  .discogs-tools { grid-template-columns: 1fr; }
  .wantlist-random { width: 100%; }
  .wantlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wantlist-pick { grid-template-columns: 1fr; }
  .wantlist-pick-label { max-width: none; text-align: center; }
  .wantlist-pick .wantlist-card { max-width: 330px; margin: 0 auto; }
  .wantlist-pick-again { justify-self: center; }
}

@media (max-width: 380px) {
  .wantlist-grid { gap: .65rem .5rem; }
  .wantlist-card { padding: .36rem .36rem .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wantlist-card,
  .wantlist-format button,
  .wantlist-random,
  .wantlist-more,
  .wantlist-pick-again { transition: none; }
}

/* ---------------------------------------------------
   chess / scorebook
--------------------------------------------------- */
.chess-page .page-shell { width: min(960px, calc(100% - 2rem)); }

.chess-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.45rem 1.35rem;
  background:
    linear-gradient(135deg, rgba(196,162,76,.12), transparent 55%),
    repeating-linear-gradient(0deg, rgba(42,32,24,.012) 0 1px, transparent 1px 6px),
    rgba(255,255,255,.24);
  border: 1px solid rgba(42,32,24,.13);
  border-left: 5px solid var(--mustard);
  box-shadow: 4px 5px 0 rgba(42,32,24,.055);
}

.chess-intro h2 {
  margin: .1rem 0 .55rem;
  font-size: clamp(1.5rem, 4vw, 2.15rem);
}

.chess-intro p:not(.eyebrow) {
  max-width: 63ch;
  margin: 0 0 .8rem;
  color: var(--ink-soft);
  font-size: .79rem;
  line-height: 1.65;
}

.chess-status {
  display: grid;
  width: 150px;
  min-height: 138px;
  padding: .8rem;
  place-items: center;
  align-content: center;
  gap: .55rem;
  color: var(--ink-soft);
  background:
    linear-gradient(45deg, rgba(42,32,24,.045) 25%, transparent 25% 75%, rgba(42,32,24,.045) 75%),
    linear-gradient(45deg, rgba(42,32,24,.045) 25%, transparent 25% 75%, rgba(42,32,24,.045) 75%),
    rgba(255,255,255,.2);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  border: 1px solid rgba(92,77,60,.28);
  font-size: .61rem;
  line-height: 1.45;
  text-align: center;
}

.chess-status-piece {
  color: var(--indigo);
  font-size: 3.1rem;
  line-height: 1;
}

.chess-status.is-ready .chess-status-piece { color: var(--olive); }
.chess-status.needs-setup .chess-status-piece { color: var(--rust); }

.chess-panel {
  margin-top: 1.15rem;
  padding: 1.25rem 1.25rem 1.35rem;
  background:
    repeating-linear-gradient(0deg, rgba(42,32,24,.012) 0 1px, transparent 1px 6px),
    rgba(255,255,255,.25);
  border: 1px solid rgba(42,32,24,.13);
  box-shadow: 4px 5px 0 rgba(42,32,24,.055);
}

.chess-ratings-panel { border-top: 4px solid var(--indigo); }
.chess-recent-panel { border-top: 4px solid var(--rust); }
.chess-featured-panel { border-top: 4px solid var(--olive); }

.chess-rating-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}

.chess-rating-card {
  position: relative;
  min-width: 0;
  padding: .85rem .82rem .75rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper-light) 72%, transparent);
  border: 1px solid rgba(92,77,60,.22);
}

.chess-rating-card::after {
  content: '';
  position: absolute;
  right: -.9rem;
  bottom: -.9rem;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(92,77,60,.08);
  border-radius: 50%;
}

.chess-rating-card:nth-child(2) { border-bottom: 3px solid var(--rust); }
.chess-rating-card:nth-child(3) { border-bottom: 3px solid var(--mustard); }
.chess-rating-card:nth-child(4) { border-bottom: 3px solid var(--teal); }
.chess-rating-card:first-child { border-bottom: 3px solid var(--indigo); }
.chess-rating-card.is-unrated { opacity: .62; }

.chess-rating-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.chess-rating-heading span {
  color: var(--rust);
  font-size: 1.25rem;
}

.chess-rating-heading h3 {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--serif-type);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.chess-rating-current {
  display: block;
  margin: .5rem 0 .22rem;
  color: var(--indigo);
  font-family: var(--serif-type);
  font-size: clamp(1.55rem, 4vw, 2.25rem);
  font-weight: 400;
  line-height: 1;
}

.chess-rating-meta {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: .59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chess-game-list {
  display: grid;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chess-game-row {
  display: grid;
  grid-template-columns: 2rem 3.2rem minmax(150px, 1.5fr) minmax(145px, 1fr) 3rem 3.2rem;
  align-items: center;
  gap: .65rem;
  min-height: 3.75rem;
  padding: .45rem .4rem;
  border-bottom: 1px dotted rgba(92,77,60,.34);
}

.chess-game-row:hover {
  background: linear-gradient(90deg, rgba(196,162,76,.07), transparent 78%);
}

.chess-game-rank {
  color: var(--rust);
  font-family: var(--serif-type);
  font-size: .68rem;
}

.chess-result-badge {
  display: inline-block;
  padding: .2rem .28rem .16rem;
  color: var(--paper-light);
  background: var(--rust);
  font-family: var(--serif-type);
  font-size: .58rem;
  text-align: center;
  text-transform: uppercase;
}

.result-win .chess-result-badge { background: var(--olive); }
.result-draw .chess-result-badge { background: var(--teal); }

.chess-game-copy,
.chess-game-copy strong,
.chess-game-copy span {
  display: block;
  min-width: 0;
}

.chess-game-copy strong,
.chess-game-copy span,
.chess-game-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chess-game-copy strong { font-size: .76rem; }

.chess-game-copy span {
  margin-top: .16rem;
  color: var(--ink-soft);
  font-size: .63rem;
}

.chess-game-meta {
  color: var(--ink-soft);
  font-size: .61rem;
  text-transform: lowercase;
}

.chess-game-rating {
  color: var(--indigo);
  font-family: var(--serif-type);
  font-size: .72rem;
  text-align: right;
}

.chess-game-link {
  color: var(--rust);
  font-size: .65rem;
  text-align: right;
  text-decoration-color: rgba(156,74,46,.38);
}

.chess-featured-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: -.2rem 0 .85rem;
}

.chess-featured-tabs[hidden] { display: none; }

.chess-featured-tabs button {
  min-height: 1.9rem;
  padding: .28rem .55rem;
  color: var(--ink-soft);
  background: var(--paper-light);
  border: 1px solid rgba(92,77,60,.3);
  border-radius: 0;
  font: .63rem var(--mono-type);
  cursor: pointer;
}

.chess-featured-tabs button:hover,
.chess-featured-tabs button:focus-visible {
  color: var(--olive);
  border-color: var(--olive);
}

.chess-featured-tabs button.is-active {
  color: var(--paper-light);
  background: var(--olive);
  border-color: var(--olive);
}

.chess-featured {
  display: grid;
  grid-template-columns: minmax(260px, 430px) minmax(0, 1fr);
  align-items: center;
  gap: 1.4rem;
  min-height: 300px;
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
  background: var(--paper-deep);
  border: 7px solid #4a3728;
  box-shadow: 5px 7px 0 rgba(42,32,24,.12), inset 0 0 0 1px rgba(255,255,255,.12);
}

.chess-square {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  font-family: 'DejaVu Sans', 'Arial Unicode MS', serif;
  font-size: clamp(1.3rem, 5vw, 2.65rem);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
}

.chess-square.is-light { background: #d9c896; }
.chess-square.is-dark { background: #66704a; }

.chess-featured-copy { min-width: 0; }
.chess-featured-copy .eyebrow { color: var(--olive); }

.chess-featured-copy h3 {
  margin: .28rem 0 .3rem;
  font-size: clamp(1.18rem, 3vw, 1.75rem);
}

.chess-featured-opening {
  margin: 0;
  color: var(--ink-soft);
  font-style: italic;
}

.chess-featured-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1rem 0 .8rem;
  border-top: 1px dotted rgba(92,77,60,.35);
  border-bottom: 1px dotted rgba(92,77,60,.35);
}

.chess-featured-facts div { padding: .55rem .3rem; }
.chess-featured-facts div:nth-child(even) { border-left: 1px dotted rgba(92,77,60,.35); }
.chess-featured-facts div:nth-child(n + 3) { border-top: 1px dotted rgba(92,77,60,.35); }

.chess-featured-facts dt {
  color: var(--ink-soft);
  font-family: var(--serif-type);
  font-size: .57rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.chess-featured-facts dd {
  margin: .15rem 0 0;
  color: var(--indigo);
  font-size: .76rem;
}

.chess-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 150px;
  margin: 0;
  place-items: center;
  color: var(--ink-soft);
  font-size: .77rem;
  font-style: italic;
  text-align: center;
}

.chess-credit {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: 1rem .15rem 0;
  color: var(--ink-soft);
  font-size: .65rem;
}

.chess-credit > span {
  color: var(--mustard);
  font-size: 1.25rem;
  line-height: 1;
}

.chess-credit p { margin: 0; }
.chess-credit a { color: var(--indigo); }

html[data-theme="dark"] .chess-intro,
html[data-theme="dark"] .chess-panel {
  background:
    repeating-linear-gradient(0deg, rgba(239,228,206,.012) 0 1px, transparent 1px 6px),
    #211e19;
  border-color: rgba(188,174,144,.16);
  box-shadow: 4px 5px 0 rgba(0,0,0,.13);
}

html[data-theme="dark"] .chess-intro { border-left-color: var(--mustard); }
html[data-theme="dark"] .chess-ratings-panel { border-top-color: var(--indigo); }
html[data-theme="dark"] .chess-recent-panel { border-top-color: var(--rust); }
html[data-theme="dark"] .chess-featured-panel { border-top-color: var(--olive); }

html[data-theme="dark"] .chess-status,
html[data-theme="dark"] .chess-rating-card {
  background-color: rgba(239,228,206,.025);
  border-color: rgba(188,174,144,.22);
}

html[data-theme="dark"] .chess-game-row,
html[data-theme="dark"] .chess-featured-facts,
html[data-theme="dark"] .chess-featured-facts div {
  border-color: rgba(188,174,144,.22);
}

html[data-theme="dark"] .chess-featured-tabs button {
  color: var(--ink);
  background: #29251f;
  border-color: rgba(188,174,144,.25);
}

html[data-theme="dark"] .chess-featured-tabs button.is-active {
  color: #fff3dd;
  background: var(--olive);
  border-color: var(--olive);
}

@media (max-width: 760px) {
  .chess-intro,
  .chess-featured {
    grid-template-columns: 1fr;
  }

  .chess-status {
    width: 100%;
    min-height: 92px;
    grid-template-columns: auto 1fr;
    text-align: left;
  }

  .chess-status-piece { font-size: 2.5rem; }
  .chess-rating-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chess-board { max-width: 480px; margin: 0 auto; }

  .chess-game-row {
    grid-template-columns: 1.8rem 3rem minmax(0, 1fr) 3rem;
    grid-template-areas:
      "rank result copy rating"
      ". . meta link";
    gap: .3rem .5rem;
    padding: .55rem .3rem;
  }

  .chess-game-rank { grid-area: rank; }
  .chess-result-badge { grid-area: result; }
  .chess-game-copy { grid-area: copy; }
  .chess-game-meta { grid-area: meta; }
  .chess-game-rating { grid-area: rating; }
  .chess-game-link { grid-area: link; }
}

@media (max-width: 440px) {
  .chess-page .page-shell { width: min(100% - 1.1rem, 960px); }
  .chess-intro,
  .chess-panel { padding: 1rem .8rem 1.1rem; }
  .chess-square { font-size: clamp(1.25rem, 10vw, 2.3rem); }
  .chess-featured-facts { grid-template-columns: 1fr; }
  .chess-featured-facts div:nth-child(even) { border-left: 0; }
  .chess-featured-facts div + div { border-top: 1px dotted rgba(92,77,60,.35); }
}

@media (prefers-reduced-motion: reduce) {
  .chess-featured-tabs button { transition: none; }
}