/* ==========================================================================
   Fight Artist — public site
   Brand values live in :root below. They match the Fight Artist Instagram:
   black, logo red, fire/ember glow, gold for dates and details,
   heavy slanted condensed capitals for headlines.
   ========================================================================== */
:root {
  /* core */
  --black: #000;             /* page background, same as the logo background */
  --surface: #141110;        /* cards, footer, form panels: warm near-black */
  --line: #2b2624;           /* borders and dividers */
  --text: #f2efea;           /* warm off-white, like the Instagram text */
  --muted: #a8a19b;          /* dates, captions, secondary text */
  /* brand */
  --red: #cb0e13;            /* Fight Artist red, from the logo */
  --red-hover: #e5161c;
  --link: #ff5c61;           /* links inside articles: a lighter red that's easy to read on black */
  --ember: #d74f29;          /* fire glow: orange-red */
  --rust: #872617;           /* deep fire glow */
  --gold: #e7be54;           /* dates, venues, "details" highlights */
  --corner-blue: #224aa5;    /* the blue corner in fight posters */
  /* type */
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;  /* headlines: extra-bold italic capitals */
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; /* reading text */
  --wrap: 1240px;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0; color: var(--text); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased;
  /* a faint fire glow at the top of every page, like the Instagram posters */
  background: radial-gradient(110% 55% at 50% -12%, rgba(135, 38, 23, .5), rgba(0, 0, 0, 0) 62%) no-repeat, var(--black);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
h1, h2, h3 { margin: 0; }
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--red); color: #fff; padding: .75rem 1rem; z-index: 30; }
.skip:focus { left: .5rem; }

/* Display type: the Instagram headline style. Short, heavy, slanted capitals. */
.display, .btn, .tag, .section-head h2, .list-head h1, .article-head h1, .post-card.lead h3,
.welcome h1, .not-found h1, .contact-intro h1, .form-card.sent h2, .prose h2, .prose h3, .share > span {
  font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
}

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; background: var(--red); color: #fff; border: 0;
       padding: .75rem 1.4rem; font-size: 1.2rem; line-height: 1; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--red-hover); }

/* Signature: slanted red tag, echoing the angle in the logo */
.tag {
  display: inline-block; background: var(--red); color: #fff; text-decoration: none;
  font-size: .95rem; line-height: 1; padding: .38rem .9rem .34rem .75rem;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.tag:hover { background: var(--red-hover); }

/* The logo image has a black background; this makes the black disappear on any dark surface */
.brand img { mix-blend-mode: lighten; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--black); position: sticky; top: 0; z-index: 20; }
.header-row { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex-shrink: 0; min-height: 48px; }
.brand img { width: 44px; height: 44px; }
.wordmark { font: italic 800 1.75rem/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.wordmark .red { color: var(--red); }
.site-nav { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.site-nav > ul { display: flex; gap: 1.1rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.site-nav a, .site-nav summary { font: italic 800 1.15rem/1 var(--display); text-transform: uppercase; letter-spacing: .01em;
                                 text-decoration: none; color: var(--text); cursor: pointer; }
.site-nav a:hover, .site-nav summary:hover, .site-nav a[aria-current] { color: var(--red); }
.site-nav a, .site-nav summary { white-space: nowrap; }
.has-sub { position: relative; }
.has-sub summary { list-style: none; }
.has-sub summary::-webkit-details-marker { display: none; }
.has-sub summary::after { content: ""; display: inline-block; margin-left: .35rem; border: 5px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.sub { list-style: none; margin: 0; padding: .5rem 0; position: absolute; top: calc(100% + .9rem); left: -1rem; min-width: 240px;
       background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--red); }
.sub a { display: block; padding: .6rem 1rem; font: 600 1rem/1.3 var(--body); text-transform: none; font-style: normal; letter-spacing: 0; }
.nav-search input { width: 150px; background: var(--surface); border: 1px solid var(--line); color: var(--text); padding: .5rem .75rem; font: inherit; font-size: 16px; }
.nav-search input:focus { border-color: var(--red); outline: none; }
/* Instagram / YouTube icons in the header: icons only on wide screens, icon + name inside the Menu */
.social-icons { display: flex; align-items: center; gap: .25rem; }
.site-nav a.social-icon { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-width: 44px; min-height: 44px;
                          color: var(--text); font: 600 1rem/1 var(--body); text-transform: none; letter-spacing: 0; }
.site-nav a.social-icon:hover { color: var(--red); }
.social-icon .social-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { display: block; flex-shrink: 0; }
.btn .icon { width: 20px; height: 20px; margin-right: .55rem; }
.site-footer a.with-icon { display: inline-flex; align-items: center; gap: .55rem; }
.site-footer a.with-icon .icon { width: 20px; height: 20px; }
.menu-toggle { display: none; margin-left: auto; min-height: 44px; min-width: 64px; background: none; border: 1px solid var(--line); color: var(--text);
               padding: .55rem .9rem; font: italic 800 1.1rem/1 var(--display); text-transform: uppercase; cursor: pointer; }

/* ---------- Home ---------- */
.welcome { text-align: center; padding: 6rem 0; display: grid; gap: 1.2rem; justify-items: center; }
.welcome h1 { font-size: clamp(2.6rem, 7vw, 5rem); line-height: .95; max-width: 14ch; }
.welcome p { color: var(--muted); max-width: 46ch; margin: 0; }

.hero { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; padding: 1.75rem 0 0; align-items: start; }
.hero-side { display: grid; gap: 1.5rem; align-content: start; }

.block { padding: 3rem 0 0; }
.band { background: var(--surface); margin-top: 3rem; padding-bottom: 3rem; }
.band .block { padding-top: 2.5rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.section-head h2 { font-size: 2.1rem; line-height: 1; display: flex; align-items: center; gap: .6rem; }
.section-head h2::before { content: ""; width: 14px; height: 1.4rem; background: var(--red); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.section-head a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .6rem 0; }
.section-head a:hover { color: var(--red); }

/* ---------- Cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 2rem 1.25rem; }
.grid.four { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.post-card { display: grid; gap: .8rem; align-content: start; position: relative; }

/* Images are never cropped. Whatever the shape (wide photo, square or portrait
   Instagram poster), the whole image shows, and any spare space is filled with
   a blurred, darkened copy of the same image. */
.card-img { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); isolation: isolate; }
.card-img::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--bg, none) center / cover no-repeat;
                    filter: blur(18px) brightness(.42) saturate(1.2); }
.card-img > img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.post-card:hover .card-img > img { transform: scale(1.02); }
.placeholder { display: grid; place-items: center; width: 100%; height: 100%; }
.placeholder img { width: 64px; height: 64px; opacity: .85; mix-blend-mode: lighten; }
.play { position: absolute; left: .75rem; bottom: .75rem; width: 44px; height: 44px; border-radius: 50%; background: var(--red); }
.play::after { content: ""; position: absolute; left: 17px; top: 13px; border: 9px solid transparent; border-left: 14px solid #fff; border-right: 0; }
.card-body { display: grid; gap: .5rem; justify-items: start; }
.post-card h3 { font: 700 1.15rem/1.3 var(--body); }
.post-card h3 a { text-decoration: none; }
/* the whole card is one big tap target; the category tag stays tappable on its own */
.post-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card .tag { position: relative; z-index: 2; }
.post-card h3 a:hover { color: var(--red); }
.post-card time { color: var(--muted); font-size: .875rem; }

/* Top story: big headline in the Instagram style, under the image (never on top of it,
   because covers are often designed graphics with their own text) */
.post-card.lead h3 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: .98; }
.post-card.lead .excerpt { margin: 0; color: #d6d0ca; max-width: 60ch; font-size: 1.05rem; }
.post-card.side h3 { font-size: 1.1rem; }

/* ---------- List pages ---------- */
.list-head { padding: 2.5rem 0 0; display: grid; gap: .6rem; }
.list-head h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; }
.list-head p { color: var(--muted); margin: 0; max-width: 60ch; }
.big-search { display: flex; gap: .5rem; margin-top: .75rem; max-width: 560px; }
.big-search input { flex: 1; min-width: 0; min-height: 48px; background: var(--surface); border: 1px solid var(--line); color: var(--text); padding: .8rem 1rem; font: inherit; font-size: 16px; }
.big-search input:focus { border-color: var(--red); outline: none; }
.empty { color: var(--muted); }
.empty a { color: var(--text); }
.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 2.5rem; color: var(--muted); }
.pager a { color: var(--text); font-weight: 600; padding: .75rem 1rem; border: 1px solid var(--line); text-decoration: none; }
.pager a:hover { border-color: var(--text); }

/* ---------- Article ---------- */
.article { max-width: 900px; padding-top: 2.5rem; }
.article-head { display: grid; gap: 1rem; justify-items: start; max-width: 700px; margin-inline: auto; }
.article-head h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1; }
.standfirst { font-size: 1.25rem; line-height: 1.5; color: #d6d0ca; margin: 0; }
.byline { display: flex; gap: 1.25rem; flex-wrap: wrap; color: var(--muted); font-size: .95rem; margin: 0; }
/* the cover shows in full, never cropped: wide photos fill the width, portrait posters are centred on a blurred fill */
.cover { margin: 2rem 0 0; position: relative; overflow: hidden; background: var(--surface); isolation: isolate; }
.cover::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--bg, none) center / cover no-repeat;
                 filter: blur(22px) brightness(.4) saturate(1.2); }
.cover img { width: auto; max-width: 100%; max-height: min(80vh, 900px); margin-inline: auto; }
.prose { max-width: 700px; margin: 2rem auto 0; font-size: 1.125rem; line-height: 1.75; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.2em; }
.prose p { margin-bottom: 0; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 2rem; line-height: 1.02; margin-top: 1.6em; }
.prose h3 { font-size: 1.5rem; line-height: 1.05; margin-top: 1.4em; }
.prose a { color: var(--link); text-underline-offset: 3px; }
.prose a:hover { color: #fff; }
.prose blockquote { margin: 1.6em 0; padding: .2rem 0 .2rem 1.25rem; border-left: 4px solid var(--red); font-size: 1.3rem; line-height: 1.5; font-style: italic; color: #ece7e1; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .4em; }
.prose img { width: 100%; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.embed { max-width: 700px; margin: 2rem auto 0; }
.embed.yt iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.embed.social { display: flex; justify-content: center; }
.embed.social > * { max-width: 100% !important; min-width: 0 !important; }
.chips { list-style: none; padding: 0; margin: 2.5rem auto 0; max-width: 700px; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips a { display: inline-flex; align-items: center; min-height: 40px; border: 1px solid var(--line); padding: .4rem .9rem; text-decoration: none; font-size: .9rem; font-weight: 600; }
.chips a:hover { border-color: var(--red); color: var(--red); }
.share { max-width: 700px; margin: 1.75rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.share > span { font-size: 1.3rem; line-height: 1; margin-right: .4rem; }
.share-btn { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 1px solid var(--line); color: var(--text);
             padding: .55rem 1.1rem; font: 600 .95rem/1 var(--body); text-decoration: none; cursor: pointer; }
.share-btn:hover { border-color: var(--text); }
.share-btn.wa:hover { border-color: #25d366; color: #25d366; }
.related { margin-top: 1rem; }
.preview-bar { background: #3a2a05; border-bottom: 2px solid var(--gold); padding: .75rem 1.25rem; text-align: center; }
.preview-bar a { color: var(--gold); margin-left: .5rem; }
.preview-bar.subtle { background: var(--surface); border-bottom: 1px solid var(--line); padding: .5rem; font-size: .9rem; }

/* ---------- 404 ---------- */
.not-found { padding: 4rem 0 2rem; display: grid; gap: 1rem; justify-items: start; max-width: 640px; }
.not-found .big-404 { font: italic 800 clamp(6rem, 20vw, 11rem)/.8 var(--display); color: var(--red); margin: 0; }
.not-found h1 { font-size: 2.4rem; line-height: 1; }
.not-found p { margin: 0; color: var(--muted); }
.not-found a { color: var(--text); }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; padding-top: 3rem; align-items: start; }
.contact-intro h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: .95; }
.contact-intro p { color: var(--muted); max-width: 42ch; }
.contact-intro a { color: var(--text); }
.form-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--red); padding: 1.75rem; display: grid; gap: 1.1rem; }
.form-card label { display: grid; gap: .4rem; font-weight: 600; font-size: .95rem; }
.form-card input, .form-card select, .form-card textarea { width: 100%; min-height: 48px; background: var(--black); color: var(--text); border: 1px solid var(--line);
                                                           padding: .8rem .9rem; font: inherit; font-size: 16px; font-weight: 400; }
.form-card textarea { resize: vertical; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { border-color: var(--red); outline: none; }
.form-card .btn { justify-self: start; }
.form-card.sent h2 { font-size: 2.2rem; line-height: 1; }
.form-card.sent p { margin: 0; color: var(--muted); }
.form-card.sent a { color: var(--text); }
.form-errors { border-left: 4px solid var(--red); padding: .6rem .9rem; background: #1f0d0d; }
.form-errors p { margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Fighters ---------- */
.fighter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2rem 1.25rem; }
.fighter-card { display: grid; gap: .7rem; align-content: start; position: relative; }
.card-img.portrait { aspect-ratio: 4 / 5; }
.fighter-card h3 { font: italic 800 1.5rem/1.02 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.fighter-card h3 a { text-decoration: none; }
.fighter-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.fighter-card h3 a:hover { color: var(--red); }
.fighter-meta { margin: 0; color: var(--muted); font-size: .9rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.fighter-meta .rec { color: var(--red); font: italic 800 1.05rem/1.2 var(--display); }

.fighter-profile { padding-top: 2.5rem; }
.fighter-hero { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.fighter-photo { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface); isolation: isolate; }
.fighter-photo::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--bg, none) center / cover no-repeat;
                         filter: blur(18px) brightness(.42) saturate(1.2); }
.fighter-photo > img { width: 100%; height: 100%; object-fit: contain; }
.fighter-info { display: grid; gap: 1.1rem; justify-items: start; }
.fighter-info h1 { font: italic 800 clamp(2.8rem, 6vw, 5rem)/.9 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.nickname { margin: 0; color: var(--gold); font: 600 .95rem/1.3 var(--body); letter-spacing: .28em; text-transform: uppercase; }
.record { display: flex; gap: 0; border: 1px solid var(--line); }
.record span { display: grid; justify-items: center; padding: .7rem 1.3rem; color: var(--muted); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; }
.record span + span { border-left: 1px solid var(--line); }
.record b { font: italic 800 2.8rem/1 var(--display); color: var(--text); letter-spacing: 0; }
.record span:first-child b { color: var(--red); }
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 2rem; width: 100%; max-width: 560px; }
.facts div { display: grid; gap: .15rem; }
.facts dt { color: var(--muted); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }
.facts dd { margin: 0; font-weight: 600; }
.facts a { color: var(--text); text-underline-offset: 3px; display: inline-block; padding: .45rem 0; margin: -.45rem 0; }
.facts a:hover { color: var(--red); }
.fighter-bio { margin-left: 0; }

/* ---------- Events ---------- */
.event-date { margin: 0; color: var(--gold); font: italic 800 1.15rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.event-where { margin: 0; color: var(--muted); font-size: .9rem; }
.event-when { margin: 0; color: var(--gold); font: italic 800 1.5rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.event-when .sep { color: var(--line); margin: 0 .6rem; }
.badge-upcoming { margin: 0; display: inline-block; border: 1px solid var(--gold); color: var(--gold); padding: .25rem .7rem; font-size: .8rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }

/* ---------- Article: people and event in this story ---------- */
.in-story { max-width: 700px; margin: 2.5rem auto 0; display: grid; gap: .6rem; }
.in-story p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.in-story span { color: var(--muted); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; margin-right: .3rem; min-width: 5.5rem; }
.in-story a { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .9rem; border: 1px solid var(--red); color: var(--text);
              text-decoration: none; font: italic 800 1.05rem/1 var(--display); text-transform: uppercase; }
.in-story a:hover { background: var(--red); }

/* ---------- Promotion logo on its page ---------- */
.list-head.has-logo { grid-template-columns: auto 1fr; align-items: center; column-gap: 1.25rem; }
.list-head.has-logo > :not(.list-logo) { grid-column: 2; }
.list-logo { grid-row: 1 / span 2; width: 88px; height: 88px; object-fit: contain; }

/* ---------- Social buttons (Instagram + YouTube) ---------- */
.social-btns { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: inherit; }
.welcome .social-btns { justify-content: center; }
.contact-intro .social-btns { margin-top: 1.5rem; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--red); }
.btn.ghost:hover { background: var(--red); color: #fff; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 5rem; border-top: 3px solid var(--red); background: var(--surface); padding: 2.5rem 0 1.5rem; }
.footer-grid { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer-grid p { color: var(--muted); margin: .6rem 0 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.site-footer nav a { display: inline-block; padding: .6rem 0; color: var(--muted); text-decoration: none; }
.site-footer nav a:hover { color: var(--text); }
.copyright { color: #7a726c; font-size: .85rem; margin-top: 2rem; }

/* ---------- Tablet & phone ---------- */
@media (max-width: 1100px) {
  .nav-search input { width: 110px; }
  .site-nav { gap: .9rem; }
  .site-nav > ul { gap: .8rem; }
}
/* Menu button instead of the full menu on tablets, small laptops and phones */
@media (max-width: 1180px) {
  .menu-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
              background: var(--black); border-bottom: 3px solid var(--red);
              flex-direction: column; align-items: stretch; gap: 1rem; padding: .5rem 1.25rem 1.5rem; }
  .site-nav.open { display: flex; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li > a, .site-nav summary { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: 1.5rem; }
  .sub { position: static; border: 0; background: none; padding: 0 0 .5rem 1rem; min-width: 0; }
  .sub a { padding: .7rem 0; }
  .nav-search input { width: 100%; min-height: 48px; }
  .social-icons { gap: 1.5rem; padding-top: .25rem; }
  .site-nav a.social-icon { justify-content: flex-start; min-height: 48px; }
  .social-icon .social-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
/* Same menu button when the links don't fit on one line at any width (set by theme/site.js) */
.nav-compact .menu-toggle { display: block; }
.nav-compact .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
            background: var(--black); border-bottom: 3px solid var(--red);
            flex-direction: column; align-items: stretch; gap: 1rem; padding: .5rem 1.25rem 1.5rem; }
.nav-compact .site-nav.open { display: flex; }
.nav-compact .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
.nav-compact .site-nav > ul > li > a, .nav-compact .site-nav summary { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: 1.5rem; }
.nav-compact .sub { position: static; border: 0; background: none; padding: 0 0 .5rem 1rem; min-width: 0; }
.nav-compact .sub a { padding: .7rem 0; }
.nav-compact .nav-search input { width: 100%; min-height: 48px; }
.nav-compact .social-icons { gap: 1.5rem; padding-top: .25rem; }
.nav-compact .site-nav a.social-icon { justify-content: flex-start; min-height: 48px; }
.nav-compact .social-icon .social-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
@media (max-width: 960px) {
  .contact { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 2rem; }
  .fighter-hero { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.75rem; }
  .hero { grid-template-columns: 1fr; }
  .hero-side { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  :root { --header-h: 60px; }
  body { font-size: 16px; }
  .wrap { width: calc(100% - 2rem); }
  .wordmark { font-size: 1.45rem; }
  .tag { padding: .55rem 1rem .5rem .85rem; }
  .brand img { width: 36px; height: 36px; }
  .hero { padding-top: 1rem; gap: 1.75rem; }
  .hero-side { grid-template-columns: 1fr; gap: 1.75rem; }
  .post-card.lead .excerpt { font-size: 1rem; }
  .grid, .grid.four { grid-template-columns: 1fr; gap: 2rem; }
  .block { padding-top: 2.5rem; }
  .band { margin-top: 2.5rem; padding-bottom: 2.5rem; }
  .section-head h2 { font-size: 1.8rem; }
  .list-head { padding-top: 1.75rem; }
  .article { padding-top: 1.5rem; }
  .article-head h1 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .standfirst { font-size: 1.1rem; }
  .cover { margin-inline: -1rem; }
  .prose { font-size: 1.075rem; }
  .prose h2 { font-size: 1.7rem; }
  .embed.yt { margin-inline: -1rem; }
  .share > span { width: 100%; }
  .welcome { padding: 4rem 0; }
  .not-found { padding-top: 2.5rem; }
  .form-card { padding: 1.25rem; }
  .form-card .btn { justify-self: stretch; }
  .site-footer { margin-top: 3.5rem; }
  .fighter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem .9rem; }
  .fighter-card h3 { font-size: 1.25rem; }
  .fighter-profile { padding-top: 1.25rem; }
  .fighter-hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .fighter-photo { margin-inline: -1rem; aspect-ratio: 1 / 1; }
  .record { width: 100%; }
  .record span { flex: 1; padding: .7rem .5rem; }
  .facts { gap: .8rem 1rem; }
  .fighter-info .btn { width: 100%; }
  .event-when { font-size: 1.25rem; }
  .in-story span { width: 100%; }
  .list-logo { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }