/* product-launches.css — shared tokens + per-variant styles for the four
   layout explorations of the Product Launches page. Variants are prefixed
   .v1- (filing), .v2- (stamp), .v3- (marquee), .v4- (polaroid) so they
   don't collide. Tokens mirror the rest of the site. */

:root {
  /* PALETTE · "Moodboard" — see brand-work.css for full notes. */
  --paper:    #F0E8D6;
  --paper-2:  #F7F1E2;
  --paper-3:  #E5DBC4;
  --ink:      #3F4E1E;
  --ink-2:    #5C6D2F;
  --ink-3:    #8A9670;
  --rule:     #D0C8AC;
  --tomato:   #E6712E;
  --butter:   #DDE54E;
  --blush:    #E27CB9;
  --sky:      #6FA89E;
  --sage:     #5C6D2F;
  --lilac:    #CCC3D1;
  --rose:     #E27CB9;
  --grass:    #A8AC22;
}

/* ─── Shared bits used by all variants ──────────────────────────── */
.pl-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 14px 36px;
  border-bottom: 1px solid var(--rule);
  background: rgba(236, 228, 210, 0.85);
  backdrop-filter: blur(6px);
}
.pl-mark {
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pl-mark-dot {
  width: 8px;
  height: 8px;
  background: var(--tomato);
  border-radius: 50%;
}
.pl-crumb {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-3);
}
.pl-crumb a {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-3);
}
.pl-crumb-current {
  color: var(--tomato);
}
.pl-nav-links {
  display: flex;
  gap: 24px;
  justify-content: flex-end;
  align-items: baseline;
}
.pl-nav-links a {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  text-transform: lowercase;
  font-size: 22px;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding: 2px 4px;
  line-height: 1;
}
.pl-nav-links a:hover {
  color: var(--tomato);
}
.pl-nav-links a.current::after {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  top: -4px;
  bottom: -4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24' preserveAspectRatio='none'><ellipse cx='30' cy='12' rx='28' ry='10' stroke='%23c44a32' stroke-width='1.6' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.pl-back {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.pl-back:hover { color: var(--tomato); }
.pl-back-arrow {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
}

.pl-thumb {
  position: relative;
  overflow: hidden;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.07) 0 6px, transparent 6px 12px),
    linear-gradient(135deg, var(--bg, #b8a890), color-mix(in srgb, var(--bg, #b8a890) 72%, black));
  border: 1px solid rgba(0,0,0,0.08);
}
.pl-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pl-thumb-label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

/* ═════════════════════════════════════════════════════════════════
   VARIANT A · FILING CATALOG
   ════════════════════════════════════════════════════════════════ */
.v1-page {
  background: var(--paper-3);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #e9e1cc 0%, #ece4d2 25%);
  min-height: 100%;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
}
.v1-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 36px 64px;
}
.v1-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: 0 4px 18px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.5) inset;
  position: relative;
  padding: 44px 56px 56px 110px;
}
.v1-holes {
  position: absolute;
  left: 28px; top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 60px 0;
  z-index: 2;
}
.v1-holes > div {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--paper-3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
.v1-red-rule {
  position: absolute;
  left: 88px; top: 0; bottom: 0;
  width: 1.5px;
  background: var(--tomato);
  opacity: 0.55;
}
.v1-card::before {
  content: '';
  position: absolute;
  left: 100px; right: 28px;
  top: 84px; bottom: 28px;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 31px,
    rgba(122,163,196,0.18) 31px 32px
  );
  pointer-events: none;
}
.v1-head { position: relative; z-index: 1; }
.v1-catno {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--tomato);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.v1-title {
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 116px;
  line-height: 0.88;
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.v1-accent {
  color: var(--tomato);
  font-style: italic;
}
.v1-role {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  text-transform: uppercase;
  margin-top: 22px;
}
.v1-divider {
  border: none;
  border-top: 2px solid var(--ink);
  margin: 28px 0 24px;
}
.v1-lede {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 40px;
  line-height: 1.15;
  color: var(--ink);
  margin: 8px 0 24px;
  font-weight: 500;
  padding-left: 8px;
  max-width: 90%;
}
.v1-lede mark {
  background: transparent;
  color: var(--ink);
  position: relative;
  white-space: nowrap;
}
.v1-lede mark::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px; bottom: -6px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10'><path d='M2 6 Q 10 1 20 5 T 40 5 T 60 5 T 78 5' stroke='%23c44a32' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-size: 80px 10px;
}

.v1-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.v1-row {
  display: grid;
  grid-template-columns: 92px 1fr 220px;
  gap: 30px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  align-items: flex-start;
}
.v1-row:first-child { border-top: 2px solid var(--ink); }
.v1-row:last-child { border-bottom: 1px solid var(--rule); }
.v1-row-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v1-row-catno {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tomato);
  border-top: 1px solid var(--tomato);
  padding-top: 6px;
}
.v1-row-year {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 30px;
  color: var(--ink);
  line-height: 1;
}
.v1-row-tag {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.v1-row-name {
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 52px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}
.v1-row-meta {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.v1-row-blurb {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 56ch;
}
.v1-row-link {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tomato);
  text-decoration: none;
  border-bottom: 1px dotted var(--tomato);
}
.v1-row-thumb {
  align-self: flex-start;
}
.v1-row-thumb .pl-thumb {
  width: 100%;
  box-shadow: 0 8px 20px rgba(0,0,0,0.14);
  transform: rotate(1.5deg);
}
.v1-row:nth-child(even) .v1-row-thumb .pl-thumb {
  transform: rotate(-2deg);
}

.v1-foot {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  position: relative; z-index: 1;
}
.v1-foot a { color: var(--ink-3); text-decoration: none; }
.v1-foot-next {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0;
}

/* ═════════════════════════════════════════════════════════════════
   VARIANT B · STAMP ALBUM
   ════════════════════════════════════════════════════════════════ */
.v2-page {
  background: var(--paper);
  background-image:
    /* faint paper grain */
    radial-gradient(circle at 20% 20%, rgba(0,0,0,0.03) 0, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,0.025) 0, transparent 50%),
    /* very faint ruled lines */
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(122,163,196,0.18) 32px 33px),
    linear-gradient(180deg, #f3eddd 0%, #f6f1e7 30%);
  min-height: 100%;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
}
.v2-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 60px 64px;
}
.v2-head { margin-bottom: 44px; }
.v2-eyebrow {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tomato);
  margin-bottom: 14px;
}
.v2-title {
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 18ch;
}
.v2-italic {
  font-style: italic;
  color: var(--tomato);
}
.v2-deck {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 26px;
  line-height: 1.35;
  color: var(--ink-2);
  margin: 0 0 28px;
  max-width: 50ch;
}
.v2-rule {
  height: 2px;
  background: var(--ink);
  margin: 28px 0 0;
}

.v2-album {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.v2-row {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: center;
}
.v2-row--flip {
  grid-template-columns: 1fr 320px;
}
.v2-row--flip .v2-stamp { order: 2; }
.v2-row--flip .v2-note { order: 1; text-align: right; }
.v2-row--flip .v2-note-link { float: right; }

/* The stamp itself — perforated white border around a stamp face */
.v2-stamp {
  margin: 0;
  position: relative;
  padding: 14px;
  background: var(--paper-2);
  border-radius: 4px;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.18));
  /* perforated edge — radial-gradient dots stitched along the border */
  --perf: 9px;
  --perf-gap: 14px;
  background-image:
    radial-gradient(circle at center, var(--paper-3) 4px, transparent 4.5px),
    linear-gradient(var(--paper-2), var(--paper-2));
  background-size: var(--perf-gap) var(--perf-gap), 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: repeat, no-repeat;
  background-blend-mode: multiply, normal;
  /* a chunky scalloped clip */
  --r: 7px;
  -webkit-mask:
    radial-gradient(circle 7px at 7px 7px, transparent 99%, #000 101%) -7px -7px / 14px 14px,
    linear-gradient(#000, #000);
          mask:
    radial-gradient(circle 7px at 7px 7px, transparent 99%, #000 101%) -7px -7px / 14px 14px,
    linear-gradient(#000, #000);
  -webkit-mask-composite: source-out;
          mask-composite: exclude;
  transform: rotate(-2deg);
}
.v2-row--flip .v2-stamp { transform: rotate(1.5deg); }

.v2-stamp-inner {
  position: relative;
  background: #fff;
  padding: 10px 10px 14px;
  border: 1px solid rgba(0,0,0,0.06);
}
.v2-stamp-inner .pl-thumb {
  width: 100%;
}
.v2-stamp-cap {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.v2-stamp-denom {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--tomato);
}
.v2-stamp-name {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-size: 22px;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  text-align: center;
  line-height: 1.05;
}
.v2-postmark {
  position: absolute;
  top: -18px; right: -18px;
  z-index: 4;
  transform: rotate(-12deg);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.v2-postmark-ring {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  border: 1.5px solid var(--tomato);
  background: rgba(196, 74, 50, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--tomato);
  text-align: center;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px;
  position: relative;
}
.v2-postmark-ring::before,
.v2-postmark-ring::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: var(--tomato);
  opacity: 0.5;
}
.v2-postmark-ring::before { top: 28%; }
.v2-postmark-ring::after { bottom: 28%; }
.v2-postmark-top { line-height: 1.2; }
.v2-postmark-yr {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 26px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  padding: 4px 0;
}
.v2-postmark-btm { line-height: 1.2; font-size: 8px; }

/* Handwritten note next to the stamp */
.v2-note {
  position: relative;
  padding: 4px 0 4px 8px;
}
.v2-note-pin {
  position: absolute;
  left: -20px; top: 8px;
  width: 14px; height: 14px;
  background: var(--tomato);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.v2-row--flip .v2-note-pin {
  left: auto;
  right: -20px;
}
.v2-note-tag {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.v2-note-name {
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 44px;
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
}
.v2-note-blurb {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0 0 12px;
  max-width: 32ch;
}
.v2-row--flip .v2-note-blurb { margin-left: auto; }
.v2-note-role {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tomato);
  margin-bottom: 12px;
}
.v2-note-link {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tomato);
  text-decoration: none;
  border-bottom: 1px dotted var(--tomato);
  display: inline-block;
}

.v2-foot {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.v2-foot a { color: var(--ink-3); text-decoration: none; }

/* ═════════════════════════════════════════════════════════════════
   VARIANT C · EDITORIAL MARQUEE
   ════════════════════════════════════════════════════════════════ */
.v3-page {
  background: var(--paper);
  background-image:
    radial-gradient(circle at 18% 14%, rgba(0,0,0,0.025) 0, transparent 40%),
    radial-gradient(circle at 82% 86%, rgba(0,0,0,0.02) 0, transparent 42%),
    linear-gradient(180deg, #f4ecd6 0%, #f6f1e7 30%);
  min-height: 100%;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
}
.v3-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 48px 64px;
}
.v3-poster {
  position: relative;
  padding: 36px 0 28px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
  margin-bottom: 48px;
}
.v3-poster::before,
.v3-poster::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      transparent 0, transparent 8px,
      var(--tomato) 8px, var(--tomato) 14px,
      transparent 14px, transparent 22px,
      var(--tomato) 22px, var(--tomato) 28px,
      transparent 28px
    ) repeat-x;
  background-size: 28px 3px;
  opacity: 0.55;
}
.v3-poster::before { top: 8px; }
.v3-poster::after { bottom: 8px; }

.v3-eyebrow {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tomato);
  margin-bottom: 18px;
}
.v3-dot { color: var(--ink-3); margin: 0 8px; }
.v3-title {
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 144px;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
  line-height: 0.88;
}
.v3-sub {
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 32px;
  color: var(--ink-2);
  margin-top: 10px;
}
.v3-sub em {
  font-style: italic;
  color: var(--tomato);
}
.v3-meta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 36px;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.v3-meta strong { color: var(--tomato); font-weight: 500; }

.v3-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.v3-entry {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 30px;
  align-items: flex-start;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.v3-entry:first-child { border-top: none; padding-top: 0; }
.v3-entry-num {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 140px;
  color: var(--tomato);
  line-height: 0.85;
  letter-spacing: -0.04em;
}
.v3-entry-body {
  padding-top: 12px;
}
.v3-entry-tag {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.v3-entry-name {
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 62px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 8px;
}
.v3-entry-name em {
  font-style: italic;
  color: var(--tomato);
}
.v3-entry-kind {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.v3-entry-cinemascope {
  position: relative;
  background: #0a0e16;
  overflow: hidden;
  margin: 0 0 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.v3-entry-cinemascope .pl-thumb {
  width: 100%;
  border: none;
}
.v3-entry--flip {
  grid-template-columns: 1fr 160px;
}
.v3-entry--flip .v3-entry-num { order: 2; text-align: right; }
.v3-entry--flip .v3-entry-body { order: 1; }
.v3-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: rgba(255,255,255,0.55);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  z-index: 2;
}
.v3-corner--tl { top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; }
.v3-corner--tr { top: 14px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; }
.v3-corner--bl { bottom: 14px; left: 14px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.v3-corner--br { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.v3-slate {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.v3-slate-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tomato);
}
.v3-entry-blurb {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 60ch;
  columns: 2;
  column-gap: 36px;
}
.v3-entry-link {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tomato);
  text-decoration: none;
  border-bottom: 1px dotted var(--tomato);
}

.v3-foot {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.v3-foot a { color: var(--ink-3); text-decoration: none; }
.v3-foot-next {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0;
}

/* ═════════════════════════════════════════════════════════════════
   VARIANT D · POLAROID CONTACT SHEET
   ════════════════════════════════════════════════════════════════ */
.v4-page {
  background:
    repeating-linear-gradient(
      90deg,
      #a8b59d 0 60px,
      #b8c3aa 60px 120px,
      #97a78e 120px 180px,
      #a4b29a 180px 240px
    );
  min-height: 100%;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  position: relative;
}
.v4-page::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.04) 0, transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.06) 0, transparent 60%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.v4-main {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 36px 64px;
}
.v4-head {
  position: relative;
  height: 130px;
  margin: 4px 0 32px;
}
.v4-title-sticker {
  position: absolute;
  top: 0; left: 0;
  background: var(--paper-2);
  padding: 14px 24px 16px;
  transform: rotate(-2deg);
  box-shadow: 0 2px 0 rgba(0,0,0,0.06), 0 10px 26px rgba(0,0,0,0.2);
  z-index: 2;
}
.v4-tape {
  position: absolute;
  width: 70px;
  height: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.v4-tape--gold { background: rgba(232,200,96,0.74); }
.v4-tape--red { background: rgba(196,74,50,0.55); }
.v4-tape--blue { background: rgba(122,163,196,0.62); }
.v4-title-sticker > .v4-tape {
  left: 24px; top: -10px;
  transform: rotate(-6deg);
}
.v4-eyebrow {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: center;
}
.v4-title {
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 42px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-align: center;
}
.v4-italic {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  color: var(--tomato);
  font-size: 34px;
  letter-spacing: -0.01em;
}
.v4-squiggle {
  display: block;
  margin: 8px auto 0;
  width: 180px;
  height: 8px;
}
.v4-corner-note {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  color: var(--tomato);
  font-size: 22px;
  transform: rotate(4deg);
  text-align: right;
  line-height: 1.1;
}

/* The sheet itself */
.v4-sheet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 36px;
  margin-top: 16px;
}
.v4-cell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: flex-start;
}
.v4-cell:nth-child(even) {
  grid-template-columns: 1fr 1fr;
}
.v4-cell:nth-child(even) .v4-polaroid { order: 2; }
.v4-cell:nth-child(even) .v4-postit { order: 1; }

.v4-polaroid {
  position: relative;
  display: block;
  background: var(--paper-2);
  padding: 12px 12px 0;
  text-decoration: none;
  color: inherit;
  filter: drop-shadow(2px 8px 14px rgba(0,0,0,0.25));
  transform: rotate(var(--r, -2deg));
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.v4-polaroid:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.03);
  z-index: 10;
}
.v4-polaroid > .v4-tape {
  left: 50%;
  top: -10px;
  transform: translateX(-50%) rotate(-4deg);
}
.v4-polaroid-inner .pl-thumb {
  width: 100%;
}
.v4-polaroid-cap {
  padding: 14px 4px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v4-polaroid-num {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tomato);
}
.v4-polaroid-name {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.05;
}
.v4-polaroid-year {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* The post-it blurb */
.v4-postit {
  position: relative;
  background: var(--butter);
  padding: 22px 22px 22px;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.25;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  transform: rotate(var(--r, -3deg));
  align-self: center;
  min-height: 200px;
}
.v4-postit-pin {
  position: absolute;
  left: 50%; top: -4px;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  background: var(--tomato);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.v4-postit-kind {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tomato);
  margin-bottom: 8px;
}
.v4-postit-blurb {
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--ink);
}
.v4-postit-role {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.v4-foot {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgba(31,26,20,0.22);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(31,26,20,0.7);
}
.v4-foot a {
  color: rgba(31,26,20,0.7);
  text-decoration: none;
}

/* ═════════════════════════════════════════════════════════════════
   VARIANT E · MOODBOARD COLLAGE  (chosen direction)
   ════════════════════════════════════════════════════════════════ */
.v5-page {
  position: relative;
  width: 100%;
  height: 100%;
  /* Halftone paper photograph — wraps the entire moodboard. JPEG is
     lightly-toned grey so accents and text stay legible on top. */
  background-color: #f3f1ec;
  background-image: url('assets/torn-paper-collage-texture.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  overflow: hidden;
}

/* Nav strip — slim, lifts above the board */
.v5-nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 36px;
  border-bottom: 1px solid var(--rule);
  background: rgba(246, 241, 231, 0.85);
}
.v5-mark {
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.v5-mark-dot {
  width: 8px;
  height: 8px;
  background: var(--tomato);
  border-radius: 50%;
  flex: 0 0 auto;
}
.v5-crumb {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-3);
  white-space: nowrap;
  flex: 1 1 auto;
}
.v5-crumb a {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-3);
}
.v5-crumb-current {
  color: var(--tomato);
}
.v5-nav-links {
  display: flex;
  gap: 24px;
  justify-content: flex-end;
  align-items: baseline;
  white-space: nowrap;
  flex: 0 0 auto;
}
.v5-nav-links a {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  text-transform: lowercase;
  font-size: 22px;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding: 2px 4px;
  line-height: 1;
}
.v5-nav-links a:hover { color: var(--tomato); }
.v5-nav-links a.current::after {
  content: '';
  position: absolute;
  left: -8px; right: -8px; top: -4px; bottom: -4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24' preserveAspectRatio='none'><ellipse cx='30' cy='12' rx='28' ry='10' stroke='%23c44a32' stroke-width='1.6' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.v5-back {
  position: absolute;
  left: 36px; top: 78px;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  z-index: 8;
  white-space: nowrap;
}
.v5-back:hover { color: var(--tomato); }
.v5-back-arrow { font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif; font-size: 18px; }
font-weight: 500;

/* ─── The board itself ────────────────────────────────────────── */
.v5-board {
  position: relative;
  width: 100%;
  height: calc(100% - 64px); /* below nav */
  padding: 32px 36px;
}

/* ─── Big centre title ────────────────────────────────────────── */
.v5-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 3;
  line-height: 0.78;
  /* Butter yellow from the portfolio palette, with a deeper shade
     for the second word and a low-key drop shadow underneath. */
  --green: #DDE54E;
  --green-deep: #B8C13F;
  color: var(--green);
}
.v5-center-word {
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 900;
  font-size: 150px;
  letter-spacing: -0.02em;
  display: block;
  text-shadow: 2px 3px 0 rgba(120, 130, 40, 0.25);
}
.v5-center-word--top { transform: rotate(-3deg); }
.v5-center-word--btm {
  transform: rotate(2deg);
  margin-top: -22px;
  color: var(--green-deep);
}
.v5-center-sub {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 14px;
  opacity: 0.55;
}

/* ─── Generic item interactions ───────────────────────────────── */
.v5-item {
  position: absolute;
  display: block;
  text-decoration: none;
  color: inherit;
  z-index: 4;
  /* pre-scaled so hover has somewhere to go */
  transform: rotate(var(--r, 0deg)) scale(0.92);
  transform-origin: center;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), filter .25s, z-index 0s;
  filter: drop-shadow(2px 8px 16px rgba(0,0,0,0.18));
  will-change: transform;
}
.v5-item:hover {
  transform: rotate(0deg) scale(1.18);
  z-index: 50;
  filter: drop-shadow(2px 14px 28px rgba(0,0,0,0.28));
}

/* Handwritten label */
.v5-label {
  position: absolute;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.05;
  z-index: 3;
  pointer-events: none;
  text-align: left;
}
.v5-label--right { text-align: right; }

/* Roles label — a small handwritten list with a label tag. */
.v5-label--roles {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
}
.v5-roles-tag {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--butter);
  display: block;
  margin-bottom: 6px;
  opacity: 0.85;
}

/* Decorative scrap (flowers, etc) */
.v5-scrap {
  position: absolute;
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(1px 4px 6px rgba(0,0,0,0.16));
}

/* Corner notes */
.v5-corner {
  position: absolute;
  bottom: 14px;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(31,26,20,0.55);
  text-transform: uppercase;
  z-index: 8;
}
.v5-corner--bl { left: 36px; }
.v5-corner--br { right: 36px; }

/* ─── Polaroid item ───────────────────────────────────────────── */
.v5-polaroid { /* width supplied inline so each card is unique-sized */ }
.v5-polaroid-inner {
  background: var(--paper-2);
  padding: 10px 10px 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.v5-tape {
  position: absolute;
  left: 50%;
  top: -10px;
  width: 60px;
  height: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 3;
}
.v5-tape--gold { background: rgba(232,200,96,0.74); }
.v5-tape--red { background: rgba(196,74,50,0.55); }
.v5-tape--blue { background: rgba(122,163,196,0.62); }
.v5-thumb {
  position: relative;
  overflow: hidden;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.07) 0 6px, transparent 6px 12px);
}
.v5-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;
}
.v5-polaroid-cap {
  padding: 12px 6px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.v5-polaroid-num {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tomato);
}
.v5-polaroid-name {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.05;
}

/* ─── iPhone item ─────────────────────────────────────────────── */
.v5-iphone {
  width: 220px;
}
.v5-iphone-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  background: #1a1612;
  border-radius: 36px;
  padding: 8px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.06),
    0 12px 28px rgba(0,0,0,0.32);
}
.v5-iphone-notch {
  position: absolute;
  left: 50%; top: 16px;
  transform: translateX(-50%);
  width: 80px; height: 20px;
  background: #050505;
  border-radius: 20px;
  z-index: 3;
}
.v5-iphone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 28px;
  overflow: hidden;
}
.v5-iphone-screen video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.v5-iphone-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 14px 18px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 80%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.v5-iphone-handle {
  width: 32%;
  height: 3px;
  background: rgba(255,255,255,0.7);
  border-radius: 2px;
  align-self: center;
  margin-bottom: 4px;
}
.v5-iphone-meta {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.v5-iphone-meta strong { font-weight: 500; }

/* ─── Carousel item ───────────────────────────────────────────── */
.v5-carousel {
  width: 240px;
}
.v5-carousel-stack {
  position: relative;
  width: 100%;
}
.v5-carousel-card {
  position: absolute;
  inset: 0;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.v5-carousel-card--back {
  transform: rotate(4deg) translate(8px, 8px);
  background: var(--paper-3);
}
.v5-carousel-card--mid {
  transform: rotate(-2deg) translate(-4px, 4px);
}
.v5-carousel-card--front {
  position: relative;
  padding: 10px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v5-carousel-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #1a1612;
}
.v5-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.3,1);
}
.v5-carousel-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}
.v5-carousel-slide img,
.v5-carousel-slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v5-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.v5-carousel-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(31,26,20,0.2);
  transition: background .2s, width .2s;
}
.v5-carousel-dots span.is-active {
  background: var(--tomato);
  width: 12px;
  border-radius: 4px;
}
.v5-carousel-cap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 2px 0;
}
.v5-carousel-tag {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tomato);
}
.v5-carousel-title {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.v5-carousel-title em {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-style: italic;
  font-weight: 300;
  color: var(--tomato);
  font-size: 18px;
  letter-spacing: -0.01em;
}
.v5-carousel-credits {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
.v5-carousel-credits > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}
.v5-carousel-credits-l {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.v5-carousel-credits-r {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* ─── Ticket stub item ────────────────────────────────────────── */
.v5-ticket {
  width: 280px;
}
.v5-ticket-stub {
  display: grid;
  grid-template-columns: 56px 1fr;
  background: #ec8a4f;
  color: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
  position: relative;
}
/* perforated divider between stub and main */
.v5-ticket-stub::before {
  content: '';
  position: absolute;
  left: 56px; top: 0; bottom: 0;
  width: 0;
  border-left: 2px dashed rgba(255,255,255,0.55);
  z-index: 2;
}
.v5-ticket-side {
  background: rgba(0,0,0,0.12);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  color: #fbf7ec;
}
.v5-ticket-side-no {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}
.v5-ticket-side-yr {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
}
.v5-ticket-side-bar {
  width: 70%;
  height: 4px;
  background: rgba(255,255,255,0.85);
  margin-top: 2px;
}
.v5-ticket-side-bar:nth-child(odd) { width: 50%; }
.v5-ticket-side-bar--thick { height: 8px; }
.v5-ticket-main {
  padding: 14px 18px 16px;
  background:
    linear-gradient(180deg, #ec8a4f 0%, #de7a3a 100%);
}
.v5-ticket-eyebrow {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fbf7ec;
  opacity: 0.85;
}
.v5-ticket-title {
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fbf7ec;
  margin: 4px 0 4px;
}
.v5-ticket-title em {
  font-style: italic;
  color: #fef0a0;
}
.v5-ticket-meta {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(251,247,236,0.8);
}
.v5-ticket-rule {
  border: none;
  border-top: 1px dashed rgba(255,255,255,0.5);
  height: 0;
  margin: 8px 0;
}
.v5-ticket-row {
  display: flex;
  justify-content: space-between;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251,247,236,0.85);
  padding: 2px 0;
}
.v5-ticket-row strong {
  color: #fbf7ec;
  font-weight: 600;
}

/* ─── Color / type chip ───────────────────────────────────────── */
.v5-chip {
  width: 200px;
}
.v5-chip-card {
  background: var(--paper-2);
  padding: 14px 14px 16px;
  border: 1px solid var(--rule);
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}
.v5-chip-label {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.v5-chip-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 10px;
}
.v5-chip-swatches span {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
}
.v5-chip-type {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-top: 8px;
}
.v5-chip-aa {
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
}
.v5-chip-aa--serif { font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 900; }
.v5-chip-aa--mono { font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif; font-size: 20px; }
font-weight: 200;
.v5-chip-aa--hand { font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif; font-size: 28px; }
font-weight: 900;

/* ─── Press / launched stamp ─────────────────────────────────── */
.v5-press {
  width: 120px;
}
.v5-press-stamp {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2.5px solid var(--tomato);
  background: rgba(196, 74, 50, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  color: var(--tomato);
  text-transform: uppercase;
  text-align: center;
  padding: 12px 6px;
  position: relative;
}
.v5-press-stamp::before,
.v5-press-stamp::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%;
  height: 1px;
  background: var(--tomato);
  opacity: 0.55;
}
.v5-press-stamp::before { top: 28%; }
.v5-press-stamp::after { bottom: 28%; }
.v5-press-top {
  font-size: 8px;
  letter-spacing: 0.22em;
  line-height: 1.3;
}
.v5-press-mid {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  padding: 4px 0;
}
.v5-press-btm {
  font-size: 7px;
  letter-spacing: 0.18em;
  line-height: 1.3;
}

/* ─── IG comment sticker (draggable) ──────────────────────────── */
.v5-comment {
  position: absolute;
  z-index: 9;
  width: 280px;
  transform: rotate(-3deg);
  transition: filter .2s;
  filter: drop-shadow(2px 10px 18px rgba(0,0,0,0.28));
  user-select: none;
  -webkit-user-select: none;
}
.v5-comment:hover {
  filter: drop-shadow(2px 14px 24px rgba(0,0,0,0.36));
}
.v5-comment-tape {
  position: absolute;
  left: 50%; top: -10px;
  transform: translateX(-50%) rotate(-4deg);
  width: 70px;
  height: 18px;
  background: rgba(255,255,255,0.6);
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
  z-index: 3;
}
.v5-comment-tape--blue {
  background: rgba(122,163,196,0.7);
}
.v5-comment-inner {
  background: #000;
  color: #fff;
  padding: 14px 14px 12px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
.v5-comment-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: #1a1612;
}
.v5-comment-avatar svg {
  width: 100%; height: 100%;
  display: block;
}
.v5-comment-body { min-width: 0; }
.v5-comment-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.v5-comment-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0;
}
.v5-comment-age {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  color: #a6a6a6;
  font-weight: 400;
}
.v5-comment-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  color: #fff;
  margin: 0;
  letter-spacing: 0;
  font-weight: 400;
}
.v5-comment-emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.v5-comment-meta {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 12px;
  color: #a6a6a6;
  font-weight: 600;
}
.v5-comment-meta span:nth-child(2) {
  font-weight: 400;
}
.v5-comment-heart {
  background: none;
  border: none;
  padding: 4px 0 0;
  color: #fff;
  cursor: inherit;
  width: 18px; height: 18px;
  flex: 0 0 auto;
}
.v5-comment-heart svg { width: 100%; height: 100%; display: block; }

/* Inline-comment variant — username flows into the text on one wrap line */
.v5-comment--inline {
  transform: rotate(2deg);
  width: 360px;
}
.v5-comment--inline .v5-comment-inner {
  grid-template-columns: 32px 1fr;
}
.v5-comment-inline-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  color: #fff;
  margin: 0;
  letter-spacing: 0;
  font-weight: 400;
}
.v5-comment-inline-text .v5-comment-name {
  font-weight: 600;
  margin-right: 4px;
}
.v5-comment--inline .v5-comment-avatar {
  width: 32px; height: 32px;
}
.v5-comment--inline .v5-comment-meta {
  margin-top: 6px;
  font-weight: 400;
  color: #a6a6a6;
}
.v5-comment--inline .v5-comment-meta span {
  font-weight: 400;
}
.v5-comment-age--inline {
  /* match IG: age is shown alongside likes / reply, not after name */
}

/* ─── Android phone item ──────────────────────────────────────── */
.v5-android {
  width: 200px;
}
.v5-android-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  background: #1a1a1a;
  /* Pixel-ish softer corners */
  border-radius: 28px;
  padding: 6px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.06),
    0 12px 28px rgba(0,0,0,0.32);
}
/* Centered hole-punch camera (Pixel-style) */
.v5-android-camera {
  position: absolute;
  left: 50%; top: 14px;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  background: #050505;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  z-index: 3;
}
.v5-android-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 22px;
  overflow: hidden;
}
.v5-android-screen video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.v5-android-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 80%);
  z-index: 2;
}
.v5-android-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  color: rgba(255,255,255,0.85);
}
.v5-android-nav-btn {
  display: block;
  width: 12px; height: 12px;
}
.v5-android-nav-btn--back {
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.v5-android-nav-btn--home {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}
.v5-android-nav-btn--recent {
  width: 11px; height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}