#color-intro{position:fixed;inset:0;margin:0;padding:0;border:0;width:100%;height:100dvh;max-width:none;max-height:none;overflow:hidden;background:#171d1d;color:#efeee5;isolation:isolate;overscroll-behavior:contain}#color-intro::backdrop{background:#171d1d}#color-intro[open]{display:block}#color-intro button{color:inherit}#color-intro button:focus-visible{outline:1px solid currentColor;outline-offset:7px}
/* Photograph remains still. Crop excludes the supplied image's black bars. */
.intro-texture{position:absolute;inset:0;pointer-events:none;background:url('/assets/wildflowers-pigment-selected.jpg') center/max(100vw,58dvh) auto;filter:grayscale(1) brightness(.38)}
.intro-tone{position:absolute;inset:0;background:linear-gradient(180deg,#07141438,#07141430 30%,#07141470 60%,#071414bc);pointer-events:none}
.intro-opening-line{position:absolute;z-index:2;left:6%;right:6%;top:26%;display:flex;flex-direction:column;align-items:center;pointer-events:none}.intro-lettering{display:block;width:min(100%,1250px);overflow:visible}.intro-lettering text{font:400 200px var(--serif);letter-spacing:-8px}.intro-letter-stroke{fill:none;stroke:#f0eee4;stroke-width:.8;stroke-dasharray:1100;stroke-dashoffset:1100;filter:drop-shadow(1px 2px 1px #00100e)}.intro-letter-fill{fill:#e8e9dd;opacity:0;filter:drop-shadow(1px 2px 1px #00100e)}.intro-opening-line>span{font:400 clamp(13px,1.4vw,21px)/1.4 var(--serif);letter-spacing:.18em;margin-top:-8px}
.intro-top{position:absolute;inset:0 0 auto;z-index:5;padding:28px 4.5%;display:flex;align-items:center;gap:24px;color:#fff}.intro-top>span{font:400 10px/1.5 var(--sans);letter-spacing:.18em}.intro-top .language-switch{margin-left:auto}.intro-top .language-switch a{color:inherit}.intro-skip{font-size:12px;padding:10px 0;border-bottom:1px solid #ffffff66}
.intro-center{position:absolute;left:8%;bottom:15%;width:84%;text-align:center;z-index:3}.intro-center h1{font:400 25px/1.5 var(--kserif);letter-spacing:.15em;margin:0 0 16px}.intro-center>p{font:400 14px/1.9 var(--kserif);word-break:keep-all;text-wrap:balance;margin:0}.intro-center br{display:none}.intro-enter{display:inline-flex;align-items:center;gap:45px;margin-top:24px;padding:10px 0;border-bottom:1px solid #eeeee580;font-size:12px}.intro-enter i{font-style:normal;font-size:22px;transition:transform .3s}.intro-enter:hover i{transform:translateX(7px)}
.intro-bottom{position:absolute;inset:auto 0 0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0;padding:25px 4.5%;border:0;background:none;color:inherit}.intro-edition{font:400 16px var(--serif)}.intro-bottom button{font-size:11px;padding:10px 0}.intro-progress{position:absolute;bottom:0;left:0;z-index:6;height:1px;width:100%;background:#eeeee566;transform-origin:left;transform:scaleX(0)}
html:not(:lang(ko)) #color-intro .intro-center h1{font-size:26px;letter-spacing:.03em}
@media(max-width:700px){.intro-top{padding:18px 6%;gap:12px}.intro-top>span{display:none}.intro-top .language-switch{margin-left:0;margin-right:auto}.intro-opening-line{left:3%;right:3%;top:32%}.intro-opening-line>span{font-size:13px;margin-top:12px}.intro-center{bottom:16%;left:7%;width:86%}.intro-center h1{font-size:23px;margin-bottom:18px}.intro-center>p{font-size:13px;line-height:1.9;max-width:300px;margin:auto}.intro-enter{margin-top:22px;gap:35px}.intro-bottom{padding:14px 6%;gap:12px}.intro-edition{font-size:12px}.intro-bottom button{font-size:10px}html:not(:lang(ko)) #color-intro .intro-bottom{flex-wrap:nowrap}}
@media(max-height:600px){.intro-opening-line{top:15%;left:18%;right:18%}.intro-center{bottom:14%}.intro-center h1{margin-bottom:7px;font-size:21px}.intro-center>p{font-size:12px}.intro-enter{margin-top:10px}.intro-lettering{max-width:580px}}

/* A brief luminous edge follows the lettering, never the artwork. */
.intro-letter-stroke{stroke-width:1.05}
.intro-letter-spark{fill:none;stroke:#fff0d8;stroke-width:1.8;stroke-dasharray:90 1010;stroke-dashoffset:1100;opacity:0;filter:drop-shadow(0 0 3px #ffe6bbaa) drop-shadow(0 0 9px #dc9bbd99)}
.intro-letter-glint{fill:#fffdf0;opacity:0;filter:drop-shadow(0 0 4px #fff4d699);clip-path:polygon(-35% 0,-20% 0,-35% 100%,-50% 100%)}

#color-intro .intro-center h1[lang="en"]{font-family:var(--serif);font-size:30px;letter-spacing:.045em}
.intro-effect-options{display:flex;justify-content:center;gap:12px;width:100%;flex-wrap:wrap}.intro-effect-options button{padding:10px 16px;background:#0b171adb;border:1px solid #ffffff40;border-radius:2px;font-size:12px;color:#fff}.intro-effect-options button[aria-pressed="true"]{background:#e7e6dc;color:#182320!important;border-color:#e7e6dc}
@media(max-width:700px){.intro-effect-options{gap:6px}.intro-effect-options button{padding:10px 9px;font-size:10px}}

/* Desktop uses the original camera photograph, not the 591px preview. */
@media(min-width:701px){.intro-texture{background-image:url("/assets/intro-pigment-hq.webp");background-size:cover;background-position:center 48%}}

#color-intro .intro-music-note{font-size:11px;line-height:1.6;letter-spacing:.02em;margin:14px 0 0;opacity:.7}
/* Keep the opening title clear of the artist name at full-window replay. */
@media(min-width:701px) and (min-height:601px){.intro-opening-line{top:16%}.intro-lettering{width:min(100%,1100px)}}
@media(max-height:600px){.intro-opening-line{top:8%}.intro-lettering{max-width:440px}}

/* The title, subtitle and artist share one flow, so short screens cannot overlap them. */
#color-intro[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:stretch}
#color-intro .intro-top{position:relative;inset:auto;grid-row:1;padding:clamp(12px,3dvh,28px) 4.5%}
#color-intro .intro-copy{position:relative;grid-row:2;z-index:3;width:min(88%,920px);max-height:none;margin:auto;overflow:visible;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3dvh,30px);box-sizing:border-box;padding:8px 0}
#color-intro .intro-opening-line{position:static;inset:auto;width:100%;display:flex;flex-direction:column;align-items:center;flex-shrink:0}
#color-intro .intro-lettering{width:min(100%,900px);max-height:29dvh}
#color-intro .intro-opening-line>span{margin:0;font-size:clamp(13px,2.2dvh,21px);line-height:1.5}
#color-intro .intro-center{position:static;inset:auto;width:100%;flex-shrink:0}
#color-intro .intro-center h1,#color-intro .intro-center h1[lang=en]{font-size:clamp(18px,3.2dvh,28px);line-height:1.4;margin:0 0 10px}
#color-intro .intro-center>p{font-size:clamp(11px,1.8dvh,14px);line-height:1.7;max-width:42ch;margin:auto}
#color-intro .intro-enter{margin-top:clamp(10px,2dvh,22px);padding:8px 0}
#color-intro .intro-music-note{margin-top:10px;font-size:10px}
#color-intro .intro-bottom{position:relative;inset:auto;grid-row:3;padding:12px 4.5%;min-height:36px;box-sizing:border-box}
#color-intro .intro-texture.has-gallery{background:none!important}
.intro-gallery-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;transform:none;filter:none}
.intro-gallery-photo.is-current{opacity:1}
#color-intro .intro-gallery-controls{display:flex;align-items:center;gap:12px;font:11px/1.4 sans-serif}
#color-intro .intro-gallery-controls button{min-width:34px;min-height:36px;border:0;padding:5px;background:transparent;color:inherit;font:inherit}
#color-intro .intro-gallery-controls .intro-gallery-play{border-bottom:1px solid #ffffff55}
@media(max-height:500px){#color-intro .intro-top{padding-block:8px}#color-intro .intro-copy{gap:10px}#color-intro .intro-lettering{max-height:22dvh}#color-intro .intro-center>p,#color-intro .intro-music-note{display:none}#color-intro .intro-center h1{margin-bottom:4px}#color-intro .intro-enter{margin-top:4px}#color-intro .intro-bottom{padding-block:6px}}
@media(prefers-reduced-motion:reduce){.intro-gallery-photo{transition:none}}

#color-intro .intro-bottom .intro-edition{display:none}

/* The chosen canvas stays still while its luminance and colour gradually return. */
#color-intro .intro-texture{background:none!important;filter:none!important}
#color-intro .intro-gallery-photo{object-fit:cover;opacity:1;transform:none;filter:brightness(.12) saturate(0)}
#color-intro.entrance-ready .intro-gallery-photo{filter:brightness(1) saturate(1)}
#color-intro .intro-copy,#color-intro .intro-top{opacity:0}
#color-intro.entrance-ready .intro-copy,#color-intro.entrance-ready .intro-top{opacity:1}
#color-intro .intro-letter-fill{opacity:1;filter:drop-shadow(0 2px 6px #0004)}
#color-intro .intro-letter-stroke{display:inline;stroke-width:.7;stroke-dasharray:1000;stroke-dashoffset:0;opacity:1}
#color-intro .intro-letter-spark,#color-intro .intro-letter-glint{display:none}
#color-intro .intro-bottom{display:none}
#color-intro .intro-tone{background:linear-gradient(180deg,#1020223d,#0e1a1a38 35%,#091b1d80 100%)}
#color-intro .intro-music-note{opacity:.6}
@media(prefers-reduced-motion:reduce){#color-intro .intro-copy,#color-intro .intro-top{transform:none}}

/* A solid paper-coloured entry button stays legible on every painting. */
#color-intro .intro-center .intro-enter{box-sizing:border-box;justify-content:center;text-align:center;min-width:116px;min-height:40px;padding:8px 18px;border:1px solid #f2f0e5;background:#f2f0e5;color:#1c2a25;font-size:13px;font-weight:500;line-height:1.4;gap:22px;text-shadow:none;transition:background-color .2s,border-color .2s}
#color-intro .intro-center .intro-enter:hover{background:#fffdf5;border-color:#fffdf5}
#color-intro .intro-center .intro-enter:focus-visible{outline:2px solid #fffdf5;outline-offset:5px}

#color-intro .intro-center>.intro-music-note{margin:clamp(26px,4dvh,40px) auto 0}

/* Approved A composition: one shared centre axis without an inner scrollbar. */
#color-intro .intro-copy{width:min(82%,840px);gap:clamp(38px,5dvh,52px)}
#color-intro .intro-lettering{width:min(100%,760px)}
#color-intro .intro-center h1,#color-intro .intro-center h1[lang=en]{font-size:26px;margin-bottom:14px}
#color-intro .intro-enter{margin-top:24px}
@media(max-width:600px){#color-intro .intro-copy{width:88%;gap:40px}#color-intro .intro-center h1,#color-intro .intro-center h1[lang=en]{font-size:25px}}
@media(max-height:500px){#color-intro .intro-copy{gap:18px}#color-intro .intro-center h1,#color-intro .intro-center h1[lang=en]{font-size:21px;margin-bottom:4px}#color-intro .intro-enter{margin-top:10px}}