/* ---------------------------------------------------------------
   COMPONENTS — every named piece of the interface.
   Layer 4 of 4.
   --------------------------------------------------------------- */

/* === Age notice bar (persistent, never a modal) ==================== */
.c-agebar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  color: #f2f2ef;
  font-size: var(--fs-tiny);
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.c-agebar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-2);
}

.c-agebar__mark {
  flex: none;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  background: var(--coral);
  color: var(--ink);
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
}

.c-agebar p { margin: 0; max-width: none; }

.c-agebar a {
  color: #fff;
  background-image: linear-gradient(var(--coral), var(--coral));
  background-size: 100% 1.5px;
}
.c-agebar a:hover { color: var(--coral); }

/* === Masthead: boxed header, bottom rule, compacts on scroll ======= */
.c-masthead {
  position: static;
  z-index: 50;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  transition: padding var(--transition);
  padding-block: var(--s-4);
}

.c-masthead.is-compact { padding-block: var(--s-2); }

.c-masthead__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s-3) var(--s-4);
  transition: padding var(--transition);
}

.c-masthead.is-compact .c-masthead__box { padding: var(--s-2) var(--s-4); }

.c-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  background-image: none;
  color: var(--ink);
  flex: none;
}

.c-brand__mark {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-sm);
  transition: width var(--transition), height var(--transition);
}

.c-masthead.is-compact .c-brand__mark { width: 30px; height: 30px; }

.c-brand__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.05;
  letter-spacing: 0.005em;
  transition: font-size var(--transition);
}

.c-masthead.is-compact .c-brand__name { font-size: 1rem; }

.c-brand__name span { color: var(--coral-ink); }

.c-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.c-nav__list li { margin: 0; }

.c-nav__link {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
  padding-block: 2px;
}

.c-nav__link[aria-current="page"] {
  color: var(--cobalt);
  font-weight: 600;
  background-image: linear-gradient(var(--coral), var(--coral));
  background-size: 100% 2px;
}

.c-nav__toggle {
  display: none;
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-tiny);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
}

/* === Breadcrumb strip under the header ============================ */
.c-crumbs {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  font-size: var(--fs-tiny);
  color: var(--ink-faint);
}

.c-crumbs__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  padding-block: var(--s-2);
}

.c-crumbs a { color: var(--ink-soft); }
.c-crumbs__sep { color: var(--rule-strong); }
.c-crumbs__updated { margin-left: auto; }

/* === Shared editorial bits ======================================== */
.c-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: 600;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: var(--track-label);
  color: var(--coral-ink);
  margin-bottom: var(--s-3);
}

/* DIVIDERS: short centred accent rule between sections */
.c-divider {
  width: 72px;
  height: 4px;
  background: var(--coral);
  border: 0;
  border-radius: 2px;
  margin: 0 auto;
}

.c-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
}

.c-section-head { margin-bottom: var(--s-7); }

/* === Buttons: outlined / ghost with accent text =================== */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: var(--s-3) var(--s-5);
  border: 2px solid var(--cobalt);
  border-radius: var(--r-sm);
  background: transparent;
  background-image: none;
  color: var(--cobalt);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.c-btn:hover,
.c-btn:focus-visible {
  background-color: var(--cobalt);
  color: #fff;
}

.c-btn--quiet {
  border-color: var(--rule-strong);
  color: var(--ink);
  font-weight: 500;
}

.c-btn--quiet:hover,
.c-btn--quiet:focus-visible {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.c-btn--accent { border-color: var(--coral-ink); color: var(--coral-ink); }
.c-btn--accent:hover,
.c-btn--accent:focus-visible { background-color: var(--coral); border-color: var(--coral); color: var(--ink); }

.c-btn--block { width: 100%; }

/* === Badges: pill with a leading dot ============================== */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-tiny);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  background: var(--paper-tint);
  border-radius: 999px;
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
}

.c-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--cobalt);
}

.c-badge--coral::before { background: var(--coral); }
.c-badge--ink::before { background: var(--ink); }

/* === Hero ========================================================= */
.c-hero {
  position: relative;
  background-color: var(--paper-tint);
  background-image: url("/img/hero-band.jpg");
  background-size: cover;
  background-position: center;
  border-bottom: 2px solid var(--ink);
}

.c-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(242, 242, 239, 0.96) 0%, rgba(242, 242, 239, 0.9) 52%, rgba(242, 242, 239, 0.62) 100%);
}

.c-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(48px, 7vw, 90px);
}

.c-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  max-width: 16ch;
  margin-bottom: var(--s-5);
}

.c-hero__title em {
  font-style: normal;
  color: var(--coral-ink);
}

.c-hero__body { max-width: 60ch; }
.c-hero__body p { font-size: clamp(1.05rem, 1.5vw, 1.18rem); }

.c-hero__flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-5);
}

/* Interior page header band */
.c-pagehead {
  position: relative;
  background-color: var(--paper-tint);
  background-size: cover;
  background-position: center;
  border-bottom: 2px solid var(--ink);
}

.c-pagehead--guide { background-image: url("/img/band-guide.jpg"); }
.c-pagehead--legal { background-image: url("/img/band-legal.jpg"); }

.c-pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(242, 242, 239, 0.95) 0%, rgba(242, 242, 239, 0.88) 60%, rgba(242, 242, 239, 0.66) 100%);
}

.c-pagehead__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(36px, 5.5vw, 68px);
}

.c-pagehead h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  max-width: 20ch;
}

/* === Credibility stats strip ====================================== */
.c-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.c-stats__item {
  padding: var(--s-5);
  border-left: 1px solid var(--rule);
}

.c-stats__item:first-child { border-left: 0; }

.c-stats__figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1;
  color: var(--cobalt);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-2);
}

.c-stats__label {
  display: block;
  font-size: var(--fs-tiny);
  color: var(--ink-soft);
  line-height: 1.4;
}

/* === Notices (disclosure, disclaimer, honesty notes) ============== */
.c-notice {
  border: 1px solid var(--rule);
  border-left: 6px solid var(--coral);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s-5);
}

.c-notice--cobalt { border-left-color: var(--cobalt); }
.c-notice--flat { background: transparent; }
.c-notice--spaced { margin-bottom: var(--s-7); }

.c-notice h2,
.c-notice h3 { font-size: 1.05rem; margin-bottom: var(--s-2); }

.c-notice p { font-size: var(--fs-small); color: var(--ink-soft); }
.c-notice p:last-child { margin-bottom: 0; }
.c-notice a { color: var(--cobalt-deep); }

/* === Showcase: ranked ticket-stub cards =========================== */
.c-showcase { list-style: none; margin: 0; padding: 0; max-width: none; }
.c-showcase > li { margin: 0 0 var(--s-5); }
.c-showcase > li:last-child { margin-bottom: 0; }

.c-stub {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--cobalt);
  border-radius: var(--r-md);
  box-shadow: var(--lift);
}

.c-stub--accent { border-left-color: var(--coral); }

.c-stub__body {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 190px;
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-5);
}

.c-stub__numeral {
  font-family: var(--font-display);
  font-size: var(--fs-numeral);
  line-height: 0.85;
  color: var(--coral);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.c-stub__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 136px;
  height: 56px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-4);
  max-width: 200px;
}

/* Some partner marks are drawn in white and need an ink panel to read */
.c-stub__logo--dark {
  background: var(--ink);
  border-color: var(--ink);
}

.c-stub__logo img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

.c-stub__name {
  font-family: var(--font-head);
  font-size: 1.3rem;
  margin-bottom: var(--s-2);
}

.c-stub__copy { font-size: var(--fs-body); margin-bottom: var(--s-4); }

.c-stub__offer {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}

.c-stub__offer b { color: var(--ink); font-weight: 600; }

.c-stub__aside {
  border-left: 1px solid var(--rule);
  padding-left: var(--s-5);
}

.c-verdict__label {
  display: block;
  font-size: var(--fs-tiny);
  font-variant: small-caps;
  letter-spacing: var(--track-label);
  color: var(--ink-faint);
  margin-bottom: var(--s-1);
}

.c-verdict__word {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.1;
  color: var(--ink);
  border-bottom: 5px solid var(--coral);
  margin-bottom: var(--s-4);
}

/* Perforated divider before the CTA row */
.c-stub__perf {
  position: relative;
  border-top: 2px dashed var(--rule-strong);
  margin-top: 0;
}

.c-stub__perf::before,
.c-stub__perf::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
}

.c-stub__perf::before { left: -13px; }
.c-stub__perf::after { right: -11px; }

.c-stub__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-5);
}

.c-stub__terms {
  font-size: var(--fs-tiny);
  color: var(--ink-faint);
  margin: 0;
  max-width: none;
  margin-left: auto;
}

/* === Comparison table ============================================= */
.c-tablewrap {
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow-x: auto;
}

.c-table {
  min-width: 1080px;
  font-size: var(--fs-small);
  line-height: 1.5;
}

.c-table--compact { min-width: 720px; }

.c-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-tiny);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}

.c-table th,
.c-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.c-table thead th {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: var(--track-label);
  color: var(--ink-soft);
  background: var(--paper-tint);
  white-space: nowrap;
}

.c-table tbody th {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

.c-table tbody tr:last-child th,
.c-table tbody tr:last-child td { border-bottom: 0; }

.c-table__verdict {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--cobalt);
  white-space: nowrap;
  border-bottom: 3px solid var(--coral);
}

.c-tablehint {
  font-size: var(--fs-tiny);
  color: var(--ink-faint);
  margin-top: var(--s-3);
}

/* The hint only earns its place while the table is genuinely wider than
   the viewport; once the full grid fits, it is noise. */
@media (min-width: 1160px) {
  .c-tablehint { display: none; }
}

@media (min-width: 820px) {
  .c-tablehint--compact { display: none; }
}

@media (max-width: 760px) {
  .c-tablewrap { border: 0; background: transparent; overflow: visible; }
  .c-table { min-width: 0; }
  .c-table caption { padding-inline: 0; border: 0; }
  .c-table thead { display: none; }
  .c-table tbody, .c-table tr, .c-table th, .c-table td { display: block; }
  .c-table tbody tr {
    border: 1px solid var(--rule);
    border-left: 6px solid var(--cobalt);
    border-radius: var(--r-md);
    background: var(--surface);
    margin-bottom: var(--s-4);
    padding: var(--s-4);
  }
  .c-table tbody th {
    border: 0;
    padding: 0 0 var(--s-3);
    font-size: 1.15rem;
  }
  .c-table tbody td {
    border: 0;
    border-top: 1px solid var(--rule-faint);
    padding: var(--s-2) 0;
  }
  .c-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-tiny);
    font-variant: small-caps;
    letter-spacing: var(--track-label);
    color: var(--ink-faint);
  }
  .c-tablehint { display: none; }
}

/* === Criteria / method list ======================================= */
.c-criteria { list-style: none; margin: 0; padding: 0; max-width: none; }

.c-criteria > li {
  border-left: 4px solid var(--cobalt);
  padding: var(--s-1) 0 var(--s-1) var(--s-4);
  margin-bottom: var(--s-5);
}

.c-criteria > li:nth-child(even) { border-left-color: var(--coral); }
.c-criteria h3 { font-size: 1.08rem; margin-bottom: var(--s-1); }
.c-criteria p { font-size: 0.97rem; line-height: 1.62; color: var(--ink-soft); margin: 0; }

/* === Definition list (verdict vocabulary, inline explainers) ======= */
.c-deflist { max-width: var(--measure); }

.c-deflist > div {
  border-left: 4px solid var(--cobalt);
  padding-left: var(--s-4);
  margin-bottom: var(--s-4);
}

.c-deflist > div:nth-child(even) { border-left-color: var(--coral); }
.c-deflist > div:last-child { margin-bottom: 0; }

.c-deflist dt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: var(--s-1);
}

.c-deflist dd {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* === Glossary ===================================================== */
.c-glossary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  max-width: none;
}

.c-glossary--single { grid-template-columns: minmax(0, 1fr); }

.c-glossary__term {
  border: 1px solid var(--rule);
  border-left: 5px solid var(--coral);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s-4) var(--s-5);
}

.c-glossary dt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: var(--s-1);
}

.c-glossary dd { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }

@media (max-width: 700px) {
  .c-glossary { grid-template-columns: minmax(0, 1fr); }
}

/* === FAQ as prose blocks ========================================== */
.c-faq__item { margin-bottom: var(--s-7); }
.c-faq__item:last-child { margin-bottom: 0; }

.c-faq__q {
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin-bottom: var(--s-3);
}

.c-faq__item p:last-child { margin-bottom: 0; }

/* === Figures ====================================================== */
.c-figure {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

.c-figure img { width: 100%; }

/* A short figure travels with a long text column instead of stranding space */
@media (min-width: 901px) {
  .o-split > .c-figure { position: sticky; top: 128px; }
}

.c-figure figcaption {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule);
  margin: 0;
  max-width: none;
}

/* === Safety resource cards ======================================== */
.c-safety { background: var(--paper-tint); border-top: 2px solid var(--ink); }

.c-safety__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.c-safety__grid li { margin: 0; }

.c-resource {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--rule);
  border-left: 5px solid var(--cobalt);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s-5);
}

.c-resource__logo {
  display: flex;
  align-items: center;
  height: 44px;
  margin-bottom: var(--s-4);
}

.c-resource__logo--dark {
  align-self: flex-start;
  background: var(--ink);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
}

.c-resource__logo img { max-height: 40px; width: auto; }

.c-resource h3 { font-size: 1.02rem; margin-bottom: var(--s-2); }

.c-resource p {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
  flex: 1 1 auto;
}

.c-resource a.c-resource__link { font-size: var(--fs-small); font-weight: 600; }

@media (max-width: 900px) { .c-safety__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .c-safety__grid { grid-template-columns: minmax(0, 1fr); } }

/* === Contact form ================================================= */
.c-form { max-width: 34rem; }

.c-field { margin-bottom: var(--s-5); }

.c-field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--s-2);
}

.c-field input,
.c-field select,
.c-field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--cobalt);
  border-radius: var(--r-sm);
  padding: var(--s-3);
}

.c-field textarea { min-height: 9rem; resize: vertical; }

.c-field__hint { font-size: var(--fs-tiny); color: var(--ink-faint); margin-top: var(--s-2); }

/* === Footer ======================================================= */
.c-footer {
  background: var(--ink);
  color: #d9dbe0;
  border-top: 6px solid var(--coral);
  padding-block: var(--s-8) var(--s-5);
  font-size: var(--fs-small);
}

.c-footer h2 {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-variant: small-caps;
  letter-spacing: var(--track-label);
  color: #8d939e;
  margin-bottom: var(--s-4);
}

.c-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-6) var(--s-5);
}

.c-footer ul { list-style: none; margin: 0; padding: 0; }
.c-footer li { margin-bottom: var(--s-2); }
.c-footer a { color: #f2f2ef; }
.c-footer a:hover { color: var(--coral); }
.c-footer p { color: #a8adb6; max-width: 36ch; }

.c-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  background-image: none;
}

.c-footer__brand img { width: 34px; height: 34px; border-radius: var(--r-sm); }

.c-footer__brandname {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #f2f2ef;
}

.c-footer__bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(242, 242, 239, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  font-size: var(--fs-tiny);
  color: #8d939e;
}

.c-footer__age {
  font-family: var(--font-display);
  font-size: 0.8rem;
  background: var(--coral);
  color: var(--ink);
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
}

@media (max-width: 900px) { .c-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .c-footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* === Cookie consent =============================================== */
.c-consent {
  position: fixed;
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 70;
  max-width: 640px;
  margin-inline: auto;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  padding: var(--s-5);
  box-shadow: 0 10px 30px rgba(20, 22, 26, 0.18);
}

.c-consent[hidden] { display: none; }
.c-consent p { font-size: var(--fs-small); }
.c-consent__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* === Responsive: showcase and header ============================== */
@media (max-width: 1000px) {
  .c-stub__body { grid-template-columns: 72px minmax(0, 1fr); }
  .c-stub__aside {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: var(--s-4);
  }
  .c-verdict__word { margin-bottom: 0; }
}

@media (min-width: 861px) {
  .c-masthead {
    position: sticky;
    top: var(--age-bar-height, 30px);
  }
}

@media (max-width: 860px) {
  .c-masthead__box { flex-wrap: wrap; }
  .c-nav__toggle { display: inline-flex; }
  .c-nav {
    flex-basis: 100%;
    display: none;
    border-top: 1px solid var(--rule);
    padding-top: var(--s-4);
    margin-top: var(--s-1);
  }
  .c-nav.is-open { display: block; }
  .c-nav__list { flex-direction: column; gap: var(--s-3); }
  .c-nav__link { font-size: 1rem; }
}

@media (max-width: 620px) {
  .c-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-stats__item:nth-child(3) { border-left: 0; }
  .c-stats__item:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .c-stub__body { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .c-stub__numeral { font-size: 2.6rem; }
  .c-stub__actions { flex-direction: column; align-items: stretch; }
  .c-stub__terms { margin-left: 0; }
  .c-crumbs__updated { margin-left: 0; flex-basis: 100%; }
}