/* A scrolling, image-led front door to the original archive. */
@font-face { font-family:'Bunch'; src:url('assets/fonts/Bunch-Bold.otf') format('opentype'); font-style:normal; font-weight:700; font-display:swap; }
html { scroll-behavior:smooth; }
body.portfolio-page { --folio-bg:#171715; --folio-text:#f3f2ec; --folio-muted:#a2a39a; --folio-line:#ffffff1c; background:var(--folio-bg)!important; color:var(--folio-text); font-family:Arial,'Noto Sans SC',sans-serif; }
body.portfolio-page #app-content { padding:0!important; min-height:100svh; }
body.portfolio-page #back-btn { display:none!important; }
body.portfolio-page #music-toggle { z-index:650; top:18px; right:calc(clamp(16px,3.6vw,64px) - 8px); opacity:1; border-radius:50%; background:#ffffff0c; border-color:#ffffff18; padding:12px; }
.folio-nav { display:none; }
.portfolio-page .folio-nav { position:sticky; top:0; z-index:600; display:flex; align-items:center; justify-content:space-between; height:78px; padding:0 clamp(20px,3.6vw,64px); padding-right:clamp(80px,8vw,134px); background:#171715ed; backdrop-filter:blur(18px); border-bottom:1px solid var(--folio-line); font:14px/1.2 Arial,'Noto Sans SC',sans-serif; }
.folio-nav a { color:inherit; text-decoration:none; }
.folio-wordmark { font-family:'Bunch',Arial,sans-serif; font-size:26px; font-weight:700; font-style:normal; letter-spacing:-.04em; white-space:nowrap; }
.folio-wordmark small { display:block; margin-top:4px; color:#9d9e94; font-size:10px; letter-spacing:.13em; }
.folio-nav-links { display:flex; align-items:center; gap:28px; }
.folio-nav-links > a { color:#bcbdb3; }
.folio-nav-links > a:hover { color:#fff; }
.folio-nav details { position:relative; }
.folio-nav summary { display:flex; align-items:center; gap:15px; cursor:pointer; list-style:none; padding:12px 0; }
.folio-nav summary::-webkit-details-marker { display:none; }
.folio-nav summary span { transition:transform .2s; }
.folio-nav details[open] summary span { transform:rotate(45deg); }
.folio-more-panel { position:absolute; top:calc(100% + 15px); right:0; width:350px; padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:4px; background:#22231f; border:1px solid #ffffff26; box-shadow:0 24px 70px #0009; border-radius:12px; }
.folio-more-panel > a,.folio-more-split { padding:20px 14px; min-height:78px; }
.folio-more-panel a { display:flex; flex-direction:column; gap:7px; border-radius:6px; }
.folio-more-panel a:hover { background:#ffffff0a; }
.folio-more-panel small { color:#aaa99f; font-size:12px; }
.folio-more-split { display:grid; grid-template-columns:1fr 1fr; padding:0; }
.folio-more-split a { padding:20px 10px; }
.folio-shell { width:100%; max-width:1760px; margin:0 auto; padding:0 clamp(20px,3.6vw,64px); }
.folio-shell a { color:inherit; text-decoration:none; }
.folio-shell button { font:inherit; color:inherit; }
.folio-shell h1,.folio-shell h2,.folio-shell h3,.folio-shell p { margin:0; }
.folio-shell a:focus-visible,.folio-shell button:focus-visible,.folio-nav a:focus-visible,.folio-nav summary:focus-visible { outline:2px solid #a5b6ff; outline-offset:6px; }
.folio-hero { padding:52px 0 40px; }
.folio-eyebrow { display:flex; gap:24px; margin-bottom:24px; font-size:12px; letter-spacing:.15em; color:#b3b4a8; }
.folio-eyebrow span { letter-spacing:.08em; }
.folio-hero h1 { max-width:1280px; font-family:'Bunch',Arial,sans-serif; font-weight:700; font-size:clamp(45px,6.6vw,108px); letter-spacing:-.05em; line-height:1; }
.folio-period { color:#a5b6ff; }
.folio-hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:32px; margin-top:24px; }
.folio-hero-bottom p { font-size:16px; color:var(--folio-muted); }
.folio-primary { display:inline-flex; align-items:center; justify-content:space-between; gap:64px; padding:16px 22px; min-height:52px; border:1px solid #adbbff; border-radius:5px; background:#a5b6ff; color:#111725!important; font-size:14px; }
.folio-primary:hover { background:#c0cbff; }
.folio-index { display:flex; gap:clamp(22px,4.8vw,90px); padding:18px 0; border-top:1px solid var(--folio-line); border-bottom:1px solid var(--folio-line); }
.folio-index a { display:flex; gap:15px; font-size:14px; }
.folio-index span { color:#898c80; font-size:12px; }
.folio-index a:hover { color:#a5b6ff; }
.folio-section { padding-top:65px; padding-bottom:32px; scroll-margin-top:88px; }
.folio-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:26px; }
.folio-section-head h2 { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:16px; font-size:clamp(26px,3vw,44px); letter-spacing:-.045em; }
.folio-number { align-self:center; margin-right:7px; font-size:12px; letter-spacing:.03em; color:#a5b6ff; }
.folio-section-head h2 small { font-size:13px; letter-spacing:.03em; color:var(--folio-muted); }
.folio-section-head > a { font-size:13px; white-space:nowrap; color:#c5c7bb; }
.folio-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px; row-gap:54px; }
.folio-card { display:block; min-width:0; }
.folio-card-image { position:relative; aspect-ratio:16/10; overflow:hidden; background:#252621; border-radius:10px; }
.folio-card img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.2,.7,.2,1); }
.folio-card:hover img { transform:scale(1.035); }
.folio-graphic .folio-card-image { aspect-ratio:auto; background:transparent; }
.folio-graphic img { height:auto; object-fit:cover; padding:0; }
.folio-card-caption { display:flex; justify-content:space-between; align-items:baseline; gap:15px; margin-top:16px; }
.folio-card-caption h3 { font-size:18px; letter-spacing:-.025em; }
.folio-card-caption > span { font-size:12px; color:var(--folio-muted); text-align:right; }
.folio-arrow { position:absolute; right:16px; bottom:16px; display:grid; place-items:center; width:36px; height:36px; color:#171715; background:#f3f2e9ec; border-radius:50%; font-size:21px; opacity:0; transform:translateY(6px); transition:opacity .2s,transform .2s; }
.folio-card:hover .folio-arrow,.folio-card:focus-visible .folio-arrow { opacity:1; transform:none; }
.folio-archive-links { display:flex; flex-wrap:wrap; gap:24px; padding-top:30px; font-size:13px; color:#b1b3a6; }
.folio-archive-links a { padding-bottom:7px; border-bottom:1px solid #ffffff2b; }
.folio-section-end { display:flex; justify-content:center; padding-top:44px; }
.folio-outline { display:flex; justify-content:space-between; gap:60px; border:1px solid #ffffff3b; border-radius:5px; padding:17px 22px; font-size:14px; }
.folio-outline:hover { background:#ffffff0a; }
.folio-photo-grid .folio-card-image { aspect-ratio:4/3; }
.folio-photo-grid .folio-card:nth-child(2) img { object-position:center 30%; }
.folio-film-link { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:36px 0; margin-top:36px; border-top:1px solid var(--folio-line); border-bottom:1px solid var(--folio-line); font-size:22px; }
.folio-film-link small { font-size:13px; color:var(--folio-muted); margin-left:20px; }
.folio-film-link a { font-size:14px; }
.folio-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:72px; padding:34px 0 40px; border-top:1px solid var(--folio-line); font-size:18px; }
.folio-footer small { color:var(--folio-muted); font-size:12px; margin-left:12px; }
.folio-footer a { font-size:13px; }
.folio-loading { display:grid; align-content:center; justify-items:start; gap:24px; min-height:60svh; color:#b6b8aa; }
.folio-loading button { border:1px solid #ffffff44; background:none; padding:12px 22px; cursor:pointer; }
.folio-collection-head,.folio-project-head { padding:58px 0 45px; }
.folio-collection-head > a,.folio-project-head > a { font-size:14px; color:var(--folio-muted); }
.folio-collection-head h1,.folio-project-head h1 { margin:42px 0 24px; font-size:clamp(40px,6vw,92px); line-height:1.05; letter-spacing:-.065em; overflow-wrap:anywhere; }
.folio-collection-head p { display:flex; justify-content:space-between; color:var(--folio-muted); font-size:14px; }
.folio-collection-head p span { font-size:12px; letter-spacing:.1em; }
.folio-project-meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:20px 40px; color:var(--folio-muted); font-size:14px; }
.folio-project-meta p { margin-left:auto; }
.folio-project-images { display:grid; gap:30px; }
.folio-project-images button { display:block; position:relative; border:0; padding:0; background:#24251f; cursor:zoom-in; border-radius:10px; overflow:hidden; width:100%; }
.folio-project-images img { display:block; width:100%; height:auto; }
.folio-project-images button > span { position:absolute; bottom:14px; right:14px; background:#141713c9; padding:8px 12px; color:#eeeee4; border-radius:3px; font-size:12px; }
.folio-next { display:flex; flex-direction:column; gap:20px; padding:65px 0 0; }
.folio-next small { font-size:12px; letter-spacing:.14em; color:var(--folio-muted); }
.folio-next > span { font-size:clamp(28px,4.8vw,68px); letter-spacing:-.04em; }
.folio-reveal { opacity:.15; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.folio-visible { opacity:1; transform:none; }
.folio-video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 16px; }
.folio-video-grid figure { margin:0; min-width:0; }
.folio-video-grid video { width:100%; aspect-ratio:16/9; object-fit:contain; background:#0d0e0d; }
.folio-video-grid figcaption { margin:10px 0 6px; font-size:14px; }
.folio-video-grid a { color:#aaa; font-size:12px; }
button.photo-item { display:block; padding:0; border:0; cursor:zoom-in; width:100%; }
button.photo-item img { display:block; width:100%; height:auto; }
.folio-grid.folio-brand-preview { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 18px; }
.folio-brand-preview .folio-card-caption { margin-top:10px; }
.folio-brand-preview .folio-card-caption h3 { font-size:16px; }
.folio-brand-preview .folio-card-caption > span { font-size:10px; }
.photo-stream { --photo-shift:0px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; padding:55px 0; overflow:hidden; }
.photo-stream-column { display:flex; flex-direction:column; gap:12px; transform:translateY(var(--photo-shift)); will-change:transform; }
.photo-stream-column:nth-child(even) { transform:translateY(calc(var(--photo-shift) * -1 - 28px)); }
.photo-stream a { position:relative; display:block; overflow:hidden; border-radius:4px; background:#2c2d27; }
.photo-stream img { display:block; width:100%; height:auto; min-height:90px; object-fit:cover; transition:transform .6s ease,filter .4s; }
.photo-stream a:hover img { transform:scale(1.045); filter:brightness(1.08); }
.photo-stream a:hover .folio-arrow { opacity:1; transform:none; }
.photo-unavailable { min-height:120px; background:#ffffff12; object-fit:contain!important; }
.photo-archive-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:28px; padding:0 16px; align-items:start; }
.photo-archive-nav { position:sticky; top:85px; display:grid; gap:12px; min-width:0; }
.photo-archive-title { margin-bottom:16px; }
.photo-archive-title > .en-main { font-size:32px; }
.photo-nav-item { text-align:left; }
.photo-gallery-panel { padding:12px; min-width:0; }
.tight-photo-grid { column-gap:8px; }
button.photo-item { margin-bottom:8px; break-inside:avoid; background:#ffffff0c; border-radius:2px; overflow:hidden; }
@media (max-width:900px) {
    .photo-archive-layout { grid-template-columns:180px minmax(0,1fr); gap:18px; }
    .photo-archive-title > .en-main { font-size:25px; }
}
@media (max-width:700px) {
    .photo-archive-layout { display:block; padding:0; }
    .photo-archive-nav { position:static; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-bottom:18px; }
    .photo-archive-title { grid-column:1/-1; margin-bottom:12px; }
    .photo-archive-title > .en-main { font-size:36px; }
    .photo-nav-item { padding:10px; }.photo-nav-item .en-main { font-size:13px; }
    .photo-gallery-panel { padding:6px; }
    .photo-stream { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:30px 0; }
    .photo-stream-column { gap:8px; }.photo-stream-column:nth-child(n+4) { display:none; }
    .folio-grid.folio-brand-preview { gap:18px 8px; }
    .folio-brand-preview .folio-card-caption { flex-direction:column; gap:3px; }
    .folio-brand-preview .folio-card-caption h3 { font-size:12px; }
    .folio-brand-preview .folio-card-caption > span { font-size:9px; max-width:100%; text-align:left; }
    .folio-brand-preview .folio-arrow { display:none; }
}
@media (prefers-reduced-motion:reduce) {
    .photo-stream-column,.photo-stream-column:nth-child(even) { transform:none; will-change:auto; }
    .photo-stream img { transition:none; }
}
@media (max-width:900px) {
    .folio-nav-links { gap:20px; }
    .folio-nav-links > a { display:none; }
    .folio-card-caption { flex-direction:column; gap:5px; }
    .folio-grid { gap:38px 18px; }
}
@media (max-width:600px) {
    .portfolio-page .folio-nav { height:70px; padding-left:20px; padding-right:78px; }
    body.portfolio-page #music-toggle { top:14px; right:11px; }
    .folio-wordmark { font-size:23px; }
    .folio-wordmark small { font-size:9px; }
    .folio-nav-links { gap:0; }
    .folio-nav summary { gap:9px; font-size:13px; }
    .folio-more-panel { width:min(350px,calc(100vw - 32px)); right:-60px; }
    .folio-hero { padding:54px 0 40px; }
    .folio-eyebrow { font-size:10px; gap:17px; }
    .folio-hero h1 { font-size:clamp(39px,10.1vw,60px); letter-spacing:-.06em; line-height:1.12; }
    .folio-hero-bottom { align-items:flex-start; flex-direction:column; gap:22px; margin-top:26px; }
    .folio-hero-bottom p { font-size:14px; }
    .folio-primary { padding:13px 18px; min-height:46px; gap:54px; }
    .folio-index { gap:0; justify-content:space-between; }
    .folio-index a { flex-direction:column; gap:7px; font-size:11px; }
    .folio-section { padding-top:43px; padding-bottom:12px; scroll-margin-top:80px; }
    .folio-section-head { align-items:flex-end; gap:10px; }
    .folio-section-head h2 { font-size:27px; gap:8px; }
    .folio-section-head h2 small { display:none; }
    .folio-section-head > a { font-size:11px; }
    .folio-number { font-size:10px; margin-right:2px; }
    .folio-grid { grid-template-columns:1fr; gap:32px; }
    .folio-card-image { aspect-ratio:16/10; border-radius:7px; }
    .folio-graphic .folio-card-image { aspect-ratio:auto; }
    .folio-card-caption { margin-top:12px; flex-direction:row; align-items:baseline; }
    .folio-card-caption h3 { font-size:16px; }
    .folio-card-caption > span { font-size:10px; max-width:55%; }
    .folio-arrow { opacity:1; transform:none; right:10px; bottom:10px; width:28px; height:28px; font-size:16px; }
    .folio-archive-links { gap:15px; font-size:11px; }
    .folio-film-link { align-items:flex-start; flex-direction:column; gap:14px; padding:26px 0; }
    .folio-footer { margin-top:45px; font-size:15px; flex-wrap:wrap; padding-bottom:25px; }
    .folio-footer small { margin-left:5px; font-size:11px; }
    .folio-footer > small { display:none; }
    .folio-collection-head,.folio-project-head { padding:35px 0; }
    .folio-collection-head h1,.folio-project-head h1 { margin-top:30px; }
    .folio-project-meta { gap:12px 25px; }
    .folio-project-meta p { flex-basis:100%; margin:0; line-height:1.6; }
    .folio-project-images { gap:15px; }
    .folio-video-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    .folio-reveal { opacity:1; transform:none; transition:none; }
    .folio-card img { transition:none; }
    .folio-card:hover img { transform:none; }
}

/* The note keeps the same playback control, with motion only while playing. */
#music-toggle { display:grid; place-items:center; }
.music-note-icon { display:block; width:25px; height:25px; overflow:visible; transform-origin:50% 70%; }
.is-playing .music-note-icon { animation:note-sway 1.8s ease-in-out infinite; }
@keyframes note-sway { 25% { transform:rotate(-7deg) translateY(-1px); } 75% { transform:rotate(7deg); } }
@media (prefers-reduced-motion:reduce) { .is-playing .music-note-icon { animation:none; } }

/* Project sheet: retain the archive behind it and restore its scroll on close. */
html:has(.graphic-open) { overflow:hidden; scrollbar-gutter:stable; }
body.graphic-open { overflow:hidden; }
#app-content { transform-origin:50% 0; transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1),filter .5s; }
.graphic-open #app-content { transform:scale(.975); filter:brightness(.55); }
.graphic-dialog { box-sizing:border-box; position:fixed; inset:26px 0 0; width:100%; max-width:none; height:calc(100dvh - 26px); max-height:none; margin:0; border:0; border-radius:20px 20px 0 0; padding:0; background:#f3f2ee; color:#22231f; overflow:auto; overscroll-behavior:contain; font-family:Arial,'Noto Sans SC',sans-serif; }
.graphic-dialog[open] { animation:graphic-enter .5s cubic-bezier(.2,.75,.2,1) both; }
.graphic-dialog::backdrop { background:#1119; backdrop-filter:blur(5px); }
.graphic-dialog.is-closing { animation:graphic-exit .28s ease-in both; }
.graphic-sheet { padding:30px; position:relative; }
.graphic-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr); gap:clamp(30px,4vw,74px); align-items:start; }
.graphic-close { position:sticky; top:16px; float:right; margin:-14px -14px -36px 0; z-index:3; width:40px; height:40px; border-radius:50%; border:1px solid #2223; background:#f3f2eeee; color:#22231f; font:28px/1 Arial,sans-serif; cursor:pointer; }
.graphic-close:hover { background:#deded7; }
.graphic-images { display:grid; gap:20px; }
.graphic-images button { display:block; padding:0; border:0; background:transparent; border-radius:8px; overflow:hidden; cursor:zoom-in; }
.graphic-images img { display:block; width:100%; height:auto; }
.graphic-info { position:sticky; top:30px; padding:24px 34px 0 0; }
.graphic-language { display:flex; gap:12px; margin-bottom:24px; }
.graphic-language button { padding:4px 0; border:0; border-bottom:1px solid transparent; background:none; color:#888; cursor:pointer; font-size:12px; }
.graphic-language button[aria-pressed=true] { color:#222; border-bottom-color:#222; }
.graphic-info h1 { font:clamp(27px,3.3vw,52px)/1.04 Arial,'Noto Sans SC',sans-serif; letter-spacing:-.055em; margin:0 0 12px; }
.graphic-subtitle { font-size:14px; color:#77786f; margin:0 0 24px; }
.graphic-summary { font-size:clamp(18px,1.7vw,26px); line-height:1.35; letter-spacing:-.025em; margin:0 0 34px; }
.graphic-meta { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0 0 34px; font-size:13px; }
.graphic-meta dt { margin-bottom:8px; }.graphic-meta dd { margin:0; color:#75766b; line-height:1.5; }
.graphic-info section { margin:0 0 28px; }
.graphic-info h2 { font-size:14px; margin:0 0 10px; }
.graphic-info section p { font-size:15px; line-height:1.65; color:#67685e; margin:0; }
.graphic-next { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #2223; margin-top:40px; padding:30px 0 10px; color:#222; text-decoration:none; font-size:16px; }
.graphic-dialog button:focus-visible,.graphic-next:focus-visible { outline:2px solid #6575a8; outline-offset:3px; }
.graphic-zoom { border:0; padding:0; background:#111; color:#fff; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; overflow:hidden; }
.graphic-zoom[open] { display:grid; place-items:center; }.graphic-zoom::backdrop { background:#111; }
.graphic-zoom img { max-width:94vw; max-height:88dvh; object-fit:contain; }
.graphic-zoom button { position:absolute; border:0; background:#111a; color:#fff; font-size:32px; padding:6px 16px; cursor:pointer; }
.zoom-close { top:12px; right:12px; }.zoom-prev { left:4px; top:48%; }.zoom-next { right:4px; top:48%; }
.graphic-zoom output { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); font:12px Arial,sans-serif; }
@keyframes graphic-enter { from { opacity:.5; transform:translateY(100px); } to { opacity:1; transform:none; } }
@keyframes graphic-exit { to { opacity:0; transform:translateY(80px); } }
@media (max-width:760px) {
    .graphic-dialog { top:12px; height:calc(100dvh - 12px); border-radius:16px 16px 0 0; }
    .graphic-sheet { padding:18px; }.graphic-layout { display:flex; flex-direction:column; gap:28px; }
    .graphic-info { position:static; padding:12px 5px 0; order:1; }.graphic-info h1 { max-width:94%; font-size:32px; }
    .graphic-summary { font-size:19px; }.graphic-info section p { font-size:14px; }
    .graphic-close { top:12px; margin:-8px -8px -32px 0; }
    .graphic-images { display:contents; }.graphic-images button { order:2; width:100%; }.graphic-images button:first-child { order:0; }.graphic-next { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
    .radio-speaker,.radio-waves,.graphic-dialog[open],.graphic-dialog.is-closing { animation:none; }
    #app-content { transition:opacity .2s; }.graphic-open #app-content { transform:none; }
    .is-playing .radio-waves { opacity:1; }
}