/* Design basis: awesome-design-md-jp / DESCENTE sports direction, BRUTUS editorial hierarchy, YAMAP reading measure. */
@import url("tokens.css?v=sport-20260924");

html,
body {
  overflow-x: clip;
}

html {
  background: var(--color-paper);
  line-break: strict;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  border-block-start: 6px solid var(--color-accent);
  background: var(--color-paper);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  word-break: normal;
  overflow-wrap: anywhere;
  font-kerning: normal;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  color: var(--color-accent-strong);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-ink);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: inherit;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

img,
svg {
  max-width: 100%;
}

.skip-link {
  position: absolute;
  z-index: 5;
  inset-block-start: 0.5rem;
  inset-inline-start: var(--page-gutter);
  transform: translateY(-150%);
  padding: 0.6rem 0.9rem;
  background: var(--color-ink);
  color: var(--color-paper);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header,
.site-main,
.site-footer {
  width: min(var(--page-width), calc(100% - var(--page-gutter) * 2));
  margin-inline: auto;
}

.site-header {
  display: flex;
  min-height: 4.25rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: 0.7rem;
  border-block-end: 2px solid var(--color-ink);
  text-align: start;
}

.brand {
  display: flex;
  min-height: 44px;
  align-items: center;
  flex: 0 0 auto;
  padding: 0;
  color: var(--color-ink);
  text-decoration: none;
}

.brand-logo-window {
  display: block;
  width: clamp(260px, 22vw, 290px);
  aspect-ratio: 3 / 1;
  overflow: visible;
  flex: 0 0 auto;
}

.brand-logo-window img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.desktop-nav ul,
.mobile-nav ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.7rem, 1.3vw, 1.15rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktop-nav a,
.mobile-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.desktop-nav a[aria-current="page"],
.mobile-nav a[aria-current="page"],
.desktop-nav a[aria-current="true"],
.mobile-nav a[aria-current="true"] {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.mobile-nav {
  display: none;
}

.mobile-experience { display: none; }
.desktop-nav .nav-experience { padding-inline: .85rem; background: var(--color-ball); color: var(--color-court); font-weight: 800; }
.hero-secondary { display: inline-flex; align-items: center; min-height: 44px; color: white; font-size: .9rem; font-weight: 700; text-underline-offset: .3em; }
.guide-experience-entry { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem 1.5rem; padding: .7rem 0; border-bottom: 1px solid var(--color-rule); }
.guide-experience-entry p { margin: 0; font-size: .85rem; }
.guide-experience-entry a { font-size: .9rem; }
.finder-switch { display: flex; border-bottom: 1px solid var(--color-rule); gap: 1.5rem; }
.finder-switch a { display: flex; align-items: center; min-height: 48px; padding: .65rem .25rem; border-bottom: 3px solid transparent; color: var(--color-muted); font-size: .9rem; font-weight: 750; text-decoration: none; }
.finder-switch a[aria-current="page"] { color: var(--color-accent-strong); border-bottom-color: var(--color-accent); }
.finder-count { flex: 0 0 auto; color: var(--color-muted); font-size: .85rem; white-space: nowrap; }
.finder-count strong { color: var(--color-court); font-size: 1.6rem; margin-inline: .35rem; }
.finder-freshness { font-size: .8rem; color: var(--color-muted); margin: 0 0 1.5rem; }
.experience-sources > summary { cursor: pointer; min-height: 44px; font-weight: 700; }
.experience-card__body { min-width: 0; }
.experience-card:not(:has(.experience-card__media)) .experience-card__body { grid-column: 1 / -1; }
.experience-card__media .experience-card__photo { margin: 0; aspect-ratio: auto; }
.finder-main .experience-card h3 { max-width: none; }
.finder-main .facility-updates { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 0; border-top: 0; }
.finder-main .facility-updates > div + div { border-top: 0; }
.finder-main .experience-details { margin: .75rem 0 0; border-bottom: 0; }
.finder-main .experience-card__footer { justify-content: flex-start; gap: .5rem 1rem; }
.finder-main .experience-card__footer .button-link { background: var(--color-ball); color: var(--color-court); border-color: var(--color-ball); }
.finder-main .experience-card__footer .button-link:hover { background: var(--color-court); color: white; }

.site-main {
  padding-block: var(--space-xl) var(--space-3xl);
}

.home-main {
  padding-block-start: var(--space-md);
}

.home-hero {
  display: grid;
  align-items: center;
  grid-template-areas: "photo copy";
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.95fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-block-end: 6px solid var(--color-ball);
  background: var(--color-court);
  color: var(--color-on-court);
}

.home-hero__copy {
  grid-area: copy;
  max-width: 30rem;
  align-self: center;
}

.home-hero h1,
.page-heading h1 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 740;
  letter-spacing: normal;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.home-hero h1 {
  max-width: none;
  color: #fff;
  font-size: clamp(2rem, 3.3vw, 2.65rem);
  font-weight: 900;
  line-height: 1.35;
}

.home-hero .mast-caption {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  background: var(--color-ball);
  color: var(--color-ink);
  font-weight: 800;
}

.hero-action {
  margin-block: 1.5rem 0;
}

.hero-action .text-link {
  justify-content: space-between;
  gap: 2rem;
  min-height: 52px;
  padding: 0.65rem 1.1rem;
  background: var(--color-ball);
  color: var(--color-ink);
  font-weight: 800;
  text-decoration: none;
  border-block-end: 3px solid transparent;
}

.hero-action .text-link:hover {
  background: #e7ff89;
  border-block-end-color: var(--color-accent);
}

.home-hero a:focus-visible {
  outline-color: var(--color-ball);
  outline-offset: 5px;
}

.home-hero .hero-note,
.home-hero .hero-photo figcaption,
.home-hero .hero-photo figcaption a {
  color: #cadcd7;
}

.home-hero__lead,
.page-heading__lead {
  max-width: 32rem;
  margin-block: var(--space-md) 0;
  font-size: 1rem;
  line-height: 1.85;
}

.mast-caption {
  margin: 0 0 var(--space-sm);
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 700;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

.button-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-small);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 750;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.button-link:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

.button-link:active {
  transform: translateY(1px);
}

.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-accent-strong);
  font-weight: 700;
  white-space: nowrap;
}

.hero-note,
.source-note {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.hero-note {
  max-width: 32rem;
  margin-block: var(--space-md) 0;
  font-size: 0.8rem;
  line-height: 1.65;
}

.hero-photo {
  grid-area: photo;
  min-width: 0;
  margin: 0;
  overflow: visible;
}

.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-photo figcaption {
  padding: 0.6rem 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.55;
}

.content-section {
  padding-block: var(--space-2xl);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-end: var(--space-md);
}

.section-head h2,
.page-heading h2 {
  max-width: none;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.section-head p {
  max-width: 35rem;
  margin: 0;
}

.home-main .content-section {
  padding-block: clamp(2.6rem, 5vw, 3.7rem);
}

.section-kicker {
  margin: 0 0 0.35rem;
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.guide-list,
.place-list {
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--color-rule);
  list-style: none;
}

.guide-list > li,
.place-list > li {
  border-block-end: 1px solid var(--color-rule);
}

.guide-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 9rem;
  align-items: center;
  gap: var(--space-md);
  min-height: 7.5rem;
  padding-block: 1.1rem;
  color: inherit;
  text-decoration: none;
}

.guide-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4.5rem;
  border-block-end: 5px solid var(--color-ball);
  background: var(--color-court);
}

.guide-number,
.place-number {
  color: var(--color-accent-strong);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.guide-number {
  color: #fff;
  font-family: "Arial Black", "Arial", sans-serif;
  font-size: 2.5rem;
  font-style: italic;
  font-weight: 900;
}

.guide-copy,
.place-copy {
  display: block;
  min-width: 0;
}

.guide-category {
  display: block;
  color: var(--color-accent-strong);
  font-size: 0.78rem;
  font-weight: 650;
}

.guide-title {
  display: block;
  margin-block: 0.15rem 0.25rem;
  color: var(--color-ink);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.5;
}

.guide-excerpt {
  display: block;
  color: var(--color-body);
  font-size: 0.9rem;
  line-height: 1.7;
}

.guide-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  color: var(--color-muted);
  font-size: 0.8rem;
  text-align: end;
}

.guide-row:hover .guide-title,
.place-row:hover .place-name {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.2em;
}

.place-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: var(--space-md);
  min-height: 6.1rem;
  padding-block: 0.9rem;
  color: inherit;
  text-decoration: none;
}

.place-location,
.place-meta {
  display: block;
  color: var(--color-muted);
  font-size: 0.8rem;
}

.place-name {
  display: block;
  margin-block: 0.15rem;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
}

.place-arrow {
  color: var(--color-accent-strong);
  text-align: end;
}

.place-note {
  max-width: 62rem;
  margin-block: var(--space-md) 0;
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.75;
}

.place-note .text-link {
  display: inline;
  min-height: 0;
  margin-inline-start: 0.35rem;
  font-size: inherit;
  white-space: normal;
}

.discovery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0;
  border-block-start: 1px solid var(--color-rule);
  border-inline-start: 1px solid var(--color-rule);
}

.discovery-card {
  display: flex;
  min-height: 13rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: clamp(1.1rem, 3vw, 2rem);
  border-block-end: 1px solid var(--color-rule);
  border-inline-end: 1px solid var(--color-rule);
  color: var(--color-body);
  text-decoration: none;
}

.discovery-card:first-child {
  grid-row: span 2;
  min-height: 26rem;
  background: var(--color-paper-soft);
}

.discovery-card:hover {
  background: var(--color-accent-soft);
  color: var(--color-body);
}

.discovery-card h3 {
  max-width: 20ch;
  margin: 0 0 var(--space-2xs);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.4;
}

.discovery-card p {
  max-width: 39ch;
  margin: 0;
}

.discovery-card__tail {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  color: var(--color-accent-strong);
  font-weight: 750;
}

.card-index {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}

.empty-feature {
  display: grid;
  gap: var(--space-md);
  padding: clamp(1.25rem, 4vw, 2.75rem);
  border: 1px solid var(--color-ink);
  border-inline-start: 0.45rem solid var(--color-accent);
  background: var(--color-paper-soft);
}

.empty-feature h3 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-xl);
}

.empty-feature p {
  max-width: 52rem;
  margin: 0;
}

.resource-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-lg);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.resource-list li {
  padding-block: var(--space-sm);
  border-block-start: 1px solid var(--color-rule);
}

.resource-list a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-weight: 700;
}

.checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist-grid li {
  position: relative;
  padding: var(--space-sm) 0 var(--space-sm) 1.7rem;
  border-block-start: 1px solid var(--color-rule);
}

.checklist-grid li::before {
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-accent-strong);
  content: "—";
  font-weight: 800;
}

.page-heading {
  padding-block: var(--space-md) var(--space-xl);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.page-heading h1 {
  max-width: none;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  text-wrap: balance;
}

.page-heading__lead {
  margin-block-start: var(--space-sm);
}

.article-main {
  width: min(60rem, calc(100% - var(--page-gutter) * 2));
  padding-block-start: var(--space-md);
}

.breadcrumb {
  margin-block-end: var(--space-lg);
  color: var(--color-muted);
  font-size: 0.8rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  margin-inline-end: 0.6rem;
  color: var(--color-rule);
  content: "/";
}

.article-header {
  max-width: var(--reading-width);
  padding-block-end: var(--space-lg);
  border-block-end: 3px solid var(--color-court);
}

.article-category {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  margin: 0 0 var(--space-xs);
  background: var(--color-accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.article-header h1 {
  max-width: none;
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(1.65rem, 2.7vw, 2rem);
  font-weight: 700;
  line-height: 1.45;
  text-wrap: balance;
}

.heading-phrase {
  display: inline-block;
}

.article-deck {
  max-width: 48rem;
  margin-block: var(--space-sm) 0;
  color: var(--color-body);
  font-size: 1.05rem;
  line-height: 1.8;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-block-start: var(--space-sm);
  color: var(--color-muted);
  font-size: 0.8rem;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--reading-width)) minmax(12rem, 13rem);
  align-items: start;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block-start: var(--space-xl);
}

.article-layout > .prose {
  padding-block-start: 0;
}

.article-toc {
  position: sticky;
  inset-block-start: var(--space-md);
  padding-block-start: var(--space-xs);
  border-block-start: 1px solid var(--color-rule);
}

.article-toc h2,
.article-toc nav > p {
  margin: 0 0 var(--space-xs);
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.article-toc ol {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-inline-start: 1.15rem;
}

.article-toc a {
  color: var(--color-body);
  font-size: 0.82rem;
  line-height: 1.55;
  text-decoration: none;
}

.article-toc a:hover {
  color: var(--color-accent-strong);
  text-decoration: underline;
}

.article-photo {
  max-width: 100%;
  margin: var(--space-xl) 0;
}

.article-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.article-photo--gear {
  max-width: 360px;
  margin-inline: auto;
}

.article-photo figcaption {
  margin-block-start: var(--space-xs);
  color: var(--color-muted);
  font-size: 0.75rem;
  line-height: 1.6;
}

.prose {
  max-width: var(--reading-width);
  padding-block-start: var(--space-xl);
}

.site-main:has(> .prose) {
  width: min(var(--reading-width), calc(100% - var(--page-gutter) * 2));
}

.prose > h2:first-child {
  margin-block-start: 0;
}

.prose h2 {
  margin-block: 2.5rem var(--space-sm);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.35;
}

.prose h3 {
  margin-block: 1.65rem var(--space-2xs);
  color: var(--color-ink);
  font-size: var(--text-lg);
}

.prose p,
.prose li {
  max-width: none;
  line-height: 1.85;
}

.prose li + li {
  margin-block-start: 0.5rem;
}

.prose blockquote {
  margin: var(--space-lg) 0;
  padding: var(--space-sm) var(--space-md);
  border-inline-start: 3px solid var(--color-accent);
  background: var(--color-paper-soft);
}

.prose blockquote p {
  margin: 0;
}

.source-box {
  margin-block: var(--space-xl);
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-medium);
  background: var(--color-paper-soft);
}

.source-box h2 {
  margin-block-start: 0;
  font-size: var(--text-xl);
}

.source-box ul {
  margin-block-end: 0;
  padding-inline-start: 1.2rem;
}

.callout {
  margin-block: var(--space-lg);
  padding: var(--space-md);
  border-inline-start: 4px solid var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

.callout > :first-child {
  margin-block-start: 0;
}

.callout > :last-child {
  margin-block-end: 0;
}

.experience-layout {
  display: grid;
  gap: var(--space-2xl);
  padding-block-start: var(--space-xl);
}

.listing-empty {
  padding: var(--space-lg);
  border: 1px solid var(--color-ink);
}

.listing-empty__mark {
  display: grid;
  width: 3rem;
  aspect-ratio: 1;
  place-items: center;
  margin-block-end: var(--space-sm);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
}

.listing-empty h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.listing-empty p {
  max-width: 46rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.coverage-note {
  margin-block: var(--space-xl);
  padding-block: var(--space-md);
  border-block: 1px solid var(--color-rule);
}

.coverage-note h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 780;
  letter-spacing: -0.035em;
}

.coverage-note p {
  max-width: 68ch;
  margin-block: var(--space-2xs) 0;
}

.experience-cards {
  display: grid;
  gap: var(--space-lg);
}

.experience-card {
  padding: clamp(1.25rem, 3vw, 1.8rem);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
}

.experience-card__place {
  margin: 0;
  color: var(--color-accent-strong);
  font-size: var(--text-sm);
  font-weight: 750;
}

.experience-card h3 {
  max-width: 35ch;
  margin: 0.2rem 0 var(--space-md);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.profile-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--space-md) 0 0;
  border-block-start: 1px solid var(--color-rule);
}

.profile-facts > div {
  min-width: 0;
  padding: var(--space-sm) var(--space-xs) var(--space-sm) 0;
  border-block-end: 1px solid var(--color-rule);
}

.profile-facts dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.profile-facts dd {
  margin: 0.15rem 0 0;
  color: var(--color-body);
  font-weight: 650;
  line-height: 1.55;
}

.experience-card__note {
  margin-block: var(--space-sm);
  font-size: var(--text-sm);
}

.experience-card__limitations {
  margin-block: var(--space-sm);
  padding-inline-start: 1.2rem;
  font-size: var(--text-sm);
}

.experience-card .button-link {
  margin-block-start: var(--space-xs);
}

.site-footer {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-xl) var(--space-md);
  border-block-start: 2px solid var(--color-ink);
}

.footer-brand {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.footer-tagline,
.footer-meta {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  white-space: nowrap;
}

.footer-meta {
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-rule);
}

@media (min-width: 60rem) {
  .home-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.9fr);
  }

  .experience-layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: start;
  }

  .listing-empty {
    position: sticky;
    inset-block-start: var(--space-md);
  }

  .site-footer {
    grid-template-columns: minmax(14rem, 1fr) auto;
    align-items: end;
  }

  .footer-links {
    justify-content: flex-end;
  }

  .footer-meta {
    grid-column: 1 / -1;
  }
}

@media (max-width: 60rem) {
  .mobile-experience { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .5rem .75rem; margin-left: auto; background: var(--color-ball); color: var(--color-court); text-decoration: none; white-space: nowrap; font-size: .8rem; font-weight: 800; }
  .site-header .mobile-nav { margin-left: 0; }
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-header {
    gap: var(--space-sm);
  }

  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    display: block;
    position: relative;
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  .mobile-nav summary {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding-inline: 0.25rem;
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
  }

  .mobile-nav summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav summary::after {
    margin-inline-start: 0.45rem;
    color: var(--color-accent-strong);
    content: "+";
  }

  .mobile-nav[open] summary::after {
    content: "−";
  }

  .mobile-nav ul {
    position: absolute;
    z-index: 3;
    inset-block-start: calc(100% + 0.25rem);
    inset-inline-end: 0;
    display: grid;
    min-width: min(17rem, calc(100vw - 2rem));
    gap: 0;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-rule);
    background: var(--color-surface);
    text-align: start;
  }

  .mobile-nav li + li {
    border-block-start: 1px solid var(--color-rule);
  }

  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-toc {
    position: static;
    grid-row: 1;
    margin-block-end: var(--space-xs);
  }

  .article-layout > .prose {
    grid-row: 2;
  }
}

@media (max-width: 64rem) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-toc {
    position: static;
    grid-row: 1;
    margin-block-end: var(--space-xs);
  }

  .article-layout > .prose {
    grid-row: 2;
  }
}

@media (max-width: 52rem) {
  .home-hero {
    grid-template-areas: "copy" "photo";
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .home-hero__copy {
    max-width: 42rem;
  }
}

@media (max-width: 40rem) {
  .site-header {
    display: grid;
    grid-template-areas: "brand brand" "experience menu";
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem 0.75rem;
  }

  .site-header > .brand { grid-area: brand; }
  .site-header > .mobile-experience { grid-area: experience; justify-self: start; margin-left: 0; }
  .site-header > .mobile-nav { grid-area: menu; justify-self: end; }
  .brand-logo-window { width: clamp(210px, 61.5vw, 240px); }
  .finder-switch { gap: 1rem; }
  .finder-switch a { font-size: .79rem; }
  .finder-header h1 { font-size: 1.5rem; }
  .finder-header p { font-size: .85rem; margin-top: .5rem; }
  .finder-header .finder-count { margin-top: .4rem; }
  .finder-count strong { font-size: 1.1rem; }
  .experience-card__media .experience-card__photo { width: auto; max-width: 100%; max-height: 150px; }
  .finder-main .facility-updates { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .finder-main .facility-updates > div { padding: .5rem 0; }
  .finder-main .facility-updates > div + div { border-top: 1px solid var(--color-rule); }
  .finder-main .experience-card__footer .button-link { width: 100%; white-space: normal; font-size: .9rem; }
  .finder-main .profile-facts dd { font-size: .8rem; }
  .site-header {
    gap: 0.5rem;
  }

  .home-hero {
    padding: 1rem;
  }

  .hero-action .text-link {
    width: 100%;
    gap: 0.75rem;
    padding-inline: 0.9rem;
  }

  .mobile-nav {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }

  .mobile-nav summary {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding-inline: 0.8rem;
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
  }

  .mobile-nav summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav summary::after {
    margin-inline-start: 0.45rem;
    color: var(--color-accent-strong);
    content: "+";
  }

  .mobile-nav[open] summary::after {
    content: "−";
  }

  .mobile-nav ul {
    inset-inline-end: 0;
    inset-inline-start: auto;
    min-width: min(17rem, calc(100vw - 2rem));
    transform: none;
  }

  .mobile-nav li + li {
    border-block-start: 1px solid var(--color-rule);
  }

  .home-hero h1,
  .page-heading h1 {
    font-size: clamp(1.75rem, 8vw, 2.15rem);
  }

  .hero-photo {
    grid-area: photo;
  }

  .home-hero__copy {
    grid-area: copy;
  }

  .discovery-grid,
  .resource-list,
  .checklist-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .discovery-card:first-child {
    grid-row: auto;
    min-height: 16rem;
  }

  .discovery-card {
    min-height: 12rem;
  }

  .profile-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-row {
    grid-template-columns: 2.8rem minmax(0, 1fr);
    gap: var(--space-sm);
    padding-block: var(--space-md);
  }

  .guide-number {
    width: 2.8rem;
    height: 3.5rem;
    font-size: 1.8rem;
  }

  .guide-meta {
    grid-column: 2;
    justify-content: flex-start;
    margin-block-start: -0.45rem;
  }

  .place-row {
    grid-template-columns: 2rem minmax(0, 1fr) 1rem;
    gap: var(--space-sm);
  }

  .actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .button-link {
    width: 100%;
  }

  .footer-links {
    gap: 0 var(--space-sm);
  }
}

@media (hover: hover) and (pointer: fine) {
  .button-link {
    transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }

  .discovery-card {
    transition: background-color var(--dur-short) var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}

/* Lower pages: guides, verified venue profiles, and reference policies. */
.photo-credit {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.75rem;
  line-height: 1.7;
}
.photo-credit a { color: inherit; }

.guide-sequence { margin-block: -0.25rem 1.5rem; }
.guide-sequence ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--color-rule);
}
.guide-sequence a {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  min-height: 52px;
  padding: 0.65rem 1rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border-block-end: 4px solid transparent;
}
.guide-sequence a[aria-current="page"] {
  color: var(--color-ink);
  border-block-end-color: var(--color-accent);
  background: var(--color-paper-soft);
}
.guide-sequence a:hover { color: var(--color-accent-strong); }
.guide-sequence__number { font-family: "Arial Black", sans-serif; font-style: italic; }
.article-header.guide-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem;
  align-items: center;
  gap: 2rem;
  max-width: none;
  padding: 2rem;
  border-block-end: 5px solid var(--color-ball);
  color: var(--color-on-court);
  background: var(--color-court);
}
.guide-header h1 { color: #fff; font-weight: 900; }
.guide-header .article-category {
  color: var(--color-ink);
  background: var(--color-ball);
}
.guide-header .article-deck { color: var(--color-on-court); font-size: 1rem; }
.guide-header .article-meta,
.guide-header .article-meta a { color: #cadcd7; }
.guide-header a:focus-visible { outline-color: var(--color-ball); }
.guide-header__side { border-inline-start: 1px solid #628382; padding-inline-start: 1.5rem; }
.guide-step {
  display: block;
  color: var(--color-ball);
  font-family: "Arial Black", "Arial", sans-serif;
  font-size: 5.5rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}
.guide-step-label { margin: 0.65rem 0 0; font-size: 0.85rem; }
.guide-page .article-toc { border-block-start: 3px solid var(--color-accent); }
.preflight-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: preflight;
}
.preflight-list li {
  position: relative;
  padding: 1rem 0 1rem 3rem;
  border-block-end: 1px solid var(--color-rule);
  counter-increment: preflight;
}
.preflight-list li::before {
  position: absolute;
  inset-inline-start: 0;
  content: counter(preflight, decimal-leading-zero);
  font-family: "Arial Black", "Arial", sans-serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--color-accent);
}
.preflight-label { display: block; color: var(--color-ink); font-weight: 800; }
.rule-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 1.5rem 0;
  margin: 1.5rem 0;
  border-block: 3px solid var(--color-court);
  list-style: none;
}
.prose .rule-flow li { display: flex; align-items: flex-start; gap: 1rem; margin: 0; }
.rule-flow__number {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--color-accent);
  font-family: "Arial Black", "Arial", sans-serif;
  font-size: 2rem;
  font-style: italic;
  line-height: 1.3;
}
.rule-flow strong { color: var(--color-ink); }
.rule-flow p { margin: 0.3rem 0 0; font-size: 0.9rem; }
.gear-intro { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; gap: 1.5rem; margin-block: 1.5rem 2rem; }
.gear-intro__copy > p:first-child { margin-block-start: 0; }
.gear-intro .article-photo { width: 100%; margin: 0; }
.next-guide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-block-start: 3rem;
  padding: 1.5rem 0;
  border-block: 2px solid var(--color-court);
}
.next-guide p,
.next-guide > span { margin: 0; color: var(--color-muted); font-size: 0.85rem; }
.next-guide a { font-weight: 800; text-underline-offset: 0.25em; }

.policy-header { max-width: none; padding-block: 1.5rem; border-block-start: 4px solid var(--color-accent); border-block-end: 0; }
.policy-header .article-deck { max-width: 42.5rem; }
.policy-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 1.25rem 0;
  border-block: 1px solid var(--color-rule);
}
.policy-summary > div { padding-inline: 1.25rem; border-inline-start: 1px solid var(--color-rule); }
.policy-summary > div:first-child { padding-inline-start: 0; border: 0; }
.policy-summary dt { color: var(--color-accent-strong); font-size: 0.85rem; font-weight: 800; }
.policy-summary dd { margin: 0.35rem 0 0; font-size: 0.9rem; }
.policy-section { padding-block: 1.5rem; border-block-end: 1px solid var(--color-rule); }
.policy-section:first-child { padding-block-start: 0; }
.policy-section h2 { margin-block-start: 0; }
.policy-section p:last-child { margin-block-end: 0; }

.finder-main { padding-block-start: 1rem; }
.finder-main .breadcrumb { margin-bottom: .5rem; }
.finder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
}
.finder-header h1 { margin: 0; color: var(--color-ink); font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.45; font-weight: 900; }
.finder-header p:last-child { max-width: 40rem; margin-block-end: 0; }
.finder-coverage { display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; padding: 1.25rem; color: var(--color-on-court); background: var(--color-court); font-size: 0.8rem; }
.finder-coverage strong { color: var(--color-ball); font-size: 2rem; }
.finder-main .experience-layout { display: block; padding-block-start: 0; }
.finder-main .coverage-note { margin: 2rem 0 1.5rem; padding: 0; border: 0; }
.finder-main .coverage-note p { max-width: none; font-size: 0.9rem; }
.finder-main .experience-cards { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.finder-main .experience-card { display: grid; grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 2fr); align-items: start; gap: 1.5rem; border-radius: 0; border: 0; border-block-start: 3px solid var(--color-accent); padding: 1.25rem 0; scroll-margin-top: 1rem; }
.experience-card__header { display: flex; align-items: flex-start; gap: 1rem; }
.experience-card__venue-note { margin: 0.75rem 0 0; color: var(--color-body); font-size: 0.85rem; line-height: 1.7; }
.experience-card__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--color-paper-soft); margin-block-end: 1.25rem; }
.place-row--photo { grid-template-columns: 12rem minmax(0, 1fr) 2rem; gap: 1.5rem; padding-block: 1.25rem; }
.place-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--color-paper-soft); }
.venue-index { flex: 0 0 2rem; white-space: nowrap; font-family: "Arial Black", "Arial", sans-serif; font-size: 1.6rem; font-style: italic; color: var(--color-accent); line-height: 1.4; }
.finder-main .experience-card h3 { margin-block-end: 0; font-size: 1.25rem; }
.finder-main .profile-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .75rem; }
.finder-main .profile-facts > div { padding-block: 0.5rem; }
.finder-main .profile-facts dd { margin: 0; font-size: 0.9rem; }
.experience-details { border-block: 1px solid var(--color-rule); margin-block: 0.25rem 1.25rem; }
.experience-details summary { padding-block: 0.75rem; cursor: pointer; font-weight: 700; font-size: 0.9rem; }
.experience-card__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-block-start: auto; }
.experience-card__footer .source-note { margin: 0; font-size: 0.75rem; }
.finder-main .experience-card .button-link { margin: 0; width: auto; }

@media (max-width: 55rem) {
  .article-header.guide-header { grid-template-columns: minmax(0, 1fr) 6rem; gap: 1.25rem; padding: 1.5rem; }
  .guide-header__side { padding-inline-start: 1rem; }
  .guide-step { font-size: 4rem; }
  .guide-step-label { font-size: 0.75rem; }
  .finder-header { padding: 1.25rem 0; }
  .finder-main .experience-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .place-row--photo { grid-template-columns: 7rem minmax(0, 1fr) 0.8rem; gap: 0.75rem; }
  .guide-sequence a { gap: 0.35rem; padding: 0.65rem 0.25rem; font-size: 0.75rem; }
  .article-header.guide-header { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.25rem; }
  .guide-header__side { display: none; }
  .guide-step { font-size: 2rem; }
  .guide-step-label { margin: 0; }
  .guide-header h1 { font-size: 1.5rem; }
  .guide-header .article-deck { font-size: 0.95rem; }
  .rule-flow { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .gear-intro { grid-template-columns: minmax(0, 1fr); }
  .gear-intro .article-photo { max-width: 19rem; margin-inline: auto; }
  .next-guide { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
  .policy-summary { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  .policy-summary > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.75rem; padding: 0; border: 0; }
  .policy-summary dd { margin: 0; }
  .finder-header { display: block; padding: 1rem 0; }
  .finder-coverage { padding: 1rem; gap: 0.1rem; }
  .finder-coverage strong { font-size: 1.5rem; }
  .finder-main .experience-card { grid-template-columns: 6rem minmax(0, 1fr); padding: 1rem 0; gap: .75rem; }
  .finder-main .experience-card__body { display: contents; }
  .finder-main .experience-card__media { grid-column: 1; grid-row: 1; }
  .finder-main .experience-card__header { grid-column: 2; grid-row: 1; }
  .finder-main .experience-card:not(:has(.experience-card__media)) .experience-card__header { grid-column: 1 / -1; }
  .finder-main .experience-card__header .venue-index { display: none; }
  .finder-main .experience-card h3 { font-size: 1.05rem; }
  .finder-main .experience-card__venue-note,
  .finder-main .profile-facts,
  .finder-main .facility-updates,
  .finder-main .experience-card__footer,
  .finder-main .experience-details { grid-column: 1 / -1; margin-top: 0; }
  .finder-main .experience-card__place { font-size: .75rem; }
  .finder-main .profile-facts dd { font-size: .8rem; }
}
/* Nationwide directory: compact editorial rows with practical sports filters. */
.directory-main { padding-bottom: 4rem; }
.directory-hero { display: grid; grid-template-columns: 1fr 15rem; gap: 2rem; align-items: center; background: var(--color-court); color: white; padding: 1.5rem 2rem; border-bottom: 6px solid var(--color-ball); }
.directory-hero .mast-caption { color: var(--color-ball); }
.directory-hero h1 { color: white; font-size: clamp(1.65rem, 3vw, 2.3rem); line-height: 1.4; letter-spacing: -.025em; margin: .5rem 0 .8rem; }
.directory-lead { color: #e1ede9; font-size: 1rem; line-height: 1.9; margin: 0; }
.directory-tally { border-left: 1px solid #5b7c76; padding-left: 2rem; padding-bottom: .3rem; }
.directory-tally p { color: #e1ede9; margin: 0 0 .7rem; font-size: .85rem; }
.directory-tally p:first-child { display: flex; align-items: baseline; gap: .75rem; }
.directory-tally strong { font-size: 2.6rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--color-ball); }
.directory-tally a { font-size: .8rem; color: white; text-underline-offset: .35em; }
.directory-intro { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.2rem 0 1.5rem; }
.directory-intro p { font-size: .85rem; line-height: 1.8; max-width: 48rem; margin: 0; }
.directory-intro a { white-space: nowrap; font-size: .85rem; }
.banner-preview { margin: 2.5rem auto; max-width: 60rem; scroll-margin-top: 6rem; }
.banner-preview__label, .banner-preview__note { margin: .5rem 0; color: var(--color-body); font-size: .75rem; line-height: 1.7; }
.banner-preview__creative { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.6rem 2rem; background: var(--color-court); color: white; border-left: 6px solid var(--color-ball); text-decoration: none; }
.banner-preview__creative:hover { color: white; background: #184b47; }
.banner-preview__creative:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.banner-preview__copy { display: grid; gap: .4rem; }
.banner-preview__category { color: var(--color-ball); font-size: .8rem; font-weight: 700; }
.banner-preview__copy strong { font-size: clamp(1.2rem, 2.5vw, 1.75rem); line-height: 1.5; }
.banner-preview__cta { flex-shrink: 0; padding: .7rem 1rem; background: var(--color-ball); color: var(--color-court); font-size: .85rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 600px) {
  .banner-preview__creative { align-items: flex-start; flex-direction: column; gap: 1rem; padding: 1.3rem; }
}
.directory-layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 3rem; align-items: start; }
.directory-filters { background: var(--color-paper-soft); padding: 1.3rem; border-top: 4px solid var(--color-accent); }
.directory-filters h2 { font-size: 1.15rem; margin: 0 0 1.25rem; }
.directory-filters form > label:not(.equipment-checkbox) { display: block; font-size: .8rem; font-weight: 700; margin: 1rem 0 .4rem; }
.directory-filters input[type="search"], .directory-filters select { display: block; width: 100%; min-width: 0; height: 2.8rem; padding: .55rem; border: 1px solid #8ca2a9; background: white; border-radius: 0; font: inherit; font-size: .8rem; color: var(--color-ink); }
.directory-filters input[type="search"] { font-size: 1rem; }
.directory-filters input::placeholder { font-size: .72rem; color: var(--color-muted); }
.equipment-checkbox { display: flex; align-items: center; gap: .55rem; padding: 1.2rem 0; font-size: .85rem; font-weight: 700; cursor: pointer; }
.equipment-checkbox input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-accent); }
.directory-reset, .directory-empty button { min-height: 2.75rem; padding: .5rem .8rem; background: white; border: 1px solid var(--color-ink); color: var(--color-ink); font: inherit; font-size: .8rem; cursor: pointer; }
.directory-reset { width: 100%; }
.filter-hint { margin: 1rem 0 0; font-size: .73rem; line-height: 1.8; color: var(--color-muted); }
.directory-results__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 3px solid var(--color-ink); padding-bottom: .8rem; }
.directory-results__head h2 { font-size: 1.45rem; margin: 0; }
.directory-results__head p { font-size: .85rem; font-weight: 700; margin: 0; }
.directory-result-context { margin: .7rem 0 1.5rem; font-size: .8rem; color: var(--color-muted); overflow-wrap: anywhere; }
.facility-region { margin-bottom: 2.5rem; }
.facility-region > h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: .65rem .9rem; font-size: 1rem; background: var(--color-court); color: white; }
.facility-region > h3 span { font-size: .75rem; color: var(--color-ball); }
.facility-prefecture { border-bottom: 1px solid var(--color-rule); scroll-margin-top: 6rem; }
.facility-prefecture > summary { display: block; padding: .95rem 1rem; cursor: pointer; list-style: none; }
.facility-prefecture > summary::-webkit-details-marker { display: none; }
.facility-prefecture > summary:hover { background: var(--color-paper-soft); }
.facility-prefecture > summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.facility-prefecture > summary h4 { display: flex; align-items: center; gap: 1rem; margin: 0; font-size: 1rem; color: var(--color-ink); line-height: 1.6; }
.facility-prefecture [data-prefecture-count] { margin-left: auto; font-size: .8rem; font-weight: 400; color: var(--color-body); white-space: nowrap; }
.prefecture-toggle { position: relative; flex: 0 0 1rem; width: 1rem; height: 1rem; color: var(--color-accent-strong); }
.prefecture-toggle::before, .prefecture-toggle::after { content: ''; position: absolute; background: currentColor; }
.prefecture-toggle::before { width: 2px; height: 12px; left: 7px; top: 2px; }
.prefecture-toggle::after { height: 2px; width: 12px; left: 2px; top: 7px; }
.facility-prefecture[open] > summary { background: var(--color-paper-soft); box-shadow: inset 3px 0 var(--color-accent); }
.facility-prefecture[open] > summary .prefecture-toggle::before { display: none; }
.prefecture-facilities { padding: 0 1rem; }
.prefecture-facilities > .facility-row:last-child { border-bottom: 0; }
.prefecture-pending { margin: 0; padding: 1rem 0 1.3rem; font-size: .85rem; line-height: 1.8; }
.facility-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding: 1.4rem .25rem; border-bottom: 1px solid var(--color-rule); scroll-margin-top: 6rem; }
.facility-row__main { min-width: 0; flex: 1; }
.facility-row__main:has(.facility-row__media) { display: grid; grid-template-columns: 12rem minmax(0, 1fr); column-gap: 1.4rem; align-items: start; }
.facility-row__main:has(.facility-row__media) > :not(.facility-row__media) { grid-column: 2; }
.facility-row__media { width: min(100%, 30rem); margin: 0 0 1.25rem; }
.facility-row__main > .facility-row__media { grid-column: 1; grid-row: 1 / span 4; }
.facility-row__photo { display: block; width: 100%; height: auto; max-height: 21rem; object-fit: contain; object-position: left center; }
.facility-photo-credit { font-size: .7rem; line-height: 1.6; margin-top: .35rem; color: var(--color-muted); }
.facility-photo-credit a { color: inherit; }
.facility-location { margin: 0 0 .4rem; color: var(--color-muted); font-size: .75rem; font-weight: 700; }
.facility-row h5 { margin: 0 0 .8rem; color: var(--color-ink); font-size: 1.15rem; line-height: 1.6; overflow-wrap: anywhere; }
.facility-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem .7rem; padding: 0; margin: 0 0 .85rem; }
.facility-tags li { font-size: .7rem; line-height: 1.6; color: var(--color-accent-strong); font-weight: 700; padding: .1rem .45rem; background: var(--color-paper-soft); }
.facility-description { margin: 0; font-size: .85rem; line-height: 1.8; }
.facility-official { white-space: nowrap; font-size: .8rem; line-height: 1.5; font-weight: 700; padding: .7rem .8rem; border: 1px solid var(--color-accent); color: var(--color-accent-strong); text-decoration: none; margin-top: 1.6rem; min-height: 2.75rem; }
.facility-official:hover { background: var(--color-accent); color: white; }
.facility-details { margin-top: .65rem; font-size: .8rem; }
.facility-details summary { display: list-item; cursor: pointer; color: var(--color-accent-strong); font-weight: 700; padding: .4rem 0; }
.facility-details dl { margin: .75rem 0; border-top: 1px solid var(--color-rule); }
.facility-details dl > div { display: grid; grid-template-columns: 4rem 1fr; gap: .7rem; padding: .65rem 0; border-bottom: 1px solid var(--color-rule); }
.facility-details dt { font-weight: 700; }
.facility-details dd { margin: 0; line-height: 1.8; }
.facility-sources { margin: .6rem 0; padding-left: 1.1rem; }
.facility-sources a { overflow-wrap: anywhere; }
.directory-empty { padding: 2rem; background: var(--color-paper-soft); }
.directory-empty h3 { margin: 0; font-size: 1.05rem; }
.directory-empty p { font-size: .9rem; }
.directory-main [hidden] { display: none !important; }
.directory-coverage { margin-top: 3rem; padding-top: 2.5rem; border-top: 3px solid var(--color-ink); }
.coverage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
.coverage-region h3 { color: var(--color-accent-strong); font-size: 1rem; margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 2px solid var(--color-accent); }
.coverage-region ul { margin: 0; padding: 0; list-style: none; }
.coverage-region a { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; font-size: .85rem; text-decoration: none; color: var(--color-ink); border-bottom: 1px solid var(--color-rule); }
.coverage-region a:hover { color: var(--color-accent-strong); text-decoration: underline; }
.coverage-region span { font-size: .75rem; color: var(--color-muted); }
.directory-guide { margin-top: 3.5rem; background: var(--color-paper-soft); padding: 2rem; }
.directory-guide h2 { font-size: 1.4rem; margin: 0 0 1.5rem; }
.directory-guide dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.directory-guide dt { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.directory-guide dd { font-size: .85rem; line-height: 1.9; margin: 0; }
.directory-guide > p { border-top: 1px solid var(--color-rule); padding-top: 1rem; margin: 1.75rem 0 0; font-size: .8rem; line-height: 1.8; }
.national-entry { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; margin-top: 3rem; padding: 2rem; border-left: 6px solid var(--color-ball); background: var(--color-court); color: white; }
.national-entry h2 { color: white; margin: .4rem 0 1rem; font-size: 1.65rem; }
.national-entry .section-kicker { color: var(--color-ball); }
.national-entry p { font-size: .9rem; color: #e1ede9; margin: 0; line-height: 1.9; }
.national-entry a { white-space: nowrap; color: var(--color-court); font-size: .9rem; font-weight: 700; text-decoration: none; background: var(--color-ball); padding: .9rem 1.25rem; }
.facility-discovery-link { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.25rem; background: var(--color-paper-soft); border-left: 4px solid var(--color-accent); margin: 1.5rem 0; }
.facility-discovery-link p { margin: 0; font-size: .9rem; }
.facility-discovery-link a { white-space: nowrap; font-size: .85rem; font-weight: 700; }
.facility-updates { margin-top: 1rem; border-top: 1px solid var(--color-rule); font-size: .82rem; line-height: 1.8; }
.facility-row__main:has(.facility-row__media) > .facility-updates { grid-column: 1 / -1; }
.facility-updates > div { padding: .75rem 0; }
.facility-updates > div + div { border-top: 1px solid var(--color-rule); }
.facility-updates p { margin: .2rem 0; }
.facility-updates [hidden] { display: none !important; }
.update-label { font-size: .75rem; color: var(--color-court); font-weight: 800; }
.facility-updates .update-meta { font-size: .7rem; color: var(--color-muted); }
.booking-link { display: inline-block; margin-top: .45rem; font-weight: 700; text-underline-offset: .25em; }
.availability-slots { margin-top: .5rem; }
.availability-slots summary { display: list-item; color: var(--color-accent-strong); cursor: pointer; padding: .3rem 0; }
.availability-slots ul { list-style: none; padding: 0; margin: .5rem 0; }
.availability-slots li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .2rem 1rem; padding: .4rem 0; border-bottom: 1px solid var(--color-rule); }
.availability-slots strong { color: var(--color-court); font-size: .75rem; }
.daily-update-note { font-size: .8rem; line-height: 1.8; color: var(--color-body); padding: .85rem 1rem; border-left: 3px solid var(--color-accent); background: var(--color-paper-soft); }
@media (max-width: 900px) {
  .directory-hero { grid-template-columns: 1fr 14rem; gap: 2rem; }
  .directory-tally { padding-left: 1.5rem; }
  .directory-layout { grid-template-columns: 13.5rem minmax(0, 1fr); gap: 1.5rem; }
  .facility-row { display: block; }
  .facility-official { display: inline-flex; gap: 1rem; margin-top: .7rem; }
  .coverage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .directory-intro { display: block; }
  .directory-intro a { display: inline-block; margin-top: .8rem; }
}
@media (max-width: 640px) {
  .directory-hero { display: block; padding: 1.1rem; }
  .directory-hero h1 { font-size: 1.65rem; }
  .directory-lead { font-size: .85rem; }
  .directory-lead br { display: none; }
  .directory-tally { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .85rem; padding: .75rem 0 0; border-left: 0; border-top: 1px solid #5b7c76; }
  .directory-tally strong { font-size: 1.8rem; }
  .directory-tally p { margin: 0; font-size: .75rem; }
  .directory-tally p:first-child { margin-bottom: 0; }
  .directory-layout { display: block; }
  .directory-filters { margin-bottom: 2rem; }
  .directory-filters form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .directory-filters form > * { grid-column: 1 / -1; }
  .directory-filters select { font-size: 1rem; }
  .directory-results__head h2 { font-size: 1.3rem; }
  .directory-results__head p { font-size: .75rem; }
  .facility-row h5 { font-size: 1.1rem; }
  .facility-row__main:has(.facility-row__media) { display: block; }
  .coverage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .directory-guide { padding: 1.4rem; }
  .directory-guide h2 { font-size: 1.2rem; }
  .directory-guide dl { display: block; }
  .directory-guide dl > div + div { margin-top: 1.25rem; }
  .national-entry { display: block; padding: 1.5rem; }
  .national-entry h2 { font-size: 1.35rem; }
  .national-entry a { display: inline-block; margin-top: 1.4rem; }
  .facility-discovery-link { display: block; }
  .facility-discovery-link a { display: inline-block; margin-top: .6rem; }
}

@media (max-width: 360px) {
  .finder-switch { gap: .5rem; }
  .finder-switch a { font-size: .72rem; }
}

/* Editorial hub: a feature and a news desk, followed by distinct reading formats. */
.journal-main { padding-block: 2.3rem 0; }
.journal-header h1 { margin: .35rem 0 .55rem; font-size: clamp(1.8rem, 3vw, 2.55rem); line-height: 1.4; font-weight: 900; }
.journal-header > p:last-child { margin: 0; font-size: 1rem; }
.mobile-break { display: none; }
.journal-sections { display: flex; gap: 2rem; margin-block: 1.4rem 2rem; border-bottom: 2px solid var(--color-ink); }
.journal-sections a { display: inline-flex; align-items: center; min-height: 48px; color: var(--color-ink); font-weight: 800; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.journal-sections a:hover { border-bottom-color: var(--color-accent); }
.journal-opening { display: grid; grid-template-columns: 1.03fr 1fr; gap: 2.75rem; align-items: start; }
.journal-feature { background: var(--color-court); color: white; }
.journal-feature__image { display: block; }
.journal-feature img { display: block; width: 100%; height: auto; }
.journal-feature__copy { padding: 1.5rem 1.8rem 1.8rem; }
.journal-feature .section-kicker { color: var(--color-ball); }
.journal-feature h2 { margin-block: .6rem; font-size: clamp(1.7rem, 2.2vw, 2rem); line-height: 1.45; }
.journal-feature a { color: inherit; text-decoration: none; }
.journal-feature .text-link { color: var(--color-ball); }
.journal-feature p:not(.section-kicker) { font-size: .95rem; margin-block: .7rem 1.1rem; }
.journal-section-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: .7rem; border-bottom: 3px solid var(--color-ink); padding-bottom: .65rem; }
.journal-section-head h2 { margin: 0; font-size: 1.55rem; font-weight: 900; }
.journal-section-head > span { color: var(--color-muted); font-size: .8rem; }
.journal-section-head > a { font-size: .85rem; font-weight: 700; }
.news-item { padding-block: 1rem 1.1rem; border-bottom: 1px solid var(--color-rule); }
.journal-meta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 .4rem; font-size: .76rem; font-weight: 700; }
.journal-meta > span { color: var(--color-accent-strong); }
.journal-meta time { color: var(--color-muted); font-weight: 500; }
.news-item h3 { margin: .2rem 0 .55rem; font-size: 1.08rem; line-height: 1.65; }
.news-item h3 a { color: var(--color-ink); text-decoration: none; }
.news-item h3 a:hover, .journal-feature h2 a:hover, .gear-feature h3 a:hover { text-decoration: underline; text-underline-offset: .2em; }
.news-item p { font-size: .85rem; line-height: 1.8; margin: 0 0 .6rem; }
.news-source { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .73rem; color: var(--color-muted); }
.news-source .text-link { font-size: .76rem; }
.journal-block { margin-top: 3.5rem; scroll-margin-top: 1rem; }
.journal-intro { margin-block: 1rem 1.5rem; font-size: .95rem; }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; }
.youtube-player { width: 100%; min-width: 0; background: #111; }
.youtube-player iframe { display: block; width: 100%; height: auto; min-height: 200px; aspect-ratio: 16 / 9; border: 0; }
.blog-article > .youtube-player { max-width: 56rem; margin: 0 auto 1rem; }
.video-item .journal-meta { margin-top: 1rem; }
.video-item h3 { font-size: 1.2rem; line-height: 1.65; margin: .5rem 0; }
.video-item h3 a { color: var(--color-ink); text-decoration: none; }
.video-item > p:not(.journal-meta) { margin: .6rem 0; font-size: .9rem; }
.video-links { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .8rem; font-weight: 700; }
.video-links a { display: inline-flex; min-height: 40px; align-items: center; }
.journal-footnote { margin: 1rem 0 0; font-size: .77rem; color: var(--color-muted); }
.journal-more { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; min-height: 48px; margin-top: 1.1rem; padding: .6rem 0; border-bottom: 1px solid var(--color-rule); color: var(--color-accent-strong); font-size: .9rem; font-weight: 750; text-decoration: none; }
.journal-more:hover { text-decoration: underline; text-underline-offset: .25em; }
.journal-more > span { font-size: 1.2rem; }
.archive-main { max-width: 62rem; }
.archive-header { padding: 1rem 0 1.2rem; }
.archive-header h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: .4rem 0 .8rem; }
.archive-header > p:last-child { margin: 0; max-width: 45rem; line-height: 1.8; }
.archive-categories { display: flex; gap: 1.7rem; border-bottom: 1px solid var(--color-rule); }
.archive-categories a { display: flex; align-items: center; min-height: 48px; padding: .7rem .2rem; border-bottom: 3px solid transparent; color: var(--color-muted); font-size: .95rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.archive-categories a[aria-current="page"] { color: var(--color-accent-strong); border-bottom-color: var(--color-accent); }
.archive-list-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 .6rem; }
.archive-list-head p { margin: 0; font-size: .85rem; }
.archive-list-head strong { font-size: 1.15rem; margin-right: .25rem; }
.archive-list-head > span { color: var(--color-muted); font-size: .8rem; }
.archive-list { border-top: 3px solid var(--color-court); }
.archive-item { padding: 1.8rem 0; border-bottom: 1px solid var(--color-rule); }
.archive-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .8rem; color: var(--color-muted); }
.archive-meta > :first-child { color: var(--color-accent-strong); font-weight: 700; }
.archive-item h2 { font-size: clamp(1.15rem, 2.7vw, 1.6rem); line-height: 1.65; margin: .55rem 0 .6rem; }
.archive-item h2 a { color: var(--color-ink); text-decoration: none; }
.archive-item h2 a:hover { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: .2em; }
.archive-item > p { max-width: 49rem; margin: .5rem 0; line-height: 1.8; }
.archive-item__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .8rem; font-size: .85rem; }
.archive-item__footer a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.archive-back { margin-top: 1.6rem; }
.archive-back a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: .9rem; }
@media (max-width: 40rem) {
  .archive-header { padding-top: .5rem; }
  .archive-categories { gap: 0; justify-content: space-between; }
  .archive-categories a { font-size: .85rem; }
  .archive-item { padding: 1.4rem 0; }
  .archive-item > p { font-size: .9rem; }
  .archive-item__footer { align-items: flex-start; flex-direction: column; gap: .25rem; }
}
.journal-reads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.journal-reads > a { display: flex; align-items: flex-start; gap: .8rem; padding: 1.4rem 0; border-bottom: 1px solid var(--color-rule); color: var(--color-ink); text-decoration: none; }
.journal-read-number { flex: 0 0 auto; white-space: nowrap; color: var(--color-accent); font: italic 800 2rem/1.2 Arial, sans-serif; }
.journal-reads > a > span:last-child { min-width: 0; }
.journal-reads small { display: block; color: var(--color-accent-strong); font-size: .75rem; font-weight: 700; }
.journal-reads strong { display: block; margin-block: .6rem; font-size: 1.1rem; line-height: 1.75; }
.journal-reads strong + span { display: block; font-size: .77rem; }
.journal-reads a:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.gear-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.5rem; align-items: center; padding: 2rem; background: var(--color-paper-soft); }
.gear-feature h3 { margin: .5rem 0; font-size: 1.8rem; line-height: 1.5; }
.gear-feature h3 a { color: var(--color-ink); text-decoration: none; }
.gear-feature p { font-size: .9rem; }
.gear-feature dl { margin: 0; }
.gear-feature dl > div { padding-block: 1rem; border-bottom: 1px solid var(--color-rule); }
.gear-feature dt { font-size: 1.1rem; font-weight: 800; }
.gear-feature dd { margin: .2rem 0 0; font-size: .85rem; }
.journal-play { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-block: 3.5rem; padding: 1.8rem 2rem; background: var(--color-court); color: white; }
.journal-play h2 { margin: 0; font-size: 1.65rem; }
.journal-play p { margin: .4rem 0 0; font-size: .9rem; }
.journal-play > div:last-child { display: flex; gap: .5rem 1rem; flex-wrap: wrap; }
.journal-play a { display: flex; align-items: center; min-height: 44px; color: var(--color-ball); font-weight: 800; font-size: .9rem; }
.home-journal-entry { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 2.2rem; margin-top: 2rem; border-top: 3px solid var(--color-court); border-bottom: 1px solid var(--color-rule); }
.home-journal-entry h2 { font-size: 1.8rem; margin: .4rem 0; }
.home-journal-entry p:last-child { margin: 0; font-size: .9rem; }
.home-journal-entry > a { white-space: nowrap; font-size: .95rem; font-weight: 800; }
.product-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.product-table caption { text-align: left; font-size: .8rem; margin-bottom: .7rem; }
.product-table th, .product-table td { padding: 1rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-rule); overflow-wrap: anywhere; }
.product-table thead { background: var(--color-paper-soft); }
.product-table small { font-weight: 400; }
.journal-back { margin-block: 2rem; font-weight: 700; }
.video-item { border-top: 3px solid var(--color-court); padding-top: .4rem; }
/* Rule illustrations use readable labels and exact court areas, not decoration. */
.rule-lesson { margin-block: 2.7rem; padding-top: 1.4rem; border-top: 2px solid var(--color-court); }
.prose .rule-eyebrow { margin: 0 0 .6rem; font-size: .8rem; color: var(--color-accent-strong); font-weight: 800; }
.prose .rule-lesson h2 { margin-top: 0; line-height: 1.55; }
.rule-phrase { display: inline-block; }
.rule-figure { margin: 1.3rem 0; }
.rule-figure img { display: block; width: 100%; max-width: 480px; height: auto; margin-inline: auto; }
.rule-figure figcaption { margin: .6rem 0 0; font-size: .78rem; line-height: 1.7; color: var(--color-muted); text-align: center; }
.rule-legend-swatch { display: inline-block; width: .9em; height: .9em; background: #dcfa61; border: 1px solid #658524; margin-right: .3em; }
.rule-detail { border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); padding: .75rem 0; }
.rule-detail summary { cursor: pointer; font-weight: 700; color: var(--color-accent-strong); min-height: 30px; }
.prose .rule-detail p { font-size: .9rem; }
.rule-score { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: .3rem; padding: 1.2rem .6rem; margin-block: 1.4rem; background: var(--color-court); color: #fff; }
.rule-score > div { display: grid; text-align: center; }
.rule-score strong { font: 800 clamp(3rem, 6vw, 4.7rem)/1.15 Arial, sans-serif; color: var(--color-ball); }
.rule-score div > span { font-size: .78rem; margin-top: .4rem; }
.rule-score-divider { font-size: 1.5rem; padding-top: .65rem; }
.rule-score-flow { padding-left: 1.5rem; }
.rule-score-flow li { padding: .5rem 0 .8rem .3rem; border-bottom: 1px solid var(--color-rule); }
.rule-score-flow strong, .rule-score-flow span { display: block; }
.rule-score-flow span { font-size: .9rem; margin-top: .3rem; }
@media (max-width: 60rem) {
  .journal-opening { gap: 1.75rem; }
  .journal-reads { grid-template-columns: 1fr; gap: 0; }
  .journal-reads br { display: none; }
  .journal-reads > a { align-items: center; gap: 1.4rem; }
  .journal-reads strong { margin: .15rem 0; }
  .journal-read-number { font-size: 2.5rem; }
}
@media (max-width: 40rem) {
  .journal-main { padding-top: 1.4rem; }
  .journal-header h1 { font-size: 1.55rem; }
  .journal-header > p:last-child { font-size: .85rem; }
  .mobile-break { display: block; }
  .journal-sections { gap: 0; justify-content: space-between; margin-block: 1rem 1.4rem; font-size: .85rem; }
  .journal-opening, .video-grid, .gear-feature { grid-template-columns: 1fr; gap: 1.7rem; }
  .journal-feature__copy { padding: 1.2rem 1.35rem; }
  .journal-feature h2 { font-size: 1.6rem; }
  .journal-section-head h2 { font-size: 1.35rem; }
  .journal-block { margin-top: 2.5rem; }
  .gear-feature { padding: 1.25rem; gap: .75rem; }
  .gear-feature h3 { font-size: 1.5rem; }
  .journal-play, .home-journal-entry { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .journal-play { padding: 1.4rem; }
  .product-table { font-size: .76rem; }
  .product-table th, .product-table td { padding: .8rem .4rem; }
  .product-table th:first-child { width: 34%; }
}

/* Image-led journal and original blog articles. */
.blog-card { min-width: 0; border-bottom: 1px solid var(--color-rule); padding-bottom: 1.5rem; }
.blog-card > a:first-child { display: block; }
.blog-card__image-link { position: relative; align-self: start; }
.blog-card__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-paper-soft); }
.blog-card__image--portrait { object-fit: contain; }
.blog-card__body { padding-top: 1rem; }
.blog-card__meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .75rem; color: var(--color-muted); font-size: .72rem; line-height: 1.6; }
.blog-card__meta > :first-child { color: var(--color-accent-strong); font-weight: 800; }
.blog-card h2, .blog-card h3 { margin: .55rem 0 .65rem; font-size: 1.22rem; line-height: 1.65; letter-spacing: -.025em; }
.blog-card h2 a, .blog-card h3 a { color: var(--color-ink); text-decoration: none; }
.blog-card h2 a:hover, .blog-card h3 a:hover { text-decoration: underline; text-underline-offset: .2em; }
.blog-card__body > p { font-size: .85rem; line-height: 1.8; margin: 0 0 .65rem; }
.blog-card__body footer, .blog-card__links { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; font-size: .76rem; }
.blog-card__body footer a, .blog-card__links a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
.journal-news-list .blog-card { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding-block: 1.25rem; }
.journal-news-list .blog-card__body { padding-top: 0; }
.journal-news-list .blog-card h3 { font-size: 1.04rem; margin-top: .35rem; }
.journal-news-list .blog-card__excerpt { display: none; }
.journal-news-list .blog-card__image { aspect-ratio: 4 / 3; }
.journal-reads, .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.7rem; }
.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.archive-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; padding-top: 1.8rem; }
.archive-main { max-width: 72rem; }
.blog-main { max-width: 68rem; padding-top: 2rem; }
.blog-header, .blog-prose, .blog-toc, .blog-sources, .blog-related, .blog-back { max-width: 46rem; margin-inline: auto; }
.blog-header { margin-block: 2.5rem 2rem; }
.blog-header h1 { font-size: clamp(1.65rem, 3vw, 2.5rem); line-height: 1.5; letter-spacing: -.04em; margin: .7rem 0 1rem; text-wrap: pretty; }
.blog-header .blog-lead { font-size: 1.03rem; line-height: 1.9; }
.blog-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; font-size: .78rem; color: var(--color-muted); }
.blog-hero { max-width: 56rem; margin: 0 auto 2.5rem; }
.blog-hero--portrait { max-width: 24rem; }
.blog-hero img { width: 100%; height: auto; display: block; }
.blog-hero figcaption { margin-top: .5rem; text-align: right; color: var(--color-muted); font-size: .7rem; }
.blog-prose { line-height: 1.95; font-size: 1rem; }
.blog-prose h2 { margin: 2.5rem 0 1rem; padding-top: 1.5rem; border-top: 2px solid var(--color-ink); font-size: 1.45rem; line-height: 1.65; scroll-margin-top: 1.5rem; }
.blog-prose p { margin-block: 1rem; }
.blog-prose li { margin-block: .65rem; }
.blog-figure { margin: 1.5rem 0; }
.blog-figure img { display: block; width: 100%; height: auto; }
.blog-figure figcaption { color: var(--color-muted); font-size: .82rem; margin-top: .5rem; line-height: 1.7; }
.blog-chart { margin: 1.5rem 0 2rem; }
.blog-chart > figcaption { font-weight: 800; line-height: 1.6; }
.blog-chart > figcaption > span { display: block; font-size: .8rem; font-weight: 400; color: var(--color-muted); }
.blog-chart ol { list-style: none; padding: 0; margin: 1.1rem 0 0; }
.blog-chart li { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4.3rem; gap: .65rem; align-items: center; margin-block: .8rem; font-size: .92rem; }
.blog-chart li strong { text-align: right; font-variant-numeric: tabular-nums; }
.blog-chart__track { display: block; height: 1.65rem; background: var(--color-paper-soft); border-left: 1px solid var(--color-muted); }
.blog-chart__track > span { display: block; height: 100%; background: var(--color-accent); }
.blog-chart li:last-child .blog-chart__track > span { background: var(--color-court); }
.blog-chart .blog-chart__scale { display: flex; justify-content: space-between; margin: 0 4.95rem 0 4.65rem; font-size: .72rem; color: var(--color-muted); }
.blog-chart .blog-chart__note, .blog-chart .blog-chart__sources { font-size: .8rem; line-height: 1.7; margin-block: .65rem; }
.blog-toc { padding-block: 1.25rem; border-block: 1px solid var(--color-rule); margin-bottom: 2rem; }
.blog-toc ol { padding-left: 1.25rem; }
.blog-toc a { display: inline-block; padding-block: .25rem; }
.blog-sources { margin-top: 3rem; font-size: .8rem; padding-top: 1rem; border-top: 1px solid var(--color-rule); }
.blog-sources h2, .blog-related h2 { font-size: 1.1rem; }
.blog-sources li { margin-block: .6rem; }
.blog-sources__checked { display: block; color: var(--color-muted); font-size: .72rem; }
.blog-related { margin-block: 2rem; padding: 1.5rem; background: var(--color-paper-soft); }
.blog-related a, .blog-back a { display: inline-block; padding-block: .4rem; }
.blog-back { margin-block: 2rem 3rem; font-weight: 700; }
.blog-video-action { max-width: 46rem; margin: 0 auto 2rem; }
.article-cover { max-width: 56rem; margin: 0 auto 2.5rem; }
.article-cover img { display: block; width: 100%; height: auto; }
.article-cover figcaption { color: var(--color-muted); font-size: .7rem; text-align: right; margin-top: .4rem; }
@media (max-width: 60rem) {
  .journal-news-list .blog-card { grid-template-columns: 6.25rem minmax(0, 1fr); gap: .8rem; }
  .journal-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .archive-list, .journal-reads, .product-grid { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .archive-list { padding-top: 1.25rem; }
  .blog-card h2, .blog-card h3 { font-size: 1.15rem; }
  .journal-news-list .blog-card { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .journal-news-list .blog-card h3 { font-size: 1rem; }
  .journal-news-list .blog-card__meta { font-size: .67rem; }
  .blog-main { padding-top: 1.3rem; }
  .blog-header { margin-block: 1.8rem 1.5rem; }
  .blog-header .blog-lead, .blog-prose { font-size: .95rem; }
  .blog-prose h2 { font-size: 1.24rem; }
  .blog-related { padding: 1rem; }
}
/* Article follow-up links remain comfortable to tap on narrow screens. */
.blog-section-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: .35rem;
}