/* ===========================================================================
   DATSU — STYLES
   ---------------------------------------------------------------------------
   Dark, quiet, pub notice-board. If you want to re-skin the site, everything
   you need is in the :root block below — change a colour there and it changes
   everywhere.
   =========================================================================== */

:root {
  /* --- Surfaces ------------------------------------------------------- */
  --ink:     #15171b;   /* page background      */
  --ink-2:   #1a1d22;   /* table heads, footer  */
  --panel:   #1e2126;   /* cards                */
  --panel-2: #23272d;   /* raised bits, hover   */
  --line:    #2e333a;   /* borders              */
  --line-2:  #3a4048;   /* stronger borders     */

  /* --- Text ----------------------------------------------------------- */
  --text:  #e4e6e8;
  --muted: #949aa2;
  --dim:   #6d737b;

  /* --- Accents. Still moody, but with a bit more life in them now. ---- */
  --accent:      #c65c50;   /* dartboard red   */
  --accent-cool: #4f96a0;   /* slate teal      */
  --accent-warm: #c99a44;   /* brass           */
  --accent-good: #5da868;   /* muted green     */
  --accent-gold: #d6b13a;   /* bright gold     */
  --accent-plum: #9a6bab;   /* dusty purple    */

  --font-head: "Barlow Condensed", "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --radius: 6px;
  --maxw: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent-cool); text-decoration: none; }
a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------- TYPE --- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); }
h4 { font-size: 1.05rem; }

.accent      { color: var(--accent); }
.accent-cool { color: var(--accent-cool); }
.accent-warm { color: var(--accent-warm); }
.accent-good { color: var(--accent-good); }
.accent-gold { color: var(--accent-gold); }
.accent-plum { color: var(--accent-plum); }

.eyebrow {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 8px;
}
.muted { color: var(--muted); }
.tiny { font-size: 0.82rem; }
.center { text-align: center; }
.mono { font-family: var(--font-mono); font-size: 0.86em; }

/* -------------------------------------------------------------- HEADER --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(21, 23, 27, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand-text {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.04em;
}
.brand-text small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--dim);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

.nav-toggle {
  display: none;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  padding: 9px 14px;
  cursor: pointer;
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  display: block;
  padding: 8px 11px;
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav a.active { color: var(--text); border-bottom-color: var(--accent); border-radius: 0; }

.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 250px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 6px;
  display: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.dropdown.open { display: block; }
.dropdown a { font-family: var(--font-body); font-size: 0.9rem; letter-spacing: 0; border-bottom: none; }
.dropdown .dd-type { color: var(--dim); font-size: 0.78rem; }

/* ---------------------------------------------------------------- HERO --- */
.hero { border-bottom: 1px solid var(--line); background: var(--ink-2); }
.hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 52px 20px 46px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}
.hero h1 { margin-bottom: 12px; }
.hero-sub { font-size: 1.05rem; color: var(--muted); max-width: 52ch; }
.hero-art svg { width: 100%; height: auto; max-width: 250px; margin: 0 auto; }

/* --------------------------------------------------------------- CHIPS --- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.chip {
  font-size: 0.82rem;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
}
.chip strong { color: var(--text); font-weight: 600; }

/* -------------------------------------------------------------- BUTTON --- */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 11px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: #c4625a; border-color: #c4625a; color: #fff; text-decoration: none; }
.btn-quiet { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn-quiet:hover { background: var(--panel-2); border-color: var(--muted); color: var(--text); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ------------------------------------------------------------ SECTIONS --- */
.section { padding: 46px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.section-head h2 { margin: 0; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
/* A quiet left edge, to mark a card as worth reading */
.card-accent { border-left: 3px solid var(--accent); }
.card-accent-cool { border-left: 3px solid var(--accent-cool); }
.card-accent-warm { border-left: 3px solid var(--accent-warm); }
.card-accent-good { border-left: 3px solid var(--accent-good); }
a.card:hover { border-color: var(--line-2); background: var(--panel-2); text-decoration: none; }

/* -------------------------------------------------------- STATUS BADGE ---
   One thing only: is a league on. A quiet coloured glow does the talking. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 15px 22px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line-2);
}
.status-badge.is-on {
  border-color: var(--accent-good);
  box-shadow: 0 0 0 1px rgba(93, 168, 104, 0.35), 0 0 24px -4px var(--accent-good);
}
.status-badge.is-off {
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 1px rgba(201, 154, 68, 0.35), 0 0 24px -4px var(--accent-warm);
}
.status-badge .status-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.status-badge.is-on .status-dot { background: var(--accent-good); box-shadow: 0 0 10px var(--accent-good); }
.status-badge.is-off .status-dot { background: var(--accent-warm); box-shadow: 0 0 10px var(--accent-warm); }
.status-badge .status-text strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 600;
}
.status-badge .status-text span { color: var(--muted); font-size: 0.84rem; }

/* --------------------------------------------------------------- TABLE --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table.data { width: 100%; border-collapse: collapse; min-width: 640px; }
table.data th, table.data td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data thead th {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--ink-2);
  position: sticky;
  top: 0;
}
table.data tbody tr:hover { background: var(--panel-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:last-child td { border-bottom: none; }
.sortable thead th { cursor: pointer; user-select: none; }
.sortable thead th:hover { color: var(--text); }
.sortable thead th.sorted-asc::after { content: " \2191"; color: var(--accent); }
.sortable thead th.sorted-desc::after { content: " \2193"; color: var(--accent); }

.pos { font-family: var(--font-mono); font-size: 0.85rem; color: var(--dim); }
.player-cell { display: flex; align-items: center; gap: 9px; }
.player-cell .flag { font-size: 1rem; }
.player-cell .dl { color: var(--dim); font-size: 0.76rem; }

/* Playoff zones — a coloured edge, not a wash of colour */
tr.zone-bye td:first-child      { box-shadow: inset 3px 0 0 var(--accent-good); }
tr.zone-playoff td:first-child  { box-shadow: inset 3px 0 0 var(--accent-cool); }
tr.zone-out td:first-child      { box-shadow: inset 3px 0 0 var(--line-2); }
tr.cutline td { border-bottom: 1px dashed var(--line-2) !important; }

.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 0.84rem; color: var(--muted); }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; }
.legend .l-bye::before { background: var(--accent-good); }
.legend .l-po::before { background: var(--accent-cool); }
.legend .l-out::before { background: var(--line-2); }

.tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid currentColor;
}
.tag-bye  { color: var(--accent-good); }
.tag-in   { color: var(--accent-cool); }
.tag-hunt { color: var(--accent-warm); }
.tag-out  { color: var(--dim); }

/* --------------------------------------------------------- LEADER CARD --- */
.leader {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.leader .cat {
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
}
.leader .val {
  font-family: var(--font-head);
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.1;
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}
.leader .who { font-size: 0.98rem; }
.leader .sub { color: var(--dim); font-size: 0.82rem; }

/* A coloured left edge so a row of leader cards is not all one shade */
.leader.tint-accent      { border-left: 3px solid var(--accent); }
.leader.tint-accent-cool { border-left: 3px solid var(--accent-cool); }
.leader.tint-accent-warm { border-left: 3px solid var(--accent-warm); }
.leader.tint-accent-good { border-left: 3px solid var(--accent-good); }
.leader.tint-accent-gold { border-left: 3px solid var(--accent-gold); }
.leader.tint-accent-plum { border-left: 3px solid var(--accent-plum); }

/* ------------------------------------------------------------- AVATARS --- */
.avatar {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: #eceef0;
  background: var(--panel-2);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 58px; height: 58px; font-size: 1.15rem; }

.player-card { display: flex; gap: 13px; align-items: flex-start; }
.player-card .meta { min-width: 0; }
.player-card .nm { font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.player-card .dl { color: var(--accent-cool); font-size: 0.85rem; font-family: var(--font-mono); }
.notes { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.notes li {
  font-size: 0.78rem;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 2px 8px;
  color: var(--accent-warm);
}

/* ------------------------------------------------------------- BRACKET ---
   Every round is a flex column of equal-height cells, so one cell in round
   two is exactly as tall as two cells in round one and therefore lines up
   with the middle of the pair that feeds it. The joining lines are drawn
   with pseudo-elements, so there is no fixed geometry to maintain when the
   number of players changes.                                              */

.bracket-scroll { overflow-x: auto; padding-bottom: 10px; }
.bracket {
  --conn: 26px;                 /* width of the connector gutter */
  display: flex;
  align-items: stretch;
  min-width: 900px;
}
.bracket-round { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; }
.bracket-round:not(:last-child) { padding-right: var(--conn); }

.bracket-round-title {
  flex: none;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.bracket-round-title span {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--dim);
}

.bracket-cells { flex: 1; display: flex; flex-direction: column; min-height: calc(var(--cells, 8) * 66px); }
.bracket-cell { flex: 1; display: flex; align-items: center; position: relative; min-width: 0; }

/* Outgoing line: cell centre to half way across the gutter. */
.bracket-round:not(:last-child) .bracket-cell:not(.is-empty)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: calc(var(--conn) / 2);
  border-top: 1px solid var(--line-2);
}
/* Vertical line: half a cell, up or down, meeting its partner on the join. */
.bracket-round:not(:last-child) .bracket-cell:not(.is-empty)::before {
  content: "";
  position: absolute;
  left: calc(100% + var(--conn) / 2);
  height: 50%;
  border-left: 1px solid var(--line-2);
}
.bracket-round:not(:last-child) .bracket-cell:nth-child(odd)::before  { top: 50%; }
.bracket-round:not(:last-child) .bracket-cell:nth-child(even)::before { top: 0; }

/* Incoming line: gutter to the left edge of the tie. */
.bracket-round:not(:first-child) .bracket-cell:not(.is-empty) .tie::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: calc(var(--conn) / 2);
  border-top: 1px solid var(--line-2);
}

.tie {
  position: relative;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.tie .side {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  font-size: 0.88rem;
}
.tie .side + .side { border-top: 1px solid var(--line); }
.tie .side .seed { font-family: var(--font-mono); font-size: 0.72rem; color: var(--dim); margin-right: 7px; }
.tie .side .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tie .side.pending .nm { color: var(--dim); font-style: italic; }
.tie .side.win { background: rgba(106, 145, 105, 0.14); }
.tie .side.win .nm { color: var(--text); font-weight: 600; }
.tie .fmt {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 4px 10px;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
}
.tie-bye { border-style: dashed; background: transparent; }
.tie-bye .side { color: var(--muted); }
.bracket-cell.is-empty .tie { visibility: hidden; }

/* ------------------------------------------------------------- GALLERY --- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.shot { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.shot img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.shot figcaption { padding: 9px 12px; font-size: 0.84rem; color: var(--muted); }
.photo-missing {
  aspect-ratio: 4 / 3;
  display: grid; place-content: center; gap: 5px; text-align: center; padding: 16px;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.78rem;
}
.photo-missing .big { font-family: var(--font-head); font-size: 1.6rem; color: var(--line-2); }
.photo-missing code { color: var(--accent-cool); word-break: break-all; font-size: 0.72rem; font-family: var(--font-mono); }

/* -------------------------------------------------------------- RESULT --- */
.result-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  margin-bottom: 8px;
}
.result-row .p { display: flex; align-items: center; gap: 9px; min-width: 0; }
.result-row .p.right { justify-content: flex-end; text-align: right; }
.result-row .p .nm { font-size: 0.94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.result-row .p.winner .nm { color: var(--text); font-weight: 600; }
.result-row .score {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.legs-detail { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.leg-pill { font-size: 0.76rem; border: 1px solid var(--line); border-radius: 3px; padding: 1px 8px; color: var(--muted); }

.date-head {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 24px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

/* A LINE ID, shown big enough to actually read and type in */
.line-id {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 9px 18px;
  border: 1px dashed var(--accent-cool);
  border-radius: var(--radius);
  color: var(--accent-cool);
  margin: 4px 0 10px;
}

/* --------------------------------------------------------------- STEPS --- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: step; position: relative; padding-left: 46px; margin-bottom: 18px; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
}
.steps li strong { display: block; font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; margin-bottom: 2px; }

/* --------------------------------------------------------------- QUIPS --- */
.quip-line {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
  padding: 15px 0;
  text-align: center;
  font-family: var(--font-head);
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.quip-line em { color: var(--accent-warm); font-style: normal; }

/* -------------------------------------------------------------- FOOTER --- */
.site-footer { border-top: 1px solid var(--line); background: var(--ink-2); padding: 36px 0 24px; margin-top: 36px; }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.site-footer h4 {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; font-size: 0.9rem; }
.quip { margin-top: 26px; text-align: center; font-family: var(--font-head); font-size: 1.05rem; color: var(--muted); }
.copyright { text-align: center; color: var(--dim); font-size: 0.8rem; margin-top: 10px; }

/* ----------------------------------------------------------- RESPONSIVE --- */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 190px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    padding: 10px;
    gap: 1px;
    max-height: 75vh;
    overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav a { font-size: 1.05rem; padding: 11px; border-bottom: none; }
  .nav a.active { border-radius: var(--radius); background: var(--panel-2); }
  .site-header { position: relative; }
  .dropdown { position: static; display: block; border: none; box-shadow: none; background: transparent; padding: 0 0 0 14px; min-width: 0; }
}

@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 34px 0; }
  .bracket { min-width: 720px; --conn: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}