/* ═══════════════════════════════════════════════════════════════════
   project heart — design system
   red #d12e49 · ink #202a33 · Quicksand light display + bold labels
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --red:        #d12e49;
  --red-deep:   #a8203a;
  --red-soft:   #e8657a;
  --ink:        #1e2b47;
  --paper:      #ffffff;
  --blush:      #fdeff2;
  --sand:       #fff9f7;

  --container: 1280px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section-y: clamp(5rem, 12vw, 11rem);

  --fs-display:  clamp(3rem, 8.5vw, 7.5rem);
  --fs-hero:     clamp(3.25rem, 9vw, 8rem);
  --fs-h2:       clamp(1.6rem, 2.6vw, 2.35rem);
  --fs-lead:     clamp(1.15rem, 1.9vw, 1.6rem);
  --fs-body:     clamp(1rem, 1.15vw, 1.125rem);
  --fs-kicker:   clamp(0.7rem, 0.9vw, 0.8rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Quicksand", ui-rounded, "Hiragino Maru Gothic ProN", "Segoe UI", system-ui, sans-serif;
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* The real felt sticker. As an <img> wherever it sits on a light ground, and
   as a mask (silhouette tinted with currentColor) wherever it sits on red. */
.felt{
  display:inline-block;
  aspect-ratio:326 / 308;
  background-color:currentColor;
  /* felt-heart-mask.png is the red felt alone; the colour version keeps the
     sticker's drop shadow, which reads as a lump once tinted and shrunk. */
  -webkit-mask:url(../img/felt-heart-mask.png) center/contain no-repeat;
          mask:url(../img/felt-heart-mask.png) center/contain no-repeat;
}

.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:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 .75rem 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid currentColor; outline-offset:4px; border-radius:.25rem; }

/* ─── shared type ──────────────────────────────────────────────────── */

.display{
  font-size:var(--fs-display);
  font-weight:300;
  line-height:.95;
  letter-spacing:-.02em;
  margin:0;
}
.display--red{ color:var(--red); }
.display--light{ color:#fff; }

.kicker{
  display:inline-block;
  font-size:var(--fs-kicker);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0;
}
.kicker--light{
  color:#fff;
  font-size:clamp(1rem, 1.6vw, 1.35rem);
  font-weight:400;
  letter-spacing:.01em;
  text-transform:none;
  line-height:1.4;
}

.lead{ font-size:var(--fs-lead); font-weight:400; line-height:1.5; }

/* One dot per hero statement — a control, not decoration. */
.dots{ display:flex; gap:.55rem; margin:1.75rem 0; padding:0; }
.dots__dot{
  /* buttons don't inherit colour from their parent — the UA sheet forces
     `buttontext`, so currentColor would come out black. */
  color:inherit;
  width:.9rem; height:.9rem; flex:none;
  border:1.5px solid currentColor; border-radius:50%;
  background:transparent; padding:0; cursor:pointer;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.dots__dot:hover{ background:currentColor; opacity:.6; }
.dots__dot[aria-current="true"]{ background:currentColor; transform:scale(1.2); }

/* All three statements share one grid cell, so swapping never shifts the
   layout — the box is always as tall as the longest of them. */
.rotator{ display:grid; }
.rotator__item{
  grid-area:1 / 1;
  opacity:0; transition:opacity .7s var(--ease);
}
.rotator__item.is-active{ opacity:1; }

.btn{
  display:inline-block;
  font-weight:600;
  letter-spacing:.04em;
  text-decoration:none;
  padding:.85rem 1.75rem;
  border:1.5px solid var(--red);
  color:var(--red);
  border-radius:2rem 1.4rem 2rem 1.4rem;
  transition:background .35s var(--ease), color .35s var(--ease), border-radius .5s var(--ease);
}
.btn:hover{ background:var(--red); color:#fff; border-radius:1.4rem 2rem 1.4rem 2rem; }
.btn--ghost{ border-color:rgba(255,255,255,.65); color:#fff; }
.btn--ghost:hover{ background:#fff; color:var(--red); border-color:#fff; }
.btn--solid{ background:#fff; border-color:#fff; color:var(--red); }
.btn--solid:hover{ background:transparent; color:#fff; }

/* ─── blobs ────────────────────────────────────────────────────────── */

.blob{
  margin:0;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
/* Direct child only -- the hero wordmark's heart also lives inside a .blob. */
.blob > img{ width:100%; height:100%; object-fit:cover; }
/* <picture> wrapping means the img is no longer a direct child */
.blob > picture{ display:block; width:100%; height:100%; }
.blob > picture > img{ width:100%; height:100%; object-fit:cover; }

.blob--a{ border-radius:68% 32% 56% 44% / 36% 64% 36% 64%; }
.blob--b{ border-radius:36% 64% 71% 29% / 59% 30% 70% 41%; }
.blob--c{ border-radius:62% 38% 46% 54% / 58% 42% 58% 42%; }
.blob--d{ border-radius:31% 69% 62% 38% / 70% 33% 67% 30%; }

/* ─── nav ──────────────────────────────────────────────────────────── */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(1rem,2.2vw,1.6rem) var(--gutter);
  color:#fff;
  transition:color .4s var(--ease), background .4s var(--ease);
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .4s var(--ease);
}
.nav.is-stuck::before{ opacity:1; }
.nav.is-stuck[data-on="red"]::before{ background:rgba(209,46,73,.82); }
.nav.is-stuck[data-on="light"]::before{ background:rgba(255,255,255,.86); }
.nav[data-on="light"]{ color:var(--red); }

.nav__mark{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:clamp(1.05rem,1.5vw,1.25rem); font-weight:500; letter-spacing:-.01em;
  text-decoration:none;
}
.nav__heart{ width:.85em; vertical-align:-.16em; }
.nav[data-on="red"] .nav__heart{ color:#fff; }

.nav__links{ display:flex; gap:clamp(1.25rem,2.6vw,2.75rem); }
.nav__links a{
  text-decoration:none; font-weight:500; font-size:1.05rem;
  position:relative; padding-bottom:.2rem;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:currentColor; transition:right .35s var(--ease);
}
.nav__links a:hover::after{ right:0; }

.nav__toggle{
  display:none; background:none; border:0; padding:.5rem; cursor:pointer; color:inherit;
}
.nav__bars, .nav__bars::before, .nav__bars::after{
  display:block; width:26px; height:1.6px; background:currentColor;
  transition:transform .35s var(--ease), opacity .2s linear;
}
.nav__bars::before,.nav__bars::after{ content:""; position:relative; }
.nav__bars::before{ top:-8px; }
.nav__bars::after{ top:6.4px; }
.nav__toggle[aria-expanded="true"] .nav__bars{ background:transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before{ transform:translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after{ transform:translateY(-6.4px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:55;
  background:var(--red); color:#fff;
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
  padding:var(--gutter);
}
.menu[hidden]{ display:none; }
.menu nav{ display:flex; flex-direction:column; gap:1.25rem; }
.menu a{
  font-size:clamp(2rem,9vw,3rem); font-weight:300; text-decoration:none; line-height:1.1;
}
.menu__foot{ font-size:1rem; opacity:.75; margin:0; }

/* ─── hero ─────────────────────────────────────────────────────────── */

.hero{
  position:relative;
  background:var(--red);
  color:#fff;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(7rem,14vh,10rem) var(--gutter) clamp(5rem,10vh,7rem);
}
.hero__inner{
  width:100%; max-width:var(--container); margin-inline:auto;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(2rem,5vw,4.5rem);
}

.hero__blobwrap{ position:relative; }

.blob--hero{
  width:min(100%, 40rem);
  aspect-ratio:1.08 / 1;
  background:#fff;
  display:grid; place-items:center;
  border-radius:73% 27% 36% 64% / 60% 44% 56% 40%;
  animation:blobMorph 26s ease-in-out infinite;
}
@keyframes blobMorph{
  0%,100%{ border-radius:73% 27% 36% 64% / 60% 44% 56% 40%; }
  25%    { border-radius:62% 38% 68% 32% / 42% 66% 34% 58%; }
  50%    { border-radius:34% 66% 42% 58% / 68% 36% 64% 32%; }
  75%    { border-radius:58% 42% 63% 37% / 33% 70% 30% 67%; }
}

.blob__label{
  color:var(--red);
  font-size:var(--fs-hero);
  font-weight:300;
  line-height:.94;
  letter-spacing:-.03em;
  text-align:left;
  padding-inline:1rem;
}
.blob__line{ display:block; white-space:nowrap; }
.blob__heart{
  display:inline-block; vertical-align:-.1em;
  width:.68em; height:auto; margin-left:.16em;
}

.dot{ position:absolute; border-radius:50%; background:#fff; }
.dot--hero{
  background:var(--red);
  width:clamp(.85rem,1.3vw,1.25rem); aspect-ratio:1;
  right:5%; top:38%;
}

.hero__statement{
  font-size:clamp(1.9rem,3.6vw,3.1rem);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-.015em;
  margin:0;
  max-width:16ch;
}
.hero__copy .dots{ color:#fff; }

.scroll-cue{
  position:absolute; left:var(--gutter); bottom:clamp(1.5rem,4vh,2.5rem);
  display:flex; align-items:center; gap:.9rem;
  font-size:var(--fs-kicker); font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; text-decoration:none; color:#fff;
}
.scroll-cue__line{
  display:block; width:4rem; height:1.5px; background:currentColor; transform-origin:left;
  animation:cue 2.6s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ transform:scaleX(.5); opacity:.5; } 50%{ transform:scaleX(1); opacity:1; } }

/* ─── marquee ──────────────────────────────────────────────────────── */

.marquee{
  overflow:hidden; background:var(--paper); color:var(--red);
  padding:clamp(1.5rem,3vw,2.25rem) 0;
  border-bottom:1px solid var(--blush);
}
.marquee__track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee__track span{
  display:flex; align-items:center;
  font-size:clamp(1.5rem,3.4vw,2.6rem); font-weight:300; letter-spacing:-.01em;
  padding-right:0;
}
.marquee__track i{
  font-style:normal; font-size:.5em; padding-inline:clamp(1rem,2.4vw,2rem);
  transform:translateY(-.15em); color:var(--red-soft);
}
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ─── stats ────────────────────────────────────────────────────────── */

.stats{
  padding:clamp(3.5rem,7vw,6rem) var(--gutter);
  background:var(--red); color:#fff;
}
.stats__list{
  list-style:none; margin:0 auto; padding:0; max-width:var(--container);
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(1.5rem,2.5vw,2rem);
  align-items:start;
}
.stat{ display:flex; flex-direction:column; gap:.4rem; color:#fff; }
.stat__label{
  font-size:var(--fs-kicker); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; opacity:.72;
}
.stat__value{
  font-size:clamp(1.9rem,3.4vw,3.5rem); font-weight:700; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.stat__value--sym{ font-weight:400; }

/* ─── our story ────────────────────────────────────────────────────── */

.story{ padding:var(--section-y) var(--gutter); background:var(--paper); }
.story__grid{
  max-width:var(--container); margin-inline:auto;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,6vw,5rem);
}
.story__head{ position:sticky; top:7rem; align-self:start; }
.blob--cosmic{
  margin-top:clamp(2rem,4vw,3.5rem);
  aspect-ratio:1.05 / 1;
  border-radius:70% 30% 39% 61% / 42% 66% 34% 58%;
  background:var(--ink);
}
.credit{
  margin:.9rem 0 0;
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); opacity:.42;
}

.story__body{ color:var(--red); max-width:62ch; }
.story__body p{ margin:0 0 1.5em; font-size:clamp(1.08rem,1.4vw,1.32rem); line-height:1.55; }
.story__body .p-ink{ color:var(--ink); }
.story__body .lead{ font-size:clamp(1.3rem,2.1vw,1.85rem); }
.story__body strong{ font-weight:700; }
.story__body em{ font-style:normal; }

.pull{
  margin:clamp(2rem,4vw,3rem) 0 0;
  padding-left:clamp(1rem,2vw,1.75rem);
  border-left:2px solid var(--red);
  font-size:clamp(1.4rem,2.6vw,2.15rem);
  font-weight:300; line-height:1.25; letter-spacing:-.01em;
  color:var(--red);
}

/* ─── full-bleed band ──────────────────────────────────────────────── */

.band{ margin:0; position:relative; }
.band img{ width:100%; height:clamp(18rem,52vh,34rem); object-fit:cover; }
@media (min-width:1100px){
  .band img{ height:clamp(34rem,68vh,48rem); }
}
.band figcaption{
  /* right inset too, or a long caption runs flush to the screen edge */
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:1.25rem;
  color:#fff; font-size:var(--fs-kicker); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}

/* ─── values ───────────────────────────────────────────────────────── */

.values{ background:var(--sand); padding:var(--section-y) var(--gutter); }
.values__head{ max-width:var(--container); margin:0 auto clamp(2.5rem,6vw,4.5rem); }
.values__head .kicker{ color:var(--red); }
.values__head .display{ margin-top:1.25rem; color:var(--red); }
.display--ink{ color:var(--ink); }

/* 1px gaps over a tinted backdrop draw the hairline rules between cells —
   no per-cell border maths, and it survives any number of rows. */
.values__grid{
  list-style:none; margin:0 auto; padding:0;
  max-width:var(--container);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--blush); border:1px solid var(--blush);
}
.value{
  background:var(--sand);
  padding:clamp(1.75rem,2.6vw,2.75rem);
}
.value::before{
  content:""; display:block;
  width:1.9rem; height:1.5px; background:var(--red);
  margin-bottom:clamp(2.25rem,4.5vw,4rem);
}
.value h3{
  font-size:clamp(1.15rem,1.5vw,1.35rem); font-weight:600;
  color:var(--ink); margin:0 0 .7rem; letter-spacing:-.01em;
}
.value p{
  margin:0; font-size:1.02rem; line-height:1.62;
  color:var(--ink); opacity:.72;
}

/* ─── time travel ──────────────────────────────────────────────────── */

.time{ background:var(--red); color:#fff; padding:var(--section-y) var(--gutter); }
.time__head{ max-width:var(--container); margin:0 auto clamp(3rem,7vw,6rem); }
.time__intro{
  font-size:var(--fs-lead); font-weight:300; max-width:32ch; margin:1.25rem 0 0; opacity:.9;
}

.track{ position:relative; max-width:var(--container); margin-inline:auto; }
.track__svg{
  position:absolute; inset:0; width:100%; height:100%;
  color:rgba(255,255,255,.85); pointer-events:none;
  /* JS drives --draw from 100% to 0% so the line draws itself on scroll. */
  clip-path:inset(0 0 var(--draw, 0%) 0);
}

.track__list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(3.5rem,8vw,7rem); }

.entry{
  position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:start;
  /* distance from the column edge in to the winding line */
  --to-line:max(2rem, 26%);
}
/* The 26% keeps every card clear of the winding line, whose half-swing is
   12% of the track (see --amp in main.js). Percentages resolve against the
   column, i.e. half the track — so 26% here is 13% of the track. */
.entry--left  .entry__card{ grid-column:1; grid-row:1; padding-right:var(--to-line); }
.entry--right .entry__card{ grid-column:2; grid-row:1; padding-left:var(--to-line); }

/* the photo faces the text across the line, hugging it from the other side */
.entry--left  .entry__photo{ grid-column:2; grid-row:1; margin-left:var(--to-line); }
.entry--right .entry__photo{ grid-column:1; grid-row:1; margin-right:var(--to-line); justify-self:end; }

.entry__dot{
  position:absolute; top:.7rem; left:50%;
  width:1rem; height:1rem; border-radius:50%; background:#fff;
  transform:translate(-50%,0) scale(0);
  transition:transform .5s var(--ease) .1s;
  box-shadow:0 0 0 6px rgba(209,46,73,1);
}
.entry.is-in .entry__dot{ transform:translate(-50%,0) scale(1); }

.entry__card p{ margin:0 0 1.15em; max-width:44ch; font-size:clamp(1.05rem,1.2vw,1.16rem); line-height:1.58; }
.entry--right .entry__card p{ margin-left:0; }
.entry__when{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:.9em !important; }
.entry__year{ font-size:clamp(1.5rem,2.6vw,2.15rem); font-weight:700; letter-spacing:-.02em; line-height:1; }
/* this source has a dark vignette baked in; scale past it rather than
   showing a frame inside the blob */
.entry__photo--crop img{ transform:scale(1.16); }
/* anchor to the top so the gif's caption isn't cropped away; paired with a
   blob whose top-left curve is shallow enough to leave it readable */
.entry__photo--top img{ object-position:center top; }

.entry__photo{
  /* a definite width, not shrink-to-fit: <picture> has no intrinsic size, so
     "auto" collapsed it to 0 inside the justify-self:end columns. The margin
     comes out of the width too: margins sit outside it, so 100% plus a margin
     ran past the column and body's overflow-x quietly clipped it. */
  width:min(100% - var(--to-line), 22rem);
  aspect-ratio:1.15 / 1;
  /* nudged down so it lines up with the body copy, not the year */
  margin-top:2.9rem;
}
.entry--now .entry__year{ font-weight:300; }

/* ─── events ───────────────────────────────────────────────────────── */

.events{ padding:var(--section-y) var(--gutter); background:var(--sand); }
.events__head{ max-width:var(--container); margin:0 auto clamp(2.5rem,6vw,4.5rem); }
.events__head .kicker{ color:var(--red); }
.events__head .display{ margin-top:1.25rem; color:var(--red); }

.cards{
  list-style:none; margin:0 auto; padding:0; max-width:var(--container);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2.2vw,1.75rem);
}
.card{
  background:var(--paper);
  border:1px solid var(--blush);
  border-radius:2.5rem 1rem 2.5rem 1rem;
  padding:clamp(1.75rem,2.6vw,2.5rem);
  transition:transform .45s var(--ease), border-radius .55s var(--ease), box-shadow .45s var(--ease);
}
.card:hover{
  transform:translateY(-6px);
  border-radius:1rem 2.5rem 1rem 2.5rem;
  box-shadow:0 18px 40px -24px rgba(209,46,73,.55);
}
.card__no{
  display:block; margin-bottom:1.1rem;
  font-size:clamp(2rem,3vw,2.75rem); font-weight:300; line-height:1;
  letter-spacing:-.02em; color:var(--red); opacity:.28;
  font-variant-numeric:tabular-nums;
}
.card .kicker{ display:block; color:var(--red); margin-bottom:.55rem; }
.card h3{ font-size:clamp(1.25rem,1.8vw,1.6rem); font-weight:500; line-height:1.2; margin:0 0 .9rem; color:var(--ink); }
.card p{ font-size:1.02rem; line-height:1.62; }
.card p:last-child{ margin:0; }
.card em{ font-style:normal; font-weight:600; }
.card__link{
  display:inline-block; margin-top:.4rem;
  font-weight:600; font-size:.95rem; color:var(--red); text-decoration:none;
  border-bottom:1.5px solid currentColor; padding-bottom:.1rem;
}
.card__link:hover{ opacity:.7; }

/* ─── gallery ──────────────────────────────────────────────────────── */

/* A native scroll-snap rail: it works with a swipe, a trackpad, the arrow
   keys and the buttons below, and it still works with JS switched off. */
.gallery{ background:var(--paper); padding:var(--section-y) 0; }
.gallery__head{
  max-width:var(--container); margin:0 auto clamp(2rem,4vw,3rem);
  padding-inline:var(--gutter);
}
.gallery__head .kicker{ color:var(--red); }
.gallery__head .display{ margin-top:1rem; }

.gallery__track{
  list-style:none; margin:0;
  /* the gutter padding lets the first shot line up with the page's spine
     while the rest run off the right edge, which is the scroll cue */
  padding:0 var(--gutter);
  /* the snap ports must be inset by the same gutter, or the first shot rests
     at scrollLeft:72 instead of 0 and the back button can never disable */
  scroll-padding-inline:var(--gutter);
  display:flex; gap:clamp(1rem,2vw,1.75rem);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.gallery__track::-webkit-scrollbar{ display:none; }
.gallery__track:focus-visible{ outline:2px solid var(--red); outline-offset:6px; }

.shot{ flex:0 0 clamp(15rem,32vw,28rem); scroll-snap-align:start; }
.shot img{
  width:100%; height:clamp(13rem,30vw,20rem); object-fit:cover;
  border-radius:2.5rem 1rem 2.5rem 1rem;
}
.shot__cap{
  display:block; margin-top:.9rem;
  font-size:.85rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); opacity:.45;
}

.gallery__nav{
  max-width:var(--container); margin:clamp(1.5rem,3vw,2.25rem) auto 0;
  padding-inline:var(--gutter);
  display:flex; gap:.75rem;
}
.gallery__btn{
  width:3rem; height:3rem; flex:none;
  display:grid; place-items:center;
  font:inherit; font-size:1.1rem; color:var(--red);
  background:transparent; border:1.5px solid var(--red); border-radius:50%;
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.gallery__btn:hover:not(:disabled){ background:var(--red); color:#fff; }
.gallery__btn:disabled{ opacity:.28; cursor:default; }

/* ─── archive grid ─────────────────────────────────────────────────── */

/* The rail is the highlight reel; everything else lives here, where a grid
   can be scanned in a glance instead of scrolled through for 36,000px. */
.archive{
  max-width:var(--container); margin:clamp(3.5rem,7vw,5.5rem) auto 0;
  padding-inline:var(--gutter);
}
.archive__title{
  font-size:var(--fs-kicker); font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); opacity:.45;
  margin:0 0 1.25rem;
}
.archive__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.5rem,1vw,.9rem);
}
.tile img{
  display:block; width:100%; aspect-ratio:1 / 1; object-fit:cover;
  border-radius:1.25rem .5rem 1.25rem .5rem;
}
.archive__more{ margin:clamp(1.5rem,3vw,2.25rem) 0 0; }
.gallery__cta{
  max-width:var(--container); margin:clamp(2.5rem,5vw,4rem) auto 0;
  padding-inline:var(--gutter);
}
.archive__more[hidden]{ display:none; }

@media (max-width:900px){
  .archive__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:540px){
  .archive__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ─── fadaelo ──────────────────────────────────────────────────────── */

/* A field of felt hearts under the word and what it asks of us. The veil is
   heavy on purpose — the photo is texture here, not an image to read. */
.fadaelo{
  position:relative; isolation:isolate;
  background:var(--blush);
  padding:clamp(4.5rem,10vw,8rem) var(--gutter);
}
.fadaelo::before,
.fadaelo::after{ content:""; position:absolute; inset:0; }
.fadaelo::before{
  z-index:-2;
  background:url(../img/felt-hearts-1600.jpg) center / cover no-repeat;
}
.fadaelo::after{ z-index:-1; background:rgba(253,239,242,.9); }

.fadaelo__grid{
  position:relative;
  max-width:var(--container); margin-inline:auto;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.fadaelo .kicker{ color:var(--red); }
.fadaelo__word{
  font-size:clamp(3.5rem,10vw,9rem); font-weight:300; line-height:.9;
  letter-spacing:-.035em; color:var(--red); margin:1rem 0 1.35rem;
}
.fadaelo__def{
  max-width:38ch; margin:0;
  font-size:var(--fs-lead); font-weight:300; color:var(--ink);
}
.fadaelo__def em{ font-style:italic; color:var(--red); }
.fadaelo__meaning{
  font-size:clamp(1.9rem,4.2vw,3.2rem); font-weight:300; letter-spacing:-.02em;
  color:var(--red); margin:.65rem 0 0;
}
.fadaelo__heart{ width:clamp(2.4rem,4.6vw,3.6rem); height:auto; margin-top:1.6rem; }

.principles__list{
  list-style:none; margin:clamp(1.5rem,2.5vw,2rem) 0 0; padding:0;
  display:grid; gap:clamp(.9rem,1.7vw,1.4rem);
}
.principles__list li{
  display:flex; gap:.85rem; align-items:baseline;
  font-size:clamp(1.05rem,1.45vw,1.28rem); font-weight:300; line-height:1.42;
  letter-spacing:-.005em; color:var(--ink);
}
.principles__list .felt{
  width:.8em; flex:none; color:var(--red);
  transform:translateY(.08em);
}

/* ─── community / footer ───────────────────────────────────────────── */

.community{
  position:relative; overflow:hidden;
  background:var(--red); color:#fff;
  padding:var(--section-y) var(--gutter) clamp(2.5rem,5vw,4rem);
}
.community__inner{ position:relative; max-width:var(--container); margin-inline:auto; }
.community__watermark{
  position:absolute; right:-7%; bottom:-14%; transform:rotate(-9deg);
  width:min(40vw,28rem);
  color:rgba(255,255,255,.075); pointer-events:none;
}
.community__lead{
  font-size:var(--fs-lead); font-weight:300; max-width:44ch; margin:1.75rem 0 1.5rem;
}
.community__note{
  font-size:clamp(1.02rem,1.15vw,1.14rem); line-height:1.62;
  max-width:52ch; margin:0 0 1.25rem; opacity:.88;
}
.community__note:last-of-type{ margin-bottom:2rem; }
.community__meta{
  list-style:none; margin:clamp(4rem,9vw,7rem) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem);
  font-size:clamp(1.25rem,2vw,1.75rem); font-weight:700; letter-spacing:-.01em;
  text-transform:uppercase;
}
.community__meta .kicker{ display:block; font-weight:700; opacity:.7; margin-bottom:.2rem; }
.community__fine{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin:2.5rem 0 0; padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.3);
  font-size:.95rem; opacity:.85;
}
.community__heart{ width:.9em; vertical-align:-.17em; color:#fff; }

/* ─── reveal ───────────────────────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ─── responsive ───────────────────────────────────────────────────── */

@media (max-width:1080px){
  .values__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }

  /* lifted so the blob and the statements share one screen — Safari's
     toolbars can take ~150px off a phone's viewport */
  .hero{ min-height:auto; padding-top:clamp(5.5rem,13vh,8rem); }
  .hero__inner{ grid-template-columns:1fr; }
  .blob--hero{ width:min(86%,26rem); margin-inline:auto; }
  .blob__label{ text-align:center; }
  .dot--hero{ display:none; }
  .hero__statement{ max-width:22ch; }
  .scroll-cue{ position:static; margin-top:3rem; }

  .stats__list{ grid-template-columns:repeat(2,1fr); gap:2.25rem 1.5rem; }

  .story__grid{ grid-template-columns:1fr; }
  .story__head{ position:static; }
  .blob--cosmic{ width:min(100%,24rem); }


  .fadaelo__grid{ grid-template-columns:1fr; }
  /* half-size backdrop on small screens — it's texture, not detail */
  .fadaelo::before{ background-image:url(../img/felt-hearts-900.jpg); }


  /* timeline collapses to a single left-hand rail */
  .entry{ grid-template-columns:1fr; }
  .entry--left .entry__card,
  .entry--right .entry__card{ grid-column:1; padding-left:var(--to-line); padding-right:0; }
  /* stacked under the text again once there is only one column */
  .entry{ --to-line:clamp(2rem,9vw,3.5rem); }
  .entry--left .entry__photo,
  .entry--right .entry__photo{
    grid-column:1; grid-row:auto; justify-self:start;
    margin:1.5rem 0 0 var(--to-line);
  }
  .entry__dot{ left:0; }
  .entry__card p{ max-width:none; }
}

@media (max-width:540px){
  .cards{ grid-template-columns:1fr; }
  .values__grid{ grid-template-columns:1fr; }
  .blob__label{ font-size:clamp(2.6rem,13vw,4rem); }
}

/* ─── motion preferences ───────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .entry__dot{ transform:translate(-50%,0) scale(1); }
  .track__svg{ clip-path:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   heartcasts page
   ═══════════════════════════════════════════════════════════════════ */

.nav__links a[aria-current="page"]::after,
.menu a[aria-current="page"]::after{ right:0; }
.menu a[aria-current="page"]{ opacity:.65; }

/* ─── hero ─────────────────────────────────────────────────────────── */

.cast-hero{
  background:var(--red); color:#fff;
  padding:clamp(9rem,20vh,13rem) var(--gutter) clamp(4rem,9vw,7rem);
}
.cast-hero__inner{ max-width:var(--container); margin-inline:auto; }
.cast-hero .kicker{ opacity:.8; }
.cast-hero .display{ margin:1rem 0 0; }
.cast-hero__lead{
  font-size:clamp(1.5rem,3vw,2.6rem); font-weight:300; line-height:1.25;
  letter-spacing:-.015em; max-width:22ch; margin:clamp(1.75rem,4vw,3rem) 0 0;
}
.cast-hero__body{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.25rem,2.6vw,2.5rem);
  max-width:76ch; margin:clamp(1.75rem,4vw,2.75rem) 0 0;
}
.cast-hero__body p{
  margin:0; font-size:clamp(1.02rem,1.15vw,1.14rem); font-weight:400;
  line-height:1.62; opacity:.88;
}
.cast-hero__body strong{ font-weight:600; opacity:1; }
.cast-hero__closer{
  grid-column:1 / -1;
  font-size:clamp(1.3rem,2.4vw,2rem) !important;
  font-weight:300 !important; line-height:1.3 !important;
  letter-spacing:-.01em; opacity:1 !important;
  max-width:30ch; margin-top:.75rem !important;
}
.cast-hero__meta{
  list-style:none; margin:clamp(3rem,7vw,5rem) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem);
  font-size:clamp(1.25rem,2vw,1.75rem); font-weight:700; letter-spacing:-.01em;
  text-transform:uppercase;
}
.cast-hero__meta .kicker{ display:block; font-weight:700; opacity:.7; margin-bottom:.2rem; }

/* ─── collections ──────────────────────────────────────────────────── */

.casts{
  background:var(--paper);
  padding:var(--section-y) var(--gutter);
  display:grid; gap:clamp(4rem,10vw,8rem);
  max-width:var(--container); margin-inline:auto;
}
.cast{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,6vw,5rem); align-items:center;
}
.cast:nth-child(even) .cast__art{ order:2; }
.cast__art{ aspect-ratio:1 / 1; }
.cast__body .kicker{ color:var(--red); }
.cast__title{
  font-size:clamp(2.25rem,5vw,4rem); font-weight:300; line-height:1;
  letter-spacing:-.025em; color:var(--red); margin:.6rem 0 1.2rem;
}
.cast__body p{ font-size:clamp(1.05rem,1.2vw,1.16rem); line-height:1.6; margin:0 0 1.2em; }
.cast__names{
  font-size:.95rem !important; line-height:1.7 !important;
  color:var(--ink); opacity:.62;
}
.cast__link{
  font-weight:600; font-size:.98rem; color:var(--red); text-decoration:none;
  border-bottom:1.5px solid currentColor; padding-bottom:.1rem;
}
.cast__link:hover{ opacity:.7; }

/* ─── lazy soundcloud player ───────────────────────────────────────── */

/* The embed is only fetched on click — three iframes on load would cost more
   than the whole rest of the site. */
.player{ margin:0 0 1.4rem; }
.player__cue{
  display:inline-flex; align-items:center; gap:.9rem;
  font:inherit; font-weight:600; letter-spacing:.03em;
  color:#fff; background:var(--red);
  border:1.5px solid var(--red); border-radius:2rem 1.4rem 2rem 1.4rem;
  padding:.85rem 1.9rem .85rem 1.4rem; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-radius .5s var(--ease);
}
.player__cue:hover{
  background:transparent; color:var(--red);
  border-radius:1.4rem 2rem 1.4rem 2rem;
}
.player__icon{
  width:0; height:0; flex:none;
  border-left:.85rem solid currentColor;
  border-top:.55rem solid transparent;
  border-bottom:.55rem solid transparent;
}
.player iframe{
  width:100%; height:450px; border:0; display:block;
  border-radius:1.25rem;
}
.player__note{ font-size:.9rem; opacity:.6; margin:.6rem 0 0; }

/* ─── credo ────────────────────────────────────────────────────────── */

.credo{ background:var(--blush); padding:clamp(5rem,11vw,8rem) var(--gutter); }
.credo__inner{ max-width:var(--container); margin-inline:auto; }
.credo .kicker{ color:var(--red); }
/* same red rule as the pull quote on the home page, scaled up */
.credo__text{
  margin:1.75rem 0 0;
  padding-left:clamp(1rem,2vw,1.75rem);
  border-left:2px solid var(--red);
  max-width:54ch;
}
.credo__text p{
  margin:0 0 .9em;
  font-size:clamp(1.25rem,2.2vw,1.85rem); font-weight:300; line-height:1.38;
  letter-spacing:-.01em; color:var(--ink);
}
.credo__text p:last-of-type{ margin-bottom:0; }
.credo__cite{
  display:block; margin-top:1.5rem; font-style:normal;
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); opacity:.45;
}

@media (max-width:900px){
  .cast{ grid-template-columns:1fr; }
  .cast:nth-child(even) .cast__art{ order:0; }
  .cast__art{ width:min(100%,22rem); }
  .cast-hero__lead{ max-width:none; }
  .cast-hero__body{ grid-template-columns:1fr; }
  .cast-hero__closer{ max-width:none; }
  .player iframe{ height:400px; }
}