/* ==========================================================
   Selvig — a warm, vintage-inspired Ghost theme
   Palette and type from the style tile
   ========================================================== */

:root {
  --espresso: #3a2117;
  --rust: #743a22;
  --pumpkin: #b85f2d;
  --orange: #ce7841;
  --caramel: #d8a06d;
  --cream: #f3e2cf;
  --olive: #6f7046;

  --paper: #faf3ea;
  --card: #fffbf6;
  --line: #e8d6c1;
  --muted: #6b4a3b;

  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-text: "DM Serif Text", Georgia, "Times New Roman", serif;

  --page: var(--paper);
  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--espresso);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Paper grain, for the vintage feel */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .28;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { flex: 1; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--olive);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--espresso); color: var(--cream);
  padding: .6rem 1rem; border-radius: 3px; text-decoration: none; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

.wrap { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.wrap-wide { width: min(100% - 2.5rem, 58rem); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 40rem); margin-inline: auto; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .72rem 1.3rem;
  border-radius: 3px;
  border: 1.5px solid transparent;
  font: 700 1rem/1.2 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, transform .15s, box-shadow .15s;
}
.btn-primary, .btn-soft {
  border-color: var(--espresso);
  box-shadow: 3px 3px 0 var(--espresso);
}
.btn-primary:hover, .btn-soft:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--espresso); }
.btn-primary:active, .btn-soft:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--espresso); }
.btn-arrow::after { content: "→"; }

.btn-primary { background: var(--pumpkin); color: #fff; }
.btn-primary:hover { background: var(--rust); }

.btn-soft { background: var(--cream); color: var(--espresso); border-color: var(--caramel); }
.btn-soft:hover { background: #efd4b6; }

.btn-cream { background: var(--paper); color: var(--espresso); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 3px; border: 1.5px solid var(--espresso);
  background: transparent; color: var(--espresso); cursor: pointer;
}
.icon-btn:hover { border-color: var(--caramel); background: var(--cream); }

.text-link { font-weight: 500; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-decoration-color: var(--caramel); text-underline-offset: 4px; }

/* ---------- Header ---------- */

.site-header { border-bottom: 4px double var(--espresso); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.65rem;
  line-height: 1.1;
  text-decoration: none;
  color: var(--espresso);
}
.brand img { max-height: 44px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 1.75rem; }

.site-nav .nav {
  display: flex; gap: 1.5rem;
  list-style: none; margin: 0; padding: 0;
}
.site-nav .nav a {
  text-decoration: none; font-weight: 500;
  padding-block: .3rem;
  border-bottom: 2px solid transparent;
}
.site-nav .nav a:hover,
.site-nav .nav-current a { border-bottom-color: var(--caramel); }

.nav-actions { display: flex; align-items: center; gap: 1rem; }

.menu-toggle { display: none; padding: .55rem 1.1rem; font-size: .95rem; }

@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap; }
  .menu-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: .75rem 0 1rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav .nav { flex-direction: column; gap: .5rem; }
  .site-nav .nav a { font-size: 1.15rem; }
}

/* ---------- Listings ---------- */

.listing { padding-top: clamp(3rem, 7vw, 4.5rem); }

.section-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.1;
  margin: 0 0 1.75rem;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 5px;
  border-top: 1.5px solid var(--espresso);
  border-bottom: 1.5px solid var(--espresso);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr));
  gap: 1.75rem;
}

.pager {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
}
.pager-count { color: var(--muted); font-size: .95rem; }

.archive-head { padding: clamp(3rem, 7vw, 4.5rem) 0 0; }
.archive-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin-bottom: 1.25rem; }
.archive-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; margin: 0;
}
.archive-desc { font-family: var(--font-text); font-size: 1.2rem; color: var(--rust); max-width: 46ch; margin: 1rem 0 0; }
.archive-head + .listing { padding-top: 0; }

.error-page { padding: 6rem 0; }
.error-code { font-family: var(--font-display); font-size: 6rem; line-height: 1; color: var(--caramel); margin: 0 0 .5rem; }
.error-page .btn { margin-top: 2rem; }


/* ==========================================================
   The record shop
   ========================================================== */

/* ---------- Masthead ---------- */

.stage { padding-top: clamp(2rem, 5vw, 3.5rem); overflow: hidden; }

.masthead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 12.6vw, 10.5rem);
  line-height: .86;
  letter-spacing: -.035em;
  margin: 0;
  color: var(--espresso);
  text-shadow: .035em .035em 0 var(--pumpkin), .07em .07em 0 var(--caramel);
  text-wrap: balance;
  animation: press 1s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes press {
  from { text-shadow: 0 0 0 var(--pumpkin), 0 0 0 var(--caramel); transform: translate(.02em, .02em); }
}

.stripes {
  height: 26px;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(
    var(--espresso) 0 20%, var(--rust) 20% 40%, var(--pumpkin) 40% 60%,
    var(--orange) 60% 80%, var(--caramel) 80% 100%);
}

.masthead-sub {
  font-family: var(--font-text);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  color: var(--rust);
  margin: 1rem 0 0;
}

/* ---------- Now playing: the turntable ---------- */

.now-playing-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.deck {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 580px;
}

/* 70s sunburst rings around the record */
.deck-rings {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    transparent 0 70%,
    var(--caramel) 70% 76%, var(--orange) 76% 82%, var(--pumpkin) 82% 88%,
    var(--rust) 88% 94%, var(--espresso) 94% 100%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 58%, transparent 58%);
          mask: linear-gradient(#000 0 58%, transparent 58%);
}

.deck-record { position: absolute; inset: 16%; }

.disc, .disc-sheen { position: absolute; inset: 0; border-radius: 50%; }

.disc {
  background:
    radial-gradient(circle, transparent 0 60%, rgba(0, 0, 0, .25) 60.5% 61%, transparent 61.5%),
    radial-gradient(circle, transparent 0 97%, #1f110b 97.5%),
    repeating-radial-gradient(circle, #2b1710 0 1px, var(--espresso) 1px 3.2px);
  box-shadow: 0 30px 50px -24px rgba(58, 33, 23, .7);
  animation: spin 1.8s linear 1.4s infinite; /* 33⅓ rpm, for real */
}
.disc-label { width: 100%; height: 100%; display: block; }
.label-bg { fill: var(--pumpkin); }
.label-inner { fill: none; stroke: var(--cream); stroke-width: .6; opacity: .7; }
.label-text { fill: var(--paper); font: 700 7.4px var(--font-sans); letter-spacing: .02em; }
.label-hole { fill: var(--paper); }

.disc-sheen {
  pointer-events: none;
  background: conic-gradient(from 30deg,
    transparent 0 12%, rgba(255, 238, 220, .16) 17%, transparent 23% 62%,
    rgba(255, 238, 220, .12) 67%, transparent 73%);
  -webkit-mask: radial-gradient(circle, transparent 0 38.5%, #000 39%);
          mask: radial-gradient(circle, transparent 0 38.5%, #000 39%);
}

@keyframes spin { to { transform: rotate(360deg); } }

.deck-sleeve {
  position: absolute;
  left: -2%;
  bottom: 0;
  width: 40%;
  aspect-ratio: 1;
  transform: rotate(-7deg);
  border: 1.5px solid var(--espresso);
  box-shadow: 6px 6px 0 var(--espresso);
  background: var(--cream);
}
.deck-sleeve img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.2) saturate(.9); }

.deck-arm { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arm {
  transform-box: view-box;
  transform-origin: 92px 10px;
  transform: rotate(16deg);
  animation: arm-in 1.1s cubic-bezier(.3, .7, .2, 1) .3s both;
  transition: transform .9s cubic-bezier(.3, .7, .2, 1);
}
@keyframes arm-in { from { transform: rotate(-8deg); } }
.arm-rod { fill: none; stroke: var(--espresso); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.arm-head, .arm-weight { fill: var(--espresso); }
.arm-base { fill: var(--rust); stroke: var(--espresso); stroke-width: 1; }
.arm-pin { fill: var(--caramel); }

.deck-toggle {
  position: absolute;
  right: 0;
  bottom: 2%;
  font: 700 .85rem var(--font-sans);
  padding: .45rem .8rem;
  border: 1.5px solid var(--espresso);
  border-radius: 3px;
  background: var(--paper);
  color: var(--espresso);
  cursor: pointer;
}
.deck-toggle:hover { background: var(--cream); }

.deck.is-paused .disc { animation-play-state: paused; }
.deck.is-paused .arm { animation: none; transform: rotate(-8deg); }

.np-kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 .9rem;
  font-weight: 700; color: var(--pumpkin);
}
.np-kicker::before {
  content: ""; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--pumpkin);
  animation: blink 1.8s ease-in-out infinite;
}
.deck.is-paused ~ .now-playing .np-kicker::before { animation: none; }
@keyframes blink { 50% { opacity: .25; } }

.np-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
.np-title a { text-decoration: none; }
.np-title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--caramel); text-underline-offset: 6px; }

.np-excerpt { font-family: var(--font-text); font-size: 1.15rem; line-height: 1.65; margin: 1.1rem 0 0; max-width: 42ch; }

.np-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.9rem; }

/* Liner-note credits */
.credits {
  display: flex; flex-wrap: wrap;
  margin: 1.6rem 0 0;
  border-top: 1.5px solid var(--espresso);
  border-bottom: 1.5px solid var(--espresso);
}
.credits > div { padding: .65rem 1.4rem .7rem 0; margin-right: 1.4rem; border-right: 1px solid var(--line); }
.credits > div:last-child { border-right: 0; margin-right: 0; }
.credits dt { font-size: .82rem; color: var(--muted); }
.credits dd { margin: .1rem 0 0; font-weight: 700; }
.credits dd a { text-decoration: none; }
.credits dd a:hover { text-decoration: underline; text-decoration-color: var(--caramel); }
.credits-center { justify-content: center; }
.credits-center > div { padding-inline: 1.2rem; margin-right: 0; }

@media (max-width: 820px) {
  .now-playing-row { grid-template-columns: 1fr; }
  .deck { max-width: 460px; margin-inline: auto; }
}

/* ---------- The crate: posts as records ---------- */

.crate-section { padding-top: clamp(2rem, 5vw, 3rem); }

.crate {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 5.5rem max(1.25rem, calc((100vw - 72rem) / 2)) 2rem;
  scroll-padding-inline: max(1.25rem, calc((100vw - 72rem) / 2));
  scrollbar-color: var(--caramel) transparent;
}
.crate > .lp { flex: 0 0 clamp(15rem, 26vw, 19rem); scroll-snap-align: start; }

.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 4.5rem 2rem;
  padding-top: 5rem;
}

.lp-link { display: block; text-decoration: none; }

.lp-art { position: relative; aspect-ratio: 1; }

.lp:nth-child(odd) .lp-art { transform: rotate(-1.4deg); }
.lp:nth-child(even) .lp-art { transform: rotate(1.1deg); }

.lp-disc {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--paper) 0 2%, transparent 2.4%),
    radial-gradient(circle, var(--orange) 0 17%, var(--espresso) 17.5% 19%, transparent 19.5%),
    repeating-radial-gradient(circle, #2b1710 0 1px, var(--espresso) 1px 3px);
  transform: translateY(-9%);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}
.lp:nth-child(3n+2) .lp-disc { background:
    radial-gradient(circle, var(--paper) 0 2%, transparent 2.4%),
    radial-gradient(circle, var(--olive) 0 17%, var(--espresso) 17.5% 19%, transparent 19.5%),
    repeating-radial-gradient(circle, #2b1710 0 1px, var(--espresso) 1px 3px); }
.lp:nth-child(3n) .lp-disc { background:
    radial-gradient(circle, var(--paper) 0 2%, transparent 2.4%),
    radial-gradient(circle, var(--cream) 0 17%, var(--espresso) 17.5% 19%, transparent 19.5%),
    repeating-radial-gradient(circle, #2b1710 0 1px, var(--espresso) 1px 3px); }

.lp-link:hover .lp-disc,
.lp-link:focus-visible .lp-disc { transform: translateY(-34%) rotate(40deg); }

.lp-cover {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1.5px solid var(--espresso);
  box-shadow: 5px 5px 0 var(--espresso);
  background: var(--pumpkin);
  transition: box-shadow .3s;
}
.lp-link:hover .lp-cover { box-shadow: 8px 8px 0 var(--pumpkin); }

.lp-cover img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.28) saturate(.85) contrast(1.05); transition: filter .4s; }
.lp-link:hover .lp-cover img { filter: none; }

/* Halftone print dots over covers */
.lp-cover::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(58, 33, 23, .35) 0 .9px, transparent 1.3px) 0 0 / 5px 5px;
  mix-blend-mode: multiply;
  opacity: .45;
  transition: opacity .4s;
}
.lp-link:hover .lp-cover::after { opacity: .15; }

/* Generated covers for posts without an image */
.lp-type {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start;
  padding: 1.1rem 1.1rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: .98;
  color: var(--paper);
  background:
    linear-gradient(to top,
      var(--espresso) 0 5%, var(--rust) 5% 10%, var(--orange) 10% 15%, var(--caramel) 15% 20%, transparent 20%);
}
.lp:nth-child(4n+2) .lp-cover { background: var(--olive); }
.lp:nth-child(4n+3) .lp-cover { background: var(--rust); }
.lp:nth-child(4n+4) .lp-cover { background: var(--espresso); }

.lp-sticker {
  position: absolute;
  z-index: 2;
  right: -.8rem;
  bottom: -.9rem;
  display: grid; place-items: center;
  width: 4.1rem; height: 4.1rem;
  border-radius: 50%;
  background: var(--caramel);
  border: 1.5px solid var(--espresso);
  color: var(--espresso);
  font: 700 .78rem/1.05 var(--font-sans);
  text-align: center;
  transform: rotate(12deg);
}

.lp-info { padding: 1.5rem .25rem 0; }
.lp-tag { color: var(--olive); font-weight: 700; font-size: .88rem; }
.lp-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.1;
  margin: .25rem 0 0;
  text-wrap: balance;
}
.lp-link:hover .lp-title { color: var(--rust); }
.lp-excerpt {
  margin: .5rem 0 0;
  font-size: .95rem;
  color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Tracklist: the back of the LP ---------- */

.tracklist-section {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: clamp(3rem, 7vw, 4.5rem) 0;
  background: var(--espresso);
  color: var(--cream);
  border-top: 6px double var(--caramel);
}
.tracklist-section:not(:has(li)) { display: none; }

.tracklist-section .section-title { color: var(--paper); }
.tracklist-section .section-title::after { border-color: var(--caramel); }

.tracklist {
  list-style: none;
  margin: 0; padding: 0;
  columns: 2 22rem;
  column-gap: 4rem;
  column-rule: 1px solid rgba(243, 226, 207, .2);
}
.track { counter-increment: track; break-inside: avoid; }
.track:nth-child(7) { counter-reset: track; }
.track a {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .7rem 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 226, 207, .12);
}
.track a::before {
  content: "A" counter(track);
  flex: 0 0 2.2rem;
  font-weight: 700;
  font-size: .9rem;
  color: var(--caramel);
}
.track:nth-child(n+7) a::before { content: "B" counter(track); }
.tracklist-page .track:nth-child(n+7) a::before { content: "B" counter(track); }
.track-title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; }
.track-leader { flex: 1; min-width: 1rem; border-bottom: 2px dotted rgba(216, 160, 109, .5); transform: translateY(-.3rem); }
.track-time { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--caramel); }
.track a:hover .track-title { color: var(--orange); }

.tracklist-note { margin: 1.75rem 0 0; font-size: .9rem; color: var(--caramel); font-style: italic; }

.tracklist-section + .pager { margin-top: 3rem; }

/* ---------- Reading progress record ---------- */

.progress-record {
  --p: 0;
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 58px; height: 58px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(var(--pumpkin) calc(var(--p) * 360deg), rgba(216, 160, 109, .35) 0);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.progress-record.is-visible { opacity: 1; transform: none; }
.progress-record span {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(circle, var(--paper) 0 5%, transparent 6%),
    radial-gradient(circle, var(--pumpkin) 0 30%, var(--espresso) 31% 34%, transparent 35%),
    conic-gradient(from 0deg, transparent 0 20%, rgba(255, 238, 220, .25) 24%, transparent 28%),
    repeating-radial-gradient(circle, #2b1710 0 1px, var(--espresso) 1px 3px);
  transform: rotate(calc(var(--p) * 1080deg));
}

.keep-reading { margin-top: clamp(3.5rem, 7vw, 5rem); }
.keep-reading .crate { padding-top: 5rem; }

@media (prefers-reduced-motion: reduce) {
  .disc, .np-kicker::before, .masthead { animation: none !important; }
  .arm { animation: none !important; transform: rotate(16deg); }
  .deck-toggle { display: none; }
  .progress-record span { transform: none; }
}


/* ---------- Turntable with real music (Spotify) ---------- */

.deck.is-checking .disc,
.deck.is-checking .arm { animation-play-state: paused; }

.deck.has-music .disc { animation: spin 1.8s linear infinite; animation-play-state: paused; }
.deck.has-music .arm { animation: none; transform: rotate(-8deg); }
.deck.has-music.is-playing .disc { animation-play-state: running; }
.deck.has-music.is-playing .arm { transform: rotate(16deg); }
.deck.has-music .deck-record { cursor: pointer; }
.deck.has-music:not(.is-playing) .deck-toggle {
  background: var(--pumpkin);
  color: #fff;
  box-shadow: 3px 3px 0 var(--espresso);
}
.deck.has-music:not(.is-playing) .deck-toggle::before { content: "♪ "; }
.deck.has-music:not(.is-playing) ~ .now-playing .np-kicker::before { animation: none; opacity: .35; }

.player-slot { margin-top: 1.4rem; }
.player-slot iframe { display: block; border: 0; border-radius: 12px; }

.listen {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--card);
  border: 1.5px solid var(--espresso);
  box-shadow: 6px 6px 0 var(--caramel);
}
.listen .deck-sleeve { display: none; }
.listen .deck-toggle { font-size: .78rem; padding: .35rem .6rem; bottom: -2%; right: -4%; }
.listen-title { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; margin: 0; }
.listen-hint { margin: .35rem 0 0; color: var(--muted); font-size: .95rem; }
.listen .player-slot { margin-top: 1rem; }

@media (max-width: 640px) {
  .listen { grid-template-columns: 1fr; }
  .listen .deck { max-width: 230px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .listen .deck-toggle, .deck.has-music .deck-toggle { display: inline-flex; }
}


/* ---------- Playlists page: records on a shelf ---------- */

.gh-content > .shelf { grid-column: wide-start / wide-end; }

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 3.5rem 2rem;
  margin-top: 2.5rem;
}

.shelf-item {
  display: flex; flex-direction: column;
  font-family: var(--font-sans);
  --label: var(--pumpkin);
}
.shelf-item:nth-child(4n+2) { --label: var(--olive); }
.shelf-item:nth-child(4n+3) { --label: var(--caramel); }
.shelf-item:nth-child(4n+4) { --label: var(--rust); }

.shelf-disc {
  position: relative;
  width: 78%;
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle, transparent 0 97%, #1f110b 97.5%),
    repeating-radial-gradient(circle, #2b1710 0 1px, var(--espresso) 1px 3.2px);
  box-shadow: 0 22px 34px -20px rgba(58, 33, 23, .75);
  animation: spin 1.8s linear infinite;
  animation-play-state: paused;
}
.shelf-disc::after {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 12%, rgba(255, 238, 220, .14) 17%, transparent 23% 62%, rgba(255, 238, 220, .1) 67%, transparent 73%);
}
.shelf-label {
  position: absolute; inset: 31%;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--paper) 0 6%, transparent 7%),
    radial-gradient(circle, transparent 0 58%, rgba(250, 243, 234, .55) 59% 61%, transparent 62%),
    var(--label);
}
.shelf-item.is-playing .shelf-disc { animation-play-state: running; }
.shelf-disc:hover { box-shadow: 0 22px 34px -20px rgba(58, 33, 23, .75), 0 0 0 4px var(--caramel); }

/* the wooden shelf under each record */
.shelf-item::before {
  content: "";
  order: 1;
  height: 12px;
  margin: -6px -.5rem 0;
  background: var(--rust);
  border-top: 3px solid var(--pumpkin);
  box-shadow: 0 6px 0 -2px var(--espresso);
}
.shelf-disc { order: 0; }
.shelf-name { order: 2; }
.shelf-player { order: 3; }

.shelf-name {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.15;
}
.shelf-player { margin-top: 1rem; }
.shelf-player iframe { display: block; border: 0; border-radius: 12px; }

@media (max-width: 600px) {
  .shelf { gap: 2.5rem; margin-top: 1.5rem; }
  .shelf-item {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    column-gap: 1.1rem;
    align-items: center;
  }
  .shelf-disc { grid-column: 1; grid-row: 1; width: 100%; }
  .shelf-item::before { grid-column: 1; grid-row: 2; height: 8px; margin: -4px -.3rem 0; border-top-width: 2px; }
  .shelf-name { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.6rem; }
  .shelf-player { grid-column: 1 / -1; grid-row: 3; margin-top: 1rem; }
}

/* ---------- Writing elsewhere: a discography ---------- */

.discography > .kg-bookmark-card,
.discography > h2 { grid-column: wide-start / wide-end; }

.discography > h2 {
  display: flex; align-items: center; gap: 1rem;
}
.discography > h2::after {
  content: ""; flex: 1; height: 5px;
  border-top: 1.5px solid var(--espresso);
  border-bottom: 1.5px solid var(--espresso);
}

.discography > .kg-bookmark-card + .kg-bookmark-card { margin-top: 0; }

.gh-content.discography .kg-bookmark-card a.kg-bookmark-container {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
  min-height: 0;
  padding: 1.35rem 0;
  border: 0;
  border-bottom: 1.5px solid var(--espresso);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--espresso);
  text-decoration: none;
}
.gh-content.discography .kg-bookmark-card:first-child a.kg-bookmark-container,
.gh-content.discography h2 + .kg-bookmark-card a.kg-bookmark-container { border-top: 1.5px solid var(--espresso); }
.gh-content.discography .kg-bookmark-container:not(:has(.kg-bookmark-thumbnail)) { grid-template-columns: minmax(0, 1fr); }

.gh-content.discography .kg-bookmark-thumbnail {
  grid-column: 1; grid-row: 1;
  position: relative;
  width: 100%;
  min-width: 0;
  max-height: none;
  aspect-ratio: 1;
  overflow: visible;
}
.gh-content.discography .kg-bookmark-thumbnail::before {
  content: "";
  position: absolute; inset: 5%;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--paper) 0 2.5%, transparent 3%),
    radial-gradient(circle, var(--orange) 0 18%, var(--espresso) 18.5% 20%, transparent 20.5%),
    repeating-radial-gradient(circle, #2b1710 0 1px, var(--espresso) 1px 3px);
  transform: translateX(18%);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.gh-content.discography .kg-bookmark-thumbnail img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 1.5px solid var(--espresso);
  border-radius: 0;
  filter: sepia(.25) saturate(.85);
  transition: filter .3s;
}
.gh-content.discography a.kg-bookmark-container:hover .kg-bookmark-thumbnail::before { transform: translateX(40%) rotate(60deg); }
.gh-content.discography a.kg-bookmark-container:hover .kg-bookmark-thumbnail img { filter: none; }

.gh-content.discography .kg-bookmark-content { grid-column: 2; grid-row: 1; padding: 0 0 0 1.25rem; }
.gh-content.discography .kg-bookmark-container:not(:has(.kg-bookmark-thumbnail)) .kg-bookmark-content { grid-column: 1; padding-left: 0; }

.gh-content.discography .kg-bookmark-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--espresso);
}
.gh-content.discography a.kg-bookmark-container:hover .kg-bookmark-title { color: var(--rust); }
.gh-content.discography .kg-bookmark-description {
  margin-top: .4rem;
  max-height: none;
  font-family: var(--font-sans);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gh-content.discography .kg-bookmark-metadata {
  margin-top: .7rem;
  font-family: var(--font-sans);
  font-size: .88rem;
  font-weight: 700;
  color: var(--olive);
}
.gh-content.discography .kg-bookmark-icon { width: 18px; height: 18px; margin-right: .45rem; border-radius: 2px; }
.gh-content.discography .kg-bookmark-publisher { color: var(--muted); font-weight: 500; }

@media (max-width: 560px) {
  .gh-content.discography .kg-bookmark-card a.kg-bookmark-container { grid-template-columns: 5.25rem minmax(0, 1fr); gap: 1.1rem; }
  .gh-content.discography .kg-bookmark-title { font-size: 1.2rem; }
}

/* ---------- 404: a skipping record ---------- */

.skip-page {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.skip-deck { position: relative; aspect-ratio: 1; }

.skip-disc {
  position: absolute; inset: 16%;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle, transparent 0 97%, #1f110b 97.5%),
    repeating-radial-gradient(circle, #2b1710 0 1px, var(--espresso) 1px 3.2px);
  box-shadow: 0 26px 40px -22px rgba(58, 33, 23, .75);
  animation: skip 2.6s linear infinite;
}
/* the scratch */
.skip-disc::after {
  content: "";
  position: absolute;
  top: 20%; left: 26%;
  width: 36%; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 238, 220, .75) 30% 70%, transparent);
  transform: rotate(-22deg);
}
.skip-label {
  width: 38%; aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pumpkin);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
}

@keyframes skip {
  0%   { transform: rotate(0deg); }
  60%  { transform: rotate(216deg); }
  62%  { transform: rotate(190deg); }
  80%  { transform: rotate(255deg); }
  82%  { transform: rotate(229deg); }
  100% { transform: rotate(294deg); }
}

.arm-skip { animation: arm-jolt 2.6s linear infinite; }
@keyframes arm-jolt {
  0%, 60%, 64%, 80%, 84%, 100% { transform: rotate(16deg); }
  61.5%, 81.5% { transform: rotate(12deg); }
}

.skip-text .archive-desc { margin-bottom: 0; }
.skip-text .np-actions { margin-top: 2rem; }

@media (max-width: 720px) {
  .skip-page { grid-template-columns: 1fr; }
  .skip-deck { width: min(100%, 17rem); }
}

@media (prefers-reduced-motion: reduce) {
  .skip-disc, .arm-skip, .shelf-disc { animation: none !important; }
}


/* ---------- Gig posts: the ticket ---------- */

.ticket-wrap { padding: clamp(3rem, 7vw, 4.5rem) 0 clamp(2.25rem, 5vw, 3rem); }

.ticket {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  background: var(--cream);
  color: var(--espresso);
  border: 1.5px solid var(--espresso);
  box-shadow: 8px 8px 0 var(--pumpkin);
  transform: rotate(-1deg);
  overflow: hidden;
}

.ticket-main {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.25rem) calc(clamp(1.5rem, 4vw, 2.5rem) + 30px);
  background: linear-gradient(to right,
    var(--espresso) 0 6px, var(--rust) 6px 12px, var(--pumpkin) 12px 18px,
    var(--orange) 18px 24px, var(--caramel) 24px 30px, transparent 30px);
}

.ticket-presents { margin: 0; font-weight: 700; font-size: .92rem; color: var(--pumpkin); }
.ticket .ticket-title { margin: .4rem 0 0; text-align: left; font-size: clamp(2.1rem, 5vw, 3.5rem); }
.ticket-venue {
  margin: .8rem 0 0;
  font-family: var(--font-text);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  color: var(--rust);
}

.ticket-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  margin: 1.5rem 0 0; padding-top: 1rem;
  border-top: 1.5px dashed var(--espresso);
}
.ticket-meta dt { font-size: .8rem; color: var(--muted); }
.ticket-meta dd { margin: .1rem 0 0; font-weight: 700; }

.ticket-stub {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem .5rem;
  border-left: 2px dashed var(--espresso);
  background: var(--caramel);
}
/* the notches where the ticket tears */
.ticket-stub::before,
.ticket-stub::after {
  content: "";
  position: absolute;
  left: -13px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--page);
  border: 1.5px solid var(--espresso);
}
.ticket-stub::before { top: -13px; }
.ticket-stub::after { bottom: -13px; }

.stub-admit {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: .04em;
}
.stub-barcode {
  width: 70%;
  height: 4.5rem;
  background: repeating-linear-gradient(90deg,
    var(--espresso) 0 2px, transparent 2px 4px, var(--espresso) 4px 7px, transparent 7px 8px,
    var(--espresso) 8px 9px, transparent 9px 12px);
}

@media (max-width: 640px) {
  .ticket { grid-template-columns: 1fr; transform: rotate(-.6deg); }
  .ticket-stub { flex-direction: row; border-left: 0; border-top: 2px dashed var(--espresso); padding: .9rem 1.25rem; }
  .ticket-stub::before, .ticket-stub::after { top: -13px; left: auto; }
  .ticket-stub::before { left: -13px; }
  .ticket-stub::after { right: -13px; bottom: auto; }
  .stub-admit { writing-mode: horizontal-tb; transform: none; font-size: 1.4rem; }
  .stub-barcode { width: 8rem; height: 2.5rem; }
}

/* ---------- Review verdict card ---------- */

.gh-content > .verdict { grid-column: main-start / main-end; margin-top: 2.5em; }
.gh-content > .verdict + * { margin-top: 2.5em; }

.verdict {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1.75rem;
  padding: 1.5rem 1.75rem;
  background: var(--card);
  color: var(--espresso);
  border: 1.5px solid var(--espresso);
  box-shadow: 6px 6px 0 var(--caramel);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
}

.verdict-disc {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle, transparent 0 97%, #1f110b 97.5%),
    repeating-radial-gradient(circle, #2b1710 0 1px, var(--espresso) 1px 3.2px);
  box-shadow: 0 16px 26px -16px rgba(58, 33, 23, .7);
}
.verdict-label {
  width: 58%; aspect-ratio: 1;
  border-radius: 50%;
  display: flex; align-items: baseline; justify-content: center;
  padding-top: 26%;
  background: var(--pumpkin);
  color: #fff;
  box-shadow: inset 0 0 0 3px rgba(250, 243, 234, .35);
}
.verdict-label b { font-family: var(--font-display); font-weight: 400; font-size: 2.3rem; line-height: .6; }
.verdict-label small { font-size: .85rem; font-weight: 700; margin-left: .1rem; }

.gh-content .verdict-title, .verdict-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; }
.verdict-rows { margin: .75rem 0 0; }
.verdict-rows > div { padding: .45rem 0; border-top: 1px solid var(--line); }
.verdict-rows dt { font-size: .8rem; color: var(--muted); }
.verdict-rows dd { margin: .05rem 0 0; font-weight: 700; }
.verdict-note { margin: .8rem 0 0; font-family: var(--font-text); font-style: italic; color: var(--rust); }

@media (max-width: 560px) {
  .verdict { grid-template-columns: 1fr; text-align: left; }
  .verdict-disc { width: 8.5rem; }
}

/* ---------- The Anticipation List: release calendar ---------- */

.release-calendar { margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }

.cal {
  position: relative;
  max-width: 26rem;
  margin: 0 auto;
  padding: 2.4rem 1.5rem 1.4rem;
  background: var(--card);
  color: var(--espresso);
  border: 1.5px solid var(--espresso);
  box-shadow: 6px 6px 0 var(--pumpkin);
  transform: rotate(.8deg);
}
/* binder rings along the top */
.cal::before {
  content: "";
  position: absolute; top: 10px; left: 1.5rem; right: 1.5rem;
  height: 12px;
  background: radial-gradient(circle, var(--espresso) 0 4px, transparent 4.5px) 0 0 / 2.2rem 12px repeat-x;
}
.cal::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--pumpkin);
}

.cal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cal-month { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; }
.cal-year { font-weight: 700; color: var(--muted); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; text-align: center; }
.cal-dow { font-size: .75rem; font-weight: 700; color: var(--muted); padding-bottom: .3rem; }
.cal-day {
  display: grid; place-items: center;
  aspect-ratio: 1;
  font-weight: 500;
  font-size: .95rem;
  color: var(--espresso);
  text-decoration: none;
}
.cal-day.is-release {
  position: relative;
  font-weight: 700;
  color: var(--pumpkin);
}
/* hand-drawn circle */
.cal-day.is-release::before {
  content: "";
  position: absolute; inset: 1px -1px;
  border: 2.5px solid var(--pumpkin);
  border-radius: 52% 46% 55% 44% / 48% 55% 45% 52%;
  transform: rotate(-12deg);
}
.cal-day.is-release:hover { background: var(--cream); border-radius: 50%; }
.cal-note { margin: 1rem 0 0; font-size: .82rem; color: var(--muted); }

.gh-content .has-release { display: flex; align-items: center; gap: .9rem; scroll-margin-top: 1.5rem; }
.release-chip {
  flex: 0 0 auto;
  display: inline-flex; flex-direction: column; align-items: center;
  width: 3.2rem;
  border: 1.5px solid var(--espresso);
  background: var(--card);
  box-shadow: 3px 3px 0 var(--caramel);
  font-family: var(--font-sans);
  line-height: 1;
  overflow: hidden;
}
.release-chip span { width: 100%; padding: .22rem 0; background: var(--pumpkin); color: #fff; font-size: .7rem; font-weight: 700; text-align: center; }
.release-chip b { padding: .3rem 0 .35rem; font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; color: var(--espresso); }

/* ---------- Year in records ---------- */

.year-hero { padding: clamp(2.5rem, 6vw, 4rem) 0 0; }
.year-num {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(6rem, 27vw, 17rem);
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--espresso);
  text-shadow: .03em .03em 0 var(--pumpkin), .06em .06em 0 var(--caramel);
}
.year-title {
  margin: 1.4rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
}

.year-stats-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 2rem 1.5rem;
  padding: clamp(2.5rem, 6vw, 3.5rem) 0;
}
.year-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem; }
.year-stat-disc {
  width: min(100%, 9.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle, var(--pumpkin) 0 36%, var(--espresso) 36.5% 38%, transparent 38.5%),
    repeating-radial-gradient(circle, #2b1710 0 1px, var(--espresso) 1px 3.2px);
  box-shadow: 0 16px 26px -16px rgba(58, 33, 23, .7);
}
.year-stat:nth-child(2) .year-stat-disc { background: radial-gradient(circle, var(--olive) 0 36%, var(--espresso) 36.5% 38%, transparent 38.5%), repeating-radial-gradient(circle, #2b1710 0 1px, var(--espresso) 1px 3.2px); }
.year-stat:nth-child(3) .year-stat-disc { background: radial-gradient(circle, var(--rust) 0 36%, var(--espresso) 36.5% 38%, transparent 38.5%), repeating-radial-gradient(circle, #2b1710 0 1px, var(--espresso) 1px 3.2px); }
.year-stat:nth-child(4) .year-stat-disc { background: radial-gradient(circle, var(--orange) 0 36%, var(--espresso) 36.5% 38%, transparent 38.5%), repeating-radial-gradient(circle, #2b1710 0 1px, var(--espresso) 1px 3.2px); }
.year-stat-disc b {
  max-width: 64%;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.2vw, 1.8rem);
  line-height: 1;
  color: #fff;
  overflow-wrap: anywhere;
}
.year-stat-disc.is-text b { max-width: 64%; white-space: normal; font-family: var(--font-sans); font-weight: 700; font-size: .68rem; line-height: 1.15; overflow-wrap: normal; hyphens: auto; }
.year-stat-label { font-weight: 700; }

/* ---------- Late-night listening (night mode) ---------- */

.lamp-btn .bulb { transition: fill .3s; }

:root[data-theme="night"] {
  color-scheme: dark;
  --espresso: #f3e2cf;
  --rust: #e3a574;
  --cream: #3a2419;
  --paper: #1c110d;
  --card: #29180f;
  --line: #4a3024;
  --muted: #cdab8c;
}

/* physical objects keep their daytime colors: records, tickets, calendars, the footer */
:root[data-theme="night"] :is(.aotm-card, .polaroid, .disc, .lp-disc, .shelf-disc, .skip-disc, .verdict-disc, .year-stat-disc,
  .progress-record span, .site-footer, .tracklist-section, .subscribe-box, .ticket, .cal, .release-chip),
:root[data-theme="night"] .shelf-item::before,
:root[data-theme="night"] .gh-content.discography .kg-bookmark-thumbnail::before {
  --espresso: #3a2117;
  --rust: #743a22;
  --cream: #f3e2cf;
  --paper: #faf3ea;
  --card: #fffbf6;
  --line: #e8d6c1;
  --muted: #6b4a3b;
}

:root[data-theme="night"] body::before { mix-blend-mode: screen; opacity: .1; }
:root[data-theme="night"] .gh-content { color: #ecdcc9; }
:root[data-theme="night"] .lamp-btn { background: var(--pumpkin); border-color: var(--pumpkin); color: #fff; }
:root[data-theme="night"] .lamp-btn .bulb { fill: #ffd9a8; }
:root[data-theme="night"] .lp-type { color: #faf3ea; }
:root[data-theme="night"] .lp:nth-child(4n+3) .lp-cover { background: #743a22; }
:root[data-theme="night"] .lp:nth-child(4n+4) .lp-cover { background: #3a2117; }
:root[data-theme="night"] .lp-sticker { color: #3a2117; border-color: #3a2117; }
:root[data-theme="night"] .btn-primary,
:root[data-theme="night"] .btn-soft { box-shadow: 3px 3px 0 #000; border-color: #000; }
:root[data-theme="night"] .btn-soft { background: #3a2419; color: #f3e2cf; border-color: var(--caramel); }
:root[data-theme="night"] .deck-rings { opacity: .85; }

.theme-fade body,
.theme-fade .site-header,
.theme-fade .lp-cover,
.theme-fade .btn { transition: background-color .5s, color .5s, border-color .5s; }


/* ---------- Work with me: the press one-sheet ---------- */

.onesheet-head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(3rem, 7vw, 4.5rem) 0 clamp(2.5rem, 6vw, 3.5rem);
}
.onesheet-sleeve { position: relative; width: 78%; aspect-ratio: 1; }
.onesheet-sleeve img,
.onesheet-blank {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  border: 1.5px solid var(--espresso);
  box-shadow: 8px 8px 0 var(--pumpkin);
  filter: sepia(.15) saturate(.92);
}
.onesheet-blank {
  display: flex; align-items: flex-start;
  padding: 1.4rem;
  background: linear-gradient(to top, #3a2117 0 5%, #743a22 5% 10%, #ce7841 10% 15%, #d8a06d 15% 20%, transparent 20%), var(--pumpkin);
  filter: none;
}
.onesheet-blank span { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: .95; color: #faf3ea; }
.onesheet-disc {
  position: absolute; inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #faf3ea 0 2%, transparent 2.4%),
    radial-gradient(circle, var(--orange) 0 17%, #3a2117 17.5% 19%, transparent 19.5%),
    repeating-radial-gradient(circle, #2b1710 0 1px, #3a2117 1px 3px);
  transform: translateX(34%);
  box-shadow: 0 20px 34px -20px rgba(0, 0, 0, .6);
}
.onesheet-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
  text-shadow: .03em .03em 0 var(--pumpkin), .06em .06em 0 var(--caramel);
}
.onesheet-dek {
  font-family: var(--font-text);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  color: var(--rust);
  margin: 1.1rem 0 0;
  max-width: 36ch;
}
.onesheet-print-contact { display: none; }

@media (max-width: 760px) {
  .onesheet-head { grid-template-columns: 1fr; }
  .onesheet-sleeve { width: 66%; }
}

.one-sheet > .onesheet-stats { grid-column: wide-start / wide-end; }
.onesheet-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 2rem 1.5rem;
  margin-top: 1.5rem;
  font-family: var(--font-sans);
}

.one-sheet > h2 { display: flex; align-items: center; gap: 1rem; }
.one-sheet > h2::after {
  content: ""; flex: 1; height: 5px;
  border-top: 1.5px solid var(--espresso);
  border-bottom: 1.5px solid var(--espresso);
}

.one-sheet .service-list {
  list-style: none;
  padding: 0;
  counter-reset: svc;
  font-family: var(--font-sans);
  font-size: 1.05rem;
}
.one-sheet .service-list li {
  counter-increment: svc;
  display: flex; align-items: baseline; gap: .7rem;
  margin: 0;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}
.one-sheet .service-list li::marker { content: none; }
.one-sheet .service-list li::before {
  content: "A" counter(svc);
  flex: 0 0 2.2rem;
  font-weight: 700;
  font-size: .88rem;
  color: var(--pumpkin);
}
.one-sheet .service-list li:nth-child(n+7)::before { content: "B" counter(svc); }
.one-sheet .service-list li:nth-child(7) { counter-reset: svc; counter-increment: svc; }
.svc-name { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; }
.one-sheet .track-leader { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--caramel); transform: translateY(-.3rem); }
.svc-detail { font-weight: 500; color: var(--muted); text-align: right; max-width: 45%; }

.one-sheet .seen-in {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.35;
  color: var(--espresso);
}

.one-sheet blockquote.testimonial {
  position: relative;
  margin-top: 2em;
  padding: 1.6rem 1.75rem 1.4rem 4.2rem;
  border: 1.5px solid var(--espresso);
  border-left: 1.5px solid var(--espresso);
  background: var(--card);
  box-shadow: 6px 6px 0 var(--caramel);
  font-style: normal;
  color: var(--espresso);
}
.one-sheet blockquote.testimonial::before {
  content: "“";
  position: absolute; left: 1.1rem; top: .4rem;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--pumpkin);
}
.one-sheet blockquote.testimonial p { margin: 0; font-family: var(--font-text); font-size: 1.2em; }
.one-sheet blockquote.testimonial .testimonial-cite { margin-top: .8rem; font-family: var(--font-sans); font-size: .95rem; font-weight: 700; color: var(--rust); }

.one-sheet .kg-button-card a,
.one-sheet .kg-btn {
  background: var(--pumpkin) !important;
  color: #fff !important;
  border: 1.5px solid #3a2117;
  border-radius: 3px !important;
  box-shadow: 3px 3px 0 #3a2117;
  font-family: var(--font-sans);
  font-weight: 700;
}

/* ---------- Print: pages become a clean one-sheet / readable article ---------- */

@media print {
  @page { margin: 12mm; }
  :root, :root[data-theme="night"] {
    --espresso: #3a2117; --rust: #743a22; --cream: #f3e2cf; --paper: #faf3ea;
    --card: #fffbf6; --line: #e8d6c1; --muted: #6b4a3b;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; font-size: 10pt; }
  body::before,
  .site-header, .site-footer, .skip-link, .progress-record, .subscribe, .comments,
  .keep-reading, .onesheet-actions, .deck-toggle, .pager, .listen { display: none !important; }
  .onesheet-head { grid-template-columns: 30% 1fr; padding: 0 0 5mm; gap: 12mm; width: 100%; }
  .onesheet-kicker { margin-bottom: 2mm; }
  .onesheet-title { font-size: 30pt; }
  .onesheet-dek { font-size: 12pt; margin-top: 3mm; }
  .onesheet-print-contact { display: block; margin: 3mm 0 0; font-weight: 700; color: var(--pumpkin); }
  .gh-content { display: block !important; font-size: 10pt !important; line-height: 1.45 !important; }
  .gh-content > * { max-width: 100% !important; }
  .gh-content > * + * { margin-top: 3mm !important; }
  .gh-content > h2 { margin-top: 5mm !important; font-size: 15pt !important; break-after: avoid; }
  .gh-content > h2 + * { margin-top: 2mm !important; }
  .onesheet-stats { grid-template-columns: repeat(4, 1fr); gap: 4mm; margin-top: 3mm; break-inside: avoid; }
  .year-stat { gap: 2mm; }
  .year-stat-disc { width: 24mm; box-shadow: none; }
  .year-stat-disc b { font-size: 12pt; }
  .year-stat-label { font-size: 9pt; }
  .one-sheet .service-list { font-size: 9.5pt; }
  .one-sheet .service-list li { padding: 1.2mm 0; }
  .svc-name { font-size: 11.5pt; }
  .one-sheet blockquote.testimonial { break-inside: avoid; box-shadow: none; padding: 3mm 5mm 3mm 14mm; }
  .one-sheet blockquote.testimonial::before { font-size: 30pt; left: 4mm; top: 1mm; }
  .one-sheet .seen-in { font-size: 13pt; }
  a { text-decoration: none; }
  .wrap, .wrap-narrow, .wrap-wide { width: 100%; }
}


/* ---------- About: the polaroid and the contact cards ---------- */

.about-head {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(3rem, 7vw, 4.5rem) 0 clamp(2.5rem, 6vw, 3.5rem);
}

.polaroid {
  position: relative;
  width: min(100%, 22rem);
  margin: 0 auto;
  padding: 14px 14px 0;
  background: #fffdf8;
  color: #3a2117;
  box-shadow: 0 2px 0 rgba(58, 33, 23, .08), 0 22px 40px -22px rgba(58, 33, 23, .55);
  transform: rotate(-3deg);
}
/* a strip of tape holding it up */
.polaroid::before {
  content: "";
  position: absolute;
  top: -14px; left: 50%;
  width: 38%; height: 30px;
  transform: translateX(-50%) rotate(4deg);
  background: rgba(216, 160, 109, .7);
  box-shadow: 0 1px 2px rgba(58, 33, 23, .15);
}
.polaroid img,
.polaroid-blank {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: sepia(.18) saturate(.9) contrast(1.04);
}
.polaroid-blank {
  display: grid; place-items: center;
  background:
    linear-gradient(to top, #3a2117 0 4%, #743a22 4% 8%, #b85f2d 8% 12%, #ce7841 12% 16%, #d8a06d 16% 20%, transparent 20%),
    #f3e2cf;
  filter: none;
}
.polaroid-disc {
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #faf3ea 0 2.2%, transparent 2.6%),
    radial-gradient(circle, #b85f2d 0 18%, #3a2117 18.5% 20%, transparent 20.5%),
    conic-gradient(from 30deg, transparent 0 12%, rgba(255,238,220,.14) 17%, transparent 23% 62%, rgba(255,238,220,.1) 67%, transparent 73%),
    repeating-radial-gradient(circle, #2b1710 0 1px, #3a2117 1px 3px);
  box-shadow: 0 16px 28px -16px rgba(58, 33, 23, .7);
}
.polaroid figcaption {
  padding: .9rem .25rem 1.1rem;
  font-family: var(--font-text);
  font-style: italic;
  font-size: 1.05rem;
  text-align: center;
  color: #3a2117;
}

.about-intro .np-actions { margin-top: 1.75rem; }

@media (max-width: 760px) {
  .about-head { grid-template-columns: 1fr; }
  .polaroid { width: min(78%, 20rem); }
}

.gh-content a.btn { color: #fff; text-decoration: none; }
.gh-content a.btn-soft { color: #3a2117; }
.onesheet-contact-line { margin-top: 1.25rem !important; }

.gh-content > .contact-section { grid-column: wide-start / wide-end; margin-top: 3.5rem; scroll-margin-top: 1.5rem; }
.contact-section > h2 {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-display); font-weight: 400; font-size: 1.85em; line-height: 1.12;
  margin: 0;
}
.contact-section > h2::after {
  content: ""; flex: 1; height: 5px;
  border-top: 1.5px solid var(--espresso);
  border-bottom: 1.5px solid var(--espresso);
}
.contact-lede { margin: 1rem 0 0; max-width: 40rem; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.5rem;
  margin-top: 1.75rem;
}
.contact-card {
  display: flex; flex-direction: column;
  padding: 1.4rem 1.4rem 1.3rem;
  background: var(--card);
  border: 1.5px solid var(--espresso);
  box-shadow: 5px 5px 0 var(--caramel);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
}
.contact-card:nth-child(2) { box-shadow: 5px 5px 0 var(--pumpkin); }
.contact-card:nth-child(3) { box-shadow: 5px 5px 0 var(--olive); }
.gh-content .contact-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.15;
}
.contact-card p { margin: .5rem 0 1rem; color: var(--muted); }
.contact-card a { margin-top: auto; font-weight: 700; }
.contact-card a::after { content: " →"; }
.contact-direct { margin: 1.75rem 0 0; font-family: var(--font-sans); font-size: 1rem; }

@media print {
  .about-head { grid-template-columns: 30% 1fr; padding: 0 0 5mm; gap: 12mm; }
  .about-intro .np-actions { display: none; }
  .contact-card { box-shadow: none; break-inside: avoid; }
}


/* ---------- Photos: prints on a table ---------- */

.photos-page .gh-content { counter-reset: roll; }
.photos-page .gh-content > h2 { counter-increment: roll; }
.photos-page .gh-content > h2::before {
  content: "Roll " counter(roll, decimal-leading-zero);
  display: block;
  margin-bottom: .3rem;
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 700;
  color: var(--pumpkin);
}

.gh-content > .prints { grid-column: wide-start / wide-end; }
.prints {
  columns: 3 16rem;
  column-gap: 1.75rem;
  margin-top: 2rem;
}
.print {
  display: block;
  width: 100%;
  margin: 0 0 1.75rem;
  padding: 10px 10px 0;
  border: 0;
  background: #fffdf8;
  box-shadow: 0 2px 0 rgba(58, 33, 23, .06), 0 16px 30px -20px rgba(58, 33, 23, .6);
  break-inside: avoid;
  cursor: zoom-in;
  text-align: left;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.print:nth-child(3n+1) { transform: rotate(-1.2deg); }
.print:nth-child(3n+2) { transform: rotate(.8deg); }
.print:nth-child(3n) { transform: rotate(-.4deg); }
.print:hover,
.print:focus-visible { transform: rotate(0) translateY(-4px); box-shadow: 0 2px 0 rgba(58, 33, 23, .06), 0 24px 40px -20px rgba(58, 33, 23, .7); }
.print img {
  display: block; width: 100%; height: auto;
  border-radius: 0 !important;
  filter: sepia(.12) saturate(.95);
  transition: filter .3s;
}
.print:hover img { filter: none; }
.print-cap {
  display: block;
  padding: .6rem .15rem .75rem;
  font-family: var(--font-text);
  font-style: italic;
  font-size: .95rem;
  line-height: 1.35;
  color: #3a2117;
}
.print:not(:has(.print-cap)) { padding-bottom: 10px; }

.lb-open, .lb-open body { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: calc(3.5rem + env(safe-area-inset-top, 0px)) .75rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: rgba(28, 17, 13, .96);
  color: #f3e2cf;
}
.lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; height: 100%; }
.lb-img { max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; background: #fffdf8; padding: 8px; }
.lb-cap { margin-top: .9rem; font-family: var(--font-text); font-style: italic; text-align: center; color: #d8a06d; min-height: 1.2em; }
.lb-close {
  position: absolute; top: calc(.9rem + env(safe-area-inset-top, 0px)); right: 1rem;
  padding: .45rem .9rem; border: 1.5px solid #d8a06d; border-radius: 3px;
  background: transparent; color: #f3e2cf; font: 700 .9rem var(--font-sans); cursor: pointer;
}
.lb-nav {
  width: 3rem; height: 3rem;
  border: 1.5px solid #d8a06d; border-radius: 50%;
  background: transparent; color: #f3e2cf; font-size: 1.2rem; cursor: pointer;
}
.lb-nav:hover, .lb-close:hover { background: #3a2117; }
.lightbox :focus-visible { outline-color: #d8a06d; }
@media (max-width: 640px) {
  .lightbox { grid-template-columns: 1fr; }
  .lb-nav { display: none; }
}


/* ---------- Album of the Month: the staff pick ---------- */

.aotm {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: clamp(3rem, 7vw, 4.75rem) 0;
  background:
    linear-gradient(#3a2117 0 4px, #743a22 4px 8px, #b85f2d 8px 12px, #ce7841 12px 16px, #d8a06d 16px 20px, transparent 20px),
    var(--olive);
}
.aotm-inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.aotm-sleeve-link { display: block; }

.aotm-sleeve { position: relative; width: 80%; aspect-ratio: 1; }
.aotm-sleeve img,
.aotm-blank {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 1.5px solid #3a2117;
  box-shadow: 8px 8px 0 #3a2117;
}
.aotm-blank {
  display: flex; align-items: flex-start;
  padding: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: .98;
  padding-right: 38%;
  color: #faf3ea;
  background: linear-gradient(to top, #3a2117 0 5%, #743a22 5% 10%, #ce7841 10% 15%, #d8a06d 15% 20%, transparent 20%), var(--pumpkin);
}
.aotm-disc {
  position: absolute; inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #faf3ea 0 2%, transparent 2.4%),
    radial-gradient(circle, #b85f2d 0 17%, #3a2117 17.5% 19%, transparent 19.5%),
    repeating-radial-gradient(circle, #2b1710 0 1px, #3a2117 1px 3px);
  box-shadow: 0 20px 34px -20px rgba(0, 0, 0, .6);
  transform: translateX(32%);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.aotm-sleeve-link:hover .aotm-disc,
.aotm:hover .aotm-disc { transform: translateX(44%) rotate(60deg); }

.aotm-sticker {
  position: absolute; z-index: 2;
  top: -7%; right: -9%;
  width: 36%; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--pumpkin);
  color: #faf3ea;
  box-shadow: inset 0 0 0 5px var(--pumpkin), inset 0 0 0 7px #faf3ea, 3px 4px 0 #3a2117;
  transform: rotate(14deg);
  text-align: center;
  line-height: 1;
}
.aotm-sticker span { font: 700 clamp(.55rem, 1.1vw, .75rem) var(--font-sans); }
.aotm-sticker b { font: 400 clamp(1.25rem, 2.6vw, 1.9rem)/1 var(--font-display); margin: .1em 0; }
.aotm-sticker small { font: 700 clamp(.5rem, 1vw, .68rem) var(--font-sans); opacity: .85; }

/* the shelf-talker: a handwritten card pinned next to the record */
.aotm-card {
  position: relative;
  padding: 2.2rem 2rem 1.8rem 3rem;
  color: #3a2117;
  background:
    linear-gradient(to right, transparent 1.9rem, rgba(184, 95, 45, .55) 1.9rem calc(1.9rem + 2px), transparent calc(1.9rem + 2px)),
    repeating-linear-gradient(to bottom, transparent 0 2.05rem, rgba(111, 112, 70, .22) 2.05rem 2.12rem),
    #fffdf8;
  box-shadow: 10px 10px 0 rgba(28, 17, 13, .28);
  transform: rotate(1.2deg);
}
.aotm-card::before {
  content: "";
  position: absolute; top: -10px; left: 50%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ce7841, #b85f2d 55%, #743a22);
  box-shadow: 0 3px 4px rgba(0, 0, 0, .3);
  transform: translateX(-50%);
}
.aotm-kicker { margin: 0; font: 700 .88rem var(--font-sans); color: #b85f2d; }
.aotm-title {
  margin: .5rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.04;
  text-wrap: balance;
}
.aotm-title a { color: inherit; text-decoration: none; }
.aotm-title a:hover { text-decoration: underline; text-decoration-color: #d8a06d; text-underline-offset: 5px; }
.aotm-note { margin: 1rem 0 0; font-family: var(--font-text); font-size: 1.12rem; line-height: 1.85; }
.aotm-sign { margin: .4rem 0 0; font-family: var(--font-text); font-style: italic; font-size: 1.25rem; color: #743a22; }
.aotm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.4rem; }
.aotm-past { font-weight: 700; color: #3a2117; text-decoration: underline; text-decoration-color: #d8a06d; text-decoration-thickness: 2px; text-underline-offset: 4px; }

@media (max-width: 760px) {
  .aotm-inner { grid-template-columns: 1fr; }
  .aotm-sleeve { width: 68%; }
  .aotm-sticker { width: 44%; }
  .aotm-card { transform: rotate(.6deg); padding: 2rem 1.3rem 1.5rem 2.4rem; }
  .aotm-card { background:
    linear-gradient(to right, transparent 1.4rem, rgba(184, 95, 45, .55) 1.4rem calc(1.4rem + 2px), transparent calc(1.4rem + 2px)),
    repeating-linear-gradient(to bottom, transparent 0 2.05rem, rgba(111, 112, 70, .22) 2.05rem 2.12rem),
    #fffdf8; }
}

/* Album of the Month post header */
.aotm-head {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding: clamp(3rem, 7vw, 4.5rem) 0 clamp(2.5rem, 6vw, 3.5rem);
}
.aotm-head .aotm-sleeve { width: 78%; }
.aotm-head .aotm-head-title { margin: 1rem 0 0; text-align: left; }
.aotm-head .article-dek { margin-left: 0; }
@media (max-width: 760px) {
  .aotm-head { grid-template-columns: 1fr; }
  .aotm-head .aotm-sleeve { width: 66%; }
}

/* ---------- Article ---------- */

.article-head { text-align: center; padding: clamp(3rem, 7vw, 4.75rem) 0 2.25rem; }

.tag-pill {
  display: inline-block;
  padding: .28rem .85rem;
  border-radius: 3px;
  border: 1.5px solid var(--rust);
  box-shadow: inset 0 0 0 2px var(--cream), inset 0 0 0 3px var(--caramel);
  background: var(--cream);
  color: var(--rust);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
}
.tag-pill:hover { background: #efd4b6; }

.article-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 1.1rem 0 0;
  text-wrap: balance;
}
.page-article .article-title { margin-top: 0; }

.article-dek {
  font-family: var(--font-text);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.5;
  color: var(--rust);
  margin: 1.1rem auto 0;
  max-width: 34em;
}

.article-meta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .5rem 1.25rem;
  margin-top: 1.75rem;
  font-size: .95rem;
  color: var(--muted);
}
.article-meta a { color: var(--espresso); font-weight: 700; text-decoration: none; }
.article-meta a:hover { text-decoration: underline; text-decoration-color: var(--caramel); }
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; margin-right: -.6rem; }

.article-image { margin-top: 0; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.article-image img, .article-image .ph-hero { width: 100%; border-radius: 2px; border: 1.5px solid var(--espresso); }
.article-image figcaption,
.gh-content figcaption {
  margin-top: .7rem;
  text-align: center;
  font-size: .9rem;
  color: var(--muted);
}

/* Content grid lets images go wide or full-bleed */
.gh-content {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1.25rem, 1fr)
    [wide-start] minmax(auto, 9rem)
    [main-start] min(40rem, calc(100% - 2.5rem))
    [main-end] minmax(auto, 9rem)
    [wide-end] minmax(1.25rem, 1fr)
    [full-end];
  font-family: var(--font-text);
  font-size: clamp(1.1rem, 1.6vw, 1.2rem);
  line-height: 1.78;
  color: #2f1a12;
}
.gh-content > * { grid-column: main-start / main-end; margin: 0; }
.gh-content > * + * { margin-top: 1.5em; }
.gh-content > .kg-width-wide { grid-column: wide-start / wide-end; }
.gh-content > .kg-width-full { grid-column: full-start / full-end; }
.gh-content > .kg-width-full img { border-radius: 0; }

/* Drop cap on posts, a nod to old magazines */
.post-template .gh-content > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.4em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--pumpkin);
}

.gh-content h2,
.gh-content h3,
.gh-content h4 { margin-top: 2.2em; }
.gh-content h2 + *,
.gh-content h3 + *,
.gh-content h4 + * { margin-top: .75em; }

.gh-content h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.85em; line-height: 1.12;
}
.gh-content h3 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 1.2em; line-height: 1.3;
}
.gh-content h4 { font-family: var(--font-sans); font-weight: 700; font-size: 1em; }

.gh-content a {
  color: var(--rust);
  text-decoration: underline;
  text-decoration-color: var(--caramel);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.gh-content a:hover { color: var(--pumpkin); }

.gh-content strong { font-family: var(--font-sans); font-weight: 700; font-size: .93em; }

.gh-content ul, .gh-content ol { padding-left: 1.4em; }
.gh-content li + li { margin-top: .5em; }
.gh-content li::marker { color: var(--pumpkin); }

.gh-content blockquote:not([class]) {
  border-left: 3px solid var(--pumpkin);
  padding-left: 1.25em;
  font-style: italic;
  color: var(--rust);
}

.gh-content .kg-blockquote-alt {
  text-align: center;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1.6em;
  line-height: 1.3;
  color: var(--rust);
  padding: .5em 0;
}

/* Section break, borrowed from the style tile's asterisks */
.gh-content hr {
  border: 0; height: auto;
  text-align: center;
  margin-block: 2.5em;
}
.gh-content hr::before {
  content: "*  *  *";
  white-space: pre;
  font-family: var(--font-display);
  font-size: 1.5em;
  color: var(--caramel);
}

.gh-content img { border-radius: var(--radius-sm); }
.gh-content .kg-image { margin-inline: auto; }
.gh-content .kg-gallery-image img { border-radius: 1px; }

.gh-content code {
  font-size: .85em;
  background: var(--cream);
  padding: .1em .35em;
  border-radius: 4px;
}

.gh-content iframe { max-width: 100%; }

.gh-content .kg-bookmark-card a { text-decoration: none; }
.gh-content .kg-bookmark-container { border-radius: var(--radius-md) !important; background: var(--card); }

.article-tags {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

/* ---------- Subscribe ---------- */

.subscribe { margin-top: 4rem; }

.subscribe-box {
  background: var(--espresso);
  color: var(--cream);
  border-radius: var(--radius-lg);
  outline: 1.5px dashed var(--caramel);
  outline-offset: -12px;
  padding: clamp(1.75rem, 5vw, 2.75rem);
}

.subscribe-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.2rem);
  line-height: 1.1;
  color: var(--paper);
  margin: 0;
}
.subscribe-box > p { margin: .8rem 0 1.5rem; }

.subscribe-form { display: flex; flex-wrap: wrap; gap: .6rem; }
.subscribe-form input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: .78rem 1.15rem;
  border-radius: 3px;
  border: 1.5px solid var(--caramel);
  background: #4a2c1f;
  border-radius: 3px;
  color: var(--paper);
  font: 1rem var(--font-sans);
}
.subscribe-form input::placeholder { color: #c9a88b; }
.subscribe-form .btn-primary { border-color: var(--caramel); box-shadow: 3px 3px 0 var(--caramel); }
.subscribe-form.loading button { opacity: .6; pointer-events: none; }

.form-msg { display: none; flex-basis: 100%; margin: .5rem 0 0; font-weight: 500; }
.subscribe-form.success .form-success { display: block; color: var(--caramel); }
.subscribe-form.error .form-error { display: block; color: #f0b48c; }

.comments { margin-top: 4rem; }

.keep-reading { margin-top: clamp(4rem, 8vw, 5.5rem); }

/* ---------- Footer ---------- */

.site-footer {
  margin-top: clamp(4.5rem, 9vw, 6.5rem);
  border-top: 6px double var(--caramel);
  background: var(--espresso);
  color: var(--cream);
  padding: 3.75rem 0 2rem;
}

.footer-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 2.5rem;
}

.footer-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.05;
  color: var(--paper);
  margin: 0;
}
.footer-desc { max-width: 40ch; margin: .8rem 0 0; color: var(--caramel); }

.footer-links { display: flex; gap: 3rem; }
.footer-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-links a { text-decoration: none; font-weight: 500; }
.footer-links a:hover { text-decoration: underline; text-decoration-color: var(--caramel); text-underline-offset: 4px; }

.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(243, 226, 207, .18);
  font-size: .9rem;
  color: var(--caramel);
}
.footer-base p { margin: 0; }

.site-footer :focus-visible { outline-color: var(--caramel); }

/* ---------- Motion preferences ---------- */

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