.gallery-page { overflow: hidden; }
.gallery-page .section { position: relative; }
.gallery-page .panel { box-shadow: none; }
.gallery-page .eyebrow { margin-bottom: var(--space-3); }
.gallery-page .meter__segment { transition: background-color 160ms ease, border-color 160ms ease; }
.gallery-page .gallery-hero { padding-top: var(--space-9); }
.gallery-page .gallery-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr); gap: var(--space-5); align-items: start; }
.gallery-page .gallery-hero__copy { min-width: 0; max-width: 58ch; padding-top: var(--space-5); }
.gallery-page .gallery-hero__lead { font-size: var(--text-lead); font-weight: 500; line-height: 1.4; }
.gallery-page .gallery-hero__media { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; position: relative; }
.gallery-page .gallery-hero__media > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: right center; border: var(--border-default); }
.gallery-page .gallery-hero__verdict { width: min(68%, 360px); min-width: 280px; margin-top: calc(var(--space-7) * -1); margin-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); z-index: 1; }
.gallery-page .gallery-hero__verdict > * { min-width: 0; margin: 0; }
.gallery-page .gallery-hero__score-row { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.gallery-page .gallery-hero__cta { width: max-content; max-width: 100%; }
.gallery-page .gallery-hero__cta span, .gallery-page .gallery-download__button span { display: block; margin-left: var(--space-2); font-size: 0.64rem; letter-spacing: .04em; }
.gallery-page .gallery-hero__store-note { margin: 0; color: var(--color-steel); font-size: var(--text-sm); }
.gallery-page .gallery-types__intro, .gallery-page .gallery-decisions__intro, .gallery-page .gallery-summary__intro, .gallery-page .gallery-night__intro { max-width: 64ch; }
.gallery-page .gallery-types__intro::after, .gallery-page .gallery-decisions__intro::after { display: block; width: 100%; height: 2px; margin-top: var(--space-5); background: linear-gradient(90deg, var(--color-magenta) 0 72px, var(--color-edge) 72px 100%); content: ""; }
.gallery-page .gallery-types__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.gallery-page .gallery-type-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5); min-width: 0; min-height: 100%; }
.gallery-page .gallery-type-card__top { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.gallery-page .gallery-type-card__top > * { margin: 0; }
.gallery-page .gallery-type-card h3 { min-height: 2em; }
.gallery-page .gallery-inline-link { font-size: var(--text-compact); font-weight: 700; }
.gallery-page .gallery-inline-link span { display: inline-block; margin-left: var(--space-1); }
.gallery-page .gallery-tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); color: var(--color-steel); font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .04em; line-height: 1.35; text-transform: uppercase; }
.gallery-page .gallery-tags span { min-width: 0; overflow-wrap: anywhere; }
.gallery-page .gallery-type-card:hover { border-color: var(--color-magenta); }
.gallery-page .gallery-telemetry__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(390px, 5fr); gap: var(--space-6); align-items: start; }
.gallery-page .gallery-telemetry__copy { max-width: 58ch; }
.gallery-page .gallery-telemetry__board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: var(--space-4); }
.gallery-page .gallery-criterion { display: grid; grid-template-columns: minmax(0, 28%) minmax(0, 32%) minmax(0, 40%); gap: var(--space-3); min-width: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-edge); }
.gallery-page .gallery-criterion:last-child { border-bottom: 0; }
.gallery-page .gallery-criterion > * { min-width: 0; margin: 0; }
.gallery-page .gallery-criterion h3 { margin-bottom: var(--space-2); font-size: 1.25rem; }
.gallery-page .gallery-criterion p { color: var(--color-steel); font-size: var(--text-sm); line-height: 1.45; }
.gallery-page .gallery-criterion > div:nth-child(2) { display: flex; flex-direction: column; gap: var(--space-2); }
.gallery-page .gallery-observe { align-self: center; }
.gallery-page .gallery-criterion:hover { border-bottom-color: var(--color-magenta); }
.gallery-page .gallery-tuning__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: start; }
.gallery-page .gallery-tuning__head > div { max-width: 62ch; }
.gallery-page .gallery-tuning__head figure { width: 100%; min-width: 0; margin: 0; }
.gallery-page .gallery-tuning__head img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border: var(--border-default); }
.gallery-page .gallery-tuning__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.gallery-page .gallery-tune-card { grid-column: span 3; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.gallery-page .gallery-tune-card > * { margin: 0; }
.gallery-page .gallery-tune-card > span { color: var(--color-steel); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gallery-page .gallery-tune-card dl { display: grid; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-edge); }
.gallery-page .gallery-tune-card dl div { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 66%); gap: var(--space-2); }
.gallery-page .gallery-tune-card dt, .gallery-page .gallery-tune-card dd { margin: 0; min-width: 0; font-size: var(--text-sm); }
.gallery-page .gallery-tune-card dt { color: var(--color-yellow); font-family: var(--font-mono); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.gallery-page .gallery-tune-card dd { color: var(--color-steel); overflow-wrap: anywhere; }
.gallery-page .gallery-tuning__rule { grid-column: span 8; display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); min-width: 0; padding: var(--space-5); border-left: 2px solid var(--color-magenta); }
.gallery-page .gallery-tuning__rule p { max-width: 46ch; margin: 0; }
.gallery-page .gallery-tune-card--balance { grid-column: span 4; }
.gallery-page .gallery-tune-card--balance ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; color: var(--color-steel); font-size: var(--text-compact); }
.gallery-page .gallery-tune-card--balance li::before { color: var(--color-yellow); content: "□ "; }
.gallery-page .gallery-decisions__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.gallery-page .gallery-step { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.gallery-page .gallery-step > * { margin: 0; }
.gallery-page .gallery-step > span { color: var(--color-magenta); font-family: var(--font-mono); font-size: var(--text-score); font-weight: 700; line-height: 1; }
.gallery-page .gallery-step__note { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-edge); color: var(--color-steel); font-size: var(--text-compact); font-weight: 600; }
.gallery-page .gallery-step__note--score { color: var(--color-yellow); }
.gallery-page .gallery-trial__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(520px, 7fr); gap: var(--space-6); align-items: start; }
.gallery-page .gallery-trial__method { max-width: 48ch; }
.gallery-page .gallery-trial__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; }
.gallery-page .gallery-trial__card > .meta-mono { margin: 0; padding-bottom: var(--space-3); }
.gallery-page .gallery-trial__card article { display: grid; grid-template-columns: minmax(0, 24%) minmax(0, 34%) minmax(0, 42%); gap: var(--space-3); min-width: 0; padding: var(--space-3) 0; border-top: 1px solid var(--color-edge); }
.gallery-page .gallery-trial__card article > * { min-width: 0; margin: 0; }
.gallery-page .gallery-trial__card h3 { font-size: 1.2rem; }
.gallery-page .gallery-trial__card p { color: var(--color-steel); font-size: var(--text-sm); line-height: 1.45; }
.gallery-page .gallery-night__grid { display: grid; grid-template-columns: minmax(480px, 7fr) minmax(280px, 5fr); gap: var(--space-6); align-items: start; margin-top: var(--space-5); }
.gallery-page .gallery-night__grid figure { width: 100%; min-width: 0; margin: 0; }
.gallery-page .gallery-night__grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; border: var(--border-default); }
.gallery-page .gallery-night__tests { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.gallery-page .gallery-night__tests > * { margin: 0; }
.gallery-page .gallery-night__tests ol { display: grid; gap: var(--space-4); padding: 0; counter-reset: nighttest; }
.gallery-page .gallery-night__tests li { position: relative; padding-left: var(--space-5); color: var(--color-steel); }
.gallery-page .gallery-night__tests li::before { position: absolute; left: 0; color: var(--color-magenta); font-family: var(--font-mono); font-weight: 700; content: counter(nighttest, decimal-leading-zero); counter-increment: nighttest; }
.gallery-page .gallery-summary__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.gallery-page .gallery-summary-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.gallery-page .gallery-summary-card > * { margin: 0; }
.gallery-page .gallery-summary-card > div { display: flex; justify-content: space-between; align-items: start; gap: var(--space-3); }
.gallery-page .gallery-summary-card p { color: var(--color-steel); }
.gallery-page .gallery-check__grid { display: grid; grid-template-columns: minmax(560px, 8fr) minmax(280px, 4fr); gap: var(--space-6); align-items: start; }
.gallery-page .gallery-check__main > p { max-width: 54ch; }
.gallery-page .gallery-checklist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.gallery-page .gallery-checklist article { display: grid; grid-template-columns: minmax(0, 10%) minmax(0, 90%); gap: var(--space-3); min-width: 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-edge); }
.gallery-page .gallery-checklist article:last-child { border-bottom: 0; }
.gallery-page .gallery-checklist article > * { min-width: 0; margin: 0; }
.gallery-page .gallery-checklist article > span { color: var(--color-yellow); font-family: var(--font-mono); font-weight: 700; }
.gallery-page .gallery-checklist h3 { margin-bottom: var(--space-2); }
.gallery-page .gallery-checklist p { margin: 0; color: var(--color-steel); }
.gallery-page .gallery-check__aside { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; margin-top: var(--space-8); }
.gallery-page .gallery-check__aside > * { margin: 0; }
.gallery-page .gallery-download { padding-bottom: var(--space-9); }
.gallery-page .gallery-download__panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(230px, 3fr); gap: var(--space-6); align-items: center; width: min(980px, 100%); margin-inline: auto; border-top: 2px solid var(--color-magenta); }
.gallery-page .gallery-download__copy { max-width: 52ch; }
.gallery-page .gallery-download__copy > *:last-child { margin-bottom: 0; }
.gallery-page .gallery-download__button { width: 100%; min-width: 230px; min-height: 48px; flex-direction: column; gap: var(--space-1); }
.gallery-page .gallery-download__button span { margin-left: 0; }
.gallery-page .gallery-hero__cta:focus-visible, .gallery-page .gallery-download__button:focus-visible { outline-color: var(--color-yellow); outline-offset: 3px; box-shadow: 0 0 0 2px var(--color-asphalt); }
@media (max-width: 1040px) { .gallery-page .gallery-types__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-page .gallery-tune-card { grid-column: span 6; } .gallery-page .gallery-tuning__rule { grid-column: span 6; } .gallery-page .gallery-tune-card--balance { grid-column: span 6; } }
@media (max-width: 980px) { .gallery-page .gallery-hero__grid, .gallery-page .gallery-tuning__head, .gallery-page .gallery-telemetry__grid, .gallery-page .gallery-trial__grid, .gallery-page .gallery-check__grid { grid-template-columns: minmax(0, 1fr); } .gallery-page .gallery-hero__copy, .gallery-page .gallery-telemetry__copy, .gallery-page .gallery-trial__method { max-width: none; } .gallery-page .gallery-hero__media { max-width: 720px; } .gallery-page .gallery-tuning__head > div { max-width: 62ch; } .gallery-page .gallery-tuning__head figure { max-width: 680px; } .gallery-page .gallery-check__aside { margin-top: 0; } }
@media (max-width: 920px) { .gallery-page .gallery-criterion { grid-template-columns: minmax(0, 40%) minmax(0, 60%); } .gallery-page .gallery-observe { grid-column: 1 / -1; } .gallery-page .gallery-trial__card article { grid-template-columns: minmax(0, 40%) minmax(0, 60%); } .gallery-page .gallery-trial__card article p { grid-column: 1 / -1; } }
@media (max-width: 900px) { .gallery-page .gallery-decisions__grid, .gallery-page .gallery-summary__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-page .gallery-decisions__grid > :last-child, .gallery-page .gallery-summary__grid > :last-child { grid-column: 1 / span 1; } .gallery-page .gallery-night__grid { grid-template-columns: minmax(0, 1fr); } .gallery-page .gallery-night__grid figure { max-width: 760px; } }
@media (max-width: 760px) { .gallery-page .gallery-download__panel { grid-template-columns: minmax(0, 1fr); } .gallery-page .gallery-download__copy { max-width: none; } }
@media (max-width: 720px) { .gallery-page .gallery-hero { padding-top: var(--space-7); } .gallery-page .gallery-hero__grid { gap: var(--space-5); } .gallery-page .gallery-hero__copy { padding-top: 0; } .gallery-page .gallery-hero__lead { font-size: 1.125rem; line-height: 1.45; } .gallery-page .gallery-hero__media > img { aspect-ratio: 4 / 3; object-position: 65% center; } .gallery-page .gallery-hero__verdict { width: 100%; min-width: 0; margin: 0; } .gallery-page .gallery-hero__cta { width: 100%; min-height: 48px; } .gallery-page .gallery-types__intro, .gallery-page .gallery-decisions__intro, .gallery-page .gallery-summary__intro, .gallery-page .gallery-night__intro { max-width: 35ch; } .gallery-page .gallery-types__grid, .gallery-page .gallery-decisions__grid, .gallery-page .gallery-summary__grid { grid-template-columns: minmax(0, 1fr); } .gallery-page .gallery-decisions__grid > :last-child, .gallery-page .gallery-summary__grid > :last-child { grid-column: auto; } .gallery-page .gallery-type-card h3 { min-height: 0; } .gallery-page .gallery-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .gallery-page .gallery-criterion, .gallery-page .gallery-trial__card article { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .gallery-page .gallery-observe, .gallery-page .gallery-trial__card article p { grid-column: auto; } .gallery-page .gallery-tuning__head { gap: var(--space-5); } .gallery-page .gallery-tuning__head > div { max-width: 35ch; } .gallery-page .gallery-tuning__head img { aspect-ratio: 1 / 1; } .gallery-page .gallery-tuning__grid { grid-template-columns: minmax(0, 1fr); } .gallery-page .gallery-tune-card, .gallery-page .gallery-tuning__rule, .gallery-page .gallery-tune-card--balance { grid-column: auto; } .gallery-page .gallery-tuning__rule { padding: var(--space-4); } .gallery-page .gallery-trial__method { max-width: 34ch; } .gallery-page .gallery-night__grid img { aspect-ratio: 4 / 3; } .gallery-page .gallery-checklist article { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .gallery-page .gallery-download { padding-bottom: var(--space-7); } .gallery-page .gallery-download__button { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .gallery-page .meter__segment { transition: none; } }
ul { list-style: none !important; }
.nav-toggle { flex-direction: column; }