/* Fenajudo v2 — Dirección A: Sello Tradicional */

:root {
  --paper: #f1eee3;
  --paper-deep: #e9e4d3;
  --ink: #1c1a15;
  --stone: #726b5a;
  --red: #b5292a;
  --red-deep: #8f1f20;
  --blue: #1d3f6e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Yu Gothic", "Hiragino Sans", "Segoe UI", system-ui, sans-serif;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.serif {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
}
.mono {
  font-family: "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ---------- Ribbon + frame ---------- */
.ribbon {
  height: 5px;
  background: var(--red);
}
.frame {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* ---------- Nav ---------- */
nav.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2rem;
  border-bottom: 1px solid var(--stone);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.brand img { width: 42px; height: 42px; border-radius: 50%; }
.brand-name {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.brand-name b { font-weight: 700; }
.menu {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.menu a {
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
}
.menu a:hover, .menu a:focus-visible { border-bottom-color: var(--red); }
.menu a.current { border-bottom-color: var(--red); font-weight: 700; }

/* ---------- Hero (carrusel de 3 destacados) ---------- */
.hero-carousel {
  position: relative;
  overflow: hidden;
}
.hero-carousel .slides {
  position: relative;
  min-height: 30rem;
}
.hero {
  position: absolute;
  inset: 0;
  padding: 5rem 2rem 4rem;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}
.hero.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hero { transition: opacity 0.2s linear, visibility 0s linear 0.2s; transform: none; }
  .hero.is-active { transition: opacity 0.2s linear; transform: none; }
}
.hero .kanji-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: min(46vw, 32rem);
  line-height: 1;
  color: var(--red);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  writing-mode: vertical-rl;
}
.hero .eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 1.1rem;
  position: relative;
}
.hero h1 {
  font-size: clamp(2.3rem, 5.2vw, 4.2rem);
  line-height: 1.06;
  margin: 0 0 1.2rem;
  text-wrap: balance;
  position: relative;
}
.hero p.lede {
  max-width: 46ch;
  margin: 0 auto 2.2rem;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--stone);
  position: relative;
}
.actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

.hero-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 1rem 0 1.6rem;
  border-bottom: 1px solid var(--stone);
}
.hero-arrow {
  background: none;
  border: 1px solid var(--stone);
  color: var(--ink);
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.hero-arrow:hover { border-color: var(--red); color: var(--red); }
.hero-dots { display: flex; gap: 0.6rem; }
.hero-dots .dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 1px solid var(--stone);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hero-dots .dot.is-active,
.hero-dots .dot:hover { background: var(--red); border-color: var(--red); }
@media (prefers-reduced-motion: reduce) {
  .hero-arrow, .hero-dots .dot { transition: none; }
}
.btn {
  display: inline-block;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 0.85rem 1.8rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease;
}
.btn.primary {
  background: var(--red);
  color: var(--paper);
  border-color: var(--red);
}
.btn.primary:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn.stamp {
  position: relative;
  color: var(--ink);
  border-color: var(--ink);
  transform: rotate(-2deg);
  font-weight: 700;
}
.btn.stamp:hover { transform: rotate(-2deg) scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn.stamp:hover { transform: rotate(-2deg); }
}

/* ---------- Photo band (foto real, tratada como fotografía pegada) ---------- */
.photo-band {
  background: var(--paper-deep);
  padding: 3.5rem 2rem;
  border-bottom: 1px solid var(--stone);
}
.photo-band .inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}
.photo-frame {
  position: relative;
  background: var(--paper);
  padding: 0.6rem;
  box-shadow: 0 10px 24px rgba(28, 26, 21, 0.18);
  transform: rotate(-1deg);
}
.photo-frame .photo-clip { overflow: hidden; display: block; }
.photo-frame img {
  width: 100%;
  height: auto;
  filter: sepia(0.12) saturate(1.05) contrast(1.02);
  transition: transform 0.4s ease;
}
.photo-frame:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .photo-frame img { transition: none; }
  .photo-frame:hover img { transform: none; }
}
.photo-frame .caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0.4rem 0.2rem;
  font-size: 0.76rem;
  color: var(--stone);
}
.photo-frame .stamp-mark {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 2px solid var(--red);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  background: var(--paper);
  transform: rotate(8deg);
  line-height: 1.15;
}
.photo-band .copy .eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.8rem;
}
.photo-band .copy h2 {
  font-size: 1.7rem;
  margin: 0 0 1rem;
  line-height: 1.3;
}
.photo-band .copy p {
  color: var(--stone);
  line-height: 1.6;
  margin: 0 0 1.2rem;
}
.photo-band .copy a.textlink {
  color: var(--red);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--red);
  padding-bottom: 2px;
}

/* ---------- Stats strip ---------- */
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
  background: var(--ink);
  color: var(--paper);
}
.strip div {
  padding: 1.7rem 1rem;
  text-align: center;
  border-left: 1px solid rgba(241, 238, 227, 0.18);
}
.strip div:first-child { border-left: none; }
.strip .num {
  font-size: 1.9rem;
  display: block;
  color: #e7a2a2;
}
.strip .label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cfc9b8;
}

/* ---------- Generic section ---------- */
.section {
  padding: 4rem 2rem;
  max-width: 1080px;
  margin: 0 auto;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--stone);
  padding-bottom: 0.9rem;
  margin-bottom: 2rem;
}
.section-head h2 { font-size: 1.5rem; margin: 0; }
.section-head .see-all {
  font-size: 0.8rem;
  color: var(--red);
  text-decoration: none;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.card {
  border-top: 3px solid var(--red);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(28, 26, 21, 0.1);
}
.card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0 0 1rem;
  background: var(--paper-deep);
}
.card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.15) saturate(0.9) contrast(1.05);
  transition: transform 0.4s ease;
}
.card:hover .card-image img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .card-image img { transition: none; }
  .card:hover .card-image img { transform: none; }
}
.card .kicker {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card .kicker .date-badge {
  font-family: "SF Mono", "Cascadia Mono", Consolas, monospace;
  background: var(--ink);
  color: var(--paper);
  padding: 0.1rem 0.4rem;
  letter-spacing: 0;
}
.card h3 { font-size: 1.15rem; margin: 0 0 0.5rem; line-height: 1.35; }
.card p { font-size: 0.9rem; color: var(--stone); line-height: 1.55; margin: 0; }
.card .meta { display: block; margin-top: 0.8rem; font-size: 0.78rem; }
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Clubes ---------- */
.clubs { background: var(--paper-deep); padding: 3.5rem 2rem; }
.clubs .inner { max-width: 1080px; margin: 0 auto; }
.club-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.9rem;
  margin-top: 1.6rem;
}
.club-chip {
  background: var(--paper);
  border: 1px solid var(--stone);
  border-top: 3px solid var(--blue);
  text-align: center;
  padding: 1rem 0.6rem 0.9rem;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.club-chip:hover { border-top-color: var(--red); transform: translateY(-2px); }
.club-chip .club-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-deep);
}
.club-chip .club-logo.initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--stone);
  border: 1px solid var(--stone);
}
@media (prefers-reduced-motion: reduce) {
  .club-chip { transition: none; }
  .club-chip:hover { transform: none; }
}

/* ---------- Footer ---------- */
footer.site {
  padding: 2.2rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--stone);
  flex-wrap: wrap;
  gap: 1rem;
}
footer.site .seal { display: flex; align-items: center; gap: 0.6rem; }
footer.site .seal img { width: 30px; height: 30px; border-radius: 50%; }
footer.site a { text-decoration: none; color: var(--stone); }
footer.site a:hover { color: var(--red); }

/* ---------- Banner de página interior (no-home) ---------- */
.page-banner {
  position: relative;
  padding: 3.5rem 2rem;
  text-align: center;
  overflow: hidden;
}
.page-banner .kanji-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: min(40vw, 22rem);
  line-height: 1;
  color: var(--red);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  writing-mode: vertical-rl;
}
.page-banner .eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.8rem;
  position: relative;
}
.page-banner h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin: 0 0 0.7rem;
  position: relative;
}
.page-banner p {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--stone);
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
}

/* ---------- Contenido de texto largo (arbitraje, etc.) ---------- */
.prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 2rem;
}
.prose h2 { font-size: 1.6rem; margin: 2.2rem 0 1rem; border-bottom: 1px solid var(--stone); padding-bottom: 0.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin: 1.8rem 0 0.7rem; color: var(--red-deep); }
.prose h4 { font-size: 1rem; margin: 0 0 0.4rem; }
.prose p, .prose li { font-size: 0.98rem; line-height: 1.7; color: #383530; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: var(--ink); }
.rules-note { font-size: 0.85rem; color: var(--stone); }

/* ---------- Imagen destacada + carrusel + lightbox (evento, club) ---------- */
#evento-imagen img,
#club-icono img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  margin-bottom: 1.8rem;
  filter: sepia(0.1) saturate(0.95) contrast(1.03);
}
.carousel-container {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.2rem;
}
.carousel-track {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0.4rem 0;
  flex: 1;
}
.carousel-track img {
  height: 140px;
  width: auto;
  flex: 0 0 auto;
  cursor: pointer;
  border: 1px solid var(--stone);
  filter: sepia(0.1) saturate(0.95) contrast(1.03);
  transition: transform 0.15s ease;
}
.carousel-track img:hover { transform: translateY(-3px); }
.carousel-btn {
  flex: 0 0 auto;
  background: var(--paper);
  border: 1px solid var(--stone);
  color: var(--ink);
  width: 2.2rem;
  height: 2.2rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
}
.carousel-btn:hover { border-color: var(--red); color: var(--red); }
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 21, 0.9);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.lightbox-content {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
}
.lightbox .close {
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  color: var(--paper);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}

.toc-box {
  background: var(--paper-deep);
  border-left: 3px solid var(--red);
  padding: 1.2rem 1.5rem;
  margin-bottom: 2.5rem;
}
.toc-box .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.6rem;
}
.toc-box ul { list-style: none; margin: 0; padding: 0; columns: 2; gap: 1.5rem; }
.toc-box li { margin-bottom: 0.5rem; break-inside: avoid; }
.toc-box a { text-decoration: none; font-size: 0.88rem; border-bottom: 1px solid transparent; }
.toc-box a:hover { border-bottom-color: var(--red); }

.gesture-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
.gesture-card {
  background: var(--paper-deep);
  padding: 1rem 1.2rem;
  border-top: 2px solid var(--blue);
}
.gesture-card h4 { color: var(--ink); }
.gesture-card p { font-size: 0.88rem; margin: 0; color: var(--stone); }

.credit-logos {
  display: flex; align-items: center; gap: 2rem; margin: 1.5rem 0 2rem;
  padding: 1rem 1.2rem; background: var(--paper-deep); border-top: 2px solid var(--red);
}
.credit-logos img { height: 64px; width: auto; }
.credit-logos p { margin: 0; font-size: 0.82rem; color: var(--stone); }

.rule-diagram { margin: 1.2rem 0 1.8rem; text-align: center; }
.rule-diagram img { max-width: 100%; height: auto; border: 1px solid var(--stone); background: #fff; }
.rule-diagram p { font-size: 0.82rem; color: var(--stone); margin: 0.5rem 0 0; }

.photo-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0; }
.photo-card { background: var(--paper-deep); padding: 0.8rem; }
.photo-card img { width: 100%; height: auto; display: block; }
.photo-card p { font-size: 0.82rem; color: var(--stone); margin: 0.6rem 0 0; }

.ibsa-box {
  background: var(--ink);
  color: var(--paper);
  padding: 2.5rem;
  margin-top: 1rem;
}
.ibsa-box h2, .ibsa-box h3 { color: var(--paper); border-color: rgba(241,238,227,0.25); }
.ibsa-box h3 { color: #e7a2a2; }
.ibsa-box p, .ibsa-box li { color: #d8d3c4; }
.ibsa-box strong { color: var(--paper); }

/* ---------- Tarjeta de perfil (directivos) ---------- */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 3rem 2rem;
}
.profile-card { text-align: center; }
.profile-card .photo-frame { transform: none; margin: 0 auto 1rem; max-width: 220px; }
.profile-card .photo-frame .stamp-mark { display: none; }
.profile-card h3 { font-size: 1.1rem; margin: 0 0 0.2rem; }
.profile-card .cargo { color: var(--red); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.5rem; }
.profile-card .correo { font-size: 0.85rem; color: var(--stone); }
.profile-card .correo a { color: var(--stone); text-decoration: none; border-bottom: 1px solid var(--stone); }

/* ---------- Tarjeta de evento (fecha destacada) ---------- */
.evento-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.8rem;
  align-items: start;
  border-top: 3px solid var(--red);
  padding-top: 1.2rem;
  margin-bottom: 2.5rem;
}
.evento-card .card-image { aspect-ratio: 4 / 3; margin: 0; }
.evento-card .fecha-badge {
  font-family: "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.75rem;
  color: var(--red);
  margin: 0.8rem 0 0.4rem;
  letter-spacing: 0.04em;
}
.evento-card h3 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.evento-card .ubicacion { font-size: 0.85rem; color: var(--stone); margin: 0 0 0.6rem; }
.evento-card p { font-size: 0.92rem; line-height: 1.6; color: #383530; margin: 0; }

/* ---------- Estado vacío ---------- */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--stone);
  max-width: 480px;
  margin: 0 auto;
}
.empty-state .kanji-watermark-small {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  font-size: 2.5rem;
  color: var(--red);
  opacity: 0.35;
  margin-bottom: 0.5rem;
}

/* ---------- Formularios (afiliación / contacto / selectores de página) ---------- */
.form-box { max-width: 640px; margin: 0 auto; padding: 3rem 2rem; }
.fields { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 1.5rem; }
.field { flex: 1 1 100%; display: flex; flex-direction: column; gap: 0.35rem; }
.field.half { flex: 1 1 calc(50% - 0.6rem); }
label { font-size: 0.82rem; letter-spacing: 0.03em; }
input, select, textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--stone);
  background: #ffffff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
.form-box .btn { border: none; cursor: pointer; font-family: inherit; }

/* ---------- Grilla de ranking ---------- */
.ranking-table { width: 100%; border-collapse: collapse; margin: 0 0 2.5rem; }
.ranking-table th, .ranking-table td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--stone); font-size: 0.92rem; }
.ranking-table th { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); border-bottom: 2px solid var(--ink); }
.ranking-table tr:first-child td { font-weight: 700; }

/* ---------- Cintas (blanco / azul) — mismo criterio que el panel admin ---------- */
.cinta-blanco, .cinta-azul {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	padding: 0.1rem 0.45rem;
	margin-right: 0.35rem;
}
.cinta-blanco { background: #fdfcf8; color: var(--ink); border: 1px solid var(--stone); }
.cinta-azul { background: var(--blue); color: #e6eefb; }

@media (max-width: 860px) {
  .photo-band .inner { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: repeat(2, 1fr); }
  .evento-card { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .menu { display: none; }
  .hero-carousel .slides { min-height: 34rem; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip div:nth-child(3) { border-left: none; }
  .cards { grid-template-columns: 1fr; }
  .club-grid { grid-template-columns: repeat(3, 1fr); }
  .gesture-grid { grid-template-columns: 1fr; }
  .photo-gallery { grid-template-columns: 1fr; }
  .credit-logos { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .toc-box ul { columns: 1; }
  .profile-grid { grid-template-columns: 1fr; }
  .field.half { flex: 1 1 100%; }
}