/* ==========================================================================
   BORRACHINHA MMA — document tabs (PROFILE, FULL RECORD, STATS)
   Same type, ink and red as the FIGHTER page; native scroll; a smoke
   backdrop with a slow octagon and rising embers behind everything.
   ========================================================================== */

/* Type scales with wide screens, so a 4K or zoomed-out window doesn't leave a small column. */
html:has(body.page-doc){ font-size:clamp(16px, calc(7px + .55vw), 23px); }

body.page-doc{
  height:auto; min-height:100%;
  overflow-x:hidden; overflow-y:auto;
  overscroll-behavior:auto;
}
body.page-doc.menu-open{ overflow:hidden; }

/* --------------------------------------------------------------- backdrop */
.backdrop{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.backdrop canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.backdrop__fallback{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 70% 20%, rgba(210,10,10,.22), transparent 70%),
    radial-gradient(50% 45% at 15% 85%, rgba(210,10,10,.12), transparent 70%),
    var(--ink);
}
.emblem{
  position:fixed; z-index:0; pointer-events:none;
  width:min(120vh, 110vw); aspect-ratio:1;
  right:-28vh; top:-22vh;
  opacity:.16;
  color:var(--blood-lift);
  animation:emblem-turn 160s linear infinite;
}
@keyframes emblem-turn{ to{ transform:rotate(360deg); } }
.page-doc .grain, .page-doc .vignette{ position:fixed; inset:0; z-index:1; pointer-events:none; }

/* ------------------------------------------------------------------ frame */
.doc{
  position:relative; z-index:2;
  padding:calc(clamp(16px,2.4vw,30px) * 2 + 40px) var(--gut) 0;
  max-width:min(94rem, 100%); margin:0 auto;
}
.doc section{ margin:0 0 clamp(80px, 11vw, 150px); }
.page-doc .hud--top{ z-index:6; background:linear-gradient(rgba(5,5,5,.82), rgba(5,5,5,0)); }

.sec-head{ margin:0 0 clamp(28px, 4vw, 52px); max-width:62ch; }
.sec-head .eyebrow{ margin-bottom:.9em; }
.sec-title{
  margin:0;
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.4rem, 5.4vw, 5.2rem); line-height:.86; letter-spacing:-.01em;
}
.sec-note{ margin:1.1em 0 0; color:var(--bone-dim); font-size:.95rem; line-height:1.6; }

.label{
  font-family:var(--label); font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; font-size:.86rem; line-height:1.35; color:#ffc4ce;
  text-shadow:0 0 14px rgba(255,38,38,.35);
}
.chip .label, .duel__row .label, .fight__cell .label, .filter{ text-shadow:none; }
.chip .label{ font-size:.7rem; }
.fight__cell .label{ font-size:.66rem; letter-spacing:.16em; }
.duel__row .label{ font-size:.72rem; color:var(--bone-dim); }
.tile .unit, .totals p, .gauge p, .ring__split, .legend{ color:var(--bone-dim); }
.num{ font-family:var(--display); font-weight:800; line-height:.9; font-variant-numeric:tabular-nums; }
.num small{ font-size:.48em; color:var(--blood-lift); margin-left:.06em; }
.red{ color:var(--blood-lift); }

.card{
  position:relative;
  border:1px solid rgba(242,243,245,.09);
  background:linear-gradient(180deg, rgba(33,12,14,.62), rgba(12,6,7,.62));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:2px;
}
.card::before{ /* red hairline on the top edge */
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,38,38,.7), transparent);
  opacity:.5;
}

/* ------------------------------------------------------------------- hero */
.hero{
  position:relative;
  min-height:calc(100svh - 120px);
  display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  align-items:end; gap:clamp(20px, 4vw, 60px);
  margin-bottom:clamp(60px, 8vw, 120px) !important;
}
.hero__copy{ position:relative; z-index:2; padding-bottom:clamp(20px, 5vh, 70px); }
.hero__nick{
  font-family:var(--label); font-weight:500; letter-spacing:.4em; font-size:.9rem;
  color:var(--blood-lift); margin:0 0 .8em;
}
.hero__name{
  margin:0;
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(3.6rem, 10vw, 10.5rem); line-height:.8; letter-spacing:-.025em;
}
.hero__name > span{ display:block; }
/* line-height .8 lets the caps rise above the line box: keep the eyebrow/nick clear */
.hero__copy > .eyebrow{ margin-bottom:1.1em; }
.hero__name{ padding:.12em 0 .08em; }
.hero__name .ghost{ color:transparent; -webkit-text-stroke:1.5px rgba(242,243,245,.55); }
.hero__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin:1.6em 0 0; }
.chip{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--label); font-weight:500; text-transform:uppercase;
  letter-spacing:.22em; font-size:.66rem;
  padding:.62em 1em; border:1px solid rgba(242,243,245,.16); border-radius:999px;
  color:var(--bone);
}
.chip--live::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--blood-lift); box-shadow:0 0 10px 2px rgba(255,38,38,.8);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 50%{ opacity:.35; } }
.hero__record{ font-size:clamp(2.2rem, 4vw, 3.4rem); }
.hero__record i{ font-style:normal; color:var(--blood-lift); margin:0 .05em; }

.hero__photo{
  position:relative; align-self:stretch; min-height:60vh;
  display:flex; align-items:flex-end; justify-content:center;
}
.hero__photo::before{ /* back-glow */
  content:""; position:absolute; left:10%; right:10%; top:12%; bottom:6%;
  background:radial-gradient(closest-side, rgba(210,10,10,.55), rgba(210,10,10,.12) 60%, transparent);
  filter:blur(10px);
  animation:heartbeat 1.15s ease-out infinite;
}
@keyframes heartbeat{ 0%{ opacity:.85; } 12%{ opacity:1; } 30%{ opacity:.88; } 42%{ opacity:.98; } 100%{ opacity:.85; } }
.hero__photo img{
  position:relative; display:block;
  height:min(88vh, 1240px); width:auto; max-width:100%; object-fit:contain; object-position:bottom;
  /* soft edges: the cut melts into the dark */
  -webkit-mask-image:linear-gradient(to bottom, #000 70%, transparent 98%);
          mask-image:linear-gradient(to bottom, #000 70%, transparent 98%);
  filter:drop-shadow(0 0 1px rgba(5,5,5,.9)) saturate(1.02);
}
/* FULL RECORD and STATS: the photo comes closer, a step bigger (the feet may crop) */
.hero--record .hero__photo img, .hero--stats .hero__photo img{
  height:min(100vh, 1400px); max-width:none;
  transform:scale(1.14); transform-origin:50% 100%;
}
.hero--record .hero__photo img{ max-width:122%; }
.hero__word{
  position:absolute; z-index:-1; left:50%; top:4%;
  transform:translateX(-50%);
  font-family:var(--display); font-weight:900; text-transform:uppercase; white-space:nowrap;
  font-size:clamp(6rem, 22vw, 24rem); line-height:.8; letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1px rgba(255,38,38,.32);
  pointer-events:none;
}

.hero__strip{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1px; margin-top:clamp(26px, 4vh, 44px); }
.hero__strip > *{ padding:18px 20px 20px; }
.hero__strip .num{ font-size:clamp(2.2rem, 3.6vw, 3.2rem); margin-top:.3em; }
.last__vs{ font-family:var(--display); font-weight:800; font-size:1.5rem; line-height:1; text-transform:uppercase; margin:.35em 0 .3em; }
.last__how{ color:var(--bone-dim); font-size:.82rem; }
.badge{
  display:inline-grid; place-items:center;
  min-width:1.9em; height:1.9em; padding:0 .4em;
  font-family:var(--display); font-weight:900; font-size:.9rem;
  border:1px solid rgba(242,243,245,.25); color:var(--bone-dim);
}
.badge--w{ background:var(--blood); border-color:var(--blood); color:var(--bone); box-shadow:0 0 16px rgba(210,10,10,.55); }

/* ------------------------------------------------------------- info grid */
.info{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:1px; background:rgba(242,243,245,.07); }
.info > div{ background:rgba(10,5,7,.82); padding:22px 20px 24px; }
.info dt{ margin:0 0 .9em; }
.info dd{ margin:0; font-family:var(--display); font-weight:800; font-size:1.55rem; text-transform:uppercase; line-height:1; }

/* ------------------------------------------------------------- stat kit */
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(14px, 2vw, 24px); }
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 2vw, 24px); }
.grid-4{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(14px, 2vw, 24px); }
.pad{ padding:clamp(20px, 2.6vw, 34px); }

.ring{ display:flex; align-items:center; gap:clamp(18px, 2.4vw, 32px); }
.ring svg{ width:clamp(120px, 12vw, 168px); height:auto; flex:none; transform:rotate(-90deg); }
.ring__track{ fill:none; stroke:rgba(242,243,245,.08); stroke-width:7; }
.ring__bar{
  fill:none; stroke:var(--blood-lift); stroke-width:7; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(255,38,38,.75));
  transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1);
}
.ring__num{ font-size:clamp(2.6rem, 4.4vw, 3.8rem); }
.ring__split{ margin-top:.9em; display:grid; grid-template-columns:auto auto; gap:.45em 1.4em; font-size:.84rem; color:var(--bone-dim); }
.ring__split b{ color:var(--bone); font-weight:500; font-variant-numeric:tabular-nums; }

.tile{ padding:22px 20px 24px; }
.tile .num{ font-size:clamp(2.2rem, 3.4vw, 3rem); margin:.35em 0 .25em; }
.tile .unit{ font-size:.86rem; color:var(--bone-dim); }

.bars{ display:grid; gap:20px; }
.bar__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.6em; }
.bar__val{ font-family:var(--display); font-weight:800; font-size:1.3rem; }
.bar__val em{ font-style:normal; color:var(--bone-faint); font-size:.75em; margin-left:.4em; }
.bar__track{ height:6px; background:rgba(242,243,245,.07); overflow:hidden; }
.bar__fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--blood), var(--blood-lift));
  box-shadow:0 0 12px rgba(255,38,38,.6);
  transition:width 1.4s cubic-bezier(.2,.7,.2,1);
}

.target{ display:grid; grid-template-columns:auto 1fr; gap:clamp(18px, 3vw, 40px); align-items:center; }
.target{ grid-template-columns:minmax(0, .9fr) minmax(0, 1fr); }
.figure{ width:100%; max-width:15rem; height:auto; justify-self:center; overflow:visible; }
.figure__arms path{ fill:rgba(242,243,245,.08); stroke:rgba(242,243,245,.22); stroke-width:.8; }
.figure__zone path{ fill:rgba(255,38,38,var(--a)); stroke:rgba(255,206,212,.75); stroke-width:.9; transition:fill 1.2s ease; }
.figure__zone[data-zone="head"] path{ animation:zone-pulse 2.3s ease-in-out infinite; }
@keyframes zone-pulse{ 50%{ fill:rgba(255,140,143,calc(var(--a) + .1)); } }
.figure__detail path{ fill:none; stroke:rgba(20,4,6,.45); stroke-width:1.1; stroke-linecap:round; }
.figure__light path{ mix-blend-mode:soft-light; }
.target__rows{ display:grid; gap:16px; }
.target__row{ display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:baseline; border-bottom:1px solid rgba(242,243,245,.07); padding-bottom:12px; }
.target__row .num{ font-size:2.3rem; }
.target__row span:last-child{ color:var(--bone-faint); font-size:.8rem; font-variant-numeric:tabular-nums; }

/* ------------------------------------------- strikes by target panel */
.tp-layout{ display:grid; grid-template-columns:minmax(0, .945fr) minmax(0, .729fr) minmax(0, .729fr); gap:clamp(14px, 1.6vw, 22px); align-items:start; }
.tp{ display:block; width:100%; height:auto; filter:drop-shadow(0 0 30px rgba(210,10,10,.18)); }
.tp text{ font-family:var(--label); }
.tp__title{ font-weight:600; font-size:44px; letter-spacing:6px; fill:#ffeaee; }
.tp__sub{ font-family:var(--body) !important; font-size:30px; fill:#d0a9ae; }
.tp__sub--sm{ font-size:24px; fill:#be9a9e; }
.tp__label{ font-weight:600; font-size:40px; letter-spacing:5px; fill:#ffdce3; }
.tp__pct{ font-family:var(--display) !important; font-weight:800; font-size:86px; fill:#fff; }
.tp__pctSign{ font-size:58px; fill:#ff2626; }
.tp__n{ font-family:var(--body) !important; font-size:28px; fill:#c7a5a9; }
.tp__track{ fill:#34171c; }
.tp__bar{ fill:url(#tpBar); transform-box:fill-box; transform-origin:left center; transform:scaleX(0); transition:transform 1.5s cubic-bezier(.2,.7,.2,1); }
.tp__line{ fill:none; stroke:#e36776; stroke-width:1.8; }
.tp__dot{ fill:#ffa0aa; filter:drop-shadow(0 0 6px rgba(255,160,170,.9)); }
.tp__total{ font-family:var(--display) !important; font-weight:800; font-size:124px; fill:#fff; }
.pp{ display:block; width:100%; height:auto; filter:drop-shadow(0 0 30px rgba(210,10,10,.16)); }
.pp text{ font-family:var(--label); }
.pp__title{ font-weight:600; font-size:56px; letter-spacing:7px; fill:#ffeef1; }
.pp__sub{ font-weight:500; font-size:21px; letter-spacing:8px; fill:#e88397; }
.pp__card{ fill:#1a0a0c; stroke:rgba(242,243,245,.08); stroke-width:1.5; }
.pp__card--hot{ fill:#340f15; stroke:#ea475c; stroke-width:2; filter:drop-shadow(0 0 14px rgba(234,71,92,.35)); }
.pp__label{ font-weight:600; font-size:30px; letter-spacing:3px; fill:#ffeaee; }
.pp__n{ font-family:var(--display) !important; font-weight:700; font-size:56px; fill:#ffeaee; }
.pp__unit{ font-family:var(--label); font-weight:500; font-size:24px; letter-spacing:3px; fill:#cb8594; }
.pp__pct{ font-family:var(--display) !important; font-weight:800; font-size:96px; fill:#ffd8de; }
.pp__pctSign{ font-family:var(--display) !important; font-weight:700; font-size:44px; fill:#ff8395; }
.pp__track{ fill:#34191d; }
.pp__bar{ fill:url(#ppBar); transform-box:fill-box; transform-origin:left center; transform:scaleX(0); transition:transform 1.5s cubic-bezier(.2,.7,.2,1); }
.pp__big{ font-family:var(--display) !important; font-weight:800; font-size:112px; fill:#ffe6ea; }
.pp__foot{ font-weight:600; font-size:25px; letter-spacing:4px; fill:#ff8ca1; }
.pp__arc{ fill:none; stroke-width:58; transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1); }
.pp__donutN{ font-family:var(--display) !important; font-weight:800; font-size:112px; fill:#fff; }
.pp__donutL{ font-weight:600; font-size:25px; letter-spacing:4px; fill:#c59aa2; }
.pp__mLabel{ font-weight:600; font-size:30px; letter-spacing:3px; }
.pp__mN{ font-family:var(--display) !important; font-weight:700; font-size:44px; fill:#ffeaee; }
.pp__mPct{ font-family:var(--display) !important; font-weight:700; font-size:38px; fill:#f87286; }
.tp__totalLabel{ font-weight:600; font-size:32px; letter-spacing:4px; fill:#ffd6df; }

/* ---------------------------------------------------------------- lists */
.facts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 2vw, 24px); }
.facts li{ padding:24px 22px 26px; font-size:1rem; line-height:1.55; }
.facts li::after{
  content:""; display:block; width:26px; height:26px; margin-top:18px;
  background:var(--blood-lift); opacity:.8;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

.timeline{ position:relative; margin:0; padding:0 0 0 clamp(22px, 3vw, 40px); list-style:none; }
.timeline::before{
  content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(rgba(255,38,38,.8), rgba(255,38,38,.05));
}
.timeline li{ position:relative; padding:0 0 clamp(26px, 3vw, 38px); }
.timeline li::before{
  content:""; position:absolute; left:calc(-1 * clamp(22px, 3vw, 40px) + 1px); top:.35em;
  width:11px; height:11px; border-radius:50%;
  background:var(--ink); border:1px solid var(--blood-lift);
}
.timeline li.is-w::before{ background:var(--blood-lift); box-shadow:0 0 12px 2px rgba(255,38,38,.7); }
.timeline__when{ display:flex; gap:14px; align-items:center; margin-bottom:.5em; }
.timeline__text{ margin:0; font-size:1.05rem; line-height:1.55; max-width:62ch; }

.qa{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); /* eight answers: two rows of four */ gap:1px; background:rgba(242,243,245,.07); }
.qa > div{ background:rgba(10,5,7,.86); padding:24px 22px 28px; }
.qa dt{ margin:0 0 .9em; color:var(--blood-lift); }
.qa dd{ margin:0; font-size:.98rem; line-height:1.6; }

.videos{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(12px, 1.6vw, 20px); }
.video{
  display:flex; flex-direction:column; gap:16px;
  padding:0 0 20px; text-decoration:none; color:var(--bone); overflow:hidden;
  transition:border-color .3s, transform .3s var(--ease);
}
.video:hover{ border-color:rgba(255,38,38,.6); transform:translateY(-3px); }
.video__cover{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#120607; }
.video__cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease), filter .5s; filter:saturate(.9) brightness(.82); }
.video__cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,5,5,0) 45%, rgba(5,5,5,.75)); }
.video:hover .video__cover img{ transform:scale(1.06); filter:saturate(1.05) brightness(1); }
.video__title{ padding:0 20px; }
.video__play{
  position:absolute; z-index:1; left:16px; bottom:14px;
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:rgba(210,10,10,.85); color:#fff; box-shadow:0 0 20px rgba(255,38,38,.7);
  transition:transform .3s var(--ease);
}
.video:hover .video__play{ transform:scale(1.1); }
.video__play svg{ width:15px; height:15px; margin-left:3px; fill:currentColor; }
.video__title{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.18rem; line-height:1.02; }

/* ---------------------------------------------------------------- record */
.split{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(14px, 2vw, 24px); }
.split__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px; }
.split__head .num{ font-size:clamp(3rem, 5vw, 4.6rem); }
.stack{ display:flex; height:10px; gap:3px; margin-bottom:18px; }
.stack i{ display:block; height:100%; background:rgba(242,243,245,.14); transition:flex-grow 1.4s cubic-bezier(.2,.7,.2,1); flex-grow:0; flex-basis:0; }
.stack i.is-ko{ background:var(--blood-lift); box-shadow:0 0 12px rgba(255,38,38,.6); }
.stack i.is-dec{ background:rgba(255,38,38,.45); }
.stack i.is-sub{ background:rgba(242,243,245,.6); }
.legend{ display:flex; flex-wrap:wrap; gap:10px 24px; font-size:.84rem; color:var(--bone-dim); }
.legend b{ color:var(--bone); font-weight:500; margin-left:.35em; }
.legend i{ display:inline-block; width:9px; height:9px; margin-right:.55em; vertical-align:middle; }

.orgs{ display:flex; flex-wrap:wrap; gap:10px; }
.orgs .chip b{ font-family:var(--display); font-weight:900; font-size:1rem; letter-spacing:.04em; color:var(--blood-lift); }

.filters{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px; }
.filter{
  appearance:none; cursor:pointer; background:transparent;
  font-family:var(--label); font-weight:500; text-transform:uppercase; letter-spacing:.22em; font-size:.66rem;
  padding:.75em 1.15em; border:1px solid rgba(242,243,245,.16); border-radius:999px; color:var(--bone-dim);
  transition:color .2s, border-color .2s, background-color .2s;
}
.filter:hover{ color:var(--bone); border-color:rgba(242,243,245,.4); }
.filter[aria-pressed="true"]{ color:var(--bone); border-color:var(--blood-lift); background:rgba(210,10,10,.28); }
.filter:focus-visible, .video:focus-visible, .fight summary:focus-visible{ outline:2px solid var(--blood-lift); outline-offset:3px; }

.year{
  display:flex; align-items:center; gap:18px; margin:34px 0 14px;
  font-family:var(--display); font-weight:900; font-size:clamp(1.8rem, 3vw, 2.6rem); color:rgba(242,243,245,.18);
}
.year::after{ content:""; flex:1; height:1px; background:rgba(242,243,245,.08); }
.bout{
  display:grid; align-items:center;
  grid-template-columns:72px minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, .9fr) 92px;
  gap:clamp(12px, 2vw, 28px);
  padding:20px clamp(16px, 2vw, 26px); margin-bottom:10px;
  transition:border-color .3s, transform .3s var(--ease);
}
.bout:hover{ border-color:rgba(255,38,38,.45); }
.bout.is-finish{ background:linear-gradient(90deg, rgba(210,10,10,.22), rgba(12,6,7,.62) 55%); }
.bout__res{ font-family:var(--display); font-weight:900; font-size:2.6rem; line-height:1; color:rgba(242,243,245,.3); }
.bout.is-w .bout__res{ color:var(--blood-lift); text-shadow:0 0 18px rgba(255,38,38,.6); }
.bout__vs{ font-family:var(--display); font-weight:800; font-size:1.5rem; line-height:1; text-transform:uppercase; }
.bout__event{ margin-top:.4em; font-size:.84rem; color:var(--bone-dim); }
.bout__how{ font-family:var(--display); font-weight:800; font-size:1.15rem; text-transform:uppercase; line-height:1.05; }
.bout__detail{ margin-top:.3em; font-size:.84rem; color:var(--bone-dim); }
.bout__ref{ font-size:.84rem; color:var(--bone-dim); }
.bout__ref b{ display:block; color:var(--bone); font-weight:500; margin-top:.3em; }
.bout__time{ text-align:right; }
.bout__time .num{ font-size:1.6rem; margin-top:.25em; }
.tag{
  display:inline-block; margin-left:.7em; vertical-align:middle;
  font-family:var(--label); font-weight:500; letter-spacing:.2em; font-size:.56rem;
  padding:.35em .6em; border:1px solid rgba(255,38,38,.6); color:var(--blood-lift);
}
.bout[hidden], .year[hidden]{ display:none; }

/* ----------------------------------------------------------------- stats */
.gauges{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(12px, 1.6vw, 20px); }
.gauge{ padding:22px 20px 24px; display:flex; flex-direction:column; gap:14px; }
.gauge svg{ width:100%; max-width:190px; height:auto; align-self:center; overflow:visible; }
.gauge__track{ fill:none; stroke:rgba(242,243,245,.08); stroke-width:8; stroke-linecap:round; }
.gauge__bar{ fill:none; stroke:var(--blood-lift); stroke-width:8; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(255,38,38,.8)); transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1); }
.gauge__val{ font-family:var(--display); font-weight:800; font-size:44px; fill:var(--bone); }
.gauge__key{ font-family:var(--label); font-size:11px; letter-spacing:.24em; fill:var(--bone-dim); text-transform:uppercase; }
.gauge p{ margin:0; font-size:.95rem; font-weight:500; color:#ffc4ce; text-align:center; line-height:1.45; }

.duel{ display:grid; gap:18px; }
.duel__row{ display:grid; grid-template-columns:76px 1fr 140px 1fr 76px; align-items:center; gap:12px; }
.duel__row .num{ font-size:1.5rem; }
.duel__row .num:first-child{ text-align:right; color:var(--blood-lift); }
.duel__row .label{ text-align:center; letter-spacing:.18em; }
.duel__bar{ height:6px; background:rgba(242,243,245,.06); position:relative; overflow:hidden; }
.duel__bar i{ position:absolute; top:0; bottom:0; width:0; transition:width 1.3s cubic-bezier(.2,.7,.2,1); }
.duel__bar--me i{ right:0; background:linear-gradient(270deg, var(--blood-lift), var(--blood)); box-shadow:0 0 10px rgba(255,38,38,.6); }
.duel__bar--op i{ left:0; background:rgba(242,243,245,.42); }

.fight{ margin-bottom:12px; }
.fight summary{
  list-style:none; cursor:pointer;
  display:grid; align-items:center; grid-template-columns:64px minmax(0, 1.4fr) minmax(0, 1fr) repeat(4, 86px) 28px;
  gap:clamp(10px, 1.6vw, 22px); padding:18px clamp(16px, 2vw, 24px);
}
.fight summary::-webkit-details-marker{ display:none; }
.fight__cell{ text-align:center; }
.fight__cell .num{ font-size:1.35rem; display:block; }
.fight__cell .label{ font-size:.55rem; letter-spacing:.2em; }
.fight__chev{ width:14px; height:14px; justify-self:end; border-right:1.5px solid var(--bone-dim); border-bottom:1.5px solid var(--bone-dim); transform:rotate(45deg); transition:transform .3s; }
.fight[open] .fight__chev{ transform:rotate(-135deg); }
.fight__body{ padding:6px clamp(16px, 2vw, 24px) 28px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(18px, 3vw, 40px); }
.fight__body h4{ margin:0 0 16px; }
.duel__names{ display:flex; justify-content:space-between; margin-bottom:14px; }

.totals{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:1px; background:rgba(242,243,245,.07); }
.totals > div{ background:rgba(10,5,7,.84); padding:22px 20px 24px; }
.totals .num{ font-size:clamp(2rem, 3.2vw, 2.8rem); margin:.35em 0 .25em; }
.totals p{ margin:0; font-size:.8rem; color:var(--bone-faint); }

/* ---------------------------------------------------------------- footer */
.doc-foot{
  border-top:1px solid rgba(242,243,245,.08);
  padding:40px 0 60px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px;
}
.doc-foot p{ margin:0; font-size:.8rem; color:var(--bone-faint); max-width:60ch; line-height:1.6; }
.doc-foot nav{ display:flex; gap:22px; flex-wrap:wrap; }
.doc-foot a{ font-family:var(--label); letter-spacing:.24em; font-size:.7rem; text-transform:uppercase; color:var(--bone-dim); text-decoration:none; }
.doc-foot a:hover, .doc-foot a[aria-current="page"]{ color:var(--blood-lift); }

/* ---------------------------------------------------------------- reveal */
.rv{ opacity:0; transform:translate3d(0, 34px, 0); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s; } .rv-d2{ transition-delay:.16s; } .rv-d3{ transition-delay:.24s; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 1100px){
  .tp-layout{ grid-template-columns:1fr 1fr; }
  .tp-layout > :first-child{ grid-column:1 / -1; width:min(100%, 640px); justify-self:center; }
  .info{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .videos, .gauges{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .facts, .qa{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .totals{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .fight summary{ grid-template-columns:54px minmax(0, 1fr) repeat(2, 76px) 24px; }
  .fight summary .fight__cell--x{ display:none; }
}
@media (max-width: 760px){
  .hero{ grid-template-columns:1fr; min-height:0; }
  .hero__photo{ order:-1; min-height:0; margin-top:-10px; }
  .hero__photo img{ height:62vh; }
  .hero--record .hero__photo img, .hero--stats .hero__photo img{ height:66vh; max-width:100%; transform:scale(1.08); }
  .hero__copy{ padding-bottom:0; }
  .hero__strip{ grid-template-columns:1fr; }
  .info{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .grid-2, .grid-3, .split, .fight__body, .tp-layout{ grid-template-columns:1fr; }
  .facts, .qa{ grid-template-columns:1fr; }
  /* Videos: a compact two-up grid, as on desktop */
  .videos{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .video{ gap:10px; padding-bottom:12px; }
  .video__title{ padding:0 10px; font-size:.82rem; line-height:1.08; }
  .video__play{ width:32px; height:32px; left:8px; bottom:8px; }
  .video__play svg{ width:11px; height:11px; }
  .ring{ flex-direction:column; align-items:flex-start; }
  /* Body figure stays beside its numbers, as on desktop */
  .target{ grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:14px; }
  .figure{ max-width:8.5rem; }
  .target__rows{ gap:10px; }
  .target__row{ grid-template-columns:1fr auto; gap:4px 10px; padding-bottom:8px; }
  .target__row .num{ font-size:1.7rem; }
  .target__row span:last-child{ grid-column:1 / -1; font-size:.72rem; }
  .bout{ grid-template-columns:44px minmax(0, 1fr) auto; grid-template-areas:"res vs time" "res how how" "res ref ref"; row-gap:12px; }
  .bout__res{ grid-area:res; font-size:2rem; align-self:start; }
  .bout__main{ grid-area:vs; } .bout__method{ grid-area:how; } .bout__ref{ grid-area:ref; } .bout__time{ grid-area:time; align-self:start; }
  .totals{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .duel__row{ grid-template-columns:52px 1fr 92px 1fr 52px; gap:8px; }
  .duel__row .num{ font-size:1.15rem; }
  .fight summary{ grid-template-columns:44px minmax(0, 1fr) 70px 22px; }
  .fight summary .fight__cell--m{ display:none; }
  .emblem{ width:120vw; right:-50vw; top:-10vh; }
}
@media (prefers-reduced-motion: reduce){
  .emblem, .hero__photo::before, .chip--live::before{ animation:none; }
  .rv{ opacity:1; transform:none; transition:none; }
}

/* The giant words behind the photos run past the screen edge: clip them there, no sideways scroll. */
html:has(body.page-doc){ overflow-x:clip; }

/* The nickname sits right over the giant name too. */
.hero__nick{ margin-bottom:1.1em; }

/* Borrachinha's FULL RECORD and STATS photos (arms raised, full length) are
   taller than the ones this size was set for: no zoom, and the head stays
   below the menu. */
.hero--record .hero__photo img, .hero--stats .hero__photo img{ height:min(82vh, 1150px); max-width:100%; transform:none; }
@media (max-width: 760px){
  .hero--record .hero__photo img, .hero--stats .hero__photo img{ height:62vh; transform:none; }
}