/* Sprawl Bulletin — one stylesheet, no framework.
   Palette: night ink, acid lime signal, ultraviolet glow, amber caution. Type: condensed grotesk heads,
   dot-matrix figures, a calm reading face and a mono for prices. */

@font-face { font-family: "Sprawl Head"; src: url("../fonts/hd.woff2") format("woff2"); font-weight: 600 900; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Sprawl LED"; src: url("../fonts/led.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Sprawl Text"; src: url("../fonts/tx.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Sprawl Mono"; src: url("../fonts/mn.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --ink: #07080c;
  --night: #0b0d14;
  --deck: #11141f;
  --deck-2: #171b2a;
  --deck-3: #1e2336;
  --rule: #252a3d;
  --rule-2: #353c58;
  --text: #eceef6;
  --soft: #bcc2d6;
  --mute: #8a92ac;
  --lime: #c6f432;
  --lime-deep: #a3d10f;
  --lime-glow: rgba(198, 244, 50, .28);
  --violet: #a184ff;
  --uv: #6c47ff;
  --uv-glow: rgba(108, 71, 255, .35);
  --amber: #ffb43d;
  --coral: #ff6482;
  --mint: #3fe0b8;
  --head: "Sprawl Head", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --led: "Sprawl LED", "Sprawl Mono", ui-monospace, monospace;
  --body: "Sprawl Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Sprawl Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --r: 14px;
  --r-s: 9px;
  --lift: 0 18px 50px -24px rgba(0, 0, 0, .85);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background-color: var(--ink);
  background-image:
    radial-gradient(60% 40% at 8% 0%, rgba(108, 71, 255, .20), transparent 70%),
    radial-gradient(45% 35% at 100% 30%, rgba(198, 244, 50, .07), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .045) 1px, transparent 1.4px);
  background-size: 100% 100%, 100% 100%, 26px 26px;
  background-attachment: scroll;
  color: var(--text);
  font: 400 17px/1.66 var(--body);
  font-feature-settings: "kern", "liga";
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: var(--lime); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #e2ff86; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--lime); color: var(--ink); }
p { margin: 0 0 1em; }
strong { font-weight: 600; color: #fff; }
h1, h2, h3, h4 { font-family: var(--head); font-stretch: 80%; line-height: 1.04; margin: 0 0 .5em; letter-spacing: -.005em; text-wrap: balance; color: #fff; }
h1 { font-size: clamp(2.35rem, 4.6vw + .8rem, 4.7rem); font-weight: 850; }
h2 { font-size: clamp(1.75rem, 2.2vw + 1rem, 2.75rem); font-weight: 800; }
h3 { font-size: clamp(1.25rem, .8vw + 1rem, 1.6rem); font-weight: 750; font-stretch: 86%; }
h4 { font-size: 1.05rem; font-weight: 700; font-stretch: 90%; text-transform: uppercase; letter-spacing: .06em; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li + li { margin-top: .35em; }
hr { border: 0; height: 1px; background: var(--rule); margin: 2.5rem 0; }
small { font-size: .82em; }
table { border-collapse: collapse; width: 100%; }

.bl-wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.bl-narrow { width: min(100% - 2 * var(--gut), 780px); margin-inline: auto; }
.bl-skip { position: absolute; top: 0; left: 50%; transform: translate(-50%, -110%); background: var(--lime); color: var(--ink); padding: .6em 1em; border-radius: 0 0 8px 8px; font-weight: 600; z-index: 100; text-decoration: none; transition: transform .2s; }
.bl-skip:focus { transform: translate(-50%, 0); }
.bl-hide { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* LED signal strip above the header */
.bl-strip { background: #050608; border-bottom: 1px solid #1a1e2c; font: 700 .74rem/1 var(--led); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.bl-strip .bl-wrap { display: flex; gap: 1.6rem; align-items: center; justify-content: space-between; min-height: 34px; overflow: hidden; }
.bl-strip span { white-space: nowrap; display: inline-flex; align-items: center; gap: .55em; }
.bl-strip span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.bl-strip .is-violet { color: var(--violet); }
.bl-strip .is-amber { color: var(--amber); }
@media (max-width: 1180px) { .bl-strip span:nth-child(3) { display: none; } }
.bl-strip .bl-strip-short { display: none; }
@media (max-width: 860px) { .bl-strip span { display: none; } .bl-strip span.bl-strip-short { display: inline-flex; } .bl-strip .bl-wrap { justify-content: center; } }

/* Header */
.bl-top { position: sticky; top: 0; z-index: 50; background: rgba(7, 8, 12, .82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(53, 60, 88, .55); }
.bl-top .bl-wrap { display: flex; align-items: center; gap: 1.2rem; min-height: 70px; }
.bl-mark { display: inline-flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; flex-shrink: 0; }
.bl-mark img { width: 38px; height: 38px; flex: 0 0 auto; }
.bl-mark b { display: block; font: 850 1.42rem/0.9 var(--head); font-stretch: 76%; letter-spacing: .02em; text-transform: uppercase; }
.bl-mark i { display: block; font: 800 .62rem/1 var(--led); letter-spacing: .33em; color: var(--lime); font-style: normal; margin-top: 4px; }
.bl-mark:hover { color: #fff; }
.bl-nav { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.bl-nav a { color: var(--soft); text-decoration: none; font: 600 .95rem/1 var(--body); padding: .7rem .8rem; border-radius: 999px; white-space: nowrap; transition: color .15s, background .15s; }
.bl-nav a:hover, .bl-nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .06); }
.bl-nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--rule-2); }
.bl-nav .bl-nav-cta { color: var(--ink); background: var(--lime); margin-left: .4rem; }
.bl-nav .bl-nav-cta:hover { color: var(--ink); background: #dbff6a; }
.bl-burger { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--rule-2); background: var(--deck); color: #fff; cursor: pointer; align-items: center; justify-content: center; }
.bl-burger svg { width: 22px; height: 22px; }
.bl-drawer { display: none; }
@media (max-width: 1020px) {
  .bl-nav { display: none; }
  .bl-burger { display: inline-flex; }
  .bl-drawer { display: block; position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px); background: var(--night); border-left: 1px solid var(--rule-2); transform: translateX(102%); transition: transform .28s ease; z-index: 70; padding: 1.2rem 1.2rem 2rem; overflow-y: auto; visibility: hidden; }
  .bl-drawer.is-open { transform: none; visibility: visible; }
  .bl-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font: 800 .75rem/1 var(--led); letter-spacing: .2em; color: var(--lime); }
  .bl-drawer nav a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; color: #fff; text-decoration: none; font: 700 1.25rem/1.1 var(--head); font-stretch: 82%; border-bottom: 1px solid var(--rule); }
  .bl-drawer nav a::after { content: "→"; color: var(--lime); font-family: var(--body); }
  .bl-drawer nav a[aria-current="page"] { color: var(--lime); }
  .bl-drawer-foot { margin-top: 1.4rem; color: var(--mute); font-size: .9rem; }
  .bl-veil { position: fixed; inset: 0; background: rgba(3, 4, 7, .66); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .25s; }
  .bl-veil.is-open { opacity: 1; pointer-events: auto; }
  .bl-close { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--deck); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
}
body.bl-locked { overflow: hidden; }

/* Buttons and chips */
.bl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 50px; padding: .8em 1.35em; border-radius: 999px; font: 650 1rem/1 var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, color .2s; white-space: nowrap; }
.bl-btn-go { background: var(--lime); color: var(--ink); box-shadow: 0 10px 34px -12px var(--lime-glow); }
.bl-btn-go:hover { background: #dcff70; color: var(--ink); transform: translateY(-1px); box-shadow: 0 14px 40px -12px rgba(198, 244, 50, .5); }
.bl-btn-line { background: rgba(255, 255, 255, .03); color: #fff; border-color: var(--rule-2); }
.bl-btn-line:hover { color: #fff; border-color: var(--violet); background: rgba(161, 132, 255, .1); }
.bl-btn svg { width: 18px; height: 18px; }
.bl-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.bl-chips li { margin: 0; }
.bl-chip { display: inline-flex; align-items: center; gap: .4em; padding: .38em .7em; border-radius: 7px; background: rgba(255, 255, 255, .05); border: 1px solid var(--rule-2); color: var(--soft); font: 500 .78rem/1.1 var(--mono); letter-spacing: .02em; white-space: nowrap; }
.bl-chip.is-lime { color: var(--lime); border-color: rgba(198, 244, 50, .35); background: rgba(198, 244, 50, .07); }
.bl-chip.is-violet { color: #cfc0ff; border-color: rgba(161, 132, 255, .4); background: rgba(161, 132, 255, .1); }
.bl-chip.is-amber { color: var(--amber); border-color: rgba(255, 180, 61, .4); background: rgba(255, 180, 61, .08); }
.bl-chip.is-coral { color: #ff9cb0; border-color: rgba(255, 100, 130, .4); background: rgba(255, 100, 130, .08); }
.bl-kicker { display: inline-flex; align-items: center; gap: .7em; font: 800 .74rem/1 var(--led); letter-spacing: .24em; text-transform: uppercase; color: var(--lime); margin: 0 0 1.1rem; }
.bl-kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; box-shadow: 0 0 12px currentColor; }
.bl-kicker.is-violet { color: var(--violet); }
.bl-kicker.is-amber { color: var(--amber); }

/* Hero */
.bl-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--rule); }
.bl-hero-media { position: absolute; inset: 0; z-index: -2; }
.bl-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.bl-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(7, 8, 12, .97) 0%, rgba(7, 8, 12, .86) 38%, rgba(7, 8, 12, .35) 72%, rgba(7, 8, 12, .55) 100%),
  linear-gradient(0deg, var(--ink) 0%, rgba(7, 8, 12, 0) 40%),
  radial-gradient(50% 60% at 85% 20%, rgba(108, 71, 255, .35), transparent 70%); }
.bl-hero .bl-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 4vw, 4rem); align-items: end; padding: clamp(3.5rem, 8vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem); }
.bl-hero h1 { max-width: 15ch; margin-bottom: .35em; }
@media (max-width: 900px) {
  .bl-hero .bl-wrap { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: clamp(2.4rem, 8vw, 3.5rem); }
  .bl-hero h1 { max-width: none; }
  .bl-hero::before { background: linear-gradient(180deg, rgba(7, 8, 12, .55) 0%, rgba(7, 8, 12, .88) 45%, var(--ink) 100%); }
  .bl-board { margin-top: .5rem; }
}
.bl-hero h1 em { font-style: normal; color: var(--lime); text-shadow: 0 0 34px rgba(198, 244, 50, .35); }
.bl-dek { font-size: clamp(1.05rem, .5vw + .95rem, 1.24rem); color: var(--soft); max-width: 56ch; margin-bottom: 1.8rem; }
.bl-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.bl-board { background: linear-gradient(180deg, rgba(17, 20, 31, .92), rgba(11, 13, 20, .94)); border: 1px solid var(--rule-2); border-radius: var(--r); padding: 1.2rem 1.2rem .6rem; box-shadow: var(--lift), inset 0 1px 0 rgba(255, 255, 255, .05); }
.bl-board h2 { font: 800 .74rem/1 var(--led); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin: 0 0 .8rem; display: flex; justify-content: space-between; }
.bl-board h2 b { color: var(--lime); font-weight: 800; }
.bl-board ol { list-style: none; margin: 0; padding: 0; }
.bl-board li { margin: 0; border-top: 1px dashed var(--rule-2); }
.bl-board a { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; padding: .72rem 0; color: #fff; text-decoration: none; }
.bl-board a span { font-weight: 550; line-height: 1.25; }
.bl-board a small { display: block; color: var(--mute); font: 400 .78rem/1.2 var(--mono); margin-top: .2rem; }
.bl-board a:hover span { color: var(--lime); }
.bl-led { font: 900 1.6rem/1 var(--led); color: var(--lime); text-shadow: 0 0 16px rgba(198, 244, 50, .45); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.bl-led sub { font-size: .55em; color: var(--mute); text-shadow: none; vertical-align: baseline; margin-left: .1em; }

/* Page head for inner pages */
.bl-head { position: relative; isolation: isolate; padding: clamp(2.8rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--rule); overflow: hidden; }
.bl-head::after { content: ""; position: absolute; inset: auto -10% -60% 40%; height: 120%; background: radial-gradient(closest-side, rgba(108, 71, 255, .22), transparent); z-index: -1; }
.bl-head h1 { font-size: clamp(2.2rem, 4vw + .8rem, 4rem); max-width: 22ch; }
.bl-head .bl-dek { margin-bottom: 0; }
.bl-crumbs { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; font: 500 .8rem/1.3 var(--mono); color: var(--mute); }
.bl-crumbs { align-items: center; }
.bl-crumbs li { margin: 0; display: inline-flex; align-items: center; gap: .35rem; }
.bl-crumbs li + li::before { content: "/"; color: var(--rule-2); }
.bl-crumbs a { color: var(--soft); text-decoration: none; }
.bl-crumbs a:hover { color: var(--lime); }

/* Sections */
.bl-sec { padding: clamp(3.2rem, 7vw, 6rem) 0; }
.bl-sec.is-tight { padding: clamp(2.2rem, 4vw, 3.4rem) 0; }
.bl-sec.is-deck { background: linear-gradient(180deg, rgba(17, 20, 31, .6), rgba(17, 20, 31, .2)); border-block: 1px solid var(--rule); }
.bl-sec-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); flex-wrap: wrap; }
.bl-sec-head > div { max-width: 66ch; }
.bl-sec-head p { color: var(--soft); margin: 0; }
.bl-sec-head h2 { margin-bottom: .35em; }

/* Stats */
.bl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--night); }
.bl-stats div { padding: 1.4rem 1.3rem; border-right: 1px solid var(--rule); }
.bl-stats div:last-child { border-right: 0; }
.bl-stats b { display: block; font: 900 clamp(2rem, 3vw, 2.7rem)/1 var(--led); color: var(--lime); text-shadow: 0 0 22px rgba(198, 244, 50, .3); margin-bottom: .45rem; }
.bl-stats span { color: var(--soft); font-size: .93rem; line-height: 1.4; display: block; }
@media (max-width: 760px) { .bl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bl-stats div:nth-child(2) { border-right: 0; } .bl-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } }

/* Game cards */
.bl-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bl-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bl-grid.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1060px) { .bl-grid, .bl-grid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bl-grid, .bl-grid.is-two, .bl-grid.is-four { grid-template-columns: minmax(0, 1fr); } }
.bl-card { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--deck), var(--night)); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; min-width: 0; }
.bl-card:hover { transform: translateY(-3px); border-color: rgba(198, 244, 50, .45); box-shadow: 0 22px 50px -26px rgba(198, 244, 50, .35); }
.bl-card-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--deck-2); }
.bl-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bl-card:hover .bl-card-img img { transform: scale(1.035); }
.bl-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 13, 20, .85), transparent 55%); }
.bl-card-no { position: absolute; left: .9rem; top: .8rem; z-index: 1; font: 800 .7rem/1 var(--led); letter-spacing: .2em; color: var(--lime); background: rgba(7, 8, 12, .72); padding: .45em .6em; border-radius: 6px; border: 1px solid rgba(198, 244, 50, .3); }
.bl-card-score { position: absolute; right: .9rem; bottom: .75rem; z-index: 1; }
.bl-card-body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.bl-card h3 { margin: 0; font-size: 1.45rem; }
.bl-card h3 a { color: #fff; text-decoration: none; }
.bl-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.bl-card h3 a:hover { color: var(--lime); }
.bl-card p { color: var(--soft); font-size: .95rem; line-height: 1.55; margin: 0; }
.bl-card .bl-chips { margin-top: auto; }
.bl-card-price { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; border-top: 1px dashed var(--rule-2); padding-top: .75rem; font: 500 .82rem/1.3 var(--mono); color: var(--mute); }
.bl-card-price b { font: 700 1rem/1 var(--mono); color: #fff; }

/* Lead feature */
.bl-lead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); border: 1px solid var(--rule); border-radius: calc(var(--r) + 4px); overflow: hidden; background: var(--night); }
.bl-lead-img { position: relative; min-height: 320px; }
.bl-lead-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bl-lead-body { padding: clamp(1.5rem, 3vw, 2.6rem); display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.bl-lead-body h3 { font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem); margin: 0; }
.bl-lead-body p { color: var(--soft); margin: 0; }
@media (max-width: 860px) { .bl-lead { grid-template-columns: minmax(0, 1fr); } .bl-lead-img { min-height: 0; aspect-ratio: 16 / 9; } }

/* Feature tiles (rights, methods) */
.bl-tile { background: var(--deck); border: 1px solid var(--rule); border-radius: var(--r); padding: 1.35rem 1.3rem 1.25rem; display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.bl-tile h3 { margin: 0; font-size: 1.3rem; }
.bl-tile p { color: var(--soft); margin: 0; font-size: .96rem; line-height: 1.58; }
.bl-tile .bl-tile-ic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: rgba(198, 244, 50, .09); border: 1px solid rgba(198, 244, 50, .3); color: var(--lime); }
.bl-tile .bl-tile-ic svg { width: 22px; height: 22px; }
.bl-tile.is-violet .bl-tile-ic { background: rgba(161, 132, 255, .1); border-color: rgba(161, 132, 255, .4); color: var(--violet); }
.bl-tile.is-amber .bl-tile-ic { background: rgba(255, 180, 61, .08); border-color: rgba(255, 180, 61, .4); color: var(--amber); }
.bl-tile .bl-tile-src { margin-top: auto; padding-top: .6rem; font: 500 .78rem/1.3 var(--mono); color: var(--mute); }
.bl-tile .bl-tile-src a { color: var(--soft); }

/* Split blocks */
.bl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.bl-split.is-media-left > :first-child { order: 0; }
.bl-split-media { border-radius: calc(var(--r) + 4px); overflow: hidden; border: 1px solid var(--rule); position: relative; }
.bl-split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bl-split-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .9rem; font: 500 .75rem/1.3 var(--mono); color: var(--soft); background: linear-gradient(0deg, rgba(7, 8, 12, .9), transparent); }
@media (max-width: 860px) { .bl-split { grid-template-columns: minmax(0, 1fr); } }

/* Signal meters */
.bl-meter { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) auto; gap: .6rem 1rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--rule); }
.bl-meter:first-child { border-top: 0; }
.bl-meter dt { font: 650 .95rem/1.2 var(--body); color: #fff; }
.bl-meter dd { margin: 0; }
.bl-meter .bl-segs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.bl-segs i { height: 12px; border-radius: 2px; background: #1c2133; }
.bl-segs i.on { background: var(--lime); box-shadow: 0 0 8px rgba(198, 244, 50, .45); }
.bl-segs.is-violet i.on { background: var(--violet); box-shadow: 0 0 8px rgba(161, 132, 255, .5); }
.bl-meter .bl-meter-v { font: 900 1.2rem/1 var(--led); color: var(--lime); min-width: 2.6ch; text-align: right; }
.bl-meter .bl-meter-why { grid-column: 1 / -1; color: var(--soft); font-size: .92rem; line-height: 1.5; margin: 0; }
@media (max-width: 560px) { .bl-meter { grid-template-columns: minmax(0, 1fr) auto; } .bl-meter dd.bl-meter-bar { grid-column: 1 / -1; order: 3; } }

/* Review layout */
.bl-review-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--rule); }
.bl-review-hero .bl-hero-media img { object-position: 50% 30%; }
.bl-review-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 8, 12, .96) 0%, rgba(7, 8, 12, .8) 45%, rgba(7, 8, 12, .3) 100%), linear-gradient(0deg, var(--ink), rgba(7, 8, 12, 0) 45%); }
.bl-review-hero .bl-wrap { padding: clamp(2.6rem, 6vw, 5rem) 0 clamp(2.4rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
.bl-review-hero h1 { font-size: clamp(2.4rem, 5vw + .6rem, 5rem); margin-bottom: .25em; max-width: 16ch; }
.bl-verdict { font-size: clamp(1.05rem, .5vw + .95rem, 1.25rem); color: var(--soft); max-width: 58ch; margin-bottom: 1.2rem; }
.bl-total { text-align: center; background: rgba(7, 8, 12, .78); border: 1px solid rgba(198, 244, 50, .35); border-radius: var(--r); padding: 1rem 1.3rem .9rem; min-width: 150px; box-shadow: 0 0 60px -20px rgba(198, 244, 50, .4); }
.bl-total .bl-led { font-size: 3.4rem; display: block; }
.bl-total small { display: block; margin-top: .45rem; font: 800 .64rem/1.2 var(--led); letter-spacing: .2em; color: var(--mute); text-transform: uppercase; }
@media (max-width: 760px) { .bl-review-hero .bl-wrap { grid-template-columns: minmax(0, 1fr); } .bl-total { justify-self: start; display: flex; gap: 1rem; align-items: center; text-align: left; } .bl-total .bl-led { font-size: 2.4rem; } .bl-total small { margin: 0; } }

.bl-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; padding: clamp(2.4rem, 5vw, 4rem) 0; }
@media (max-width: 1020px) { .bl-body { grid-template-columns: minmax(0, 1fr); } }
.bl-prose { min-width: 0; }
.bl-prose > section { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.bl-prose h2 { font-size: clamp(1.6rem, 1.4vw + 1rem, 2.2rem); padding-top: .2rem; }
.bl-prose h3 { margin-top: 1.6em; }
.bl-prose p, .bl-prose li { color: #d7dbe8; }
.bl-prose ul li::marker { color: var(--lime); }
.bl-short { background: var(--deck); border: 1px solid var(--rule); border-left: 3px solid var(--lime); border-radius: var(--r-s); padding: 1.2rem 1.3rem; }
.bl-short ul { margin: 0; }
.bl-proscons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin: 1.4rem 0; }
.bl-proscons > div { background: var(--deck); border: 1px solid var(--rule); border-radius: var(--r-s); padding: 1.1rem 1.2rem; }
.bl-proscons h4 { margin-bottom: .7rem; color: var(--lime); }
.bl-proscons > div + div h4 { color: var(--coral); }
.bl-proscons ul { margin: 0; padding-left: 1.1em; }
.bl-proscons > div + div li::marker { color: var(--coral); }
@media (max-width: 640px) { .bl-proscons { grid-template-columns: minmax(0, 1fr); } }

.bl-aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 1020px) { .bl-aside { position: static; } }
.bl-box { background: linear-gradient(180deg, var(--deck), var(--night)); border: 1px solid var(--rule-2); border-radius: var(--r); padding: 1.2rem; }
.bl-box h2, .bl-box h3 { font: 800 .74rem/1 var(--led); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin: 0 0 .9rem; }
.bl-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1rem; font-size: .92rem; }
.bl-facts dt { color: var(--mute); font: 500 .8rem/1.5 var(--mono); }
.bl-facts dd { margin: 0; color: #fff; font-weight: 500; line-height: 1.4; }
.bl-price-big { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .3rem 0 .9rem; border-bottom: 1px dashed var(--rule-2); margin-bottom: .9rem; }
.bl-price-big b { font: 700 2rem/1 var(--mono); color: var(--lime); }
.bl-price-big span { color: var(--mute); font: 500 .8rem/1.3 var(--mono); text-align: right; }
.bl-jump { list-style: none; margin: 0; padding: 0; }
.bl-jump li { margin: 0; }
.bl-jump a { display: flex; justify-content: space-between; padding: .55rem 0; border-top: 1px solid var(--rule); color: var(--soft); text-decoration: none; font-size: .93rem; }
.bl-jump a::after { content: "↓"; color: var(--lime); }
.bl-jump a:hover { color: #fff; }
.bl-jump.is-out a::after { content: "→"; }

/* Data tables */
.bl-table-wrap { border: 1px solid var(--rule); border-radius: var(--r-s); overflow-x: auto; background: var(--night); margin: 1.2rem 0 1.4rem; }
.bl-table th, .bl-table td { padding: .8rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); font-size: .93rem; line-height: 1.45; }
.bl-table th { background: var(--deck-2); color: var(--mute); font: 600 .74rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.bl-table tr:last-child td { border-bottom: 0; }
.bl-table td.is-num { font-family: var(--mono); color: #fff; white-space: nowrap; }
.bl-table td .bl-note { display: block; color: var(--mute); font-size: .82rem; margin-top: .2rem; }
.bl-table caption { caption-side: bottom; text-align: left; padding: .7rem .9rem; font: 500 .78rem/1.4 var(--mono); color: var(--mute); border-top: 1px solid var(--rule); }
.bl-yes { color: var(--mint); font-weight: 600; }
.bl-no { color: var(--mute); }
.bl-part { color: var(--amber); font-weight: 600; }
@media (max-width: 720px) {
  .bl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .bl-table, .bl-table tbody, .bl-table tr, .bl-table td { display: block; width: 100%; }
  .bl-table tr { border-bottom: 1px solid var(--rule-2); padding: .4rem 0; }
  .bl-table tr:last-child { border-bottom: 0; }
  .bl-table td { border: 0; padding: .4rem .9rem; display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: .8rem; }
  .bl-table td::before { content: attr(data-label); color: var(--mute); font: 600 .72rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
  .bl-table td.is-num { white-space: normal; }
}

/* Callouts */
.bl-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.1rem 1.2rem; border-radius: var(--r-s); border: 1px solid rgba(255, 180, 61, .38); background: rgba(255, 180, 61, .06); margin: 1.4rem 0; }
.bl-callout svg { width: 24px; height: 24px; color: var(--amber); margin-top: .15rem; }
.bl-callout p { margin: 0; color: #f1e3c9; }
.bl-callout.is-violet { border-color: rgba(161, 132, 255, .4); background: rgba(161, 132, 255, .07); }
.bl-callout.is-violet svg { color: var(--violet); }
.bl-callout.is-violet p { color: #ddd5ff; }

/* Quirk cards */
.bl-quirks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.bl-quirk { background: var(--deck); border: 1px solid var(--rule); border-radius: var(--r-s); padding: 1rem 1.1rem; }
.bl-quirk h4 { margin: 0 0 .45rem; color: var(--violet); font-size: .9rem; }
.bl-quirk p { margin: 0; font-size: .94rem; color: var(--soft); }
@media (max-width: 640px) { .bl-quirks { grid-template-columns: minmax(0, 1fr); } }

/* Gallery */
.bl-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1.2rem 0 0; }
.bl-gallery figure { margin: 0; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--rule); background: var(--deck); }
.bl-gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bl-gallery figcaption { padding: .5rem .7rem; font: 500 .74rem/1.35 var(--mono); color: var(--mute); }
@media (max-width: 760px) { .bl-gallery { grid-template-columns: minmax(0, 1fr); } }

/* Sources */
.bl-sources { font-size: .88rem; color: var(--mute); }
.bl-sources ol { padding-left: 1.4em; }
.bl-sources li { overflow-wrap: anywhere; }
.bl-sources a { color: var(--soft); }
.bl-stamp { display: inline-flex; align-items: center; gap: .5em; font: 500 .8rem/1.3 var(--mono); color: var(--mute); }
.bl-stamp::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }

/* Forms (pay route) */
.bl-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .9rem; align-items: end; background: var(--deck); border: 1px solid var(--rule-2); border-radius: var(--r); padding: 1.2rem; }
.bl-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.bl-field label { font: 600 .74rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.bl-field select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 50px; padding: .7rem 2.4rem .7rem .9rem; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--night) url("../img/brand/caret.svg") no-repeat right .85rem center / 14px; color: #fff; font: 500 1rem/1.2 var(--body); }
.bl-field select:focus { border-color: var(--lime); outline: none; box-shadow: 0 0 0 3px rgba(198, 244, 50, .2); }
@media (max-width: 900px) { .bl-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bl-form .bl-btn { grid-column: 1 / -1; } }
@media (max-width: 560px) { .bl-form { grid-template-columns: minmax(0, 1fr); } }
.bl-results { margin-top: 1.4rem; display: grid; gap: .9rem; }
.bl-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1rem; background: var(--night); border: 1px solid var(--rule); border-left: 3px solid var(--mint); border-radius: var(--r-s); padding: 1rem 1.1rem; }
.bl-result.is-off { border-left-color: var(--coral); }
.bl-result.is-maybe { border-left-color: var(--amber); }
.bl-result h3 { margin: 0; font-size: 1.2rem; }
.bl-result p { grid-column: 1 / -1; margin: 0; color: var(--soft); font-size: .94rem; }
.bl-result b.is-num { font: 700 1.05rem/1.2 var(--mono); color: #fff; }
.bl-empty { color: var(--soft); padding: 1rem 0; }

/* Filters on the bulletin index */
.bl-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.bl-filters button { min-height: 44px; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--deck); color: var(--soft); font: 600 .9rem/1 var(--body); cursor: pointer; }
.bl-filters button[aria-pressed="true"] { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.bl-filters button:hover { color: #fff; border-color: var(--violet); }
.bl-filters button[aria-pressed="true"]:hover { color: var(--ink); }
[hidden] { display: none !important; }

/* Store pages */
.bl-accepts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: .7rem; margin: 1.2rem 0; }
.bl-accept { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem .9rem; border-radius: var(--r-s); background: var(--deck); border: 1px solid var(--rule); }
.bl-accept b { display: block; color: #fff; font-weight: 600; font-size: .95rem; }
.bl-accept span { display: block; color: var(--mute); font-size: .82rem; line-height: 1.4; margin-top: .15rem; }
.bl-accept .bl-dot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: .4rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.bl-accept.is-no .bl-dot { background: #3b4157; box-shadow: none; }
.bl-accept.is-no b { color: var(--mute); }
.bl-accept.is-part .bl-dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }

/* Glossary & legal text */
.bl-defs dt { font: 750 1.2rem/1.2 var(--head); font-stretch: 86%; color: #fff; margin-top: 1.6rem; }
.bl-defs dd { margin: .4rem 0 0; color: #d7dbe8; }
.bl-legal h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.bl-legal p, .bl-legal li { color: #d7dbe8; }

/* Footer */
.bl-foot { margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--rule); background: linear-gradient(180deg, #090a10, #050609); padding: clamp(2.6rem, 5vw, 4rem) 0 2rem; font-size: .93rem; color: var(--soft); }
.bl-foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.bl-foot h2 { font: 800 .72rem/1 var(--led); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin: 0 0 1rem; }
.bl-foot ul { list-style: none; margin: 0; padding: 0; }
.bl-foot li { margin: 0; }
.bl-foot li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--soft); text-decoration: none; }
.bl-foot li a:hover { color: var(--lime); }
.bl-foot-about p { max-width: 44ch; }
.bl-disclose { margin-top: 2.4rem; padding: 1.2rem 1.3rem; border: 1px solid var(--rule-2); border-radius: var(--r); background: rgba(17, 20, 31, .6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.bl-disclose p { margin: 0; font-size: .88rem; line-height: 1.55; }
.bl-disclose b { display: block; color: #fff; font-size: .9rem; margin-bottom: .25rem; }
.bl-foot-base { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; font: 500 .8rem/1.5 var(--mono); color: var(--mute); }
@media (max-width: 900px) { .bl-foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bl-foot-about { grid-column: 1 / -1; } .bl-disclose { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .bl-foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* 404 */
.bl-lost { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: 4rem 0; }
.bl-lost .bl-led { font-size: clamp(5rem, 16vw, 10rem); color: var(--coral); text-shadow: 0 0 40px rgba(255, 100, 130, .45); }
.bl-lost p { color: var(--soft); max-width: 52ch; margin: 1rem auto 1.8rem; }
.bl-lost .bl-actions { justify-content: center; }

/* Utilities */
.bl-center { text-align: center; }
.bl-mt { margin-top: 1.6rem; }
.bl-muted { color: var(--mute); }
.bl-lede { font-size: 1.12rem; color: var(--soft); }
.bl-num { font-family: var(--mono); }
.bl-wide-gap { gap: 1.4rem; }

/* Touch targets last so they win */
@media (pointer: coarse) {
  .bl-mark { min-height: 46px; }
  .bl-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .bl-sources li a, .bl-tile-src a, .bl-muted a { display: inline-flex; align-items: center; min-height: 44px; }
  .bl-table td a { display: inline-flex; align-items: center; min-height: 44px; }
  .bl-defs dt a, .bl-legal li a { display: inline-flex; align-items: center; min-height: 44px; }
  a.bl-chip { min-height: 44px; padding-inline: .9em; }
  .bl-result h3 a, .bl-tile p > a:only-child, .bl-more { display: inline-flex; align-items: center; min-height: 44px; }
  .bl-chip { min-height: 32px; }
  .bl-foot li a { min-height: 44px; }
  .bl-jump a { min-height: 44px; align-items: center; }
}

/* Tiles used as links */
a.bl-tile { color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
a.bl-tile:hover { color: inherit; border-color: rgba(198, 244, 50, .45); transform: translateY(-2px); }
a.bl-tile h3 { color: #fff; }
a.bl-tile:hover h3 { color: var(--lime); }
a.bl-chip { text-decoration: none; }
a.bl-chip:hover { color: #fff; border-color: var(--violet); }