:root{color-scheme:dark;--bg:#080808;--fg:#eeeded;--secondary:#aaa8a8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{opacity:.6}.nav{position:relative;height:75px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5.5%;background:#0b0c0e;z-index:2}.nav nav{display:flex;gap:30px}.nav-right{justify-content:flex-end}.nav nav a,.tiny,.eyebrow,.motto,.number,.chapter span,.project>span,.menu{font-size:9px;letter-spacing:.27em}.brand{width:54px;height:52px;display:flex;justify-content:center;align-items:center;overflow:hidden}.brand img{width:37.8px;height:30.8px;object-fit:contain}.menu{display:none}.hero img{width:100%;display:block;max-height:530px;object-fit:cover}.intro{text-align:center;padding:54px 16px 48px}.eyebrow{letter-spacing:.32em}.eyebrow span{font-size:8px;color:#aaa}.intro h1{font-weight:300;letter-spacing:-.04em;font-size:clamp(16.8px,2.1vw,27.3px);margin:38px auto 20px}.intro p{font:11.9px/1.55 Georgia,serif;color:#aca8a8;max-width:700px;margin:auto}.motto{margin-top:34px}.identity{padding:6px 6% 85px}.id-grid{display:grid;grid-template-columns:1fr 320px 1fr;grid-template-rows:auto auto;max-width:1100px;margin:auto;column-gap:20px;row-gap:30px;align-items:center}.identity-copy{max-width:255px}.upper-left,.lower-left{grid-column:1}.upper-right,.lower-right{grid-column:3}.upper-left,.upper-right{grid-row:1}.lower-left,.lower-right{grid-row:2}.upper-left,.lower-left{justify-self:end}.upper-right,.lower-right{justify-self:start}.identity-copy h2{font-weight:400;letter-spacing:.33em;font-size:13px;margin:11px 0 16px}.identity-copy h2:after{content:'';width:22px;display:block;border-bottom:1px solid #8e8e8e;margin-top:12px}.identity-copy p{font:15px/1.4 Georgia,serif;color:#b0abab;margin:0}.diagram{grid-area:1/2/3/3;position:relative;align-self:stretch;min-height:300px;display:grid;place-items:center}.diagram svg{width:100%}.centerlogo{position:absolute;font-size:16.2px;font-weight:300;top:50%;left:50%;transform:translate(-50%,-50%)}.work{border-top:1px solid #262626;padding:25px 3.5% 75px}.work-header{display:grid;grid-template-columns:1fr 3fr 1fr;align-items:center;text-align:center;margin-bottom:34px}.work-header .tiny:first-child{text-align:left}.work-header .tiny:last-child{text-align:right}.work-header h2{font:normal clamp(27px,4vw,47px) Georgia,serif;letter-spacing:-.025em;margin:0}.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:22px 16px}.project{grid-column:span 2;min-width:0}.project.large{grid-column:span 3}.project.wide{grid-column:span 6}.project>span{display:block;min-height:29px;font-size:9px;letter-spacing:.16em}.project small{display:block;font-size:8px;margin-top:3px;color:#aaa;letter-spacing:.13em}.project-image{width:100%;aspect-ratio:1.9;display:grid;place-items:center;background:#1a1a1a;overflow:hidden}.large .project-image{aspect-ratio:1.95}.wide .project-image{aspect-ratio:5}.project-image b{font:9px Arial,sans-serif;letter-spacing:.2em;color:#bbb6;}.tone-one{background:linear-gradient(140deg,#24262c,#65514b,#16181f)}.tone-two{background:linear-gradient(135deg,#19090e,#631421,#0d1015)}.tone-three{background:linear-gradient(135deg,#12252c,#351412)}.tone-four{background:linear-gradient(135deg,#24262a,#57554a,#181c22)}.tone-five{background:linear-gradient(135deg,#262636,#906657,#1d1b20)}.tone-six{background:linear-gradient(135deg,#34444c,#151d25)}.tone-seven{background:linear-gradient(135deg,#1b2636,#293d52,#090b12)}.tone-eight{background:linear-gradient(135deg,#401019,#130c16)}.tone-nine{background:linear-gradient(135deg,#1d1c20,#454448,#17191b)}.about{border-top:1px solid #303030;padding:65px max(4%,20px)}.about-hero{height:380px;position:relative;background:linear-gradient(110deg,#333,#111);overflow:hidden}.about-overlay{position:absolute;z-index:1;left:6%;top:15%;font-size:16px;letter-spacing:.37em;line-height:1.8}.about-overlay i{font:11px/1.8 Georgia,serif;letter-spacing:.31em;display:block;margin-top:24px;font-style:normal}.hero-placeholder{position:absolute;right:15%;bottom:15%;color:#bbb;letter-spacing:.2em;font-size:10px;line-height:2;text-align:center}.about-intro{padding:26px 4% 34px}.about-intro p{color:#b9b9b9;font-size:15px;line-height:1.6;letter-spacing:.03em}.about-grid{display:grid;grid-template-columns:1fr 1fr .8fr;gap:12px;align-items:stretch}.photo-box{background:linear-gradient(145deg,#272727,#101010);min-height:180px;display:grid;place-items:center;color:#777;letter-spacing:.2em;text-align:center;font-size:9px;padding:20px}.photo-box.double{grid-column:span 2;min-height:230px}.chapter{padding:8px 12px}.chapter span{color:#a9a9a9}.chapter h3{font-weight:400;font-size:12px;letter-spacing:.31em;margin:15px 0 23px}.chapter h3:after{content:'';display:block;width:22px;border-bottom:1px solid #888;margin-top:20px}.chapter p{font:14px/1.55 Georgia,serif;color:#aaa}.coming{text-align:center;padding:120px 15px;border-top:1px solid #222}.coming h2{font:normal 28px Georgia,serif}footer{border-top:1px solid #222;display:flex;justify-content:space-between;gap:10px;padding:35px 5%;font-size:9px;letter-spacing:.2em;color:#a9a9a9}@media(max-width:760px){.nav{height:65px;padding:0 20px}.nav nav{display:none}.nav .brand{grid-column:2}.menu{display:block;position:absolute;right:18px;top:22px;background:none;border:0;color:white}.nav.open nav{display:flex;position:absolute;top:65px;background:#090909;left:0;right:0;padding:24px;flex-direction:column;gap:20px}.nav.open .nav-right{top:184px}.nav.open{margin-bottom:0}.hero img{min-height:235px;object-fit:cover}.intro{padding:55px 20px}.intro p{font-size:9.8px}.desktop{display:none}.identity{padding:10px 20px 60px}.id-grid{grid-template-columns:1fr 1fr;gap:25px 20px}.diagram{grid-area:1/1/2/3;min-height:200px}.diagram svg{width:260px}.upper-left,.upper-right,.lower-left,.lower-right{grid-row:auto;grid-column:auto;justify-self:start}.identity-copy h2{font-size:10px}.identity-copy p{font-size:13px}.work{padding:25px 18px 55px}.work-header h2{font-size:25px}.work-header .tiny{font-size:7px}.gallery{gap:20px 10px}.project,.project.large{grid-column:span 3}.project.wide{grid-column:span 6}.project>span{font-size:7px}.project small{font-size:6px}.project-image b{font-size:7px}.about{padding:40px 14px}.about-hero{height:280px}.about-grid{grid-template-columns:1fr 1fr}.chapter{grid-column:span 2;padding:14px 5px 28px}.photo-box{min-height:130px;font-size:8px}.photo-box.double{min-height:200px}footer{flex-wrap:wrap;font-size:7px}}

.contact{text-align:center;padding:60px 20px;border-top:1px solid #222}.contact p{font:16px/1.6 Georgia,serif;color:#aaa}a:focus-visible,button:focus-visible{outline:2px solid #ddd;outline-offset:5px}

/* Contact section follows the When We Were Kids minimal form. */

.contact{display:grid;grid-template-columns:1fr 2fr;gap:6vw;text-align:left;padding:80px 6%;border-top:1px solid #d5b26125;max-width:1440px;margin:auto}
.contact h2{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:.06em;line-height:1.15;text-transform:uppercase;font-size:clamp(25.2px,2.38vw,34.3px);margin:0}
.contact-title{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:38px;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;margin:0 0 20px}
.contact p{margin:0 0 24px;color:#ccc9b8;font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.85}
.contact-minimal{margin-top:30px}.contact-minimal .fields{display:grid;grid-template-columns:1fr 1fr;gap:25px}.contact-minimal .field{margin-bottom:25px}.contact-minimal label{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#dfd7bd}.contact-minimal input,.contact-minimal textarea{display:block;width:100%;font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#eee5cd;border-radius:0;background:none;border:0;border-bottom:1px solid #b5a16a66;padding:14px 0}.contact-minimal input:focus,.contact-minimal textarea:focus{outline:1px solid #e2bd6d;outline-offset:5px;border-color:#e2bd6d}.contact-minimal textarea{resize:vertical;min-height:130px}.contact-minimal .send{color:#eeeded;cursor:pointer;border:1px solid #d4b56a;background:none;padding:13px 24px;font-size:12px;letter-spacing:.12em}.contact-minimal .send:hover{background:#e2bd6d;color:#08110d}.contact .contact-note,.contact .contact-minimal .status{font-size:12px;color:#9e9f90;margin-top:20px}.contact .status:empty{display:none}
@media(max-width:800px){.contact{grid-template-columns:1fr;gap:25px;padding:50px 20px}.contact h2{font-size:26.6px}.contact p{font-size:16px}}
@media(max-width:700px){.contact-minimal .fields{grid-template-columns:1fr;gap:0}.contact-title{font-size:32px}}

/* Contact typography uses the studio's existing serif and sans-serif families. */
.contact h2{font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:400;letter-spacing:.33em;line-height:1.4}
.contact-title{font-family:Georgia,serif;font-size:clamp(27px,4vw,47px);font-weight:400;letter-spacing:-.025em;text-transform:none;line-height:1.15}
.contact p{font-family:Georgia,serif;font-size:15px;line-height:1.6}
.contact-minimal label,.contact-minimal input,.contact-minimal textarea,.contact-minimal .send{font-family:Arial,Helvetica,sans-serif}
.contact .contact-note,.contact .contact-minimal .status{font-family:Arial,Helvetica,sans-serif;font-size:12px}

.project-link{display:block}.project-link:hover{opacity:1}.poster-preview{display:flex;gap:8px;padding:14px;background:#111}.poster-preview img{height:100%;width:calc((100% - 16px)/3);object-fit:contain;min-width:0;transition:transform .3s}.project-link:hover .poster-preview img{transform:translateY(-3px)}.project .project-action{font-size:8px;letter-spacing:.2em;min-height:0;margin-top:12px;color:#aaa}

/* Fixed homepage thumbnail windows keep mixed poster proportions aligned. */
.gallery .poster-preview{position:relative;display:block;height:auto;aspect-ratio:1.9;padding:0;min-height:0;overflow:hidden}
.gallery .large .poster-preview{aspect-ratio:1.95}
.preview-strip{position:absolute;inset:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:8px;overflow:hidden}
.gallery .poster-preview img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;object-position:center;transform:none}
.gallery .project-link:hover .poster-preview img{transform:none}
@media(max-width:760px){.preview-strip{inset:7px;gap:4px}}

.yung-wai-preview{position:relative;height:auto;aspect-ratio:1.9;overflow:hidden}.yung-wai-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}

.memories-preview{position:relative;height:auto;aspect-ratio:1.95;overflow:hidden}.memories-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}

.about-hero{height:auto;aspect-ratio:2/1;background:#0b0b0b}.about-photo{display:block;width:100%;height:auto}.about-overlay{top:16%;font-size:16px}.about-overlay i{font-size:11px;line-height:1.8;margin-top:24px}@media(max-width:760px){.about-overlay{top:10%;font-size:12px;left:5%}.about-overlay i{font-size:7px;line-height:1.6;margin-top:12px;letter-spacing:.2em}}@media(max-width:420px){.about-overlay{font-size:10px}.about-overlay i{font-size:6px;line-height:1.5;margin-top:8px}}

.music-preview{position:relative;background:#0d0d0d}.music-cover-pair{position:absolute;inset:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:8px;align-items:center}.music-cover-pair img{display:block;width:100%;height:100%;object-fit:contain;min-width:0;min-height:0}@media(max-width:760px){.music-cover-pair{inset:5px;gap:4px}.music-preview-label{right:5px;bottom:5px;padding:5px 7px;font-size:7px}}.music-preview-label{position:absolute;right:10px;bottom:10px;background:#080808dd;padding:9px 12px;font:8px Arial,sans-serif;letter-spacing:.2em}.music-home-link{font:9px Arial,sans-serif;letter-spacing:.18em;border-bottom:1px solid #777;padding-bottom:9px}

/* Eight-image banner: five seconds still, three seconds to blend. */
.hero{position:relative;overflow:hidden;aspect-ratio:1983/793;max-height:530px;background:#17151b}
.hero .banner-base,.hero .banner-blend{width:100%;height:100%;min-height:0;max-height:none;object-fit:cover;display:block}
.hero .banner-blend{position:absolute;inset:0;opacity:0;transition:opacity 3s ease-in-out;pointer-events:none}
.hero .banner-blend.is-visible{opacity:1}
.banner-toggle{position:absolute;right:16px;bottom:14px;z-index:1;padding:8px 10px;border:1px solid #ffffff40;border-radius:2px;background:#08080888;color:#eee;font:9px Arial,sans-serif;letter-spacing:.18em;cursor:pointer}
.banner-toggle:focus-visible{outline:2px solid white;outline-offset:3px}
@media(max-width:760px){.hero{min-height:235px;aspect-ratio:1983/793}.hero .banner-base{position:absolute;inset:0}.banner-toggle{right:10px;bottom:10px}}
@media(prefers-reduced-motion:reduce){.hero .banner-blend{transition:none}}

/* Original camera portrait, tightly framed with a quiet text area. */
.about-hero{isolation:isolate}
.about-photo{position:absolute;inset:0 0 0 auto;width:80%;height:100%;object-fit:cover;object-position:50% 18%;filter:grayscale(1) brightness(.82) contrast(1.08);transform:scale(1.04);transform-origin:65% 20%}
.about-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0b0b 0%,#0b0b0b 21%,rgba(11,11,11,.96) 29%,rgba(11,11,11,.65) 40%,rgba(11,11,11,.18) 53%,transparent 66%);pointer-events:none}
.about-overlay{z-index:2}
@media(max-width:760px){.about-photo{width:85%;object-position:50% 20%}.about-hero::after{background:linear-gradient(90deg,#0b0b0b 0%,rgba(11,11,11,.98) 23%,rgba(11,11,11,.7) 37%,rgba(11,11,11,.18) 54%,transparent 68%)}}

/* Expanded soundstage composition already includes its dark left edge. */
.about-hero .about-photo{width:100%;height:100%;object-position:50% 50%;filter:grayscale(1);transform:none}
.about-hero::after{background:linear-gradient(90deg,rgba(11,11,11,.28),transparent 55%)}

/* About images share the homepage crossfade timing; copy stays stationary. */
.about-hero .banner-blend{opacity:0;transition:opacity 3s ease-in-out;pointer-events:none}
.about-hero .banner-blend.is-visible{opacity:1}
.about-hero::after{background:linear-gradient(90deg,#0b0b0b 0%,rgba(11,11,11,.97) 20%,rgba(11,11,11,.76) 34%,rgba(11,11,11,.3) 49%,transparent 65%)}
.about-hero .banner-toggle{z-index:3}
@media(prefers-reduced-motion:reduce){.about-hero .banner-blend{transition:none}}

/* Equal portrait frames for the paired Early Years archive photos. */
.about-grid .early-photo{display:block;aspect-ratio:4/5;min-height:0;padding:0;overflow:hidden;align-self:start;background:#151515}
.early-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
/* Early Years portraits at 60% of their previous width and height. */
.about-grid .early-photo{width:60%;height:auto;justify-self:start}
.about-grid .early-photo:first-child{justify-self:end}

/* Manual Shanghai archive gallery, aligned with the About chapters. */
.shanghai-gallery{grid-column:span 2;width:60%;justify-self:center;align-self:start;min-width:0;margin:0;scroll-margin-top:24px}
.shanghai-full{display:block;background:#131313;aspect-ratio:4/3;cursor:zoom-in}
.shanghai-full:hover{opacity:1}
.shanghai-full img{display:block;width:100%;height:100%;object-fit:contain}
.shanghai-gallery figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;color:#aaa;font:8px Arial,sans-serif;letter-spacing:.14em}
.shanghai-controls{display:flex;align-items:center;gap:2px;flex-shrink:0}
.shanghai-controls button{display:grid;place-items:center;width:36px;height:44px;border:0;padding:8px;background:none;color:#ccc;cursor:pointer}
.shanghai-controls button:hover{color:white}
.shanghai-controls svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.shanghai-count{min-width:44px;text-align:center;font-size:8px;letter-spacing:.1em}
.shanghai-gallery:focus-visible,.shanghai-controls button:focus-visible{outline:1px solid #ddd;outline-offset:3px}
@media(max-width:760px){.shanghai-gallery{width:100%}}


/* Early Years uses the same compact arrow gallery as Shanghai. */
.early-gallery{grid-column:span 2;width:60%;justify-self:center;align-self:start;min-width:0;margin:0;scroll-margin-top:24px}
.early-full{display:block;background:#131313;aspect-ratio:4/3;cursor:zoom-in}
.early-full:hover{opacity:1}
.early-full img{display:block;width:100%;height:100%;object-fit:contain}
.early-gallery figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;color:#aaa;font:8px Arial,sans-serif;letter-spacing:.14em}
.early-controls{display:flex;align-items:center;gap:2px;flex-shrink:0}
.early-controls button{display:grid;place-items:center;width:36px;height:44px;border:0;padding:8px;background:none;color:#ccc;cursor:pointer}
.early-controls button:hover{color:white}
.early-controls svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.early-count{min-width:44px;text-align:center;font-size:8px;letter-spacing:.1em}
.early-gallery:focus-visible,.early-controls button:focus-visible{outline:1px solid #ddd;outline-offset:3px}
@media(max-width:760px){.early-gallery{width:100%}}


/* About photographs hold for three seconds, then blend softly into the next. */
.about-auto-gallery a{position:relative;overflow:hidden}
.about-auto-gallery .banner-blend{position:absolute;inset:0;opacity:0;filter:blur(10px);transition:opacity 3s ease-in-out,filter 3s ease-in-out;pointer-events:none}
.about-auto-gallery .banner-blend.is-visible{opacity:1;filter:blur(0)}
.about-auto-gallery .banner-toggle{position:static;width:26px;height:26px;padding:6px;border-radius:50%;border:1px solid #ffffff30;background:#08080888}
.about-auto-gallery .banner-toggle svg{width:11px;height:11px;stroke:none}
.about-auto-gallery .banner-toggle svg path[stroke]{stroke:currentColor}
.about-hero .banner-blend{filter:grayscale(1) blur(10px);transition:opacity 3s ease-in-out,filter 3s ease-in-out}
.about-hero .banner-blend.is-visible{filter:grayscale(1) blur(0)}
@media(prefers-reduced-motion:reduce){.about-auto-gallery .banner-blend,.about-hero .banner-blend{transition:none;filter:none}}

/* Compact, equal-sized archive photos shown together. */
.about-photo-row{grid-column:span 2;width:90%;min-width:0;margin:0;justify-self:center;align-self:start;scroll-margin-top:28px;position:relative;z-index:1}
.about-photo-row:focus-within,.about-photo-row:hover{z-index:4}
.about-photo-strip{display:grid;grid-template-columns:repeat(var(--photo-count),minmax(0,1fr));gap:12px;align-items:start}
.about-photo-thumb{position:relative;display:block;min-width:0;width:100%;aspect-ratio:4/3;background:#131313;transition:transform .3s ease;transform-origin:center;z-index:0;cursor:zoom-in}
.about-photo-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.about-photo-thumb:first-child{transform-origin:left center}
.about-photo-thumb:last-child{transform-origin:right center}
.about-photo-thumb:focus-visible{transform:scale(1.5);z-index:2;outline:1px solid #ddd;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.about-photo-thumb:hover{transform:scale(1.5);z-index:2;opacity:1}}
.about-photo-row figcaption{min-height:38px;display:flex;align-items:center;color:#aaa;font:8px Arial,sans-serif;letter-spacing:.14em}
@media(max-width:760px){.about-photo-row{width:90%}.about-photo-strip{gap:6px}.about-photo-row figcaption{font-size:7px}}
@media(prefers-reduced-motion:reduce){.about-photo-thumb{transition:none}}

/* Highlight the stitched LL° mark when it is hovered or focused. */
.nav .brand { opacity: 1; }
.nav .brand img { transition: filter 220ms ease; }
@media (hover: hover) {
  .nav .brand:hover { opacity: 1; }
  .nav .brand:hover img { filter: brightness(1.4) drop-shadow(0 0 4px rgba(255,255,255,.65)); }
}
.nav .brand:focus-visible img { filter: brightness(1.4) drop-shadow(0 0 4px rgba(255,255,255,.65)); }
@media (prefers-reduced-motion: reduce) { .nav .brand img { transition: none; } }

/* Navigation glow matches the stitched header logo. */
.nav nav a, .nav .menu { transition: color 220ms ease, text-shadow 220ms ease; }
@media (hover: hover) {
  .nav nav a:hover, .nav .menu:hover { opacity: 1; color: #fff; text-shadow: 0 0 4px rgba(255,255,255,.65); }
}
.nav nav a:focus-visible, .nav .menu:focus-visible { opacity: 1; color: #fff; text-shadow: 0 0 4px rgba(255,255,255,.65); }
@media (prefers-reduced-motion: reduce) { .nav nav a, .nav .menu { transition: none; } }