/* ==========================================================================
   COMPONENTS — UK Table Compare
   Layers above settings/elements. Separation is by spacing and tint,
   never by borders (images are the single deliberate exception).
   ========================================================================== */

/* --- Layout helpers ------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.wrap--narrow {
  max-width: var(--wrap-narrow);
}

.prose > * + h2 {
  margin-top: var(--s-8);
}

.prose > * + h3 {
  margin-top: var(--s-6);
}

.section {
  padding: var(--s-8) 0;
}

.section--tall {
  padding: var(--s-9) 0;
}

.band {
  background: var(--tint-1);
}

.band--paper {
  background: var(--paper-raised);
}

.band--ink {
  background: var(--ink);
  color: var(--on-ink);
}

.band--ink h2,
.band--ink h3 {
  color: var(--on-ink);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: var(--s-3) var(--s-4);
  background: var(--lime);
  font-weight: 700;
}

.skip:focus {
  left: var(--s-4);
  top: var(--s-4);
}

.kicker {
  display: block;
  margin-bottom: var(--s-3);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.kicker--lime {
  color: var(--lime-deep);
}

.band--ink .kicker {
  color: var(--lime);
}

.lede {
  font-size: var(--t-md);
  line-height: 1.55;
  max-width: 62ch;
}

/* Section break: a small lime diamond glyph */
.glyphrule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-7) 0;
  color: var(--lime-deep);
}

.glyphrule::before,
.glyphrule::after {
  content: "";
  width: 46px;
  height: 2px;
  background: var(--tint-2);
}

.glyphrule span {
  width: 10px;
  height: 10px;
  background: var(--lime-deep);
  transform: rotate(45deg);
}

/* Overlapping card that breaks the boundary of the section above */
.overlap {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--s-8) * -1);
}

/* --- Masthead + underline tab nav --------------------------------------- */
.masthead {
  position: relative;
  z-index: 20;
  background: var(--paper);
  padding-top: var(--s-4);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-4) var(--s-6);
  justify-content: space-between;
}

.brandmark {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
}

.brandmark img {
  width: 38px;
  height: 38px;
  flex: none;
}

.brandmark b {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.brandmark__tag {
  display: block;
  margin-top: 2px;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.tabs {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs ul {
  display: flex;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  max-width: none;
}

.tabs li {
  margin: 0;
  padding: 0;
  text-indent: 0;
  white-space: nowrap;
}

.tabs li::before {
  display: none;
}

.tabs a {
  position: relative;
  display: block;
  padding: var(--s-2) 0 var(--s-3);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink-2);
}

.tabs a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--lime-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}

.tabs a:hover,
.tabs a:focus-visible {
  color: var(--ink);
}

.tabs a:hover::after,
.tabs a:focus-visible::after {
  transform: scaleX(1);
}

.tabs a[aria-current="page"] {
  color: var(--ink);
}

.tabs a[aria-current="page"]::after {
  transform: scaleX(1);
  height: 4px;
  background: var(--lime);
}

.masthead__rule {
  height: 2px;
  background: var(--tint-2);
}

/* Narrow screens show the whole menu on two rows rather than hiding half of
   it behind a sideways scroll. */
@media (max-width: 720px) {
  .tabs {
    overflow: visible;
  }

  .tabs ul {
    flex-wrap: wrap;
    gap: 0 var(--s-4);
  }

  .tabs a {
    padding: var(--s-1) 0 var(--s-2);
  }
}

/* --- Hero: editorial paragraph + accent wedge --------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--s-8) 0 var(--s-9);
}

.hero::before {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -34%;
  width: 62%;
  height: 128%;
  background: var(--lime);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 0;
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

.hero h1 {
  margin-bottom: var(--s-5);
  max-width: 19ch;
}

.hero h1 em {
  display: block;
  margin-top: var(--s-3);
  font-size: 0.56em;
  font-weight: 400;
  font-style: italic;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.hero__body {
  max-width: 54ch;
}

.hero__body p {
  font-size: var(--t-md);
  line-height: 1.58;
}

.hero__flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: 0;
  max-width: none;
}

.hero__flags li {
  margin: 0;
  padding: 0;
  text-indent: 0;
}

.hero__flags li::before {
  display: none;
}

.hero__updated {
  margin-top: var(--s-5);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (max-width: 780px) {
  .hero::before {
    right: -30%;
    bottom: -20%;
    width: 90%;
    height: 52%;
  }

  .hero h1 {
    max-width: none;
  }
}

/* --- Chips, flags, scores ---------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 12px;
  border-radius: var(--radius-lg);
  background: var(--tint-2);
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.chip--lime {
  background: var(--lime);
}

.chip--ink {
  background: var(--ink);
  color: var(--on-ink);
}

.chip--age {
  background: var(--ink);
  color: var(--lime);
  letter-spacing: 0.04em;
}

.chip--quiet {
  background: transparent;
  padding-left: 0;
  color: var(--ink-2);
  font-weight: 400;
}

.tick,
.cross {
  font-weight: 700;
}

.tick {
  color: var(--lime-deep);
}

.cross {
  color: var(--ink-3);
}

/* --- Credibility stats (overlapping the hero boundary) ----------------- */
.stats {
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--s-6);
  border-radius: var(--radius);
}

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

.stats__grid > div {
  min-width: 0;
}

.stats dt {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink-2);
}

.stats dd {
  margin: var(--s-1) 0 0;
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

.stats__note {
  margin: var(--s-5) 0 0;
  font-size: var(--t-xs);
  color: var(--on-ink-2);
  max-width: 70ch;
}

@media (max-width: 720px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Method strip: three numbered steps -------------------------------- */
.method {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  margin: var(--s-6) 0 0;
  padding: 0;
  max-width: none;
  counter-reset: step;
}

.method li {
  margin: 0;
  padding: var(--s-5) 0 0;
  text-indent: 0;
  background: linear-gradient(var(--lime-deep), var(--lime-deep)) top left / 100% 4px
    no-repeat;
}

.method li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 var(--s-2);
  background: none;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lime-deep);
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}

.method h3 {
  margin-bottom: var(--s-2);
  font-size: var(--t-md);
}

.method p {
  font-size: var(--t-sm);
  color: var(--ink-2);
  max-width: 40ch;
}

@media (max-width: 780px) {
  .method {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

/* --- Comparison table: the centrepiece --------------------------------- */
.ctable-shell {
  background: var(--paper-raised);
  border-radius: var(--radius);
  padding: var(--s-5);
}

/* Table descriptions sit outside the scroll area so a narrow screen never
   cuts them off with the columns. */
.ctable-lede {
  margin: 0 0 var(--s-4);
  max-width: 88ch;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.ctable-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ctable {
  min-width: 880px;
}

.ctable th,
.ctable td {
  padding: var(--s-4) var(--s-3);
}

.ctable tbody td {
  font-size: var(--t-sm);
}

.ctable tbody tr:nth-child(odd) {
  background: var(--tint-1);
}

.ctable thead th:first-child,
.ctable tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
}

.ctable tbody th {
  background: var(--paper-raised);
  font-weight: 700;
  font-size: var(--t-base);
  text-align: left;
  min-width: 132px;
  z-index: 1;
}

.ctable tbody tr:nth-child(odd) th {
  background: #f0f0ea;
}

.ctable tbody th small {
  display: block;
  font-weight: 400;
  color: var(--ink-3);
}

.ctable__score {
  font-size: var(--t-md);
  font-weight: 700;
  white-space: nowrap;
}

.ctable__score span {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--ink-3);
}

.ctable-hint {
  margin: var(--s-3) 0 0;
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.ctable-note {
  margin: var(--s-5) 0 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

@media (min-width: 1000px) {
  .ctable {
    min-width: 0;
  }
  .ctable-hint {
    display: none;
  }
}

/* --- Affiliate disclosure strip ---------------------------------------- */
.disclose {
  background: var(--lime);
  color: var(--ink);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--radius);
}

.disclose p {
  max-width: 84ch;
  font-size: var(--t-sm);
}

.disclose b {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Showcase: ranked list, oversized numerals, ticket-stub cards ------ */
.rank {
  margin: 0;
  padding: 0;
  max-width: none;
  counter-reset: rank;
}

.rank > li {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
  margin: 0 0 var(--s-7);
  padding: 0;
  text-indent: 0;
}

.rank > li:last-child {
  margin-bottom: 0;
}

.rank > li::before {
  counter-increment: rank;
  content: counter(rank, decimal-leading-zero);
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  font-size: clamp(3.25rem, 7vw, 5.25rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}

@media (max-width: 780px) {
  .rank > li {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
}

.stub {
  background: var(--paper-raised);
  border-radius: var(--radius);
  padding: var(--s-6);
}

.stub__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  justify-content: space-between;
}

.stub__id {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
}

.logoplate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 116px;
  height: 60px;
  padding: var(--s-2);
  background: #fff;
  border-radius: var(--radius);
}

.logoplate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logoplate--fallback {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}

.stub__name {
  margin: 0;
  font-size: var(--t-xl);
  letter-spacing: -0.025em;
}

.stub__name + p {
  margin: var(--s-1) 0 0;
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.score {
  flex: none;
  min-width: 116px;
  text-align: right;
}

.score b {
  display: block;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.score span {
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.score__bar {
  width: 100%;
  height: 6px;
  margin-top: var(--s-2);
  background: var(--tint-2);
  border-radius: var(--capsule);
  overflow: hidden;
}

.score__bar i {
  display: block;
  height: 100%;
  background: var(--lime-deep);
}

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

.stub__chips li {
  margin: 0;
  padding: 0;
  text-indent: 0;
}

.stub__chips li::before {
  display: none;
}

.stub__copy {
  margin: var(--s-5) 0 0;
}

.stub__copy p {
  max-width: 74ch;
}

.stub__copy p + p {
  margin-top: var(--s-3);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-5);
  margin: var(--s-5) 0 0;
  padding: var(--s-5) 0 0;
  background: linear-gradient(var(--tint-2), var(--tint-2)) top left / 100% 2px
    no-repeat;
}

.facts div {
  min-width: 0;
}

.facts dt {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.facts dd {
  margin: 2px 0 0;
  font-size: var(--t-sm);
  overflow-wrap: break-word;
}

@media (max-width: 620px) {
  .facts {
    grid-template-columns: 1fr;
  }
}

/* Ticket-stub perforation before the action row */
.perf {
  height: 12px;
  margin: var(--s-5) calc(var(--s-6) * -1) var(--s-5);
  background-image: radial-gradient(
    circle at center,
    var(--tint-2) 0 2.5px,
    transparent 3px
  );
  background-size: 14px 12px;
  background-repeat: repeat-x;
  background-position: center;
}

.stub__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

.stub__legal {
  margin: var(--s-4) 0 0;
  font-size: var(--t-xs);
  color: var(--ink-3);
  max-width: 78ch;
}

/* --- Buttons: capsules with a small uppercase label -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 15px 28px;
  border: 0;
  border-radius: var(--capsule);
  background: var(--lime);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--ink);
  color: var(--lime);
}

.btn--quiet {
  background: var(--tint-2);
}

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

.btn--onink {
  background: var(--lime);
}

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

@media (max-width: 520px) {
  .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Content blocks ---------------------------------------------------- */
.keyfacts {
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--s-6);
  border-radius: var(--radius);
  margin: var(--s-6) 0;
}

.keyfacts h3 {
  color: var(--on-ink);
  font-size: var(--t-md);
}

.keyfacts ul {
  margin: 0;
  max-width: none;
}

.keyfacts li {
  color: var(--on-ink);
}

.keyfacts li::before {
  background: var(--lime);
}

.keyfacts li:last-child {
  margin-bottom: 0;
}

.callout {
  background: var(--tint-1);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--radius);
  margin: var(--s-6) 0;
}

.callout h3 {
  font-size: var(--t-md);
  margin-bottom: var(--s-3);
}

.callout--lime {
  background: var(--tint-lime);
}

.checklist {
  margin: var(--s-5) 0;
}

.checklist li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--s-3);
  padding-left: 0;
  text-indent: 0;
}

.checklist li::before {
  content: "\2713";
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  color: var(--lime-deep);
  font-weight: 700;
  vertical-align: baseline;
}

/* Two-column panel: the judgement on the left, the checkable detail beside it. */
.callout--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6) var(--s-7);
  align-items: start;
}

.callout--split > div > :last-child,
.callout--split .checklist {
  margin-bottom: 0;
}

.callout--split .checklist {
  margin-top: 0;
  max-width: none;
}

@media (max-width: 860px) {
  .callout--split {
    grid-template-columns: 1fr;
  }
}

.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-5);
  margin: var(--s-6) 0 0;
  padding: 0;
  max-width: none;
}

.cardgrid--pairs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 620px) {
  .cardgrid--pairs {
    grid-template-columns: 1fr;
  }
}

.cardgrid > li,
.cardgrid > div {
  margin: 0;
  padding: var(--s-5);
  text-indent: 0;
  background: var(--paper-raised);
  border-radius: var(--radius);
}

.cardgrid > li::before {
  display: none;
}

.cardgrid h3 {
  font-size: var(--t-md);
  margin-bottom: var(--s-2);
}

.cardgrid p {
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.rescard .logoplate {
  width: 100%;
  height: 92px;
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-4);
}

.rescard h3 {
  margin-bottom: var(--s-2);
}

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}

.duo .figure {
  margin-top: 0;
}

@media (max-width: 860px) {
  .duo {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

/* Figures — hard-edged frames with a thin border (deliberate exception) */
.figure {
  margin: var(--s-6) 0;
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ink);
  background: var(--paper-raised);
}

.figure--half {
  max-width: 560px;
}

.figure figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- FAQ: numbered list with oversized numerals ------------------------ */
.faq {
  margin: var(--s-6) 0 0;
  padding: 0;
  max-width: none;
  counter-reset: q;
}

.faq > li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--s-5);
  margin: 0 0 var(--s-6);
  padding: var(--s-5) 0 0;
  text-indent: 0;
  background: linear-gradient(var(--tint-2), var(--tint-2)) top left / 100% 2px
    no-repeat;
}

.faq > li::before {
  counter-increment: q;
  content: counter(q, decimal-leading-zero);
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--lime-deep);
  font-variant-numeric: tabular-nums;
}

.faq h3 {
  margin-bottom: var(--s-3);
  font-size: var(--t-md);
}

.faq__tag {
  display: inline-block;
  margin-bottom: var(--s-2);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 620px) {
  .faq > li {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
}

/* --- Disclaimer -------------------------------------------------------- */
.disclaimer {
  font-size: var(--t-xs);
  color: var(--ink-2);
  max-width: 92ch;
}

/* --- Editorial footer -------------------------------------------------- */
.colophon {
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--s-8) 0 var(--s-7);
}

.colophon a {
  color: var(--on-ink);
}

.colophon__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr);
  gap: var(--s-7);
}

.colophon__statement {
  max-width: 40ch;
}

.colophon__statement .brandmark {
  padding-bottom: var(--s-4);
}

.colophon__statement .brandmark b {
  color: var(--on-ink);
}

.colophon__statement .brandmark__tag {
  color: var(--on-ink-2);
}

.colophon__statement p {
  font-size: var(--t-sm);
  color: var(--on-ink-2);
}

.colophon__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}

.colophon h2 {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: var(--s-4);
}

.colophon ul {
  margin: 0;
  max-width: none;
}

.colophon li {
  margin-bottom: var(--s-2);
  padding-left: 0;
  text-indent: 0;
  font-size: var(--t-sm);
}

.colophon li::before {
  display: none;
}

.colophon li a {
  text-decoration: none;
}

.colophon li a::after {
  content: "\00a0›";
  color: var(--lime);
  font-weight: 700;
}

.colophon li a:hover,
.colophon li a:focus-visible {
  color: var(--lime);
}

.colophon__base {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  background: linear-gradient(var(--on-ink-2), var(--on-ink-2)) top left / 100% 1px
    no-repeat;
  font-size: var(--t-xs);
  color: var(--on-ink-2);
}

.colophon__base p {
  max-width: 96ch;
}

.colophon__base p + p {
  margin-top: var(--s-3);
}

@media (max-width: 900px) {
  .colophon__top {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .colophon__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .colophon__cols {
    grid-template-columns: 1fr;
  }
}

/* --- Age notice + safety strip (fixed, non-blocking) ------------------- */
.agebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--s-3) 0;
}

.agebar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}

.agebar p {
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.45;
  max-width: 74ch;
  color: var(--on-ink);
}

.agebar a {
  color: var(--lime);
}

.agebar a::after {
  color: var(--lime);
}

.agebar__toggle {
  margin-left: auto;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--capsule);
  background: rgba(245, 245, 240, 0.14);
  color: var(--on-ink);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.agebar__toggle:hover {
  background: var(--lime);
  color: var(--ink);
}

.agebar__safety {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-3) 0 0;
  padding: var(--s-3) 0 0;
  background: linear-gradient(rgba(245, 245, 240, 0.18), rgba(245, 245, 240, 0.18))
    top left / 100% 1px no-repeat;
}

.agebar__safety ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  max-width: none;
}

.agebar__safety li {
  margin: 0;
  padding: 0;
  text-indent: 0;
}

.agebar__safety li::before {
  display: none;
}

.agebar__safety > span {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}

.reslink {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 12px 5px 6px;
  border-radius: var(--radius-lg);
  background: rgba(245, 245, 240, 0.1);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--on-ink);
  text-decoration: none;
}

.reslink img {
  width: 22px;
  height: 22px;
  flex: none;
  padding: 2px;
  background: #fff;
  border-radius: 3px;
  object-fit: contain;
}

.reslink:hover,
.reslink:focus-visible {
  background: var(--lime);
  color: var(--ink);
}

.agebar[data-state="collapsed"] .agebar__safety,
.agebar[data-state="collapsed"] .agebar__full {
  display: none;
}

/* --- Cookie consent ---------------------------------------------------- */
.cookiebar {
  position: fixed;
  left: var(--s-4);
  right: var(--s-4);
  bottom: calc(var(--agebar-space) + var(--s-3));
  z-index: 45;
  max-width: 430px;
  padding: var(--s-5);
  background: var(--paper-raised);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(20, 21, 15, 0.22);
}

.cookiebar[hidden] {
  display: none;
}

.cookiebar h2 {
  font-size: var(--t-md);
  margin-bottom: var(--s-2);
}

.cookiebar p {
  font-size: var(--t-sm);
  margin-bottom: var(--s-4);
}

.cookiebar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.cookiebar .btn {
  padding: 12px 20px;
}

@media (max-width: 560px) {
  .cookiebar {
    padding: var(--s-4);
  }

  .cookiebar p {
    font-size: var(--t-xs);
  }

  /* The pinned notice has to stay readable without eating the screen: one row
     of resource links, no logos, tighter type. */
  .agebar {
    padding: var(--s-2) 0;
  }

  .agebar p {
    font-size: 0.75rem;
    line-height: 1.38;
  }

  .agebar__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s-2) var(--s-3);
  }

  .agebar__toggle {
    margin: 0;
  }

  .agebar__safety {
    grid-column: 1 / -1;
  }

  .agebar__safety {
    gap: var(--s-2);
    margin-top: var(--s-2);
    padding-top: var(--s-2);
  }

  .agebar__safety ul {
    gap: var(--s-1);
  }

  .agebar__safety > span {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
  }

  .reslink {
    padding: 4px 8px;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }

  .reslink img {
    display: none;
  }
}

/* --- Back to top ------------------------------------------------------- */
.totop {
  position: fixed;
  right: var(--s-4);
  bottom: calc(var(--agebar-space) + var(--s-3));
  z-index: 42;
  display: none;
  align-items: center;
  gap: var(--s-2);
  padding: 11px 18px;
  border: 0;
  border-radius: var(--capsule);
  background: var(--ink);
  color: var(--lime);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.totop[data-visible="true"] {
  display: inline-flex;
}

.totop:hover {
  background: var(--lime);
  color: var(--ink);
}

@media (max-width: 560px) {
  .totop {
    padding: 9px 14px;
    font-size: 0.625rem;
  }
}

/* --- Page header for inner routes -------------------------------------- */
.pagehead {
  position: relative;
  padding: var(--s-8) 0 var(--s-7);
  overflow: hidden;
}

.pagehead::before {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -46%;
  width: 40%;
  height: 120%;
  background: var(--tint-lime);
  clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%);
}

.pagehead > .wrap {
  position: relative;
  z-index: 1;
}

.pagehead h1 {
  font-size: var(--t-xxl);
  max-width: 26ch;
}

/* Inner routes read as a single letter column: narrower than the homepage
   container so the measure sits comfortably inside it. */
.pagehead ~ .section > .wrap {
  max-width: 1000px;
}

.pagehead .lede {
  margin-top: var(--s-5);
}

.meta-line {
  margin-top: var(--s-5);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Timeline / steps used on content pages ---------------------------- */
.steps {
  margin: var(--s-6) 0;
  padding: 0;
  max-width: none;
  counter-reset: st;
}

.steps > li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s-1) var(--s-4);
  margin-bottom: var(--s-5);
  padding: 0;
  text-indent: 0;
}

.steps > li::before {
  counter-increment: st;
  content: counter(st, decimal-leading-zero);
  display: block;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--lime-deep);
  font-variant-numeric: tabular-nums;
}

.steps > li > * {
  grid-column: 2;
}

.steps h3 {
  font-size: var(--t-md);
  margin-bottom: 0;
}

/* --- Definition tables used on reference pages ------------------------- */
.deflist {
  margin: var(--s-6) 0;
  display: grid;
  gap: var(--s-4);
}

.deflist > div {
  padding-top: var(--s-4);
  background: linear-gradient(var(--tint-2), var(--tint-2)) top left / 100% 2px
    no-repeat;
}

.deflist dt {
  font-weight: 700;
  font-size: var(--t-md);
}

.deflist dd {
  margin: var(--s-2) 0 0;
  max-width: var(--measure);
}