/* Stroker Report design system v2.
   Black shell, white content, one red accent. Modeled on the ecommerce
   language of the category leader: black header and footer, red CTA
   buttons with white bold uppercase text, condensed black display type,
   mono lab labels, hard edged cards. Fonts are self hosted. */

@font-face {
  font-family: "Anton";
  src: url("/static/fonts/anton-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/jetbrainsmono-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-italic-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --black: #0b0b0c;
  --char: #151517;
  --char-2: #1e1e21;
  --char-line: #333338;
  --ink: #17181a;
  --body: #2e3236;
  --muted: #5b6066;
  --muted-d: #b3b0a6;
  --faint-d: #c9c6be;
  --paper: #ffffff;
  --paper-2: #f4f4f1;
  --line: #e4e2db;
  --red: #e4022e;
  --red-dark: #b80024;
  --anton: "Anton", "Arial Narrow", "Impact", sans-serif;
  --sans: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --serif-i: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--red); color: #fff; }
img { max-width: 100%; }
a { color: var(--red-dark); text-underline-offset: 3px; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.wrap { max-width: 820px; margin: 0 auto; padding: 0 22px; }
body.page-page .wrap { max-width: 780px; }

/* Full bleed bands inside the constrained column. Full bleed comes from
   symmetric negative margins, never a viewport width declaration: the
   vw unit includes the scrollbar, so a band sized that way overshoots
   the viewport on both sides. The horizontal padding below is the exact
   complement of the negative margin and resolves against the same
   containing block, so band content always lands precisely in the
   .wrap column at any viewport width, on the 820px article column and
   the 780px support column alike. */
.band-dark, .band-light {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}
.band-dark { background: var(--black); color: var(--faint-d); }
.band-light { background: var(--paper-2); }

/* Type furniture */
.kicker {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-dark);
  margin: 0 0 0.9rem;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 26px; height: 4px;
  background: var(--red);
  vertical-align: middle;
  margin-right: 0.65rem;
}
.band-dark .kicker, .age-card .kicker { color: #fff; }
h1, h2, h3 { color: var(--ink); }
h1 {
  font-family: var(--anton);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 1.03;
  margin: 0 0 1rem;
}
.accent-word { color: var(--red); }

/* Header: black shell, centered stacked brand unit, red rule */
.site-header { background: var(--black); border-bottom: 4px solid var(--red); }
.header-inner {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 1.5rem; text-align: center;
}
.brand { text-decoration: none; display: flex; flex-direction: column; align-items: center; }
.brand-lockup { display: flex; align-items: center; gap: 0.9rem; }
.brand-mark { height: 54px; width: auto; display: block; }
.brand-name {
  font-family: var(--anton);
  font-size: 2.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.brand-report { color: var(--red); }
.brand-tag {
  margin-top: 0.55rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-d);
}
.main-nav {
  margin-top: 1.25rem;
  width: 100%;
  border-top: 1px solid var(--char-line);
  display: flex; flex-wrap: wrap; justify-content: center;
}
.main-nav a {
  color: #edecea;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.85rem 1rem;
}
.main-nav a:hover { color: #fff; box-shadow: inset 0 -4px 0 var(--red); }

/* Buttons: solid red, white bold uppercase, hard shadow */
.btn {
  display: inline-block;
  background: var(--red);
  color: #fff;
  border: 2px solid var(--red);
  border-radius: 8px;
  padding: 0.95rem 1.7rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(11, 11, 12, 0.9);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
}
.btn:hover {
  background: var(--red-dark); border-color: var(--red-dark); color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: 7px 7px 0 rgba(11, 11, 12, 0.9);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 5px 5px 0 rgba(11, 11, 12, 0.18);
}
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.band-dark .btn-ghost, .age-card .btn-ghost, .home-hero .btn-ghost {
  color: #fff; border-color: #fff;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
}
.band-dark .btn-ghost:hover, .age-card .btn-ghost:hover, .home-hero .btn-ghost:hover {
  background: #fff; color: var(--black);
}
.cta-row { margin: 1.4rem 0; }

/* Homepage hero: centered brand block on black */
.home-hero {
  text-align: center;
  padding-top: 3rem; padding-bottom: 3.2rem;
  margin-bottom: 2.4rem;
}
.home-hero .kicker { color: #fff; }
.hero-mark { height: 106px; width: auto; margin: 0.4rem auto 1.1rem; display: block; }
.home-hero h1 { color: #fff; font-size: clamp(3rem, 9vw, 5.3rem); margin-bottom: 1.1rem; }
.lede {
  font-family: var(--serif-i);
  font-style: italic;
  font-weight: 500;
  font-size: 1.32rem;
  line-height: 1.55;
}
.home-hero .lede { color: #edecea; max-width: 620px; margin: 0 auto 1.8rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 0; }
.hero-cta .btn { box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6); }

/* Answer and method boxes */
.answer {
  background: #fff;
  border: 2px solid var(--ink);
  border-left: 9px solid var(--red);
  border-radius: 12px;
  box-shadow: 7px 7px 0 rgba(11, 11, 12, 0.9);
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.6rem;
}
.answer-kicker {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-dark);
  margin-bottom: 0.5rem;
}
.answer p { margin: 0; font-size: 1.06rem; color: var(--ink); }
.method {
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  margin: 0 0 1.6rem;
}
.method p { margin: 0; font-size: 0.98rem; }
.disclosure {
  font-size: 0.92rem; color: var(--muted);
  border-left: 4px solid var(--red);
  padding-left: 0.9rem;
  margin: 0 0 1.8rem;
}

/* Sections and cards */
/* Longhands only here: a padding shorthand on a banded section would
   reset the band rule horizontal padding to zero (equal specificity,
   later in the file) and push band content to the viewport edges. */
.home-section { padding-top: 2.2rem; padding-bottom: 0.6rem; }
.home-section.band-dark, .home-section.band-light {
  padding-top: 2.6rem; padding-bottom: 2.8rem; margin-top: 2.4rem;
}
.home-section h2, .faq h2, .related h2 {
  font-family: var(--anton);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: 2rem;
  line-height: 1.1;
  margin: 0 0 0.7rem;
}
.home-section h2::before, .faq h2::before, .related h2::before {
  content: ""; display: block;
  width: 46px; height: 5px; background: var(--red);
  margin-bottom: 0.65rem;
}
.band-dark h2 { color: #fff; }
.cards { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.3rem; }
@media (min-width: 680px) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  display: block;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 7px 7px 0 var(--ink);
  text-decoration: none;
  color: var(--body);
  transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.12s ease;
}
.card:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--ink); border-color: var(--red); color: var(--body); }
.card-body { position: relative; padding: 1.25rem 1.35rem 1.35rem; }
.card-num {
  position: absolute; top: 0.45rem; right: 0.9rem;
  font-family: var(--anton);
  font-size: 2.7rem; line-height: 1;
  color: var(--ink); opacity: 0.14;
}
.card-colony {
  display: block;
  font-family: var(--mono); font-weight: 700;
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red-dark);
  margin-bottom: 0.5rem;
}
.card h3 {
  font-family: var(--anton); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.015em;
  font-size: 1.32rem; line-height: 1.15;
  margin: 0 2.6rem 0.5rem 0;
}
.card p { margin: 0; font-size: 0.99rem; }
.band-dark .card { background: var(--char-2); border-color: #3a3a3f; box-shadow: 7px 7px 0 #000; color: var(--faint-d); }
.band-dark .card:hover { box-shadow: 10px 10px 0 #000; border-color: var(--red); color: var(--faint-d); }
.band-dark .card h3 { color: #fff; }
.band-dark .card-num { color: #fff; opacity: 0.16; }
.band-dark .card-colony { color: #fff; }

/* Article hero on black */
.art-hero { padding-top: 1.6rem; padding-bottom: 2.2rem; margin-bottom: 2rem; }
.crumbs {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.crumbs a { color: var(--faint-d); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.art-hero h1 { color: #fff; font-size: clamp(2.15rem, 6vw, 3.35rem); }
.art-hero .kicker { color: #fff; }
.meta {
  font-family: var(--mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-d); margin: 0;
}

/* Spec strip: mono chips under the H1 */
.spec-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.spec {
  display: inline-flex; align-items: baseline; gap: 0.55rem;
  background: var(--char);
  border: 1.5px solid var(--char-line);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
.spec-k {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-d);
}
.spec-v { font-family: var(--mono); font-size: 0.82rem; font-weight: 700; color: #fff; }

/* Score bars */
.bars { margin-top: 0.7rem; }
.bar {
  display: grid; grid-template-columns: 138px 1fr 42px;
  gap: 0.7rem; align-items: center; margin: 0.42rem 0;
}
.bar-label {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.bar-track { display: block; height: 10px; background: #e7e4dc; border-radius: 99px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--red); border-radius: 99px; }
.bar-num { font-family: var(--mono); font-weight: 700; font-size: 0.86rem; text-align: right; color: var(--ink); }
.stars { position: relative; display: inline-block; font-size: 0.98rem; line-height: 1; letter-spacing: 0.14em; color: #d8d4c9; white-space: nowrap; }
.stars-fg { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--red); }
.score-panel .stars, .band-dark .stars { color: #3a3a3f; }

/* Review score panel, inside the black hero */
.score-panel {
  background: #101012;
  border: 2px solid var(--char-line);
  border-radius: 12px;
  padding: 1.15rem 1.3rem 1.25rem;
  margin-top: 1.4rem;
}
.sp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.sp-kicker {
  font-family: var(--mono); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: #fff;
}
.sp-kicker::before {
  content: ""; display: inline-block; width: 22px; height: 4px;
  background: var(--red); vertical-align: middle; margin-right: 0.6rem;
}
.sp-num { font-family: var(--anton); font-size: 2.1rem; line-height: 1; color: #fff; }
.score-panel .bar-label { color: var(--faint-d); }
.score-panel .bar-track { background: #26262a; }
.score-panel .bar-num { color: #fff; }
.sp-note { font-size: 0.82rem; color: var(--muted-d); margin: 0.8rem 0 0; }

/* Sticker badges */
.sticker {
  display: inline-block;
  background: var(--red); color: #fff;
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(11, 11, 12, 0.9);
  font-family: var(--sans); font-weight: 800;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  transform: rotate(-2deg);
  vertical-align: middle;
  white-space: nowrap;
}
.score-panel .sticker { border-color: #fff; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7); }

/* Scoreboard sheet on buying guides */
.scoreboard {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 1.4rem 1.5rem 1.2rem;
  margin: 2.2rem 0;
}
.sb-kicker {
  font-family: var(--mono); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--red-dark);
  margin: 0 0 0.4rem;
}
.sb-kicker::before {
  content: ""; display: inline-block; width: 26px; height: 4px;
  background: var(--red); vertical-align: middle; margin-right: 0.65rem;
}
.article-body .sb-title {
  font-family: var(--anton); font-weight: 400; text-transform: uppercase;
  font-size: 1.7rem; margin: 0 0 0.6rem;
  border: none; padding: 0;
}
.sb-row { padding: 1rem 0 0.9rem; border-top: 1.5px solid var(--line); }
.sb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.sb-name { font-weight: 800; font-size: 1.06rem; color: var(--ink); }
.sb-score { margin-left: auto; display: inline-flex; align-items: center; gap: 0.7rem; }
.sb-num { font-family: var(--anton); font-size: 1.55rem; line-height: 1; color: var(--red-dark); }
.sb-note { font-size: 0.84rem; color: var(--muted); margin: 1rem 0 0; }
@media (min-width: 680px) {
  .scoreboard .bars, .score-panel .bars { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.2rem; }
}

/* Article body */
.article-body > p:first-of-type {
  font-family: var(--serif-i); font-style: italic; font-weight: 500;
  font-size: 1.24rem; line-height: 1.55; color: #26292d;
}
.article-body h2 {
  font-family: var(--anton); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.015em;
  font-size: 1.72rem; line-height: 1.12;
  margin: 2.7rem 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--ink);
}
.article-body h3 {
  font-family: var(--anton); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.015em;
  font-size: 1.25rem; margin: 2rem 0 0.6rem;
}
.rank-num {
  font-size: 1.45em; line-height: 0.9; margin-right: 0.12em; color: var(--red-dark);
}
@supports (-webkit-text-stroke: 1px black) {
  .rank-num { color: transparent; -webkit-text-stroke: 2px var(--red); }
}
.article-body .sticker { margin-left: 0.7rem; }
.article-body table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  border: 2px solid var(--ink); border-radius: 10px; overflow: hidden;
  box-shadow: 6px 6px 0 rgba(11, 11, 12, 0.14);
  margin: 1.4rem 0; font-size: 0.97rem;
}
.article-body th {
  background: var(--black); color: #fff;
  font-family: var(--mono); font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-align: left; padding: 0.72rem 0.85rem;
}
.article-body td { padding: 0.72rem 0.85rem; border-top: 1px solid var(--line); vertical-align: top; }
.article-body tbody tr:nth-child(even) td { background: var(--paper-2); }
.rank-table td:first-child {
  font-family: var(--anton); font-size: 1.45rem; line-height: 1.1; color: var(--red-dark);
}
.chip {
  display: inline-block;
  background: var(--red); color: #fff;
  font-weight: 800; font-size: 0.8rem; line-height: 1.3;
  padding: 0.24rem 0.6rem; border-radius: 999px;
}
.article-body ul, .article-body ol { padding-left: 1.35rem; }
.article-body li { margin: 0.35rem 0; }
.article-body li::marker { color: var(--red-dark); font-weight: 800; }

/* Support page hero */
.page-hero { padding-top: 2rem; padding-bottom: 2.1rem; margin-bottom: 2rem; }
.page-hero h1 { font-size: clamp(2rem, 5.5vw, 3rem); }

/* FAQ */
.faq { padding-top: 2.4rem; padding-bottom: 2.6rem; margin-top: 2.6rem; }
.faq details {
  background: #fff; border: 2px solid var(--ink); border-radius: 10px;
  padding: 0; margin: 0.65rem 0;
}
.faq summary {
  font-weight: 800; color: var(--ink); cursor: pointer;
  padding: 0.95rem 1.15rem; list-style-position: inside;
}
.faq details p { padding: 0 1.15rem 1.05rem; margin: 0; }

/* Related on black */
.related { padding-top: 2.4rem; padding-bottom: 2.8rem; margin-top: 2.6rem; }
.related h2 { color: #fff; }

/* Footer: black shell, centered brand unit, red rule */
.site-footer {
  background: var(--black); color: var(--faint-d);
  border-top: 4px solid var(--red);
  margin-top: 3.2rem; padding: 2.4rem 0 2.2rem;
  font-size: 0.95rem;
}
.foot-brand {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  font-family: var(--anton); font-size: 1.45rem; letter-spacing: 0.03em;
  text-transform: uppercase; color: #fff; margin: 0 0 1.2rem;
}
.foot-mark { height: 37px; width: auto; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--red); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 1.2rem 0; }
.foot-nav a {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
}
.foot-nav a:hover { text-decoration: underline; }
.fine { font-size: 0.82rem; color: var(--muted-d); }

/* Age gate */
.age-gate {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(5, 5, 6, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
}
.age-gate[hidden] { display: none; }
.age-card {
  background: #101012; color: var(--faint-d);
  border: 2px solid var(--char-line); border-top: 6px solid var(--red);
  border-radius: 14px;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.65);
  max-width: 480px; width: 100%;
  padding: 2rem 2rem 1.7rem; text-align: center;
}
.age-mark { height: 61px; width: auto; margin: 0 auto 0.8rem; display: block; }
.age-kicker {
  font-family: var(--mono); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: #fff; margin: 0 0 0.5rem;
}
.age-card h2 {
  font-family: var(--anton); font-weight: 400; text-transform: uppercase;
  color: #fff; font-size: 2rem; margin: 0 0 0.7rem;
}
.age-card .btn { margin: 0.35rem 0.25rem; }

/* Small screens */
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .brand-lockup { flex-direction: column; gap: 0.45rem; }
  .brand-mark { height: 46px; }
  .brand-name { font-size: 1.8rem; }
  .main-nav a { padding: 0.75rem 0.6rem; font-size: 0.74rem; }
  .bar { grid-template-columns: 108px 1fr 38px; gap: 0.55rem; }
  .bar-label { font-size: 0.6rem; }
  .hero-mark { height: 84px; }
  .btn { padding: 0.9rem 1.3rem; font-size: 0.9rem; }
  .scoreboard { padding: 1.15rem 1.1rem 1rem; }
  .sb-score { margin-left: 0; }
}