/*
 * Tiago Paiva - personal site.
 * Layout: full-bleed photo hero with the name; a frosted sheet rises over the blurred photo with
 * the live calendar, YouTube, partnerships and socials. Photo focal points, partner hues and the
 * Topics icon mask URL come from content.css, which scripts/build.mjs generates from content/.
 */

/* ---------- Fonts (self-hosted, latin subset, SIL Open Font License) ---------- */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/figtree-variable-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-variable-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --night: #12100c; /* warm black */
  --plum: #1f1b14;
  --linen: #f6f0e8; /* text */
  --haze: #b3ab9b; /* muted text, 8.3:1 on --night */
  --tape: #f6d335; /* NONSENSE caution-tape yellow */
  --mustard: #f0b532; /* NONSENSE backdrop */
  --ink: #121212;
  --twitch: #9146ff;
  --yt: #ff0033;
  /* Topics brand, measured from the official dark app icon (a reference only, the opaque tile is
     not shipped): its diagonal background (navy to near-black violet) and the butterfly's blue
     and violet. Topics elements sit on this gradient, never on white. */
  --topics-bg-start: #012348;
  --topics-bg-mid: #0c1830;
  --topics-bg-end: #0c0011;
  --topics-blue: #307fe2;
  --topics-violet: #753bbd;
  --topics-bg: linear-gradient(
    135deg,
    var(--topics-bg-start),
    var(--topics-bg-mid) 50%,
    var(--topics-bg-end)
  );

  --glass-fill: rgba(246, 240, 232, 0.07);
  --glass-fill-strong: rgba(246, 240, 232, 0.13);

  --display: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --tape-face: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --sans: 'Figtree', system-ui, -apple-system, sans-serif;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
  --gutter: clamp(16px, 4vw, 56px);
  --section-gap: clamp(80px, 13vh, 150px);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--night);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--linen);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--tape);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

section[id] {
  scroll-margin-top: 96px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 50;
  top: 16px;
  left: 16px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--tape);
  color: var(--ink);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ---------- Backdrop: photo + drifting coloured light ---------- */
.backdrop {
  /* The photo starts below the floating nav so the face is never behind it */
  --photo-top: clamp(76px, 12vh, 128px);
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Both photo layers sit under the nav, are anchored to their top edge (so the zoom never pushes
   the face back up) and fade into the page background instead of starting on a hard line */
.backdrop img {
  position: absolute;
  top: var(--photo-top);
  left: 0;
  width: 100%;
  height: calc(100% - var(--photo-top));
  object-fit: cover;
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 44px);
  mask-image: linear-gradient(180deg, transparent 0, #000 44px);
}

.backdrop .sharp {
  transform: scale(1.16);
  animation: bg-in 2.2s var(--ease-out) 0.1s forwards;
}

/* The fade-in lives on a veil over the photo, not on the photo: Chrome only reports Largest
   Contentful Paint for elements first painted with opacity above 0, and every other hero
   element also starts hidden, so a fading photo left the page without any LCP at all. */
.backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--night);
  pointer-events: none;
  animation: veil-out 2.2s var(--ease-out) 0.1s forwards;
}

.backdrop .soft {
  filter: blur(34px) saturate(1.3) brightness(0.45);
  transform: scale(1.15);
  opacity: 0;
}

.backdrop .shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 16, 12, 0) 35%, rgba(18, 16, 12, 0.5) 100%),
    linear-gradient(
      180deg,
      rgba(18, 16, 12, 0.4) 0%,
      rgba(18, 16, 12, 0) 22%,
      rgba(18, 16, 12, 0.2) 60%,
      rgba(18, 16, 12, 0.95) 100%
    );
}

@keyframes bg-in {
  to {
    transform: scale(1.02);
  }
}

@keyframes veil-out {
  to {
    opacity: 0;
  }
}

.lights {
  position: absolute;
  inset: -20%;
  mix-blend-mode: screen;
  opacity: 0;
  animation: fade-in 2.4s ease 0.6s forwards;
}

.light {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
}

.l1 {
  top: -5%;
  right: -5%;
  background: radial-gradient(closest-side, rgba(246, 211, 53, 0.34), transparent);
  animation: drift1 18s ease-in-out infinite alternate;
}

.l2 {
  bottom: 0;
  left: 10%;
  background: radial-gradient(closest-side, rgba(240, 150, 40, 0.3), transparent);
  animation: drift2 22s ease-in-out infinite alternate;
}

.l3 {
  top: 30%;
  left: 45%;
  width: 45vmax;
  height: 45vmax;
  background: radial-gradient(closest-side, rgba(145, 70, 255, 0.22), transparent);
  animation: drift3 16s ease-in-out infinite alternate;
}

@keyframes drift1 {
  to {
    transform: translate(-18vw, 14vh) scale(1.15);
  }
}

@keyframes drift2 {
  to {
    transform: translate(22vw, -18vh) scale(0.85);
  }
}

@keyframes drift3 {
  to {
    transform: translate(-25vw, 10vh) scale(1.2);
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

.spot {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    closest-side,
    rgba(246, 211, 53, 0.15),
    rgba(240, 150, 40, 0.06) 55%,
    transparent
  );
  opacity: 0;
  transition: opacity 0.6s;
}

.spot.on {
  opacity: 1;
}

/* ---------- Glass primitive ---------- */
.glass {
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 14px 44px rgba(0, 0, 0, 0.3);
}

.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.02) 60%,
    rgba(255, 255, 255, 0.18)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ---------- Liquid glass ----------
   Refraction for the glass that sits over sharp photos. assets/js/liquid-glass.js builds one SVG
   filter per `.lg` element (lens rim + liquid warp + chromatic split + specular), exposes it as
   --lg-url and adds `lg-on` to <html>, which it only does where the layers below
   are known to render (Chromium) and never with prefers-reduced-transparency. Everywhere else the
   frosted `.glass` above stays as it is.
   With `lg-on` each surface is three layers: `::after` (effect: backdrop blur, distorted and clipped
   to the element's shape by the filter), `::before` (tint + shine: inset highlights) and the content
   on top, which is never filtered.
   Tuning (read by the script, so changes apply on the next resize or reload): --lg-bezel rim width,
   --lg-refraction largest lens shift as a fraction of the bezel, --lg-liquid peak shift of the liquid
   warp in px, --lg-liquid-size ripple size in px ("x y" for long surfaces), --lg-specular the filter's
   rim highlight, --lg-dispersion the chromatic spread (0 = none), --lg-pad how far the effect layer
   reaches past the element (must exceed --lg-liquid). Read by CSS only: --lg-frost (blur and
   saturation before the distortion; little blur lets the warp show, text over busy photos needs
   more) and --lg-tint (keeps labels readable over bright photo areas). */
.lg {
  --lg-bezel: 26px;
  --lg-refraction: 1;
  --lg-liquid: 14px;
  --lg-liquid-size: 140px;
  --lg-specular: 0.55;
  --lg-dispersion: 0.08;
  --lg-pad: 24px;
  --lg-frost: blur(3px) saturate(1.7);
  --lg-tint: rgba(18, 16, 12, 0.14);
}

/* The element itself becomes a plain stacking context: no fill or backdrop of its own (either would
   sit under the effect layer, or cut it off from the page behind) */
.lg-on .lg {
  isolation: isolate;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 6px 6px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 0, 0, 0.1);
}

.lg-on .ep.lg {
  position: relative;
}

/* Effect layer. It reaches --lg-pad past the element so the warp can pull in what is just outside,
   like real glass; the filter itself clips the result back to the element's shape. No fill here:
   Chromium composites a background painted inside the filtered layer about twice as strongly (a
   0.22 tint darkened the panel from luminance 64 to 42), so the tint lives on the shine layer. */
.lg-on .lg::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--lg-pad));
  z-index: -2;
  pointer-events: none;
  -webkit-backdrop-filter: var(--lg-frost);
  backdrop-filter: var(--lg-frost);
  filter: var(--lg-url);
}

/* Tint + shine layer, between the effect layer and the content: crisp light on the top-left inner
   edge, a softer counter-light bottom-right. Replaces the gradient hairline of `.glass` */
.lg-on .lg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 0;
  pointer-events: none;
  background: var(--lg-tint);
  -webkit-mask: none;
  mask: none;
  box-shadow:
    inset 0 -10px 18px -12px rgba(0, 0, 0, 0.35),
    inset 0 8px 16px -14px rgba(255, 255, 255, 0.12);
}

.lg-on .btn-ghost.lg:hover {
  --lg-tint: rgba(246, 240, 232, 0.12);
}

.live-pill.lg {
  --lg-bezel: 36px;
}

.ep.lg {
  --lg-bezel: 14px;
  --lg-refraction: 0.7;
  --lg-liquid: 6px;
  --lg-liquid-size: 90px;
  --lg-tint: rgba(255, 255, 255, 0.08);
}

/* The nav is a full capsule lens: the bezel spans its whole height (clamped to half of it by the
   script), so everything scrolling under it bends like iOS 26 bars. Wide, flat ripples suit its
   1180 x 56 shape. Little frost keeps the warp visible; a soft text shadow keeps the labels
   readable over busy content. */
.nav.lg {
  --lg-bezel: 28px;
  --lg-refraction: 1.1;
  --lg-liquid: 16px;
  --lg-liquid-size: 300px 80px;
  --lg-pad: 32px;
  --lg-specular: 0.6;
  --lg-frost: blur(1.5px) saturate(1.8);
  --lg-tint: rgba(18, 16, 12, 0.26);
}

.lg-on .nav.lg .id-text,
.lg-on .nav.lg .tab {
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.7),
    0 1px 10px rgba(0, 0, 0, 0.6);
}

/* The muted handle needs full contrast once bright content can sit right behind it */
.lg-on .nav.lg .id-text small {
  color: var(--linen);
}

/* The partner panel carries a paragraph over the photo: more frost and a darker tint */
.panel.lg {
  --lg-bezel: 22px;
  --lg-liquid: 20px;
  --lg-liquid-size: 240px 150px;
  --lg-frost: blur(6px) saturate(1.6);
  --lg-tint: rgba(18, 16, 12, 0.22);
}

.lg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  z-index: 30;
  top: max(14px, env(safe-area-inset-top, 0px));
  left: 50%;
  width: min(1180px, calc(100% - 32px));
  transform: translate(-50%, -24px);
  opacity: 0;
  animation: nav-in 1s var(--spring) 1.3s forwards;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 7px 8px 7px 7px;
  border-radius: 999px;
  transition: background-color 0.4s;
}

.nav.scrolled {
  background: rgba(18, 16, 12, 0.5);
}

@keyframes nav-in {
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-radius: 999px;
}

.ring {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  padding: 2px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.25);
}

.avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--night);
}

.id-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.id-text b {
  font-weight: 700;
  font-size: 15px;
}

.id-text small {
  font-size: 12.5px;
  color: var(--haze);
  white-space: nowrap;
}

.id-text small[data-when='live'] {
  color: var(--linen);
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 2px;
}

.tab {
  font-size: 14px;
  font-weight: 600;
  color: var(--haze);
  padding: 8px 14px;
  border-radius: 999px;
  transition:
    color 0.25s,
    background-color 0.25s;
}

.tab:hover {
  color: var(--linen);
}

.tab[aria-current='true'] {
  color: var(--linen);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.socials {
  display: flex;
  gap: 6px;
  justify-self: end;
}

.social {
  --brand-bg: transparent;
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  transition:
    transform 0.45s var(--spring),
    box-shadow 0.3s;
}

/* Every glyph is white on the neutral glass circle. The brand treatment fades in as an overlay
   (gradients cannot be transitioned as a background), underneath the glyph */
.social::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand-bg);
  opacity: 0;
  transition: opacity 0.3s;
}

.social svg,
.social .tc-mark {
  position: relative;
}

.social svg {
  width: 17px;
  height: 17px;
}

.social .tc-mark {
  width: 20px;
  height: 20px;
}

.social:hover,
.social:focus-visible {
  transform: translateY(-3px) scale(1.12) rotate(-6deg);
}

.social:hover::before,
.social:focus-visible::before {
  opacity: 1;
}

/* Topics: the white glyph hands over to the official transparent butterfly in full colour. The
   circle itself takes the Topics gradient through the shared ::before overlay (--brand-bg). */
.social.tc {
  --brand-bg: var(--topics-bg);
}

.social .tc-butterfly {
  position: relative;
  grid-area: 1 / 1;
  width: 22px;
  height: 22px;
  display: block;
  opacity: 0;
  transition: opacity 0.3s;
}

.social .tc-mark {
  grid-area: 1 / 1;
}

.social.tc .tc-mark {
  transition: opacity 0.3s;
}

.social.tc:hover .tc-butterfly,
.social.tc:focus-visible .tc-butterfly {
  opacity: 1;
}

.social.tc:hover,
.social.tc:focus-visible {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--topics-blue) 70%, transparent);
}

.social.tc:hover .tc-mark,
.social.tc:focus-visible .tc-mark {
  opacity: 0;
}

.social.tw {
  --brand-bg: var(--twitch);
}

.social.yt {
  --brand-bg: var(--yt);
}

.social.ig {
  --brand-bg: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}

.social.tt {
  --brand-bg: #000;
}

.social.tt:hover,
.social.tt:focus-visible {
  box-shadow:
    -2px -2px 0 #25f4ee,
    2px 2px 0 #fe2c55;
}

/* Topics links take the brand blue for their focus ring instead of the site's tape yellow */
.social.tc:focus-visible,
.btn-tc:focus-visible,
.big-social.tc:focus-visible {
  outline-color: var(--topics-blue);
}

/* The Topics butterfly as a one-colour glyph: the icon's alpha channel (mask-image, set in
   content.css to the hashed icon file) shapes whatever the current text colour is */
.tc-mark {
  display: inline-block;
  flex: none;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 var(--gutter);
  overflow-x: clip;
}

.hero-inner {
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px 32px;
  padding-bottom: clamp(40px, 9vh, 96px);
}

/* Name: letters fall from the top of the screen on load (bottom line first, so nothing crosses),
   then fly back up as the page scrolls (scrubbed in main.js) */
.name {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  text-align: right;
  margin: 0;
  font-family: var(--tape-face);
  font-weight: 400;
  font-size: clamp(84px, 15.5vw, 270px);
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--linen);
}

.line {
  display: block;
}

.ch {
  display: inline-block;
  transform: translateY(-110vh);
  animation: drop 1.25s cubic-bezier(0.2, 1.15, 0.32, 1) forwards;
}

.line-bottom .ch:nth-child(1) {
  animation-delay: 0.45s;
}

.line-bottom .ch:nth-child(2) {
  animation-delay: 0.51s;
}

.line-bottom .ch:nth-child(3) {
  animation-delay: 0.57s;
}

.line-bottom .ch:nth-child(4) {
  animation-delay: 0.63s;
}

.line-bottom .ch:nth-child(5) {
  animation-delay: 0.69s;
}

.line-bottom .ch:nth-child(6) {
  animation-delay: 0.75s;
}

.line-bottom .ch:nth-child(7) {
  animation-delay: 0.81s;
}

.line-bottom .ch:nth-child(8) {
  animation-delay: 0.87s;
}

.line-bottom .ch:nth-child(9) {
  animation-delay: 0.93s;
}

.line-bottom .ch:nth-child(10) {
  animation-delay: 0.99s;
}

.line-top .ch:nth-child(1) {
  animation-delay: 0.75s;
}

.line-top .ch:nth-child(2) {
  animation-delay: 0.81s;
}

.line-top .ch:nth-child(3) {
  animation-delay: 0.87s;
}

.line-top .ch:nth-child(4) {
  animation-delay: 0.93s;
}

.line-top .ch:nth-child(5) {
  animation-delay: 0.99s;
}

.line-top .ch:nth-child(6) {
  animation-delay: 1.05s;
}

.line-top .ch:nth-child(7) {
  animation-delay: 1.11s;
}

.line-top .ch:nth-child(8) {
  animation-delay: 1.17s;
}

.line-top .ch:nth-child(9) {
  animation-delay: 1.23s;
}

.line-top .ch:nth-child(10) {
  animation-delay: 1.29s;
}

@keyframes drop {
  to {
    transform: translateY(0);
  }
}

.lede-wrap {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lede-wrap > * {
  opacity: 0;
  animation: rise-in 1s var(--ease-out) forwards;
}

.lede-wrap > :nth-child(1) {
  animation-delay: 1.5s;
}

.lede-wrap > :nth-child(2) {
  animation-delay: 1.62s;
}

.lede-wrap > :nth-child(3) {
  animation-delay: 1.74s;
}

.lede {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(16px, 1.3vw, 19px);
  color: rgba(246, 240, 232, 0.88);
}

.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  transition:
    transform 0.45s var(--spring),
    box-shadow 0.3s,
    background-color 0.3s;
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* The official transparent colour butterfly sits directly on the button (never recoloured, no
   disc, no tile) */
.btn .tc-butterfly {
  width: 26px;
  height: 26px;
  margin: -3px 0 -3px -4px;
  flex: none;
  display: block;
}

.btn:hover {
  transform: translateY(-3px) scale(1.03);
}

.btn-lg {
  padding: 17px 28px 17px 24px;
  font-size: 16.5px;
}

.btn-primary {
  background: var(--tape);
  color: var(--ink);
  box-shadow:
    0 10px 30px rgba(246, 211, 53, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-primary:hover {
  box-shadow:
    0 14px 40px rgba(246, 211, 53, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Topics call to action: the Topics gradient (taken from the official dark app icon) with white
   text and the transparent colour butterfly. A blue ring and glow lift it off the dark page;
   hover brightens the glow and shifts it towards the violet. */
.btn-tc {
  background: var(--topics-bg);
  color: #fff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--topics-blue) 70%, transparent),
    0 0 22px color-mix(in srgb, var(--topics-blue) 38%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn-tc:hover {
  box-shadow:
    0 0 0 1px var(--topics-blue),
    0 0 36px color-mix(in srgb, var(--topics-blue) 70%, transparent),
    0 8px 30px color-mix(in srgb, var(--topics-violet) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.btn-twitch {
  background: var(--twitch);
  color: #fff;
  box-shadow:
    0 10px 30px rgba(145, 70, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-youtube {
  background: var(--yt);
  color: #fff;
  box-shadow:
    0 10px 30px rgba(255, 0, 51, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-ghost:hover {
  background: var(--glass-fill-strong);
}

.live-pill {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  transition: scale 0.4s var(--spring);
}

.live-pill:hover {
  scale: 1.04;
}

.live-pill img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}

.live-pill .txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.live-pill b {
  font-size: 15px;
}

.live-pill small {
  font-size: 13px;
  color: var(--haze);
}

.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--haze);
  margin-right: 7px;
  vertical-align: 1px;
}

.dot-now {
  background: var(--tape);
}

.dot-live {
  background: var(--yt);
  box-shadow: 0 0 0 0 rgba(255, 0, 51, 0.6);
  animation: live-pulse 1.8s ease-out infinite;
}

@keyframes live-pulse {
  70% {
    box-shadow: 0 0 0 7px rgba(255, 0, 51, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 51, 0);
  }
}

/* ---------- Sheet ---------- */
.sheet {
  position: relative;
  z-index: 2;
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
  background: linear-gradient(
    180deg,
    rgba(18, 16, 12, 0.35) 0%,
    rgba(18, 16, 12, 0.6) 40%,
    rgba(18, 16, 12, 0.86) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 -30px 80px rgba(0, 0, 0, 0.35);
  padding: clamp(64px, 11vh, 120px) var(--gutter) 0;
}

.wrap {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.sec-head {
  display: grid;
  grid-template-columns: 1fr minmax(0, 36ch);
  gap: 20px 48px;
  align-items: end;
  margin-bottom: clamp(28px, 5vh, 52px);
}

.sec-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 80%;
  font-variation-settings:
    'opsz' 96,
    'wdth' 80;
  font-size: clamp(54px, 8.5vw, 124px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.label {
  display: inline-block;
  padding: 0.04em 0.14em 0;
  margin-bottom: 0.08em;
  transform: rotate(-2deg);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.4) 0,
      rgba(255, 255, 255, 0) 30%,
      rgba(0, 0, 0, 0) 70%,
      rgba(0, 0, 0, 0.14) 100%
    ),
    var(--tape);
  color: var(--ink);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}

.sec-head p {
  margin: 0;
  color: var(--haze);
}

/* ---------- Live ---------- */
.live-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}

/* Desktop: the calendar is as tall as the player and scrolls inside if it needs more */
@media (min-width: 961px) {
  .calendar {
    position: relative;
  }

  .calendar > * {
    position: relative;
  }
}

.player {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  background: var(--plum);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 30px 80px rgba(0, 0, 0, 0.4);
}

.player > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}

/* The default photo is dimmed, grey and soft ("offline"); an event photo keeps its colours */
.player > img.is-offline {
  filter: grayscale(0.7) brightness(0.55) blur(2px);
}

.player:hover > img {
  transform: scale(1.04);
}

.player::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(18, 16, 12, 0.45) 0%,
    rgba(18, 16, 12, 0) 30%,
    rgba(18, 16, 12, 0) 55%,
    rgba(18, 16, 12, 0.85) 100%
  );
}

/* An event photo: no top shade, a bottom gradient only so the title block stays readable */
.player.has-photo::after {
  background: linear-gradient(
    180deg,
    rgba(18, 16, 12, 0) 0%,
    rgba(18, 16, 12, 0) 50%,
    rgba(18, 16, 12, 0.88) 100%
  );
}

.p-top {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

.chip-dark {
  background: rgba(18, 16, 12, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.chip-live {
  gap: 7px;
  background: var(--yt);
  color: #fff;
  letter-spacing: 0.06em;
}

.chip-live .dot {
  margin-right: 0;
  background: #fff;
  animation: none;
  box-shadow: none;
}

.countdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  padding: 0 16px;
}

.countdown small {
  display: block;
  color: var(--haze);
  font-size: 14px;
  margin-bottom: 6px;
}

.countdown b {
  font-family: var(--tape-face);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown b + small {
  margin: 10px 0 0;
}

.p-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.p-title {
  min-width: 0;
  max-width: 46ch;
}

.p-title h3 {
  margin: 0 0 4px;
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.25;
}

.p-title span {
  color: var(--haze);
  font-size: 14px;
}

/* Platform colours, shared by the calendar tags, the player's platform tag and its button. The
   attribute is set by the build and kept current by main.js. */
[data-platform='twitch'] {
  --plat-bg: var(--twitch);
  --plat-fg: #fff;
  --plat-glow: rgba(145, 70, 255, 0.45);
}

[data-platform='youtube'] {
  --plat-bg: var(--yt);
  --plat-fg: #fff;
  --plat-glow: rgba(255, 0, 51, 0.35);
}

[data-platform='topics'] {
  --plat-bg: var(--topics-bg);
  --plat-fg: #fff;
  --plat-glow: color-mix(in srgb, var(--topics-blue) 45%, transparent);
}

[data-platform='instagram'] {
  --plat-bg: linear-gradient(45deg, #a8267f, #d6249f 55%, #c9302c);
  --plat-fg: #fff;
  --plat-glow: rgba(214, 36, 159, 0.4);
}

[data-platform='tiktok'] {
  --plat-bg: #000;
  --plat-fg: #fff;
  --plat-glow: rgba(37, 244, 238, 0.3);
}

[data-platform='outro'] {
  --plat-bg: rgba(255, 255, 255, 0.16);
  --plat-fg: var(--linen);
  --plat-glow: rgba(255, 255, 255, 0.15);
}

.chip-platform {
  background: var(--plat-bg);
  color: var(--plat-fg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.btn-plat {
  background: var(--plat-bg, var(--twitch));
  color: var(--plat-fg, #fff);
  box-shadow:
    0 10px 30px var(--plat-glow, rgba(145, 70, 255, 0.45)),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.countdown b.tba {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.15;
}

.p-title .meta {
  display: block;
}

.p-title .note {
  display: block;
  margin-top: 2px;
  color: var(--haze);
  font-size: 13px;
}

.p-title .note:empty {
  display: none;
}

/* The countdown of an event photo sits beside the title, never over the face in the middle */
.p-title .until {
  display: none;
}

.player.has-photo .countdown {
  display: none;
}

.player.has-photo .p-title .until:not(:empty) {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(18, 16, 12, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--linen);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.player.has-photo .p-title .until[hidden] {
  display: none;
}

.calendar {
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.cal-head {
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 700;
  font-size: 15px;
}

.events {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 8px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  transition:
    background-color 0.25s,
    transform 0.4s var(--spring);
}

.event:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(3px);
}

.ev-date {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--haze);
}

.ev-date b {
  font-weight: 700;
  color: var(--linen);
}

.ev-rel {
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  color: var(--tape);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ev-chip {
  grid-column: 2;
  grid-row: 1;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  background: var(--plat-bg);
  color: var(--plat-fg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.ev-title {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
}

.ev-time {
  grid-column: 1 / -1;
  font-size: 13px;
  color: rgba(246, 240, 232, 0.8);
  font-variant-numeric: tabular-nums;
}

.ev-note {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--haze);
}

.events-empty {
  flex: 1;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  color: var(--haze);
  font-size: 14.5px;
}

/* ---------- YouTube ---------- */
.yt-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}

.pod {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  min-height: 560px;
  padding: clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 30px 80px rgba(0, 0, 0, 0.4);
}

.pod > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease-out);
}

.pod:hover > img {
  transform: scale(1);
}

.pod::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(18, 16, 12, 0.1) 0%,
    rgba(18, 16, 12, 0) 35%,
    rgba(18, 16, 12, 0.92) 100%
  );
}

.chip-yt {
  align-self: flex-start;
  background: var(--yt);
  color: #fff;
}

.pod h3 {
  margin: 0;
  font-family: var(--tape-face);
  font-weight: 400;
  font-size: clamp(64px, 8vw, 128px);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

.pod p {
  margin: 0;
  max-width: 44ch;
  color: rgba(246, 240, 232, 0.85);
}

.pod .row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.yt-play {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 76px;
  height: 54px;
  border-radius: 16px;
  background: var(--yt);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 12px 30px rgba(255, 0, 51, 0.4);
  transition: transform 0.5s var(--spring);
}

.yt-play svg {
  width: 26px;
  height: 26px;
}

.pod:hover .yt-play {
  transform: scale(1.12) rotate(-4deg);
}

.episodes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ep {
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.yt-side {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
}

.proj {
  border-radius: 28px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.proj h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}

.proj p {
  margin: 0;
  color: rgba(246, 240, 232, 0.8);
  font-size: 15px;
}

.proj .visit {
  margin-top: auto;
}

.nonsense {
  position: relative;
  color: var(--ink);
  background: var(--mustard);
  box-shadow: 0 20px 60px rgba(240, 181, 50, 0.18);
}

.nonsense h3 {
  font-family: var(--tape-face);
  font-weight: 400;
  font-size: 46px;
  line-height: 0.95;
  text-transform: uppercase;
}

.nonsense p {
  color: rgba(18, 18, 18, 0.8);
}

.nonsense .visit {
  background: var(--ink);
  color: var(--tape);
}

.nonsense .visit:hover {
  background: #000;
}

.mini-tape {
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 58%;
  transform: rotate(-12deg);
  background: var(--tape);
  color: var(--ink);
  font-family: var(--tape-face);
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  padding: 4px 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.mini-tape span {
  display: inline-block;
  animation: mini 14s linear infinite;
}

@keyframes mini {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Partnerships ---------- */
.grid {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  perspective: 1200px;
}

.card {
  --hue: 280;
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 0%;
  grid-column: span 2;
  border-radius: 28px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 300px;
  overflow: hidden;
  isolation: isolate;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition:
    transform 0.5s var(--ease-out),
    opacity 0.8s var(--ease-out),
    background-color 0.4s,
    box-shadow 0.4s;
}

/* The accent hue of each card (--hue) comes from content.css, keyed by data-partner.
   Featured card plus two stacked cards fill the first two rows; anything after that closes the
   grid as a full-width row, so no cell is left empty */
.grid > .card:nth-child(n + 4) {
  grid-column: 1 / -1;
  min-height: 0;
}

@media (min-width: 961px) {
  .grid > .card:nth-child(n + 4) {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto minmax(180px, auto);
    align-items: center;
    gap: 18px 28px;
  }

  .grid > .card:nth-child(n + 4) .offer {
    margin-top: 0;
    padding: 0 0 0 28px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.09);
  }
}

/* Featured card plus a single other card: one row, no empty cell */
.grid > .featured:nth-last-child(2) {
  grid-row: auto;
  min-height: 520px;
}

/* Featured card alone (the other partners are paused or strips): full width */
.grid > .featured:only-child {
  grid-column: 1 / -1;
  grid-row: auto;
  min-height: 520px;
}

/* Wide and alone: the panel moves to the right so it does not cover the photo */
@media (min-width: 961px) {
  .grid > .featured:only-child .panel {
    width: min(460px, 45%);
    margin: auto 14px 14px auto;
  }
}

.card.pre {
  opacity: 0;
  transform: translateY(40px) rotateX(10deg);
}

.card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 20px 60px hsla(var(--hue), 90%, 60%, 0.28);
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      380px circle at var(--mx) var(--my),
      hsla(var(--hue), 95%, 70%, 0.3),
      transparent 60%
    ),
    radial-gradient(120% 80% at 100% 0%, hsla(var(--hue), 90%, 60%, 0.14), transparent 60%);
  opacity: 0.55;
  transition: opacity 0.4s;
}

.card:hover::after {
  opacity: 1;
}

.card-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mark {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--tape-face);
  font-size: 26px;
  color: #fff;
  background: linear-gradient(
    140deg,
    hsl(var(--hue), 85%, 62%),
    hsl(calc(var(--hue) + 40), 90%, 58%)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 24px hsla(var(--hue), 90%, 55%, 0.35);
  transition: transform 0.5s var(--spring);
}

.card:hover .mark {
  transform: rotate(-8deg) scale(1.08);
}

/* Official partner logo in the mark: a light tile with the logo padded inside, or edge to edge when
   the logo is itself an opaque square tile */
.mark-logo {
  padding: 7px;
  background: var(--linen);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 8px 24px hsla(var(--hue), 90%, 55%, 0.35);
  overflow: hidden;
  /* Wide logos (content.css sets their aspect ratio) widen the mark, within a cap */
  max-width: 104px;
}

.mark-logo.mark-bleed {
  padding: 0;
}

.mark-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.mark-sm {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 15px;
  flex: none;
}

.mark-sm.mark-logo {
  padding: 4px;
  max-width: 64px;
}

.mark-sm.mark-bleed {
  padding: 0;
}

.card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.kind {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--haze);
}

.desc {
  margin: 0;
  color: rgba(246, 240, 232, 0.8);
  font-size: 15px;
}

.offer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 14px;
  color: var(--haze);
}

.offer strong {
  color: hsl(var(--hue), 100%, 80%);
  font-weight: 700;
  font-size: 16px;
}

.code {
  font: 400 16px/1 var(--tape-face);
  letter-spacing: 0.05em;
  color: var(--ink);
  cursor: copy;
  -webkit-user-select: text;
  user-select: text;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.4) 0,
      rgba(255, 255, 255, 0) 35%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    var(--tape);
  border: 0;
  padding: 9px 12px;
  border-radius: 2px;
  transform: rotate(-3deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.4s var(--spring),
    background-color 0.25s;
}

.code:hover {
  transform: rotate(0) scale(1.08);
}

.code.copied {
  background: var(--linen);
}

.visit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px 13px 18px;
  border-radius: 16px;
  border: 0;
  cursor: pointer;
  background: var(--linen);
  color: var(--night);
  font-weight: 700;
  font-size: 15px;
  transition:
    background-color 0.3s,
    transform 0.45s var(--spring);
}

.visit svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.45s var(--spring);
}

.visit:hover {
  background: #fff;
}

.visit:hover svg {
  transform: translate(3px, -3px) rotate(8deg);
}

/* Low-emphasis partners: one slim row each under the cards, nothing clickable by default */
.strips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(14px, 1.6vw, 20px);
}

.strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 12px 20px;
  border-radius: 20px;
}

.strip h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

/* The small secondary link of a strip: a quiet text link, not the big card button */
.strip .visit {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13.5px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--linen);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.strip .visit:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.strip .visit svg {
  width: 13px;
  height: 13px;
}

.strip-text {
  min-width: 0;
  color: var(--haze);
  font-size: 14.5px;
}

/* The code as plain text on a small tape label: selectable, not a button */
.code-static {
  font: 400 15px/1 var(--tape-face);
  letter-spacing: 0.05em;
  color: var(--ink);
  background: var(--tape);
  padding: 7px 10px;
  border-radius: 2px;
  transform: rotate(-2deg);
  -webkit-user-select: text;
  user-select: text;
}

.age-note {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--linen);
}

.card:not(.featured) .age-note {
  margin-top: auto;
  padding-top: 4px;
  color: var(--haze);
}

.grid > .featured {
  grid-column: span 4;
  grid-row: span 2;
  min-height: 560px;
  padding: 0;
  background: var(--plum);
}

.featured .photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s var(--ease-out);
}

.featured:hover .photo {
  transform: scale(1);
}

.featured::before {
  z-index: 1;
}

.featured .shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(18, 16, 12, 0.2) 0%,
    rgba(18, 16, 12, 0) 35%,
    rgba(18, 16, 12, 0.75) 100%
  );
}

.panel {
  margin: auto 14px 14px;
  padding: 20px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.featured .row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.featured .row .visit {
  flex: 1;
}

.badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 2px;
  background: var(--tape);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transform: rotate(-3deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ---------- Follow ---------- */
.follow {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border-radius: 32px;
  overflow: hidden;
  background: rgba(246, 240, 232, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.follow > img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

.follow-body {
  padding: clamp(28px, 4.5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  min-width: 0;
}

.follow h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 80%;
  font-variation-settings: 'wdth' 80;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 0.92;
  text-transform: uppercase;
}

.follow p {
  margin: 0;
  color: var(--haze);
  max-width: 44ch;
}

.big-socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.big-social {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    transform 0.45s var(--spring),
    background 0.3s;
  min-width: 0;
}

.big-social svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.big-social span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.big-social b {
  font-size: 15px;
}

.big-social small {
  color: var(--haze);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.big-social:hover {
  transform: translateY(-3px) rotate(-1deg);
}

.big-social.tw:hover {
  background: var(--twitch);
}

/* The community leads the list: full row on the Topics gradient with the official horizontal logo
   (colour butterfly, white wordmark) as one image, and the subtitle beside it */
.big-social.tc {
  grid-column: 1 / -1;
  padding: 14px 20px 14px 14px;
  gap: 16px;
  background: var(--topics-bg);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--topics-blue) 38%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.big-social.tc:hover {
  background: var(--topics-bg);
  box-shadow:
    inset 0 0 0 1px var(--topics-blue),
    0 0 28px color-mix(in srgb, var(--topics-blue) 45%, transparent);
}

.big-social .tc-logo {
  width: 150px;
  height: auto;
  flex: none;
  display: block;
}

.big-social.tc small {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}

.big-social.ig:hover {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}

.big-social.tt:hover {
  background: #000;
}

.big-social.yt:hover {
  background: var(--yt);
}

.big-social:hover small {
  color: rgba(255, 255, 255, 0.85);
}

.brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14.5px;
  color: var(--haze);
}

.mail-addr {
  color: var(--linen);
  font-weight: 600;
  user-select: all;
  overflow-wrap: anywhere;
}

.copy-mail {
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 13.5px;
  font-weight: 600;
  transition: background-color 0.25s;
}

.copy-mail:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ---------- Footer (continues the sheet's bottom tone) ---------- */
.site-footer {
  position: relative;
  z-index: 2;
  background: rgba(18, 16, 12, 0.86);
  padding: calc(var(--section-gap) - clamp(40px, 8vh, 100px)) var(--gutter)
    max(96px, env(safe-area-inset-bottom, 0px));
  color: var(--haze);
  font-size: 14px;
}

.footer-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-inner p {
  margin: 0;
}

.site-footer a:hover {
  color: var(--linen);
}

/* ---------- 404 ---------- */
.not-found {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px var(--gutter);
}

.not-found-panel {
  width: min(560px, 100%);
  padding: clamp(28px, 5vw, 48px);
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.not-found-panel h1 {
  margin: 0;
  font-family: var(--tape-face);
  font-weight: 400;
  font-size: clamp(84px, 18vw, 160px);
  line-height: 0.9;
  text-transform: uppercase;
}

.not-found-panel p {
  margin: 0;
  color: rgba(246, 240, 232, 0.88);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .live-grid,
  .yt-grid {
    grid-template-columns: 1fr;
  }

  .pod {
    min-height: 480px;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid > .card {
    grid-column: span 1;
  }

  .grid > .featured {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 520px;
  }

  /* An odd card left alone on the last row takes the full width */
  .grid > .card:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }

  .sec-head {
    grid-template-columns: 1fr;
  }

  .follow {
    grid-template-columns: 1fr;
  }

  .follow > img {
    min-height: 300px;
    max-height: 420px;
  }
}

/* Four tabs and five icons share the nav: tighten the tabs on tablets, and where the name no
   longer fits next to them keep only the avatar */
@media (max-width: 1000px) {
  .tab {
    padding: 8px 10px;
  }
}

@media (min-width: 721px) and (max-width: 860px) {
  .id-text {
    display: none;
  }
}

@media (max-width: 720px) {
  .nav {
    grid-template-columns: 1fr auto;
  }

  .tabs {
    display: none;
  }

  /* 40px keeps the icon links comfortable touch targets */
  .social {
    width: 40px;
    height: 40px;
  }

  .socials {
    gap: 4px;
  }

  /* Portrait screens: the focal point for phones (mobileFocus) comes from content.css */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .name {
    grid-column: 1;
    justify-self: start;
    text-align: left;
    font-size: 27vw;
  }

  .lede-wrap {
    grid-row: 2;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .grid > .card,
  .grid > .card:nth-child(n + 4),
  .grid > .featured {
    grid-column: 1 / -1;
  }

  .card {
    min-height: 0;
  }

  .featured .row {
    flex-direction: column;
    align-items: stretch;
  }

  .big-socials {
    grid-template-columns: 1fr;
  }

  .player {
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 400px) {
  .id-text small {
    display: none;
  }

  /* Five icons plus the avatar and name still fit a 360-390px wide nav */
  .id {
    gap: 8px;
  }

  .socials {
    gap: 2px;
  }

  .social {
    width: 38px;
    height: 38px;
  }
}

/* Below 380px the name would wrap next to the five icons */
@media (max-width: 379px) {
  .id-text {
    display: none;
  }
}

/* ---------- 18+ gate ----------
   Hidden unless assets/js/age-gate-early.js puts `age-gate-open` on <html> before first paint, so
   no-JS visitors and crawlers always get the page. The hero photo runs behind the blurred scrim;
   the nav and the hero text wait for the confirmation, then play their intro as the gate fades. */
.age-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 16px;
  background: rgba(10, 8, 6, 0.58);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  backdrop-filter: blur(26px) saturate(1.3);
  transition: opacity 0.28s ease;
}

.age-gate-open .age-gate {
  display: grid;
  place-items: center;
}

.age-gate-open:not(.age-gate-closing) {
  overflow: hidden;
}

.age-gate-closing .age-gate {
  opacity: 0;
  pointer-events: none;
}

.age-gate-open:not(.age-gate-closing) :is(.nav, .ch, .lede-wrap > *) {
  animation-play-state: paused;
}

.age-gate-card {
  width: min(100%, 440px);
  padding: 32px 28px 24px;
  border-radius: 28px;
  background: rgba(31, 27, 20, 0.82);
  text-align: center;
}

.age-gate-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 2px;
  background: var(--tape);
  color: var(--ink);
  font: 400 22px/1 var(--tape-face);
  letter-spacing: 0.05em;
  transform: rotate(-2deg);
}

.age-gate h2 {
  margin: 0 0 12px;
  font: 400 clamp(28px, 7vw, 36px) / 1.05 var(--tape-face);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--linen);
}

.age-gate-card p {
  margin: 0;
}

#age-gate-text {
  color: rgba(246, 240, 232, 0.88);
}

.age-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 24px 0 18px;
}

.age-gate-actions .btn {
  justify-content: center;
}

.age-gate .btn-ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.28);
  color: var(--linen);
}

.age-gate .btn-ghost:hover {
  background: var(--glass-fill-strong);
}

.age-gate-note {
  font-size: 13px;
  color: var(--haze);
}

.age-gate-declined {
  padding: 8px 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--linen);
}

.age-gate-declined:focus,
#conteudo:focus {
  outline: none;
}

/* ---------- Reduced motion: final states, no scroll-scrubbed motion, no marquee, no drift ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .light,
  .mini-tape span {
    animation: none !important;
  }

  .card.pre {
    opacity: 1;
    transform: none;
  }

  .spot {
    display: none;
  }
}

/* ---------- Reduced transparency: near-opaque glass (liquid-glass.js also skips refraction) ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-fill: rgba(31, 27, 20, 0.92);
    --glass-fill-strong: rgba(43, 38, 30, 0.95);
  }

  .ep {
    background: rgba(31, 27, 20, 0.88);
  }
}

/* The podcast card is one link: the YouTube button's hit area covers the whole card */
.pod-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 28px;
}

/* A transform here would make the button the containing block and shrink the hit area on hover */
.pod-link:hover {
  transform: none;
}

.pod:focus-within {
  outline: 2px solid var(--tape);
  outline-offset: 3px;
}