/* =====================================================
   BADR GRAPPLING
   Design language: "Bone wall, blue mat, black kit."

   Everything here is taken from the club's own material:
   the ink/bone of the stamp logo, the warm plaster of the
   mosque hall in the photography, the brass of their
   printed graphics. Square corners, hairline rules,
   no shadows, no gradients, and no motion beyond the home carousel,
   which moves on by itself but holds still for anyone using it.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Zilla+Slab:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* Ink — from the stamp */
  --ink:        #1B1A17;
  --ink-soft:   #2E2C27;
  --ink-mute:   #6A665C;
  --ink-faint:  #9A958A;

  /* Bone — the hall wall */
  --bone:       #F2EDE3;
  --bone-deep:  #E4DCCC;
  --paper:      #FAF7F0;
  --white:      #FFFFFF;

  /* Brass — their print graphics */
  --brass:      #96712C;
  --brass-mid:  #B08D3F;
  --brass-lite: #D9BE80;
  --brass-wash: #F0E6D0;
  --brass-ink:  #7A5A1F;   /* brass for small text on light grounds (5:1+) */
  --brass-deep: #86641F;   /* button hover under white text (5.4:1) */

  /* Form-field edges need 3:1 against their ground to be findable. */
  --field-line: #8C877C;

  /* Signals */
  --flag:       #9B2F24;
  --flag-deep:  #7E241B;   /* flag button hover */
  --flag-wash:  #F6E7E4;
  --good:       #3D6B47;
  --good-wash:  #E6EFE7;

  /* Rank ladder — stone climbing to brass. Deliberately
     restrained: no glow, no neon, no borrowed iconography. */
  --rank-e: #6B675E;
  --rank-d: #5E6B63;
  --rank-c: #4A5F70;
  --rank-b: #6B5535;
  --rank-a: #96712C;
  --rank-s: #1B1A17;

  --line:       rgba(27, 26, 23, 0.14);
  --line-soft:  rgba(27, 26, 23, 0.08);
  --line-dark:  rgba(242, 237, 227, 0.16);

  --serif: 'Zilla Slab', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', 'Futura', 'Century Gothic', system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --gut:  clamp(1.25rem, 5vw, 3.5rem);

  --tap: 44px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Motion is limited to hover feedback on controls. */
a, button, input, select, textarea, summary {
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--bone);
  padding: .75rem 1rem; z-index: 200;
}
.skip:focus { left: 0; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===== Layout ===== */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.wrap-wide { max-width: 1440px; }
.band { padding-block: clamp(3rem, 8vw, 6rem); }
.band-tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.band-ink { background: var(--ink); color: var(--bone); }
.band-bone { background: var(--bone); }
.band-line { border-top: 1px solid var(--line); }

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
/* auto-fill, so one card on its own stays card-sized rather than
   stretching the full width of the page. */
.g3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }

/* ===== Type ===== */
.eyebrow {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 1.25rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 1px;
  background: var(--brass-mid); flex: none;
}
.band-ink .eyebrow { color: var(--brass-lite); }
.band-ink .eyebrow::before { background: var(--brass-mid); }

.display {
  font-size: clamp(2.5rem, 7.2vw, 5rem);
  letter-spacing: -0.035em;
}
.h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); letter-spacing: -0.03em; }
.h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing: -0.015em; }
.lede { font-size: clamp(1.0625rem, 1.9vw, 1.25rem); color: var(--ink-soft); max-width: 46ch; }
.muted { color: var(--ink-mute); }
.small { font-size: .875rem; }
.tiny { font-size: .8125rem; }
.brass { color: var(--brass); }
.band-ink .brass { color: var(--brass-lite); }
.band-ink .muted { color: rgba(242, 237, 227, .62); }

.stat-num { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3rem); line-height: 1; letter-spacing: -0.03em; }
.stat-num .small { font-family: var(--sans); letter-spacing: 0; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  min-height: var(--tap);
  padding: .7rem 1.5rem;
  font-family: var(--sans);
  font-size: .9375rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--bone);
  border-radius: 1px;
  cursor: pointer;
}
.btn:hover { background: var(--brass-deep); border-color: var(--brass-deep); color: var(--white); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.band-ink .btn { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.band-ink .btn:hover { background: var(--brass-mid); border-color: var(--brass-mid); color: var(--ink); }
.band-ink .btn-ghost { background: transparent; color: var(--bone); border-color: rgba(242,237,227,.4); }
.band-ink .btn-ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn-sm { min-height: 36px; padding: .4rem .9rem; font-size: .8125rem; }
.btn-flag { background: var(--flag); border-color: var(--flag); color: var(--white); }
.btn-flag:hover { background: var(--flag-deep); border-color: var(--flag-deep); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* A button that reads as a link: small actions beside other text (Remove, Edit). */
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink); border-bottom: 1px solid var(--brass-mid);
  font-size: inherit;
}
.linkish:hover { color: var(--brass-ink); }
.linkish.danger { border-bottom-color: var(--flag); color: var(--flag); }

/* ---------- Confirm dialog (js/dialog.js) ----------
   In place of the browser's own confirm(). A native <dialog>, so the
   browser centres it and dims the page; these rules only dress it.
   Square, flat and bordered like the rest of the site: no shadow, no
   rounded card, and it appears without animating. */
.ask {
  position: fixed; inset: 0; margin: auto;
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink);
  border-top: 4px solid var(--brass);
  border-radius: 1px;
}
.ask-danger { border-top-color: var(--flag); }
.ask::backdrop { background: rgba(27, 26, 23, .62); }
.ask form { padding: 1.75rem 1.75rem 1.5rem; }
.ask-title { font-size: 1.375rem; line-height: 1.2; }
.ask-body { margin-top: .75rem; color: var(--ink-soft); font-size: .9375rem; }
.ask-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem;
  margin-top: 1.5rem;
}
/* The page behind stays put while the box is open. */
html:has(dialog.ask[open]) { overflow: hidden; }
@media (max-width: 30rem) {
  .ask form { padding: 1.4rem 1.25rem 1.25rem; }
  .ask-actions .btn { flex: 1 1 auto; }
}

/* ---------- Level-up and rank-up notice (js/levelup.js) ----------
   The one thing on the site that moves by itself, because a member earned
   it. A game's system window in the club's own ink and brass: it opens from
   the middle, a line of light runs down it once, the old level ticks over to
   the new. For anyone whose device asks for less motion, it simply appears. */
.sysnote {
  position: fixed; inset: 0; margin: auto;
  width: min(24rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0; border: 0; background: transparent; color: var(--bone);
}
.sysnote::backdrop { background: rgba(27, 26, 23, .74); }
html:has(dialog.sysnote[open]) { overflow: hidden; }
.sysnote-frame {
  position: relative; overflow: hidden;
  padding: 1.9rem 1.6rem 1.6rem; text-align: center;
  background: var(--ink);
  border: 1px solid var(--brass-mid);
  box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 6px rgba(176, 141, 63, .4);
}
.sysnote-title { font-size: clamp(1.9rem, 6vw, 2.4rem); text-transform: uppercase; letter-spacing: .12em; color: var(--bone); }
.sysnote-level { margin: 1rem 0 .4rem; font-family: var(--serif); line-height: 1; color: var(--brass-lite); }
.sysnote-lv { font-size: 1rem; letter-spacing: .2em; text-transform: uppercase; vertical-align: .9em; color: rgba(242, 237, 227, .7); }
.sysnote-num { display: inline-block; min-width: 1.2em; font-size: clamp(3.6rem, 14vw, 4.8rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.sysnote-ranks { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.2rem 0 .6rem; }
.sysnote-arrow { font-size: 1.4rem; color: var(--brass-lite); }
.sysnote-line { margin: .6rem 0 1.4rem; color: rgba(242, 237, 227, .82); }
.sysnote .btn { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.sysnote .btn:hover { background: var(--brass-lite); border-color: var(--brass-lite); color: var(--ink); }
.sysnote-frame::after {
  content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--brass-lite), transparent);
}
.sysnote[open] .sysnote-frame { animation: sysnote-open .45s cubic-bezier(.2, .8, .2, 1) both; }
.sysnote[open] .sysnote-frame::after { animation: sysnote-scan 1s .35s ease-out both; }
.sysnote[open] .sysnote-title { animation: sysnote-title .6s .2s ease-out both; }
.sysnote-num.tick { animation: sysnote-tick .3s ease-out; }
@keyframes sysnote-open { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sysnote-scan { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(22rem); } }
@keyframes sysnote-title { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; letter-spacing: .12em; } }
@keyframes sysnote-tick { from { transform: scale(1.25); color: var(--bone); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .sysnote[open] .sysnote-frame, .sysnote[open] .sysnote-frame::after,
  .sysnote[open] .sysnote-title, .sysnote-num.tick { animation: none !important; }
}

.link {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--brass-mid);
  padding-bottom: 1px;
}
.link:hover { color: var(--brass-ink); border-bottom-color: var(--brass-ink); }
.band-ink .link, .foot .link { color: var(--bone); }
.band-ink .link:hover { color: var(--brass-lite); border-bottom-color: var(--brass-lite); }

/* ===== Header ===== */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink); color: var(--bone);
  border-bottom: 1px solid rgba(242,237,227,.14);
}
.masthead-in {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px;
  padding-block: .5rem;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--bone); margin-right: auto; }
.brand img { width: 42px; height: 42px; flex: none; }
.brand-name {
  white-space: nowrap;
  font-family: var(--sans); font-weight: 600;
  font-size: .875rem; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.2;
}
.brand-sub { display: block; font-size: .625rem; letter-spacing: .16em; color: var(--brass-lite); font-weight: 400; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a, .nav button {
  white-space: nowrap;
  text-decoration: none; color: rgba(242,237,227,.8);
  font-size: .875rem; font-weight: 500; letter-spacing: .03em;
  padding: .55rem .55rem; border-radius: 1px;
}
.nav a:hover, .nav button:hover { color: var(--bone); background: rgba(242,237,227,.08); }
/* Sign out is a button (it does something rather than going somewhere),
   dressed as one of the links. */
.nav button { background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; }
.nav a[aria-current="page"] { color: var(--bone); box-shadow: inset 0 -2px 0 var(--brass-mid); }

.nav-tools { display: flex; align-items: center; gap: .6rem; }

/* The basket, beside the branch name, whenever the shop is open. */
.basket-link {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  color: var(--bone); border: 1px solid rgba(242,237,227,.3); border-radius: 1px;
}
.basket-link:hover, .basket-link[aria-current="page"] { border-color: var(--brass-mid); color: var(--brass-lite); }
.basket-link svg { width: 20px; height: 20px; }
.basket-count {
  position: absolute; top: -7px; right: -7px;
  min-width: 19px; height: 19px; padding: 0 4px;
  font-size: .6875rem; font-weight: 600; line-height: 19px; text-align: center;
  background: var(--brass-lite); color: var(--ink); border-radius: 1px;
}
.masthead .btn { background: transparent; color: var(--bone); border-color: rgba(242,237,227,.4); }
.masthead .btn:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

.burger {
  display: none;
  width: var(--tap); height: var(--tap);
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(242,237,227,.3);
  border-radius: 1px; cursor: pointer;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--bone); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--bone);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }

.btn { white-space: nowrap; }
.nav .nav-account { display: none; }

@media (max-width: 600px) {
  .brand-sub { display: none; }
  .brand-name { font-size: .8125rem; letter-spacing: .14em; }
  .brand img { width: 38px; height: 38px; }
  .masthead-in { gap: .6rem; min-height: 60px; }
  /* Sign in / out moves into the menu, where there is room for it. */
  .nav-tools .btn { display: none; }
  .nav .nav-account { display: block; }
}

/* On the narrowest phones the stamp carries the name on its own; the
   wordmark stays in the page for screen readers. */
@media (max-width: 420px) {
  .brand-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* Below this the fullest menu (a signed-in admin's, with Shop and the basket)
   no longer fits the page's width, so it folds into the menu button. */
@media (max-width: 1200px) {
  .burger { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink);
    border-bottom: 1px solid rgba(242,237,227,.14);
    padding: .5rem var(--gut) 1.25rem;
  }
  .nav.open { display: flex; }
  .nav a, .nav button { padding: .85rem 0; border-bottom: 1px solid rgba(242,237,227,.08); }
  .nav a[aria-current="page"] { box-shadow: none; color: var(--brass-lite); }
  .masthead-in { position: relative; }
}

/* ===== Branch switcher ===== */
.branch-pick { position: relative; }
.branch-pick select {
  appearance: none;
  min-height: 38px;
  padding: .35rem 2rem .35rem .75rem;
  background: transparent;
  color: var(--bone);
  border: 1px solid rgba(242,237,227,.34);
  border-radius: 1px;
  font-family: var(--sans); font-size: .8125rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
.branch-pick select:hover { border-color: var(--brass-mid); }
.branch-pick option { background: var(--ink); color: var(--bone); }
.branch-one {
  font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass-lite); padding: .35rem 0;
}
.branch-pick::after {
  content: ""; position: absolute; right: .7rem; top: 50%;
  width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid var(--brass-lite);
  border-bottom: 1.5px solid var(--brass-lite);
  transform: rotate(45deg); pointer-events: none;
}

/* ===== Carousel =====
   Photos are cropped from the top first, down to just above the faces
   (js/home.js works that out from each photo's data-faces); --focus is the
   fallback without JavaScript. The arrows sit on the sides of the photo,
   30% see-through; the caption sits in a slim bar underneath, with a pause
   button for the autoplay. It loops. */
.carousel { background: var(--ink); color: var(--bone); }
/* Stops growing at 1920px: past that the photos would only be enlarged
   and go soft. Wider screens get ink either side. */
.carousel-stage { position: relative; max-width: 1920px; margin-inline: auto; }
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar { display: none; }
/* position: relative keeps each hidden caption inside its own slide. Without
   it, the captions of off-screen slides anchor to the page, escape the
   track's clipping and make the whole page wider than the phone. */
.carousel-slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.carousel-slide img {
  width: 100%;
  /* About half the screen, so the headline shows below it. Never thinner
     than 3:1 — the widest crop that still fits both rows of faces in the
     team photos — and never deeper than 16:9. */
  height: clamp(calc(min(100vw, 1920px) / 3), 50vh, calc(min(100vw, 1920px) * 9 / 16));
  object-fit: cover;
  object-position: 50% var(--focus, 50%);
}
@media (max-width: 720px) {
  /* Phones show the whole photo: in a group shot, a portrait crop would
     cut off everyone standing at the sides. */
  .carousel-slide img { height: auto; aspect-ratio: 3 / 2; }
}
/* The caption is read out with its photo, and shown in the bar below. */
.carousel-slide figcaption {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--tap); height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  /* 30% see-through, so the photo shows behind them. */
  background: rgba(27, 26, 23, .7);
  border: 1px solid rgba(242, 237, 227, .45);
  color: var(--bone);
  border-radius: 1px; cursor: pointer;
  z-index: 2;
}
.carousel-btn:hover, .carousel-btn:focus-visible { background: var(--ink); border-color: var(--brass-mid); }
.carousel-btn[data-dir="prev"] { left: clamp(.5rem, 2vw, 1.25rem); }
.carousel-btn[data-dir="next"] { right: clamp(.5rem, 2vw, 1.25rem); }
.carousel-btn svg { width: 16px; height: 16px; }
@media (max-width: 720px) {
  /* On a phone the whole photo shows, and the people at the edges have
     their faces around the middle of it. The arrows drop to the bottom
     corners, over legs and mat rather than faces. */
  .carousel-btn { top: auto; bottom: .5rem; transform: none; }
}

.carousel-bar {
  display: flex; align-items: center; gap: 1rem;
  min-height: 44px;
  padding-block: .55rem;
  padding-inline: var(--gut);
  border-top: 1px solid rgba(242,237,227,.12);
}
.carousel-caption {
  flex: 1; min-width: 0; margin: 0;
  font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(242,237,227,.82);
}


/* ===== Cards & panels ===== */
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.panel-bone { background: var(--bone); border-color: transparent; }
.band-ink .panel { background: rgba(242,237,227,.05); border-color: var(--line-dark); color: var(--bone); }

.tile { text-decoration: none; display: block; color: inherit; }
.tile-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bone-deep); }
.tile-img img { width: 100%; height: 100%; object-fit: cover; }
.tile-body { padding-top: 1rem; }
.tile:hover .tile-title { color: var(--brass-ink); }
.tile-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 .4rem; }

.meta {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
}

.pill {
  display: inline-block;
  font-family: var(--sans);
  vertical-align: middle;
  padding: .2rem .6rem;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 1px;
  color: var(--ink-mute);
  background: var(--bone);
}
.pill-brass { color: var(--brass-ink); border-color: var(--brass-lite); background: var(--brass-wash); }
.pill-good  { color: var(--good); border-color: rgba(61,107,71,.3); background: var(--good-wash); }
.pill-flag  { color: var(--flag); border-color: rgba(155,47,36,.3); background: var(--flag-wash); }

/* The home page's latest-updates list, on ink. */
.news-list { list-style: none; padding: 0; margin: 0; }
.news-list li { padding: .7rem 0; border-bottom: 1px solid var(--line-dark); }
.news-list a { text-decoration: none; }
.news-title {
  display: block; margin-top: .15rem;
  font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; line-height: 1.25;
}
.news-list a:hover .news-title { color: var(--brass-lite); }

/* ===== Timetable ===== */
.timetable { width: 100%; border-collapse: collapse; }
.timetable th, .timetable td {
  text-align: left;
  padding: 1rem .75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}
.timetable th {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom-color: var(--ink);
}
.timetable td:first-child { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; }
.timetable .time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== Tables (leaderboard, admin) ===== */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th, .table td { padding: .8rem .75rem; text-align: left; border-bottom: 1px solid var(--line); }
.table th {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); white-space: nowrap;
  border-bottom-color: var(--ink);
}
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr:hover { background: var(--bone); }
.table tr.is-me { background: var(--brass-wash); }
.table tr.is-me td { font-weight: 600; }
.table .pos { font-family: var(--serif); font-size: 1.05rem; width: 3rem; }

/* ===== Rank plates ===== */
.rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: none;
  font-family: var(--serif); font-weight: 700; font-size: 1rem;
  color: var(--bone); background: var(--rank-e);
  border-radius: 1px;
  letter-spacing: 0;
}
.rank-lg { width: 3.5rem; height: 3.5rem; font-size: 1.85rem; }
.rank[data-rank="E"] { background: var(--rank-e); }
.rank[data-rank="D"] { background: var(--rank-d); }
.rank[data-rank="C"] { background: var(--rank-c); }
.rank[data-rank="B"] { background: var(--rank-b); }
.rank[data-rank="A"] { background: var(--brass-lite); color: var(--ink); }
.rank[data-rank="S"] { background: var(--rank-s); color: var(--brass-lite); box-shadow: inset 0 0 0 1px var(--brass-mid); }

.progress {
  height: 6px; background: var(--bone-deep);
  border-radius: 1px; overflow: hidden;
}
.progress i { display: block; height: 100%; background: var(--brass-mid); }
.band-ink .progress { background: rgba(242,237,227,.14); }

.streak { display: inline-flex; align-items: baseline; gap: .35rem; }

/* ===== Forms ===== */
.field { margin-bottom: 1.1rem; }
.field label, .lbl {
  display: block;
  font-family: var(--sans);   /* also when .lbl is on a <legend>, which is serif by default */
  font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: .4rem;
}
.input, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search],
input[type=password], input[type=date], input[type=time], input[type=url], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: .6rem .75rem;
  font-family: var(--sans); font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--field-line);
  border-radius: 1px;
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.input:focus, input:focus, select:focus, textarea:focus { border-color: var(--brass-mid); outline-offset: 0; }
.hint { font-size: .8125rem; color: var(--ink-mute); margin-top: .35rem; }
.err { font-size: .8125rem; color: var(--flag); margin-top: .35rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
legend { padding: 0; font-family: var(--serif); font-size: 1.2rem; font-weight: 700; margin-bottom: .9rem; }
.check { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .6rem; }
.check input { width: 1.05rem; height: 1.05rem; min-height: 0; margin-top: .35rem; flex: none; accent-color: var(--brass); }
.check label { text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 400; color: var(--ink); margin: 0; }

.notice {
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-mute);
  border-radius: 1px;
  background: var(--bone);
  font-size: .9375rem;
  margin-bottom: 1.25rem;
}
.notice-good { border-left-color: var(--good); background: var(--good-wash); }
.notice-flag { border-left-color: var(--flag); background: var(--flag-wash); }
.notice:empty { display: none; }

/* ===== Filters ===== */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: 1.75rem; }
.filters .field { margin: 0; }
.filters select, .filters input { min-width: 10rem; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  min-height: var(--tap);
  padding: .45rem .9rem;
  font-size: .8125rem; font-weight: 500;
  border: 1px solid var(--field-line); background: var(--white);
  border-radius: 1px; cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ===== Video library ===== */
.video-frame {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--ink); overflow: hidden;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Appeal progress ===== */
.appeal-bar { margin: 1rem 0 .6rem; }
.appeal-fig { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.appeal-fig b { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; }

/* ===== Admin shell ===== */
.admin-tabs {
  display: flex; gap: .25rem; overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
/* When the tabs are wider than the screen they scroll sideways; the edge
   with more tabs beyond it fades out, so it is clear there are more
   (initTabs in js/core.js sets these). */
.admin-tabs.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
.admin-tabs.more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); }
.admin-tabs.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
.admin-tabs button {
  flex: none;
  padding: .8rem 1rem;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  font-size: .875rem; font-weight: 500; white-space: nowrap; cursor: pointer;
  color: var(--ink-mute);
}
.admin-tabs button:hover { color: var(--ink); }
.admin-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brass-mid); font-weight: 600; }

.tabpanel[hidden] { display: none !important; }

.qr-plate {
  display: inline-block;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
}
.qr-plate img, .qr-plate canvas, .qr-plate svg { width: 240px; height: 240px; display: block; }

.roster { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.roster-row {
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem .9rem; background: var(--white);
}
.roster-row input[type=checkbox] { width: 1.15rem; height: 1.15rem; min-height: 0; flex: none; accent-color: var(--brass); }
.roster-row .who { flex: 1; min-width: 0; }
.roster-row .src { flex: none; }

/* ===== Footer ===== */
.foot { background: var(--ink); color: rgba(242,237,227,.72); }
.foot a { color: var(--bone); text-decoration: none; }
.foot a:hover { color: var(--brass-lite); }
.foot-grid { display: grid; gap: 2rem clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
/* Column headings: h2 in the page outline, small caps to look at. */
.foot-h {
  font-family: var(--sans); font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-lite); margin-bottom: .9rem;
}
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .5rem; }
.foot-base {
  border-top: 1px solid rgba(242,237,227,.14);
  margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .8125rem;
}

/* ===== Utilities ===== */
.stack > * + * { margin-top: var(--s, 1rem); }
.flex { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.between { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.right { margin-left: auto; }
.center { text-align: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt1 { margin-top: 1rem; } .mt2 { margin-top: 2rem; } .mt3 { margin-top: 3rem; }
.mb1 { margin-bottom: 1rem; } .mb2 { margin-bottom: 2rem; } .mb3 { margin-bottom: 3rem; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }

.empty {
  padding: 3rem 1.5rem; text-align: center;
  color: var(--ink-mute); border: 1px dashed var(--line);
  border-radius: 1px;
}

.load { color: var(--ink-mute); font-size: .9375rem; padding: 1.5rem 0; }

/* Print: the QR poster is meant to go on a wall. */
@media print {
  .masthead, .foot, .no-print { display: none !important; }
  body { background: #fff; }
  .qr-plate { border: 0; }
}