*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; border: 0; background: none; padding: 0; }

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
}
.top nav { display: flex; gap: 28px; }
.motto { margin: 0; }
.products a { display: block; }
.products h2,
.item h2 { margin: 0; font-weight: 400; }
.foot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 40px 28px;
}

/* 1 — quiet paper, centered column */
.v1 { background: #f7ebe6; color: #3a242c; font-family: "DM Sans", sans-serif; }
.v1 .top { background: rgba(247, 235, 230, 0.92); }
.v1 .word { font-family: "Nothing You Could Do", cursive; font-size: 1.15rem; color: #c46a86; }
.v1 .hero { min-height: 78svh; display: grid; place-content: center; text-align: center; padding: 8vh 24px; }
.v1 .motto {
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(3.4rem, 12vw, 7.5rem);
  line-height: 1.05;
  font-weight: 400;
  min-height: 2.15em;
}
.v1 .products { max-width: 560px; margin: 0 auto; padding: 0 20px 40px; display: grid; gap: 56px; }
.v1 .products img { aspect-ratio: 4/5; object-fit: cover; }
.v1 .products h2 { margin-top: 16px; font-family: "Nothing You Could Do", cursive; font-size: 1.8rem; }

.v1x .hero { min-height: 38svh; padding: 8vh 24px 4vh; }
.v1x .col { max-width: 560px; margin: 0 auto 88px; padding: 0 20px; }
.v1x .line {
  margin: 0 0 28px;
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2.1rem, 7vw, 3.2rem);
  line-height: 1.15;
  font-weight: 400;
  min-height: 1.2em;
}
.v1x .col p,
.v1x .col li {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75;
}
.v1x .col ul { margin: 0; padding: 0; list-style: none; }
.v1x .col li + li { margin-top: 14px; }
.v1x .photo { margin: 0 0 88px; }
.v1x .photo img { width: 100%; max-height: 88svh; object-fit: cover; }
.band {
  padding: 28px 0 64px;
}
.band-title {
  text-align: center;
  color: #c46a86;
}
.channel-band {
  position: relative;
  background: #f4d3dc;
}
.channel-band::before {
  display: block;
  height: 42px;
  margin-top: -42px;
  background: #f4d3dc;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  content: "";
}
.shop-band {
  position: relative;
  background: #fff7f2;
}
.shop-band::before {
  display: block;
  height: 42px;
  margin-top: -1px;
  background: #fff7f2;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  content: "";
}

/* 1a — blush phone */
.tg-embed {
  max-width: none;
  margin: 0;
  padding: 8px 16px 12px;
  background: transparent;
}
.tg-phone {
  max-width: 400px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff5f7;
  border-radius: 26px;
  box-shadow: 0 18px 40px rgba(160, 80, 110, 0.18);
}
.tg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: #d48aa0;
  color: #fff;
}
.tg-ava {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-content: center;
  border-radius: 50%;
  background: #f7e3e8;
  color: #8a4458;
  font-family: "Nothing You Could Do", cursive;
  font-size: 0.55rem;
  line-height: 1;
  text-align: center;
}
.tg-head strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
}
.tg-head span {
  display: block;
  opacity: 0.82;
  font-size: 0.72rem;
}
.tg-post {
  display: block;
  margin: 14px 12px 16px;
  overflow: hidden;
  background: #fff;
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 1px 1px rgba(16, 35, 47, 0.08);
}
.tg-post img {
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0;
}
.tg-post p,
.tg-polaroid p,
.tg-chat p,
.tg-mail p,
.tg-note p {
  margin: 0;
  padding: 12px 14px 4px;
  color: #3a242c;
  font-size: 0.95rem;
  line-height: 1.55;
}
.tg-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 12px;
  color: #a06b7c;
  font-size: 0.72rem;
}

/* 1b — taped polaroid from the channel */
.tg-polaroid {
  position: relative;
  max-width: 360px;
  margin: 10px auto 0;
  padding: 16px 16px 22px;
  background: #fffdf9;
  box-shadow: 0 16px 36px rgba(140, 70, 90, 0.14);
  transform: rotate(-2deg);
}
.tg-tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 92px;
  height: 28px;
  background: rgba(244, 196, 208, 0.72);
  transform: translateX(-50%) rotate(-3deg);
}
.tg-polaroid img {
  aspect-ratio: 1;
  object-fit: cover;
}
.tg-polaroid .from {
  display: block;
  padding: 10px 4px 0;
  color: #c46a86;
  font-family: "Nothing You Could Do", cursive;
  font-size: 1.25rem;
}

/* 1c — girly chat bubble */
.tg-chat {
  max-width: 420px;
  margin: 8px auto 0;
  padding: 0 18px;
}
.tg-chat-name {
  margin: 0 0 10px 8px;
  color: #c46a86;
  font-family: "Nothing You Could Do", cursive;
  font-size: 1.5rem;
}
.tg-chat a {
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid #efc3cf;
  border-radius: 22px 22px 22px 6px;
  box-shadow: 0 10px 28px rgba(180, 90, 120, 0.1);
}
.tg-chat img {
  aspect-ratio: 1;
  object-fit: cover;
}

/* 1d — postcard / mail from the channel */
.tg-mail {
  position: relative;
  max-width: 420px;
  margin: 12px auto 0;
  padding: 22px 20px 18px;
  background:
    linear-gradient(#f4d3dc 0 0) top / 100% 10px no-repeat,
    #fffaf6;
  border: 1px dashed #e4a8b8;
  box-shadow: 0 14px 30px rgba(160, 80, 110, 0.12);
}
.tg-mail .stamp {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 68px;
  height: 78px;
  display: grid;
  place-content: center;
  border: 2px dotted #d48aa0;
  color: #c46a86;
  font-family: "Nothing You Could Do", cursive;
  font-size: 0.95rem;
  line-height: 1.1;
  text-align: center;
  transform: rotate(6deg);
}
.tg-mail img {
  width: 68%;
  aspect-ratio: 1;
  object-fit: cover;
}
.tg-mail p { padding-left: 0; max-width: 92%; }

/* 1e — pinned paper note */
.tg-note {
  position: relative;
  max-width: 380px;
  margin: 28px auto 0;
  padding: 36px 22px 20px;
  background: #fff1f4;
  box-shadow: 0 16px 32px rgba(160, 80, 110, 0.12);
  transform: rotate(1.5deg);
}
.tg-pin {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 22px;
  height: 22px;
  background: #d48aa0;
  border-radius: 50%;
  box-shadow: 0 4px 0 #b86b84;
  transform: translateX(-50%);
}
.tg-note img {
  aspect-ratio: 1;
  object-fit: cover;
}

.item-pic {
  position: relative;
}
.tag {
  position: absolute;
  top: 16px;
  right: 12px;
  min-width: 76px;
  padding: 10px 10px 12px;
  background: #f7dce3;
  color: #7a3148;
  font-family: "Nothing You Could Do", cursive;
  font-size: 1.15rem;
  line-height: 1;
  text-align: center;
  transform: rotate(8deg);
  box-shadow: 0 8px 16px rgba(140, 60, 80, 0.12);
}
.tag::before {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff7f2;
  box-shadow: inset 0 0 0 1px #e4a8b8;
  transform: translateX(-50%);
  content: "";
}
.buy {
  display: inline-block;
  margin-top: 10px;
  padding-bottom: 3px;
  border-bottom: 1px solid #d48aa0;
  color: #c46a86;
  font-family: "Nothing You Could Do", cursive;
  font-size: 1.35rem;
}

.intro {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* the backdrop is its own layer so it can clear while the word is still on its
   way to the header, which is what lets the page be there when it arrives */
.intro::before {
  position: absolute;
  inset: 0;
  background: var(--intro-bg, #f7ebe6);
  content: "";
  transition: opacity 0.34s ease;
}
.intro.moving::before { opacity: 0; }

.intro-word {
  display: inline-block;
  position: relative;
  z-index: 1;
  min-width: 1px;
  color: var(--intro-ink, #c46a86);
  font-family: var(--intro-font, "Nothing You Could Do", cursive);
  font-size: clamp(2.8rem, 11vw, 6.4rem);
  line-height: 1;
  white-space: nowrap;
  transform-origin: top left;
  transition: transform 0.52s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.intro-word::after {
  display: inline-block;
  width: 0.05em;
  height: 0.8em;
  margin-left: 0.06em;
  background: currentColor;
  content: "";
  vertical-align: -0.04em;
  animation: intro-blink 0.42s steps(1) infinite;
}
.intro-word.to-logo::after {
  opacity: 0;
}
@keyframes intro-blink {
  50% { opacity: 0; }
}
.intro-running {
  overflow: hidden;
}
.intro-running .top,
.intro-running main {
  opacity: 0;
}
.top,
main {
  transition: opacity 0.3s ease;
}
/* the photo comes up under the word while it is still travelling, so the word
   never lands on an empty frame */
.intro-page main {
  opacity: 1;
}
.intro-done main {
  opacity: 1;
}
/* the flown word and the real wordmark are the same word in the same place, so
   swap them outright: dissolving one into the other shows both at once */
.intro-done .top {
  opacity: 1;
  transition: none;
}

/* 2 — full-bleed photos. every colour the sub-variants play with lives in these
   custom properties, so .v2a — .v2e only restate the palette. */
.v2 {
  --page: #111;
  --ink: #f7f1ea;
  --caption: var(--ink);
  --photo: none;
  --wash: transparent;
  --wash-blend: normal;
  --scrim: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 42%);
  --top-color: #fff;
  --top-blend: difference;
  --veil: transparent;
  --intro-bg: var(--page);
  --intro-ink: var(--ink);
  --intro-font: "Italiana", serif;
  background: var(--page);
  color: var(--ink);
  font-family: "Italiana", serif;
}
.v2 .top {
  position: fixed;
  inset: 0 0 auto;
  padding-bottom: 34px;
  /* the veil only exists on palettes whose type would otherwise sit on the photo unread */
  background: linear-gradient(to bottom, var(--veil) 42%, rgba(0, 0, 0, 0));
  color: var(--top-color);
  mix-blend-mode: var(--top-blend);
}
.v2 .word { font-size: 1.3rem; letter-spacing: 0.04em; }
.v2 .bleed { position: relative; min-height: 100svh; }
.v2 .bleed img { height: 100svh; object-fit: cover; filter: var(--photo); }
.v2 .bleed::after,
.v2 .bleed::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}
.v2 .bleed::after {
  z-index: 1;
  background: var(--wash);
  mix-blend-mode: var(--wash-blend);
}
.v2 .bleed::before {
  z-index: 2;
  background: var(--scrim);
}
.v2 .bleed p {
  position: absolute; left: 28px; bottom: 36px; margin: 0; z-index: 3;
  color: var(--caption);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2.4rem, 8vw, 5rem);
  line-height: 1;
}
.v2 .bleed p.reveal { transform: translate3d(0, 18px, 0); }
.v2 .bleed p.reveal.is-in { transform: none; }
.v2 .foot { background: var(--page); font-size: 0.95rem; letter-spacing: 0.12em; text-transform: lowercase; }
.v2 .foot span { opacity: 0.55; }
.v2 .foot nav { display: flex; gap: 24px; }

/* 2a — blush paper */
.v2a {
  --page: #f4e3dd;
  --ink: #40222b;
  --caption: #a8425f;
  --photo: saturate(0.62) contrast(1.04);
  --wash: linear-gradient(200deg, rgba(214, 116, 148, 0.62), rgba(255, 196, 176, 0.5));
  --wash-blend: color;
  --scrim: linear-gradient(to top, rgba(244, 227, 221, 0.82), rgba(244, 227, 221, 0) 38%);
  --top-color: #40222b;
  --top-blend: normal;
  --veil: rgba(244, 227, 221, 0.94);
  --intro-ink: #a8425f;
}

/* 2b — wine cellar */
.v2b {
  --page: #2b1018;
  --ink: #f2ded7;
  --caption: #f6d3c4;
  --photo: contrast(1.06) saturate(0.92);
  --wash: linear-gradient(180deg, rgba(126, 28, 60, 0.55), rgba(30, 8, 16, 0.68));
  --wash-blend: multiply;
  --scrim: linear-gradient(to top, rgba(24, 6, 12, 0.62), rgba(24, 6, 12, 0) 44%);
  --top-color: #f2ded7;
  --top-blend: normal;
  --veil: rgba(26, 7, 13, 0.74);
  --intro-ink: #e7a9ba;
}

/* 2c — sage & cream */
.v2c {
  --page: #e7ebe1;
  --ink: #223028;
  --caption: #33473a;
  --photo: saturate(0.7);
  --wash: linear-gradient(190deg, rgba(118, 150, 118, 0.4), rgba(198, 208, 178, 0.32));
  --wash-blend: color;
  --scrim: linear-gradient(to top, rgba(231, 235, 225, 0.8), rgba(231, 235, 225, 0) 38%);
  --top-color: #223028;
  --top-blend: normal;
  --veil: rgba(231, 235, 225, 0.94);
  --intro-ink: #4a6450;
}

/* 2d — mono with one loud pink */
.v2d {
  --page: #0b0b0c;
  --ink: #f2f2f2;
  --caption: #ff5d8f;
  --photo: grayscale(1) contrast(1.1);
  --scrim: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 40%);
  --intro-ink: #ff5d8f;
}

/* 2e — amber afternoon */
.v2e {
  --page: #f6dfc2;
  --ink: #3a2314;
  --caption: #a8451a;
  --photo: saturate(1.05);
  --wash: linear-gradient(200deg, rgba(255, 166, 62, 0.46), rgba(255, 214, 150, 0.36));
  --wash-blend: color;
  --scrim: linear-gradient(to top, rgba(246, 223, 194, 0.82), rgba(246, 223, 194, 0) 38%);
  --top-color: #3a2314;
  --top-blend: normal;
  --veil: rgba(246, 223, 194, 0.94);
  --intro-ink: #a8451a;
}

/* 3 — ink, text first */
.v3 { background: #0c0b0a; color: #efe7dc; font-family: "Nothing You Could Do", cursive; }
.v3 .top { background: #0c0b0a; border-bottom: 1px solid rgba(239,231,220,.15); }
.v3 .hero { padding: 18vh 28px 10vh; }
.v3 .motto { font-size: clamp(3.2rem, 10vw, 6.8rem); line-height: 1.08; font-weight: 400; max-width: 14ch; }
.v3 .row { display: grid; grid-template-columns: 1fr minmax(0, 42vw); align-items: end; gap: 40px; padding: 0 28px 28px; }
.v3 .row img { aspect-ratio: 3/4; object-fit: cover; }
.v3 .row h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
@media (max-width: 720px) {
  .v3 .row { grid-template-columns: 1fr; }
}

/* 4 — blush still life */
.v4 { background: #f3d5dc; color: #3a1d27; font-family: "DM Sans", sans-serif; }
.v4 .top { background: #f3d5dc; }
.v4 .word { font-family: "Nothing You Could Do", cursive; font-size: 1.2rem; }
.v4 .hero img { height: 72svh; object-fit: cover; }
.v4 .motto {
  padding: 64px 28px 40px;
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(3rem, 11vw, 6.4rem);
  line-height: 1.05;
  font-weight: 400;
}
.v4 .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 12px 80px; }
.v4 .grid a:first-child { grid-column: span 2; }
.v4 .grid img { aspect-ratio: 1; object-fit: cover; }
.v4 .grid h2 { padding: 14px 8px 0; font-family: "Nothing You Could Do", cursive; font-size: 1.6rem; }
@media (max-width: 640px) {
  .v4 .grid { grid-template-columns: 1fr; }
  .v4 .grid a:first-child { grid-column: auto; }
}

/* 5 — lookbook, one photo after another */
.v5 { background: #fff; color: #111; font-family: "Italiana", serif; }
.v5 .top { background: #fff; }
.v5 .motto {
  padding: 20vh 24px;
  text-align: center;
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(3rem, 12vw, 7rem);
  line-height: 1.05;
  font-weight: 400;
}
.v5 .shot { margin: 0; }
.v5 .shot img { max-height: 92svh; object-fit: cover; }
.v5 .shot h2 { padding: 18px 24px 70px; font-size: 1.5rem; letter-spacing: .04em; }

/* 6 — white studio */
.v6 { background: #faf8f5; color: #161616; font-family: "DM Sans", sans-serif; }
.v6 .top { background: #faf8f5; }
.v6 .word { font-family: "Nothing You Could Do", cursive; }
.v6 .hero { max-width: 920px; margin: 0 auto; padding: 6vh 24px 0; }
.v6 .hero img { aspect-ratio: 1; object-fit: cover; }
.v6 .motto {
  text-align: center;
  padding: 48px 24px 56px;
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  line-height: 1.1;
  font-weight: 400;
}
.v6 .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; padding: 0 24px 80px; }
.v6 .trio img { aspect-ratio: 4/5; object-fit: cover; }
.v6 .trio h2 { margin-top: 14px; font-family: "Nothing You Could Do", cursive; font-size: 1.45rem; }
@media (max-width: 720px) {
  .v6 .trio { grid-template-columns: 1fr; }
}

/* 7 — sticky motto split */
.v7 { background: #efe8dc; color: #1b1712; font-family: "DM Sans", sans-serif; }
.v7 .shell { display: grid; grid-template-columns: minmax(280px, 42vw) 1fr; min-height: 100svh; }
.v7 .pane {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 28px;
}
.v7 .motto {
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  line-height: 1.08;
  font-weight: 400;
}
.v7 .rail { display: grid; }
.v7 .rail img { height: 100svh; object-fit: cover; }
.v7 .rail h2 {
  padding: 16px 20px 48px;
  font-family: "Nothing You Could Do", cursive;
  font-size: 1.8rem;
}
@media (max-width: 800px) {
  .v7 .shell { grid-template-columns: 1fr; }
  .v7 .pane { position: relative; height: auto; min-height: 70svh; }
  .v7 .rail img { height: 70svh; }
}

/* 8 — horizontal film */
.v8 { background: #1c1916; color: #f4ece3; font-family: "Italiana", serif; }
.v8 .top { background: #1c1916; }
.v8 .word { font-family: "Nothing You Could Do", cursive; }
.v8 .motto {
  padding: 10vh 28px 4vh;
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2.8rem, 8vw, 5.6rem);
  line-height: 1.08;
  font-weight: 400;
}
.v8 .film {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 0 28px 80px;
  scroll-snap-type: x mandatory;
}
.v8 .film a { flex: 0 0 min(78vw, 420px); scroll-snap-align: start; }
.v8 .film img { aspect-ratio: 3/4; object-fit: cover; }
.v8 .film h2 { margin-top: 14px; font-family: "Nothing You Could Do", cursive; font-size: 1.6rem; }

/* 9 — stamped white */
.v9 { background: #f7f4ef; color: #111; font-family: "DM Sans", sans-serif; }
.v9 .top { background: transparent; }
.v9 .stage { position: relative; padding: 8vh 20px 80px; }
.v9 .motto {
  position: absolute;
  left: 8vw; top: 18vh;
  z-index: 2;
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(3rem, 10vw, 6.2rem);
  line-height: 1;
  font-weight: 400;
  transform: rotate(-8deg);
  pointer-events: none;
}
.v9 .stack { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; margin: 0 auto; }
.v9 .stack a:nth-child(2) { margin-top: 18vh; }
.v9 .stack img { aspect-ratio: 4/5; object-fit: cover; }
.v9 .stack h2 { margin-top: 12px; font-family: "Nothing You Could Do", cursive; font-size: 1.5rem; }
@media (max-width: 680px) {
  .v9 .stack { grid-template-columns: 1fr; }
  .v9 .stack a:nth-child(2) { margin-top: 8vh; }
  .v9 .motto { position: static; transform: none; padding: 8vh 0 6vh; }
}

/* 10 — night table */
.v10 { background: #0e0c0a; color: #f1e6d8; font-family: "Italiana", serif; }
.v10 .top { position: fixed; inset: 0 0 auto; color: #f1e6d8; }
.v10 .cover { position: relative; }
.v10 .cover img { height: 100svh; object-fit: cover; }
.v10 .motto {
  position: absolute; left: 28px; bottom: 40px; margin: 0;
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2.8rem, 9vw, 6rem);
  line-height: 1.05;
  font-weight: 400;
}
.v10 .quiet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; }
.v10 .quiet img { aspect-ratio: 3/4; object-fit: cover; }
.v10 .quiet h2 { padding: 12px 4px 28px; font-family: "Nothing You Could Do", cursive; font-size: 1.35rem; }
.v10 .foot { background: #0e0c0a; }
@media (max-width: 720px) {
  .v10 .quiet { grid-template-columns: 1fr; }
}

/* ---------- the live channel ---------- */

/* the pages built around a single card of their own repeat that card, so the
   only thing the stack owes them is air and a little variety in the tilt */
.tg-stack {
  display: grid;
  gap: 38px;
}
.tg-stack .tg-polaroid:nth-child(even) { transform: rotate(1.8deg); }
.tg-stack .tg-note:nth-child(even) { transform: rotate(-1.6deg); }

/* every other page gets a plain feed, which takes its colour from the page it
   is on rather than bringing its own. The section is always here, even with
   nothing in it — the header points at it now, so it has to be somewhere to
   land, and the way through to Telegram underneath does not depend on the
   channel answering. */
.live {
  padding: clamp(56px, 10vh, 112px) 28px;
}

/* an empty feed should not leave a hole between the heading and the way out */
.live-feed:empty { display: none; }

.live-title {
  margin: 0 0 clamp(24px, 4vh, 46px);
  color: var(--live-accent, currentColor);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
}

.live-feed {
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.live-post {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.live-shot {
  display: block;
  overflow: hidden;
}

.live-shot img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.live-post:hover .live-shot img { transform: scale(1.05); }

.live-when {
  color: var(--live-accent, currentColor);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  opacity: 0.75;
  text-transform: lowercase;
}

.live-text {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  opacity: 0.8;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

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

/* on a phone five posts down the page is a long scroll for something you are
   meant to glance at, so they lie on their side instead */
@media (max-width: 560px) {
  .live-feed {
    display: flex;
    overflow-x: auto;
    padding-bottom: 8px;
    gap: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .live-post {
    flex: 0 0 68vw;
    scroll-snap-align: start;
  }
}

/* Both sections end in the way out to Telegram. The header used to go straight
   there; now it points at the section, so the trip has to be waiting at the
   bottom of it instead. */
.to-tg {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.85em 1.7em;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--live-accent, currentColor);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  transition: opacity 0.25s ease;
}

.to-tg::after {
  content: "→";
  font-size: 1.05em;
  letter-spacing: 0;
}

.to-tg:hover { opacity: 0.62; }

.live-more,
.shop-more {
  margin: 0;
  text-align: center;
}

/* under the posts, rather than beside them */
.live-more { padding-top: clamp(28px, 5vh, 52px); }
.shop-more { padding: 0 28px clamp(48px, 8vh, 96px); }

/* the header sends you here, and a header that floats would otherwise land on
   top of whatever it sent you to */
#shop,
#channel { scroll-margin-top: clamp(58px, 11vh, 96px); }

/* each page tints the feed with the accent it already uses */
.v1 .live { --live-accent: #c46a86; background: #fff7f2; }
.v2 .live { --live-accent: var(--caption); background: var(--page); }
.v4 .live { --live-accent: #7a3148; }
.v7 .live { padding: clamp(48px, 8vh, 88px) 20px; }
.v9 .live { padding-inline: 0; }
.v10 .live { padding: clamp(40px, 6vh, 72px) 8px; }

/* 8 lays its shop out as a strip of film, so the channel reads the same way */
.v8 .live-feed {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  scroll-snap-type: x mandatory;
}
.v8 .live-post {
  flex: 0 0 min(72vw, 380px);
  scroll-snap-align: start;
}
.v8 .live-shot img { aspect-ratio: 3 / 4; }

.reveal {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 0.95s ease, transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
.photo.reveal img,
.products a.reveal img,
.trio a.reveal img,
.live-post.reveal .live-shot img,
.v6 .hero.reveal img {
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.photo.reveal.is-in img,
.products a.reveal.is-in img,
.trio a.reveal.is-in img,
.live-post.reveal.is-in .live-shot img,
.v6 .hero.reveal.is-in img {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .photo.reveal img,
  .products a.reveal img,
  .trio a.reveal img,
  .live-post.reveal .live-shot img,
  .v6 .hero.reveal img {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .intro { display: none; }
}