/* NYCO — dusk at sea. Tide, haze, mist, dove, one blush accent. */
:root {
  --tide: #16263a;
  --tide-2: #213650;
  --dusk: #3d5468;
  --haze: #9db0bc;
  --mist: #dde5e8;
  --dove: #fafaf7;
  --blush: #f4a6c6;
  --blush-deep: #e889b0;
  --ink: #16263a;

  --wide: "Archivo", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
  --glow: 0; /* driven by audio energy in app.js */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tide);
  color: var(--dove);
  font: 400 1.0625rem/1.6 var(--wide);
  font-variation-settings: "wdth" 100;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blush); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blush); color: var(--tide); }

.grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 60; opacity: .09; mix-blend-mode: overlay;
}

/* ---------- buttons ---------- */
.btn {
  --bg: transparent; --fg: currentColor; --bd: currentColor;
  display: inline-flex; align-items: center; gap: .55em;
  padding: .85em 1.5em; border-radius: 999px;
  border: 1.5px solid var(--bd); background: var(--bg); color: var(--fg);
  font: 650 .95rem/1 var(--wide); font-variation-settings: "wdth" 112;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: scale(.97); }
.btn--blush { --bg: var(--blush); --fg: var(--tide); --bd: var(--blush); }
.btn--blush:hover { --bg: var(--dove); --bd: var(--dove); }
.btn--ghost { --fg: var(--dove); --bd: rgba(250,250,247,.5); }
.btn--ghost:hover { --bd: var(--dove); --bg: rgba(250,250,247,.08); }
.btn--tide { --bg: var(--tide); --fg: var(--dove); --bd: var(--tide); }
.btn--tide:hover { --bg: var(--tide-2); }
.btn--line { --fg: var(--tide); --bd: rgba(22,38,58,.35); }
.btn--line:hover { --bd: var(--tide); }
.btn--sm { padding: .65em 1.15em; font-size: .85rem; }
.btn--lg { padding: 1.05em 2em; font-size: 1.05rem; }
.btn svg { width: 1em; height: 1em; fill: currentColor; }
.ic-pause { display: none; }
[aria-pressed="true"] .ic-play { display: none; }
[aria-pressed="true"] .ic-pause { display: block; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 14px var(--gutter);
  transition: background-color .3s, backdrop-filter .3s;
}
.nav.is-solid { background: rgba(22,38,58,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav__mark {
  font-weight: 900; font-variation-settings: "wdth" 125; font-size: 1.25rem;
  letter-spacing: .04em; text-decoration: none;
}
.nav__links { display: flex; gap: clamp(1rem, 3vw, 2.2rem); }
.nav__links a { text-decoration: none; font-size: .95rem; opacity: .85; }
.nav__links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--blush); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  overflow: hidden; isolation: isolate;
}
.hero__sky {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 60% at 50% 74%, rgba(244,166,198,calc(.28 + var(--glow) * .45)) 0%, rgba(244,166,198,0) 55%),
    linear-gradient(180deg, var(--tide) 0%, var(--tide-2) 32%, var(--dusk) 58%, #8a9fac 73%, #6f8696 74%, #2b4157 100%);
}
.hero__inner {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 120px var(--gutter) 30vh; text-align: center;
}
.hero__new {
  display: block; margin: 0 auto 1.6rem; text-wrap: balance;
  font-size: .9rem; line-height: 1.5; color: var(--mist);
}
.hero__new em { font-family: var(--serif); font-size: 1.2em; font-style: italic; color: var(--dove); }
.dot { display: inline-block; vertical-align: .1em; margin-right: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--blush); box-shadow: 0 0 0 0 rgba(244,166,198,.7); animation: ping 2.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(244,166,198,0); } 100% { box-shadow: 0 0 0 0 rgba(244,166,198,0); } }

/* The wordmark: wide Archivo stretching open, with a trance-blur echo */
.wordmark {
  position: relative; margin: 0; line-height: .8;
  font-weight: 900; font-size: clamp(4.4rem, 19vw, 19rem);
  letter-spacing: -.01em;
}
.wordmark__main { position: relative; display: inline-flex; }
.wordmark__main span {
  display: inline-block; font-variation-settings: "wdth" 125;
  transition: font-variation-settings 1.6s cubic-bezier(.2,.8,.1,1), opacity 1.2s, transform 1.6s cubic-bezier(.2,.8,.1,1);
}
.wordmark__echo {
  position: absolute; inset: 0; display: flex; justify-content: center;
  color: var(--blush); font-variation-settings: "wdth" 125;
  filter: blur(calc(18px + var(--glow) * 22px)); opacity: calc(.35 + var(--glow) * .5);
  transform: scaleY(calc(1 + var(--glow) * .08));
}
.hero__line {
  margin: 1.4rem 0 .4rem; font: italic 400 clamp(1.6rem, 3.6vw, 2.8rem)/1.15 var(--serif);
}
.hero__sub { margin: 0 auto; max-width: 34ch; color: var(--mist); }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2.2rem; }
.horizon { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34vh; z-index: -1; }
.hero__hint { position: absolute; bottom: 18px; left: 0; right: 0; margin: 0; text-align: center; font-size: .8rem; color: var(--mist); opacity: .8; }

/* intro: the letters arrive condensed and breathe open */
.is-loading .wordmark__main span { font-variation-settings: "wdth" 62; opacity: 0; transform: translateY(.12em); }
.is-loading .wordmark__main span:nth-child(2) { transition-delay: .08s; }
.wordmark__main span:nth-child(2) { transition-delay: .08s; }
.wordmark__main span:nth-child(3) { transition-delay: .16s; }
.wordmark__main span:nth-child(4) { transition-delay: .24s; }
.is-loading .wordmark__echo, .is-loading .hero__new, .is-loading .hero__line, .is-loading .hero__sub, .is-loading .hero__cta, .is-loading .hero__plats { opacity: 0; }
.wordmark__echo, .hero__new, .hero__line, .hero__sub, .hero__cta, .hero__plats { transition: opacity 1.2s .7s; }

/* ---------- shared section type ---------- */
.serif-xl { margin: 0; font: 400 clamp(2.8rem, 7vw, 5.6rem)/.95 var(--serif); letter-spacing: -.01em; }
.kicker { margin: 0 0 .8rem; font-size: .9rem; opacity: .7; }
.lead { font-size: 1.15rem; max-width: 46ch; }
.sub-title {
  margin: clamp(3rem, 7vw, 5rem) 0 1.2rem; font-weight: 700; font-size: 1rem;
  font-variation-settings: "wdth" 118; letter-spacing: .02em;
}

/* ---------- music ---------- */
.music { background: var(--mist); color: var(--ink); padding: clamp(5rem, 11vw, 9rem) var(--gutter); }
.music > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.release { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.release__cover { position: relative; margin: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(22,38,58,.55); }
.release__play {
  position: absolute; right: 18px; bottom: 18px; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--blush); color: var(--tide); transition: transform .2s, background-color .2s;
}
.release__play:hover { transform: scale(1.06); background: var(--dove); }
.release__play svg { width: 26px; height: 26px; fill: currentColor; }
.quote { margin: 1.8rem 0; padding-left: 1.2rem; border-left: 2px solid var(--blush-deep); }
.quote p { margin: 0; font: italic 400 1.45rem/1.3 var(--serif); max-width: 34ch; }
.listen { display: flex; flex-wrap: wrap; gap: .6rem; }
.player { margin-top: clamp(3rem, 7vw, 5rem); }
.player iframe { display: block; border: 0; border-radius: 12px; background: rgba(22,38,58,.08); }

.discs { list-style: none; margin-block: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.discs a { display: block; text-decoration: none; }
.discs img { border-radius: 4px; aspect-ratio: 1; object-fit: cover; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.discs a:hover img { transform: translateY(-4px) rotate(-.6deg); }
.discs__t { display: block; margin-top: .7rem; font-weight: 650; line-height: 1.25; }
.discs__m { display: block; font-size: .85rem; opacity: .65; }

/* ---------- shows ---------- */
.shows { padding: clamp(5rem, 11vw, 9rem) var(--gutter) clamp(4rem, 8vw, 6rem); background: linear-gradient(180deg, var(--tide) 0%, var(--tide-2) 100%); }
.shows > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.shows__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.gigs { list-style: none; margin-block: 0; padding: 0; border-top: 1px solid rgba(221,229,232,.22); }
.gig {
  display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 1.2rem; align-items: baseline;
  padding: 1.25rem 0; border-bottom: 1px solid rgba(221,229,232,.22);
}
.gig time { font-size: .95rem; color: var(--haze); }
.gig time b { font: 400 2.1rem/1 var(--serif); color: var(--dove); margin-right: .3rem; }
.gig__name { font-weight: 650; font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-variation-settings: "wdth" 110; line-height: 1.2; }
.gig__name small { font-weight: 500; font-size: .7em; color: var(--blush); margin-left: .4rem; }
.gig__where { color: var(--mist); text-align: right; }
.gig--next { position: relative; }
.gig--next::before { content: ""; position: absolute; left: -1.2rem; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--blush); }
.gigs--past .gig { padding: .8rem 0; }
.gigs--past .gig time b { font-size: 1.5rem; }
.gigs--past .gig__name { font-size: 1.05rem; font-weight: 500; }

.marquee { max-width: none; margin-top: clamp(4rem, 8vw, 6rem); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; width: max-content; animation: drift 48s linear infinite; }
.marquee__track span {
  padding: 0 1.4rem; white-space: nowrap; font: italic 400 clamp(2rem, 5vw, 3.8rem)/1.1 var(--serif); color: var(--haze);
}
.marquee__track span::after { content: "🕊"; font-style: normal; font-size: .45em; margin-left: 2.8rem; vertical-align: middle; opacity: .6; }
@keyframes drift { to { transform: translateX(-50%); } }

/* ---------- about ---------- */
.about {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center;
  padding: clamp(5rem, 11vw, 9rem) var(--gutter); background: var(--mist); color: var(--ink);
}
.about > * { max-width: 720px; }
.about__photo { margin: 0; justify-self: end; width: 100%; max-width: 520px; border-radius: 999px 999px 6px 6px; overflow: hidden; }
.about__photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: saturate(.75) contrast(1.05) sepia(.08); }
.about__text p { max-width: 58ch; }
.about__text h2 { margin-bottom: 1.6rem; }
.about__text em { font-family: var(--serif); font-size: 1.15em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2rem; margin: 2.4rem 0 0; padding-top: 2rem; border-top: 1px solid rgba(22,38,58,.2); }
.facts div { display: flex; flex-direction: column-reverse; }
.facts dt { font-size: .9rem; opacity: .7; }
.facts dd { margin: 0; font-weight: 800; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-variation-settings: "wdth" 125; line-height: 1.05; }

/* ---------- booking ---------- */
.book {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(5rem, 11vw, 9rem) var(--gutter);
  background:
    radial-gradient(80% 60% at 10% 100%, rgba(244,166,198,.22), transparent 60%),
    var(--tide);
}
.book > * { max-width: 680px; }
.book__intro { justify-self: end; }
.contacts { margin: 2.4rem 0 0; display: grid; gap: 1.4rem; }
.contacts dt { font-size: .9rem; color: var(--haze); }
.contacts dd { margin: .2rem 0 0; }
.contacts a { color: var(--blush); text-underline-offset: 4px; }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.4rem; align-content: start; }
.field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.field--wide, .field--choice, .form__error, .form__done, .form .btn { grid-column: 1 / -1; }
.field label, .field legend { font-size: .9rem; color: var(--mist); }
.opt { color: var(--haze); }
.field input, .field textarea {
  width: 100%; padding: .85rem 1rem; border-radius: 10px;
  border: 1.5px solid rgba(221,229,232,.25); background: rgba(250,250,247,.05);
  color: var(--dove); font: inherit; color-scheme: dark;
  transition: border-color .2s, background-color .2s;
}
.field input::placeholder { color: rgba(157,176,188,.7); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blush); background: rgba(250,250,247,.08); }
.field [aria-invalid="true"] { border-color: #ff8f8f; }
.field--choice { border: 0; padding: 0; margin: 0; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
.field--choice legend { margin-bottom: .45rem; width: 100%; }
.field--choice label { cursor: pointer; }
.field--choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.field--choice span { display: inline-block; padding: .6rem 1.1rem; border-radius: 999px; border: 1.5px solid rgba(221,229,232,.3); color: var(--dove); font-size: .95rem; transition: all .2s; }
.field--choice input:checked + span { background: var(--dove); color: var(--tide); border-color: var(--dove); }
.field--choice input:focus-visible + span { outline: 2px solid var(--blush); outline-offset: 3px; }
.form .btn { justify-self: start; margin-top: .4rem; }
.form__error { margin: 0; color: #ffb3b3; }
.form__done { margin: 0; padding: 1rem 1.2rem; border-radius: 10px; background: rgba(244,166,198,.14); color: var(--dove); }

/* ---------- footer ---------- */
.foot { padding: 4rem var(--gutter) 6rem; background: var(--tide); border-top: 1px solid rgba(221,229,232,.12); text-align: center; }
.foot__mark { margin: 0; font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(3rem, 14vw, 10rem); line-height: .9; color: var(--tide-2); -webkit-text-stroke: 1px rgba(221,229,232,.25); }
.foot__links { list-style: none; padding: 0; margin: 2rem 0 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; }
.foot__links a { text-decoration: none; color: var(--mist); }
.foot__links a:hover { color: var(--blush); }
.foot__small { margin: 0; font-size: .85rem; color: var(--haze); }

/* floating CTA, shows after the hero */
.dock { position: fixed; right: 16px; bottom: 16px; z-index: 55; box-shadow: 0 12px 30px -8px rgba(0,0,0,.45); transform: translateY(140%); transition: transform .4s cubic-bezier(.2,.8,.2,1), background-color .2s; }
.dock.is-on { transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .release, .about, .book { grid-template-columns: 1fr; }
  .about__photo, .book__intro { justify-self: start; }
  .about__photo { max-width: 380px; }
  .discs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nav__links { display: none; }
  .nav .btn--sm { display: none; }
  .hero__inner { padding-bottom: 32vh; }
  .gig { grid-template-columns: 4.6rem 1fr; gap: .2rem 1rem; }
  .gig__where { grid-column: 2; text-align: left; font-size: .95rem; }
  .gig--next::before { left: -.75rem; }
  .form { grid-template-columns: 1fr; }
  .facts { gap: 1.2rem; }
  .dock { left: 16px; right: 16px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------- watch ---------- */
.watch { padding: clamp(5rem, 11vw, 9rem) var(--gutter); background: var(--tide-2); }
.watch > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.watch .lead { margin-top: 1rem; color: var(--mist); }
.sets { list-style: none; padding: 0; margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); }
.sets__main { grid-column: 1 / -1; }
.yt, .sets iframe { position: relative; display: block; width: 100%; aspect-ratio: 16/9; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--tide); cursor: pointer; }
.yt img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: filter .3s, transform .5s cubic-bezier(.2,.8,.2,1); }
.yt:hover img { filter: saturate(1.05); transform: scale(1.02); }
.yt__play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--blush); }
.yt__play::after { content: ""; position: absolute; left: 27px; top: 22px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--tide); }
.sets__main .yt__play { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
.sets__main .yt__play::after { left: 35px; top: 29px; border-width: 15px 0 15px 24px; }
.sets__t { margin: .9rem 0 .15rem; font-weight: 650; line-height: 1.3; }
.sets__main .sets__t { font: 400 clamp(1.5rem, 3vw, 2.2rem)/1.15 var(--serif); }
.sets__m { margin: 0; font-size: .9rem; color: var(--haze); }
@media (max-width: 900px) { .sets { grid-template-columns: 1fr; } }
.foot__credit { margin: .8rem 0 0; font-size: .85rem; color: var(--haze); }
.foot__credit a { color: var(--mist); text-underline-offset: 4px; }
.foot__credit a:hover { color: var(--blush); }

@media (max-width: 640px) { .hero__new { max-width: 34ch; } .hero__inner { padding-top: 84px; } }

/* ---------- the big hit leads the crate: 4 columns, first cover 2x2, so 9 releases fill 3 even rows ---------- */
.discs li:first-child { grid-column: span 2; grid-row: span 2; }
.discs li:first-child .discs__t { font-size: 1.35rem; }

/* ---------- hero: his portrait rises out of the horizon, the wordmark sits in front ---------- */
.hero__inner { display: grid; justify-items: center; }
.hero__copy { position: relative; z-index: 1; width: 100%; }
.hero__portrait { position: relative; margin: -24px 0 .2rem; width: clamp(130px, 36vw, 230px); }
.hero__portrait::before { /* stage light behind him, breathing with the music */
  content: ""; position: absolute; inset: -20% -35% 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244,166,198,calc(.35 + var(--glow, 0) * .45)), rgba(244,166,198,0));
  transform: scale(calc(1 + var(--glow, 0) * .08));
}
.hero__portrait img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 25%;
  filter: saturate(.7) contrast(1.06);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 52%, transparent 94%), linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 52%, transparent 94%), linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.is-loading .hero__portrait { opacity: 0; transform: translateY(16px); }
.hero__portrait { transition: opacity 1.4s .2s, transform 1.6s .2s cubic-bezier(.2,.8,.1,1); }

/* listen / follow pills under the hero buttons */
.hero__plats { display: grid; gap: .5rem; margin-top: 1.6rem; justify-items: center; }
.hero__plats p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; }
.hero__plats span { font-size: .8rem; color: var(--mist); margin-right: .2rem; }
.plat { padding: .42em .9em; border-radius: 999px; border: 1px solid rgba(250,250,247,.28); background: rgba(11,21,34,.25); color: var(--dove); font-size: .85rem; font-weight: 600; text-decoration: none; transition: border-color .2s, background-color .2s; }
.plat:hover { border-color: var(--blush); background: rgba(244,166,198,.14); }

@media (min-width: 1000px) {
  /* two columns on desktop: the copy left, NYCO himself right */
  .hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; justify-items: stretch; column-gap: 2rem; text-align: left; padding-top: 96px; padding-bottom: 30vh; }
  .hero__portrait { order: 2; width: 100%; max-width: 460px; justify-self: end; margin: 0; }
  .hero__portrait img { aspect-ratio: 4/5; }
  .hero__copy .wordmark { font-size: clamp(6rem, 11vw, 10.5rem); }
  .hero__plats { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.4rem; }
  .hero__portrait img { max-height: 66vh; width: auto; margin-left: auto; }
  .wordmark__echo { justify-content: flex-start; }
  .hero__new { margin-left: 0; }
  .hero__sub { margin-left: 0; }
  .hero__cta, .hero__plats p { justify-content: flex-start; }
  .hero__plats { justify-items: start; }
  .hero__copy .next-show { margin-left: 0; }
}

/* ---------- listen and follow ---------- */
.follow__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.follow__card { display: grid; gap: .35rem; height: 100%; padding: 1.3rem 1.4rem; border-radius: 14px; border: 1px solid rgba(22,38,58,.18); background: rgba(250,250,247,.55); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s; }
.follow__card b { font-size: 1.2rem; font-variation-settings: "wdth" 115; }
.follow__card span { font-size: .92rem; opacity: .75; }
.follow__card i { margin-top: .4rem; font-style: normal; font-weight: 700; color: var(--tide); }
.follow__card i::after { content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .5em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg) translateY(-.1em); }
.follow__card:hover { border-color: var(--tide); background: var(--dove); transform: translateY(-3px); }
.follow__card--spotify { background: var(--tide); color: var(--dove); border-color: var(--tide); }
.follow__card--spotify i { color: var(--blush); }
.follow__card--spotify:hover { background: var(--tide-2); border-color: var(--tide-2); }
@media (max-width: 900px) { .follow__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .follow__grid { grid-template-columns: 1fr; } }

/* keep the two-column sections on the same content column as everything else */
.about, .book { padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); }
/* the armchair shot: shown whole (lamp, phone, old TV), not cropped into the arch */
.about__photo { border-radius: 10px; max-width: 640px; box-shadow: 0 30px 60px -30px rgba(22,38,58,.5); }
.about__photo img { aspect-ratio: 4/3; object-position: 50% 50%; filter: none; }
.about { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; }
@media (min-width: 901px) { .about__photo { position: sticky; top: 110px; margin-top: 1rem; } }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } .about__photo { max-width: 100%; } }

/* the main set: plays muted by itself, one clear button turns the sound on */
.yt-live { position: relative; }
.yt-live iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 8px; background: var(--tide); }
.sets__sound {
  position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.3rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--blush); color: var(--tide); font: 700 1rem/1 var(--wide); font-variation-settings: "wdth" 112;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.55); animation: sound-pulse 1.8s ease-in-out infinite;
}
.sets__sound svg { width: 1.25em; height: 1.25em; fill: currentColor; }
.sets__sound:not(.is-on) .w { opacity: .35; }
.sets__sound.is-on { background: rgba(22,38,58,.75); color: var(--dove); animation: none; backdrop-filter: blur(6px); }
@keyframes sound-pulse { 50% { box-shadow: 0 0 0 10px rgba(244,166,198,.25), 0 10px 30px -8px rgba(0,0,0,.55); } }
@media (max-width: 640px) { .sets__sound { left: 10px; top: 10px; padding: .7rem 1rem; font-size: .9rem; } }