/* SergamerTV — a gruta do Urso
   Pigments: ochre, red oxide and kaolin white on a torch-lit rock wall. */

@font-face { font-family: "Londrina Solid"; src: url("../assets/fonts/londrina-solid-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Londrina Solid"; src: url("../assets/fonts/londrina-solid-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../assets/fonts/alegreya-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../assets/fonts/alegreya-sans-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../assets/fonts/alegreya-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../assets/fonts/alegreya-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../assets/fonts/alegreya-sans-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --deep: #0d0906;      /* where the torch does not reach */
  --wall: #1c1410;      /* the rock */
  --bark: #3b2616;      /* firewood */
  --lime: #f3e7cf;      /* kaolin white */
  --lime-dim: #cdbd9f;
  --ochre: #ebaa3c;     /* his amber, ground into pigment */
  --ochre-hot: #ffc25e;
  --oxide: #c9502a;     /* red ochre */
  --ember: #ff8b1e;

  --display: "Londrina Solid", "Arial Narrow", Impact, sans-serif;
  --body: "Alegreya Sans", "Trebuchet MS", "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 34rem;
  --bar-h: 4.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 1rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  position: relative;
  color: var(--lime);
  font: 500 clamp(1.19rem, 1.1rem + 0.35vw, 1.375rem)/1.5 var(--body);
  background-color: var(--wall);
  background-image: linear-gradient(rgba(15, 10, 7, 0.74), rgba(15, 10, 7, 0.74)), url("../assets/img/rock.jpg");
  background-size: auto, 880px;
  overflow-x: hidden;
}
/* the cave gets darker the further down you go */
body::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0, transparent 35%, rgba(6, 4, 2, 0.72) 100%);
  pointer-events: none;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
main, .bar, .deep { position: relative; z-index: 1; }
main { overflow-x: clip; }
.defs { position: absolute; }

:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--ochre); color: var(--deep); }

.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 20;
  padding: 0.6em 1em; background: var(--lime); color: var(--deep); font-weight: 700; border-radius: 0.5em;
}
.skip:focus { top: 1rem; }

/* painted marks */
.f-oc { fill: var(--ochre); } .f-ox { fill: var(--oxide); } .f-li { fill: var(--lime); } .f-wall { fill: #2a1d15; }
.l-oc, .l-ox, .l-li, .l-wall { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.l-oc { stroke: var(--ochre); } .l-ox { stroke: var(--oxide); } .l-li { stroke: var(--lime); } .l-wall { stroke: #2a1d15; }
.c-oc { color: var(--ochre); } .c-ox { color: var(--oxide); } .c-li { color: var(--lime); }

/* the torch: warm light that follows the pointer over the whole wall */
.torch {
  position: fixed; left: 0; top: 0; z-index: 0;
  width: 1100px; height: 1100px; margin: -550px 0 0 -550px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 176, 92, 0.5), rgba(255, 140, 50, 0.2) 38%, rgba(255, 120, 30, 0) 72%);
  mix-blend-mode: color-dodge;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(50vw, 40vh, 0);
  will-change: transform, opacity;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85em 1.35em;
  font: 800 1.0625rem/1.1 var(--body);
  color: var(--deep); background: var(--ochre);
  text-decoration: none; text-align: center;
  border-radius: 1.1em 1.7em 1.2em 1.8em / 1.6em 1.1em 1.8em 1.2em;
  transition: background-color 0.15s, transform 0.15s;
}
.btn:hover { background: var(--ochre-hot); transform: rotate(-1.2deg); }
.btn:active { transform: scale(0.97); }
.btn--ghost { color: var(--lime); background: rgba(243, 231, 207, 0.06); box-shadow: inset 0 0 0 2px rgba(243, 231, 207, 0.6); }
.btn--ghost:hover { background: rgba(243, 231, 207, 0.16); }
.btn--small { padding: 0.6em 1em; font-size: 0.95rem; }

/* ---------- top bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  height: var(--bar-h);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0 var(--gutter);
  background: rgba(13, 9, 6, 0.93);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.25rem; background: linear-gradient(rgba(13, 9, 6, 0.6), rgba(13, 9, 6, 0)); pointer-events: none; }
.bar__brand { display: flex; align-items: center; gap: 0.5rem; font: 900 1.5rem/1 var(--display); letter-spacing: 0.01em; text-decoration: none; color: var(--lime); }
.bar__brand svg { width: 1.6rem; fill: var(--ochre); transform: rotate(-14deg); transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.bar__brand:hover svg { transform: rotate(-34deg) scale(1.14); }
.bar__nav { display: flex; gap: clamp(0.8rem, 1.7vw, 1.75rem); margin-left: auto; font-size: 1.0625rem; font-weight: 500; }
.bar__nav a { text-decoration: none; color: var(--lime-dim); padding: 0.4em 0; }
.bar__nav a:hover { color: var(--lime); text-decoration: underline; text-decoration-color: var(--ochre); text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
.bar__end { display: flex; align-items: center; gap: 0.9rem; }
.lang { display: flex; }
.lang button {
  font: 700 0.9rem/1 var(--body); letter-spacing: 0.04em;
  color: var(--lime-dim); background: none; border: 0; padding: 0.55em 0.5em; cursor: pointer;
}
.lang button:hover { color: var(--lime); }
.lang button[aria-pressed="true"] { color: var(--ochre); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.35em; }

@media (max-width: 1160px) {
  .bar__nav { display: none; }
  .bar__end { margin-left: auto; }
}
@media (max-width: 480px) {
  .bar__brand span { display: none; }
  .bar__brand svg { width: 2rem; }
}

/* ---------- entrada ---------- */
.hero {
  position: relative;
  min-height: clamp(40rem, 100svh, 66rem);
  display: flex; align-items: flex-end;
  padding: calc(var(--bar-h) + 2rem) var(--gutter) clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  --hx: 62%; --hy: 36%; --hr: 30rem;
  --ledge: 46%; --floor: 74%;
}
.hero__wall { position: absolute; inset: 0; filter: url(#pigment); will-change: transform; }
.pt { position: absolute; fill: currentColor; overflow: visible; }
/* the bear, the fire and the crowd wake up when the torch reaches them (main.js adds .lit) */
.hero__alive { position: absolute; inset: 0; }
.hero__alive .pt { filter: url(#pigment-s); will-change: transform; }
.flame { transform-box: view-box; transform-origin: 60px 106px; }
.hero__sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Two painted zones: above the name, and beside the text below it.
   main.js measures the wordmark and sets --ledge / --floor, so nothing is painted under the letters. */
.zone { position: absolute; container-type: size; }
.zone--top { left: 0; right: 0; top: var(--bar-h); height: calc(var(--ledge) - var(--bar-h)); }
.zone--low { left: 54%; right: 0; top: var(--floor); bottom: 0; }

.pt-bear     { right: 5cqw; bottom: -5cqh; width: min(37cqw, 150cqh); aspect-ratio: 420/250; }
.pt-streamer { left: 4cqw;  bottom: max(22cqh, 5.4rem); width: min(10.4cqw, 39cqh); aspect-ratio: 150/130; }
.pt-fire     { left: 14cqw; bottom: max(22cqh, 5.4rem); width: min(7.4cqw, 28cqh);  aspect-ratio: 120/130; }
.pt-hype1    { left: 21cqw; bottom: max(24cqh, 5.4rem); width: min(6.2cqw, 23cqh);  aspect-ratio: 90/130; rotate: 6deg; }
.pt-hype2    { left: 26cqw; bottom: max(19cqh, 5.4rem); width: min(5.5cqw, 21cqh);  aspect-ratio: 90/130; rotate: -5deg; }
.pt-hype3    { left: 30.5cqw; bottom: max(25cqh, 5.4rem); width: min(6cqw, 22cqh);  aspect-ratio: 90/130; rotate: 3deg; }
.pt-chat     { left: 6cqw;  top: 6cqh;  width: min(6cqw, 24cqh);   aspect-ratio: 100/82; rotate: 6deg; }
.pt-pad      { left: 15cqw; top: 3cqh;  width: min(7.6cqw, 30cqh); aspect-ratio: 140/92; rotate: -8deg; }
.pt-cross    { left: 25cqw; top: 5cqh;  width: min(4.6cqw, 18cqh); aspect-ratio: 1; }
.pt-heart    { left: 32cqw; top: 9cqh;  width: min(4cqw, 15cqh);   aspect-ratio: 80/72; rotate: -10deg; }
.pt-hand1    { left: 39cqw; top: 4cqh;  width: min(6cqw, 24cqh);   aspect-ratio: 130/160; rotate: -16deg; }
.pt-hand2    { left: 45.5cqw; top: 24cqh; width: min(5.6cqw, 22cqh); aspect-ratio: 130/160; rotate: 11deg; }
.pt-hand3    { left: 38cqw; top: 50cqh; width: min(5.4cqw, 21cqh); aspect-ratio: 130/160; rotate: -32deg; }
.pt-sevens   { left: 51cqw; top: 3cqh;  width: min(8.6cqw, 34cqh); aspect-ratio: 150/80; rotate: 5deg; }
.pt-dots     { left: 47cqw; bottom: 22cqh; width: min(7cqw, 28cqh); aspect-ratio: 120/50; rotate: -4deg; }
.pt-cherry   { left: 52.5cqw; top: 44cqh; width: min(4cqw, 16cqh); aspect-ratio: 80/92; }

.pt-tally    { right: 16cqw; top: 2cqh; width: min(34cqw, 78cqh); }
.pt-spiral   { right: 3cqw;  top: 20cqh; width: min(13cqw, 42cqh); aspect-ratio: 1; }
.pt-paw1, .pt-paw2, .pt-paw3, .pt-paw4 { width: min(8cqw, 24cqh); aspect-ratio: 100/110; rotate: 66deg; }
.pt-paw1 { left: 6cqw;  bottom: 16cqh; }
.pt-paw2 { left: 21cqw; bottom: 36cqh; }
.pt-paw3 { left: 36cqw; bottom: 14cqh; }
.pt-paw4 { left: 51cqw; bottom: 34cqh; }

/* darkness, with a hole where the torch is */
.hero__dark {
  position: absolute; inset: 0;
  background: radial-gradient(circle var(--hr) at var(--hx) var(--hy), rgba(8, 5, 3, 0) 0, rgba(8, 5, 3, 0.34) 42%, rgba(8, 5, 3, 0.9) 88%, rgba(8, 5, 3, 0.93) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, #000 72%, transparent);
  pointer-events: none;
}

.hero__text { position: relative; width: 100%; }
.sign {
  display: inline-flex; align-items: center; gap: 0.6em;
  margin-left: 0.3em;
  font-weight: 700; font-size: 1.125rem; text-decoration: none; color: var(--lime);
}
.sign:hover span:last-child { text-decoration: underline; text-decoration-color: var(--ochre); text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
.sign__ember {
  flex: none; width: 0.8em; height: 0.8em; border-radius: 50%;
  background: #6d5a49;
}
body[data-cave="live"] .sign__ember { background: var(--ember); box-shadow: 0 0 0 0.3em rgba(255, 139, 30, 0.25), 0 0 1.2em 0.2em rgba(255, 139, 30, 0.7); animation: ember 1.6s ease-in-out infinite; }
@keyframes ember { 50% { box-shadow: 0 0 0 0.45em rgba(255, 139, 30, 0.12), 0 0 1.6em 0.4em rgba(255, 139, 30, 0.9); } }

.wordmark {
  width: fit-content;
  margin: 0.05em 0 0 -0.04em; padding: 0.04em 0.05em 0.08em;
  font: 900 clamp(4.4rem, min(16.6vw, 33svh), 18rem)/0.9 var(--display);
  letter-spacing: -0.005em;
  color: var(--lime);
  filter: url(#pigment);
  /* three claw marks through the name, where his logo has its slash */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H100V100H0Z M40.5 97Q46.4 50 53.5 5Q47.9 51.5 40.5 97Z M45.7 100Q51.6 50 58.7 2Q53.1 51.5 45.7 100Z M50.9 97Q56.8 50 63.9 6Q58.3 51.5 50.9 97Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(#000, #000) left bottom / 100% 0% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H100V100H0Z M40.5 97Q46.4 50 53.5 5Q47.9 51.5 40.5 97Z M45.7 100Q51.6 50 58.7 2Q53.1 51.5 45.7 100Z M50.9 97Q56.8 50 63.9 6Q58.3 51.5 50.9 97Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(#000, #000) left bottom / 100% 0% no-repeat;
}
.hero__lead { max-width: 31rem; margin-top: 0.4rem; font-size: 1.15em; line-height: 1.4; text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }
.hero__hint { margin-top: 1.4rem; font-style: italic; color: var(--lime-dim); font-size: 1rem; }
.hint--touch { display: none; }
@media (hover: none) { .hint--mouse { display: none; } .hint--touch { display: inline; } }
@media (max-height: 760px) and (min-width: 761px) { .hero__hint { display: none; } }

/* short laptop screens: fewer marks, so the ones left have room */
@media (max-height: 800px) and (min-width: 761px) { .pt-chat, .pt-pad, .pt-cross, .pt-heart, .pt-hand3, .pt-dots { display: none; } }
@media (max-width: 900px) { .zone--low { display: none; } }
@media (max-width: 760px) {
  .wordmark { font-size: min(19vw, 30svh); }
  .pt-bear { right: -3cqw; bottom: 2.9rem; width: min(76cqw, 104cqh); } /* clear of the status line */
  .pt-hand1 { left: 6cqw; top: 3cqh; width: min(15cqw, 16cqh); }
  .pt-hand2 { left: 25cqw; top: 12cqh; width: min(13cqw, 14cqh); }
  .pt-cross { left: 48cqw; top: 6cqh; width: min(11cqw, 12cqh); }
  .pt-sevens { left: auto; right: 7cqw; top: 5cqh; width: min(24cqw, 26cqh); }
  .pt-streamer { left: 5cqw; bottom: auto; top: 33cqh; width: min(22cqw, 22cqh); }
  .pt-fire { left: 30cqw; bottom: auto; top: 35cqh; width: min(14cqw, 14cqh); }
  .pt-hype1 { left: 47cqw; bottom: auto; top: 32cqh; width: min(11cqw, 12cqh); }
  .pt-hype2 { left: 60cqw; bottom: auto; top: 35cqh; width: min(10cqw, 11cqh); }
  .pt-pad { left: auto; right: 5cqw; top: 31cqh; width: min(17cqw, 18cqh); }
  .pt-hype3, .pt-hand3, .pt-chat, .pt-heart, .pt-cherry, .pt-dots { display: none; }
}

/* ---------- shared section pieces ---------- */
.wrap { max-width: 82rem; margin-inline: auto; padding: clamp(4rem, 9vw, 8rem) var(--gutter); }
.title {
  font: 900 clamp(2.75rem, 7.4vw, 6rem)/0.92 var(--display);
  letter-spacing: 0.005em;
  color: var(--lime);
  filter: url(#chalk);
  text-wrap: balance;
}
h3 { font: 400 clamp(1.6rem, 2.6vw, 2.1rem)/1.05 var(--display); letter-spacing: 0.01em; color: var(--ochre); }
p a, .clips a { text-decoration: underline; text-decoration-color: var(--ochre); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
p a:hover, .clips a:hover { color: var(--ochre-hot); }
code { font: inherit; font-weight: 700; color: var(--ochre); }

/* paw prints leading down the cave */
.tracks { position: relative; z-index: 1; display: flex; gap: clamp(1.4rem, 4vw, 3.2rem); padding: 0 var(--gutter); max-width: 82rem; margin-inline: auto; }
.tracks svg { width: clamp(1.9rem, 3.6vw, 2.9rem); aspect-ratio: 100/110; fill: var(--oxide); opacity: 0.82; filter: url(#chalk); }
.tracks--a { justify-content: flex-end; padding-right: calc(var(--gutter) + 6vw); }
.tracks--a svg { rotate: 118deg; }
.tracks--a svg:nth-child(even) { translate: 0 1.9rem; }
.tracks--b { justify-content: flex-start; padding-left: calc(var(--gutter) + 6vw); flex-direction: row-reverse; justify-content: flex-end; }
.tracks--b svg { rotate: -118deg; }
.tracks--b svg:nth-child(even) { translate: 0 1.9rem; }
.tracks--end { flex-direction: column; align-items: center; gap: 1.6rem; padding-bottom: 2.5rem; }
.tracks--end svg { rotate: 180deg; }
.tracks--end svg:nth-child(even) { translate: 2.2rem 0; }
.tracks--end svg:nth-child(odd) { translate: -0.6rem 0; }

/* live / offline switching */
body:not([data-cave="live"]) [data-when="live"],
body:not([data-cave="off"]) [data-when="off"],
body:not([data-cave="unknown"]) [data-when="unknown"],
body[data-cave="live"] [data-when="notlive"] { display: none !important; }

/* ---------- a fogueira ---------- */
.fire__grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(16rem, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: clamp(1.75rem, 4vw, 3rem); }
.stage { position: relative; }
.stage__glow {
  position: absolute; inset: -14% -10% -22%;
  background: radial-gradient(closest-side, rgba(255, 139, 30, 0.34), rgba(255, 110, 20, 0.12) 55%, transparent);
  opacity: 0.35;
  transition: opacity 0.8s;
}
body[data-cave="live"] .stage__glow { opacity: 1; animation: glow 3.4s ease-in-out infinite; }
@keyframes glow {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  23% { transform: scale(1.03); opacity: 1; }
  41% { transform: scale(0.98); opacity: 0.78; }
  67% { transform: scale(1.04); opacity: 0.96; }
  82% { transform: scale(0.99); opacity: 0.84; }
}
.stage__embers { position: absolute; left: 5%; right: 5%; bottom: 97%; height: 0; pointer-events: none; }
.stage__embers i {
  position: absolute; bottom: 0; left: var(--x, 50%);
  width: 0.34rem; height: 0.34rem; border-radius: 50%;
  background: var(--ochre-hot); box-shadow: 0 0 0.7rem 0.12rem rgba(255, 139, 30, 0.75);
  opacity: 0;
  animation: rise var(--d, 3.4s) linear var(--w, 0s) infinite;
}
.stage__embers i:nth-child(1) { --x: 4%;  --d: 3.6s; --w: -0.4s; --sway: 1.4rem; }
.stage__embers i:nth-child(2) { --x: 17%; --d: 2.9s; --w: -1.7s; --sway: -1rem; }
.stage__embers i:nth-child(3) { --x: 29%; --d: 4.1s; --w: -2.6s; --sway: 0.6rem; }
.stage__embers i:nth-child(4) { --x: 41%; --d: 3.2s; --w: -0.9s; --sway: -1.6rem; }
.stage__embers i:nth-child(5) { --x: 53%; --d: 3.8s; --w: -3.1s; --sway: 1.1rem; }
.stage__embers i:nth-child(6) { --x: 64%; --d: 2.7s; --w: -1.2s; --sway: -0.7rem; }
.stage__embers i:nth-child(7) { --x: 76%; --d: 4.3s; --w: -2.1s; --sway: 1.8rem; }
.stage__embers i:nth-child(8) { --x: 88%; --d: 3.1s; --w: -0.2s; --sway: -1.3rem; }
.stage__embers i:nth-child(9) { --x: 97%; --d: 3.5s; --w: -2.9s; --sway: -0.5rem; }
@keyframes rise {
  0% { opacity: 0; translate: 0 0.5rem; scale: 1; }
  12% { opacity: 0.95; }
  60% { opacity: 0.7; }
  100% { opacity: 0; translate: var(--sway, 1rem) -9rem; scale: 0.35; }
}
.stage__frame {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--deep);
  border-radius: 1.4rem 2.2rem 1.6rem 2.4rem / 2rem 1.5rem 2.3rem 1.6rem;
  box-shadow: 0 0 0 4px var(--ochre), 0 0 0 9px rgba(13, 9, 6, 0.85);
}
.stage__poster, .stage__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.stage__play {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
  font: 800 1.2rem/1 var(--body); color: var(--lime);
  background: rgba(13, 9, 6, 0.45); border: 0; cursor: pointer;
  transition: background-color 0.2s;
}
.stage__play svg { width: 5.5rem; padding: 1rem; border-radius: 50%; background: var(--ochre); fill: var(--deep); transition: transform 0.2s, background-color 0.2s; }
.stage__play:hover { background: rgba(13, 9, 6, 0.25); }
.stage__play:hover svg { transform: scale(1.08); background: var(--ochre-hot); }
.stage__play:focus-visible { outline-offset: -8px; border-radius: 1.6rem; }

.fire__info > * + * { margin-top: 0.9rem; }
.fire__state { display: flex; align-items: center; gap: 0.6em; font: 400 clamp(1.7rem, 2.8vw, 2.3rem)/1.05 var(--display); color: var(--ochre); }
.fire__state .sign__ember { width: 0.5em; height: 0.5em; }
.fire__detail { margin-top: 0.3rem !important; font-weight: 700; }
.fire__title { font-weight: 800; overflow-wrap: anywhere; }
.fire__game { color: var(--lime-dim); margin-top: 0.2rem !important; }
.fire__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem !important; }

@media (max-width: 900px) { .fire__grid { grid-template-columns: 1fr; } }

/* ---------- o Urso ---------- */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.about__figure { position: relative; max-width: 30rem; justify-self: center; width: 100%; }
.about__figure img { position: relative; width: 100%; }
.about__sun {
  position: absolute; inset: 4% 2% 2%;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: var(--oxide);
  filter: url(#pigment);
}
.about__hand { position: absolute; fill: currentColor; aspect-ratio: 130/160; filter: url(#chalk); }
.about__hand--a { width: 17%; left: -7%; top: -5%; rotate: -24deg; }
.about__hand--b { width: 15%; right: -6%; bottom: 1%; rotate: 158deg; }
.about__text p { max-width: var(--measure); margin-top: 1.1rem; text-wrap: pretty; }
.about__text .title + p { margin-top: 1.6rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; max-width: var(--measure); margin-top: 2.2rem; }
.facts li { padding-left: 1.2rem; font: 400 clamp(1.3rem, 2vw, 1.6rem)/1.1 var(--display); letter-spacing: 0.01em; color: var(--ochre); border-left: 5px solid var(--oxide); border-radius: 3px; }

@media (max-width: 820px) {
  .about { grid-template-columns: 1fr; }
  .about__figure { max-width: 20rem; }
}

/* ---------- dicionário ---------- */
.dict__head p { margin-top: 0.9rem; color: var(--lime-dim); font-style: italic; }
.dict__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 6vw, 6rem); margin-top: clamp(2.25rem, 5vw, 3.75rem); }
.dict__list dt { font: 400 clamp(2rem, 3.6vw, 2.9rem)/1 var(--display); letter-spacing: 0.01em; color: var(--ochre); }
.dict__list dt i { font: italic 400 1.05rem/1 var(--body); letter-spacing: 0; color: var(--lime-dim); margin-left: 0.35em; }
.dict__list dd { max-width: var(--measure); margin-top: 0.55rem; text-wrap: pretty; }
@media (max-width: 760px) { .dict__list { grid-template-columns: 1fr; } }

/* ---------- cá dentro ---------- */
.inside { padding-top: 0; }
.inside__list { margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
.inside__list li { display: grid; grid-template-columns: clamp(5rem, 13vw, 11rem) minmax(0, 20rem) minmax(0, var(--measure)); gap: 0.4rem clamp(1.25rem, 3vw, 3rem); align-items: center; }
.inside__art { width: 100%; max-height: 5.5rem; justify-self: start; filter: url(#chalk); overflow: visible; }
.inside__art--tally { max-height: none; }
[data-tally] path { fill: none; stroke: currentColor; stroke-width: 6.5; stroke-linecap: round; }
.inside__list p { text-wrap: pretty; }
.inside__list b { color: var(--ochre); font-weight: 800; }
.inside__note { margin-top: clamp(2rem, 4vw, 3rem); color: var(--lime-dim); font-size: 1.0625rem; }
@media (max-width: 900px) {
  .inside__list li { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; }
  .inside__art { grid-row: span 2; margin-top: 0.3rem; }
}

/* ---------- riscos na parede ---------- */
.wall__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); margin-top: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.marks { position: relative; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); padding-left: clamp(1.75rem, 4vw, 2.75rem); }
.marks::before { content: ""; position: absolute; left: 0.3rem; top: 0.9rem; bottom: 0.9rem; width: 7px; border-radius: 4px; background: var(--oxide); filter: url(#chalk); }
.marks li { position: relative; display: grid; grid-template-columns: clamp(5.2rem, 10vw, 8rem) minmax(0, 1fr); gap: 0 1.25rem; align-items: baseline; }
.marks li::before { content: ""; position: absolute; left: calc(-1 * clamp(1.75rem, 4vw, 2.75rem) - 0.05rem); top: 0.55em; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ochre); box-shadow: 0 0 0 5px var(--wall); }
.marks time { font: 900 clamp(2.4rem, 4.6vw, 3.8rem)/1 var(--display); color: var(--lime); }
.marks p { max-width: 28rem; text-wrap: pretty; }
.clips h3 { margin-bottom: 1rem; }
.clips li { padding: 0.5rem 0; }
.clips a { font-weight: 700; }
.clips span { color: var(--lime-dim); font-size: 0.95em; margin-left: 0.5em; white-space: nowrap; }
@media (max-width: 860px) { .wall__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .marks li { grid-template-columns: 1fr; } }

/* ---------- os ursos ---------- */
.gang { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.gang__lead p { max-width: var(--measure); margin: 1.4rem 0 1.6rem; text-wrap: pretty; }
.emotes { margin-top: clamp(2.5rem, 5vw, 4rem); }
.emotes ul { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 0.75rem clamp(0.6rem, 2vw, 1.6rem); margin-top: 1rem; }
.emotes li { display: grid; justify-items: center; gap: 0.35rem; font-size: clamp(0.78rem, 2.6vw, 0.95rem); color: var(--lime-dim); }
.emotes img { width: clamp(3.5rem, 15vw, 4.5rem); transition: transform 0.2s; }
.emotes li:hover img { transform: translateY(-4px) rotate(-6deg); }
.emotes p { margin: 1rem 0 0; color: var(--lime-dim); font-size: 1.0625rem; }
.socials a { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.25rem; text-decoration: none; border-bottom: 2px solid rgba(243, 231, 207, 0.14); transition: padding 0.18s, border-color 0.18s; }
.socials b { font: 400 clamp(1.9rem, 3.4vw, 2.7rem)/1.05 var(--display); letter-spacing: 0.01em; transition: color 0.18s; }
.socials span { color: var(--lime-dim); text-align: right; font-size: 1.0625rem; }
.socials a::before {
  content: ""; position: absolute; left: 0.1rem; top: 50%; width: 1.45rem; aspect-ratio: 100/110;
  translate: -0.7rem -50%; rotate: 90deg; opacity: 0;
  background: var(--ochre);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cpath d='M50 54c21 0 36 17 32 34-4 17-19 17-32 11-13 6-28 6-32-11-4-17 11-34 32-34z'/%3E%3Cellipse cx='15' cy='40' rx='10.5' ry='13.5' transform='rotate(-24 15 40)'/%3E%3Cellipse cx='37' cy='20' rx='10.5' ry='14.5' transform='rotate(-7 37 20)'/%3E%3Cellipse cx='63' cy='20' rx='10.5' ry='14.5' transform='rotate(7 63 20)'/%3E%3Cellipse cx='85' cy='40' rx='10.5' ry='13.5' transform='rotate(24 85 40)'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cpath d='M50 54c21 0 36 17 32 34-4 17-19 17-32 11-13 6-28 6-32-11-4-17 11-34 32-34z'/%3E%3Cellipse cx='15' cy='40' rx='10.5' ry='13.5' transform='rotate(-24 15 40)'/%3E%3Cellipse cx='37' cy='20' rx='10.5' ry='14.5' transform='rotate(-7 37 20)'/%3E%3Cellipse cx='63' cy='20' rx='10.5' ry='14.5' transform='rotate(7 63 20)'/%3E%3Cellipse cx='85' cy='40' rx='10.5' ry='13.5' transform='rotate(24 85 40)'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity 0.18s, translate 0.18s;
}
.socials a:hover, .socials a:focus-visible { padding-left: 2.3rem; border-color: var(--ochre); }
.socials a:hover::before, .socials a:focus-visible::before { opacity: 1; translate: 0 -50%; }
.socials a:hover b, .socials a:focus-visible b { color: var(--ochre); }
@media (max-width: 860px) { .gang { grid-template-columns: 1fr; } }

/* ---------- lenha ---------- */
.wood__head p { max-width: var(--measure); margin-top: 1.1rem; text-wrap: pretty; }
.logs { display: grid; gap: 1rem; margin-top: clamp(2rem, 5vw, 3.25rem); }
.log {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  padding: 1.35rem clamp(1.25rem, 3vw, 2.25rem) 1.35rem clamp(5.5rem, 9vw, 7.5rem);
  background:
    repeating-linear-gradient(178deg, rgba(0, 0, 0, 0) 0 13px, rgba(0, 0, 0, 0.16) 13px 15px),
    linear-gradient(#4a2f1b, var(--bark) 55%, #2b1b10);
  border-radius: 3.2rem 1.2rem 1.5rem 3.2rem / 3.2rem 1.6rem 1.2rem 3.2rem;
}
.log:nth-child(2) { margin-left: clamp(0rem, 4vw, 3.5rem); rotate: -0.5deg; }
.log:nth-child(3) { margin-right: clamp(0rem, 3vw, 2.5rem); rotate: 0.4deg; }
/* the sawn end, with its rings */
.log::before {
  content: ""; position: absolute; left: 0.55rem; top: 0.55rem; bottom: 0.55rem; aspect-ratio: 0.82;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at 46% 52%, #d9a868 0 5px, #b98445 5px 8px);
  box-shadow: inset 0 0 0 4px #7a5028;
}
.log { transition: translate 0.28s cubic-bezier(0.3, 1.5, 0.5, 1); }
.log::before { transition: rotate 0.6s cubic-bezier(0.3, 0.9, 0.3, 1); }
@media (hover: hover) {
  .log:hover { translate: 0.55rem 0; }
  .log:hover::before { rotate: 48deg; }
}
.log h3 { color: var(--lime); }
.log p { color: #e2cfae; margin-top: 0.15rem; }
@media (max-width: 560px) {
  .log { padding-left: 1.5rem; border-radius: 1.4rem 1.2rem 1.5rem 1.3rem; }
  .log::before { display: none; }
  .log .btn { width: 100%; }
}

/* ---------- parcerias ---------- */
.deal__lead { max-width: var(--measure); margin-top: 1.3rem; font-size: 1.15em; line-height: 1.4; text-wrap: pretty; }
.deal__note { max-width: 41rem; margin-top: 0.7rem; font-size: 1.0625rem; color: var(--lime-dim); text-wrap: pretty; }
/* slabs of rock set around the fire, one per partner */
.slabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.slab {
  height: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  color: var(--lime); text-decoration: none;
  background-color: #3d332c;
  background-image: linear-gradient(165deg, rgba(104, 91, 79, 0.78), rgba(48, 39, 33, 0.9) 70%), url("../assets/img/rock.jpg");
  background-size: auto, 560px;
  box-shadow: inset 0 2px 0 rgba(255, 244, 224, 0.1), inset 0 -14px 26px rgba(0, 0, 0, 0.35), 0 10px 0 -4px rgba(0, 0, 0, 0.35);
  transition: translate 0.22s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.slabs li:nth-child(1) .slab { border-radius: 2.4rem 1.4rem 2rem 1.2rem / 1.6rem 2.2rem 1.4rem 2.4rem; rotate: -0.8deg; }
.slabs li:nth-child(2) .slab { border-radius: 1.3rem 2.6rem 1.5rem 2.2rem / 2.2rem 1.5rem 2.4rem 1.4rem; rotate: 0.5deg; background-position: 0 0, 40% 60%; }
.slabs li:nth-child(3) .slab { border-radius: 2rem 1.5rem 2.6rem 1.3rem / 1.4rem 2.4rem 1.6rem 2.1rem; rotate: -0.3deg; background-position: 0 0, 80% 20%; }
.slabs li:nth-child(2) { margin-top: 0.9rem; }
.slab__art { width: clamp(5rem, 9vw, 7.5rem); margin-bottom: 1.1rem; filter: url(#chalk); overflow: visible; transition: rotate 0.3s cubic-bezier(0.3, 1.5, 0.5, 1); }
.slab h3 { font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--lime); }
.slab p { flex: 1; margin-top: 0.45rem; color: #e2d5bc; text-wrap: pretty; }
.slab__go { margin-top: 1.2rem; font-weight: 800; color: var(--ochre); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.slab:hover { translate: 0 -0.4rem; }
.slab:hover .slab__go { color: var(--ochre-hot); }
.slab:hover .slab__art { rotate: -5deg; }
@media (max-width: 820px) {
  .slabs { grid-template-columns: 1fr; }
  .slabs li:nth-child(2) { margin-top: 0; }
  .slab { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0 1.1rem; align-items: start; }
  .slab__art { width: 100%; grid-row: span 3; margin: 0.35rem 0 0; }
}

.deal__join { margin-top: clamp(3rem, 7vw, 5rem); }
.deal__join p { max-width: var(--measure); margin-top: 0.8rem; text-wrap: pretty; }
.deal__mail {
  display: inline-block; margin-top: 1.4rem;
  font: 400 clamp(1.7rem, 6.2vw, 4.4rem)/1.05 var(--display); letter-spacing: 0.01em;
  color: var(--ochre); text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.16em;
  overflow-wrap: anywhere;
}
.deal__mail:hover { color: var(--ochre-hot); }

/* ---------- o fundo da gruta ---------- */
.deep { padding: clamp(2rem, 6vw, 5rem) var(--gutter) 3rem; text-align: center; display: grid; justify-items: center; }
.deep__bear { position: relative; width: min(26rem, 78vw); }
.deep__bear svg { filter: url(#pigment); transform-origin: 50% 100%; }
.zzz { position: absolute; left: 2%; top: 8%; font: 900 2.2rem/1 var(--display); color: var(--lime); filter: url(#chalk); animation: zzz 4.5s ease-in-out infinite; opacity: 0; }
.zzz:nth-child(2) { animation-delay: 1.5s; }
.zzz:nth-child(3) { animation-delay: 3s; }
@keyframes zzz {
  0% { opacity: 0; transform: translate(1.5rem, 3rem) scale(0.5) rotate(-10deg); }
  25% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-2.5rem, -3.5rem) scale(1.25) rotate(14deg); }
}
.deep__line { margin-top: 2rem; font: 900 clamp(2.1rem, 5.4vw, 3.9rem)/1 var(--display); filter: url(#chalk); text-wrap: balance; }
.deep__sub { margin: 0.8rem 0 1.8rem; color: var(--lime-dim); font-style: italic; }
.deep__age { max-width: 40rem; margin-top: clamp(3rem, 7vw, 5rem); font-size: 1rem; line-height: 1.5; color: var(--lime-dim); text-wrap: pretty; }
.deep__copy { margin-top: 1.25rem; font-size: 0.95rem; color: #9c8d76; }

/* ---------- movement ----------
   Paint moves in held frames, like a flip book. Light moves smoothly. */
@property --ink { syntax: "<percentage>"; inherits: false; initial-value: 120%; }

@media (prefers-reduced-motion: no-preference) {
  /* the name gets clawed just after the torch catches */
  .wordmark { animation: claw 0.3s cubic-bezier(0.55, 0, 0.9, 0.45) 1.9s both, struck 0.5s ease-out 2.12s; }

  .flame--a { animation: flame-a 0.84s step-end infinite; }
  .flame--b { animation: flame-b 0.63s step-end infinite; }
  .hero__alive .pt-hype1.lit, .hero__alive .pt-hype2.lit, .hero__alive .pt-hype3.lit,
  body[data-cave="live"] .hero__alive [class*="pt-hype"] { animation: hop 0.56s step-end infinite; }
  .hero__alive .pt-hype2 { animation-delay: -0.19s; }
  .hero__alive .pt-hype3 { animation-delay: -0.37s; }
  .hero__alive .pt-bear.lit { animation: trot 1.1s step-end infinite; }

  .deep__bear svg { animation: breathe 2.4s ease-in-out infinite alternate; }

  /* things that arrive as you walk down the cave (main.js adds .rv, then .in) */
  .title.rv {
    --ink: 0%;
    -webkit-mask-image: linear-gradient(98deg, #000 calc(var(--ink) - 16%), transparent var(--ink));
            mask-image: linear-gradient(98deg, #000 calc(var(--ink) - 16%), transparent var(--ink));
    transition: --ink 1s cubic-bezier(0.3, 0.1, 0.2, 1);
  }
  .title.rv.in { --ink: 120%; }

  .tracks svg:nth-child(2), .marks li:nth-child(2), .logs li:nth-child(2), .slabs li:nth-child(2) { --n: 1; }
  .tracks svg:nth-child(3), .marks li:nth-child(3), .logs li:nth-child(3), .slabs li:nth-child(3) { --n: 2; }
  .tracks svg:nth-child(4), .marks li:nth-child(4) { --n: 3; }
  .marks li:nth-child(5) { --n: 4; }

  .tracks.rv svg { opacity: 0; scale: 1.45; }
  .tracks.rv.in svg { opacity: 0.82; scale: 1; transition: opacity 0.16s, scale 0.3s cubic-bezier(0.2, 1.5, 0.4, 1); transition-delay: calc(var(--n, 0) * 0.22s); }

  .marks.rv::before { scale: 1 0; transform-origin: 50% 0; }
  .marks.rv li { opacity: 0; translate: -0.7rem 0; }
  .marks.rv li::before { scale: 0; }
  .marks.rv.in::before { scale: 1 1; transition: scale 1.3s linear 0.1s; }
  .marks.rv.in li { opacity: 1; translate: 0 0; transition: opacity 0.4s, translate 0.4s; transition-delay: calc(0.15s + var(--n, 0) * 0.25s); }
  .marks.rv.in li::before { scale: 1; transition: scale 0.35s cubic-bezier(0.2, 1.7, 0.4, 1); transition-delay: calc(0.15s + var(--n, 0) * 0.25s); }

  .inside__art--tally.rv path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
  .inside__art--tally.rv.in path { animation: scratch 0.22s ease-out forwards; animation-delay: calc(var(--i, 0) * 0.05s); }

  .about__figure.rv .about__sun { opacity: 0; scale: 0.55; }
  .about__figure.rv img { opacity: 0; translate: 0 7%; }
  .about__figure.rv .about__hand { opacity: 0; scale: 1.6; }
  .about__figure.rv.in .about__sun { opacity: 1; scale: 1; transition: opacity 0.3s, scale 0.7s cubic-bezier(0.2, 1.2, 0.4, 1); }
  .about__figure.rv.in img { opacity: 1; translate: 0 0; transition: opacity 0.5s 0.25s, translate 0.6s 0.25s cubic-bezier(0.2, 0.8, 0.3, 1); }
  .about__figure.rv.in .about__hand { opacity: 1; scale: 1; transition: opacity 0.12s, scale 0.3s cubic-bezier(0.2, 1.6, 0.4, 1); }
  .about__figure.rv.in .about__hand--a { transition-delay: 0.75s; }
  .about__figure.rv.in .about__hand--b { transition-delay: 1s; }

  .logs.rv .log { opacity: 0; translate: 0 -1.8rem; }
  .logs.rv.in .log { opacity: 1; translate: 0 0; transition: opacity 0.2s, translate 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); transition-delay: calc(var(--n, 0) * 0.15s); }

  .slabs.rv .slab { opacity: 0; scale: 0.93; }
  .slabs.rv.in .slab { opacity: 1; scale: 1; transition: opacity 0.3s, scale 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); transition-delay: calc(var(--n, 0) * 0.14s); }
}

@keyframes claw {
  from { -webkit-mask-size: 100% 100%, 100% 100%; mask-size: 100% 100%, 100% 100%; }
  to   { -webkit-mask-size: 100% 100%, 100% 0%;   mask-size: 100% 100%, 100% 0%; }
}
@keyframes struck {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  16% { translate: -0.022em 0.014em; rotate: -0.55deg; }
  38% { translate: 0.014em -0.006em; rotate: 0.3deg; }
  64% { translate: -0.006em 0.003em; rotate: -0.12deg; }
}
@keyframes flame-a {
  0% { transform: none; }
  25% { transform: scale(0.94, 1.08) skewX(-5deg); }
  50% { transform: scale(1.05, 0.95) skewX(3deg); }
  75% { transform: scale(0.97, 1.11) skewX(5deg); }
}
@keyframes flame-b {
  0% { transform: none; }
  33% { transform: scale(1.1, 0.9) skewX(6deg); }
  66% { transform: scale(0.9, 1.14) skewX(-6deg); }
}
@keyframes hop {
  0%, 100% { translate: 0 0; }
  25% { translate: 0 -10%; }
  50% { translate: 0 -17%; }
  75% { translate: 0 -8%; }
}
@keyframes trot {
  0% { translate: 0 0; rotate: 0deg; }
  25% { translate: 0 -1.2%; rotate: -0.6deg; }
  50% { translate: 0 0; rotate: 0deg; }
  75% { translate: 0 -0.8%; rotate: 0.6deg; }
}
@keyframes breathe { from { scale: 1 1; } to { scale: 1.012 1.035; } }
@keyframes scratch { from { stroke-dashoffset: 1; opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .zzz { opacity: 0.9; position: static; display: inline-block; margin-right: 0.2rem; }
}