/* Public-site type and spacing. Mirrored to deploy/php-site/assets/readability.css. */
:root {
  --type-meta: .75rem;
  --type-small: .875rem;
  --type-body: 1rem;
  --space-section: 5rem;
  --space-card: 1.75rem;
}

html { font-size: 100%; scroll-padding-top: 6rem; }
.home-main, .page-main { font-size: var(--type-body); }
.home-copy, .next-lan > *, .lan-card > *, .sponsor-grid > *,
.sponsor-grid > a > div, .sponsor-grid > article > div,
.crew-card, .simple-card, .about-facts article, .ideas-list article > * {
  min-width: 0;
}

/* Readable controls and secondary text, with room for wrapping. */
.desktop-nav { gap: 1.5rem; }
.desktop-nav a, .discord-button, .primary-button, .secondary-button,
.mobile-menu summary, .mobile-menu nav a,
.next-lan > a, .lan-card > a, .wide-cta > b,
.game-filters button, .packing-progress span, .packing-progress button,
.pack-card legend, .player-links a, .crew-links a, .crew-cta-card > b,
.idea-link, .idea-link-missing, .profile-account-bar button, .profile-games span {
  font-size: var(--type-small);
  line-height: 1.45;
  letter-spacing: .035em;
}
.primary-button, .secondary-button {
  min-height: 3.25rem;
  padding: .75rem 1.25rem;
  justify-content: center;
  text-align: center;
}
.header-discord { gap: 1rem; padding: .75rem 1rem; }
.eyebrow, .card-index, .detail-label, .crew-card > small,
.simple-card > small, .sponsor-grid small, .sponsor-grid > a > span,
.lan-countdown small, .tag-list span, .wide-cta small, .game-count,
.pack-card small, .guide-list summary > span, .about-facts small,
.crew-play-hint, .profile-login-card > small, .profile-editor header > small,
.profile-account-bar small, .profile-field > small {
  font-size: var(--type-meta);
  line-height: 1.5;
  letter-spacing: .06em;
}
.site-brand small, .page-transition small { font-size: var(--type-meta); line-height: 1.5; }
.home-copy > p, .page-intro p {
  max-width: 40rem;
  font-size: 1.125rem;
  line-height: 1.7;
}
.sponsor-grid p, .lan-card p, .crew-card p, .simple-card p,
.ideas-list p, .past-lans p, .pack-card label > span, .guide-list li,
.about-facts p, .crew-cta-card p, .profile-login-card p {
  font-size: var(--type-body);
  line-height: 1.65;
}
.guide-list summary small, .ideas-list span, .past-lans small,
.profile-field > span, .profile-editor header p, .profile-editor > footer p,
.profile-notice, .profile-privacy-choice {
  font-size: var(--type-small);
  line-height: 1.6;
}
.lan-card small, .past-lans article > span, .next-lan p b {
  font-size: var(--type-small);
  line-height: 1.5;
  letter-spacing: .025em;
}
.next-lan p span { font-size: var(--type-small); line-height: 1.5; }
.player-links .twitch-link b, .crew-links .twitch-link b { font-size: var(--type-small); }
.player-links .twitch-link span, .crew-links .twitch-link span { font-size: var(--type-meta); }
.profile-status { font-size: var(--type-meta); line-height: 1.5; }
.profile-input-prefix b { font-size: var(--type-small); }
.profile-field input { font-size: var(--type-body); }

/* Keep the large home headline; give content pages a quieter hierarchy. */
.home-hero { padding: 4.5rem 0; }
.home-copy h1 { margin: 1.75rem 0; }
.hero-actions { margin-top: 2rem; gap: .75rem; }
.page-main:not(.admin-main) { padding: 4rem 0 5rem; }
.page-intro { margin-bottom: 3rem; }
.page-main:not(.admin-main) .page-intro h1 {
  margin: 1.25rem 0 1.5rem;
  font-size: clamp(3rem, 5.6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.055em;
  overflow-wrap: break-word;
}
.subsection { margin-top: var(--space-section); }
.subsection .page-intro h2 {
  margin: 1rem 0 1.25rem;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.045em;
}
.subsection > h2 {
  margin: 0 0 1.75rem;
  font-size: clamp(1.75rem, 3vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: -.04em;
}
.subsection > p { margin: 1.5rem 0 0; line-height: 1.7; }
.subsection > p a { text-underline-offset: .2em; text-decoration: underline; }

/* Next event and sponsor sections share a clear vertical rhythm. */
.next-lan {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 1.5rem 2rem;
  padding: var(--space-card);
  margin-bottom: var(--space-section);
}
.next-lan h2 { font-size: 1.75rem; line-height: 1.2; margin-top: .75rem; }
.next-lan > a { grid-column: 1 / -1; justify-self: start; min-height: 2.75rem; display: flex; align-items: center; }
.lan-countdown { gap: .75rem; }
.lan-countdown > span { min-width: 4rem; padding-left: .75rem; }
.lan-countdown b { font-size: 1.75rem; }
.lan-countdown small { margin-top: .5rem; }
.sponsor-section { padding-top: 0; margin-bottom: var(--space-section); }
.sponsor-section > header {
  margin-bottom: 1.75rem;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
}
.sponsor-section h2 { margin: 0; font-size: 2.125rem; line-height: 1.2; }
.sponsor-grid, .crew-grid, .simple-grid, .about-facts {
  gap: 1.25rem;
  border: 0;
}
.sponsor-grid > a, .sponsor-grid > article {
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 1.25rem 1.5rem;
  padding: var(--space-card);
  border: 1px solid var(--line);
}
.sponsor-grid h3 { margin: 0 0 .75rem; font-size: 1.5rem; line-height: 1.25; }
.sponsor-grid > a > span { position: static; grid-column: 2; }

/* Lists preserve touch targets while allowing their content to grow. */
.lan-card {
  grid-template-columns: 2rem minmax(0, 1.5fr) minmax(0, 1fr) auto;
  min-height: 0;
  padding: 2rem 1.25rem;
  gap: 1.5rem;
}
.lan-card > a { grid-column: -2; min-height: 2.75rem; display: flex; align-items: center; }
.lan-card h2 { margin: .75rem 0 .5rem; font-size: 1.8125rem; line-height: 1.25; }
.past-lans { margin-top: var(--space-section); opacity: 1; }
.past-lans > header { margin-bottom: 1.75rem; }
.past-lans h2 { margin-top: .75rem; font-size: 1.875rem; line-height: 1.25; }
.past-lans article { grid-template-columns: 11rem minmax(0, 1.4fr) minmax(0, 1fr); padding: 1.25rem .75rem; gap: 1.5rem; }
.past-lans h3 { font-size: 1.125rem; line-height: 1.4; }
.lan-resource-grid { margin-top: 4rem; gap: 1.5rem; }
.wide-cta { margin-top: 3rem; padding: var(--space-card); gap: 1.5rem; }
.wide-cta > span { min-width: 0; font-size: 1.5rem; line-height: 1.3; }
.wide-cta > b { flex-shrink: 0; }
.list-note { margin-top: 4rem; }

.crew-card { padding: 1.5rem; }
.crew-card, .simple-card, .about-facts article { border: 1px solid var(--line); }
.crew-initial { margin: 0 0 1.5rem; }
.crew-card h2 { margin: 0 0 .75rem; font-size: 2rem; line-height: 1.15; overflow-wrap: anywhere; }
.crew-play-hint { display: block; margin: 0 0 1rem; }
.crew-card p { margin: 0 0 1rem; }
.crew-links, .player-links { margin-top: 1.5rem; gap: .5rem; }
.crew-links a, .player-links a { min-height: 2.75rem; padding: .625rem .75rem; gap: .5rem; overflow-wrap: anywhere; }
.crew-cta-card { justify-content: flex-start; gap: .75rem; }
.crew-cta-card h2 { margin: .25rem 0; }
.crew-cta-card > b { margin-top: auto; padding-top: 1rem; }
.tag-list { gap: .5rem; }
.tag-list span { padding: .375rem .5rem; }
.simple-card { min-height: 11rem; padding: var(--space-card); }
.simple-card h2 { margin: 1rem 0 .75rem; font-size: 1.5625rem; line-height: 1.25; }
.game-filters { margin-bottom: 1.5rem; gap: .75rem; }
.game-filters button { min-height: 2.75rem; padding: .625rem 1rem; }
.game-count { margin: 0 0 1rem; }
.ideas-list article { padding: 1.5rem 1rem; gap: 1.5rem; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .7fr) auto; }
.ideas-list h3 { font-size: 1.25rem; line-height: 1.35; }
.idea-link, .idea-link-missing { white-space: normal; }
.idea-link { min-height: 2.75rem; display: flex; align-items: center; padding: .625rem .75rem; }

.packing-progress { padding: 1rem 1.25rem; margin-bottom: 1.5rem; gap: 1.5rem; }
.packing-progress button { min-height: 2.75rem; padding: .625rem 1rem; }
.pack-grid { gap: 1.5rem; }
.pack-card { padding: 1.5rem; }
.pack-card legend { max-width: 100%; padding: 0 .5rem; }
.pack-card label { min-height: 3.5rem; grid-template-columns: 1.25rem minmax(0, 1fr) auto; padding: .75rem 0; gap: .75rem; }
.pack-card input { width: 1.125rem; height: 1.125rem; }
.pack-card label > span { overflow-wrap: break-word; }
.about-facts article { min-height: 0; padding: var(--space-card); justify-content: flex-start; }
.about-facts h2 { margin: .75rem 0; font-size: 1.75rem; line-height: 1.25; }
.about-facts h3 { margin: 0 0 .75rem; font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.about-facts p { max-width: 60ch; }
.guide-list summary { grid-template-columns: 2rem minmax(10rem, .65fr) minmax(0, 1fr); padding: 1.5rem 1.25rem; gap: 1.5rem; }
.guide-list summary b { font-size: 1.375rem; line-height: 1.3; }
.guide-list ul { padding: 1.5rem 2rem 1.5rem 5.5rem; }
.guide-list li { margin-bottom: .75rem; }
.guide-list li:last-child { margin-bottom: 0; }

.site-footer { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: start; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.site-footer > div { gap: .75rem; }
.site-footer span, .site-footer small, .site-footer a, .footer-links a:last-child {
  font-size: var(--type-meta);
  line-height: 1.6;
  letter-spacing: .035em;
}
.site-footer a { min-height: 2rem; display: flex; align-items: center; }
.footer-links a:last-child { opacity: 1; }
.site-footer > small { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .header-discord { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sponsor-grid > a, .sponsor-grid > article { grid-template-columns: 1fr; }
  .sponsor-grid > a > span { grid-column: 1; }
  .ideas-list article { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
  .idea-link, .idea-link-missing { justify-self: start; }
}

@media (max-width: 980px) {
  .next-lan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next-lan > a { grid-column: auto; }
  .lan-card { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .lan-card > div:nth-of-type(2), .lan-card > div:nth-of-type(3) { grid-column: 2; }
  .lan-card > a { grid-column: 3; grid-row: 1; }
  .past-lans article { grid-template-columns: 10rem minmax(0, 1fr); }
  .past-lans article p, .past-lans article small { grid-column: 2; }
  .site-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-links { align-items: flex-start; }
}

@media (max-width: 720px) {
  :root { --space-section: 3.5rem; --space-card: 1.25rem; }
  .site-header { padding-inline: 1rem; }
  .mobile-menu summary { min-height: 3rem; padding: .5rem; }
  .mobile-menu nav a { min-height: 3rem; padding: .75rem 0; font-size: 1rem; }
  .home-hero { padding: 3rem 0; }
  .home-copy h1 { margin: 1.5rem 0; }
  .home-copy > p, .page-intro p { max-width: 100%; font-size: var(--type-body); line-height: 1.7; }
  .hero-actions { margin-top: 1.75rem; gap: .75rem; }
  .hero-actions a { min-height: 3.25rem; }
  .page-main:not(.admin-main) { padding: 3rem 0 4rem; }
  .page-intro { margin-bottom: 2rem; }
  .page-main:not(.admin-main) .page-intro h1 { margin: 1rem 0 1.25rem; font-size: clamp(2.5rem, 10.5vw, 3rem); line-height: 1.05; }
  .subsection .page-intro h2 { font-size: clamp(2rem, 8vw, 2.5rem); }
  .subsection > h2 { margin-bottom: 1.5rem; }
  .next-lan { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .next-lan > a { grid-column: 1; }
  .next-lan h2 { font-size: 1.6875rem; }
  .lan-countdown { flex-wrap: wrap; }
  .sponsor-section h2 { font-size: 1.875rem; }
  .sponsor-grid > a, .sponsor-grid > article { gap: 1.25rem; }
  .lan-card { padding: 1.5rem 0; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 1rem; }
  .lan-card > div, .lan-card > div:nth-of-type(2), .lan-card > div:nth-of-type(3), .lan-card > a { grid-column: 2; grid-row: auto; }
  .lan-card h2 { font-size: 1.625rem; }
  .past-lans article { grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: 1.25rem 0; }
  .past-lans article h3, .past-lans article p, .past-lans article small { grid-column: 1; grid-row: auto; }
  .lan-resource-grid { margin-top: 3rem; }
  .wide-cta { margin-top: 2rem; align-items: stretch; }
  .wide-cta > b { min-height: 2.75rem; }
  .list-note { margin-top: 3rem; }
  .crew-grid { grid-template-columns: minmax(0, 1fr); }
  .crew-card { padding: var(--space-card); }
  .crew-initial { margin: 0 0 1.25rem; }
  .crew-cta-card { min-height: 0; }
  .crew-cta-card > b { margin-top: 0; }
  .simple-card { min-height: 0; }
  .ideas-list article { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.25rem 0; gap: .75rem 1rem; }
  .ideas-list h3 { grid-column: 1 / -1; }
  .packing-progress { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 1rem; gap: .75rem; }
  .packing-progress span { flex: 1 1 9rem; }
  .packing-progress button { flex: 0 0 auto; }
  .pack-grid { gap: 1.25rem; }
  .pack-card { padding: 1rem; }
  .pack-card label { grid-template-columns: 1.25rem minmax(0, 1fr); gap: .25rem .75rem; }
  .pack-card input { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .pack-card label > span, .pack-card small { grid-column: 2; }
  .guide-list summary { grid-template-columns: 1.5rem minmax(0, 1fr); padding: 1.25rem .25rem; gap: .75rem 1rem; }
  .guide-list summary small { grid-column: 2; }
  .guide-list ul { padding: 1.25rem 1rem 1.5rem 2.75rem; }
  .site-footer { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 2rem 1rem; }
  .site-footer a { min-height: 2.75rem; }
  .site-footer > small { grid-column: 1; }
}

@media (max-width: 420px) {
  .ideas-list article { grid-template-columns: minmax(0, 1fr); }
}
/* Contemporary surface treatment with consistent focus and hover states. */
:root { --surface-radius: 1rem; --control-radius: .7rem; }
.site-header {
  background: color-mix(in srgb, #001a13 90%, transparent);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}
.primary-button, .secondary-button, .discord-button, .game-filters button,
.packing-progress button, .idea-link, .crew-links a, .player-links a,
.mobile-menu summary, .wide-cta > b { border-radius: var(--control-radius); }
.next-lan, .sponsor-grid > a, .sponsor-grid > article, .crew-card,
.simple-card, .pack-card, .about-facts article, .ideas-list article,
.guide-list details, .wide-cta, .profile-login-card {
  border-radius: var(--surface-radius);
  overflow: clip;
}
.next-lan, .sponsor-grid > a, .sponsor-grid > article, .crew-card,
.simple-card, .pack-card, .about-facts article, .guide-list details {
  box-shadow: 0 18px 60px rgba(0, 0, 0, .12);
}
@media (hover: hover) {
  .sponsor-grid > a, .crew-card, .simple-card, .wide-cta {
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  }
  .sponsor-grid > a:hover, .crew-card:hover, .simple-card:hover, .wide-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .2);
  }
}
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid #65e6a5;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .sponsor-grid > a, .crew-card, .simple-card, .wide-cta { transition: none; }
}