*{box-sizing:border-box} :root{color-scheme:light dark;--ink:#202020;--paper:#fafaf8;--blur:8px}html{background:var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none}button:focus-visible,a:focus-visible{outline:2px solid #666;outline-offset:6px}header{position:absolute;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:38px 4.1%;z-index:2}.wordmark{font-size:15px;font-weight:700;letter-spacing:-.5px}.wordmark span{font-size:8px;vertical-align:top;margin-left:3px}.header-note{font-size:9px;letter-spacing:1.6px;margin-left:58px;color:#646460}.glass{background:linear-gradient(125deg,rgba(255,255,255,.82),rgba(241,241,239,.55));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.95);box-shadow:0 5px 22px #18181808,inset 0 0 0 1px #bdbdbd12}.language{display:flex;gap:9px;padding:10px 14px;border-radius:30px;font-size:10px;align-items:center}.language button{padding:4px;color:#777}.language button[aria-pressed=true]{color:#111;font-weight:700}.language>span{color:#bbb}.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 70% 28%,#fff 0,transparent 48%),radial-gradient(ellipse at 18% 72%,#e9e9e44d 0,transparent 45%)}main{position:relative;min-height:760px;height:100svh;max-height:1700px;overflow:hidden}.eyebrow{position:absolute;left:4.1%;top:24%;display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:1.5px;color:#686863}.line{width:28px;height:1px;background:#92928c}.identity{position:absolute;top:34%;left:50%;width:min(72%,1110px);transform:translate(-50%,0);text-align:center;will-change:translate}h1{margin:0;font-size:0;font-weight:normal}.logo{display:block;width:100%;height:auto}#focus{margin-top:30px;padding:15px 20px;border-radius:8px;touch-action:manipulation}#focus > .focus-word{display:block;font-size:clamp(14px,1.5vw,24px);font-weight:500;letter-spacing:.55em;margin-right:-.55em;filter:blur(var(--blur));transition:filter .15s linear}#focus:focus-visible .focus-letter{filter:none}.focus-guide{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:21px;font-size:8px;letter-spacing:1.6px;color:#777771}.focus-guide i{width:5px;height:5px;border:1px solid #8c8c85;border-radius:50%}.touch-hint{display:none}.bottom-copy{position:absolute;left:4.1%;right:4.1%;bottom:170px;display:flex;justify-content:space-between;align-items:end}.bottom-copy p{margin:0;font-size:clamp(23px,2.3vw,37px);font-weight:400;letter-spacing:-1px;line-height:1.2}.project-link{display:flex;align-items:center;gap:32px;font-size:12px;padding:12px 0;border-bottom:1px solid #aaa9a14d}.arrow{font-size:22px}.metadata{position:absolute;left:4.1%;right:4.1%;bottom:49px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.4px;color:#73736e}.dock{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:3px;padding:7px;border-radius:50px;z-index:5}.dock button{font-size:9px;letter-spacing:1px;border-radius:30px;min-height:42px;padding:0 19px;transition:background .3s,color .3s}.dock .active{background:#252525;color:#fff;box-shadow:0 3px 8px #0001}.dock button:not(.active):hover{background:#ffffffd9}.dock button .nav-arrow{margin-left:7px}dialog{border:1px solid #fff;background:#fafaf8f5;backdrop-filter:blur(25px);color:var(--ink);padding:0;width:min(790px,calc(100% - 32px));border-radius:22px;box-shadow:0 30px 120px #0002;max-height:85svh}dialog[open]{animation:reveal .4s ease}dialog::backdrop{background:#ededed80;backdrop-filter:blur(14px)}.sheet{padding:35px 48px 50px}.sheet-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.5px;color:#777}.sheet-top button{font-size:18px;min-width:44px;min-height:44px}#panel-content h2{font-size:clamp(32px,5vw,58px);font-weight:400;letter-spacing:-2px;line-height:1.05;margin:35px 0 25px}#panel-content p{font-size:16px;line-height:1.7;color:#60605a;max-width:560px}#panel-content .small{font-size:11px;letter-spacing:.6px}#panel-content ul{list-style:none;padding:0}#panel-content li{padding:13px 0;border-bottom:1px solid #ddd;font-size:16px}#panel-content a{display:inline-block;padding:13px 0;border-bottom:1px solid #aaa;margin-right:24px;font-size:14px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip{position:fixed;top:-100px;background:white;padding:15px;z-index:20}.skip:focus{top:10px}.particle{position:fixed;width:3px;height:3px;border-radius:50%;background:#999;pointer-events:none;z-index:10;animation:particle .65s ease-out forwards}@keyframes particle{to{transform:translate(var(--x),var(--y));opacity:0}}@keyframes reveal{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@media(min-width:1800px){header{padding-top:55px}.identity{top:35%}.bottom-copy{bottom:200px}.dock{bottom:40px}.metadata{bottom:61px}}
@media(max-width:900px){.header-note{display:none}.dock button{padding:0 14px}.metadata{bottom:112px}.bottom-copy{bottom:190px}.identity{width:82%;top:35%}.eyebrow{top:24%}.bottom-copy p{font-size:27px}}
@media(max-width:600px){header{padding:24px}.wordmark{font-size:13px}.language{padding:8px 11px}main{min-height:670px}.eyebrow{left:25px;top:23%;font-size:7px;letter-spacing:1.2px}.line{width:19px}.identity{width:88%;top:35%}#focus{margin-top:22px;padding:15px 5px}#focus > .focus-word{font-size:13px;letter-spacing:.46em}.focus-guide{font-size:7px;letter-spacing:1px;margin-top:13px}.bottom-copy{left:25px;right:25px;bottom:170px;gap:25px}.bottom-copy p{font-size:24px;letter-spacing:-.8px}.project-link{font-size:10px;gap:9px;max-width:140px;line-height:1.5}.arrow{font-size:19px}.metadata{left:25px;right:25px;font-size:6px;letter-spacing:.9px;bottom:121px}.dock{bottom:max(25px,env(safe-area-inset-bottom));width:calc(100% - 32px);justify-content:space-between;padding:6px;gap:0}.dock button{padding:0 9px;font-size:7px;letter-spacing:.55px;min-height:44px}.dock button .nav-arrow{display:none}.sheet{padding:20px 25px 30px}#panel-content h2{letter-spacing:-1px}.sheet-top{font-size:8px}}
@media(pointer:coarse){.desktop-hint{display:none}.touch-hint{display:inline}.identity{will-change:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#focus > .focus-word{filter:none!important}.identity{translate:none!important}.magnetic{transform:none!important}.focus-guide{visibility:hidden}}

/* Follow the OS appearance, including live changes without a reload.
   Every foreground and translucent surface receives a matching dark palette. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme:dark; --paper:#141414; --ink:#f3f3ef; }
  .logo { filter:invert(1); }
  .ambient { background:radial-gradient(ellipse at 70% 28%,#242422 0,transparent 48%),radial-gradient(ellipse at 18% 72%,#30302b30 0,transparent 45%); }
  .glass { background:linear-gradient(125deg,rgba(49,49,47,.88),rgba(29,29,28,.78));border-color:#ffffff24;box-shadow:0 5px 22px #0005,inset 0 0 0 1px #ffffff05; }
  .header-note,.eyebrow,.focus-guide,.metadata,.sheet-top { color:#b9b9b1; }
  .line { background:#92928c; }
  .language button { color:#b9b9b1; }
  .language button[aria-pressed=true] { color:#fff; }
  .language>span { color:#92928c; }
  .focus-guide i { border-color:#b9b9b1; }
  .project-link { border-bottom-color:#ffffff3d; }
  .dock .active { background:#efefea;color:#171717;box-shadow:0 3px 8px #0003; }
  .dock button:not(.active):hover { background:#ffffff14; }
  dialog { background:#20201ff5;border-color:#ffffff26;box-shadow:0 30px 120px #0008; }
  dialog::backdrop { background:#0707078c; }
  #panel-content p { color:#c5c5bd; }
  #panel-content li { border-bottom-color:#ffffff26; }
  #panel-content a { border-bottom-color:#ffffff55; }
  .skip { background:#202020;color:#f3f3ef; }
  .particle { background:#d1d1c8; }
  button:focus-visible,a:focus-visible { outline-color:#d7d7ce; }
}

/* HOME: clear positioning and a lens that travels over individual letters. */
.eyebrow { left:50%;top:25%;transform:translateX(-50%);white-space:nowrap;font-size:13px;letter-spacing:2.6px;color:var(--ink); }
.eyebrow .line { width:20px; }
#focus { position:relative; }
#focus > .focus-word { display:inline-flex;letter-spacing:0;margin-right:0;filter:none!important;transition:none; }
.focus-letter { display:inline-block;letter-spacing:.55em;filter:blur(8px); }
.focus-letter:last-child { letter-spacing:0; }
#focus::before,#focus::after { content:'';position:absolute;top:9px;bottom:9px;width:9px;border:1px solid currentColor;opacity:calc(var(--lens,0)*.45);pointer-events:none;transition:opacity .3s; }
#focus::before { left:3px;border-right:0;border-radius:3px 0 0 3px; }
#focus::after { right:3px;border-left:0;border-radius:0 3px 3px 0; }
#focus:focus-visible .focus-letter { filter:none!important; }
.intro-copy { max-width:68%; }
.bottom-copy p { font-size:clamp(23px,2.15vw,34px); }
.intro-detail { display:block;margin-top:14px;font-size:11px;line-height:1.5;letter-spacing:.3px;color:#646460; }
.glass { isolation:isolate;position:relative; }
.dock.glass { position:fixed; }
.glass::before { content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(110px circle at var(--light-x,50%) var(--light-y,50%),#ffffffc9,transparent 75%);opacity:var(--reflection,0);transition:opacity .4s; }
.project-link,.dock button { transition:translate .22s ease-out,background .3s,color .3s; }
.project-link .arrow { transition:translate .3s ease; }
.project-link:hover .arrow { translate:3px -3px; }
.dock button:active { scale:.96; }
@media(max-width:900px) { .eyebrow{font-size:11px;letter-spacing:2px;} }
@media(max-width:600px) {
 .eyebrow { left:50%;top:24%;font-size:10px;letter-spacing:1.8px;gap:10px; }
 .identity { top:34%; }
 .focus-letter { letter-spacing:.46em; }
 #focus::before{left:-10px;}#focus::after{right:-10px;}
 .bottom-copy { bottom:177px;gap:16px; }
 .bottom-copy p { font-size:23px; }
 .intro-copy { max-width:64%; }
 .intro-detail { margin-top:10px;font-size:9px;max-width:190px; }
 .project-link { max-width:112px; }
}
@media(max-width:380px) { .bottom-copy p{font-size:20px;} .eyebrow{font-size:9px;letter-spacing:1.4px;} }
@media(max-height:700px) and (min-width:601px) { main{min-height:700px;} .eyebrow{top:21%;} .identity{top:30%;} }
@media(prefers-color-scheme:dark) {
 .intro-detail { color:#b9b9b1; }
 .glass::before { background:radial-gradient(110px circle at var(--light-x,50%) var(--light-y,50%),#ffffff26,transparent 75%); }
}
@media(prefers-reduced-motion:reduce) {
 .focus-letter{filter:none!important;}
 .glass::before,#focus::before,#focus::after{display:none;}
 .project-link,.dock button,.project-link .arrow{translate:none!important;scale:1!important;}
}

@media(max-width:600px){.dock button{padding-inline:7px;}}

/* Decorative atmosphere, below content and entirely transparent to input. */
#particle-field{position:fixed;inset:0;z-index:0;pointer-events:none;}
main{z-index:1;}
@media(prefers-reduced-motion:reduce){#particle-field{display:none;}}

/* Editorial service groups and the real external portfolio entry. */
.content-groups{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;margin-top:30px;}
.content-group{position:relative;padding:24px 0;border-top:1px solid #20202020;}
.content-group h3{font-size:11px;line-height:1.5;letter-spacing:1.4px;font-weight:600;margin:0 0 11px;}
#panel-content .content-group p{font-size:13px;line-height:1.8;margin:0;}
.group-index{display:none;}
.film-groups .group-index{display:block;font-size:9px;letter-spacing:1px;color:#777;margin-bottom:12px;}
#panel-content .selection-status{font-size:9px;letter-spacing:1.4px;margin-top:25px;color:#73736e;}
.panel-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;border-top:1px solid #20202020;margin-top:10px;padding-top:24px;font-size:14px;}
#panel-content .panel-cta a{margin:0;padding:8px 0;}
#panel-content a.instagram-access{display:flex;gap:24px;align-items:center;padding:27px;margin:30px 0 0;background:#ffffff70;border:1px solid #20202015;border-radius:16px;transition:background .3s,translate .3s;}
.instagram-access>span:not(.instagram-arrow){display:flex;flex-direction:column;gap:8px;}
.instagram-access strong{font-size:18px;font-weight:400;letter-spacing:-.3px;}
.instagram-access>span>span{font-size:12px;color:#646460;}
.instagram-arrow{margin-left:auto;font-size:23px;}
#panel-content a.instagram-access:hover{background:#fff;translate:0 -2px;}
#panel-content .instagram-note{font-size:12px;line-height:1.7;margin-top:20px;}
@media(max-width:600px){.content-groups{grid-template-columns:1fr;gap:0;}#panel-content a.instagram-access{padding:23px 18px;gap:16px;}.instagram-access strong{font-size:17px;}.panel-cta{font-size:13px;}}
@media(prefers-color-scheme:dark){.content-group,.panel-cta{border-top-color:#ffffff26;}#panel-content a.instagram-access{background:#ffffff06;border-color:#ffffff26;}#panel-content a.instagram-access:hover{background:#ffffff10;}.instagram-access>span>span,.film-groups .group-index,#panel-content .selection-status{color:#b9b9b1;}}
@media(prefers-reduced-motion:reduce){#panel-content a.instagram-access{translate:none!important;}}

.instagram-gallery{max-width:540px;margin:28px auto 0;}
.instagram-media{margin:0!important;width:100%!important;min-width:0!important;max-width:540px!important;background:#fff;border-radius:12px;overflow:hidden;color:#202020;}
.instagram-gallery iframe{display:block!important;max-width:100%!important;border-radius:12px;}
#panel-content .instagram-loading{font-size:12px;text-align:center;margin:12px 0 20px;}
.instagram-retry{display:block;margin:0 auto 20px;padding:10px 18px;border:1px solid currentColor;border-radius:30px;font-size:12px;}
.instagram-retry[hidden],.instagram-loading[hidden]{display:none;}
#panel-content .instagram-media a{margin:0;padding:25px;border:0;display:block;font-size:13px;color:#202020;}

.service-discovery{margin-top:9px;font-size:10px;line-height:1.6;color:var(--ink)}.service-discovery a{border-bottom:1px solid #8886}.service-discovery span{padding:0 7px;color:#888}@media(max-width:600px){.service-discovery{font-size:9px}.service-discovery span{padding:0 3px}}
