/* October 15 approval preview: complete native menus at their original aspect ratio. */
.menu-showcase-page { --menu-accent:#9cdcff; }
.menu-showcase-page.dawnbreakers-menu-page { --menu-accent:#f0ce87; }
.menu-showcase-page .menu-hero { max-width:1440px; margin:0 auto; padding:48px 5vw 52px; }
.menu-intro { display:grid; grid-template-columns:1.15fr 1fr; align-items:end; gap:32px 80px; margin-bottom:34px; }
.menu-intro .eyebrow { color:var(--menu-accent); letter-spacing:.19em; margin:0 0 16px; font-size:11px; }
.menu-intro h1 { color:#f3f7fc; font-size:clamp(38px,4.7vw,66px); font-weight:550; line-height:1.08; letter-spacing:-.045em; margin:0; }
.menu-intro h1 em { color:var(--menu-accent); font-style:normal; }
.menu-intro .hero-description { font-size:16px; line-height:1.75; color:#b9cadc; margin:0 0 20px; max-width:600px; }
.menu-intro .actions { margin:0; gap:12px; flex-wrap:wrap; }
.menu-intro .button { font-size:12px; padding:12px 17px; }
.menu-intro .button:not(.quiet) { background:var(--menu-accent); color:#091322; border-color:var(--menu-accent); }
.menu-gallery { border:1px solid #adcffb44; border-radius:18px; background:#07101e; box-shadow:0 28px 75px #0007,0 0 40px #52abff0b; overflow:hidden; }
.menu-gallery-header { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:16px 22px; background:linear-gradient(100deg,#14243b,#091421); border-bottom:1px solid #9ec7ec26; }
.menu-gallery-header h2 { margin:0; font-size:14px; font-weight:500; letter-spacing:.02em; }
.menu-gallery-status { display:flex; gap:8px; align-items:center; color:#c5d2e1; font-size:10px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.menu-gallery-status::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--menu-accent); box-shadow:0 0 9px var(--menu-accent); }
.menu-panel { margin:0; }
.menu-panel[hidden] { display:none; }
.menu-image-open { position:relative; width:100%; display:block; padding:0; border:0; background:#050a12; color:white; cursor:zoom-in; }
.menu-image-open img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; transform:none; filter:none; }
.menu-image-open .menu-expand { position:absolute; right:14px; bottom:13px; padding:8px 12px; background:#071320ed; border:1px solid #adcffb55; border-radius:7px; font-size:11px; opacity:0; transition:opacity .18s; }
.menu-image-open:hover .menu-expand,.menu-image-open:focus-visible .menu-expand { opacity:1; }
.menu-image-open:focus-visible { outline:3px solid var(--menu-accent); outline-offset:-4px; }
.menu-panel figcaption { padding:15px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #adcffb26; font-size:12px; line-height:1.5; color:#b5c6d9; }
.menu-panel figcaption strong { font-weight:500; color:#f0f6fc; margin-right:9px; }
.menu-panel figcaption .menu-capture-date { color:#8499b2; white-space:nowrap; font-size:10px; }
.menu-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid #adcffb26; padding:0; }
.menu-tabs button { display:flex; align-items:center; gap:14px; padding:19px 22px; border:0; border-right:1px solid #adcffb20; border-top:2px solid transparent; background:#091523; color:#b3c4d7; text-align:left; cursor:pointer; min-width:0; }
.menu-tabs button:last-child { border-right:0; }
.menu-tabs button[aria-selected=true] { border-top-color:var(--menu-accent); background:linear-gradient(180deg,#1b385b,#102136); color:#fff; }
.menu-tabs button:hover { background:#16304b; }
.menu-tabs button:focus-visible { outline:2px solid var(--menu-accent); outline-offset:-5px; }
.menu-tabs .menu-tab-number { color:var(--menu-accent); font-size:11px; letter-spacing:.04em; }
.menu-tabs .menu-tab-copy { display:grid; gap:4px; min-width:0; }
.menu-tabs .menu-tab-copy strong { font-size:13px; font-weight:500; }
.menu-tabs .menu-tab-copy small { font-size:10px; color:#92a8c1; line-height:1.35; }
.menu-gallery-note { display:flex; justify-content:space-between; gap:20px; margin:15px 1px 0; color:#859ab4; font-size:11px; line-height:1.6; }
.menu-gallery-note a { color:#c8e5ff; text-underline-offset:3px; }
.menu-fullscreen { border:1px solid #a5d5ff55; border-radius:14px; width:min(96vw,1948px); max-width:none; max-height:96vh; padding:12px; background:#07111e; color:white; overflow:auto; box-shadow:0 35px 100px #000c; }
.menu-fullscreen::backdrop { background:#02060eea; backdrop-filter:blur(10px); }
.menu-fullscreen-bar { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:4px 4px 14px; }
.menu-fullscreen-bar h2 { margin:0; font-size:15px; font-weight:500; }
.menu-fullscreen-bar button { color:#e7f1ff; border:1px solid #adcffb66; background:#14273d; border-radius:6px; padding:8px 13px; cursor:pointer; }
.menu-fullscreen img { width:100%; height:auto; display:block; object-fit:contain; }
.menu-showcase-page .classbound-vision { padding-top:64px; }
@media(max-width:760px) {
 .menu-showcase-page .menu-hero { padding:30px 5vw 36px; }
 .menu-intro { grid-template-columns:1fr; gap:20px; margin-bottom:26px; }
 .menu-intro h1 { font-size:clamp(35px,8vw,54px); }
 .menu-intro .hero-description { font-size:14px; }
 .menu-gallery { border-radius:12px; }
 .menu-gallery-header { padding:13px; gap:10px; }
 .menu-gallery-header h2 { font-size:12px; }
 .menu-gallery-status { font-size:8px; letter-spacing:.04em; }
 .menu-panel figcaption { padding:12px 13px; font-size:11px; display:block; }
 .menu-panel figcaption .menu-capture-date { display:block; margin-top:4px; font-size:9px; }
 .menu-tabs button { padding:14px 10px; gap:6px; align-items:flex-start; }
 .menu-tabs .menu-tab-copy strong { font-size:11px; }
 .menu-tabs .menu-tab-copy small { font-size:9px; }
 .menu-tabs .menu-tab-number { font-size:9px; padding-top:2px; }
 .menu-gallery-note { display:block; font-size:10px; }
 .menu-gallery-note span { display:block; margin-top:5px; }
 .menu-image-open .menu-expand { opacity:1; font-size:9px; right:6px; bottom:6px; padding:5px 7px; }
 .menu-fullscreen { width:98vw; padding:6px; }
 .menu-fullscreen-bar h2 { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .menu-image-open .menu-expand { transition:none; } }
