:root { color-scheme:light; --ink:#171717; --muted:#666; }
* { box-sizing:border-box; }
body { margin:0; background:#fff; color:var(--ink); font:14px/1.5 Arial,sans-serif; }
button,select { font:inherit; color:inherit; }
button { border:0; background:none; cursor:pointer; padding:0; }
button:disabled { opacity:.3; cursor:default; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid #d98aa8; outline-offset:5px; }
[hidden] { display:none!important; }
.skip-link { position:fixed; top:-100px; left:20px; background:#fff; color:#171717; padding:12px; z-index:100; }
.skip-link:focus { top:12px; }
.archive-bar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px max(24px,calc((100vw - 1180px)/2)); border-bottom:1px solid #e8e8e8; font-size:12px; }
.archive-bar nav { display:flex; gap:24px; }
.archive-bar [aria-current] { text-decoration:underline; text-underline-offset:5px; }
.loading,.empty { padding:60px 24px; text-align:center; }
.archive-intro { max-width:1180px; margin:76px auto 46px; padding:0 24px; }
.archive-eyebrow { font-size:11px; letter-spacing:.2em; }
.archive-intro h1 { font-size:clamp(32px,5vw,56px); font-weight:400; letter-spacing:-.04em; margin:12px 0 16px; }
.archive-intro > p:last-child { color:#666; }
.archive-cards { display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:1180px; margin:auto; padding:0 24px; }
.archive-card { border:1px solid #e5e5e5; display:block; overflow:hidden; }
.archive-card-brand { height:142px; display:flex; align-items:center; padding:24px; }
.archive-card > img { display:block; width:100%; height:auto; aspect-ratio:2.8; object-fit:cover; }
.archive-card-caption { display:flex; justify-content:space-between; gap:12px; padding:24px; }
.archive-story { max-width:1132px; margin:48px auto 0; padding:32px 0; border-top:3px solid; border-image:linear-gradient(90deg,#f4aac7,#fff) 1; }
.archive-story h2 { font-size:28px; font-weight:400; letter-spacing:-.025em; margin:12px 0; }
.archive-story p { max-width:650px; color:#666; }
.archive-story a { display:inline-block; margin-top:12px; padding-block:12px; text-decoration:underline; text-underline-offset:5px; }
.era-2022 { background:#100b3a; color:#fff; border-color:#100b3a; }
.historical-mark { display:block; }
.historical-mark img { display:block; width:100%; height:auto; }
.archive-card-brand .mark-2022 { width:306px; }
.archive-card-brand .mark-2023 { width:248px; }
.historical-site { position:relative; }
.legacy-opening { position:relative; }
.legacy-hero { display:block; width:100%; }
.legacy-hero img { display:block; width:100%; height:auto; }
body[data-era="2022"] .legacy-hero img { aspect-ratio:2/1; height:auto; object-fit:cover; }
.historical-menu { display:none; }
.photo-card { margin:0; }
.photo-card button { display:block; width:100%; height:100%; overflow:hidden; }
.photo-card img { display:block; width:100%; height:auto; }
.photo-error { padding:24px 12px; text-align:center; }
.photo-error button { min-height:44px; text-decoration:underline; }
.legacy-collection { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; align-items:center; margin-bottom:24px; }
.legacy-collection select { padding:8px; max-width:100%; background:transparent; color:inherit; border:1px solid currentColor; }
.legacy-collection nav { display:flex; gap:16px; }
.legacy-collection a { padding:0!important; }
.legacy-playback { text-decoration:underline; min-height:44px; }
.legacy-footer { max-width:1180px; margin:0 auto; padding:24px 24px 38px; text-align:center; font:11px/1.5 Arial,sans-serif; color:var(--muted); }
.legacy-footer a { display:inline-block; padding:12px; text-decoration:underline; text-underline-offset:4px; }
.legacy-refresh { padding:16px 24px; background:#fff3f7; color:#171717; }
.legacy-refresh button { text-decoration:underline; min-height:44px; }

/* November 2022: original percentages, signature canvas and serif navigation. */
body[data-era="2022"] { background:#100b3a; color:#fff; font-family:'Times New Roman',Times,serif; line-height:normal; --ink:#fff; --muted:#c1bdd4; }
body[data-era="2022"] .historical-header { position:relative; z-index:1; width:92%; margin:1% 4%; border:1px solid rgba(255,255,255,.65); background:rgba(35,51,111,.38); }
body[data-era="2022"] .has-opening .historical-header { position:absolute; top:0; }
body[data-era="2022"] .historical-brand { display:block; }
body[data-era="2022"] .mark-2022 { width:30%; margin:0 auto 1%; opacity:.75; }
body[data-era="2022"] .historical-header nav { width:50%; border-top:5px solid rgba(255,255,255,.3); margin:auto; text-align:center; }
body[data-era="2022"] .historical-header nav a { position:relative; display:inline-block; margin:2% 8%; font-size:1.8vw; }
body[data-era="2022"] .historical-header nav a:hover::before { content:''; position:absolute; width:100%; border-top:3px solid #fff; top:-46%; }
.legacy-hero-controls button { position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:52px; height:64px; opacity:0; transition:opacity .25s; }
.legacy-hero-controls button:hover,.legacy-hero-controls button:focus-visible { opacity:1; }
.legacy-hero-controls img { display:block; width:clamp(16px,1.5vw,24px); }
.hero-prev { left:1%; }
.hero-next { right:1%; }
.legacy-album { display:flex; gap:12px; overflow-x:auto; padding:0 50px; margin-top:2%; scroll-snap-type:x proximity; scrollbar-width:none; }
.legacy-album::-webkit-scrollbar { display:none; }
.album-column { display:flex; flex-direction:column; gap:6px; flex:0 0 var(--column-width); scroll-snap-align:center; }
.album-frame { width:var(--frame-width); min-width:0; }
.album-frame .photo-card button { aspect-ratio:var(--frame-ratio); }
.album-frame .photo-card img { width:100%; height:100%; object-fit:cover; }
.album-column .photo-card { position:relative; }
body[data-era="2022"] .historical-footer { padding:64px 24px 12px; text-align:center; font-size:14px; color:#c1bdd4; }
body[data-era="2022"] select option { background:#100b3a; }

/* August 2023: twin 200px logos, 80px page padding and the original tile sequence. */
body[data-era="2023"] main { padding:0 20px; }
body[data-era="2023"] .historical-site { width:100%; margin:auto; font:16px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#000; }
body[data-era="2023"] .historical-header { display:flex; flex-wrap:wrap; align-items:center; padding-top:40px; padding-bottom:4px; }
.historical-brands { display:flex; align-items:center; }
.historical-brands a:first-child { margin-right:32px; }
.historical-brands .historical-mark { width:200px; }
body[data-era="2023"] .historical-header nav { display:flex; align-items:center; margin-left:auto; font:24px/32px 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,serif; }
body[data-era="2023"] .historical-header nav a { margin-left:20px; white-space:nowrap; position:relative; }
body[data-era="2023"] .historical-header nav a:first-child { border-bottom:2px solid #000; }
body[data-era="2023"] .historical-header nav a:not(:first-child):hover::after { content:''; position:absolute; bottom:-2px; left:0; width:100%; border-bottom:2px solid #000; }
.historical-language img { display:block; width:120px; height:auto; }
body[data-era="2023"] .legacy-opening { margin:0 .22em; }
.legacy-mosaic { display:flex; flex-wrap:wrap; }
.mosaic-column { display:flex; flex-wrap:wrap; width:100%; }
.mosaic-tile { width:100%; padding:4px; }
.mosaic-tile .photo-card { height:100%; }
.mosaic-tile img { height:100%; object-fit:cover; object-position:center; transition:transform .5s; }
.mosaic-tile button:hover img { transform:scale(1.1); }
body.monochrome .legacy-opening img,body.monochrome .legacy-mosaic img { filter:grayscale(1); }
body[data-era="2023"] .historical-footer { max-width:1280px; margin:auto; padding:96px 0 64px; text-align:center; color:#4b5563; }
.historical-socials { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin-top:32px; }
.historical-socials a { display:block; }
.historical-socials img { width:24px; height:24px; }
body[data-era="2023"] .historical-footer p { margin-top:32px; font-size:12px; line-height:16px; }

.lightbox { border:0; margin:0; padding:24px 40px; width:100%; height:100%; max-width:none; max-height:none; background:#fff; color:#171717; overflow:hidden; --ink:#171717; --muted:#666; }
.lightbox[open] { display:flex; flex-direction:column; }
.lightbox::backdrop { background:#fff; }
.viewer-header { display:flex; justify-content:flex-end; min-height:44px; }
.lightbox-close { padding:12px; }
.viewer-stage { position:relative; display:flex; align-items:center; justify-content:center; flex:1; min-height:0; margin:16px 0; touch-action:pan-y; }
.viewer-image,.viewer-stage img { width:100%; height:100%; }
.viewer-stage img { object-fit:contain; }
.viewer-footer { display:flex; justify-content:center; gap:36px; }
.viewer-footer button { width:44px; height:44px; }
.stage-status { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; width:min(100%,320px); }
.stage-status button { min-height:44px; text-decoration:underline; }
.is-loading img,.has-image-error img { visibility:hidden; }
.viewing { overflow:hidden; }
@media(min-width:640px) { body[data-era="2023"] .historical-site { max-width:640px; } }
@media(min-width:768px) {
  body[data-era="2023"] main { padding:0 80px; }
  body[data-era="2023"] .historical-site { max-width:768px; }
  .mosaic-column { width:50%; }
  .mosaic-tile.half { width:50%; }
}
@media(min-width:1024px) { body[data-era="2023"] .historical-site { max-width:1024px; } }
@media(min-width:1280px) { body[data-era="2023"] .historical-site { max-width:1280px; } }
@media(min-width:1536px) { body[data-era="2023"] .historical-site { max-width:1536px; } }
@media(max-width:1023px) {
  .album-column { display:contents; }
  .legacy-album .album-frame { flex:0 0 min(var(--frame-width),70vw); scroll-snap-align:center; }
  body[data-era="2023"] .historical-header nav { font-size:16px; gap:12px; }
  body[data-era="2023"] .historical-header nav a { margin-left:0; }
  .historical-brands .historical-mark { width:150px; }
  .historical-brands a:first-child { margin-right:16px; }
  .historical-language img { width:80px; }
}
@media(max-width:767px) {
  .archive-bar { padding:16px 20px; gap:12px; flex-wrap:wrap; }
  .archive-bar nav { gap:20px; }
  .archive-cards { grid-template-columns:1fr; gap:24px; padding:0 20px; }
  .archive-intro { margin-top:40px; padding-inline:20px; }
  .archive-story { margin-inline:20px; }
  body[data-era="2023"] .historical-menu { display:block; margin-left:auto; font-size:20px; padding:8px; }
  body[data-era="2023"] .historical-header nav { display:none; width:100%; margin:16px 0; }
  body[data-era="2023"] .menu-open nav { display:flex; flex-wrap:wrap; }
  .historical-brands .historical-mark { width:130px; }
  .legacy-album { padding:0 20px; }
  body[data-era="2022"] .historical-header nav a { font-size:clamp(12px,1.8vw,22px); }
  body[data-era="2022"] .historical-header { width:92%; }
  body[data-era="2022"] .mark-2022 { width:40%; }
  .lightbox { padding:12px 20px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
