:root{color-scheme:dark;--blue:#4ba5cc;--paper:#e4e6e8;--muted:#a6afb8;--line:#ffffff20;--gutter:clamp(20px,4vw,56px);--section-space:clamp(56px,8vw,104px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:40px;scrollbar-gutter:stable}
body{margin:0;background:#080a0d;color:var(--paper);font-family:Arial,Helvetica,sans-serif;font-size:clamp(17px,1.35vw,19px);line-height:1.65}body.modal-open{overflow:hidden}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}a:hover{color:#8ed8f8}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid #8ed8f8;outline-offset:5px}
img{display:block;max-width:100%}.wrap{width:min(1184px,calc(100% - 2 * var(--gutter)));margin-inline:auto}.section{padding-block:var(--section-space);border-top:1px solid var(--line)}
h1,h2,h3,p{margin-top:0}h1,h2,h3{text-wrap:balance}h1{font-size:clamp(44px,6vw,84px);line-height:1.02;letter-spacing:-.035em}h2{font-size:clamp(28px,3.2vw,44px);line-height:1.15;letter-spacing:-.025em}h3{font-size:clamp(23px,2.1vw,30px);line-height:1.25;font-weight:500;letter-spacing:-.015em}p{margin-bottom:1.3em}p:last-child{margin-bottom:0}
.hero{position:relative;margin-top:24px;height:clamp(400px,72svh,740px);overflow:hidden;border-radius:4px;background:#0b1825}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0009,transparent 58%);pointer-events:none}.hero-image{width:100%;height:100%;object-fit:cover;object-position:center 60%}.hero-heading{position:absolute;inset:clamp(28px,4vw,52px);bottom:auto;display:grid;grid-template-columns:1.35fr 1fr;gap:6%;color:#fff;z-index:1}.hero-heading h1{margin-bottom:0}.hero-heading p{font-size:clamp(16px,1.7vw,23px);line-height:1.5;border-bottom:1px solid var(--blue);align-self:start;padding-bottom:16px;max-width:370px}
.intro{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(210px,1fr);gap:8%;padding-block:48px var(--section-space)}.intro>div{max-width:65ch}.counters{margin:0}.counters div{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.counters div:first-child{padding-top:0}.counters dt{font-size:clamp(40px,4.5vw,58px);line-height:1.1;color:#fff;letter-spacing:-.04em}.counters dd{margin:0;font-size:16px;line-height:1.5;color:var(--muted)}
.section-heading{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10%;align-items:start;margin-bottom:40px}.section-heading h2{margin-bottom:0}.section-heading p{max-width:380px;border-bottom:1px solid var(--blue);padding-bottom:16px;color:var(--muted);font-size:17px}
.wide-image{width:min(100%,960px);height:auto;object-fit:contain;margin:0 auto 40px;border-radius:6px}#exhibition-module>.wide-image{width:min(100%,1120px)}.prose{max-width:70ch;margin:32px 0}.section>p{max-width:70ch}
.principles{margin-top:56px}.principle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10%;align-items:center;padding-block:36px;border-top:1px solid var(--line)}.principle-copy{max-width:56ch}.principle:nth-child(even) .principle-copy{order:2}.principle img{width:auto;height:auto;max-width:100%;max-height:340px;object-fit:contain;justify-self:center;border-radius:6px}.principle h3{margin-bottom:20px}
.module{margin-block:40px}.module>h3{margin-bottom:20px}.module-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:7%;align-items:center;padding:32px;background:#11161d;border:1px solid var(--line);border-radius:12px}.module-card>p{margin-bottom:0;max-width:60ch}.module-visual{min-width:0;min-height:260px;display:grid;place-items:center;padding:20px;background:#f1f2f3;border-radius:8px}.module-visual img{width:auto;height:auto;max-width:100%;max-height:280px;object-fit:contain}
.gallery{padding-top:var(--section-space);background:#030609;border-top:1px solid var(--line)}.gallery>h2{text-align:center;margin:0 auto 24px}.artwork{position:relative;isolation:isolate;padding:clamp(48px,6vw,80px) var(--gutter);text-align:center;--glow:1;--mask:0;contain:paint}.artwork:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 47%,#144668 0%,#0a263d 40%,transparent 85%);opacity:var(--glow);z-index:-1;will-change:opacity}.artwork h3{font-size:clamp(20px,2vw,27px);line-height:1.3;font-weight:500;max-width:680px;margin:0 auto 28px;opacity:var(--glow)}.painting-button{position:relative;display:block;padding:0;border:0;background:#000;margin:auto;width:fit-content;max-width:100%;box-shadow:0 20px 65px #0007}.painting-button img{width:min(760px,calc(56svh * var(--art-ratio,1)),calc(100vw - 2 * var(--gutter)));height:auto;max-width:100%;object-fit:contain}.painting-button:after{content:'';position:absolute;inset:0;background:#000;opacity:var(--mask);pointer-events:none;will-change:opacity}.artwork:focus-within h3,.artwork:focus-within:before{opacity:1}.artwork:focus-within .painting-button:after{opacity:0}
.players{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin-top:32px}.player{width:min(250px,100%);font-size:15px}.play{display:block;min-height:44px;border:1px solid #ffffff65;background:#080a0d60;border-radius:28px;padding:9px 22px;margin:0 auto 8px;letter-spacing:.06em;font-size:14px}.play:hover{border-color:var(--blue);background:#163449}.seek{position:relative;border:1px solid #ffffff50;border-radius:18px;height:32px;overflow:hidden;background:linear-gradient(to right,#d8d8d8 var(--progress,0%),#080a0d60 var(--progress,0%))}.seek input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.seek:focus-within{outline:2px solid var(--blue);outline-offset:3px}.seek span{font-size:12px;position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;color:var(--timer-color,#d8d8d8)}.audio-error{font-size:14px;color:#ffc5ad;margin-top:8px}.audio-error:empty{display:none}
.format{margin-block:40px;padding-block:28px;border-top:1px solid var(--line)}.format h3{font-size:clamp(21px,2vw,27px);margin-bottom:24px}.format-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7%;align-items:center}.format-visual{display:grid;place-items:center;aspect-ratio:16/10;min-width:0;background:#10151c;border-radius:8px;overflow:hidden}.format-visual img{width:100%;height:100%;object-fit:contain}.format-content p{margin-bottom:0}.section>h3{margin-top:56px}address{font-style:normal;margin-top:32px}footer{padding:36px 0 48px;border-top:1px solid var(--line);font-size:14px;text-align:center;color:var(--muted)}
.menu-toggle{position:fixed;right:20px;top:20px;width:52px;height:52px;z-index:20;border:1px solid var(--line);border-radius:8px;background:#080a0de8;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}.menu-toggle span{display:block;width:25px;height:2px;background:#fff}dialog{border:0}.navigation{height:100dvh;max-height:100dvh;margin:0 0 0 auto;width:min(430px,100%);padding:72px 30px 32px;background:#0d1118;color:var(--paper);overflow-y:auto}dialog::backdrop{background:#000b}.navigation nav{display:flex;flex-direction:column;gap:8px}.navigation a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-size:clamp(17px,2vw,21px);line-height:1.4;text-decoration:none}.close-menu,.close-viewer{position:absolute;right:12px;top:10px;width:48px;height:48px;line-height:1;font-size:36px;border:0;background:transparent}.image-viewer{margin:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;background:#080a10;color:white;padding:0;overflow:hidden}.viewer-stage{height:100%;display:grid;place-items:center;overflow:hidden;touch-action:none}.viewer-stage img{width:auto;height:auto;max-width:94%;max-height:86svh;object-fit:contain;user-select:none;touch-action:none}.close-viewer{z-index:2}.viewer-hint{position:absolute;bottom:12px;width:100%;text-align:center;font-size:12px;pointer-events:none;z-index:2;padding-inline:20px;color:var(--muted)}
.reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.js .reveal:not(.visible){opacity:0;transform:translateY(18px)}
@media(max-width:900px){.hero-heading{grid-template-columns:1.2fr 1fr}.hero-heading p{font-size:16px}.intro{gap:6%}.principle{gap:6%}.module-card{padding:24px;gap:5%}.module-visual{padding:14px;min-height:220px}.module-visual img{max-height:230px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}.js .reveal:not(.visible){opacity:1;transform:none}.artwork{--glow:1!important;--mask:0!important}}
/* Deliberate landscape canvas; portrait does not rearrange the composition. */
/* Stable illustration frames must not grow when lazy images are decoded. */
.principle img{width:100%;height:340px}
.module-visual{height:320px;min-height:0;border:0;width:100%}.module-visual img{width:100%;height:100%;max-height:none;min-height:0}
.image-preview{position:relative;cursor:zoom-in;border:0}.image-preview:after{content:'↗';position:absolute;right:10px;bottom:10px;border:1px solid #ffffff40;background:#0d1724d9;color:#fff;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:15px}
.format-visual{padding:0}
@media(max-width:900px){.principle img{height:300px;max-height:300px}.module-visual{height:280px;min-height:0}.module-visual img{max-height:none}}
@media(max-width:700px){body{min-width:900px}.painting-button img{width:min(760px,calc(56svh * var(--art-ratio,1)),840px)}}

/* Shared photographic/illustration frames; pictograms stay unframed. */
:root{--image-radius:16px;--image-border:#2780a4;--image-glow:0 0 48px 8px #2451ff30,0 18px 100px 14px #183bff20}
.wide-image,.principle img,.module-visual,.format-visual,.painting-button,.book-page .book-cover,.museum-page .museum-photo,.viewer-stage>img,.image-frame{border:0;border-right:1px solid var(--image-border);border-bottom:1px solid var(--image-border);border-radius:var(--image-radius);box-shadow:var(--image-glow)}
.hero-image,.painting-button img,.module-visual img,.format-visual img,.museum-page .museum-photo img{border-radius:inherit}
.painting-button,.museum-page .museum-photo{overflow:hidden}
.artwork:before{background:radial-gradient(ellipse 60% 55% at 50% 47%,#142568 0%,#0b153c 40%,transparent 85%)}
.painting-button{box-shadow:0 0 48px 8px rgb(36 81 255 / calc(.19 * var(--glow))),0 18px 100px 14px rgb(24 59 255 / calc(.125 * var(--glow)))}
.museum-page .museum-photos{padding-top:28px;padding-bottom:32px}

/* The text alone defines this row's height, then the three counters fill it. */
.intro{align-items:stretch}.counters{contain:size;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));align-self:stretch;min-height:0}
.counters div,.counters div:first-child{padding:0;min-height:0;align-items:center}.counters dt{font-size:clamp(38px,4.2vw,52px);line-height:1}

.module-panorama{position:relative;width:min(100%,1120px);margin:0 auto 40px;overflow:hidden;background:#f1f1f1}
.panorama-image{width:100%;height:auto;display:block}
.module-legend{position:absolute;left:72%;right:4%;top:17%;bottom:10%;margin:0;padding:0;list-style:none;display:grid;grid-template-rows:repeat(6,minmax(0,1fr));color:#246683;font-size:clamp(11px,1.25vw,18px);line-height:1.2}
.legend-row{display:grid;grid-template-columns:clamp(16px,2vw,28px) minmax(0,1fr);gap:clamp(8px,1vw,16px);align-items:center;border-bottom:1px solid #2780a449;transition:opacity var(--legend-duration,320ms) ease,transform var(--legend-duration,320ms) ease}
.legend-row.visible{transition-delay:var(--legend-delay,0ms)}
.legend-row img{width:100%;height:auto;max-height:28px;object-fit:contain;border:0;border-radius:0;box-shadow:none}
.js .legend-row:not(.visible){transform:translateX(-30px)}
@media(prefers-reduced-motion:reduce){.js .legend-row:not(.visible){opacity:1;transform:none}}

/* Two original levitation diagrams, without a portrait reflow. */
.module-card--paired{grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:4%}
.module-diagrams{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;min-width:0;align-items:center}
.module-diagrams .module-visual{height:auto;aspect-ratio:var(--diagram-ratio);padding:0;overflow:hidden}
.module-diagrams .reveal{transition-duration:3s}
.module-diagrams .module-visual:nth-child(2) .reveal{transition-delay:.4s}
@media(max-width:900px){.module-diagrams{gap:12px}}
.module-card--portraits{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.module-card--portraits .module-diagrams{grid-template-columns:repeat(2,minmax(0,1fr))}
.module-card--portraits .module-visual{height:auto;aspect-ratio:2/3;padding:0;background:#031e40}

/* Original opening composition: uncropped, edge-to-edge, without a frame. */
.hero{width:100%;height:auto;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.hero-image{width:100%;height:auto;object-fit:contain;object-position:center;border-radius:0}
.hero:after{background:none}
.hero-heading{inset:6.55% 2.9% auto;grid-template-columns:48% 42%;gap:7.1%}
.hero-heading h1{font-size:clamp(40px,5.83vw,100px);line-height:1;letter-spacing:0}
.hero-heading p{font-size:clamp(14px,2.08vw,30px);line-height:1.2;max-width:none;padding-bottom:16px}
#metamodern>.wide-image,#metamodern>.prose{width:100%;max-width:none;margin-inline:0}
/* This artwork already contains its illuminated blue wall, not a photo frame. */
.principle:first-child img{border:0;border-radius:0;box-shadow:none;mix-blend-mode:screen}

/* Gallery artworks keep square edges and no decorative blue frame. */
.gallery .painting-button,.gallery .painting-button img{border:0;border-radius:0}

.module-heading{display:flex;align-items:center;gap:16px}
.module-heading img{width:40px;height:40px;flex:0 0 40px;object-fit:contain;border:0;border-radius:0;box-shadow:none}

/* Levitation's two different aspect ratios share one image height. */
.module-card--paired:not(.module-card--portraits) .module-diagrams{display:flex;align-items:stretch}
.module-card--paired:not(.module-card--portraits) .module-visual:first-child{flex:1.396 1 0}
.module-card--paired:not(.module-card--portraits) .module-visual:nth-child(2){flex:1.208 1 0}