/* Shared page rhythm. Keep the illustrated Aerborne world, give content room to breathe. */
.eyebrow { color: var(--gold); font: 800 .72rem/1.5 var(--body); letter-spacing: .16em; text-transform: uppercase; margin-bottom: .65rem; }
.page-head { position: relative; background: radial-gradient(ellipse at 90% 0%, #33456a88, transparent 65%); padding-block: clamp(2rem, 5vw, 4rem); }
.page-head::after { content: ""; position: absolute; bottom: 0; left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); width: 4rem; height: 3px; background: var(--gold); }
.page-head .lede { margin-bottom: .5rem; }
.page-head-tight { padding-block: 2rem; }
.section-head { margin-bottom: 1.5rem; }
.section-head-row { flex-wrap: wrap; gap: 1rem; }
.subnav { margin-bottom: 2rem; }
.subnav-inner { gap: .5rem 1.5rem; }
.subnav a { font-size: .9rem; }
.panel { box-shadow: none; }
.panel h2 { font-size: 1.5rem; }
.fine, .node-main p, .node-stats { color: var(--stone); }
.reading-page .fine { color: var(--ink-soft); }
.with-sidebar-main, .forum-sections, .profile-grid > *, .account-grid > *, .arcade-layout > * { min-width: 0; }
.with-sidebar { gap: clamp(1.5rem, 4vw, 3rem); }
.guide-nav { font-size: .9rem; }
.guide-nav-title { font-size: 1rem; }
.guide-nav-section { padding-block: .35rem; }
.handbook-search { max-width: 38rem; margin-top: 1.75rem; }
.handbook-search label { display: flex; gap: .5rem 1rem; flex-wrap: wrap; align-items: baseline; margin-bottom: .5rem; font-weight: 800; }
.handbook-search label .fine { font-weight: 400; }
.search-row { display: flex; gap: .6rem; }
.search-row input { min-width: 0; flex: 1; margin: 0; padding: .75rem 1rem; color: var(--cloud); background: var(--midnight-2); border: 1px solid var(--line-dark); border-radius: 10px; font: inherit; }
.guide-result-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.guide-result-list li { border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--twilight); padding: 1.5rem; }
.guide-result-list p { margin: 0; }
.guide-result-list .eyebrow { display: block; }
.guide-results h2 { font-size: 1.65rem; }
.chapter { padding: 1.5rem; }
.chapter ul { line-height: 1.9; }
.forum-layout { grid-template-columns: minmax(0, 1fr) 16rem; gap: 1.5rem; }
.forum-node { grid-template-columns: 42px minmax(10rem, 1fr) 5.5rem minmax(8rem, .65fr); gap: .9rem; padding: 1.15rem; }
.node-stats { gap: .7rem; }
.node-icon { align-self: start; padding-top: .15rem; }
.forum-section-head { background: linear-gradient(100deg, #33456a, #283752); padding-block: 1rem; border-top: 2px solid #77c8f54d; }
.forum-section-head p { font-size: .82rem; }
.forum-welcome { background: linear-gradient(150deg, #33456a, #241c45); }
.forum-welcome h2 { font-size: 1.5rem !important; }
.forum-welcome p:not(.eyebrow) { font-size: .95rem; }
.forum-welcome .btn { width: 100%; margin: .2rem 0 1rem; }
.forum-welcome .text-link { font-size: .85rem; }
.profile-form-section { border: 0; border-top: 1px solid var(--line-dark); padding-top: 1.5rem; margin-top: 1.5rem; scroll-margin-top: 6rem; }
.profile-form-section h3, .profile-social summary { font: 800 1.05rem var(--body); color: var(--cloud); margin-bottom: 1rem; }
.profile-social summary { cursor: pointer; }
.profile-social summary .fine { display: block; margin: .4rem 0; font-weight: 400; }
.profile-jumps { display: flex; flex-wrap: wrap; gap: .5rem; }
.profile-jumps a { text-decoration: none; padding: .35rem .7rem; border-radius: 6px; background: var(--midnight); font-size: .85rem; }
.profile-form .picker { border: 0; padding: 0; margin-block: 1rem 1.5rem; }
.profile-form legend { font-size: .9rem; font-weight: 800; margin-bottom: .75rem; }
.profile-form .pick { position: relative; }
.pick:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.pick:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 4px; }
.member-card { text-align: center; }
.member-card h2 { overflow-wrap: anywhere; }
.member-card .framed { margin-block: .5rem; }
.account-head, .profile-hero-inner { flex-wrap: wrap; }
.profile-strip dl { flex-wrap: wrap; gap: 1rem 2rem; }
.profile-edit { margin-top: 1rem; margin-bottom: 0; }
.rank-collection { padding-block: 2.5rem 3rem; }
.rank-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.rank-preview { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.25rem; border: 1px solid var(--line-dark); border-top: 3px solid var(--rank); border-radius: var(--radius); background: radial-gradient(ellipse at 50% 0%, #33456a, #1c2b44 70%); color: var(--text); text-decoration: none; }
.rank-preview:hover { border-color: var(--rank); color: var(--cloud); }
.rank-preview h3 { margin-top: 1rem; }
.rank-preview p { font-size: .9rem; }
.rank-preview .text-link { margin-top: auto; font-size: .85rem; color: var(--rank-name, var(--sky)); }
.store-cats { margin-top: 0; }
.store-cat-title { font-size: 1.4rem; }
.arcade-card { transition: border-color .15s; }
.arcade-card:hover { border-color: var(--sky); }
.arcade-card-name { font-family: var(--display); font-size: 1.7rem; }
.arcade-layout { grid-template-columns: minmax(0, min(30rem, calc(75svh - 10rem))) minmax(0, 1fr); }
.arcade-stage { scroll-margin-top: 5rem; }
.arcade-hud { flex-wrap: wrap; }
.arcade-controls { display: flex; align-items: center; gap: 1rem; }
.arcade-controls button { padding: .5rem .75rem; min-height: 36px; }
.arcade-controls button:disabled { opacity: .45; cursor: default; }
.arcade-frame canvas { cursor: default; }
.arcade-help { font-size: .85rem; color: #adbcd1; margin-top: .75rem; }
.arcade-overlay[hidden] { display: none; }
.legal-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.prose { overflow-wrap: break-word; }
.prose table { display: block; overflow-x: auto; }

@media (min-width: 901px) and (max-width: 1200px) {
  .masthead-inner { gap: .65rem; }
  .brand img { width: 120px; }
  .nav-top, .nav-trigger { padding-inline: .55rem; font-size: .9rem; }
  .nav-account { gap: .25rem; }
}
@media (max-width: 1080px) and (min-width: 761px) {
  .forum-layout { grid-template-columns: minmax(0, 1fr) 14rem; }
  .forum-node { grid-template-columns: 40px minmax(0, 1fr) 5rem; }
  .node-last { grid-column: 2 / -1; }
}
@media (max-width: 980px) {
  .arcade-layout { grid-template-columns: minmax(0, 1fr); }
  .arcade-stage { width: 100%; max-width: min(30rem, calc(75svh - 10rem)); margin-inline: auto; }
  .account-grid { grid-template-columns: minmax(0, 1fr); }
  .account-grid > aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .account-grid > aside .panel { margin: 0; }
}
@media (max-width: 760px) {
  .forum-layout { grid-template-columns: minmax(0, 1fr); }
  .forum-node { grid-template-columns: 40px minmax(0, 1fr); }
  .node-stats, .node-last { grid-column: 2; }
  .node-stats { gap: 1.5rem; }
  .node-stats > div { display: flex; gap: .5rem; align-items: baseline; }
  .node-last:has(> .fine:only-child) { display: none; }
  .rank-preview-grid { grid-template-columns: minmax(0, 1fr); }
  .rank-preview { padding: 1.5rem; }
  .account-grid > aside { grid-template-columns: minmax(0, 1fr); }
  .profile-hero-inner .framed { width: 128px; }
  .arcade-play ~ .play-dock, body:has([data-arcade]) .play-dock { display: none; }
  .thread-row { grid-template-columns: 40px minmax(0, 1fr); }
  .thread-counts { grid-column: 2; }
  .profile-strip { padding-block: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .arcade-card { transition: none; } }

/* Messages and notifications in the nav, for signed-in members. */
.nav-icon { position: relative; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; color: var(--cloud); text-decoration: none; }
.nav-icon:hover, .nav-icon[aria-current="page"] { background: rgba(244, 249, 255, 0.1); color: var(--cloud); }
.nav-badge { position: absolute; top: 0.1rem; right: 0.05rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem; display: grid; place-items: center; border-radius: 999px; background: var(--peach); color: #3A1A0E; font: 800 0.66rem/1 var(--body); box-shadow: 0 0 0 2px var(--midnight); }