/* =====================================================================
   PORTFOLIO TEMPLATE · styles.css
   Stage 1: design tokens. Every value below is copied from the live site.
   The rest of this file is the live stylesheet carried over verbatim
   (only file paths renamed to slot paths). Do not re-imagine it.
   ===================================================================== */
:root {
  color-scheme: dark;
  /* surface */
  --bg: #f4f0e4;  --bg-soft: #f3efe2;  --card: #f2ede0;  --card-hi: #f1ecdd;
  /* ink + accents ("gold" is soft lavender on this site) */
  --gold: #75162e;  --white: #601226;  --muted: #814857;  --purple: #821933;  --line: #ede7d4;
  --name-red: #a92042;  --om-violet: #77172f;  --type-ink: rgba(118,22,46,.86);
  /* glow trim */
  --glow-edge: rgba(169,32,66,.34);  --glow-soft: rgba(169,32,66,.14);
  --glow-hover-edge: rgba(152,29,60,.6);  --glow-hover-soft: rgba(152,29,60,.24);
  --float-shadow: 0 22px 48px -18px rgba(0,0,0,0.15), 0 8px 18px -10px rgba(0,0,0,0.1);
  /* type */
  --head: Michroma, Barlow, system-ui, sans-serif;
  --body: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* golden rhythm: Fibonacci spacing + phi */
  --f1: 8px; --f2: 13px; --f3: 21px; --f4: 34px; --f5: 55px; --f6: 89px; --f7: 144px; --phi: 1.618;
  --sec: clamp(var(--f6), 10vw, var(--f7));
  --max: 1160px;
}
/* ===== live stylesheet below ===== */
:root {
  color-scheme: dark;
  --bg: #f4f0e4;
  --bg-soft: #f3efe2;
  --card: #f2ede0;
  --card-hi: #f1ecdd;
  --gold: #75162e;
  --white: #601226;
  --muted: #814857;
  --purple: #821933;
  --line: #ede7d4;
  --max: 1160px;
  --head: Michroma, Barlow, system-ui, sans-serif;
  --body: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(900px 500px at 80% 2%, rgba(130,25,51,.14), transparent 60%), radial-gradient(700px 500px at 6% 45%, rgba(130,25,51,.07), transparent 60%), var(--bg);
  color: var(--white);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.site-header {
  width: min(1280px, calc(100% - 48px));
  min-height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(97, 18, 38, .09);
}
.wordmark { color: var(--white); text-decoration: none; font-size: 14px; font-weight: 850; letter-spacing: .12em; }
nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); }
nav a, .site-footer a { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 650; transition: color .18s ease; }
nav a:hover, .site-footer a:hover, .text-link:hover { color: var(--gold); }
.nav-cta { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; }
.nav-cta span, .site-footer span { color: var(--gold); }
.nav-backstage { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--white) !important; background: rgba(255,255,255,.035); }
.nav-backstage img { width: 60px; height: auto; flex: 0 0 auto; border-radius: 2px; }
.nav-backstage span:last-child { color: var(--gold); }
.nav-contact { color: var(--white) !important; }

.hero {
  min-height: 630px;
  padding-block: 82px 70px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  align-items: center;
  gap: 54px;
}
.eyebrow { margin: 0 0 18px; color: var(--gold); font-size: 12px; font-weight: 850; letter-spacing: .15em; }
.eyebrow-dot { display: inline-block; width: 7px; height: 7px; margin: 0 9px 1px 0; background: var(--gold); border-radius: 50%; box-shadow: 0 0 10px rgba(130, 25, 51,.45); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 640px; margin-bottom: 20px; font-size: clamp(60px, 7.6vw, 98px); font-weight: 750; line-height: .99; letter-spacing: -.045em; }
h1 span { color: var(--gold); }
.hero-lede { max-width: 610px; margin-bottom: 9px; color: var(--muted); font-size: clamp(18px, 2vw, 22px); line-height: 1.5; }
.platforms { margin: 0; color: var(--purple); font-size: 14px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 27px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 46px; padding: 0 19px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 800; transition: transform .18s ease, filter .18s ease; }
.button:hover { transform: translateY(-2px); filter: brightness(1.06); }
.button-gold { background: linear-gradient(135deg, #9b2438, #a8273d); color: #f1dfe2; box-shadow: inset 0 1px rgba(255,255,255,.32); }
.featured-metrics strong { display: block; color: var(--white); font-size: 30px; font-weight: 850; letter-spacing: -.04em; line-height: 1.15; }
.featured-metrics > div:first-child strong { color: var(--gold); }
.featured-metrics span { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.metric-note { margin: 13px 0 0; color: #874c5a; font-size: 11px; }
.hero-portrait-wrap { position: relative; display: grid; place-items: center; min-height: 440px; }
.portrait-orbit { 
  position: absolute;
  width: min(420px, 132%);
  height: auto;
  border-radius: 24px;
  object-fit: contain;
  opacity: .82;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000000 10%, #000000 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000000 10%, #000000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000000 10%, #000000 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000000 10%, #000000 90%, transparent 100%);
  mask-composite: intersect;
  filter: drop-shadow(0 0 22px rgba(143, 27, 56, .2));
  pointer-events: none;
}
.hero-portrait { position: relative; width: min(320px, 78%); aspect-ratio: .86; object-fit: cover; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; box-shadow: 0 22px 55px rgba(0,0,0,0.064); }

.featured { display: grid; grid-template-columns: minmax(270px, 355px) minmax(0, 1fr); gap: clamp(34px, 7vw, 88px); align-items: center; padding: 50px clamp(20px, 6vw, 72px); border: 1px solid rgba(97,18,38,.1); border-radius: 20px; background: linear-gradient(120deg, rgba(240,220,223,.94), rgba(241,223,226,.96)); box-shadow: 0 24px 60px rgba(0,0,0,0.032); }
.featured-image-wrap { position: relative; max-width: 320px; margin: 0 auto; padding: 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 30px; background: linear-gradient(145deg, #e3d8ba, #f2e0e3 24%, #f3e3e6 68%, #f0eadb); box-shadow: 0 24px 58px rgba(0,0,0,0.068), inset 0 1px rgba(255,255,255,.2); }
.featured-image-wrap::before, .featured-image-wrap::after { content: ""; position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); pointer-events: none; }
.featured-image-wrap::before { top: 12px; width: 66px; height: 17px; border: 1px solid rgba(255,255,255,.05); border-radius: 999px; background: #f3e3e6; box-shadow: inset 0 1px 2px rgba(0,0,0,0.16); }
.featured-image-wrap::after { bottom: 13px; width: 52px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.78); }
.featured-image-link { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 16; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; background: #f5f1e6; }
.featured-image { width: 100%; height: 100%; object-fit: cover; }
.play-button { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; background: rgba(242,225,227,.78); color: var(--gold); font-size: 15px; box-shadow: 0 6px 22px rgba(0,0,0,0.06); }
.featured-content .eyebrow { display: flex; align-items: center; gap: 18px; }
.eyebrow-line { height: 1px; flex: 1; background: var(--line); }
.featured h2, .section-heading h2, .about-block h2, .contact-card h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -.035em; }
.caption-label { margin: 25px 0 3px; color: var(--purple); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.featured-caption { margin-bottom: 4px; color: var(--white); font-size: 19px; font-weight: 700; }
.watch-link { display: inline-block; margin-top: 8px; color: var(--gold); font-size: 13px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; text-underline-offset: 4px; }
.watch-link span { margin-left: 3px; }
.featured-metrics { display: grid; grid-template-columns: repeat(2, minmax(90px, 1fr)); gap: 18px 24px; margin-top: 25px; padding: 22px; border: 1px solid rgba(97,18,38,.09); border-radius: 14px; background: rgba(242,226,228,.26); }
.featured-metrics strong { font-size: 27px; }
.featured-metrics .metric-wide { display: flex; align-items: baseline; gap: 9px; }
.featured-metrics .metric-wide strong { color: var(--purple); font-size: 20px; }
.featured-metrics .metric-wide span { margin: 0; font-size: 9px; }
.non-follower { grid-column: 1 / -1; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--gold); font-size: 13px; font-weight: 750; }

.work-section, .travel-section { padding-top: 110px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.section-heading .eyebrow { margin-bottom: 11px; }
.section-heading h2 { font-size: clamp(31px, 4vw, 44px); }
.section-heading > p { max-width: 360px; margin-bottom: 5px; color: var(--muted); font-size: 14px; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.work-card { overflow: hidden; display: flex; flex-direction: column; min-height: 100%; border: 1px solid rgba(97,18,38,.09); border-radius: 15px; background: var(--card); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.work-card:hover { transform: translateY(-3px); border-color: rgba(131,25,51,.34); background: var(--card-hi); }
.thumb-link, .travel-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 1.12 / 1; background: #f5f1e6; }
.thumb-link img, .travel-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.work-card:hover .thumb-link img, .travel-card:hover .travel-thumb img { transform: scale(1.035); }
.thumb-play { position: absolute; right: 11px; bottom: 11px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(242,225,228,.78); color: var(--gold); font-size: 11px; }
.work-copy { display: flex; flex: 1; flex-direction: column; padding: 16px 17px 18px; }
.work-label { margin: 0 0 9px; color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.work-card h3, .travel-card h3 { margin: 0 0 16px; font-size: 17px; line-height: 1.32; letter-spacing: -.02em; }
.work-meta { margin: auto 0 0; color: var(--muted); font-size: 12px; }
.travel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.travel-card { overflow: hidden; display: grid; grid-template-columns: minmax(118px, 140px) minmax(0, 1fr); align-items: stretch; border: 1px solid rgba(97,18,38,.09); border-radius: 15px; background: var(--card); }
.travel-thumb { aspect-ratio: .7 / 1; }
.travel-card > div { display: flex; flex-direction: column; padding: 20px; }
.travel-card h3 { margin-bottom: 20px; font-size: 16px; }

.about-contact { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 24px; padding-block: 108px; }
.about-block, .contact-card { padding: clamp(24px, 4vw, 42px); border: 1px solid rgba(97,18,38,.09); border-radius: 18px; background: var(--card); }
.about-block .eyebrow, .contact-card .eyebrow { margin-bottom: 14px; }
.about-block h2, .contact-card h2 { margin-bottom: 18px; font-size: clamp(28px, 3vw, 37px); }
.about-block > p:not(.eyebrow):not(.category-line) { max-width: 680px; margin-bottom: 20px; color: var(--muted); font-size: 14px; }
.category-line { margin: 24px 0 14px; color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.category-line span { padding-inline: 4px; color: var(--gold); }
.format-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.format-pills span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; }
.contact-card { background: linear-gradient(145deg, #f1ecdd, #f2ede0); }
.contact-card > p:not(.eyebrow) { margin-bottom: 25px; color: var(--muted); font-size: 14px; }
.contact-card .button { width: 100%; }
.contact-icon { display: block; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; object-fit: contain; }
.gmail-icon { width: 22px; height: 22px; }
.contact-options { display: grid; gap: 9px; margin-top: 11px; }
.contact-option { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 54px; padding: 9px 13px; border: 1px solid rgba(97,18,38,.1); border-radius: 12px; background: rgba(242,225,228,.34); color: var(--white); text-align: left; text-decoration: none; transition: border-color .2s, background .2s; }
.contact-option:hover { border-color: rgba(130, 25, 51,.32); background: rgba(255,255,255,.045); }
.contact-option-main strong, .contact-option-main small { display: block; }
.contact-option-main strong { font-size: 12px; font-weight: 800; }
.contact-option-main small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.contact-option-action { margin-left: auto; color: var(--gold); font-size: 11px; font-weight: 750; white-space: nowrap; }
.contact-option-button { cursor: pointer; font: inherit; }
.site-footer { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(97,18,38,.09); }
.site-footer p { margin: 0; color: #874c5a; font-size: 11px; }
.footer-media-links { display: flex; align-items: center; gap: 10px; }
.footer-media-links > p { max-width: 170px; }
.media-project { display: flex; align-items: center; gap: 9px; min-width: 168px; padding: 7px 9px; border: 1px solid rgba(97,18,38,.1); border-radius: 12px; background: rgba(244,240,228,.74); text-decoration: none; }
.media-project img { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 5px; object-fit: cover; }
.media-project img.dj-project-image { width: 54px; filter: grayscale(1); }
.media-project > span { color: var(--muted); line-height: 1.3; }
.media-project strong, .media-project small { display: block; }
.media-project strong { color: var(--white); font-size: 11px; font-weight: 800; }
.media-project small { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 10px; }
.media-project img.platform-icon { width: 13px; height: 13px; border-radius: 3px; object-fit: contain; }
.media-project:hover { border-color: rgba(131,25,51,.3); background: var(--card-hi); }

@media (max-width: 1000px) {
  .site-footer { flex-wrap: wrap; justify-content: flex-start; padding-block: 22px; }
  .site-footer > .wordmark, .site-footer > p, .site-footer > a { flex: 0 0 auto; }
  .footer-media-links { flex: 1 1 100%; flex-wrap: wrap; gap: 12px; }
  .footer-media-links > p { flex: 0 0 100%; max-width: none; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); gap: 18px; }
  .hero-portrait-wrap { min-height: 350px; }
  .portrait-orbit { width: min(360px, 132%); }
  .featured { grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: 36px; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .travel-grid { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1149px) {
  .travel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap, .site-header { width: min(100% - 32px, var(--max)); }
  .site-header { min-height: 70px; gap: 10px; }
  nav { gap: 8px; }
  nav a { font-size: 11px; }
  nav .nav-about { display: none; }
  nav .nav-cta { display: none; }
  .nav-cta { padding: 8px 11px; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 16px; padding-block: 58px 56px; }
  .hero-copy { order: 1; }
  .hero-portrait-wrap { grid-row: 1; min-height: 290px; margin-bottom: 4px; }
  .portrait-orbit { width: min(380px, 110%); }
  .hero-portrait { width: 210px; }
  h1 { font-size: clamp(60px, 17vw, 82px); }
  .featured { grid-template-columns: 1fr; gap: 28px; padding: 20px; }
  .featured-image-wrap { width: min(100%, 260px); }
  .featured-content .eyebrow { margin-bottom: 12px; }
  .featured h2 { font-size: 34px; }
  .featured-metrics { gap: 14px; padding: 16px; }
  .featured-metrics strong { font-size: 23px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 12px; }
  .work-section, .travel-section { padding-top: 72px; }
  .work-grid { grid-template-columns: 1fr; gap: 14px; }
  .work-card { display: grid; grid-template-columns: minmax(125px, 42%) minmax(0, 1fr); }
  .thumb-link { align-self: stretch; aspect-ratio: auto; min-height: 150px; }
  .thumb-link img { position: absolute; inset: 0; }
  .work-copy { padding: 14px 13px; }
  .work-card h3 { font-size: 14px; }
  .travel-card { grid-template-columns: 120px minmax(0, 1fr); }
  .travel-thumb { aspect-ratio: .7 / 1; }
  .travel-card > div { padding: 15px 13px; }
  .travel-card h3 { font-size: 14px; }
  .about-contact { grid-template-columns: 1fr; gap: 14px; padding-block: 72px; }
  .site-footer { flex-wrap: wrap; justify-content: space-between; padding-block: 22px; }
  .site-footer p { order: 3; flex-basis: 100%; }
  .footer-media-links { flex-basis: 100%; flex-wrap: wrap; gap: 12px; }
  .footer-media-links > p { flex-basis: 100%; max-width: none; }
  .site-footer .footer-media-links p { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ===== App look: Michroma headings, Barlow body ===== */
body { font-family: var(--body); font-size: 17px; }
h1, h2 { font-family: var(--head); font-weight: 400; color: #76162e; }
h3 { font-family: var(--body); font-weight: 600; }
.wordmark { font-family: var(--head); font-weight: 400; font-size: 13px; letter-spacing: .14em; color: #76162e; }
h1 { font-size: clamp(32px, 5.2vw, 62px); line-height: 1.1; letter-spacing: -.01em; max-width: 680px; }
h1 span { color: var(--purple); }
.featured h2, .section-heading h2, .about-block h2, .contact-card h2 { font-size: clamp(22px, 2.8vw, 32px); line-height: 1.2; letter-spacing: -.01em; }
.about-block h2, .contact-card h2 { font-size: clamp(20px, 2.4vw, 28px); }
.eyebrow, .work-label, .caption-label, .category-line { font-family: var(--body); color: var(--purple); letter-spacing: .16em; }
.eyebrow-dot { background: var(--purple); box-shadow: 0 0 15px rgba(130,25,51,.8); }
.button-gold { background: var(--purple); color: #ffffff; border-radius: 14px; }
.nav-cta, .nav-backstage { border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.featured-metrics strong { font-family: var(--head); font-weight: 400; font-size: 22px; letter-spacing: 0; }
.featured-metrics .metric-wide strong { font-size: 16px; color: #76162e; }
.featured-metrics > div:first-child strong { color: var(--purple); }
.work-card, .travel-card, .about-block, .contact-card, .featured, .media-project, .contact-option { border-color: var(--line); border-radius: 20px; }
.contact-option, .media-project { border-radius: 14px; }
.work-card:hover, .travel-card:hover, .media-project:hover, .contact-option:hover { border-color: var(--purple); }
.work-card h3, .travel-card h3 { font-size: 18px; letter-spacing: 0; }
.format-pills span { background: var(--card-hi); color: #76162e; border-color: var(--line); }
.portrait-orbit { filter: drop-shadow(0 0 26px rgba(130,25,51,.35)); }
@media (max-width: 640px) { h1 { font-size: clamp(30px, 9vw, 42px); } }

/* ===== Campaign spotlight card (easymix.io) ===== */
.work-card--campaign { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(260px, 38%) minmax(0, 1fr); }
.work-card--campaign .thumb-link { aspect-ratio: auto; min-height: 340px; }
.work-card--campaign .thumb-link img { position: absolute; inset: 0; object-position: 50% 16%; }
.work-card--campaign .work-copy { justify-content: center; padding: clamp(22px, 3.4vw, 40px); }
.work-card--campaign h3 { font-family: var(--head); font-weight: 400; font-size: clamp(20px, 2.3vw, 28px); line-height: 1.25; color: #76162e; margin-bottom: 14px; }
.campaign-badge { display: inline-block; margin-left: 8px; padding: 3px 8px; border: 1px solid rgba(130,25,51,.45); border-radius: 999px; background: rgba(130,25,51,.12); color: var(--gold); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; vertical-align: 1px; }
.campaign-pitch { margin: 0 0 18px; max-width: 560px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.campaign-pills { margin-bottom: 20px; }
.campaign-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.campaign-links .watch-link { margin-top: 0; font-size: 12px; }
.campaign-profile { color: #76162e; }
.campaign-profile:hover { color: var(--gold); }
@media (max-width: 640px) {
  .work-card--campaign { grid-template-columns: 1fr; }
  .work-card--campaign .thumb-link { min-height: 0; aspect-ratio: 4 / 5; }
  .work-card--campaign .work-copy { padding: 18px 16px 20px; }
  .work-card--campaign h3 { font-size: 20px; }
  .campaign-pitch { font-size: 14px; }
  .campaign-links { flex-direction: column; gap: 10px; }
}

/* ===== Campaign group row ===== */
.campaign-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: 14px; padding: 14px 4px 2px; border-top: 1px solid var(--line); }
.campaign-row .work-label { margin: 0; }
.campaign-row .watch-link { margin-top: 0; font-size: 12px; }
@media (max-width: 640px) { .campaign-row { margin-top: 10px; flex-direction: column; align-items: flex-start; } }
.campaign-row--first { margin-top: 0; padding-top: 0; border-top: 0; }

/* Travel thumbs: fill the column at any card height (long titles) */
.travel-thumb, .travel-card .travel-thumb { aspect-ratio: auto; min-height: 200px; width: 100%; }
.travel-thumb img { position: absolute; inset: 0; }
@media (max-width: 640px) { .travel-thumb, .travel-card .travel-thumb { min-height: 170px; } }
.work-card--campaign .thumb-link img.focus-mid { object-position: 50% 42%; }
.work-grid > .work-card--campaign:not(:first-child) { margin-top: 14px; }
.campaign-note { margin-left: 10px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; letter-spacing: .06em; }
@media (max-width: 640px) { .campaign-note { margin: 2px 0 0; } }
.campaign-row { justify-content: flex-start; }
.campaign-row .work-label { margin-right: auto; }
@media (max-width: 640px) { .campaign-row .work-label { margin-right: 0; } }
.campaign-stat { margin: -6px 0 12px; color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: .02em; }

/* ===== Header name: headshot crimson, links to Spotify ===== */
:root { --name-red: #a92042; } /* wall crimson from headshot (#b82348), lifted for contrast on dark */
.site-header .wordmark--spotify { font-size: clamp(17px, 1.6vw, 21px); letter-spacing: .16em; line-height: 1.15; color: var(--name-red); text-shadow: 0 0 18px rgba(169,32,66,.22); transition: color .2s ease, text-shadow .2s ease; }
.site-header .wordmark--spotify:hover, .site-header .wordmark--spotify:focus-visible { color: #981d3c; text-shadow: 0 0 22px rgba(152,29,60,.4); }
@media (max-width: 640px) { .site-header .wordmark--spotify { font-size: 15px; letter-spacing: .13em; } }

/* ===== Uniform newest-first grid (Nov 2026) ===== */
.work-grid .thumb-link { aspect-ratio: 4 / 5; }
.work-grid .thumb-link img { object-position: var(--pos, 50% 18%); }
.work-card h3 { margin-bottom: 12px; }
.profile-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 22px; }
.profile-chips > span { margin-right: 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.profile-chips a { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: #76162e; font-size: 12px; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.profile-chips a:hover, .profile-chips a:focus-visible { border-color: var(--purple); color: var(--gold); }
.profile-chips a span { color: var(--gold); }
.about-block .text-link { color: var(--gold); text-underline-offset: 3px; }
.about-block > p.sign-off:not(.eyebrow):not(.category-line) { margin: 4px 0 22px; color: #76162e; font-size: 15px; font-weight: 700; }
.media-project img.muted-project-image { filter: grayscale(.85) brightness(.78) contrast(1.05); }
@media (max-width: 640px) {
  .work-grid .thumb-link { aspect-ratio: 4 / 5; min-height: 0; align-self: start; }
  .profile-chips { margin-top: 0; }
  .profile-chips > span { flex-basis: 100%; }
}

/* Header aligns with page content edges */
.site-header { width: min(var(--max), calc(100% - 48px)); }
@media (max-width: 640px) { .site-header { width: min(100% - 32px, var(--max)); } }

/* ===== Floating panels with soft crimson glow (matches header name) ===== */
:root {
  --glow-edge: rgba(169, 32, 66, .34);
  --glow-soft: rgba(169, 32, 66, .14);
  --glow-hover-edge: rgba(152, 29, 60, .6);
  --glow-hover-soft: rgba(152, 29, 60, .24);
  --float-shadow: 0 22px 48px -18px rgba(0, 0, 0, 0.15), 0 8px 18px -10px rgba(0, 0, 0, 0.1);
}
.featured, .work-card, .about-block, .contact-card {
  border-color: var(--glow-edge) !important;
  box-shadow: 0 0 0 1px rgba(169, 32, 66, .06), 0 0 22px var(--glow-soft), var(--float-shadow);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.work-card:hover, .work-card:focus-within,
.about-block:hover, .contact-card:hover, .featured:hover {
  transform: translateY(-4px);
  border-color: var(--glow-hover-edge) !important;
  box-shadow: 0 0 0 1px rgba(152, 29, 60, .12), 0 0 32px var(--glow-hover-soft), 0 30px 60px -20px rgba(0, 0, 0, 0.16), 0 10px 22px -10px rgba(0, 0, 0, 0.11);
}
.featured:hover, .about-block:hover, .contact-card:hover { transform: translateY(-2px); }
.work-card:hover { background: var(--card); }
@media (hover: none) { .work-card:hover, .about-block:hover, .contact-card:hover, .featured:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .featured, .work-card, .about-block, .contact-card { transition: none; } .work-card:hover, .about-block:hover, .contact-card:hover, .featured:hover { transform: none; } }

/* ===== Campaign panels with small vertical clips (Nov 2026) ===== */
html { scroll-padding-top: 24px; }
.campaign-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 26px; }
.campaign-nav a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: #76162e; font-size: 12px; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.campaign-nav a:hover, .campaign-nav a:focus-visible { border-color: var(--glow-hover-edge); color: #ffffff; }
.campaign-list { display: grid; gap: 22px; }
.campaign { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 28px; align-items: start; padding: 22px; border: 1px solid var(--glow-edge); border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px rgba(169,32,66,.06), 0 0 22px var(--glow-soft), var(--float-shadow); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.campaign:hover { transform: translateY(-2px); border-color: var(--glow-hover-edge); box-shadow: 0 0 0 1px rgba(152,29,60,.12), 0 0 32px var(--glow-hover-soft), 0 30px 60px -20px rgba(0,0,0,0.16), 0 10px 22px -10px rgba(0,0,0,0.11); }
.campaign-head h3 { margin: 0 0 6px; font-family: var(--head); font-weight: 400; font-size: 20px; line-height: 1.25; color: #651328; }
.campaign-head p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.campaign-handle { color: var(--gold); font-size: 12px; font-weight: 700; text-decoration: none; }
.campaign-handle:hover { text-decoration: underline; text-underline-offset: 3px; }
.campaign-head .campaign-note { display: inline-block; margin: 10px 0 0; }
.campaign-clips { display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: 16px; }
.clip { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.clip-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 16; border: 1px solid rgba(97,18,38,.1); border-radius: 12px; background: #f5f1e6; }
.clip-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.clip:hover .clip-thumb img { transform: scale(1.04); }
.clip:hover .clip-thumb { border-color: var(--glow-hover-edge); }
.clip .thumb-play { right: 8px; bottom: 8px; width: 28px; height: 28px; font-size: 9px; }
.clip-title { display: -webkit-box; margin-top: 9px; overflow: hidden; color: #651328; font-size: 13px; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.clip-meta { margin-top: 4px; color: var(--muted); font-size: 11px; }
@media (hover: none), (prefers-reduced-motion: reduce) { .campaign:hover { transform: none; } }
@media (max-width: 900px) { .campaign { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 640px) {
  .campaign { padding: 16px; border-radius: 16px; }
  .campaign-head h3 { font-size: 18px; }
  .campaign-clips { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -16px; padding-right: 16px; padding-bottom: 4px; }
  .clip { flex: 0 0 132px; scroll-snap-align: start; }
  .campaign-nav { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; padding-bottom: 4px; }
  .campaign-nav a { flex: 0 0 auto; }
}

/* Two campaigns per row on desktop; header above clips */
.campaign { grid-template-columns: 1fr; gap: 14px; }
.campaign-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.campaign-head h3 { flex-basis: 100%; margin-bottom: 2px; }
.campaign-head p { margin: 0; }
.campaign-head .campaign-note { margin: 0; }
.campaign-clips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1000px) { .campaign-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* About: short flowing lines */
.about-block > p.service:not(.eyebrow):not(.category-line) { line-height: 1.75; }

/* ===== Beyond UGC: secondary, compact, curiosity on hover ===== */
.beyond { padding: 8px 0 72px; }
.beyond .eyebrow { margin-bottom: 10px; color: var(--muted); }
.beyond h2 { margin: 0 0 20px; font-size: clamp(18px, 2vw, 24px); color: #7b4553; }
.beyond-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.beyond-card { display: flex; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(243,238,225,.55); color: inherit; text-decoration: none; transition: border-color .3s ease, background .3s ease, transform .3s ease; }
.beyond-card img { flex: 0 0 auto; width: 74px; height: 74px; border-radius: 12px; object-fit: cover; filter: grayscale(.7) brightness(.8); transition: filter .4s ease, transform .4s ease; }
.beyond-card img.book { width: 56px; height: 86px; border-radius: 6px; }
.beyond-card:hover, .beyond-card:focus-visible { border-color: var(--glow-edge); background: var(--card); transform: translateY(-2px); }
.beyond-card:hover img, .beyond-card:focus-visible img { filter: none; transform: scale(1.04); }
.beyond-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.beyond-kicker { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.beyond-copy strong { color: #651328; font-size: 14px; line-height: 1.3; }
.beyond-copy > span:not(.beyond-kicker):not(.beyond-link) { color: var(--muted); font-size: 12px; line-height: 1.4; }
.beyond-link { margin-top: 3px; color: var(--gold); font-size: 11px; font-weight: 700; }
@media (max-width: 900px) { .beyond-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .beyond { padding-bottom: 56px; } }
@media (hover: none) { .beyond-card img { filter: grayscale(.35) brightness(.9); } }

/* Sound toggle (footer) */
.sound-toggle { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; letter-spacing: .06em; cursor: pointer; }
.sound-toggle:hover, .sound-toggle:focus-visible { border-color: var(--glow-edge); color: #651328; }
.sound-toggle[aria-pressed="false"] { opacity: .7; }

/* ===== Hero portrait: alternate-name hover (links to media kit) ===== */
.pm-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.portrait-link { position: relative; z-index: 2; display: block; width: min(320px, 78%); border-radius: 22px; perspective: 900px; color: inherit; text-decoration: none; outline: none; --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; }
.portrait-card { position: relative; display: block; overflow: hidden; border-radius: 22px; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; box-shadow: 0 22px 55px rgba(0,0,0,0.064); }
.portrait-link .hero-portrait { display: block; width: 100%; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.portrait-link:hover .portrait-card, .portrait-link:focus-visible .portrait-card { transition: transform .12s linear, box-shadow .5s ease; box-shadow: 0 0 0 1px rgba(152,29,60,.55), 0 0 38px rgba(169,32,66,.32), 0 0 90px rgba(130,25,51,.22), 0 30px 70px rgba(0,0,0,0.1); }
.portrait-link:hover .hero-portrait, .portrait-link:focus-visible .hero-portrait { transform: scale(1.045); filter: saturate(1.08) contrast(1.04); }
.pm-lattice, .pm-sheen, .pm-scan { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.pm-lattice { opacity: 0; mix-blend-mode: multiply; transition: opacity .5s ease;
  background-image:
    repeating-linear-gradient(60deg, rgba(117,22,46,.0) 0 17px, rgba(117,22,46,.32) 17px 18px),
    repeating-linear-gradient(-60deg, rgba(152,29,60,.0) 0 17px, rgba(152,29,60,.28) 17px 18px),
    repeating-linear-gradient(0deg, rgba(117,22,46,.0) 0 17px, rgba(117,22,46,.18) 17px 18px);
  -webkit-mask-image: radial-gradient(130px 130px at var(--mx) var(--my), #000000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
  mask-image: radial-gradient(130px 130px at var(--mx) var(--my), #000000 0%, rgba(0,0,0,.35) 45%, transparent 75%); }
.pm-sheen { opacity: 0; mix-blend-mode: soft-light; transition: opacity .4s ease; background: radial-gradient(260px 220px at var(--mx) var(--my), rgba(255,255,255,.55), rgba(255,255,255,.08) 40%, transparent 70%); }
.pm-scan { opacity: 0; background: linear-gradient(180deg, transparent 0%, rgba(152,29,60,.0) 42%, rgba(152,29,60,.35) 49%, rgba(94,18,37,.55) 50%, rgba(130,25,51,.3) 51%, transparent 58%); background-size: 100% 220%; background-position: 0 120%; }
.portrait-link:hover .pm-lattice, .portrait-link:focus-visible .pm-lattice { opacity: 1; }
.portrait-link:hover .pm-sheen, .portrait-link:focus-visible .pm-sheen { opacity: .9; }
.portrait-link:hover .pm-scan, .portrait-link:focus-visible .pm-scan { animation: pm-scan 1.4s cubic-bezier(.4,0,.2,1) .05s 1 both; }
@keyframes pm-scan { 0% { opacity: 0; background-position: 0 120%; } 12% { opacity: 1; } 85% { opacity: .9; } 100% { opacity: 0; background-position: 0 -20%; } }
.pm-cta { position: absolute; left: 50%; bottom: 14px; display: inline-flex; gap: 6px; align-items: center; padding: 7px 13px; border: 1px solid rgba(152,29,60,.55); border-radius: 999px; background: rgba(242,226,229,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #601226; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%, 10px); transition: opacity .4s ease .25s, transform .5s cubic-bezier(.2,.7,.2,1) .25s; }
.pm-cta b { color: #981d3c; font-weight: 700; }
.portrait-link:hover .pm-cta, .portrait-link:focus-visible .pm-cta { opacity: 1; transform: translate(-50%, 0); }
.portrait-orbit { transition: transform 2.4s cubic-bezier(.2,.7,.2,1), opacity .8s ease, filter .8s ease; }
.hero-portrait-wrap.is-live .portrait-orbit { transform: rotate(28deg) scale(1.06); opacity: .95; filter: drop-shadow(0 0 34px rgba(169,32,66,.35)); }
@media (hover: none) { .pm-cta { opacity: .92; transform: translate(-50%, 0); font-size: 10px; padding: 6px 11px; } }
@media (max-width: 640px) { .portrait-link { width: 210px; } }
@media (prefers-reduced-motion: reduce) {
  .portrait-card, .portrait-link .hero-portrait, .portrait-orbit { transition: none; }
  .portrait-link:hover .hero-portrait { transform: none; }
  .portrait-link:hover .pm-scan { animation: none; }
  .hero-portrait-wrap.is-live .portrait-orbit { transform: none; }
}

/* ===== Header name vaporizes into the alternate name on hover ===== */
:root { --om-violet: #77172f; }
.site-header .wordmark--spotify { display: inline-grid; text-shadow: none; }
.wm-layer { grid-area: 1 / 1; }
.wm-layer .w { display: inline-block; white-space: nowrap; }
.wm-layer .c { display: inline-block; will-change: transform, opacity, filter; }
.wm-real .c { color: var(--name-red); text-shadow: 0 0 18px rgba(169,32,66,.22); transition: opacity .55s ease, filter .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 26ms); }
.wm-alt .c { color: var(--om-violet); text-shadow: 0 0 14px rgba(130,25,51,.55), 0 0 30px rgba(130,25,51,.25); opacity: 0; filter: blur(7px); transform: translateY(7px) scale(.86); transition: opacity .5s ease, filter .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 22ms); }
.site-header .wordmark--spotify:hover .wm-real .c, .site-header .wordmark--spotify:focus-visible .wm-real .c {
  opacity: 0; filter: blur(6px);
  transform: translate(calc((var(--i) - 6) * 1.6px), calc(-10px - var(--i) * .6px)) scale(1.25) rotate(calc((var(--i) - 6) * 2deg));
}
.site-header .wordmark--spotify:hover .wm-alt .c, .site-header .wordmark--spotify:focus-visible .wm-alt .c {
  opacity: 1; filter: blur(0); transform: none; transition-delay: calc(220ms + var(--i) * 30ms);
}
.site-header .wordmark--spotify:hover, .site-header .wordmark--spotify:focus-visible { text-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .wm-real .c, .wm-alt .c { transition: opacity .3s ease; transition-delay: 0s !important; filter: none; transform: none !important; }
}
@media (hover: none) {
  .site-header .wordmark--spotify:hover .wm-real .c { opacity: 1; filter: none; transform: none; }
  .site-header .wordmark--spotify:hover .wm-alt .c { opacity: 0; }
}

/* ===== Header socials (replace text nav) ===== */
.socials { display: flex; align-items: center; gap: 6px; }
.socials .social { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(97,18,38,.1); border-radius: 50%; background: rgba(255,255,255,.025); color: #76162e; cursor: pointer; transition: color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease; }
.socials .social svg { width: 17px; height: 17px; }
.socials .social:hover, .socials .social:focus-visible { color: #ffffff; border-color: var(--glow-hover-edge); box-shadow: 0 0 16px rgba(169,32,66,.35); transform: translateY(-1px); outline: none; }
.socials .social::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(242,226,229,.92); color: #651328; font-size: 10px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, -3px); transition: opacity .2s ease, transform .2s ease; z-index: 20; }
.socials .social:hover::after, .socials .social:focus-visible::after, .socials .social.is-copied::after { opacity: 1; transform: translate(-50%, 0); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 640px) {
  .socials { gap: 3px; }
  .socials .social { width: 28px; height: 28px; border-color: transparent; background: transparent; }
  .socials .social svg { width: 16px; height: 16px; }
  .socials .social::after { display: none; }
  .socials .social.is-copied::after { display: block; left: auto; right: 0; transform: none; }
}
@media (max-width: 340px) { .socials .social { width: 25px; } .socials .social svg { width: 14px; height: 14px; } }
@media (max-width: 420px) {
  .socials .s-sp, .socials .s-bs { display: none; }
  .socials { gap: 2px; }
  .socials .social { width: 27px; height: 27px; }
}
@media (max-width: 340px) {
  .site-header .wordmark--spotify { font-size: 13.5px; letter-spacing: .11em; }
  .socials .social { width: 25px; height: 25px; }
  .socials .social svg { width: 14.5px; height: 14.5px; }
}

/* ===== Video clips: holographic hover (sibling of the headshot effect) =====
   Headshot = tilt + lattice + node network. Clips = orbiting light ring,
   prism sweep, depth lift and an energised play button. */
@property --ring { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.clip { position: relative; }
.clip-thumb { isolation: isolate; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .3s ease; }
.clip-thumb::before { /* orbiting crimson-violet ring */
  content: ""; position: absolute; inset: 0; z-index: 3; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--ring), transparent 0 55%, rgba(130,25,51,.9) 70%, #631327 76%, rgba(152,29,60,.95) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000000 0 0) content-box exclude, linear-gradient(#000000 0 0);
  opacity: 0; transition: opacity .35s ease;
}
.clip-thumb::after { /* prism light sweep */
  content: ""; position: absolute; inset: -20%; z-index: 2; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(115deg, transparent 38%, rgba(152,29,60,.22) 45%, rgba(255,255,255,.28) 50%, rgba(130,25,51,.24) 55%, transparent 62%);
  transform: translateX(-70%); opacity: 0;
}
.clip:hover .clip-thumb, .clip:focus-visible .clip-thumb {
  transform: translateY(-5px) scale(1.025); border-color: transparent;
  box-shadow: 0 18px 34px -14px rgba(0,0,0,0.16), 0 0 26px rgba(169,32,66,.28), 0 0 46px rgba(130,25,51,.16);
}
.clip:hover .clip-thumb::before, .clip:focus-visible .clip-thumb::before { opacity: 1; animation: clip-ring 2.6s linear infinite; }
.clip:hover .clip-thumb::after, .clip:focus-visible .clip-thumb::after { animation: clip-sweep 1.1s cubic-bezier(.4,0,.2,1) .05s 1 both; }
.clip:hover .clip-thumb img, .clip:focus-visible .clip-thumb img { transform: scale(1.06); filter: saturate(1.12) contrast(1.05); }
.clip .thumb-play { z-index: 4; transition: transform .35s cubic-bezier(.2,.7,.2,1), background .3s ease, box-shadow .3s ease, color .3s ease; }
.clip:hover .thumb-play, .clip:focus-visible .thumb-play { transform: scale(1.18); background: rgba(169,32,66,.9); color: #ffffff; box-shadow: 0 0 0 6px rgba(169,32,66,.18), 0 0 22px rgba(152,29,60,.6); }
.clip-title { transition: color .25s ease; }
.clip:hover .clip-title, .clip:focus-visible .clip-title { color: #ffffff; }
.clip { outline: none; }
@keyframes clip-ring { to { --ring: 360deg; } }
@keyframes clip-sweep { 0% { transform: translateX(-70%); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(70%); opacity: 0; } }
@media (hover: none) { .clip:hover .clip-thumb { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .clip:hover .clip-thumb::before, .clip:hover .clip-thumb::after { animation: none; }
  .clip:hover .clip-thumb, .clip:hover .clip-thumb img, .clip:hover .thumb-play { transform: none; }
}

/* ===== Video hover: insights overlay ===== */
.clip-stats { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 10px 44px; border-radius: inherit; background: linear-gradient(180deg, rgba(243,226,229,.5), rgba(243,226,229,.82)); -webkit-backdrop-filter: blur(3px) saturate(1.15); backdrop-filter: blur(3px) saturate(1.15); color: #ffffff; text-align: center; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.clip:hover .clip-stats, .clip:focus-visible .clip-stats { opacity: 1; }
.cs-tag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #671429; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.cs-tag i { width: 6px; height: 6px; border-radius: 50%; background: #981d3c; box-shadow: 0 0 0 0 rgba(152,29,60,.6); animation: cs-pulse 1.8s ease-out infinite; }
.cs-views { font-family: var(--head); font-weight: 400; font-size: clamp(20px, 2.1vw, 26px); letter-spacing: .02em; color: #ffffff; text-shadow: 0 0 18px rgba(169,32,66,.55); font-variant-numeric: tabular-nums; }
.cs-label { margin-top: -2px; color: #75162e; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.cs-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin-top: 12px; }
.cs-m { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.cs-m svg { width: 12px; height: 12px; fill: #981d3c; }
.cs-m b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-m em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@keyframes cs-pulse { 0% { box-shadow: 0 0 0 0 rgba(152,29,60,.6); } 100% { box-shadow: 0 0 0 8px rgba(152,29,60,0); } }
.clip:hover .clip-thumb::after { z-index: 3; }
@media (hover: none) { .clip-stats { display: none; } }

/* ===== Headshot: the wall evaporates, the creator floats on the matrix ===== */
@property --hole { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.portrait-link { --dx: 0px; --dy: 0px; }
.portrait-card { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease, background .6s ease; }
.portrait-link .hero-portrait {
  --hole: 0%;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), transparent var(--hole), #000000 calc(var(--hole) + 22%));
  mask-image: radial-gradient(circle at var(--mx) var(--my), transparent var(--hole), #000000 calc(var(--hole) + 22%));
  transition: --hole 1.1s cubic-bezier(.3,.6,.2,1), filter .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease;
}
.hero-cutout { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000000 70%, transparent 99%), linear-gradient(to right, transparent 0%, #000000 7%, #000000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000000 70%, transparent 99%), linear-gradient(to right, transparent 0%, #000000 7%, #000000 93%, transparent 100%);
  mask-composite: intersect;
  transform-origin: 50% 100%;
  transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .8s ease;
}
.portrait-link .pm-lattice { display: none; }
/* template: the cutout-shaped sheen only applies once assets/cutout.png has loaded (no 404 on an empty site) */
.portrait-link .pm-sheen, .portrait-link .pm-scan { z-index: 2; }
.portrait-link.has-cutout .pm-sheen, .portrait-link.has-cutout .pm-scan {
  -webkit-mask: url('assets/cutout.png') center / cover no-repeat; mask: url('assets/cutout.png') center / cover no-repeat; }
.portrait-link .pm-cta { z-index: 3; }
.portrait-link:hover .portrait-card, .portrait-link:focus-visible .portrait-card {
  overflow: visible; background: transparent;
  box-shadow: none;
}
.portrait-link:hover .hero-portrait, .portrait-link:focus-visible .hero-portrait {
  --hole: 160%; transform: scale(1.06); filter: blur(4px) saturate(.7) brightness(.9); opacity: 0;
}
.portrait-link:hover .hero-cutout, .portrait-link:focus-visible .hero-cutout {
  transform: translate(var(--dx), calc(var(--dy) - 6px)) scale(1.05);
  filter: drop-shadow(0 0 1px rgba(99,19,39,.55)) drop-shadow(0 0 12px rgba(169,32,66,.55)) drop-shadow(0 0 30px rgba(130,25,51,.35));
}
.hero-portrait-wrap.is-live .portrait-orbit { opacity: 1; }
@media (hover: none) { .portrait-link .hero-portrait { -webkit-mask-image: none; mask-image: none; } }
@media (prefers-reduced-motion: reduce) {
  .portrait-link .hero-portrait { transition: opacity .4s ease; -webkit-mask-image: none; mask-image: none; }
  .portrait-link:hover .hero-portrait { transform: none; filter: none; }
  .portrait-link:hover .hero-cutout { transform: none; }
}

/* Hero brief: short welcome lines */
.hero-brief { max-width: 520px; margin: 4px 0 14px; }
.hero-brief p { margin: 0; color: var(--muted); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; }
.hero-brief p:first-child { color: #651328; font-weight: 600; }
.cs-m svg { fill: #981d3c; }

/* Headshot: misty shoulders + living orb replaces the flat orb on hover */
.hero-cutout {
  -webkit-mask-image: linear-gradient(to bottom, #000000 50%, rgba(0,0,0,.82) 62%, rgba(0,0,0,.45) 75%, rgba(0,0,0,.14) 86%, transparent 95%), linear-gradient(to right, transparent 0%, #000000 9%, #000000 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000000 50%, rgba(0,0,0,.82) 62%, rgba(0,0,0,.45) 75%, rgba(0,0,0,.14) 86%, transparent 95%), linear-gradient(to right, transparent 0%, #000000 9%, #000000 91%, transparent 100%);
}
.portrait-link:hover .hero-cutout, .portrait-link:focus-visible .hero-cutout { filter: drop-shadow(0 0 1px rgba(99,19,39,.5)) drop-shadow(0 -2px 12px rgba(169,32,66,.5)) drop-shadow(0 0 30px rgba(130,25,51,.35)) blur(.15px); }
.hero-portrait-wrap.is-live .portrait-orbit { opacity: 0; transform: rotate(28deg) scale(1.1); filter: blur(6px) drop-shadow(0 0 34px rgba(169,32,66,.35)); transition: opacity .9s ease, transform 1.4s cubic-bezier(.2,.7,.2,1), filter .9s ease; }

/* Greeting color follows the time of day */
#hero-title[data-part] span { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
#hero-title[data-part="morning"] span { background-image: linear-gradient(100deg, #902234 0%, #a8273d 45%, #b92b43 100%); filter: drop-shadow(0 0 18px rgba(168,39,61,.28)); }
#hero-title[data-part="afternoon"] span { background-image: linear-gradient(100deg, #982437 0%, #961c3b 50%, #a92042 100%); filter: drop-shadow(0 0 18px rgba(150,28,59,.25)); }
#hero-title[data-part="evening"] span { background-image: linear-gradient(100deg, #7c1831 0%, #9b1d3d 50%, #b32246 100%); filter: drop-shadow(0 0 18px rgba(155,29,61,.3)); }
.hero-brief p { margin-bottom: 2px; }
.hero-brief p:first-child { color: var(--muted); font-weight: 400; }
.hero-brief strong { color: #651328; font-weight: 600; }
.hero-brief .hero-link { margin-left: 4px; color: var(--gold); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hero-brief .hero-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Headshot v4: spinning orb + wall vaporize ===== */
.portrait-orbit { transition: opacity .8s ease, filter .8s ease !important; will-change: transform; }
.hero-portrait-wrap.is-live .portrait-orbit { opacity: 1; filter: brightness(1.35) saturate(1.25) drop-shadow(0 0 26px rgba(141,27,55,.55)) drop-shadow(0 0 60px rgba(169,32,66,.25)); }
.pm-wall { position: absolute; left: -20%; top: -20%; width: 140%; height: 140%; z-index: 1; pointer-events: none; }
.portrait-link .hero-cutout { z-index: 2; }
.portrait-link .pm-sheen, .portrait-link .pm-scan { z-index: 3; }
.portrait-link .pm-cta { z-index: 4; }
.portrait-link:hover .hero-portrait, .portrait-link:focus-visible .hero-portrait {
  --hole: 170%; opacity: 0; transform: translateY(-8px) scale(1.04); filter: blur(5px) saturate(.8);
}
.portrait-link .hero-portrait { transition: --hole 1.05s cubic-bezier(.25,.6,.2,1), opacity 1s ease .15s, filter .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); }

/* ===== Live greeting / clock line ===== */
.tod-line { font-variant-numeric: tabular-nums; }
.tod-line i { font-style: normal; opacity: .5; padding: 0 2px; }
.tod { font-weight: 800; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tod[data-part="morning"] { background-image: linear-gradient(100deg, #902234, #a8273d 50%, #b92b43); }
.tod[data-part="afternoon"] { background-image: linear-gradient(100deg, #982437, #961c3b 55%, #a92042); }
.tod[data-part="evening"] { background-image: linear-gradient(100deg, #74162d, #8e1b38 55%, #a21f40); }
.hero-brief p:first-child { color: var(--muted); }

/* ===== Get to know me: subdued dropdown with vapor in/out ===== */
.getknow { margin: 6px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.getknow summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px; cursor: pointer; list-style: none; color: #76162e; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.getknow summary::-webkit-details-marker { display: none; }
.gk-label span { display: inline-block; transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease, opacity .5s ease, color .3s ease; transition-delay: calc(var(--i) * 18ms); }
.getknow summary:hover .gk-label span, .getknow summary:focus-visible .gk-label span { transform: translateY(-3px); filter: blur(1.2px); opacity: .55; color: #671429; }
.getknow summary:hover .gk-label span:nth-child(odd) { transform: translateY(-1px); filter: blur(.4px); opacity: .85; }
.gk-icon { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.gk-icon::before, .gk-icon::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: var(--gold); transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.gk-icon::after { transform: rotate(90deg); }
.getknow.is-in .gk-icon::after { transform: rotate(0deg); opacity: 0; }
.getknow summary:hover .gk-icon::before { box-shadow: 0 0 10px rgba(169,32,66,.6); }
.gk-body { padding: 2px 2px 16px; }
.about-block .gk-body p:not(.eyebrow):not(.category-line) { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; opacity: 0; filter: blur(6px); transform: translateY(8px) scale(.98); transition: opacity .55s ease, filter .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 45ms); }
.getknow.is-in .gk-body p { opacity: 1 !important; filter: blur(0) !important; transform: none !important; }
.getknow.is-out .gk-body p { opacity: 0 !important; filter: blur(7px) !important; transform: translateY(-12px) scale(1.04) !important; transition-delay: calc((10 - var(--i)) * 25ms) !important; }
.gk-body p:last-child { margin-top: 6px !important; color: #651328 !important; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .about-block .gk-body p { transition: opacity .2s ease; filter: none !important; transform: none !important; } .gk-label span { transition: none; } }

/* ===== One card per campaign + vapor carousel ===== */
.campaign-list { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px; align-items: stretch !important; }
.campaign { display: flex !important; flex-direction: column; gap: 12px !important; padding: 14px !important; }
.campaign-head { display: block !important; min-height: 74px; }
.campaign-head h3 { font-size: 15px !important; margin: 0 0 4px !important; line-height: 1.25; }
.campaign-head p { margin: 0 0 4px !important; font-size: 11.5px !important; line-height: 1.35; }
.campaign-head .campaign-handle { font-size: 11px; }
.campaign-head .campaign-note { display: inline-block; margin: 6px 0 0 !important; font-size: 9px; }
.campaign .campaign-clips { position: relative; display: block !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
.campaign .clip { display: none; flex: none !important; max-width: none !important; }
.campaign .clip.is-active { display: flex; }
.campaign .clip.is-enter .clip-thumb img { animation: clip-condense .6s cubic-bezier(.2,.7,.2,1) both; }
.campaign .clip.is-enter .clip-thumb::after { animation: clip-sweep 1s cubic-bezier(.4,0,.2,1) .1s 1 both; }
.campaign .clip.is-leave .clip-thumb img { transition: opacity .42s ease, filter .42s ease, transform .42s ease; opacity: 0; filter: blur(8px) brightness(1.3); transform: translateX(10px) scale(1.04); }
.campaign .clip.is-enter .clip-title, .campaign .clip.is-enter .clip-meta { animation: clip-condense-text .55s ease .1s both; }
@keyframes clip-condense { from { opacity: 0; filter: blur(10px) brightness(1.4); transform: translateX(-8px) scale(.97); } to { opacity: 1; filter: none; transform: none; } }
@keyframes clip-condense-text { from { opacity: 0; filter: blur(4px); transform: translateY(4px); } to { opacity: 1; filter: none; transform: none; } }
.clip-vapor { position: absolute; left: -12%; top: -8%; width: 124%; z-index: 6; pointer-events: none; }
.campaign-ctrl { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 2px; }
.campaign-count { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.campaign-count b { color: #651328; }
.slide-next { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(169,32,66,.45); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(130,25,51,.25), rgba(242,224,227,.9) 70%); color: #601226; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease; }
.slide-next svg { width: 14px; height: 14px; position: relative; z-index: 2; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.slide-next::before { content: ""; position: absolute; inset: 0; z-index: 1; padding: 1.5px; border-radius: 50%; background: conic-gradient(from var(--ring), transparent 0 55%, rgba(130,25,51,.95) 70%, #631327 76%, rgba(152,29,60,.95) 82%, transparent 92%); -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000000 0 0) content-box exclude, linear-gradient(#000000 0 0); opacity: 0; transition: opacity .3s ease; }
.slide-next::after { content: ""; position: absolute; inset: -30%; z-index: 1; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.35) 50%, transparent 62%); transform: translateX(-80%); }
.slide-next:hover, .slide-next:focus-visible { transform: scale(1.08); border-color: transparent; box-shadow: 0 0 0 4px rgba(169,32,66,.12), 0 0 18px rgba(152,29,60,.45), 0 0 30px rgba(130,25,51,.3); outline: none; }
.slide-next:hover::before, .slide-next:focus-visible::before { opacity: 1; animation: clip-ring 2.2s linear infinite; }
.slide-next:hover::after, .slide-next:focus-visible::after { animation: clip-sweep .9s ease 1 both; }
.slide-next:hover svg { transform: translateX(2px); }
.campaign-dots { display: flex; gap: 4px; }
.campaign-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(97,18,38,.18); transition: background .3s ease, box-shadow .3s ease; }
.campaign-dots i.on { background: #981d3c; box-shadow: 0 0 8px rgba(152,29,60,.7); }
@media (max-width: 1150px) { .campaign-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 900px) { .campaign-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) {
  .campaign-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .campaign { padding: 10px !important; border-radius: 14px; }
  .campaign-head { min-height: 64px; }
  .campaign-head h3 { font-size: 13px !important; }
  .campaign .campaign-clips { display: block !important; overflow: visible !important; scroll-snap-type: none !important; }
  .campaign .clip { flex: none !important; }
  .slide-next { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .campaign .clip.is-enter .clip-thumb img, .campaign .clip.is-enter .clip-title, .campaign .clip.is-enter .clip-meta { animation: none; } }

/* ===== Headshot v5: soft edges + no-wall variant ===== */
@property --edge { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
/* orb image: round, misty falloff instead of square edges */
.portrait-orbit {
  -webkit-mask-image: radial-gradient(closest-side, #000000 70%, rgba(0,0,0,.6) 87%, transparent 100%) !important;
  mask-image: radial-gradient(closest-side, #000000 70%, rgba(0,0,0,.6) 87%, transparent 100%) !important;
  -webkit-mask-composite: source-over !important; mask-composite: add !important;
}
/* photo: straight edges feather away quickly on hover while the wall vaporizes */
.portrait-link .hero-portrait {
  --edge: 0%;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), transparent var(--hole), #000000 calc(var(--hole) + 22%)),
    linear-gradient(to right, transparent 0%, #000000 var(--edge), #000000 calc(100% - var(--edge)), transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000000 var(--edge), #000000 calc(100% - var(--edge)), transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image: radial-gradient(circle at var(--mx) var(--my), transparent var(--hole), #000000 calc(var(--hole) + 22%)),
    linear-gradient(to right, transparent 0%, #000000 var(--edge), #000000 calc(100% - var(--edge)), transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000000 var(--edge), #000000 calc(100% - var(--edge)), transparent 100%);
  mask-composite: intersect;
  transition: --hole 1.05s cubic-bezier(.25,.6,.2,1), --edge .28s ease-out, opacity 1s ease .15s, filter .9s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.portrait-link:hover .hero-portrait, .portrait-link:focus-visible .hero-portrait { --edge: 22%; }
.portrait-link:hover .portrait-card, .portrait-link:focus-visible .portrait-card { transition: transform .12s linear, box-shadow .25s ease, background .25s ease; }

/* test variant: wall already removed */
.hero-portrait-wrap[data-wall="off"] .hero-portrait { opacity: 0 !important; }
.hero-portrait-wrap[data-wall="off"] .portrait-card { box-shadow: none !important; background: transparent !important; overflow: visible !important; }
.hero-portrait-wrap[data-wall="off"] .hero-cutout { filter: drop-shadow(0 0 1px rgba(99,19,39,.4)) drop-shadow(0 0 14px rgba(169,32,66,.35)) drop-shadow(0 0 30px rgba(130,25,51,.25)); }
.hero-portrait-wrap[data-wall="off"] .portrait-orbit { opacity: .95; }

/* Hero intro: three-tier typography */
.hero-brief { margin: 2px 0 18px; }
.hero-brief .hb-name { margin: 0 0 2px; color: #611226; font-size: clamp(18px, 1.9vw, 21px); font-weight: 600; letter-spacing: -.005em; line-height: 1.35; }
.hero-brief .hb-line { max-width: none; margin: 0 0 10px; color: var(--muted); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; }
.hero-brief .hb-more { margin: 0; }
.hero-brief .hb-more .hero-link { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.hero-brief .hb-more .hero-link span { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.hero-brief .hb-more .hero-link:hover { text-decoration: none; color: #681429; }
.hero-brief .hb-more .hero-link:hover span { transform: translateY(3px); }

/* Spinning orb corners must never create sideways scroll */
html, body { overflow-x: clip; }
.hero { overflow-x: clip; }

/* Hover card for videos without public numbers */
.clip-creative .cs-kind { max-width: 92%; font-family: var(--head); font-weight: 400; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.2; color: #ffffff; text-shadow: 0 0 18px rgba(169,32,66,.55); }
.clip-creative .cs-label { margin-top: 6px; }
.clip-creative .cs-watch { margin-top: 14px; padding: 5px 11px; border: 1px solid rgba(152,29,60,.5); border-radius: 999px; color: #601226; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.clip:hover .clip-creative .cs-kind { animation: cs-condense .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes cs-condense { from { opacity: 0; filter: blur(6px); transform: translateY(4px); } to { opacity: 1; filter: none; transform: none; } }
.clip-creative .cs-label { font-size: 9px; letter-spacing: .14em; line-height: 1.4; max-width: 90%; }
.clip-creative .cs-watch { margin-top: 10px; padding: 4px 10px; white-space: nowrap; font-size: 9px; letter-spacing: .14em; }
@media (max-width: 640px) { .clip-creative .cs-kind { font-size: 14px; } .clip-creative .cs-watch { display: none; } .clip-creative { padding-bottom: 40px; } }
.tod[data-part="dawn"] { background-image: linear-gradient(100deg, #8e1b38 0%, #8e1b38 45%, #a8273d 100%); }

/* Brand logo badges on campaign cards */
.campaign-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.campaign-brand h3 { margin: 0 !important; }
.brand-logo { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; object-fit: cover; background: #f2e2e5; border: 1px solid rgba(97,18,38,.12); box-shadow: 0 0 12px rgba(130,25,51,.12); }
.brand-logo--contain { object-fit: contain; padding: 4px; }
.brand-logo--mono { display: grid; place-items: center; color: #671429; font-family: var(--head); font-size: 10px; letter-spacing: .04em; background: linear-gradient(135deg, rgba(169,32,66,.35), rgba(130,25,51,.3)); }
.campaign:hover .brand-logo { border-color: var(--glow-edge); box-shadow: 0 0 16px rgba(169,32,66,.3); }

/* Creating on: platform icons */
.platforms { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.platform-icons { display: inline-flex; gap: 6px; }
.platform { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(97,18,38,.12); border-radius: 50%; color: #76162e; background: rgba(255,255,255,.03); transition: color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease; }
.platform svg { width: 14px; height: 14px; }
a.platform:hover, a.platform:focus-visible { color: #ffffff; border-color: var(--glow-hover-edge); box-shadow: 0 0 14px rgba(169,32,66,.35); transform: translateY(-1px); outline: none; }

/* Speaker toggle (header + footer) */
.sound-toggle .spk-off { display: none; }
.sound-toggle.is-off .spk-on { display: none; }
.sound-toggle.is-off .spk-off { display: inline; }
.sound-toggle .eq { display: none; position: absolute; right: 4px; bottom: 5px; gap: 1.5px; align-items: flex-end; height: 8px; }
.sound-toggle.is-music .eq { display: inline-flex; }
.sound-toggle .eq i { width: 2px; height: 3px; border-radius: 1px; background: #981d3c; box-shadow: 0 0 4px rgba(152,29,60,.8); animation: eq-bar .9s ease-in-out infinite; }
.sound-toggle .eq i:nth-child(2) { animation-delay: .2s; } .sound-toggle .eq i:nth-child(3) { animation-delay: .45s; }
@keyframes eq-bar { 0%, 100% { height: 2px; } 50% { height: 8px; } }
.sound-toggle.is-music { border-color: rgba(152,29,60,.55) !important; box-shadow: 0 0 14px rgba(169,32,66,.3); }
.socials .s-sound { position: relative; }
.footer-sound { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.footer-sound svg { width: 14px; height: 14px; }
.footer-sound .eq { position: static; margin-left: 2px; }
@media (max-width: 420px) { .socials .s-sound { display: grid; } }

/* ===== Explore my work: glass pill with glowing border ===== */
.hero-actions { margin: 6px 0 22px; }
.cta-explore { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 7px 7px 7px 22px; border-radius: 999px; color: #601226; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, rgba(239,217,221,.9), rgba(242,224,227,.92)); box-shadow: 0 10px 28px -12px rgba(0,0,0,0.16), 0 0 22px rgba(130,25,51,.18), inset 0 1px rgba(255,255,255,.08);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.cta-explore::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1.2px; border-radius: inherit; background: linear-gradient(110deg, rgba(169,32,66,.85), rgba(130,25,51,.9) 55%, rgba(169,32,66,.6));
  -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000000 0 0) content-box exclude, linear-gradient(#000000 0 0); }
.cta-explore::after { content: ""; position: absolute; inset: -40%; z-index: -1; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%); transform: translateX(-70%); }
.cta-orb { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #ffffff; background: radial-gradient(circle at 35% 30%, #77172f, #971d3b 55%, #a92042 120%); box-shadow: 0 0 14px rgba(130,25,51,.55); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.cta-orb svg { width: 15px; height: 15px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.cta-explore:hover, .cta-explore:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(0,0,0,0.17), 0 0 30px rgba(169,32,66,.3), 0 0 46px rgba(130,25,51,.22), inset 0 1px rgba(255,255,255,.1); outline: none; }
.cta-explore:hover::after, .cta-explore:focus-visible::after { animation: clip-sweep 1s cubic-bezier(.4,0,.2,1) 1 both; }
.cta-explore:hover .cta-orb { transform: scale(1.06); box-shadow: 0 0 22px rgba(152,29,60,.6); }
.cta-explore:hover .cta-orb svg { transform: translateY(3px); }
@media (max-width: 640px) { .cta-explore { font-size: 12px; padding-left: 18px; } .cta-orb { width: 30px; height: 30px; } }
.tod-line, .tod-line .tod { text-transform: uppercase; letter-spacing: .16em; }

/* ===== Explore button v2: slim pill + living mini orb (matches the headshot) ===== */
.cta-explore { gap: 11px !important; padding: 5px 16px 5px 5px !important; font-size: 11.5px !important; letter-spacing: .14em !important; overflow: visible !important;
  background: rgba(241,223,226,.72) !important; box-shadow: 0 0 0 1px rgba(169,32,66,.34), 0 0 16px rgba(169,32,66,.12) !important; }
.cta-explore::before { padding: 1px !important; opacity: 0; background: conic-gradient(from var(--ring), transparent 0 60%, rgba(130,25,51,.9) 72%, rgba(99,19,39,.9) 77%, rgba(152,29,60,.9) 83%, transparent 93%) !important; transition: opacity .3s ease; }
.cta-explore::after { display: none; }
.cta-explore .cta-orb { position: relative; width: 30px !important; height: 30px !important; overflow: hidden; background: #f3e2e5 !important; box-shadow: 0 0 0 1px rgba(130,25,51,.35), 0 0 12px rgba(130,25,51,.25) !important; }
.cta-explore .cta-orb img { position: absolute; inset: -40%; width: 180%; height: 180%; object-fit: cover; opacity: .85;
  -webkit-mask-image: radial-gradient(closest-side, #000000 60%, transparent 100%); mask-image: radial-gradient(closest-side, #000000 60%, transparent 100%);
  animation: cta-spin 24s linear infinite; transition: filter .5s ease, opacity .5s ease; }
@keyframes cta-spin { to { transform: rotate(360deg); } }
.cta-explore .cta-arrow { width: 14px; height: 14px; color: var(--gold); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.cta-vapor { position: absolute; left: -24px; top: -40px; width: calc(100% + 48px); height: calc(100% + 64px); pointer-events: none; z-index: 2; }
.cta-explore:hover, .cta-explore:focus-visible { transform: translateY(-1px) !important; box-shadow: 0 0 0 1px rgba(152,29,60,.5), 0 0 24px rgba(169,32,66,.28), 0 0 40px rgba(130,25,51,.18) !important; }
.cta-explore:hover::before, .cta-explore:focus-visible::before { opacity: 1; animation: clip-ring 2.6s linear infinite; }
.cta-explore:hover .cta-orb img, .cta-explore:focus-visible .cta-orb img { animation-duration: 6s; opacity: 1; filter: brightness(1.45) saturate(1.3) drop-shadow(0 0 6px rgba(141,27,55,.9)); }
.cta-explore:hover .cta-orb, .cta-explore:focus-visible .cta-orb { box-shadow: 0 0 0 1px rgba(152,29,60,.55), 0 0 18px rgba(141,27,55,.55) !important; transform: none !important; }
.cta-explore:hover .cta-arrow { transform: translateY(3px); }
.cta-explore:hover .cta-orb svg { transform: none; }
@media (prefers-reduced-motion: reduce) { .cta-explore .cta-orb img { animation: none; } }

/* Explore button v3: true logo orb + borderless mystical vapor */
.hero { overflow: visible; }
.cta-explore .cta-orb { width: 32px !important; height: 32px !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; }
.cta-explore .cta-orb img { inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 50%; opacity: 1;
  -webkit-mask-image: radial-gradient(closest-side, #000000 86%, transparent 100%) !important; mask-image: radial-gradient(closest-side, #000000 86%, transparent 100%) !important;
  filter: drop-shadow(0 0 5px rgba(146,28,57,.55)); animation-duration: 30s; }
.cta-explore:hover .cta-orb img, .cta-explore:focus-visible .cta-orb img { animation-duration: 8s; filter: brightness(1.35) saturate(1.25) drop-shadow(0 0 8px rgba(141,27,55,.95)) drop-shadow(0 0 16px rgba(169,32,66,.45)); }
.cta-explore:hover .cta-orb, .cta-explore:focus-visible .cta-orb { box-shadow: none !important; }
.cta-vapor { left: -80px !important; top: -60px !important; width: calc(100% + 160px) !important; height: calc(100% + 120px) !important;
  -webkit-mask-image: radial-gradient(closest-side, #000000 50%, rgba(0,0,0,.5) 75%, transparent 100%); mask-image: radial-gradient(closest-side, #000000 50%, rgba(0,0,0,.5) 75%, transparent 100%); }
.hero-brief .hb-line { margin-bottom: 4px; }
.hero-brief .hb-value { margin: 0 0 12px; color: #651328; font-size: clamp(15px, 1.5vw, 17px); font-weight: 600; line-height: 1.5; }

/* ===== Footer: matching wordmark + icon row (slightly smaller) ===== */
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.site-footer .wordmark--footer { display: inline-grid; font-size: 15px; letter-spacing: .15em; line-height: 1.15; text-decoration: none; }
.site-footer .wordmark--footer:hover .wm-real .c, .site-footer .wordmark--footer:focus-visible .wm-real .c {
  opacity: 0; filter: blur(6px); transform: translate(calc((var(--i) - 6) * 1.4px), calc(-9px - var(--i) * .5px)) scale(1.22) rotate(calc((var(--i) - 6) * 2deg)); }
.site-footer .wordmark--footer:hover .wm-alt .c, .site-footer .wordmark--footer:focus-visible .wm-alt .c { opacity: 1; filter: blur(0); transform: none; transition-delay: calc(220ms + var(--i) * 30ms); }
.socials--footer { gap: 5px; }
.socials--footer .social { width: 30px; height: 30px; }
.socials--footer .social svg { width: 15px; height: 15px; }
.socials--footer .social::after { top: auto; bottom: calc(100% + 8px); transform: translate(-50%, 3px); }
.socials--footer .social:hover::after, .socials--footer .social:focus-visible::after { transform: translate(-50%, 0); }
@media (hover: none) { .site-footer .wordmark--footer:hover .wm-real .c { opacity: 1; filter: none; transform: none; } .site-footer .wordmark--footer:hover .wm-alt .c { opacity: 0; } }
@media (max-width: 640px) {
  .site-footer { flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 24px; }
  .socials--footer { flex-wrap: wrap; gap: 4px; }
  .socials--footer .s-sp, .socials--footer .s-bs { display: grid; }
  .socials--footer .social { width: 30px; height: 30px; border-color: rgba(97,18,38,.1); background: rgba(255,255,255,.025); }
  .socials--footer .social::after { display: none; }
}

/* Headline lockup: "portfolio" stacked under "creator" */
#hero-title { display: flex; align-items: flex-start; gap: .28em; }
#hero-title .h1-stack { display: inline-flex; flex-direction: column; align-items: flex-start; }
#hero-title .h1-creator { color: var(--purple); line-height: 1.02; }
#hero-title .h1-sub { margin-top: .32em; color: #7b4553; font-family: var(--body); font-size: .26em; font-weight: 700; letter-spacing: .62em; line-height: 1; text-transform: uppercase; padding-left: .12em; }
@media (max-width: 640px) { #hero-title .h1-sub { font-size: .3em; letter-spacing: .5em; } }

/* Header lockup: name + title */
.brand-lockup { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand-tag { display: inline-flex; align-items: center; gap: 16px; color: #7b4553; font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; white-space: nowrap; }
.brand-tag i { width: 1px; height: 22px; background: linear-gradient(180deg, transparent, rgba(119,23,47,.55), transparent); box-shadow: 0 0 8px rgba(130,25,51,.35); }
#hero-title { display: block; }
#hero-title span { color: var(--purple); }
@media (max-width: 900px) { .brand-tag { font-size: 9.5px; letter-spacing: .26em; gap: 12px; } .brand-lockup { gap: 12px; } }
@media (max-width: 640px) {
  .brand-lockup { flex-direction: column; align-items: flex-start; gap: 4px; }
  .brand-tag { font-size: 8.5px; letter-spacing: .3em; }
  .brand-tag i { display: none; }
}
.brand-lockup .wordmark { white-space: nowrap; flex: none; }
.brand-lockup .wordmark .w { white-space: nowrap; }

/* ===== Kind words (testimonials page) ===== */
.kw-hero { padding: 56px 0 30px; }
.kw-hero h1 { margin-bottom: 12px; }
.kw-hero h1 span { color: var(--purple); }
.kw-sub { color: var(--muted); font-size: clamp(15px, 1.5vw, 17px); margin: 0; }
.kw-back { display: inline-flex; gap: 8px; margin-bottom: 26px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-decoration: none; transition: color .25s ease; }
.kw-back:hover, .kw-back:focus-visible { color: var(--om-violet); }
.kw-feature, .kw-card {
  position: relative; border: 1px solid var(--glow-edge); border-radius: 22px;
  background: radial-gradient(120% 90% at 0% 0%, rgba(130,25,51,.07), transparent 60%), rgba(241,223,226,.72);
  box-shadow: 0 0 0 1px rgba(169,32,66,.06), 0 0 22px var(--glow-soft), var(--float-shadow);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.kw-feature:hover, .kw-card:hover, .kw-card:focus-within {
  transform: translateY(-3px); border-color: var(--glow-hover-edge);
  box-shadow: 0 0 0 1px rgba(152,29,60,.12), 0 0 32px var(--glow-hover-soft), 0 30px 60px -20px rgba(0,0,0,0.16);
}
.kw-feature { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(22px, 4vw, 48px); align-items: center; padding: clamp(16px, 2.4vw, 26px); margin-bottom: 28px; }
.kw-video { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 9 / 16; background: #f6f2e9;
  box-shadow: 0 0 0 1px rgba(119,23,47,.22), 0 0 28px rgba(130,25,51,.18); }
.kw-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.kw-video::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, transparent 70%, rgba(241,221,225,.45)); }
.kw-feature-copy .eyebrow { margin-bottom: 14px; }
.kw-pull { margin: 0 0 14px; color: #621327; font-family: var(--head); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.45; letter-spacing: .005em; }
.kw-pull--big { font-size: clamp(21px, 2.6vw, 30px); line-height: 1.3; color: #601226; text-shadow: 0 0 24px rgba(130,25,51,.18); }
.kw-context { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.kw-wall { columns: 2 340px; column-gap: 22px; }
.kw-card { break-inside: avoid; display: block; padding: 24px 24px 20px; margin: 0 0 22px; }
.kw-photo { margin: -8px -8px 18px; border-radius: 14px; overflow: hidden; aspect-ratio: 20 / 9; }
.kw-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.02); transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.kw-card:hover .kw-photo img { transform: scale(1.035); filter: saturate(1) contrast(1.04); }
.kw-full p { margin: 0 0 10px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.kw-full--open { margin-bottom: 4px; }
.kw-more { margin: 0 0 14px; }
.kw-more summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--om-violet); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.kw-more summary::-webkit-details-marker { display: none; }
.kw-more summary::after { content: "+"; font-size: 15px; transition: transform .3s ease; }
.kw-more[open] summary::after { transform: rotate(45deg); }
.kw-more[open] .kw-full { margin-top: 12px; animation: kwIn .6s ease both; }
@keyframes kwIn { from { opacity: 0; filter: blur(6px); transform: translateY(-4px); } to { opacity: 1; filter: none; transform: none; } }
.kw-who { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(97,18,38,.07); }
.kw-who > span:not(.kw-stars):not(.kw-avatar) { display: grid; gap: 2px; min-width: 0; }
.kw-who b { color: #651328; font-size: 14.5px; font-weight: 600; }
.kw-who small { color: var(--muted); font-size: 12.5px; }
.kw-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(119,23,47,.35), 0 0 14px rgba(130,25,51,.2); }
.kw-avatar--mono { display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, rgba(119,23,47,.3), rgba(197,38,77,.6)); color: #5f1225; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.kw-stars { margin-left: auto; display: inline-flex; gap: 2px; }
.kw-stars svg { width: 13px; height: 13px; fill: var(--om-violet); filter: drop-shadow(0 0 4px rgba(130,25,51,.45)); }
.kw-cta { display: grid; justify-items: center; gap: 18px; padding: 40px 0 70px; text-align: center; }
.kw-cta > p { margin: 0; color: #651328; font-family: var(--head); font-size: clamp(16px, 1.8vw, 20px); }
.kw-cta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.kw-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(119,23,47,.45); background: rgba(130,25,51,.12); color: #601226; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; box-shadow: 0 0 18px rgba(130,25,51,.16); transition: box-shadow .3s ease, border-color .3s ease, background .3s ease, transform .3s ease; }
.kw-btn:hover, .kw-btn:focus-visible { border-color: rgba(110,21,43,.8); background: rgba(130,25,51,.2); box-shadow: 0 0 28px rgba(130,25,51,.32); transform: translateY(-1px); }
.kw-btn--ghost { background: transparent; border-color: rgba(97,18,38,.18); box-shadow: none; }
.kw-cta .kw-back { margin: 6px 0 0; }
@media (max-width: 720px) {
  .kw-hero { padding: 36px 0 22px; }
  .kw-feature { grid-template-columns: 1fr; }
  .kw-video { max-width: 230px; width: 100%; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .kw-feature, .kw-card, .kw-photo img { transition: none; } .kw-feature:hover, .kw-card:hover { transform: none; } .kw-more[open] .kw-full { animation: none; } }

/* Hero + footer links into Kind words */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.kw-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: color .25s ease, text-shadow .25s ease; }
.kw-link span { transition: transform .3s ease; }
.kw-link:hover, .kw-link:focus-visible { color: var(--om-violet); text-shadow: 0 0 14px rgba(130,25,51,.35); }
.kw-link:hover span { transform: translateX(3px); }

/* Campaign jump links as brand logos */
.campaign-nav--logos { gap: 10px; margin: -4px 0 28px; }
.campaign-nav--logos a { position: relative; padding: 0; border: 0; background: none; border-radius: 12px; flex: 0 0 auto; }
.campaign-nav--logos .cn-logo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; object-fit: cover; background: #f2e2e5; border: 1px solid rgba(97,18,38,.12); box-shadow: 0 0 12px rgba(130,25,51,.1); filter: saturate(.85); transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease, filter .3s ease; }
.campaign-nav--logos .cn-logo--contain { object-fit: contain; padding: 6px; }
.campaign-nav--logos .cn-logo--mono { color: #671429; font-family: var(--head); font-size: 11px; letter-spacing: .04em; background: linear-gradient(135deg, rgba(169,32,66,.35), rgba(130,25,51,.3)); }
.campaign-nav--logos .cn-logo--top { background: radial-gradient(circle at 35% 30%, rgba(119,23,47,.35), rgba(239,217,221,.9)); }
.campaign-nav--logos .cn-logo--top svg { width: 20px; height: 20px; fill: #671428; filter: drop-shadow(0 0 6px rgba(130,25,51,.6)); }
.campaign-nav--logos a:hover .cn-logo, .campaign-nav--logos a:focus-visible .cn-logo { transform: translateY(-2px); filter: none; border-color: var(--glow-hover-edge); box-shadow: 0 0 18px rgba(152,29,60,.3); }
.campaign-nav--logos a::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); transform: translate(-50%, -3px); padding: 4px 9px; border-radius: 8px; background: rgba(241,223,226,.94); border: 1px solid rgba(119,23,47,.3); color: #651328; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 5; }
.campaign-nav--logos a:hover::after, .campaign-nav--logos a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) { .campaign-nav--logos { padding-top: 2px; padding-bottom: 30px; margin-bottom: -2px; } .campaign-nav--logos .cn-logo { width: 38px; height: 38px; } }
@media (hover: none) { .campaign-nav--logos a::after { display: none; } }

/* Live sets & studio strip (Beyond UGC) */
.live-strip { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(243,238,225,.45); transition: border-color .35s ease, background .35s ease; }
.live-strip:hover { border-color: var(--glow-edge); background: rgba(243,238,225,.7); }
.live-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.live-head .beyond-link { margin: 0; text-decoration: none; }
.live-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; }
.live-shot { position: relative; margin: 0; height: 150px; border-radius: 12px; overflow: hidden; background: #f2e2e5; }
.live-shot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.7) brightness(.75); transform: scale(1.01); transition: filter .5s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.live-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(242,225,228,.78)); box-shadow: inset 0 0 0 1px rgba(119,23,47,.12); border-radius: inherit; transition: box-shadow .4s ease; }
.live-shot figcaption { position: absolute; left: 10px; bottom: 8px; z-index: 1; color: #6c152a; font-size: 11px; font-weight: 600; letter-spacing: .06em; opacity: .85; }
.live-shot:hover img { filter: none; transform: scale(1.05); }
.live-shot:hover::after { box-shadow: inset 0 0 0 1px rgba(152,29,60,.45), inset 0 0 24px rgba(130,25,51,.18); }
@media (max-width: 900px) {
  .live-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px 4px; }
  .live-shot { flex: 0 0 62%; scroll-snap-align: start; height: 150px; }
  .live-shot--wide { flex-basis: 84%; }
}
@media (hover: none) { .live-shot img { filter: grayscale(.3) brightness(.9); } }
@media (prefers-reduced-motion: reduce) { .live-shot img { transition: none; } }

/* v6: on hover the cutout's square shoulders mist out into a circle that matches the orb */
@property --vr { syntax: '<percentage>'; inherits: false; initial-value: 150%; }
.portrait-link .hero-cutout {
  --vr: 150%;
  -webkit-mask-image: radial-gradient(ellipse var(--vr) calc(var(--vr) * .88) at 50% 40%, #000000 34%, rgba(0,0,0,.78) 48%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.14) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--vr) calc(var(--vr) * .88) at 50% 40%, #000000 34%, rgba(0,0,0,.78) 48%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.14) 82%, transparent 100%);
  transition: --vr 1.3s cubic-bezier(.25,.6,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease;
}
.portrait-link:hover .hero-cutout, .portrait-link:focus-visible .hero-cutout { --vr: 60%; }
/* soft violet halo behind the head so the circle reads as one shape */
.portrait-link .portrait-card::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: 118%; aspect-ratio: 1; z-index: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.85); border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(130,25,51,.22), rgba(169,32,66,.10) 55%, transparent 100%);
  filter: blur(14px); transition: opacity .9s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.portrait-link:hover .portrait-card::before, .portrait-link:focus-visible .portrait-card::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) { .portrait-link .hero-cutout { -webkit-mask-image: none; mask-image: none; } }
@media (prefers-reduced-motion: reduce) { .portrait-link .hero-cutout { transition: none; } }

/* Live & studio filmstrip v2: two groups in one swipeable row */
.live-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000000 18px, #000000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000000 18px, #000000 calc(100% - 40px), transparent 100%); }
.live-row::-webkit-scrollbar { display: none; }
.live-shot { flex: 0 0 200px; height: 150px; scroll-snap-align: start; }
.live-shot--wide { flex-basis: 320px; }
.live-group { flex: 0 0 auto; align-self: stretch; display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); padding: 0 2px; color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; border-left: 1px solid rgba(119,23,47,.25); }
.live-group:not(:first-child) { margin-left: 8px; }
@media (max-width: 900px) { .live-shot { flex-basis: 62%; } .live-shot--wide { flex-basis: 84%; } }
.live-ctrl { display: inline-flex; align-items: center; gap: 6px; }
.live-nav { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(97,18,38,.14); border-radius: 50%; background: rgba(241,223,226,.6); color: #71152c; font-size: 16px; line-height: 1; cursor: pointer; transition: border-color .25s ease, box-shadow .25s ease, color .25s ease; }
.live-nav:hover, .live-nav:focus-visible { border-color: var(--glow-hover-edge); color: #ffffff; box-shadow: 0 0 14px rgba(130,25,51,.3); }
.live-ctrl .beyond-link { margin-left: 6px; }
@media (hover: none) { .live-nav { display: none; } }

/* v7: no square edges while the wall dissolves — photo, glow and card all fade in a circle */
@property --pv { syntax: '<percentage>'; inherits: false; initial-value: 160%; }
.portrait-link .hero-portrait {
  --pv: 160%;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), transparent var(--hole), #000000 calc(var(--hole) + 22%)),
    radial-gradient(ellipse var(--pv) calc(var(--pv) * .88) at 50% 44%, #000000 38%, rgba(0,0,0,.6) 58%, rgba(0,0,0,.2) 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle at var(--mx) var(--my), transparent var(--hole), #000000 calc(var(--hole) + 22%)),
    radial-gradient(ellipse var(--pv) calc(var(--pv) * .88) at 50% 44%, #000000 38%, rgba(0,0,0,.6) 58%, rgba(0,0,0,.2) 80%, transparent 100%);
  mask-composite: intersect;
  transition: --hole 1.05s cubic-bezier(.25,.6,.2,1), --pv .55s cubic-bezier(.3,.7,.2,1), opacity 1s ease .15s, filter .9s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.portrait-link:hover .hero-portrait, .portrait-link:focus-visible .hero-portrait { --pv: 58%; }
.portrait-link:hover .portrait-card, .portrait-link:focus-visible .portrait-card { box-shadow: none !important; transition: transform .12s linear, box-shadow .12s ease, background .12s ease; }
@media (hover: none) { .portrait-link .hero-portrait { -webkit-mask-image: none; mask-image: none; } }
/* v7b: shoulders mist out at the same pace as the wall, starting from the bottom edge */
.portrait-link .hero-cutout { transition: --vr .6s cubic-bezier(.3,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; }
.portrait-link:hover .hero-cutout, .portrait-link:focus-visible .hero-cutout {
  -webkit-mask-image: radial-gradient(ellipse var(--vr) calc(var(--vr) * .88) at 50% 40%, #000000 34%, rgba(0,0,0,.78) 48%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.14) 82%, transparent 100%), linear-gradient(to top, transparent 0, #000000 22%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse var(--vr) calc(var(--vr) * .88) at 50% 40%, #000000 34%, rgba(0,0,0,.78) 48%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.14) 82%, transparent 100%), linear-gradient(to top, transparent 0, #000000 22%);
  mask-composite: intersect;
}
/* v7c: scan becomes a soft glow band, masked round so it never draws a hard line */
.pm-scan { background: linear-gradient(180deg, transparent 0%, transparent 36%, rgba(130,25,51,.10) 44%, rgba(126,24,49,.22) 50%, rgba(130,25,51,.10) 56%, transparent 64%) !important; background-size: 100% 220% !important; filter: blur(3px);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, #000000 30%, transparent 78%); mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, #000000 30%, transparent 78%); }
/* photo: bottom and side edges fade the instant the pointer arrives */
.portrait-link:hover .hero-portrait, .portrait-link:focus-visible .hero-portrait {
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), transparent var(--hole), #000000 calc(var(--hole) + 22%)),
    radial-gradient(ellipse var(--pv) calc(var(--pv) * .88) at 50% 44%, #000000 38%, rgba(0,0,0,.6) 58%, rgba(0,0,0,.2) 80%, transparent 100%),
    radial-gradient(ellipse 62% 57% at 50% 42%, #000000 46%, rgba(0,0,0,.5) 72%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image: radial-gradient(circle at var(--mx) var(--my), transparent var(--hole), #000000 calc(var(--hole) + 22%)),
    radial-gradient(ellipse var(--pv) calc(var(--pv) * .88) at 50% 44%, #000000 38%, rgba(0,0,0,.6) 58%, rgba(0,0,0,.2) 80%, transparent 100%),
    radial-gradient(ellipse 62% 57% at 50% 42%, #000000 46%, rgba(0,0,0,.5) 72%, transparent 100%);
  mask-composite: intersect;
}
.portrait-link:hover .hero-cutout, .portrait-link:focus-visible .hero-cutout {
  -webkit-mask-image: radial-gradient(ellipse var(--vr) calc(var(--vr) * .88) at 50% 40%, #000000 34%, rgba(0,0,0,.78) 48%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.14) 82%, transparent 100%), radial-gradient(ellipse 70% 64% at 50% 40%, #000000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--vr) calc(var(--vr) * .88) at 50% 40%, #000000 34%, rgba(0,0,0,.78) 48%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.14) 82%, transparent 100%), radial-gradient(ellipse 70% 64% at 50% 40%, #000000 52%, transparent 100%);
}
.portrait-link .pm-scan { display: none !important; }
.portrait-link:hover .hero-portrait, .portrait-link:focus-visible .hero-portrait { transition: --hole .9s cubic-bezier(.25,.6,.2,1), --pv .45s cubic-bezier(.3,.7,.2,1), opacity .45s ease, filter .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); }

/* hero intro: one consistent text size, top to bottom */
.hero-brief .hb-line, .hero-brief .hb-value, .hero-brief .hb-more .hero-link { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; }
.hero-brief .hb-more .hero-link { font-weight: 600; letter-spacing: 0; text-transform: none; }

/* header title matches the name: same face, size and tracking */
.brand-tag { font-family: var(--head); font-weight: 400; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: .16em; line-height: 1.15; color: #7b4553; }
.brand-tag i { height: 1.3em; }
@media (max-width: 900px) { .brand-tag { font-size: clamp(15px, 1.9vw, 17px); letter-spacing: .14em; } .site-header .wordmark--spotify { font-size: clamp(15px, 1.9vw, 17px); letter-spacing: .14em; } }
@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; row-gap: 10px; padding: 12px 0; }
  .brand-lockup { flex-direction: row; align-items: center; gap: 10px; width: 100%; flex-wrap: wrap; row-gap: 2px; }
  .site-header .wordmark--spotify, .brand-tag { font-size: 13.5px; letter-spacing: .11em; }
  .brand-tag i { display: block; height: 1.1em; }
  .site-header > .socials { width: 100%; justify-content: space-between; }
}
@media (max-width: 400px) { .site-header .wordmark--spotify, .brand-tag { font-size: 12.5px; letter-spacing: .09em; } }
@media (max-width: 640px) { .brand-lockup { flex-direction: column; align-items: flex-start; gap: 3px; } .brand-tag i { display: none; } .brand-tag { gap: 0; } }
@media (max-width: 1100px) { .brand-lockup { flex-direction: column; align-items: flex-start; gap: 3px; } .brand-tag i { display: none; } .brand-tag { gap: 0; } .site-header { min-height: 84px; } }

/* Beyond UGC: images show full colour, and mist into muted tones on hover */
.beyond-card img, .live-shot img { filter: none; }
.beyond-card:hover img, .beyond-card:focus-visible img, .live-shot:hover img { filter: grayscale(.7) brightness(.75); }
@media (hover: none) { .beyond-card img, .live-shot img { filter: none; } }

/* Media kit chip: same glass, hairline and travelling light ring as the Client reviews button; condenses out of the mist */
.pm-cta { bottom: 9%; gap: 8px; padding: 7px 15px 7px 11px; border: 0; isolation: isolate;
  background: rgba(241,223,226,.66); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(169,32,66,.34), 0 0 18px rgba(130,25,51,.22), 0 8px 22px -10px rgba(0,0,0,0.14);
  color: #601226; font-size: 10.5px; letter-spacing: .16em;
  opacity: 0; filter: blur(6px); transform: translate(-50%, 12px) scale(.96);
  transition: opacity .6s ease .35s, filter .7s ease .35s, transform .8s cubic-bezier(.2,.7,.2,1) .35s, box-shadow .4s ease; }
.pm-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--ring), transparent 0 60%, rgba(130,25,51,.9) 72%, rgba(99,19,39,.9) 77%, rgba(152,29,60,.9) 83%, transparent 93%);
  -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000000 0 0) content-box exclude, linear-gradient(#000000 0 0);
  animation: clip-ring 4.5s linear infinite; opacity: .85; }
.pm-cta::after { content: ""; position: absolute; inset: -10px -18px; z-index: -2; border-radius: 999px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(130,25,51,.28), rgba(169,32,66,.10) 60%, transparent 100%); filter: blur(6px); }
.pm-cta-ico { width: 13px; height: 13px; color: var(--gold); flex: none; filter: drop-shadow(0 0 4px rgba(130,25,51,.6)); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.pm-cta b { display: none; }
.portrait-link:hover .pm-cta, .portrait-link:focus-visible .pm-cta { opacity: 1; filter: none; transform: translate(-50%, 0) scale(1); }
.portrait-link:hover .pm-cta-ico { transform: translateY(1px); }
@media (hover: none) { .pm-cta { opacity: .95; filter: none; transform: translate(-50%, 0); font-size: 10px; padding: 6px 13px 6px 10px; bottom: 7%; } }
@media (prefers-reduced-motion: reduce) { .pm-cta, .pm-cta::before { transition: opacity .3s ease; animation: none; filter: none; } }

/* ===== Header system v2: balanced lockup, calmer type, airy icon rail ===== */
.site-header { min-height: 88px; gap: 32px; }
/* the name's box follows the visible name, not the wider hover text */
.brand-lockup .wordmark--spotify { position: relative; display: inline-block; }
.brand-lockup .wordmark--spotify .wm-alt { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; }
.brand-lockup { gap: 18px; }
.site-header .wordmark--spotify, .brand-tag { font-size: clamp(15px, 1.25vw, 18px); letter-spacing: .18em; line-height: 1.2; }
.brand-tag { gap: 18px; color: rgba(118,22,46,.78); }
.brand-tag i { width: 1px; height: 1.05em; background: linear-gradient(180deg, transparent, rgba(119,23,47,.7), transparent); box-shadow: 0 0 10px rgba(130,25,51,.45); }
/* icon rail */
.site-header > .socials { gap: 8px; }
.site-header .socials .social { width: 36px; height: 36px; border-color: rgba(97,18,38,.12); background: rgba(255,255,255,.03); }
.site-header .socials .social svg { width: 16px; height: 16px; }
.soc-sep { width: 1px; height: 18px; margin: 0 6px; background: linear-gradient(180deg, transparent, rgba(97,18,38,.22), transparent); flex: none; }
.socials--footer .soc-sep { height: 16px; margin: 0 4px; }
/* stacked lockup between tablet and small laptop */
@media (max-width: 1100px) {
  .site-header { min-height: 92px; }
  .site-header .wordmark--spotify, .brand-tag { font-size: 16px; letter-spacing: .16em; }
  .brand-lockup { gap: 4px; }
  .site-header .socials .social { width: 34px; height: 34px; }
}
/* phones: name + title stacked, icon rail on its own evenly spaced row */
@media (max-width: 640px) {
  .site-header { padding: 14px 0 10px; row-gap: 12px; min-height: 0; }
  .site-header .wordmark--spotify, .brand-tag { font-size: 14px; letter-spacing: .12em; }
  .brand-lockup { gap: 4px; }
  .site-header > .socials { gap: 0; justify-content: space-between; }
  .site-header .socials .social { width: 34px; height: 34px; border-color: rgba(97,18,38,.1); background: rgba(255,255,255,.025); }
  .site-header .socials .social svg { width: 16px; height: 16px; }
  .soc-sep { margin: 0 2px; height: 16px; }
}
@media (max-width: 380px) { .site-header .wordmark--spotify, .brand-tag { font-size: 13px; letter-spacing: .1em; } .site-header .socials .social { width: 31px; height: 31px; } }
.brand-lockup .wordmark--spotify .wm-alt { top: 50%; transform: translateY(-50%); }

/* title vaporizes into MUSIC PRODUCTION in sync with the name */
.bt-stack { position: relative; display: inline-block; }
.bt-layer .w { display: inline-block; white-space: nowrap; }
.bt-layer .c { display: inline-block; will-change: transform, opacity, filter; }
.bt-alt { position: absolute; left: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none; }
.bt-real .c { transition: opacity .55s ease, filter .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(60ms + var(--i) * 18ms); }
.bt-alt .c { color: #6e152b; text-shadow: 0 0 12px rgba(130,25,51,.45); opacity: 0; filter: blur(7px); transform: translateY(7px) scale(.86); transition: opacity .5s ease, filter .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 20ms); }
.brand-lockup:has(.wordmark--spotify:hover) .bt-real .c, .brand-lockup:has(.wordmark--spotify:focus-visible) .bt-real .c {
  opacity: 0; filter: blur(6px); transform: translate(calc((var(--i) - 10) * 1.2px), calc(-10px - var(--i) * .4px)) scale(1.2) rotate(calc((var(--i) - 10) * 1.5deg)); }
.brand-lockup:has(.wordmark--spotify:hover) .bt-alt .c, .brand-lockup:has(.wordmark--spotify:focus-visible) .bt-alt .c {
  opacity: 1; filter: none; transform: none; transition-delay: calc(300ms + var(--i) * 28ms); }
.brand-lockup:has(.wordmark--spotify:hover) .brand-tag i { box-shadow: 0 0 14px rgba(130,25,51,.8); }
@media (prefers-reduced-motion: reduce) { .bt-real .c, .bt-alt .c { transition: opacity .3s ease; transition-delay: 0s !important; filter: none; transform: none !important; } }
@media (hover: none) { .brand-lockup:has(.wordmark--spotify:hover) .bt-real .c { opacity: 1; filter: none; transform: none; } .brand-lockup:has(.wordmark--spotify:hover) .bt-alt .c { opacity: 0; } }

/* Kind words strip: social proof between the work and the contact card */
.kind-strip { padding: 8px 0 34px; }
.ks-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.ks-head .eyebrow { margin-bottom: 8px; }
.ks-head h2 { margin: 0; font-size: clamp(20px, 2.2vw, 26px); color: #76162e; }
.ks-link { display: inline-flex; gap: 6px; color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.ks-link span { transition: transform .3s ease; } .ks-link:hover span { transform: translateX(3px); }
.ks-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ks-quote { position: relative; margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px 22px 18px; border: 1px solid var(--glow-edge); border-radius: 18px;
  background: radial-gradient(120% 90% at 0% 0%, rgba(130,25,51,.07), transparent 60%), rgba(241,223,226,.7);
  box-shadow: 0 0 0 1px rgba(169,32,66,.06), 0 0 22px var(--glow-soft), var(--float-shadow); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.ks-quote::before { content: "“"; position: absolute; right: 18px; top: 4px; font-family: var(--head); font-size: 54px; line-height: 1; color: rgba(130,25,51,.18); pointer-events: none; }
.ks-quote:hover { transform: translateY(-3px); border-color: var(--glow-hover-edge); box-shadow: 0 0 0 1px rgba(152,29,60,.12), 0 0 30px var(--glow-hover-soft), 0 26px 50px -20px rgba(0,0,0,0.16); }
.ks-quote blockquote { margin: 0; color: #621327; font-family: var(--head); font-size: clamp(14px, 1.25vw, 16px); line-height: 1.5; }
.ks-quote figcaption { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(97,18,38,.07); }
.ks-quote figcaption img, .ks-mono { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(119,23,47,.35), 0 0 12px rgba(130,25,51,.2); }
.ks-quote figcaption > span:not(.ks-stars) { display: grid; gap: 1px; min-width: 0; }
.ks-quote b { color: #651328; font-size: 13.5px; font-weight: 600; }
.ks-quote small { color: var(--muted); font-size: 12px; }
.ks-stars { margin-left: auto; display: inline-flex; gap: 2px; }
.ks-stars svg { width: 11px; height: 11px; fill: var(--om-violet); filter: drop-shadow(0 0 3px rgba(130,25,51,.45)); }
@media (max-width: 900px) { .ks-row { grid-template-columns: 1fr; } .ks-quote blockquote { font-size: 15px; } }
@media (max-width: 640px) { .ks-head { align-items: start; flex-direction: column; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .ks-quote { transition: none; } .ks-quote:hover { transform: none; } }
@media (min-width: 1101px) {
  .brand-lockup .brand-tag { transition: transform .7s cubic-bezier(.2,.7,.2,1) .05s; }
  .brand-lockup:has(.wordmark--spotify:hover) .brand-tag, .brand-lockup:has(.wordmark--spotify:focus-visible) .brand-tag { transform: translateX(var(--wm-shift, 0px)); }
}
.kind-strip { padding: 44px 0 30px; } @media (max-width: 640px) { .kind-strip { padding: 34px 0 24px; } }

/* ===== alternate-name mode: live set + now playing, condensing out of the mist ===== */
@property --om { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.om-swap { position: absolute; inset: 0; z-index: 6; border-radius: inherit; overflow: hidden; pointer-events: none;
  opacity: 0; filter: blur(8px) saturate(.8); --om: 0%;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000000 var(--om), transparent calc(var(--om) + 34%));
  mask-image: radial-gradient(circle at 50% 42%, #000000 var(--om), transparent calc(var(--om) + 34%));
  transition: --om .9s cubic-bezier(.3,.7,.2,1), opacity .5s ease, filter .8s ease; }
.om-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transform: scale(1.06); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.om-swap::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, #9d1e3e 0%, #a92042 100%); mix-blend-mode: color; opacity: .72; }
.om-swap::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 85% at 50% 10%, transparent 45%, rgba(243,226,229,.6)), linear-gradient(180deg, transparent 60%, rgba(243,226,229,.55)); }
.om-mode .om-swap { opacity: 1; filter: none; --om: 120%; }
.om-mode .om-img { transform: scale(1); }
.om-mode .portrait-link .pm-cta { opacity: 0 !important; }
.om-mode .portrait-card { box-shadow: 0 0 0 1px rgba(130,25,51,.55), 0 0 40px rgba(130,25,51,.32), 0 0 90px rgba(169,32,66,.18), 0 30px 70px -24px rgba(0,0,0,0.16); }
.om-badge { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 14px;
  background: rgba(241,223,226,.66); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(169,32,66,.34), 0 0 18px rgba(130,25,51,.25); color: #601226;
  opacity: 0; transform: translateY(10px); filter: blur(4px); transition: opacity .5s ease .45s, transform .7s cubic-bezier(.2,.7,.2,1) .45s, filter .6s ease .45s; }
.om-mode .om-badge { opacity: 1; transform: none; filter: none; }
.om-badge img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(97,18,38,.12); }
.om-txt { display: grid; gap: 1px; min-width: 0; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6e152b; }
.om-txt small { color: #601226; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-eq { margin-left: auto; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.om-eq i { width: 3px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #681429, #821933); transform-origin: bottom; animation: om-eq 1s ease-in-out infinite; }
.om-eq i:nth-child(2) { animation-delay: -.3s; } .om-eq i:nth-child(3) { animation-delay: -.6s; } .om-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes om-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@media (max-width: 640px) { .om-badge { left: 8px; right: 8px; bottom: 8px; padding: 5px 10px 5px 5px; gap: 8px; } .om-badge img { width: 28px; height: 28px; } .om-txt { font-size: 8.5px; } .om-txt small { font-size: 10.5px; } }
@media (prefers-reduced-motion: reduce) { .om-swap, .om-badge, .om-img { transition: opacity .3s ease; filter: none; transform: none; } .om-eq i { animation: none; transform: scaleY(.6); } }

/* ===== New music: upcoming alternate-name releases ===== */
.releases { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(243,238,225,.45); transition: border-color .35s ease, background .35s ease; }
.releases:hover { border-color: var(--glow-edge); background: rgba(243,238,225,.7); }
.rel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rel-card { display: flex; gap: 18px; align-items: center; padding: 12px; border: 1px solid rgba(97,18,38,.08); border-radius: 14px; background: rgba(241,223,226,.55); color: inherit; text-decoration: none;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
a.rel-card:hover, a.rel-card:focus-visible, .rel-card--soon:hover { border-color: var(--glow-hover-edge); box-shadow: 0 0 26px var(--glow-hover-soft); transform: translateY(-2px); }
.rel-art { position: relative; flex: none; width: 168px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #f2e2e5; box-shadow: 0 0 0 1px rgba(119,23,47,.18), 0 14px 30px -14px rgba(0,0,0,0.16); }
.rel-art img, .rel-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }
.rel-art video { opacity: 0; }
.rel-card.is-playing .rel-art video { opacity: 1; }
.rel-card:hover .rel-art img { transform: scale(1.05); }
.rel-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -40px 50px -30px rgba(243,226,229,.55); }
.rel-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rel-copy strong { color: #601226; font-family: var(--head); font-weight: 400; font-size: clamp(15px, 1.4vw, 19px); letter-spacing: .04em; line-height: 1.25; }
.rel-copy > span:not(.beyond-kicker):not(.rel-cta) { color: var(--muted); font-size: 13px; }
.rel-cta { margin-top: 8px; align-self: flex-start; display: inline-flex; padding: 6px 13px; border-radius: 999px; background: rgba(130,25,51,.14); box-shadow: 0 0 0 1px rgba(119,23,47,.45); color: #611326; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: box-shadow .3s ease, background .3s ease; }
a.rel-card:hover .rel-cta { background: rgba(130,25,51,.24); box-shadow: 0 0 0 1px rgba(110,21,43,.8), 0 0 18px rgba(130,25,51,.35); }
.rel-cta--soon { background: transparent; box-shadow: 0 0 0 1px rgba(97,18,38,.16); color: var(--muted); }
@media (max-width: 900px) { .rel-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .rel-art { width: 112px; } .rel-card { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .rel-art img, .rel-art video, .rel-card { transition: none; } .rel-card:hover { transform: none; } }

/* ===== Header layout modes (chosen by measurement in JS) — never overlaps at any width ===== */
.site-header.hdr-row, .site-header.hdr-stack { flex-wrap: nowrap; }
.site-header.hdr-row > .socials, .site-header.hdr-stack > .socials { width: auto; justify-content: flex-end; flex: none; }
.site-header .brand-lockup { min-width: 0; }
.site-header.hdr-row .brand-lockup { flex-direction: row; align-items: center; gap: 18px; width: auto; }
.site-header.hdr-row .brand-tag { gap: 18px; } .site-header.hdr-row .brand-tag i { display: block; }
.site-header.hdr-stack .brand-lockup, .site-header.hdr-wrap .brand-lockup { flex-direction: column; align-items: flex-start; gap: 4px; }
.site-header.hdr-stack .brand-tag i, .site-header.hdr-wrap .brand-tag i { display: none; }
.site-header.hdr-stack .brand-tag, .site-header.hdr-wrap .brand-tag { gap: 0; }
.site-header.hdr-wrap { flex-wrap: wrap; row-gap: 12px; padding-top: 14px; padding-bottom: 10px; }
.site-header.hdr-wrap .brand-lockup { width: 100%; }
.site-header.hdr-wrap > .socials { width: 100%; justify-content: space-between; gap: 0; }
/* title only slides aside for OBSIDIAN MATRIX when the two sit inline */
.brand-lockup .brand-tag { transition: transform .7s cubic-bezier(.2,.7,.2,1) .05s; }
.site-header:not(.hdr-row) .brand-lockup .brand-tag { transform: none !important; }
.site-header.hdr-row .brand-lockup:has(.wordmark--spotify:hover) .brand-tag, .site-header.hdr-row .brand-lockup:has(.wordmark--spotify:focus-visible) .brand-tag { transform: translateX(var(--wm-shift, 0px)); }
/* in stacked modes, OBSIDIAN MATRIX can be wider than the name: keep it clear of the icons */
.site-header:not(.hdr-row) .brand-lockup .wordmark--spotify .wm-alt { max-width: none; }
/* fluid header type: scales continuously with the window, so layout changes happen once, in one direction */
.site-header .brand-lockup .wordmark--spotify, .site-header .brand-lockup .brand-tag { font-size: clamp(13px, calc(10.6px + .5vw), 18px) !important; letter-spacing: clamp(.1em, calc(.06em + .35vw), .18em) !important; }
.site-header.hdr-wrap > .socials { justify-content: flex-start; gap: 8px; }
@media (max-width: 480px) { .site-header.hdr-wrap > .socials { justify-content: space-between; gap: 0; } }

/* ===== Hero name: the first name vaporizes into the alternate name exactly like the header name ===== */
#hero-title .hn { position: relative; display: inline-block; white-space: nowrap; }
#hero-title .hn .c { display: inline-block; will-change: transform, opacity, filter; }
#hero-title .hn-real .c { color: var(--purple); transition: opacity .55s ease, filter .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 26ms); }
#hero-title .hn-alt { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; }
#hero-title .hn-alt .c { color: var(--om-violet); text-shadow: 0 0 18px rgba(130,25,51,.55), 0 0 42px rgba(130,25,51,.25); opacity: 0; filter: blur(9px); transform: translateY(.12em) scale(.86);
  transition: opacity .5s ease, filter .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 22ms); }
.om-mode #hero-title .hn-real .c { opacity: 0; filter: blur(8px); transform: translate(calc((var(--i) - 2) * .05em), calc(-.18em - var(--i) * .02em)) scale(1.25) rotate(calc((var(--i) - 2) * 3deg)); }
.om-mode #hero-title .hn-alt .c { opacity: 1; filter: blur(0); transform: none; transition-delay: calc(220ms + var(--i) * 30ms); }
@media (prefers-reduced-motion: reduce) { #hero-title .hn .c { transition: opacity .3s ease !important; transition-delay: 0s !important; filter: none !important; transform: none !important; } }

/* Get to know me v2: light, GPU-friendly stagger; height is animated in JS */
.about-block .gk-body p:not(.eyebrow):not(.category-line) { filter: none !important; opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .55s cubic-bezier(.22,.7,.2,1); transition-delay: calc(80ms + var(--i) * 32ms); will-change: opacity, transform; }
.getknow.is-in .gk-body p { opacity: 1 !important; transform: none !important; filter: none !important; }
.getknow.is-out .gk-body p { opacity: 0 !important; transform: translateY(-4px) !important; filter: none !important; transition: opacity .22s ease, transform .3s ease !important; transition-delay: 0s !important; }
/* label hover: gentle lift, no blur flicker */
.getknow summary:hover .gk-label span, .getknow summary:focus-visible .gk-label span { filter: none !important; opacity: .75; transform: translateY(-2px); }
.getknow summary:hover .gk-label span:nth-child(odd) { filter: none !important; opacity: .9; transform: translateY(-1px); }
.getknow .gk-body { box-sizing: border-box; }

/* ===== UGC <-> alternate-name page transitions ===== */
.om-leave main, .om-leave .site-footer { opacity: 0; filter: blur(10px); transform: translateY(-10px) scale(.99); transition: opacity .6s ease, filter .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.om-leave body::before { opacity: 1; }
body::before { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(70% 60% at 20% 10%, rgba(130,25,51,.22), transparent 60%), radial-gradient(60% 50% at 80% 70%, rgba(169,32,66,.12), transparent 65%); }
@keyframes om-arrive { from { opacity: 0; filter: blur(10px); transform: translateY(10px); } to { opacity: 1; filter: none; transform: none; } }
.om-arrive main, .om-arrive .site-footer { animation: om-arrive .8s cubic-bezier(.2,.7,.2,1) both; }
/* hover on the name: one soft violet shine sweeps the page */
body::after { content: ""; position: fixed; inset: -10% -40%; z-index: 49; pointer-events: none; opacity: 0;
  background: linear-gradient(110deg, transparent 38%, rgba(114,22,45,.07) 46%, rgba(94,18,37,.10) 50%, rgba(114,22,45,.07) 54%, transparent 62%); transform: translateX(-60%); }
@keyframes om-shine { 0% { opacity: 0; transform: translateX(-60%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }
.om-mode body::after { animation: om-shine 1.6s cubic-bezier(.4,.1,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .om-mode body::after { animation: none; } .om-arrive main, .om-arrive .site-footer { animation: none; } .om-leave main { transition: none; } }
/* Beyond UGC is now two cards (voice & book); music lives on the alternate-name page */
.beyond-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .beyond-grid { grid-template-columns: 1fr; } }

/* ===== alternate-name music page ===== */
.page-music .wordmark--om .wm-real .c { color: var(--om-violet); text-shadow: 0 0 14px rgba(130,25,51,.45); }
.page-music .wordmark--om .wm-alt .c { color: var(--name-red); text-shadow: 0 0 14px rgba(169,32,66,.35); }
.page-music .brand-tag .bt-real .c { color: #6e152b; }
.page-music .brand-tag .bt-alt .c { color: #7b4553; text-shadow: none; }
.mu-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); align-items: center; gap: clamp(28px, 6vw, 90px); padding: clamp(36px, 7vw, 90px) 0 clamp(30px, 5vw, 60px); }
.mu-copy .eyebrow { color: var(--om-violet); }
.mu-copy h1 { margin: 0 0 10px; font-size: clamp(40px, 6.4vw, 76px); line-height: 1.02; color: #601226; letter-spacing: -.01em; }
.mu-meta { margin: 0 0 22px; color: var(--muted); font-size: 15px; letter-spacing: .04em; } .mu-meta span { color: rgba(119,23,47,.6); margin: 0 4px; }
.mu-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.mu-btn { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px; background: rgba(130,25,51,.16); box-shadow: 0 0 0 1px rgba(119,23,47,.5), 0 0 18px rgba(130,25,51,.2); color: #601226; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: box-shadow .3s ease, background .3s ease, transform .3s ease; }
.mu-btn:hover, .mu-btn:focus-visible { background: rgba(130,25,51,.26); box-shadow: 0 0 0 1px rgba(106,20,42,.85), 0 0 26px rgba(130,25,51,.36); transform: translateY(-1px); }
.mu-btn--ghost { background: transparent; box-shadow: 0 0 0 1px rgba(97,18,38,.18); }
.mu-player { display: block; width: 100%; max-width: 460px; height: 80px; border: 0; border-radius: 12px; background: #f2e1e4; box-shadow: 0 0 0 1px rgba(119,23,47,.18); }
.mu-canvas-wrap { position: relative; display: grid; place-items: center; }
.mu-orb { position: absolute; width: 150%; max-width: none; opacity: .55; -webkit-mask-image: radial-gradient(closest-side, #000000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000000 62%, transparent 100%); animation: mu-spin 120s linear infinite; pointer-events: none; }
@keyframes mu-spin { to { transform: rotate(360deg); } }
.mu-canvas { position: relative; width: min(300px, 70vw); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #f2e2e5; box-shadow: 0 0 0 1px rgba(130,25,51,.45), 0 0 40px rgba(130,25,51,.28), 0 0 90px rgba(169,32,66,.14), 0 30px 70px -24px #000000; }
.mu-canvas video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-next, .mu-live { padding-bottom: 34px; }
.mu-next h2, .mu-live h2 { margin: 0 0 16px; font-size: clamp(20px, 2.2vw, 26px); color: #76162e; }
.mu-live .live-head h2 { margin: 0; font-size: clamp(16px, 1.6vw, 20px); }
.mu-live .live-strip { margin-top: 0; }
.mu-next .rel-art { width: 190px; }
.mu-next .rel-copy .beyond-kicker { color: var(--om-violet); }
@media (max-width: 760px) { .mu-hero { grid-template-columns: 1fr; } .mu-canvas-wrap { order: -1; } .mu-canvas { width: min(240px, 62vw); } .mu-next .rel-art { width: 120px; } }
@media (prefers-reduced-motion: reduce) { .mu-orb { animation: none; } }

/* fluid vapor replaces the flat shine */
.om-mode body::after { animation: none !important; opacity: 0 !important; }
.om-fluid { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 48; pointer-events: none; mix-blend-mode: multiply; }

/* ===== Music page v2: one track at a time ===== */
.mu-tracks { display: grid; }
.mu-track { grid-area: 1 / 1; opacity: 0; visibility: hidden; filter: blur(8px); transform: translateY(8px); transition: opacity .5s ease, filter .6s ease, transform .7s cubic-bezier(.2,.7,.2,1), visibility 0s linear .6s; }
.mu-track.is-on { opacity: 1; visibility: visible; filter: none; transform: none; transition-delay: .12s, .12s, .12s, 0s; }
.mu-track h1, .mu-track .mu-h { margin: 0 0 10px; font-family: var(--head); font-weight: 400; font-size: clamp(36px, 5.6vw, 68px); line-height: 1.04; color: #601226; letter-spacing: -.01em; }
.mu-btn--off { cursor: default; color: var(--muted); }
.mu-switch { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.mu-chip { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border: 0; border-radius: 999px; background: rgba(241,223,226,.6); box-shadow: 0 0 0 1px rgba(97,18,38,.12); color: var(--muted); font: 600 12px/1 var(--body); letter-spacing: .06em; cursor: pointer; transition: box-shadow .3s ease, color .3s ease, background .3s ease; }
.mu-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; filter: grayscale(.5) brightness(.85); transition: filter .3s ease; }
.mu-chip:hover { color: #651328; box-shadow: 0 0 0 1px rgba(119,23,47,.45); }
.mu-chip.is-on { color: #601226; background: rgba(130,25,51,.14); box-shadow: 0 0 0 1px rgba(119,23,47,.6), 0 0 18px rgba(130,25,51,.25); }
.mu-chip.is-on img, .mu-chip:hover img { filter: none; }
.mu-canvas .mu-cv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(10px) saturate(.8); transform: scale(1.04); transition: opacity .7s ease, filter .8s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.mu-canvas .mu-cv.is-on { opacity: 1; filter: none; transform: none; }
.mu-cv--soon { display: grid; place-items: end center; }
.mu-cv--soon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) brightness(.75); }
.mu-cv--soon span { position: relative; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px; background: rgba(241,223,226,.7); box-shadow: 0 0 0 1px rgba(97,18,38,.16); color: #651328; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (prefers-reduced-motion: reduce) { .mu-track, .mu-canvas .mu-cv { transition: opacity .2s ease; filter: none; transform: none; } }

/* ===== Music page v3: quiet. Words appear only when explored ===== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mu-stage { display: grid; justify-items: center; gap: 26px; padding: clamp(34px, 6vw, 80px) 0 clamp(28px, 4vw, 54px); }
.mu-quiet .mu-canvas { display: block; padding: 0; border: 0; cursor: pointer; width: min(320px, 70vw); font: inherit; color: inherit; }
.mu-quiet .mu-orb { width: 165%; }
.mu-canvas:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(106,20,42,.9), 0 0 40px rgba(130,25,51,.4), 0 30px 70px -24px #000000; }
.mu-cv--soon img { filter: brightness(.8); }
.mu-veil { position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; padding: 70px 20px 22px; text-align: left; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(243,227,229,.55) 40%, rgba(243,227,229,.88)); opacity: 0; transform: translateY(10px); filter: blur(6px);
  transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.mu-canvas:hover .mu-veil, .mu-canvas:focus-visible .mu-veil, .mu-canvas.is-open .mu-veil, .mu-canvas.is-peek .mu-veil { opacity: 1; transform: none; filter: none; }
.mu-info { grid-area: 1 / 1; display: grid; gap: 6px; opacity: 0; transition: opacity .5s ease; }
.mu-info.is-on { opacity: 1; transition-delay: .15s; }
.mu-info b { font: 400 clamp(17px, 2vw, 21px)/1.15 var(--head); color: #5e1225; letter-spacing: .01em; }
.mu-info i { font-style: italic; font-size: 14px; color: #6e152b; }
.mu-info small { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(101,19,40,.6); }
.mu-dock { display: grid; justify-items: center; gap: 16px; width: 100%; }
.mu-quiet .mu-switch { margin: 0; gap: 14px; justify-content: center; }
.mu-quiet .mu-chip { position: relative; padding: 3px; gap: 0; border-radius: 50%; }
.mu-quiet .mu-chip img { width: 42px; height: 42px; }
.mu-acts { display: grid; min-height: 46px; }
.mu-act-set { grid-area: 1 / 1; display: flex; justify-content: center; gap: 12px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s linear .5s; }
.mu-act-set.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }
.mu-ico { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #601226; text-decoration: none;
  background: rgba(130,25,51,.13); box-shadow: 0 0 0 1px rgba(119,23,47,.42), 0 0 18px rgba(130,25,51,.18); transition: box-shadow .35s ease, background .35s ease, transform .35s ease; }
.mu-ico svg { width: 19px; height: 19px; }
.mu-play svg { transform: translateX(1px); }
.mu-ico:hover, .mu-ico:focus-visible { outline: none; background: rgba(130,25,51,.24); box-shadow: 0 0 0 1px rgba(106,20,42,.85), 0 0 26px rgba(130,25,51,.36); transform: translateY(-1px); }
.mu-play[aria-expanded="true"] { background: rgba(169,32,66,.22); box-shadow: 0 0 0 1px rgba(152,29,60,.7), 0 0 24px rgba(169,32,66,.3); }
.mu-ico--sm { width: 34px; height: 34px; margin-left: 6px; } .mu-ico--sm svg { width: 15px; height: 15px; }
/* tooltips: a word surfaces only when asked for */
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 9px); z-index: 5; padding: 5px 10px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: rgba(242,224,227,.86); box-shadow: 0 0 0 1px rgba(119,23,47,.28); color: #651328; font: 600 10.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translate(-50%, -4px); filter: blur(4px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
[data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip].is-peek::after { opacity: 1; transform: translate(-50%, 0); filter: none; }
.live-ctrl [data-tip]::after { top: auto; bottom: calc(100% + 8px); }
.mu-drawer { width: min(460px, 100%); display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease; }
.mu-drawer.is-open { grid-template-rows: 1fr; opacity: 1; }
.mu-drawer > .mu-player { min-height: 0; max-width: none; }
.mu-quiet .mu-live .live-head { justify-content: flex-end; }
.mu-quiet .live-shot figcaption { opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .5s ease; }
.mu-quiet .live-shot:hover figcaption { opacity: .9; transform: none; }
@media (hover: none) { .mu-quiet .live-shot figcaption { opacity: .85; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mu-veil, .mu-act-set, [data-tip]::after, .mu-drawer { transition: opacity .2s ease; filter: none; transform: none; } }

/* ===== Golden rhythm: Fibonacci spacing (8·13·21·34·55·89·144) and φ proportions ===== */
:root { --f1: 8px; --f2: 13px; --f3: 21px; --f4: 34px; --f5: 55px; --f6: 89px; --f7: 144px; --phi: 1.618;
  --sec: clamp(var(--f6), 10vw, var(--f7)); }
/* hero: copy and portrait split at φ, centered on one axis */
.hero { min-height: 0; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--f5); align-items: center; padding-block: clamp(var(--f5), 6.2vw, var(--f6)) 0; }
.hero-copy { --h1: clamp(36px, 5vw, 72px); display: flex; flex-direction: column; align-items: flex-start; }
.hero-copy > * { margin: 0 !important; }
.hero-copy .tod-line { margin-bottom: var(--f2) !important; }
#hero-title { font-size: var(--h1); line-height: 1.08; margin-bottom: var(--f3) !important; }
.hero-brief { display: grid; gap: var(--f1); margin-bottom: var(--f4) !important; }
.hero-brief p { margin: 0 !important; font-size: max(15px, calc(var(--h1) / 4.236)); line-height: 1.618; }
.hero-brief .hb-more { margin-top: var(--f2) !important; }
.hero-actions { margin-bottom: var(--f3) !important; gap: var(--f2); }
.hero-portrait-wrap { min-height: 0; aspect-ratio: 1 / 1; align-self: center; }
@media (max-width: 900px) { .hero { gap: var(--f4); } }
@media (max-width: 640px) { .hero { grid-template-columns: 1fr; gap: var(--f4); padding-top: var(--f4); }
  .hero-portrait-wrap { aspect-ratio: auto; min-height: 290px; margin: 0; } }
/* sections: one breath between each, measured from the same scale */
.work-section { padding-top: var(--sec); }
.about-contact { padding-block: var(--sec) 0; gap: var(--f3); grid-template-columns: minmax(0, 1.618fr) minmax(280px, 1fr); }
.beyond { padding: var(--sec) 0 var(--sec); }
@media (max-width: 900px) { .about-contact { grid-template-columns: 1fr; } }
.section-heading { margin-bottom: var(--f4); gap: var(--f4); }
.section-heading .eyebrow, .about-block .eyebrow, .contact-card .eyebrow, .beyond .eyebrow { margin-bottom: var(--f2); }
.beyond h2 { margin-bottom: var(--f4); }
.beyond-grid { gap: var(--f3); }
.beyond .live-strip { margin-top: var(--f3); }
.about-block, .contact-card { padding: clamp(var(--f3), 4vw, var(--f4)); }
.about-block h2, .contact-card h2 { margin-bottom: var(--f2); }
.site-footer { padding-block: var(--f4); }
/* violet ray: a single beam of light between sections, brightest at the golden point */
.work-section, .about-contact, .beyond { position: relative; }
.work-section::before, .about-contact::before, .beyond::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--sec) * .382); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(130,25,51,.05) 12%, rgba(119,23,47,.55) 38.2%, rgba(169,32,66,.32) 61.8%, rgba(130,25,51,.05) 88%, transparent);
  box-shadow: 0 0 13px rgba(130,25,51,.35), 0 0 34px rgba(130,25,51,.14);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000000 21%, #000000 79%, transparent); mask-image: linear-gradient(90deg, transparent, #000000 21%, #000000 79%, transparent);
  opacity: .55; animation: ray-breathe 8s ease-in-out infinite; }
.about-contact::before { animation-delay: -2.7s; } .beyond::before { animation-delay: -5.3s; }
.about-contact::before { grid-column: 1 / -1; }
@keyframes ray-breathe { 0%, 100% { opacity: .38; filter: blur(.3px); } 50% { opacity: .8; filter: none; } }
@media (prefers-reduced-motion: reduce) { .work-section::before, .about-contact::before, .beyond::before { animation: none; } }
.beyond { padding-bottom: var(--f6); }

/* ===== Hero name v2: the first name → the alternate name with the electric orb as its O ===== */
#hero-title { position: relative; }
#hero-title .hi { display: inline; white-space: nowrap; }
#hero-title .hi .c { display: inline-block; transition: opacity .55s ease, filter .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 22ms); }
#hero-title .hn-alt { font-size: calc(1em * var(--hn-fit, 1)); left: var(--hn-x, 0px); top: auto; bottom: 0; transform: translateY(var(--hn-dy, 0px)); line-height: inherit; }
#hero-title .hn-bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.om-mode #hero-title.hn-full .hi .c { opacity: 0; filter: blur(8px); transform: translate(calc((var(--i) - 3) * .04em), calc(-.16em - var(--i) * .015em)) scale(1.2); }
#hero-title .hn-orb { position: relative; width: .8em; height: .8em; margin: 0 .025em 0 .01em; vertical-align: -.035em; border-radius: 50%; }
#hero-title .hn-orb img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; animation: orb-spin 14s linear infinite, orb-zap 3.2s steps(1, end) infinite; }
#hero-title .hn-orb::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 14%, rgba(111,21,44,.95) 17%, transparent 21% 47%, rgba(152,29,60,.85) 50%, transparent 54% 79%, rgba(119,23,47,.9) 82%, transparent 86%);
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000000 84%, transparent 100%); mask: radial-gradient(closest-side, transparent 78%, #000000 84%, transparent 100%);
  filter: blur(.6px) drop-shadow(0 0 6px rgba(130,25,51,.9)); animation: orb-spin 1.6s linear infinite reverse, orb-arc 2.3s ease-in-out infinite; }
#hero-title .hn-orb::after { content: ""; position: absolute; inset: -30%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(130,25,51,.42), rgba(169,32,66,.12) 60%, transparent); animation: orb-arc 2.3s ease-in-out infinite reverse; z-index: -1; }
#hero-title .hn-alt .hn-orb { text-shadow: none; }
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-arc { 0%, 100% { opacity: .45; } 40% { opacity: 1; } 55% { opacity: .6; } 62% { opacity: 1; } }
@keyframes orb-zap { 0%, 100% { filter: brightness(1.15) saturate(1.2) drop-shadow(0 0 6px rgba(141,27,55,.8)); } 46% { filter: brightness(1.9) saturate(1.5) drop-shadow(0 0 12px rgba(118,22,46,1)) drop-shadow(0 0 22px rgba(169,32,66,.6)); } 49% { filter: brightness(1.1) drop-shadow(0 0 5px rgba(141,27,55,.7)); } 52% { filter: brightness(1.7) drop-shadow(0 0 14px rgba(118,22,46,.95)); } 56% { filter: brightness(1.15) saturate(1.2) drop-shadow(0 0 6px rgba(141,27,55,.8)); } }
@media (prefers-reduced-motion: reduce) { #hero-title .hn-orb img, #hero-title .hn-orb::before, #hero-title .hn-orb::after { animation: none; } }

/* ===== Client reviews: sunk into the page ===== */
.cta-explore { color: #831933 !important; background: linear-gradient(180deg, rgba(243,227,230,.55), rgba(241,223,226,.35)) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.12), inset 0 -1px 0 rgba(255,255,255,.045), inset 0 0 0 1px rgba(130,25,51,.1), 0 1px 0 rgba(255,255,255,.035) !important;
  transition: box-shadow .5s ease, color .4s ease, background .5s ease !important; }
.cta-explore .cta-orb img { opacity: .72 !important; filter: saturate(.8) brightness(.9) !important; }
.cta-explore .cta-arrow { color: rgba(110,21,43,.55) !important; }
.cta-explore:hover, .cta-explore:focus-visible { transform: none !important; color: #641327 !important;
  box-shadow: inset 0 3px 9px rgba(0,0,0,0.14), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(119,23,47,.24), inset 0 0 18px rgba(130,25,51,.12), 0 1px 0 rgba(255,255,255,.04) !important; }
.cta-explore:hover::before, .cta-explore:focus-visible::before { opacity: .35 !important; }
.cta-explore:hover .cta-orb img, .cta-explore:focus-visible .cta-orb img { opacity: 1 !important; filter: brightness(1.2) saturate(1.1) drop-shadow(0 0 6px rgba(141,27,55,.7)) !important; }
.cta-explore:active { box-shadow: inset 0 4px 12px rgba(0,0,0,0.16), inset 0 0 0 1px rgba(119,23,47,.2) !important; }

/* ===== "since" line ===== */
.section-heading { align-items: baseline; }
.section-heading .since { margin: 0; color: var(--muted); font-size: 13px; letter-spacing: .04em; }
@media (max-width: 640px) { .section-heading { flex-wrap: wrap; gap: var(--f1) var(--f4); } }

/* ===== Campaign logos at play ===== */
.cn-play a { touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: grab; }
.cn-play a.is-grab .cn-logo { transform: scale(1.1); box-shadow: 0 0 0 1px rgba(119,23,47,.6), 0 0 20px rgba(130,25,51,.4); }
.cn-play a.is-away { visibility: hidden; }
.cn-play a .cn-logo { transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .35s ease, filter .35s ease, border-color .3s ease, box-shadow .3s ease; }
.cn-play a.is-poof .cn-logo { opacity: 0; filter: blur(8px) brightness(1.6); transform: scale(1.45); transition-duration: .32s; }
.cn-twin { position: fixed !important; z-index: 60; margin: 0 !important; padding: 0 !important; display: block !important; pointer-events: none; cursor: grabbing; will-change: transform; }
.cn-twin .cn-logo { filter: none !important; box-shadow: 0 18px 30px -10px rgba(0,0,0,0.16), 0 0 24px rgba(130,25,51,.45) !important; border-color: rgba(119,23,47,.55) !important; }
.cn-twin::after { display: none !important; }
/* surprise layer */
.cn-fx { position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 12px; overflow: hidden; pointer-events: none; z-index: 2; background: #f2e2e5; animation: fx-in .35s ease both; }
.cn-play a.fx-on .cn-logo { opacity: 0; }
.cn-play a.fx-out .cn-fx { animation: fx-out .42s ease both; }
.cn-play a.fx-out .cn-logo { opacity: 1; }
@media (max-width: 640px) { .cn-fx { width: 38px; height: 38px; } }
@keyframes fx-in { from { opacity: 0; filter: blur(6px); transform: scale(.8); } }
@keyframes fx-out { to { opacity: 0; filter: blur(8px); transform: scale(1.3); } }
/* Pure Poker: ace of spades + ace of hearts */
.cn-fx--cards { overflow: visible; background: none; }
.cn-card { position: absolute; left: 50%; top: 50%; width: 26px; height: 36px; margin: -18px 0 0 -13px; border-radius: 4px; background: linear-gradient(160deg, #ffffff, #621326); box-shadow: 0 4px 10px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.03);
  color: #f6f2e9; transform: rotate(var(--r)) translateX(calc(var(--r) * .55px)); animation: card-deal .55s cubic-bezier(.2,.9,.3,1.3) both; }
.cn-card.is-red { color: #d0213a; animation-delay: .08s; }
.cn-card b { position: absolute; left: 3px; top: 1px; font: 800 9px/1 var(--body); }
.cn-card i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 17px; }
@keyframes card-deal { from { transform: rotate(0) translateY(10px) scale(.4); opacity: 0; } }
/* wink + smile */
.cn-fx--polsia svg { width: 100%; height: 100%; display: block; }
.pz-eye--l { transform-origin: 47px 52px; animation: pz-wink 2.4s ease both; }
.pz-wave { animation: pz-out 2.4s ease both; } .pz-smile { opacity: 0; animation: pz-in 2.4s ease both; }
@keyframes pz-wink { 0%, 22% { transform: none; } 30%, 52% { transform: scaleY(.08); } 60%, 100% { transform: none; } }
@keyframes pz-out { 0%, 18% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes pz-in { 0%, 18% { opacity: 0; } 32%, 100% { opacity: 1; } }
/* Capafy: center spins fast, settles in 3s */
.cn-spin, .cn-press, .cn-roll { position: absolute; inset: 0; background: center / cover no-repeat; }
.cn-spin { animation: cap-spin 3s cubic-bezier(.12,.75,.25,1) both; }
@keyframes cap-spin { to { transform: rotate(2160deg); } }
/* TapCook: the finger presses */
.cn-press { animation: tap-press 1.6s ease both; }
.cn-ripple { position: absolute; left: 56%; top: 46%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.85); opacity: 0; animation: tap-ring 1.6s ease-out both; }
.cn-ripple--2 { animation-delay: .5s; }
@keyframes tap-press { 0%, 100% { transform: none; } 15% { transform: translate(-1px, 2px) scale(.9); } 28% { transform: none; } 45% { transform: translate(-1px, 2px) scale(.9); } 58% { transform: none; } }
@keyframes tap-ring { 0%, 12% { opacity: 0; transform: scale(.4); } 16% { opacity: 1; } 50% { opacity: 0; transform: scale(3.4); } 100% { opacity: 0; } }
/* easymix: an equalizer wave */
.cn-fx--eq { background: #f2e2e5; }
.cn-eq { position: absolute; inset: 6px; background: center / contain no-repeat; clip-path: inset(0 calc(100% - (var(--k) + 1) * 100% / var(--n)) 0 calc(var(--k) * 100% / var(--n)));
  transform-origin: 50% 50%; animation: eq-bar .42s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -70ms); }
@keyframes eq-bar { from { transform: scaleY(.35); filter: drop-shadow(0 0 0 rgba(130,25,51,0)); } to { transform: scaleY(1.25); filter: drop-shadow(0 0 4px rgba(130,25,51,.9)); } }
/* MadeThis: bulges out in 3D, into mist */
.cn-fx--3d { overflow: visible; background: none; perspective: 120px; }
.cn-cube { position: absolute; inset: 0; border-radius: 12px; background: center / cover no-repeat;
  clip-path: inset(calc(var(--k) / 3 * 33.34%) calc(100% - (var(--k) % 3 + 1) * 33.34%) calc(100% - (var(--k) / 3 + 1) * 33.34%) calc(var(--k) % 3 * 33.34%)); animation: mt-bulge 1.6s cubic-bezier(.3,.7,.2,1) both; }
@keyframes mt-bulge { 0% { transform: none; } 35% { transform: translateZ(28px) scale(1.1); filter: none; opacity: 1; } 100% { transform: translateZ(70px) scale(1.4) rotateX(18deg); filter: blur(7px) brightness(1.6); opacity: 0; } }
/* ClaimHunter: silver shimmer */
.cn-silver { position: absolute; inset: 0; display: grid; place-items: center; font: 400 11px/1 var(--head); letter-spacing: .04em; color: #f4f0e4;
  background: linear-gradient(115deg, #c1b2ab, #611326 32%, #8d4f5f 46%, #ffffff 58%, #9f897e 72%, #681429); background-size: 260% 100%; animation: ch-silver 1.4s ease-in-out infinite; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
@keyframes ch-silver { from { background-position: 100% 0; } to { background-position: -60% 0; } }
/* Ancestral Supplements: evergreen */
.cn-fx--green { background: #f2e2e5; box-shadow: 0 0 22px rgba(31,122,77,.55); }
.cn-evergreen { position: absolute; inset: 6px; background: linear-gradient(160deg, #3fae74, #1f7a4d 55%, #0b4f30); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  filter: drop-shadow(0 0 4px rgba(63,174,116,.8)); animation: evg-pulse .9s ease-in-out 3 alternate; }
@keyframes evg-pulse { to { transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(63,174,116,1)); } }
/* Triips: rolls away and back */
.cn-roll { border-radius: 50%; animation: tr-roll 1.6s cubic-bezier(.4,0,.2,1) both; }
@keyframes tr-roll { 30% { transform: translateX(14px) rotate(200deg); } 60% { transform: translateX(-10px) rotate(-60deg); } 100% { transform: none; } }
/* Top performer: a star burst */
.cn-fx > .cn-star { position: absolute; inset: 11px; width: 20px; height: 20px; fill: #5e1225; filter: drop-shadow(0 0 8px rgba(130,25,51,1)); animation: st-pop 2s cubic-bezier(.2,.8,.2,1.2) both; }
.cn-fx { background: radial-gradient(circle at 35% 30%, rgba(119,23,47,.35), rgba(239,217,221,.95)); }
.cn-fx--cards, .cn-fx--3d { background: none !important; }
.cn-fx--eq, .cn-fx--green, .cn-fx--polsia { background: #f2e2e5; }
.cn-burst { position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(99,19,39,.8), transparent 20%, rgba(152,29,60,.7) 40%, transparent 55%, rgba(130,25,51,.8) 75%, transparent); animation: st-burst 2s ease-out both; }
@keyframes st-pop { 0% { transform: scale(.6); } 25% { transform: scale(1.35) rotate(144deg); } 100% { transform: rotate(216deg); } }
@keyframes st-burst { 0% { opacity: 0; transform: scale(.4) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4) rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .cn-fx *, .cn-fx { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }
#hero-title .hi, #hero-title .hi .c { color: inherit; }
#hero-title .hn-orb { width: .86em; height: .86em; vertical-align: -.06em; }
@keyframes orb-zap { 0%, 100% { filter: brightness(1.8) saturate(1.35) drop-shadow(0 0 7px rgba(134,26,53,.95)); } 46% { filter: brightness(2.6) saturate(1.6) drop-shadow(0 0 14px rgba(114,22,45,1)) drop-shadow(0 0 26px rgba(169,32,66,.65)); } 49% { filter: brightness(1.6) drop-shadow(0 0 6px rgba(141,27,55,.8)); } 52% { filter: brightness(2.4) drop-shadow(0 0 16px rgba(114,22,45,1)); } 56% { filter: brightness(1.8) saturate(1.35) drop-shadow(0 0 7px rgba(134,26,53,.95)); } }
.cn-card { transform: rotate(var(--r)) translateX(calc(var(--r) * 1.15px)) translateY(calc(var(--r) * var(--r) * .02px)); }

/* ===== OM DJ photo: recessed into the page, like the reviews button ===== */
.om-mode .portrait-card { box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(130,25,51,.12), 0 0 30px rgba(130,25,51,.06) !important; transition: box-shadow .6s ease; }
.om-swap::after { box-shadow: inset 0 10px 24px rgba(0,0,0,0.144), inset 0 -2px 0 rgba(255,255,255,.04), inset 0 0 0 1px rgba(130,25,51,.16), inset 0 0 40px rgba(243,226,229,.55); border-radius: inherit; }
.om-mode .om-img { filter: saturate(.85) brightness(.88); }
/* Client reviews: calmer hover — soft mist only, no spinning ring or flash */
.cta-explore:hover::before, .cta-explore:focus-visible::before { opacity: 0 !important; animation: none !important; }
.cta-explore:hover .cta-orb img, .cta-explore:focus-visible .cta-orb img { filter: brightness(1.05) saturate(1) drop-shadow(0 0 4px rgba(141,27,55,.45)) !important; animation-duration: 14s !important; }
.cta-explore:hover, .cta-explore:focus-visible { color: #6d152b !important; }
.hero-brief .hb-more:first-child { margin-top: 0 !important; }

/* ===== Greeting wears the name's treatment: crimson Michroma letters that vaporize to violet ===== */
.tod.tod-name { display: inline-grid; vertical-align: baseline; background: none !important; -webkit-text-fill-color: currentColor; color: inherit; font-family: var(--head); font-weight: 400; letter-spacing: .14em; }
.tod-layer { grid-area: 1 / 1; white-space: nowrap; }
.tod-layer .c { display: inline-block; will-change: transform, opacity, filter; }
.tod-real .c { color: var(--name-red); -webkit-text-fill-color: var(--name-red); text-shadow: 0 0 18px rgba(169,32,66,.22); transition: opacity .55s ease, filter .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 26ms); }
.tod-alt .c { color: var(--om-violet); -webkit-text-fill-color: var(--om-violet); text-shadow: 0 0 14px rgba(130,25,51,.55), 0 0 30px rgba(130,25,51,.25); opacity: 0; filter: blur(7px); transform: translateY(7px) scale(.86); transition: opacity .5s ease, filter .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 22ms); }
.tod-line:hover .tod-real .c, .om-mode .tod-real .c { opacity: 0; filter: blur(6px); transform: translate(calc((var(--i) - 7) * 1.4px), calc(-9px - var(--i) * .5px)) scale(1.25) rotate(calc((var(--i) - 7) * 2deg)); }
.tod-line:hover .tod-alt .c, .om-mode .tod-alt .c { opacity: 1; filter: none; transform: none; transition-delay: calc(220ms + var(--i) * 30ms); }
@media (prefers-reduced-motion: reduce) { .tod-real .c, .tod-alt .c { transition: opacity .3s ease; transition-delay: 0s !important; filter: none; transform: none !important; } }
/* greeting keeps its time-of-day colors (per letter), with the name's font and vapor */
.tod-real .c { color: var(--tc, var(--name-red)); -webkit-text-fill-color: var(--tc, var(--name-red)); text-shadow: 0 0 16px color-mix(in srgb, var(--tc, #a92042) 28%, transparent); }

/* ===== Logo instrument & beat mode ===== */
.cn-play a.is-hit .cn-logo { animation: pad-hit .32s cubic-bezier(.2,.7,.2,1); }
@keyframes pad-hit { 0% { transform: scale(.9); box-shadow: 0 0 0 1px rgba(106,20,42,.9), 0 0 26px rgba(130,25,51,.7); filter: brightness(1.35); } 100% { transform: none; } }
.cn-kit { display: none; }
.cn-play.is-beat .cn-logo--top svg { display: none; }
.cn-play.is-beat .cn-kit { display: block; width: max-content; max-width: none; font: 400 10px/1 var(--head); letter-spacing: .04em; color: #5e1225; text-shadow: 0 0 8px rgba(130,25,51,.9); }
.cn-play.is-beat a .cn-logo { box-shadow: 0 0 0 1px rgba(119,23,47,.28), inset 0 -3px 6px rgba(0,0,0,0.07), 0 0 14px rgba(130,25,51,.16); }
.cn-play.is-beat .cn-logo--top { box-shadow: 0 0 0 1px rgba(106,20,42,.7), 0 0 18px rgba(130,25,51,.45); }
.cn-play.is-beat a { cursor: pointer; }
.cn-done { order: 99; display: none; align-self: center; margin-left: 4px; padding: 7px 13px; border: 0; border-radius: 999px; cursor: pointer; color: #831933; font: 700 10.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  background: rgba(243,227,230,.5); box-shadow: inset 0 2px 5px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(130,25,51,.18); }
.cn-done:hover, .cn-done:focus-visible { color: #601226; outline: none; box-shadow: inset 0 2px 6px rgba(0,0,0,0.14), inset 0 0 0 1px rgba(119,23,47,.4); }
.cn-play.is-beat .cn-done { display: inline-block; }
/* discovery hint */
.cn-hint { display: flex; align-items: center; gap: var(--f2); width: fit-content; max-width: 100%; margin: calc(var(--f3) * -1) 0 var(--f4); padding: 10px 10px 10px 14px; border-radius: 16px;
  background: rgba(242,224,227,.72); box-shadow: inset 0 0 0 1px rgba(119,23,47,.22), 0 12px 30px -14px rgba(0,0,0,0.16), 0 0 28px rgba(130,25,51,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(-6px); filter: blur(6px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.cn-hint.is-in { opacity: 1; transform: none; filter: none; }
.cn-hint-orb { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--orb-logo-bg, radial-gradient(circle at 40% 35%, #77172f, #eed8dc 70%)) center / cover; animation: orb-spin 10s linear infinite; filter: brightness(1.4) drop-shadow(0 0 6px rgba(130,25,51,.7)); }
.cn-hint-copy { display: grid; gap: 2px; font-size: 13px; color: var(--muted); } .cn-hint-copy b { color: #601226; font-weight: 700; }
.cn-hint-acts { display: flex; align-items: center; gap: 6px; }
.cn-hint-go { padding: 8px 13px; border: 0; border-radius: 999px; cursor: pointer; color: #601226; font: 700 10.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; background: rgba(130,25,51,.18); box-shadow: inset 0 0 0 1px rgba(119,23,47,.5); }
.cn-hint-go:hover, .cn-hint-go:focus-visible { background: rgba(130,25,51,.3); outline: none; }
.cn-hint-x { width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer; background: none; color: var(--muted); font-size: 12px; }
.cn-hint-x:hover { color: #601226; background: rgba(97,18,38,.06); }
@media (max-width: 640px) { .cn-hint { margin-top: calc(var(--f2) * -1); flex-wrap: wrap; } }
/* name: time-of-day colors, same as the greeting */
.wordmark--spotify:not(.wordmark--om) .wm-real .c { color: var(--tc, var(--name-red)); text-shadow: 0 0 18px color-mix(in srgb, var(--tc, #a92042) 24%, transparent); }

/* ===== Headshot: bottom edge and corners evaporate into mist ===== */
.portrait-card {
  -webkit-mask-image: linear-gradient(180deg, #000000 0, #000000 58%, rgba(0,0,0,.82) 70%, rgba(0,0,0,.42) 84%, rgba(0,0,0,.12) 93%, transparent 100%), radial-gradient(70% 104% at 50% 0%, #000000 62%, rgba(0,0,0,.45) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000000 0, #000000 58%, rgba(0,0,0,.82) 70%, rgba(0,0,0,.42) 84%, rgba(0,0,0,.12) 93%, transparent 100%), radial-gradient(70% 104% at 50% 0%, #000000 62%, rgba(0,0,0,.45) 82%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; box-shadow: none !important; }
.hero-portrait { border-bottom-color: transparent; }
.pm-cta { bottom: 24% !important; }
.om-badge { bottom: 22% !important; }
@media (max-width: 640px) { .om-badge { bottom: 20% !important; } }
/* drifting vapor where the photo dissolves */
.pm-mist { position: absolute; left: -18%; right: -18%; bottom: -12%; height: 46%; z-index: 3; pointer-events: none; mix-blend-mode: multiply; filter: blur(14px); }
.pm-mist i { position: absolute; bottom: 0; width: 62%; height: 78%; border-radius: 50%; opacity: .55;
  background: radial-gradient(closest-side, rgba(117,22,46,.34), rgba(130,25,51,.14) 55%, transparent); animation: pm-drift 14s ease-in-out infinite alternate; }
.pm-mist i:nth-child(1) { left: 0; animation-duration: 13s; }
.pm-mist i:nth-child(2) { left: 22%; height: 92%; opacity: .4; background: radial-gradient(closest-side, rgba(134,25,53,.26), rgba(169,32,66,.1) 55%, transparent); animation-duration: 17s; animation-delay: -6s; }
.pm-mist i:nth-child(3) { right: 0; animation-duration: 15s; animation-delay: -3s; }
@keyframes pm-drift { 0% { transform: translate(-6%, 6%) scale(1); opacity: .35; } 50% { opacity: .6; } 100% { transform: translate(8%, -10%) scale(1.18); opacity: .42; } }
.om-mode .pm-mist i { background: radial-gradient(closest-side, rgba(119,23,47,.36), rgba(157,30,62,.14) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .pm-mist i { animation: none; } }
/* "Creating on [icons] since Sept 2026" beside Campaigns */
.section-heading .since.platforms { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; align-self: center; }
.hero-copy > .hero-actions:last-child { margin-bottom: 0 !important; }

/* ===== Mist: click the greeting (plain fog drifting over the page, no glow) ===== */
.sky-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 47 !important; pointer-events: none; }
.tod-line { -webkit-user-select: none; user-select: none; cursor: pointer; border-radius: 8px; outline-offset: 6px; }

/* ===== Raised type: every line of text lifts off the page like the name and greeting ===== */
:where(h1, h2, h3, h4) { text-shadow: 0 1px 0 rgba(255,255,255,.035), 0 3px 6px rgba(0,0,0,0.1), 0 8px 22px rgba(0,0,0,0.06), 0 0 26px color-mix(in srgb, currentColor 16%, transparent); }
:where(p, li, a, span, figcaption, small, b, strong, em, i, button, label, time, blockquote, dt, dd, summary, cite) { text-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 3px 10px rgba(0,0,0,0.048), 0 0 14px color-mix(in srgb, currentColor 11%, transparent); }
/* gradient-clipped text keeps a clean fill */
#hero-title[data-part] span, .tod:not(.tod-name) { text-shadow: none; }
.cn-play.is-beat .cn-kit.is-long { font-size: 7.5px; letter-spacing: 0; }

/* ===== Music: where-to-listen CTA over the canvas (dynamic per track) ===== */
.mu-canvas-wrap { isolation: isolate; }
.mu-cta { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4; display: grid; pointer-events: none; }
.mu-cta-set { grid-area: 1 / 1; display: grid; justify-items: center; gap: 7px; padding: 10px 10px 9px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(243,227,229,.32), rgba(243,227,229,.58)); box-shadow: inset 0 0 0 1px rgba(119,23,47,.14), inset 0 2px 6px rgba(0,0,0,0.07);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  opacity: 0; visibility: hidden; transform: translateY(6px); filter: blur(4px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease, visibility 0s linear .55s; }
.mu-cta-set.is-on { opacity: .82; visibility: visible; transform: none; filter: none; pointer-events: auto; transition-delay: .15s, .15s, .15s, 0s; }
.mu-canvas-wrap:hover .mu-cta-set.is-on, .mu-cta-set.is-on:focus-within { opacity: 1; }
.mu-cta-k { font: 700 9.5px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: rgba(101,19,40,.62); }
.mu-plats { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.mu-plat { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: rgba(96,18,38,.58); text-decoration: none; transition: color .3s ease, background .3s ease, transform .3s ease, filter .3s ease; }
.mu-plat svg { width: 15px; height: 15px; }
a.mu-plat:hover, a.mu-plat:focus-visible { outline: none; color: #ffffff; background: rgba(130,25,51,.18); transform: translateY(-1px); filter: drop-shadow(0 0 6px rgba(119,23,47,.7)); }
.mu-plats.is-soon .mu-plat { color: rgba(96,18,38,.3); cursor: default; }
.mu-cta [data-tip]::after { top: auto; bottom: calc(100% + 8px); }
.mu-quiet .mu-veil { padding-bottom: 104px; }
@media (max-width: 640px) { .mu-cta { left: 8px; right: 8px; bottom: 8px; } .mu-plat { width: 26px; height: 26px; } .mu-plats { gap: 2px; } }

/* ===== Hero split pair: "About me" + "Client reviews" — two buttons that read as one ===== */
.hero-duo { display: inline-flex; align-items: stretch; gap: 0; flex-wrap: nowrap; }
.duo-about, .hero-duo .cta-explore { min-height: 44px; }
.duo-about { display: inline-flex; align-items: center; gap: 10px; padding: 0 16px 0 20px; border-radius: 999px 9px 9px 999px; text-decoration: none;
  color: #831933; font: 700 11.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(243,227,230,.55), rgba(241,223,226,.35));
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.12), inset 0 -1px 0 rgba(255,255,255,.045), inset 0 0 0 1px rgba(130,25,51,.1), 0 1px 0 rgba(255,255,255,.035);
  transition: box-shadow .5s ease, color .4s ease; }
.duo-about .duo-arrow { width: 14px; height: 14px; color: rgba(110,21,43,.55); transition: transform .4s cubic-bezier(.2,.7,.2,1), color .4s ease; }
.duo-about:hover, .duo-about:focus-visible { outline: none; color: #6d152b;
  box-shadow: inset 0 3px 9px rgba(0,0,0,0.14), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(119,23,47,.24), inset 0 0 18px rgba(130,25,51,.12), 0 1px 0 rgba(255,255,255,.04); }
.duo-about:hover .duo-arrow, .duo-about:focus-visible .duo-arrow { transform: translateY(3px); color: #6e152b; }
.hero-duo .cta-explore { border-radius: 9px 999px 999px 9px !important; }
/* the seam: a thread of light that seems to join them, though they stay apart */
.duo-seam { position: relative; flex: none; width: 7px; align-self: stretch; }
.duo-seam::before { content: ""; position: absolute; left: 3px; top: 22%; bottom: 22%; width: 1px; border-radius: 1px;
  background: linear-gradient(180deg, transparent, rgba(119,23,47,.75), rgba(169,32,66,.55), transparent); box-shadow: 0 0 8px rgba(130,25,51,.55); animation: seam-breathe 4.2s ease-in-out infinite; }
.duo-seam::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 1px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(119,23,47,.35), transparent); filter: blur(.5px); }
.hero-duo:hover .duo-seam::before { animation-duration: 1.6s; }
@keyframes seam-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .duo-seam::before { animation: none; opacity: .7; } }
@media (max-width: 400px) { .duo-about { padding: 0 12px 0 16px; letter-spacing: .1em; } .hero-duo .cta-explore { letter-spacing: .1em !important; } }

/* ===== Video cards reversed: stats are a translucent cover that mists away on hover to show the cover + hook ===== */
.clip-stats { opacity: 1; background: linear-gradient(180deg, rgba(243,226,229,.38), rgba(243,226,229,.66)); -webkit-backdrop-filter: blur(2px) saturate(1.1); backdrop-filter: blur(2px) saturate(1.1);
  transform: none; filter: none; transition: opacity .75s ease, filter .8s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.clip-stats::after { content: ""; position: absolute; inset: -10% -10% 30%; pointer-events: none; border-radius: inherit; opacity: 0;
  background: radial-gradient(60% 50% at 50% 70%, rgba(116,22,46,.32), transparent 70%), radial-gradient(40% 35% at 30% 40%, rgba(134,25,53,.22), transparent 70%); filter: blur(10px); }
.clip:hover .clip-stats, .clip:focus-visible .clip-stats, .clip.is-revealed .clip-stats { opacity: 0; filter: blur(9px); transform: scale(1.06) translateY(-3%); }
.clip:hover .clip-stats::after, .clip:focus-visible .clip-stats::after, .clip.is-revealed .clip-stats::after { animation: cs-mist 1s ease-out both; }
@keyframes cs-mist { 0% { opacity: .9; transform: none; } 100% { opacity: 0; transform: translateY(-26%) scale(1.25); } }
@media (hover: none) { .clip-stats { display: flex; } }
@media (prefers-reduced-motion: reduce) { .clip-stats { transition: opacity .3s ease; } .clip:hover .clip-stats { filter: none; transform: none; } .clip-stats::after { display: none; } }

/* ===== The orb, seated in a socket between "About me" and "Client reviews" ===== */
.hero-duo { position: relative; align-items: center; }
.hero-duo .cta-explore .cta-orb { display: none !important; }
.hero-duo .cta-explore { padding-left: 22px !important; }
.duo-about { padding-right: 26px; -webkit-mask: radial-gradient(circle 31px at calc(100% + 15px) 50%, transparent 30px, #000000 31px); mask: radial-gradient(circle 31px at calc(100% + 15px) 50%, transparent 30px, #000000 31px); }
.hero-duo .cta-explore { -webkit-mask: radial-gradient(circle 31px at -15px 50%, transparent 30px, #000000 31px); mask: radial-gradient(circle 31px at -15px 50%, transparent 30px, #000000 31px); padding-left: 28px !important; }
.duo-orb { position: relative; z-index: 2; flex: none; width: 56px; height: 56px; margin: 0 -15px; border-radius: 50%; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; outline: none;
  background: radial-gradient(circle at 50% 40%, rgba(244,228,231,.9), rgba(242,226,228,.85) 70%);
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.17), inset 0 -1px 1px rgba(255,255,255,.06), inset 0 0 0 1px rgba(130,25,51,.18), 0 1px 0 rgba(255,255,255,.04), 0 0 16px rgba(130,25,51,.14); }
.duo-orb:active { cursor: grabbing; }
.duo-orb:focus-visible { box-shadow: inset 0 3px 8px rgba(0,0,0,0.17), inset 0 0 0 1px rgba(106,20,42,.7), 0 0 18px rgba(130,25,51,.4); }
.duo-orb canvas { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 50%; filter: drop-shadow(0 0 6px rgba(138,26,54,.45)); }
.duo-orb::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, transparent 78%, rgba(130,25,51,.22) 88%, transparent); animation: seam-breathe 4.2s ease-in-out infinite; }
.hero-duo:hover .duo-orb::after { animation-duration: 1.6s; }
.duo-seam { display: none; }
@media (max-width: 400px) { .duo-about { padding-right: 22px; } .hero-duo .cta-explore { padding-left: 24px !important; } }

/* ===== The orb rests on an obsidian chalice, wrapped in drifting mist ===== */
.duo-orb { overflow: visible; }
.duo-orb canvas { z-index: 2; }
.duo-chalice { position: absolute; z-index: 3; left: 50%; top: 39px; width: 54px; height: 86.4px; transform: translateX(-50%); pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.12)) drop-shadow(0 0 10px rgba(130,25,51,.18)); }
.duo-mist { position: absolute; z-index: 4; left: -46px; right: -46px; top: -14px; height: 120px; pointer-events: none; mix-blend-mode: multiply; filter: blur(9px); }
.duo-mist i { position: absolute; width: 54px; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(115,22,45,.42), rgba(130,25,51,.14) 60%, transparent); opacity: 0;
  animation: duo-wisp 9s ease-in-out infinite; }
.duo-mist i:nth-child(1) { left: 22px; top: 52px; animation-delay: 0s; }
.duo-mist i:nth-child(2) { right: 20px; top: 46px; animation-delay: -2.3s; animation-duration: 10.5s; }
.duo-mist i:nth-child(3) { left: 50%; top: 58px; margin-left: -27px; animation-delay: -4.6s; background: radial-gradient(closest-side, rgba(134,25,53,.34), rgba(169,32,66,.1) 60%, transparent); }
.duo-mist i:nth-child(4) { left: 36px; top: 26px; animation-delay: -6.8s; animation-duration: 11.5s; }
@keyframes duo-wisp { 0% { opacity: 0; transform: translate(0, 10px) scale(.7); } 25% { opacity: .75; } 60% { opacity: .5; transform: translate(10px, -16px) scale(1.15); } 100% { opacity: 0; transform: translate(-6px, -34px) scale(1.4); } }
.hero-duo:hover .duo-mist i { animation-duration: 5s; }
@media (prefers-reduced-motion: reduce) { .duo-mist i { animation: none; opacity: .35; } }
/* leave room under the row for the chalice's stem and foot */
.hero-copy > .hero-actions.hero-duo { margin-bottom: 70px !important; }
.duo-chalice { width: 62px; height: 99.2px; top: 37px; }
.hero-copy > .hero-actions.hero-duo { margin-bottom: 82px !important; }
.duo-mist i { background: radial-gradient(closest-side, rgba(111,21,44,.55), rgba(130,25,51,.18) 60%, transparent); }
.duo-mist i:nth-child(3) { background: radial-gradient(closest-side, rgba(128,24,50,.45), rgba(169,32,66,.14) 60%, transparent); }
@keyframes duo-wisp { 0% { opacity: 0; transform: translate(0, 10px) scale(.7); } 25% { opacity: .95; } 60% { opacity: .65; transform: translate(10px, -16px) scale(1.15); } 100% { opacity: 0; transform: translate(-6px, -34px) scale(1.4); } }
/* chalice: smaller, matte, quieter */
.duo-chalice { width: 44px; height: 70.4px; top: 41px; opacity: .82; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.1)); }
.hero-copy > .hero-actions.hero-duo { margin-bottom: 56px !important; }
/* chalice removed: the row sits flush again */
.hero-copy > .hero-actions.hero-duo { margin-bottom: 0 !important; }
.duo-mist { top: -30px; height: 116px; }
.duo-mist i:nth-child(1) { top: 40px; } .duo-mist i:nth-child(2) { top: 34px; } .duo-mist i:nth-child(3) { top: 52px; } .duo-mist i:nth-child(4) { top: 20px; }

/* ===== Media kit on the photo: hold to download, tap for a save menu ===== */
.portrait-link { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.pm-hold { position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: conic-gradient(from -90deg, rgba(99,19,39,.95) calc(var(--hp, 0) * 1turn), rgba(130,25,51,.15) 0);
  -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000000 0 0) content-box exclude, linear-gradient(#000000 0 0); padding: 2px;
  filter: drop-shadow(0 0 6px rgba(130,25,51,.8)); }
.portrait-link.is-holding .pm-hold { opacity: 1; }
.portrait-link.is-holding .pm-cta { opacity: 1 !important; filter: none !important; transform: translate(-50%, 0) scale(calc(1 + var(--hp, 0) * .06)) !important; }
.portrait-link.is-holding .portrait-card { transform: scale(calc(1 - var(--hp, 0) * .025)); }
.portrait-link.is-saved .pm-cta { opacity: 1 !important; filter: none !important; transform: translate(-50%, 0) !important; box-shadow: 0 0 0 1px rgba(106,20,42,.7), 0 0 26px rgba(130,25,51,.5) !important; }
.pm-hint { position: absolute; left: 50%; bottom: calc(9% - 22px); z-index: 5; transform: translate(-50%, 4px); white-space: nowrap; pointer-events: none;
  color: rgba(101,19,40,.6); font: 600 9.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .4s ease .5s, transform .5s ease .5s; }
.portrait-link:hover .pm-hint { opacity: 1; transform: translate(-50%, 0); }
.portrait-link.is-menu .pm-hint, .portrait-link.is-holding .pm-hint, .om-mode .pm-hint { opacity: 0 !important; }
@media (hover: none) { .pm-hint { display: none; } }
.kit-menu { position: absolute; z-index: 30; min-width: 198px; padding: 8px; border-radius: 16px; transform: translate(-50%, -6px); opacity: 0; filter: blur(6px);
  background: rgba(242,225,228,.82); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(119,23,47,.2), inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -16px rgba(0,0,0,0.17), 0 0 30px rgba(130,25,51,.14);
  transition: opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1), filter .35s ease; }
.kit-menu.is-in { opacity: 1; transform: translate(-50%, 0); filter: none; }
.kit-menu::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); background: rgba(242,225,228,.82); box-shadow: inset 1px 1px 0 rgba(119,23,47,.2); }
.kit-menu-k { margin: 2px 8px 6px; color: rgba(101,19,40,.5); font: 700 9.5px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.kit-menu button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left;
  color: #6d152b; font: 600 13px/1.2 var(--body); transition: background .25s ease, color .25s ease; }
.kit-menu button svg { width: 16px; height: 16px; flex: none; color: rgba(110,21,43,.75); }
.kit-menu button:hover, .kit-menu button:focus-visible { outline: none; color: #ffffff; background: rgba(130,25,51,.14); box-shadow: inset 0 0 0 1px rgba(119,23,47,.22); }
.kit-menu button:hover svg { color: #611326; }
@media (prefers-reduced-motion: reduce) { .kit-menu { transition: opacity .2s ease; filter: none; } .portrait-link.is-holding .portrait-card { transform: none; } }

/* ===== Phones: the opening text sits centered ===== */
@media (max-width: 640px) {
  .hero-copy { align-items: center; text-align: center; }
  .hero-copy .tod-line { justify-content: center; text-align: center; }
  #hero-title { text-align: center; }
  .hero-copy > .hero-actions.hero-duo { align-self: center; justify-content: center; }
  .kw-hero { text-align: center; }
  .kw-hero h1 { margin-inline: auto; }
}

/* save menu: see-through glass, and a mist glow that blooms on hover */
.kit-menu { background: rgba(242,225,228,.46); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); isolation: isolate; }
.kit-menu::before { background: rgba(242,225,228,.46); }
.kit-menu::after { content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 26px; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(60% 50% at 30% 30%, rgba(119,23,47,.22), transparent 70%), radial-gradient(50% 45% at 75% 75%, rgba(152,29,60,.14), transparent 70%); filter: blur(14px); animation: kit-mist 7s ease-in-out infinite alternate; }
.kit-menu:hover::after, .kit-menu:focus-within::after { opacity: 1; }
@keyframes kit-mist { from { transform: translate(-4px, 3px) scale(1); } to { transform: translate(5px, -4px) scale(1.08); } }
.kit-menu button { position: relative; isolation: isolate; overflow: hidden; }
.kit-menu button::before { content: ""; position: absolute; inset: -40% -20%; z-index: -1; pointer-events: none; opacity: 0; filter: blur(10px); transform: translateX(-12%) scale(.9);
  background: radial-gradient(45% 60% at 30% 50%, rgba(116,22,46,.42), transparent 70%), radial-gradient(35% 50% at 75% 50%, rgba(144,27,56,.22), transparent 70%);
  transition: opacity .45s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.kit-menu button:hover, .kit-menu button:focus-visible { background: rgba(130,25,51,.08); }
.kit-menu button:hover::before, .kit-menu button:focus-visible::before { opacity: 1; transform: translateX(8%) scale(1.05); }
.kit-menu button:hover svg { filter: drop-shadow(0 0 6px rgba(119,23,47,.85)); }
@media (prefers-reduced-motion: reduce) { .kit-menu::after { animation: none; } }

/* ===== Greeting, time and date: a slim bar at the very top, right-aligned ===== */
.top-bar { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 16px 0 0; display: flex; justify-content: flex-end; }
.top-bar .tod-line { margin: 0 !important; display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 0 2px; white-space: nowrap; font-size: 11.5px; line-height: 1; padding: 6px 2px; }
.top-bar .tod-line i { padding: 0 8px; }
@media (max-width: 640px) {
  .top-bar { width: min(100% - 32px, 1280px); padding-top: 12px; }
  .top-bar .tod-line { font-size: 10.5px; letter-spacing: .12em; }
  .top-bar .tod-line .tod { letter-spacing: .12em; }
  .top-bar .tod-line i { padding: 0 5px; }
}
@media (max-width: 360px) { .top-bar .tod-line { font-size: 9.5px; letter-spacing: .08em; } .top-bar .tod-line .tod { letter-spacing: .08em; } .top-bar .tod-line i { padding: 0 3px; } }

/* ===== Hero: About me · orb · Client reviews sit centered directly above the photo ===== */
.hero-side { display: flex; flex-direction: column; align-items: center; gap: var(--f3, 22px); min-width: 0; align-self: center; }
.hero-side > .hero-portrait-wrap { width: 100%; }
.hdr-duo > .hero-actions.hero-duo { margin: 0 !important; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; justify-content: center; max-width: 100%; }
.hdr-duo .duo-about, .hdr-duo .hero-duo .cta-explore { justify-content: center; }
.hdr-duo .duo-about, .hdr-duo .hero-duo .cta-explore { white-space: nowrap; }
@media (max-width: 640px) { .hero-side { grid-row: 1; gap: var(--f2, 14px); } .hero-side > .hero-portrait-wrap { grid-row: auto; } }

/* ===== Orb: set down into the page, like a sphere resting in a well ===== */
.duo-orb { background: radial-gradient(circle at 50% 62%, rgba(242,224,227,.95), rgba(244,229,231,1) 72%);
  box-shadow: inset 0 5px 9px rgba(0,0,0,0.19), inset 0 -1px 1px rgba(255,255,255,.07), inset 0 0 0 1px rgba(0,0,0,0.14), 0 1px 0 rgba(255,255,255,.09), 0 -1px 0 rgba(0,0,0,0.11); }
.duo-orb canvas { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); filter: none; }
.duo-orb::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 7px 9px -2px rgba(0,0,0,0.18), inset 0 0 6px 1px rgba(0,0,0,0.12), inset 0 -2px 3px -1px rgba(111,21,44,.16); }
.duo-orb::after { inset: 0; z-index: 1; animation: none; background: radial-gradient(circle at 50% 58%, rgba(130,25,51,.16), transparent 62%); }
.duo-orb:focus-visible { box-shadow: inset 0 5px 9px rgba(0,0,0,0.19), inset 0 0 0 1px rgba(106,20,42,.7), 0 1px 0 rgba(255,255,255,.09); }

/* ===== Hero buttons: cut-corner plates instead of pills (one corner sliced off each, mirrored across the orb) ===== */
.hdr-duo .hero-duo { --hb-cut: 14px; --hb-edge: rgba(121,23,48,.34); --hb-hot: rgba(109,21,43,.85); --hb-tick: rgba(152,29,60,.9); --hb-plate: linear-gradient(180deg, rgba(242,225,227,.82), rgba(243,227,230,.7)); }
.hdr-duo .hero-duo a.duo-about, .hdr-duo .hero-duo a.cta-explore { border-radius: 0 !important; min-height: 44px;
  box-shadow: inset 0 0 0 1px var(--hb-edge), inset 0 10px 14px -12px rgba(0,0,0,0.18) !important;
  transition: box-shadow .35s ease, color .3s ease, background-size .45s cubic-bezier(.2,.7,.2,1) !important; }
.hdr-duo .hero-duo a.duo-about { clip-path: polygon(var(--hb-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--hb-cut));
  background:
    linear-gradient(135deg, transparent 50%, var(--hb-hot) 50%, var(--hb-hot) calc(50% + 1.3px), transparent calc(50% + 1.3px)) 0 0 / var(--hb-cut) var(--hb-cut) no-repeat,
    linear-gradient(var(--hb-tick), var(--hb-tick)) 0 100% / 12px 2px no-repeat,
    var(--hb-plate) !important; }
.hdr-duo .hero-duo a.cta-explore { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hb-cut)), calc(100% - var(--hb-cut)) 100%, 0 100%);
  background:
    linear-gradient(135deg, transparent calc(50% - 1.3px), var(--hb-hot) calc(50% - 1.3px), var(--hb-hot) 50%, transparent 50%) 100% 100% / var(--hb-cut) var(--hb-cut) no-repeat,
    linear-gradient(var(--hb-tick), var(--hb-tick)) 100% 0 / 12px 2px no-repeat,
    var(--hb-plate) !important; }
.hdr-duo .hero-duo a.cta-explore::before, .hdr-duo .hero-duo a.cta-explore::after { display: none !important; }
/* hover / keyboard focus: the edge lights up and the accent tick runs the length of the plate */
.hdr-duo .hero-duo a.duo-about:hover, .hdr-duo .hero-duo a.duo-about:focus-visible,
.hdr-duo .hero-duo a.cta-explore:hover, .hdr-duo .hero-duo a.cta-explore:focus-visible { outline: none; color: #5f1225 !important;
  box-shadow: inset 0 0 0 1px rgba(109,21,43,.7), inset 0 0 20px rgba(130,25,51,.16) !important; }
.hdr-duo .hero-duo a.duo-about:hover, .hdr-duo .hero-duo a.duo-about:focus-visible { background-size: var(--hb-cut) var(--hb-cut), 100% 2px, auto !important; }
.hdr-duo .hero-duo a.cta-explore:hover, .hdr-duo .hero-duo a.cta-explore:focus-visible { background-size: var(--hb-cut) var(--hb-cut), 100% 2px, auto !important; }
@media (prefers-reduced-motion: reduce) { .hdr-duo .hero-duo a.duo-about, .hdr-duo .hero-duo a.cta-explore { transition: none !important; } }
.hdr-duo .hero-duo .cta-arrow, .hdr-duo .hero-duo .duo-arrow { flex: none; }
@media (max-width: 420px) { .hdr-duo .hero-duo a.duo-about, .hdr-duo .hero-duo a.cta-explore { font-size: 10.5px !important; letter-spacing: .09em !important; gap: 7px !important; } .hdr-duo .hero-duo a.duo-about { padding-left: 12px; } .hdr-duo .hero-duo a.cta-explore { padding-right: 12px !important; } }

/* ===== The button row lives in the header region: its own centered row under the name, above the divider ===== */
.site-header.site-header--duo { border-bottom: 0; }
.hdr-duo { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 2px 0 22px; display: flex; justify-content: center; border-bottom: 1px solid rgba(97,18,38,.09); }
@media (max-width: 640px) { .hdr-duo { width: min(100% - 32px, 1280px); padding: 8px 0 20px; } }
/* the border itself is drawn live (nodes, lines, comets) on a canvas laid over the plates */
.duo-net { position: absolute; left: -28px; top: -28px; z-index: 1; pointer-events: none; }
.hdr-duo .hero-duo { --hb-tick: transparent; --hb-hot: transparent; --hb-edge: rgba(121,23,48,.1); }
.hdr-duo .hero-duo a.duo-about:hover, .hdr-duo .hero-duo a.duo-about:focus-visible,
.hdr-duo .hero-duo a.cta-explore:hover, .hdr-duo .hero-duo a.cta-explore:focus-visible { box-shadow: inset 0 0 0 1px rgba(109,21,43,.16), inset 0 0 22px rgba(130,25,51,.2) !important; }

/* ===== Header band: one balanced block. Name left · buttons center · greeting + links right (wide screens);
   name + greeting/links on one row with buttons beneath (mid widths); a single centered stack on phones ===== */
.hdr-band { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 18px 0 20px; border-bottom: 1px solid rgba(97,18,38,.09);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand tod" "brand soc" "duo duo"; column-gap: 24px; row-gap: 10px; align-items: center; }
.hdr-band > .site-header { display: contents; }
.hdr-band > .top-bar { grid-area: tod; width: auto; margin: 0; padding: 0; justify-self: end; align-self: end; }
.hdr-band .brand-lockup { grid-area: brand; align-self: center; justify-self: start; width: auto !important; }
.hdr-band .site-header > .socials { grid-area: soc; justify-self: end; align-self: start; width: auto !important; gap: 8px !important; }
.hdr-band > .hdr-duo { grid-area: duo; width: auto; margin: 0; padding: 8px 0 0; border-bottom: 0; justify-self: center; }
@media (min-width: 1240px) {
  .hdr-band { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "brand duo tod" "brand duo soc"; row-gap: 8px; }
  .hdr-band > .hdr-duo { padding: 0; align-self: center; }
}
@media (max-width: 640px) {
  .hdr-band { width: min(100% - 32px, 1280px); padding: 12px 0 20px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tod" "brand" "soc" "duo"; row-gap: 12px; justify-items: center; }
  .hdr-band > .top-bar, .hdr-band .brand-lockup, .hdr-band .site-header > .socials { justify-self: center; align-self: center; }
  .hdr-band .brand-lockup { align-items: center !important; text-align: center; }
  .hdr-band .site-header > .socials { gap: 10px !important; justify-content: center !important; }
  .hdr-band > .hdr-duo { padding-top: 4px; }
}

/* ===== Header keeps only the sound switch; the one master set of contact icons lives in the footer ===== */
.hdr-band { grid-template-areas: "brand side" "duo duo"; row-gap: 14px; }
.hdr-band > .top-bar, .hdr-band .site-header > .socials { grid-area: side; align-self: center; justify-self: end; }
.hdr-band > .top-bar { margin-right: 48px; }
@media (min-width: 1240px) { .hdr-band { grid-template-areas: "brand duo side"; } }
@media (max-width: 640px) {
  .hdr-band { grid-template-areas: "side" "brand" "duo"; row-gap: 12px; }
  .hdr-band > .top-bar { justify-self: start; margin-right: 0; }
  .hdr-band .site-header > .socials { justify-self: end; }
  .hdr-band .site-header .socials .social { width: 32px; height: 32px; }
}

/* ===== Header buttons: smaller, and set in the same display face as the name and greeting ===== */
.hdr-duo .hero-duo { --hb-cut: 10px; }
.hdr-duo .hero-duo a.duo-about, .hdr-duo .hero-duo a.cta-explore { min-height: 32px; font: 400 10px/1 var(--head) !important; letter-spacing: .14em !important; text-transform: uppercase; color: rgba(118,22,46,.78) !important; gap: 7px !important; }
.hdr-duo .hero-duo a.duo-about { padding: 0 21px 0 13px; -webkit-mask: radial-gradient(circle 23px at calc(100% + 9px) 50%, transparent 22px, #000000 23px); mask: radial-gradient(circle 23px at calc(100% + 9px) 50%, transparent 22px, #000000 23px); }
.hdr-duo .hero-duo a.cta-explore { padding: 0 13px 0 21px !important; -webkit-mask: radial-gradient(circle 23px at -9px 50%, transparent 22px, #000000 23px); mask: radial-gradient(circle 23px at -9px 50%, transparent 22px, #000000 23px); }
.hdr-duo .hero-duo .cta-arrow, .hdr-duo .hero-duo .duo-arrow { width: 11px; height: 11px; }
.hdr-duo .duo-orb { width: 40px; height: 40px; margin: 0 -11px; }
.hdr-duo .duo-orb canvas { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
.hdr-duo .duo-mist { left: -40px; right: -40px; top: -34px; transform: scale(.78); transform-origin: 50% 40%; }
@media (max-width: 420px) { .hdr-duo .hero-duo a.duo-about, .hdr-duo .hero-duo a.cta-explore { font-size: 8.5px !important; letter-spacing: .1em !important; gap: 5px !important; } .hdr-duo .hero-duo a.duo-about { padding: 0 19px 0 10px; } .hdr-duo .hero-duo a.cta-explore { padding: 0 10px 0 19px !important; } }

/* ===== Soft violet glow behind the small sphere (driven live: see the lattice script) ===== */
.duo-glow { position: absolute; left: 50%; top: 50%; z-index: 1; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(closest-side, rgba(128,24,50,.42), rgba(139,26,55,.2) 38%, rgba(169,32,66,.07) 62%, transparent 78%);
  opacity: calc(var(--glow, .45) * .85); transform: translate(var(--glow-x, 0px), var(--glow-y, 0px)) scale(calc(.82 + var(--glow, .45) * .36)); will-change: transform, opacity; }
/* the mist under the sphere thickens as the glow rises */
.hdr-duo .duo-mist { opacity: calc(.6 + var(--glow, .45) * .6); }

/* ===== Greeting sits centered under the buttons; the clock and date sit on the right. Both rest dim and come up on hover ===== */
.hdr-band { grid-template-areas: "brand side" "duo duo" "greet greet"; row-gap: 10px; }
.hdr-band > .top-bar { grid-area: greet; justify-self: center; align-self: start; margin: 0; }
.hdr-band > .hdr-clock, .hdr-band .site-header > .socials { grid-area: side; align-self: center; justify-self: end; }
.hdr-band > .hdr-clock { margin-right: 48px; }
.tod-clock { margin: 0; display: flex; align-items: center; white-space: nowrap; font: 800 11.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #821933; font-variant-numeric: tabular-nums; padding: 6px 2px; cursor: default; }
.tod-clock i { font-style: normal; opacity: .5; padding: 0 8px; }
@media (min-width: 1240px) { .hdr-band { grid-template-areas: "brand duo side" "brand greet side"; row-gap: 6px; } }
@media (max-width: 640px) {
  .hdr-band { grid-template-areas: "side" "brand" "duo" "greet"; row-gap: 10px; }
  .hdr-band > .top-bar { justify-self: center; }
  .hdr-band > .hdr-clock { justify-self: end; margin-right: 42px; }
  .tod-clock { font-size: 10.5px; letter-spacing: .12em; } .tod-clock i { padding: 0 5px; }
}
.hdr-band > .top-bar, .hdr-band > .hdr-clock { opacity: .24; transition: opacity .45s ease; }
.hdr-band > .top-bar:hover, .hdr-band > .top-bar:focus-within, .hdr-band > .hdr-clock:hover { opacity: 1; }
/* energy arcs are drawn on one page-wide layer that never blocks clicks */
.arc-fx { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 45; pointer-events: none; mix-blend-mode: multiply; }

/* ===== Hero: the photo sits centered on the page with the "I am Name." line beneath it, at every width ===== */
.hero { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; gap: var(--f3, 22px) !important; }
.hero > .hero-side { grid-row: 1; width: min(430px, 100%); }
.hero > .hero-copy { grid-row: 2; order: 0; align-items: center; text-align: center; width: 100%; }
.hero > .hero-copy #hero-title { text-align: center; margin-bottom: 0 !important; }
@media (max-width: 640px) { .hero > .hero-side { width: 100%; } }

/* ===== Headshot: no hard lines or rounded corners. Every edge dissolves into mist ===== */
.portrait-card { border-radius: 0 !important; box-shadow: none !important;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,.18) 5%, rgba(0,0,0,.62) 11%, #000000 19%, #000000 81%, rgba(0,0,0,.62) 89%, rgba(0,0,0,.18) 95%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0,0,0,.3) 4%, rgba(0,0,0,.8) 9%, #000000 14%, #000000 58%, rgba(0,0,0,.82) 70%, rgba(0,0,0,.42) 84%, rgba(0,0,0,.12) 93%, transparent 100%),
    radial-gradient(ellipse 74% 72% at 50% 44%, #000000 58%, rgba(0,0,0,.7) 74%, rgba(0,0,0,.28) 88%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,.18) 5%, rgba(0,0,0,.62) 11%, #000000 19%, #000000 81%, rgba(0,0,0,.62) 89%, rgba(0,0,0,.18) 95%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0,0,0,.3) 4%, rgba(0,0,0,.8) 9%, #000000 14%, #000000 58%, rgba(0,0,0,.82) 70%, rgba(0,0,0,.42) 84%, rgba(0,0,0,.12) 93%, transparent 100%),
    radial-gradient(ellipse 74% 72% at 50% 44%, #000000 58%, rgba(0,0,0,.7) 74%, rgba(0,0,0,.28) 88%, transparent 100%);
  mask-composite: intersect; }
.portrait-link, .portrait-link .hero-portrait { border-radius: 0 !important; }
.portrait-link .hero-portrait { border-color: transparent !important; box-shadow: none !important; }
.portrait-link:hover .portrait-card, .portrait-link:focus-visible .portrait-card { box-shadow: none !important; }
/* slow wisps of mist drifting over the sides and top, where the photo fades out */
.pm-veil { position: absolute; inset: -9% -14% 8% -14%; z-index: 3; pointer-events: none; mix-blend-mode: multiply; filter: blur(13px); }
.pm-veil i { position: absolute; width: 34%; height: 46%; border-radius: 50%; opacity: .4;
  background: radial-gradient(closest-side, rgba(117,22,46,.3), rgba(130,25,51,.12) 55%, transparent); animation: pm-drift 15s ease-in-out infinite alternate; }
.pm-veil i:nth-child(1) { left: 0; top: 30%; animation-duration: 16s; }
.pm-veil i:nth-child(2) { right: 0; top: 22%; animation-duration: 13s; animation-delay: -5s; }
.pm-veil i:nth-child(3) { left: 8%; top: 0; width: 44%; height: 30%; animation-duration: 18s; animation-delay: -9s; background: radial-gradient(closest-side, rgba(134,25,53,.22), rgba(169,32,66,.09) 55%, transparent); }
.pm-veil i:nth-child(4) { right: 6%; top: 2%; width: 42%; height: 28%; animation-duration: 14s; animation-delay: -3s; }
@media (prefers-reduced-motion: reduce) { .pm-veil i { animation: none; opacity: .3; } }

/* ===== Time and date sit centered directly below the greeting, under the buttons ===== */
.hdr-band { grid-template-areas: "brand side" "duo duo" "greet greet" "clock clock"; }
.hdr-band > .hdr-clock { grid-area: clock; justify-self: center; align-self: start; margin: -8px 0 0; }
.hdr-band > .top-bar { align-self: end; }
.tod-clock { padding: 2px 2px 4px; }
@media (min-width: 1240px) { .hdr-band { grid-template-areas: "brand duo side" "brand greet side" "brand clock side"; row-gap: 4px; } .hdr-band > .hdr-clock { margin-top: -4px; } }
@media (max-width: 640px) { .hdr-band { grid-template-areas: "side" "brand" "duo" "greet" "clock"; } .hdr-band > .hdr-clock { justify-self: center; margin: -6px 0 0; } }

/* ===== Name and "UGC Creator Portfolio" sit centered under the photo; the header keeps the buttons, greeting, clock and sound ===== */
.hero > .hero-brand { display: contents; }
.hero > .hero-side { grid-row: 1; }
.hero > .hero-brand .brand-lockup { grid-row: 2; justify-self: center; display: flex; flex-direction: column !important; align-items: center !important; text-align: center; gap: 6px !important; width: auto !important; margin-top: -6px; }
.hero > .hero-brand .brand-tag { gap: 0 !important; transform: none !important; } .hero > .hero-brand .brand-tag i { display: none !important; }
.hero > .hero-brand .wordmark--spotify, .hero > .hero-brand .brand-tag { font-size: clamp(14px, calc(11px + .55vw), 20px) !important; }
.hero > .hero-copy { grid-row: 3; }
.hdr-band { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; grid-template-areas: ". duo side" ". greet ." ". clock ." !important; row-gap: 4px !important; }
.hdr-band .site-header > .socials { align-self: center; }
@media (max-width: 640px) { .hdr-band { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "side" "duo" "greet" "clock" !important; row-gap: 8px !important; } .hdr-band .site-header > .socials { margin-bottom: -4px; } }

/* ===== the "I am Name." line is no longer shown; it lives on as the first line of a hidden mantra (see the easter-egg script) ===== */
.hero > .hero-copy #hero-title { position: absolute !important; width: 1px; height: 1px; margin: -1px !important; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero-brand .brand-tag { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.mantra { display: grid; justify-items: center; width: 100%; max-height: 0; opacity: 0; overflow: hidden; -webkit-user-select: none; user-select: none; touch-action: manipulation; transition: max-height .7s cubic-bezier(.2,.7,.2,1), opacity .5s ease, margin .7s ease; }
.mantra.on { max-height: 4.2em; opacity: 1; overflow: visible; margin: 6px 0 2px !important; }
.mantra-line { grid-area: 1 / 1; margin: 0; text-align: center; text-wrap: balance; font-family: var(--head); font-weight: 400; font-size: clamp(19px, 3.1vw, 40px); line-height: 1.25; letter-spacing: .02em; z-index: 1; }
.mantra-line .w { display: inline-block; white-space: nowrap; }
.mantra-line .c { display: inline-block; color: var(--om-violet, #77172f); opacity: 0; filter: blur(7px); transform: translateY(9px) scale(.8); will-change: transform, opacity, filter;
  transition: opacity .55s ease, filter .65s ease, transform .85s cubic-bezier(.2,.7,.2,1); transition-delay: calc(200ms + var(--i) * 24ms); }
.mantra-line .lead .c { color: #681429; }
.mantra-line.show .c { opacity: 1; filter: none; transform: none; text-shadow: 0 0 18px rgba(130,25,51,.28); }
/* the line in front lifts away toward you while the next one comes up from behind it */
.mantra-line.out { z-index: 2; pointer-events: none; }
.mantra-line.out .c { opacity: 0; filter: blur(6px); transform: translate(calc((var(--i) - var(--n) / 2) * 1.3px), calc(-12px - var(--i) * .3px)) scale(1.22); transition-delay: calc(var(--i) * 14ms); }
@media (prefers-reduced-motion: reduce) { .mantra-line .c { transition: opacity .35s ease; transition-delay: 0s !important; filter: none !important; transform: none !important; } }

/* ===== About: the four formats read as one quiet line of text, not a row of boxed pills ===== */
.about-block .format-pills { display: block; margin-top: 18px; gap: 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; letter-spacing: .02em; }
.about-block .format-pills span { display: inline; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; }
.about-block .format-pills span:not(:last-child)::after { content: "\00a0\00a0·\00a0\00a0"; color: var(--gold, #77172f); opacity: .7; }
/* each phrase stays whole, and the line may wrap between phrases */
.about-block .format-pills { display: flex; flex-wrap: wrap; gap: 0; }
.about-block .format-pills span { white-space: nowrap; }

/* ===== Mist drifting over the header buttons (drawn live; parts under the pointer) ===== */
.duo-fog { position: absolute; left: -70px; top: -34px; z-index: 6; pointer-events: none; mix-blend-mode: multiply; filter: blur(5px); }

/* ===== Header buttons: no crisp outer ends. Each plate narrows in a soft curve and dissolves toward its outer side ===== */
.hdr-duo .hero-duo a.duo-about { clip-path: polygon(0 18%, 25% 11.4%, 50% 5.9%, 75% 2%, 100% 0, 100% 100%, 75% 98%, 50% 94.1%, 25% 88.6%, 0 82%) !important;
  background: linear-gradient(90deg, rgba(242,226,228,0) 0, rgba(242,226,228,.12) 14%, rgba(242,225,228,.5) 46%, rgba(242,225,228,.82) 100%) !important; box-shadow: none !important; }
.hdr-duo .hero-duo a.cta-explore { clip-path: polygon(0 0, 25% 2%, 50% 5.9%, 75% 11.4%, 100% 18%, 100% 82%, 75% 88.6%, 50% 94.1%, 25% 98%, 0 100%) !important;
  background: linear-gradient(270deg, rgba(242,226,228,0) 0, rgba(242,226,228,.12) 14%, rgba(242,225,228,.5) 46%, rgba(242,225,228,.82) 100%) !important; box-shadow: none !important; }
.hdr-duo .hero-duo a.duo-about:hover, .hdr-duo .hero-duo a.duo-about:focus-visible { box-shadow: none !important;
  background: linear-gradient(90deg, rgba(238,216,220,0) 0, rgba(238,216,220,.16) 14%, rgba(239,218,222,.55) 46%, rgba(240,220,224,.86) 100%) !important; }
.hdr-duo .hero-duo a.cta-explore:hover, .hdr-duo .hero-duo a.cta-explore:focus-visible { box-shadow: none !important;
  background: linear-gradient(270deg, rgba(238,216,220,0) 0, rgba(238,216,220,.16) 14%, rgba(239,218,222,.55) 46%, rgba(240,220,224,.86) 100%) !important; }

/* ===== Name under the photo: its own space below the orb, in the warm colours pulled from the photo's red wall ===== */
.hero > .hero-brand .brand-lockup { margin-top: 12px; gap: 7px !important; }
@media (max-width: 640px) { .hero > .hero-brand .brand-lockup { margin-top: 36px; gap: 6px !important; } }
/* tagline: two-thirds the size of the name, always on one line */
.hero > .hero-brand .brand-tag { font-size: clamp(9.4px, calc(7.35px + .367vw), 13.4px) !important; letter-spacing: .2em !important; white-space: nowrap; }
/* the name glows from sunlit gold through ember to the wall's crimson, and the colour drifts slowly along the letters */
@keyframes name-ember { 0% { color: #982437; text-shadow: 0 0 16px rgba(157,37,57,.3); } 35% { color: #a8273d; text-shadow: 0 0 16px rgba(168,39,61,.3); } 70% { color: #961c3b; text-shadow: 0 0 16px rgba(150,28,59,.3); } 100% { color: #a92042; text-shadow: 0 0 18px rgba(169,32,66,.34); } }
.hero > .hero-brand .wordmark--spotify .wm-real .c { color: #961c3b; -webkit-text-fill-color: currentColor !important; animation: name-ember 6.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.55s); }
@media (prefers-reduced-motion: reduce) { .hero > .hero-brand .wordmark--spotify .wm-real .c { animation-play-state: paused; } }

/* ===== Music and Client reviews pages: the same header as the main page, with the page's name centered beneath it ===== */
.hdr-band--sub .duo-about { gap: 7px; }
.hdr-band--sub .duo-about:hover .duo-arrow, .hdr-band--sub .duo-about:focus-visible .duo-arrow { transform: translateX(-3px); }
.site-header.sub-brand { width: min(1280px, calc(100% - 48px)); margin: 26px auto 0; min-height: 0 !important; padding: 0 !important; border: 0 !important; display: flex !important; justify-content: center !important; }
.sub-brand .brand-lockup { display: flex; flex-direction: column !important; align-items: center !important; text-align: center; gap: 7px !important; width: auto !important; }
.sub-brand .wordmark--spotify { font-size: clamp(14px, calc(11px + .55vw), 20px) !important; }
.sub-brand .brand-tag { gap: 0 !important; transform: none !important; font-size: clamp(9.4px, calc(7.35px + .367vw), 13.4px) !important; letter-spacing: .2em !important; white-space: nowrap; }
.sub-brand .brand-tag i { display: none !important; }
.sub-brand .wordmark--spotify:not(.wordmark--om) .wm-real .c { color: #961c3b; -webkit-text-fill-color: currentColor !important; animation: name-ember 6.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.55s); }
@media (prefers-reduced-motion: reduce) { .sub-brand .wordmark--spotify .wm-real .c { animation-play-state: paused; } }
@media (max-width: 640px) { .site-header.sub-brand { width: min(100% - 32px, 1280px); margin-top: 20px; } }

/* ===== Client reviews: photo cards with a frosted panel, like the video cards on the main page ===== */
.kw-wall { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; align-items: start; }
.kw-card.kw-card--shot { margin: 0; padding: 12px 12px 14px; }
.kw-shot { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; isolation: isolate; background: #f5f1e6; border: 1px solid rgba(97,18,38,.1); cursor: pointer; outline: none; transition: border-color .3s ease, box-shadow .45s ease; }
.kw-shot-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: saturate(.92) contrast(1.02); transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.kw-shot-img--mono { display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, rgba(119,23,47,.34), rgba(197,38,77,.55) 55%, rgba(242,224,227,.95)); color: #5f1225; font: 400 34px/1 var(--head); letter-spacing: .12em; }
.kw-glass { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 16px 14px; text-align: center; border-radius: inherit;
  background: linear-gradient(180deg, rgba(243,226,229,.4), rgba(243,226,229,.7)); -webkit-backdrop-filter: blur(3px) saturate(1.1); backdrop-filter: blur(3px) saturate(1.1);
  transition: opacity .6s ease, filter .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.kw-glass .kw-stars { margin: 0; }
.kw-glass .kw-pull { margin: 0; font-size: 15.5px !important; line-height: 1.35; color: #ffffff; text-shadow: 0 1px 10px rgba(0,0,0,0.11); }
.kw-bought { margin: 0; font: 400 8.5px/1.5 var(--head); letter-spacing: .16em; text-transform: uppercase; color: #6b142a; }
.kw-cue { margin-top: 4px; padding: 5px 11px; border: 1px solid rgba(109,21,43,.45); border-radius: 999px; font: 400 8px/1 var(--head); letter-spacing: .16em; text-transform: uppercase; color: #5f1225; }
.kw-shot:hover, .kw-shot:focus-visible { border-color: rgba(109,21,43,.5); box-shadow: 0 0 26px rgba(130,25,51,.22); }
.kw-shot:hover .kw-glass, .kw-shot:focus-visible .kw-glass, .kw-shot.is-revealed .kw-glass { opacity: 0; filter: blur(9px); transform: scale(1.06) translateY(-3%); }
.kw-shot:hover .kw-shot-img, .kw-shot:focus-visible .kw-shot-img, .kw-shot.is-revealed .kw-shot-img { transform: scale(1.04); filter: saturate(1.05) contrast(1.04); }
.kw-card--shot .kw-who { margin-top: 12px; padding-top: 0; border-top: 0; }
.kw-card--shot .kw-more { margin: 10px 0 0; }
.kw-card--shot .kw-full--open { margin-top: 10px; }
.kw-card--shot .kw-full .kw-photo { margin: 0 0 12px; }
@media (hover: none) { .kw-shot:hover .kw-glass { opacity: 1; filter: none; transform: none; } .kw-shot.is-revealed .kw-glass { opacity: 0; filter: blur(9px); transform: scale(1.06) translateY(-3%); } }
@media (prefers-reduced-motion: reduce) { .kw-glass { transition: opacity .3s ease; } .kw-shot:hover .kw-glass, .kw-shot.is-revealed .kw-glass { filter: none; transform: none; } }
@media (max-width: 560px) { .kw-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .kw-card.kw-card--shot { padding: 8px 8px 12px; } .kw-glass { padding: 10px 8px; gap: 6px; } .kw-glass .kw-pull { font-size: 12.5px !important; } .kw-bought { font-size: 7px; letter-spacing: .12em; } .kw-cue { font-size: 7px; padding: 4px 8px; } .kw-glass .kw-stars svg { width: 10px; height: 10px; } }

/* ===== One type system on every page =====
   Display face (Michroma): always uppercase and widely spaced, in one soft grey, exactly like "UGC CREATOR PORTFOLIO".
   Supporting face (Barlow): everything you read at length, i.e. body text, quotes, captions, small labels. */
:root { --type-ink: rgba(118,22,46,.86); }
h1, h2, .campaign-head h3, .work-card--campaign h3, .kw-cta > p, .rel-copy strong, .mu-info b, .mu-track h1, .mu-track .mu-h, .clip-creative .cs-kind {
  font-family: var(--head) !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: .15em !important; color: var(--type-ink); }
h1 { font-size: clamp(19px, 2.5vw, 30px) !important; line-height: 1.3 !important; max-width: none; }
h1 span { color: inherit !important; }
h2 { font-size: clamp(15px, 1.75vw, 22px) !important; line-height: 1.35 !important; }
.campaign-head h3 { font-size: 13px !important; line-height: 1.4 !important; }
.work-card--campaign h3 { font-size: clamp(13px, 1.4vw, 17px) !important; }
.mu-track h1, .mu-track .mu-h { font-size: clamp(20px, 3.2vw, 38px) !important; line-height: 1.2 !important; }
.mu-info b { font-size: clamp(12px, 1.3vw, 15px) !important; }
.rel-copy strong { font-size: clamp(12px, 1.15vw, 15px) !important; }
.kw-cta > p { font-size: clamp(12px, 1.3vw, 15px) !important; }
.clip-creative .cs-kind { font-size: clamp(10.5px, 1.05vw, 13px) !important; line-height: 1.4 !important; color: #ffffff; }
/* quotes are for reading, so they use the supporting face */
.kw-pull, .ks-quote blockquote { font-family: var(--body) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
.kw-pull { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.4; }
.kw-pull--big { font-size: clamp(21px, 2.5vw, 29px); line-height: 1.3; }
.kw-hero { text-align: center; padding: 34px 0 26px; } .kw-hero h1 { margin: 0 auto; }
h1, h2, .campaign-head h3, .work-card--campaign h3 { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 640px) {
  h2 { font-size: 14px !important; letter-spacing: .11em !important; }
  .campaign-head h3 { font-size: 10px !important; letter-spacing: .07em !important; line-height: 1.45 !important; }
  h1 { letter-spacing: .12em !important; }
}

/* ===== Name spans the tagline's width: its E over the tagline's first letter, its K over the last =====
   The size here is the starting point; a small script fine-tunes it to the pixel once the font has loaded. */
.hero > .hero-brand .wordmark--spotify, .sub-brand .wordmark--spotify { font-size: clamp(17.4px, calc(13.6px + .68vw), 24.8px) !important; letter-spacing: .14em !important; margin-right: -.14em; line-height: 1.15; }
.hero > .hero-brand .brand-tag, .sub-brand .brand-tag { letter-spacing: .2em !important; margin-right: -.2em; }
.hero > .hero-brand .brand-lockup, .sub-brand .brand-lockup { gap: 8px !important; }

/* ===== Header links: no buttons. Just the two labels in the site's lettering, sitting either side of the orb ===== */
.hdr-duo .hero-duo[data-trim="off"] { column-gap: 16px; }
.hdr-duo .hero-duo[data-trim="off"] a.duo-about, .hdr-duo .hero-duo[data-trim="off"] a.cta-explore {
  clip-path: none !important; -webkit-mask: none !important; mask: none !important; background: none !important; box-shadow: none !important; overflow: visible !important;
  min-height: 40px; padding: 0 !important; font-size: 11px !important; letter-spacing: .2em !important; color: rgba(118,22,46,.78) !important;
  transition: color .3s ease, text-shadow .4s ease !important; }
.hdr-duo .hero-duo[data-trim="off"] a.duo-about { justify-content: flex-end; }
.hdr-duo .hero-duo[data-trim="off"] a.cta-explore { justify-content: flex-start; }
.hdr-duo .hero-duo[data-trim="off"] a.duo-about:hover, .hdr-duo .hero-duo[data-trim="off"] a.duo-about:focus-visible,
.hdr-duo .hero-duo[data-trim="off"] a.cta-explore:hover, .hdr-duo .hero-duo[data-trim="off"] a.cta-explore:focus-visible {
  background: none !important; box-shadow: none !important; outline: none; color: #5e1225 !important; text-shadow: 0 0 14px rgba(128,24,50,.75), 0 0 30px rgba(130,25,51,.35); }
.hdr-duo .hero-duo[data-trim="off"] .duo-orb { margin: 0; }
.hdr-duo .hero-duo[data-trim="off"] .duo-net { display: none; }
.hdr-duo .hero-duo[data-trim="off"] .cta-arrow, .hdr-duo .hero-duo[data-trim="off"] .duo-arrow { opacity: .6; }
@media (max-width: 420px) { .hdr-duo .hero-duo[data-trim="off"] { column-gap: 10px; } .hdr-duo .hero-duo[data-trim="off"] a.duo-about, .hdr-duo .hero-duo[data-trim="off"] a.cta-explore { font-size: 9.4px !important; letter-spacing: .16em !important; } }

/* ===== Fewer lines: none under the date, none between the name and Campaigns ===== */
.hdr-band { border-bottom: 0 !important; padding-bottom: 8px; }
.work-section::before { display: none !important; }

/* ===== Campaigns heading: the intro line sits under it on the left, in the same lettering ===== */
.section-heading.section-heading--stack { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; }
.section-heading--stack .since { margin: 0; max-width: none; font: 400 11px/1.6 var(--head); letter-spacing: .18em; text-transform: uppercase; color: rgba(118,22,46,.62); }
@media (max-width: 640px) { .section-heading--stack .since { font-size: 9px; letter-spacing: .14em; } }

/* the Campaigns intro is one line, sized by script to match the width of the logo row under it */
.section-heading--stack .since { display: inline-block; white-space: nowrap; font-size: 8.6px; line-height: 1.5; align-self: flex-start; }
@media (max-width: 640px) { .section-heading--stack .since { font-size: 8.6px; letter-spacing: .18em; } }
.section-heading--stack .since.is-two { white-space: normal; line-height: 1.75; }
.section-heading--stack .since.is-two span { display: block; white-space: nowrap; }

/* ===== Header labels take over the old greeting's lettering: same face, size and time-of-day colour ===== */
.hdr-duo .hero-duo[data-trim="off"] a.duo-about, .hdr-duo .hero-duo[data-trim="off"] a.cta-explore { font-size: 11.5px !important; letter-spacing: .14em !important; color: #821933 !important; }
.hdr-duo .duo-word { white-space: nowrap; } .hdr-duo .duo-word .lc { display: inline-block; transition: filter .35s ease, text-shadow .4s ease; text-shadow: 0 0 16px rgba(130,25,51,.22); }
.hdr-duo .hero-duo[data-trim="off"] a:hover .lc, .hdr-duo .hero-duo[data-trim="off"] a:focus-visible .lc { filter: brightness(1.45) saturate(1.1); text-shadow: 0 0 14px rgba(128,24,50,.8), 0 0 30px rgba(130,25,51,.4); }
.hdr-duo .hero-duo[data-trim="off"] a.duo-about:hover, .hdr-duo .hero-duo[data-trim="off"] a.cta-explore:hover { text-shadow: none; }
@media (max-width: 420px) { .hdr-duo .hero-duo[data-trim="off"] a.duo-about, .hdr-duo .hero-duo[data-trim="off"] a.cta-explore { font-size: 10.5px !important; letter-spacing: .12em !important; } }
/* with the greeting gone the clock sits straight under the labels */
.hdr-band { grid-template-areas: ". duo side" ". clock ." !important; }
@media (max-width: 640px) { .hdr-band { grid-template-areas: "side" "duo" "clock" !important; } }
.hdr-band > .hdr-clock { margin-top: 0 !important; }

/* ===== Logo row: a quiet cue that it scrolls sideways ===== */
.campaign-nav--logos.more-r { -webkit-mask-image: linear-gradient(90deg, #000000 0, #000000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, #000000 0, #000000 calc(100% - 64px), transparent 100%); }
.campaign-nav--logos.more-l { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000000 56px, #000000 100%); mask-image: linear-gradient(90deg, transparent 0, #000000 56px, #000000 100%); }
.campaign-nav--logos.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000000 56px, #000000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000000 56px, #000000 calc(100% - 64px), transparent 100%); }
.cn-more { position: absolute; right: -6px; width: 18px; height: 18px; margin-top: -9px; color: #77172f; opacity: 0; pointer-events: none; transition: opacity .4s ease; filter: drop-shadow(0 0 6px rgba(130,25,51,.7)); }
.cn-more svg { display: block; width: 100%; height: 100%; }
.cn-more.is-on { opacity: .85; animation: cn-more 2.4s ease-in-out infinite; }
@keyframes cn-more { 0%, 100% { transform: translateX(0); opacity: .45; } 50% { transform: translateX(4px); opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .cn-more.is-on { animation: none; } }

/* ===== Feature review quote: the name's lettering and warm drifting colours, and it wisps when touched ===== */
.kw-pull.kw-pull--big.kw-ember { font-family: var(--head) !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: .12em !important;
  font-size: clamp(14.5px, 1.75vw, 22px); line-height: 1.6; text-shadow: none; cursor: default; -webkit-user-select: none; user-select: none; }
.kw-ember .w { display: inline-block; white-space: nowrap; }
.kw-ember .c { display: inline-block; color: #961c3b; animation: name-ember 6.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.24s); will-change: transform, filter, opacity; }
@keyframes kw-wisp { 0% { filter: none; transform: none; opacity: 1; } 38% { filter: blur(5px); transform: translate(calc((var(--i) - 22) * .28px), -8px) scale(1.14); opacity: .3; } 100% { filter: none; transform: none; opacity: 1; } }
.kw-ember.is-wisp .c { animation: name-ember 6.5s ease-in-out infinite alternate, kw-wisp 1.25s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * -.24s), calc(var(--i) * 20ms); }
@media (prefers-reduced-motion: reduce) { .kw-ember .c { animation-play-state: paused; } .kw-ember.is-wisp .c { animation: none; } }

/* ===== Brand logos live in one contained tray, with a small label saying what they do ===== */
.campaign-nav.campaign-nav--logos { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 0 0 26px; padding: 9px 14px 9px 16px;
  border: 1px solid rgba(97,18,38,.1); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px -18px rgba(0,0,0,0.14);
  overflow-x: auto; scrollbar-width: none; }
.campaign-nav.campaign-nav--logos::-webkit-scrollbar { display: none; }
.campaign-nav--logos .cn-label { flex: none; margin-right: 4px; padding-right: 12px; border-right: 1px solid rgba(97,18,38,.1); font: 400 8.5px/1 var(--head); letter-spacing: .18em; text-transform: uppercase; color: rgba(118,22,46,.62); white-space: nowrap; }
.campaign-nav--logos > a { flex: none; }
@media (max-width: 640px) { .campaign-nav.campaign-nav--logos { margin: 0 0 22px; padding: 8px 12px 8px 14px; gap: 9px; } .campaign-nav--logos .cn-label { font-size: 7.5px; letter-spacing: .14em; padding-right: 10px; } }
.work-section { padding-top: calc(var(--sec, 80px) * .55) !important; }
@media (min-width: 641px) { .campaign-nav.campaign-nav--logos { overflow: visible; } }
.cn-more { right: auto; }

/* ===== Header: time sits under "About", date under "Reviews"; nothing under the orb ===== */
.hdr-band { grid-template-areas: ". duo side" !important; }
@media (max-width: 640px) { .hdr-band { grid-template-areas: "side" "duo" !important; } }
.hdr-duo .hero-duo.duo-clock { align-items: start; }
.hdr-duo .hero-duo.duo-clock a.duo-about, .hdr-duo .hero-duo.duo-clock a.cta-explore { display: grid !important; grid-template-rows: 40px auto; justify-items: center; align-items: center; min-height: 0; gap: 0 !important; }
.hdr-duo .hero-duo.duo-clock a.duo-about { justify-self: end; } .hdr-duo .hero-duo.duo-clock a.cta-explore { justify-self: start; }
.hdr-duo .hero-duo.duo-clock .cta-orb, .hdr-duo .hero-duo.duo-clock .cta-vapor { display: none !important; }
.hdr-duo .duo-sub { display: block; margin-top: -5px; font: 800 9.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; color: #821933; opacity: .3; transition: opacity .45s ease; text-shadow: none; }
.hdr-duo .hero-duo a:hover .duo-sub, .hdr-duo .hero-duo a:focus-visible .duo-sub { opacity: 1; }
.hdr-duo .hero-duo.duo-clock .duo-glow { top: 20px; }

/* ===== Campaign tray: no rounded box. Two hairlines that fade out at the ends, with the label inside ===== */
.campaign-nav.campaign-nav--logos { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 18px !important; gap: 11px;
  background:
    linear-gradient(90deg, rgba(109,21,43,0), rgba(109,21,43,.34) 9%, rgba(109,21,43,.34) 72%, rgba(109,21,43,0)) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(109,21,43,0), rgba(109,21,43,.2) 9%, rgba(109,21,43,.2) 72%, rgba(109,21,43,0)) 0 100% / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.028) 12%, rgba(255,255,255,.028) 70%, rgba(255,255,255,0)) !important; }
.campaign-nav--logos .cn-label { display: grid; gap: 5px; border-right: 0; padding-right: 2px; margin-right: 0; }
.campaign-nav--logos .cn-label b { font: 400 9.5px/1 var(--head); letter-spacing: .2em; text-transform: uppercase; color: rgba(118,22,46,.86); }
.campaign-nav--logos .cn-label i { font: 600 8px/1 var(--body); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: rgba(118,22,46,.5); }
.cn-info { flex: none; width: 20px; height: 20px; margin-right: 6px; padding: 0; border: 1px solid rgba(109,21,43,.4); border-radius: 50%; background: none; cursor: pointer; color: #6b142a; font: 700 10.5px/1 var(--body); transition: background .3s ease, box-shadow .3s ease, color .3s ease; }
.cn-info:hover, .cn-info:focus-visible { outline: none; color: #ffffff; background: rgba(130,25,51,.22); box-shadow: 0 0 14px rgba(130,25,51,.5); }
@media (max-width: 640px) { .campaign-nav.campaign-nav--logos { padding: 10px 14px !important; } .campaign-nav--logos .cn-label b { font-size: 8.5px; letter-spacing: .16em; } .campaign-nav--logos .cn-label i { font-size: 7px; } }
/* the explanation panel matches the tray: square, hairline, readable */
.cn-hint { border-radius: 0 !important; max-width: min(100%, 620px); align-items: flex-start; margin-top: -8px !important; }
.cn-hint-copy { font-size: 13px; line-height: 1.5; } .cn-hint-copy b { font: 400 10.5px/1.4 var(--head); letter-spacing: .16em; text-transform: uppercase; }
.cn-hint-go { border-radius: 0 !important; white-space: nowrap; }
@media (max-width: 640px) { .cn-hint { flex-wrap: wrap; } .cn-hint-copy { flex: 1 1 200px; } }

/* ===== While the track plays: the page drops into shadow and the light pulses with the bass ===== */
.music-dim { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 2s ease;
  background:
    radial-gradient(circle calc(300px + var(--bass, 0) * 90px) at var(--dim-x, 50%) var(--dim-y, 38%), rgba(141,27,55, calc(var(--bass, 0) * .2)), rgba(141,27,55,0) 72%),
    radial-gradient(circle calc(230px + var(--bass, 0) * 80px) at var(--dim-x, 50%) var(--dim-y, 38%), rgba(244,228,231, calc(.14 - var(--bass, 0) * .12)), rgba(244,228,231,.52) 72%, rgba(244,229,231,.78) 100%); }
html.is-music .music-dim { opacity: 1; }
html.is-music .duo-glow { opacity: calc(.45 + var(--bass, 0) * .55); }
html.is-music .hero-brand .wm-real .c, html.is-music .sub-brand .wm-real .c { filter: brightness(calc(1 + var(--bass, 0) * .45)); }
html.is-music .portrait-orbit { filter: brightness(calc(1.1 + var(--bass, 0) * .8)) drop-shadow(0 0 calc(18px + var(--bass, 0) * 26px) rgba(130,25,51,.55)) !important; }
@media (prefers-reduced-motion: reduce) { .music-dim { transition: opacity .6s ease; } }

/* ===== Logo personalities: each logo has its own move, and a glow colour that changes every time ===== */
.campaign-nav--logos a { --h: 262; perspective: 300px; cursor: pointer; }
.campaign-nav--logos a.is-act .cn-logo { border-color: hsl(var(--h) 90% 72% / .9) !important; box-shadow: 0 0 0 1px hsl(var(--h) 90% 70% / .55), 0 0 20px hsl(var(--h) 95% 62% / .6) !important; filter: none !important; }
@keyframes lg-recess { 0%, 100% { transform: none; filter: none; } 35%, 60% { transform: scale(.8) translateY(2px); filter: brightness(.62); box-shadow: inset 0 6px 12px rgba(0,0,0,0.18), 0 0 0 1px hsl(var(--h) 90% 70% / .5); } }
@keyframes lg-shake { 0%, 100% { transform: none; } 15% { transform: translateX(-4px) rotate(-7deg); } 30% { transform: translateX(4px) rotate(6deg); } 45% { transform: translateX(-3px) rotate(-5deg); } 60% { transform: translateX(3px) rotate(4deg); } 80% { transform: translateX(-1px) rotate(-2deg); } }
@keyframes lg-flex { 0%, 100% { transform: none; } 25% { transform: scale(1.26, .78); } 50% { transform: scale(.86, 1.2); } 72% { transform: scale(1.08, .94); } }
@keyframes lg-vanish { 0% { transform: none; opacity: 1; filter: none; } 35% { transform: scale(.55) rotate(-10deg); opacity: 0; filter: blur(7px); } 55% { transform: scale(1.3); opacity: 0; filter: blur(8px) brightness(1.6); } 100% { transform: none; opacity: 1; filter: none; } }
@keyframes lg-flip { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
@keyframes lg-float { 0%, 100% { transform: none; } 40% { transform: translateY(-11px) rotate(4deg); } 70% { transform: translateY(2px) rotate(-1deg); } 85% { transform: translateY(-3px); } }
@keyframes lg-spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.14); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes lg-ripple { 0% { transform: scale(1); box-shadow: 0 0 0 0 hsl(var(--h) 95% 70% / .75); } 45% { transform: scale(1.08); box-shadow: 0 0 0 11px hsl(var(--h) 95% 70% / 0); } 46% { box-shadow: 0 0 0 0 hsl(var(--h) 95% 70% / .6); } 100% { transform: scale(1); box-shadow: 0 0 0 13px hsl(var(--h) 95% 70% / 0); } }
@keyframes lg-swing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-17deg); } 45% { transform: rotate(13deg); } 68% { transform: rotate(-7deg); } 85% { transform: rotate(3deg); } }
.campaign-nav--logos a:nth-of-type(9n+1).is-act .cn-logo { animation: lg-recess .7s cubic-bezier(.3,.7,.2,1) both; }
.campaign-nav--logos a:nth-of-type(9n+2).is-act .cn-logo { animation: lg-shake .6s ease both; }
.campaign-nav--logos a:nth-of-type(9n+3).is-act .cn-logo { animation: lg-flex .7s cubic-bezier(.3,.7,.2,1) both; }
.campaign-nav--logos a:nth-of-type(9n+4).is-act .cn-logo { animation: lg-vanish .85s ease both; }
.campaign-nav--logos a:nth-of-type(9n+5).is-act .cn-logo { animation: lg-flip .8s cubic-bezier(.3,.7,.2,1) both; }
.campaign-nav--logos a:nth-of-type(9n+6).is-act .cn-logo { animation: lg-float .8s cubic-bezier(.3,.7,.2,1) both; }
.campaign-nav--logos a:nth-of-type(9n+7).is-act .cn-logo { animation: lg-spin .75s cubic-bezier(.3,.7,.2,1) both; }
.campaign-nav--logos a:nth-of-type(9n+8).is-act .cn-logo { animation: lg-ripple .9s ease-out both; }
.campaign-nav--logos a:nth-of-type(9n+9).is-act .cn-logo { animation: lg-swing .85s ease both; transform-origin: 50% 0; }
@media (prefers-reduced-motion: reduce) { .campaign-nav--logos a.is-act .cn-logo { animation: none !important; } }
/* label: three short lines */
.campaign-nav--logos .cn-label { gap: 4px; }

/* ===== Logos are not boxed in: no tray lines or fill. They hang in their own space like a slow carousel,
   each one gently turning and rising on its own beat ===== */
.campaign-nav.campaign-nav--logos { background: none !important; padding: 10px 4px !important; gap: 14px; }
@keyframes lg-idle { 0%, 100% { transform: translateY(0) rotateY(-16deg) rotateZ(-1.2deg); } 50% { transform: translateY(-4px) rotateY(16deg) rotateZ(1.2deg); } }
.campaign-nav--logos a { perspective: 320px; }
.campaign-nav--logos a .cn-logo { animation: lg-idle 6.5s ease-in-out infinite; will-change: transform; }
.campaign-nav--logos a:nth-of-type(9n+1) .cn-logo { animation-delay: -.2s; animation-duration: 6.2s; }
.campaign-nav--logos a:nth-of-type(9n+2) .cn-logo { animation-delay: -1.1s; animation-duration: 7.1s; }
.campaign-nav--logos a:nth-of-type(9n+3) .cn-logo { animation-delay: -2.3s; animation-duration: 5.8s; }
.campaign-nav--logos a:nth-of-type(9n+4) .cn-logo { animation-delay: -3.0s; animation-duration: 6.9s; }
.campaign-nav--logos a:nth-of-type(9n+5) .cn-logo { animation-delay: -3.9s; animation-duration: 6.4s; }
.campaign-nav--logos a:nth-of-type(9n+6) .cn-logo { animation-delay: -4.6s; animation-duration: 7.4s; }
.campaign-nav--logos a:nth-of-type(9n+7) .cn-logo { animation-delay: -5.2s; animation-duration: 6.0s; }
.campaign-nav--logos a:nth-of-type(9n+8) .cn-logo { animation-delay: -1.7s; animation-duration: 6.7s; }
.campaign-nav--logos a:nth-of-type(9n+9) .cn-logo { animation-delay: -2.8s; animation-duration: 7.0s; }
/* a played logo's own move still takes over while it runs */
.campaign-nav--logos a:nth-of-type(9n+1).is-act .cn-logo { animation: lg-recess .7s cubic-bezier(.3,.7,.2,1) both; }
.campaign-nav--logos a:nth-of-type(9n+2).is-act .cn-logo { animation: lg-shake .6s ease both; }
.campaign-nav--logos a:nth-of-type(9n+3).is-act .cn-logo { animation: lg-flex .7s cubic-bezier(.3,.7,.2,1) both; }
.campaign-nav--logos a:nth-of-type(9n+4).is-act .cn-logo { animation: lg-vanish .85s ease both; }
.campaign-nav--logos a:nth-of-type(9n+5).is-act .cn-logo { animation: lg-flip .8s cubic-bezier(.3,.7,.2,1) both; }
.campaign-nav--logos a:nth-of-type(9n+6).is-act .cn-logo { animation: lg-float .8s cubic-bezier(.3,.7,.2,1) both; }
.campaign-nav--logos a:nth-of-type(9n+7).is-act .cn-logo { animation: lg-spin .75s cubic-bezier(.3,.7,.2,1) both; }
.campaign-nav--logos a:nth-of-type(9n+8).is-act .cn-logo { animation: lg-ripple .9s ease-out both; }
.campaign-nav--logos a:nth-of-type(9n+9).is-act .cn-logo { animation: lg-swing .85s ease both; transform-origin: 50% 0; }
@media (prefers-reduced-motion: reduce) { .campaign-nav--logos a .cn-logo { animation: none !important; } }
@media (max-width: 640px) { .campaign-nav.campaign-nav--logos { padding: 10px 2px !important; gap: 12px; } }

/* ===== Logos stand on their own: no dark tile, border or box behind them. Square artwork just gets soft corners,
   round artwork stays round, and marks with no background float free ===== */
.campaign-nav--logos img.cn-logo { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 11px; object-fit: cover; padding: 0; filter: none; }
.campaign-nav--logos a:hover img.cn-logo, .campaign-nav--logos a:focus-visible img.cn-logo, .campaign-nav--logos a.is-act img.cn-logo, .cn-play a.is-grab img.cn-logo { border: 0 !important; box-shadow: none !important; }
.campaign-nav--logos img.cn-logo[src*="triips"] { border-radius: 50%; }                                   /* a circle, shown as a circle */
.campaign-nav--logos img.cn-logo[src*="ancestral"], .campaign-nav--logos img.cn-logo[src*="easymix"] { border-radius: 0; object-fit: contain; }   /* marks with no background */
.campaign-nav--logos img.cn-logo[src*="polsia"] { clip-path: inset(5.5% round 20%); }                     /* trims the thin dark frame baked into the file */
/* the colour glow now follows each logo's real outline */
.campaign-nav--logos a.is-act { filter: drop-shadow(0 0 7px hsl(var(--h) 95% 66% / .9)) drop-shadow(0 0 16px hsl(var(--h) 95% 60% / .45)); }
.campaign-nav--logos a:hover:not(.is-act) { filter: drop-shadow(0 0 8px rgba(121,23,48,.5)); }

/* ===== New client logos, and the sound bank switch ===== */
.campaign-nav--logos img.cn-logo.cn-logo--free { border-radius: 0; object-fit: contain; }                              /* The STOP Clinic: its own octagon shape */
.campaign-nav--logos img.cn-logo.cn-logo--wide { width: auto; height: 30px; aspect-ratio: 391 / 150; border-radius: 0; object-fit: contain; }   /* Regius: a wide wordmark, shown whole */
@media (max-width: 640px) { .campaign-nav--logos img.cn-logo.cn-logo--wide { height: 27px; } }
.cn-bank { flex: none; margin-right: 6px; padding: 5px 9px; border: 1px solid rgba(109,21,43,.4); border-radius: 0; background: none; cursor: pointer; color: #6b142a; font: 400 8px/1 var(--head); letter-spacing: .18em; text-transform: uppercase; transition: background .3s ease, box-shadow .3s ease, color .3s ease, border-color .3s ease; }
.cn-bank:hover, .cn-bank:focus-visible { outline: none; color: #ffffff; background: rgba(130,25,51,.2); box-shadow: 0 0 14px rgba(130,25,51,.45); }
.cn-bank[data-bank="DARK"] { color: #871a35; border-color: rgba(169,32,66,.6); box-shadow: inset 0 0 12px rgba(0,0,0,0.16); }

/* with more clients the logo row wraps onto a second line on wide screens (it still scrolls sideways on phones) */
@media (min-width: 641px) { .campaign-nav.campaign-nav--logos { flex-wrap: wrap; row-gap: 14px; width: auto; } }
.campaign-nav--logos .cn-logo--mono { font-size: 10px; letter-spacing: .02em; }

/* more wide logos: Source NRG (neon, no background) and Adrenaline Autohaus (on its white plate) */
.campaign-nav--logos img.cn-logo.cn-logo--nrg { height: 44px; aspect-ratio: 960 / 520; }
.campaign-nav--logos img.cn-logo.cn-logo--tile { height: 30px; aspect-ratio: 1280 / 380; border-radius: 7px; object-fit: cover; }
@media (max-width: 640px) { .campaign-nav--logos img.cn-logo.cn-logo--nrg { height: 40px; } .campaign-nav--logos img.cn-logo.cn-logo--tile { height: 27px; } }

.campaign-nav--logos img.cn-logo[src*="cover6"] { border-radius: 50%; }   /* round emblem, shown round */

/* ===== Canvas caption: release status sits at the very top of the canvas, always readable ===== */
.mu-cap { position: absolute; inset: 0 0 auto 0; z-index: 3; display: grid; padding: 16px 14px 34px; text-align: center; pointer-events: none;
  background: linear-gradient(180deg, rgba(243,228,230,.82) 0%, rgba(243,228,230,.5) 52%, rgba(243,228,230,0) 100%); }
.mu-cap-set { grid-area: 1 / 1; display: grid; gap: 6px; justify-items: center; opacity: 0; transform: translateY(-4px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.mu-cap-set.is-on { opacity: 1; transform: none; transition-delay: .15s; }
.mu-cap b { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 700 10px/1.35 var(--body); letter-spacing: .15em; text-transform: uppercase; color: #5e1225; text-shadow: 0 1px 10px rgba(0,0,0,0.14); text-wrap: balance; }
.mu-cap small { font: 600 10px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #6e152b; text-shadow: 0 1px 8px rgba(0,0,0,0.14); }
.mu-cap-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #1ed760; box-shadow: 0 0 8px rgba(30,215,96,.8); animation: mu-cap-dot 2.2s ease-in-out infinite; }
@keyframes mu-cap-dot { 50% { opacity: .45; box-shadow: 0 0 3px rgba(30,215,96,.5); } }
@media (max-width: 480px) { .mu-cap { padding: 13px 10px 28px; } .mu-cap b { font-size: 9px; letter-spacing: .11em; } .mu-cap small { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .mu-cap-dot { animation: none; } .mu-cap-set { transition: opacity .2s ease; transform: none; } }
/* On the music page the canvas is the show: the shadow stays off it and only the page around it dips */
.page-music .music-dim { background:
    radial-gradient(circle calc(380px + var(--bass, 0) * 90px) at var(--dim-x, 50%) var(--dim-y, 45%), rgba(141,27,55, calc(var(--bass, 0) * .1)), rgba(141,27,55,0) 72%),
    radial-gradient(circle calc(360px + var(--bass, 0) * 60px) at var(--dim-x, 50%) var(--dim-y, 45%), rgba(244,228,231,0) 0%, rgba(244,228,231,0) 62%, rgba(244,228,231,.3) 84%, rgba(244,229,231,.5) 100%); }

/* =====================================================================
   TEMPLATE · Stage 2: labeled upload slots (see slots.js)
   Empty: dashed lavender border, dark card, Michroma label, Barlow size + path.
   Filled: the real file covers the slot, the placeholder is removed.
   ===================================================================== */
.slot { position: relative; display: block; width: 100%; overflow: hidden; border-radius: inherit; }
.slot:not(.slot--standin) { aspect-ratio: var(--slot-ratio, auto); }
.slot[data-free] { aspect-ratio: auto; height: 100%; }
.slot > .slot-media { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.slot--empty { min-height: 34px; border: 1px dashed rgba(117,22,46,.55); border-radius: var(--slot-radius, 13px); background:
  repeating-linear-gradient(135deg, rgba(117,22,46,.035) 0 8px, transparent 8px 21px), var(--card); }
.slot-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: var(--f2); text-align: center; pointer-events: none; }
.slot-ph-tag { font: 400 8px/1 var(--head); letter-spacing: .24em; color: var(--gold); opacity: .8; }
.slot-ph-label { max-width: 100%; font: 400 clamp(9px, 1.05vw, 11px)/1.35 var(--head); letter-spacing: .15em; text-transform: uppercase; color: var(--white); overflow-wrap: break-word; hyphens: manual; }
.slot-ph-size { font: 600 11px/1.3 var(--body); letter-spacing: .04em; color: var(--muted); }
.slot-ph-path { max-width: 100%; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.28); font: 500 10.5px/1.4 ui-monospace, "SF Mono", Menlo, monospace; color: #6f152c; overflow-wrap: break-word; }
.slot--compact .slot-ph { padding: 0; }
.slot-ph-short { font: 400 11px/1 var(--head); color: var(--gold); letter-spacing: 0; }
.slot--filled { border: 0; background: none; }
.slot-img--empty { display: none !important; }
.slot--standin { display: block; }
@media (max-width: 420px) { .slot-ph-path { font-size: 9.5px; } .slot-ph-label { font-size: 9px; } }

/* ===== TEMPLATE · Stage 4: campaign slot stand-ins ===== */
.campaign-nav--logos .slot--standin.cn-logo { flex: none; width: 34px; height: 34px; border-radius: 11px; }
.campaign-nav--logos .slot--standin.cn-logo--wide { width: 78px; height: 30px; border-radius: 7px; }
.campaign-brand .slot--standin.brand-logo { flex: none; width: 28px; height: 28px; border-radius: 8px; }
.clip-thumb { position: relative; }
.clip-thumb > .slot--standin { position: absolute; inset: 0; width: auto; border-radius: inherit; z-index: 0; }
.clip-thumb > .slot--standin .slot-ph { padding: var(--f1); }
@media (max-width: 640px) { .campaign-nav--logos .slot--standin.cn-logo { width: 30px; height: 30px; } }

/* ===== TEMPLATE · Stage 5: small stand-ins ===== */
.slot--small .slot-ph { padding: 4px; gap: 3px; }
.slot--small .slot-ph-label, .slot--small .slot-ph-path { display: none; }
.slot--small .slot-ph-size { font-size: 10px; line-height: 1.2; }
.slot--small .slot-ph-tag { font-size: 7px; letter-spacing: .08em; }

/* ===== TEMPLATE · Stage 7: sound switched off in site.config.js ===== */
.no-sound .sound-toggle, .no-sound .soc-sep:last-of-type { display: none !important; }

/* ===== TEMPLATE · Stage 8: sub-page slot stand-ins ===== */
.mu-cv--soon > .slot--standin { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; border-radius: inherit; }
.mu-canvas .slot-ph > span { display: block; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; transform: none; position: static; }
.mu-canvas .slot-ph > .slot-ph-tag { font: 400 8px/1 var(--head); letter-spacing: .24em; color: var(--gold); }
.mu-canvas .slot-ph > .slot-ph-label { font: 400 11px/1.35 var(--head); letter-spacing: .15em; color: var(--white); }
.mu-canvas .slot-ph > .slot-ph-size { font: 600 11px/1.3 var(--body); color: var(--muted); }
.mu-canvas .slot-ph > .slot-ph-path { padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.28); font: 500 10.5px/1.4 ui-monospace, Menlo, monospace; color: #6f152c; letter-spacing: 0; text-transform: none; }
.kw-video > .slot { height: 100%; aspect-ratio: auto; border-radius: inherit; }

/* ===== QA fix: reduced motion =====
   The name-fit script sizes the name to its tagline by measuring, resizing and measuring again. With reduced motion on,
   the name's layers transition every property (near-instantly), so the second measurement still saw the old size and the
   name ran away to its maximum. Font size never transitions on the fitted name, so the fit settles in one pass. */
@media (prefers-reduced-motion: reduce) {
  .brand-lockup .wordmark--spotify, .brand-lockup .wordmark--spotify .wm-layer, .brand-lockup .wordmark--spotify .w,
  .brand-lockup .brand-tag, .brand-lockup .brand-tag .bt-real, .brand-lockup .brand-tag .bt-alt, .brand-lockup .brand-tag .w { transition-property: opacity, color, text-shadow !important; }
}

/* ===== QA fix: smallest phones (under 360px) =====
   The two-up campaign cards get narrow enough that "PERFORMER" broke mid-word. The card titles ease down a touch
   so a nine-letter word stays whole. */
@media (max-width: 359px) { .campaign-head h3 { font-size: 9px !important; letter-spacing: .04em !important; } }

/* =====================================================================
   EGGSHELL + BURGUNDY THEME (Joy Frank)
   The site is eggshell white; burgundy is the treatment. --tone runs from
   -1 (deepest burgundy) to 1 (lightest) and is driven by js/tone.js:
   moving the cursor or a finger up lightens the burgundy, moving down
   deepens it, and fast movement or scrolling adds a brief lift.
   ===================================================================== */
@property --tone { syntax: "<number>"; inherits: true; initial-value: 0; }
html:root {
  color-scheme: light;
  --tone: 0;
  --bg: #f4eedd;  --bg-soft: #efe8d5;  --card: #faf6ea;  --card-hi: #fdfaf1;  --line: #dcd0bd;
  --white: #2b1419;  --muted: #6f5a5e;  --type-ink: rgba(58,30,37,.88);
  --gold:      hsl(345 70% calc(30% + var(--tone) * 9%));    /* accent text */
  --om-violet: hsl(348 62% calc(36% + var(--tone) * 9%));
  --purple:    hsl(345 72% calc(31% + var(--tone) * 10%));   /* burgundy */
  --name-red:  hsl(345 76% calc(29% + var(--tone) * 10%));
  --glow-edge:       hsl(345 70% calc(32% + var(--tone) * 10%) / .34);
  --glow-soft:       hsl(345 70% calc(32% + var(--tone) * 10%) / .12);
  --glow-hover-edge: hsl(346 74% calc(36% + var(--tone) * 10%) / .58);
  --glow-hover-soft: hsl(346 74% calc(36% + var(--tone) * 10%) / .2);
  --float-shadow: 0 22px 48px -18px rgba(70,24,36,.26), 0 8px 18px -10px rgba(70,24,36,.16);
}
html, body { background-color: var(--bg); color: var(--white); }
.tone-wash {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58vmax 58vmax at var(--tx, 50%) var(--ty, 30%),
    hsl(345 72% calc(34% + var(--tone) * 12%) / calc(.09 + var(--te, 0) * .13)), transparent 64%);
}

/* Second page: no releases means no empty player box */
.mu-stage[hidden] { display: none !important; }
.page-music .mu-live { margin-top: var(--f4); }

/* Petals (js/petals.js): Joy's effect in place of the energy arcs */
.petal-drift { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.duo-orb.has-bloom > canvas { opacity: 0; }
.duo-orb .bloom { position: absolute; inset: 12%; width: 76%; height: 76%; pointer-events: none; animation: bloom-turn 70s linear infinite; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.duo-orb .bloom-out  { fill: hsl(345 70% calc(34% + var(--tone) * 10%) / .78); }
.duo-orb .bloom-in   { fill: hsl(350 66% calc(52% + var(--tone) * 10%) / .85); }
.duo-orb .bloom-core { fill: #f4eedd; }
.duo-orb.bloom-spin .bloom { animation: bloom-turn 70s linear infinite, bloom-flick .9s cubic-bezier(.2,.7,.2,1); }
@keyframes bloom-turn  { to { rotate: 360deg; } }
@keyframes bloom-flick { from { scale: .82; } 50% { scale: 1.12; } to { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .duo-orb .bloom { animation: none; } }

/* Dahlia emblem: ring colours, darkest outside to a lighter heart */
.duo-orb .bloom { inset: 6%; width: 88%; height: 88%; }
.duo-orb .bloom-out   { fill: hsl(345 72% calc(24% + var(--tone) * 8%) / .92); }
.duo-orb .bloom-mid   { fill: hsl(345 72% calc(31% + var(--tone) * 9%) / .95); }
.duo-orb .bloom-in    { fill: hsl(346 70% calc(39% + var(--tone) * 9%)); }
.duo-orb .bloom-heart { fill: hsl(348 66% calc(50% + var(--tone) * 9%)); }
.duo-orb .bloom path  { stroke: rgba(40,4,14,.28); stroke-width: .6; }