/* Shared by every fighter page (/f/<slug>/). Tokens and .wrap/.eyebrow/.btn match the main site's index.html. */
:root{
  --ink:#0e0d0c; --gun:#1a1c1f; --line:#2c2f34; --steel:#a3abb5;
  --lacquer:#b3121b; --lacquer-hi:#d4161f; --red-text:#ef5350; --ember:#ff5a1f;
  --washi:#ece5d6; --washi-ink:#3a352e; --washi-muted:#6d6457;
  --text:#e9e6e1; --muted:#8d949c;
  --ease:cubic-bezier(.23,1,.32,1);
  --display:"Dela Gothic One",system-ui,sans-serif;
  --cond:"Big Shoulders Display",Impact,sans-serif;
  --body:"Barlow",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{-webkit-tap-highlight-color:transparent}
body{background:var(--ink);color:var(--text);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.eyebrow{font:800 13px/1 var(--cond);letter-spacing:.22em;text-transform:uppercase;color:var(--steel)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;font:800 18px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:14px 26px;border:2px solid var(--steel);color:var(--text);background:transparent;
  transition:background-color .2s,color .2s,border-color .2s,transform 160ms var(--ease)}
.btn:active{transform:scale(.97)}
.btn--red{background:var(--lacquer);border-color:var(--lacquer)}

/* ── top strip ── */
.top{border-bottom:1px solid var(--line)}
.top .wrap{white-space:nowrap;display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:900 15px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase}
.brand img{width:32px;height:32px;border-radius:50%;border:1px solid var(--line)}

/* ── photos: same ink-and-lacquer wash as the main card ── */
.pic{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
.pic img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;filter:grayscale(1) contrast(1.25) brightness(.92)}
.pic::before{content:"";position:absolute;inset:0;z-index:1;background:var(--lacquer);mix-blend-mode:multiply;opacity:.3}
.pic::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(14,13,12,.94) 100%)}

/* ── hero: phone first. Photo full-bleed, name rides up onto it. ── */
.hero{position:relative}
.hero .pic{aspect-ratio:1/1;max-height:70svh;width:100%}
.hero .pic::after{background:linear-gradient(180deg,transparent 45%,var(--ink) 100%)}
.seal{position:absolute;z-index:2;top:16px;right:16px;width:84px;height:84px;transform:rotate(5deg)}
.hero-copy{position:relative;z-index:2;margin-top:-84px;padding-bottom:44px}
.says{display:flex;align-items:center;gap:12px;color:var(--text)}
.says::before{content:"";width:32px;height:2px;background:var(--lacquer)}
h1{margin-top:14px;font:400 clamp(44px,14.5vw,128px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em;
  background:linear-gradient(180deg,#f4f5f7 0%,var(--steel) 52%,#5b626b 53%,#c9ced4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin-top:20px;max-width:34ch;font:500 19px/1.45 var(--body)}
.hero .btn{margin-top:26px;width:100%;min-height:56px;font-size:20px}
.fine{margin-top:10px;font-size:14px;color:var(--muted)}

/* ── when ── */
.night{border-block:1px solid var(--line);background:var(--gun)}
.night ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.night li{padding:22px 0 22px 16px;border-left:1px solid var(--line)}
.night li:first-child{border-left:0;padding-left:0}
.night b{display:block;text-transform:uppercase;font:900 clamp(28px,8vw,44px)/1 var(--cond)}
.night span{font:600 13px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.night li:last-child b{color:var(--red-text)}

/* ── the bout ── */
.block{padding:64px 0}
h2{font:400 clamp(30px,8vw,64px)/.94 var(--display);text-transform:uppercase;margin-top:12px}
.faceoff{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin-top:28px}
.faceoff .pic{aspect-ratio:1/1.05}
.faceoff .pic:first-child{border-right:1px solid var(--ink)}
.fighter{position:absolute;z-index:2;left:12px;right:12px;bottom:14px;font:400 clamp(17px,5.6vw,40px)/.9 var(--display);text-transform:uppercase;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.faceoff .pic:last-of-type .fighter{text-align:right}
.vs{position:absolute;z-index:3;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;display:grid;place-items:center;background:var(--ink);border:2px solid var(--steel);transform:rotate(45deg)}
.vs span{transform:rotate(-45deg);font:400 17px/1 var(--display)}
.me{position:absolute;z-index:3;top:0;right:0;background:var(--lacquer);padding:8px 12px;font:900 12px/1 var(--cond);letter-spacing:.24em;text-transform:uppercase}

/* ── cause band ── */
.band{background:var(--washi);color:var(--ink)}
.band .wrap{padding:64px 0}
.band .eyebrow{color:var(--washi-muted)}
.band .big{font:400 96px/.8 var(--display);color:var(--lacquer);margin-bottom:22px}
.band p:not(.eyebrow){max-width:48ch;margin-top:16px;font-size:18px;color:var(--washi-ink)}

/* ── where ── */
.where address{font:600 24px/1.3 var(--cond);font-style:normal;text-transform:uppercase;letter-spacing:.04em;margin-top:14px}
.where .links{display:grid;gap:12px;margin-top:26px}
footer{border-top:1px solid var(--line);padding:28px 0 calc(104px + env(safe-area-inset-bottom));color:var(--muted);font-size:14px}
footer a{color:var(--text)}

/* thumb-reach ticket bar */
.bar{position:fixed;inset:auto 0 0 0;z-index:30;display:block;padding:18px 12px calc(18px + env(safe-area-inset-bottom));text-align:center;text-decoration:none;
  font:900 18px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;background:var(--lacquer);border-top:1px solid var(--ink);
  transition:background-color .15s,transform 160ms var(--ease)}
.bar:active{transform:scale(.98);background:var(--lacquer-hi)}

@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--text);color:var(--ink);border-color:var(--text)}
  .btn--red:hover,.bar:hover{background:var(--lacquer-hi);border-color:var(--lacquer-hi);color:var(--text)}
}

/* desktop is the fallback: copy left, photo right */
@media (min-width:860px){
  .hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;width:min(1180px,100% - 32px);margin-inline:auto;padding:56px 0}
  .hero .pic{order:2;max-height:none;border:1px solid var(--line)}
  .hero-copy{margin-top:0;padding-bottom:0;width:auto}
  h1{font-size:calc((min(1180px,100vw - 32px) - 56px)/12.4)}   /* half the hero grid, 6.2em wide: matches H1 in scripts/fighters.mjs */
  .hero .btn{width:auto}
  .night li{padding:30px 0 30px 28px}
  .block{padding:96px 0}
  .faceoff{max-width:760px}
  .fighter{left:24px;right:24px;bottom:22px}
  .vs{width:76px;height:76px;margin:-38px 0 0 -38px}
  .vs span{font-size:22px}
  .band .wrap{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;padding:88px 0}
  .band .big{font-size:170px;margin:0}
  .where .links{display:flex;flex-wrap:wrap}
  .bar{display:none}
  footer{padding-bottom:32px}
}

@media (prefers-reduced-motion:no-preference){
  .seal{animation:stamp .55s cubic-bezier(.2,.9,.3,1.2) .4s both}
  @keyframes stamp{from{opacity:0;transform:scale(1.9) rotate(16deg)}to{opacity:1;transform:scale(1) rotate(5deg)}}
}

/* ── who I am ── */
.first{display:block;margin-bottom:.14em;font:900 .36em/1 var(--cond);letter-spacing:.1em;color:var(--text);-webkit-text-fill-color:var(--text)}
.hero .pic img{object-position:50% 62%}
.who{border-bottom:1px solid var(--line)}
.who .wrap{display:grid;gap:28px}
.shot{border:1px solid var(--line)}
.shot img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.verse{margin-top:16px;padding-left:18px;border-left:3px solid var(--lacquer);font:600 clamp(22px,5.8vw,32px)/1.3 var(--body)}
.tags{list-style:none;padding:0;margin-top:28px;display:grid;gap:12px}
.tags li{display:flex;gap:12px;font-weight:500}
.tags li::before{content:"";flex:none;width:10px;height:10px;margin-top:.55em;background:var(--lacquer);transform:rotate(45deg)}
.ig{display:inline-block;margin-top:20px;padding-block:12px;font:800 14px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
@media (min-width:860px){ .who .wrap{grid-template-columns:5fr 7fr;gap:56px;align-items:center} }

/* ── built by scripts/fighters.mjs ── */
.me--left{right:auto;left:0}
.draft{padding:8px 12px;text-align:center;background:var(--washi);color:var(--ink);font:800 12px/1.2 var(--cond);letter-spacing:.16em;text-transform:uppercase}
@media (max-width:479px){ .top .eyebrow{display:none} }   /* the longer brand name needs the row on a phone */