:root{--ink:#183e53;--muted:#557286;--gold:#a77b2e;--line:#37586e29;--paper:#fcfbf6;--sky:#edf5fc;color-scheme:light;font-family:Arial,Helvetica,sans-serif;font-synthesis:none;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--sky);min-width:320px}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,video:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button:disabled{cursor:default;opacity:.5}button{border:0;background:none}button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;left:16px;top:-60px;background:var(--paper);padding:14px;z-index:100}.skip:focus{top:12px}.sky{position:fixed;inset:-3%;z-index:-3;background:url('assets/clouds-sky.webp') center center/cover no-repeat;animation:cloud-drift 90s ease-in-out infinite alternate;will-change:transform}.sky-fade{position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,#edf5fc15 0%,#f5f8fb38 25%,#f6f8fbd1 78%,#f6f8fbe8 100%);pointer-events:none}
@keyframes cloud-drift{from{transform:translate3d(-.5%,0,0) scale(1.025)}to{transform:translate3d(.8%,-.6%,0) scale(1.055)}}
.masthead{max-width:1280px;margin:0 auto;min-height:92px;display:flex;align-items:center;justify-content:space-between;padding:18px 46px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,'Times New Roman',serif;font-size:28px;font-weight:bold;letter-spacing:-1px}.brand img{width:43px;height:37px}.brand-sub{font:10px Arial,sans-serif;letter-spacing:2.2px;text-transform:uppercase;display:block;margin-top:4px;color:var(--muted)}.portfolio-link{font-size:12px;display:flex;align-items:center;gap:14px}.portfolio-link span{font-size:21px;color:var(--gold)}main{max-width:1040px;margin:auto;padding:0 42px}.intro{padding:50px 0 36px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.4px;margin:0 0 12px;color:#48697e}h1{font-family:Georgia,'Times New Roman',serif;font-weight:normal;font-size:76px;letter-spacing:-3.5px;line-height:1.05;margin:0}.title-period{color:var(--gold)}.intro-note{font-size:12px;line-height:1.7;text-align:right;margin:0 2px 8px;color:#35596f}.category-dock{position:sticky;top:0;z-index:10;margin:0 -12px;padding:0 12px;background:#f5f9fbe8;backdrop-filter:blur(15px);border-top:1px solid #fff9;border-bottom:1px solid var(--line)}.categories{display:flex;align-items:center;gap:34px;min-height:59px;overflow-x:auto;scrollbar-width:thin}.category-tab{padding:20px 1px 18px;position:relative;white-space:nowrap;font-size:12px;letter-spacing:.25px;color:#526e80}.category-tab[aria-selected="true"]{color:var(--ink);font-weight:bold}.category-tab[aria-selected="true"]:after{content:"";position:absolute;height:2px;background:var(--gold);left:0;right:0;bottom:0}.category-tab:hover{color:var(--ink)}.collection{scroll-margin-top:80px;outline:none}.collection-heading{display:flex;align-items:center;justify-content:space-between;padding:25px 0 23px}.collection-heading h2{font-size:11px;font-weight:normal;letter-spacing:1.6px;text-transform:uppercase;margin:0}.collection-heading>span{font-size:11px;color:var(--muted)}.gallery{display:flex;flex-direction:column;gap:64px}.effect{min-width:0}.effect-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}.effect-name{display:flex;align-items:baseline;gap:16px;min-width:0}.effect-number{font-size:10px;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:1px}.effect h3{font-family:Georgia,'Times New Roman',serif;font-weight:normal;font-size:27px;letter-spacing:-.6px;margin:0}.effect-tools{display:flex;align-items:center;gap:18px;flex-shrink:0}.variant{font-size:11px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #7b8e9966;padding:6px 0}.variant svg{width:15px;height:15px;color:var(--gold)}.variant:hover{border-color:var(--gold)}.variant-prefix{color:var(--muted);font-size:10px;margin-right:3px}.focus-button{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);padding:5px 0}.focus-button svg{width:16px;height:16px}.focus-button:hover{color:var(--ink)}.frame{position:relative;aspect-ratio:16/9;background:#142733;border:4px solid #fffdf6;border-radius:3px;box-shadow:0 5px 25px #15395418;overflow:hidden;isolation:isolate}.frame video{display:block;width:100%;height:100%;object-fit:contain;cursor:pointer;background:#142733}.frame video:not([src]){background-size:cover;background-position:center}.big-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;display:flex;align-items:center;justify-content:center;color:white;background:#1027384d;border:1px solid #ffffffad;border-radius:50%;backdrop-filter:blur(4px);transition:background .2s,opacity .2s,transform .2s}.big-play svg{width:24px;height:24px;margin-left:3px;stroke-width:1.2;fill:#ffffffed}.big-play:hover{background:#1027388f;transform:translate(-50%,-50%) scale(1.04)}.frame.is-playing .big-play{opacity:0;pointer-events:none}.frame.is-loading .big-play{opacity:0;pointer-events:none}.angle-arrow{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:34px;height:54px;border:1px solid #ffffff52;background:#112b3b42;color:white;backdrop-filter:blur(4px);transition:background .2s,opacity .2s;opacity:.6}.angle-arrow:hover,.angle-arrow:focus-visible{opacity:1;background:#112b3b85}.angle-arrow svg{width:20px;height:20px}.angle-prev{left:16px}.angle-next{right:16px}.frame:hover .angle-arrow{opacity:1}.video-loading{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:#fff;font-size:12px;background:#122a3740;pointer-events:none}.frame.is-loading .video-loading{display:flex}.video-message{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);padding:9px 14px;background:#183e53dd;color:white;font-size:11px;max-width:85%;text-align:center}.video-message:empty{display:none}.playback-row{display:flex;align-items:center;gap:12px;padding:13px 3px 0}.play-small{padding:0;width:20px;height:22px;display:flex;align-items:center;justify-content:center}.play-small svg{width:15px;height:15px}.progress{flex:1;min-width:30px;appearance:none;height:16px;cursor:pointer;background:transparent;--progress:0%}.progress::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--gold) var(--progress),#40617b38 var(--progress))}.progress::-webkit-slider-thumb{appearance:none;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:-3px}.progress::-moz-range-track{height:2px;background:#40617b38}.progress::-moz-range-progress{height:2px;background:var(--gold)}.progress::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:var(--gold)}.time{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:67px;text-align:right}.effect-bottom{display:flex;align-items:center;justify-content:space-between;padding:13px 2px 0;gap:14px}.light-toggle{display:flex;gap:3px;align-items:center;border:1px solid #4a6c8330;background:#ffffff54;border-radius:3px;padding:3px}.light-toggle button{display:flex;align-items:center;gap:6px;font-size:10px;padding:6px 11px;color:var(--muted);border-radius:1px}.light-toggle button[aria-pressed="true"]{background:#fffdf7;box-shadow:0 1px 4px #23445312;color:var(--ink)}.light-toggle svg{width:13px;height:13px}.light-toggle button[aria-pressed="true"] svg{color:var(--gold)}.angle-label{font-size:10px;letter-spacing:1px;color:var(--muted);font-variant-numeric:tabular-nums}.effect-note{font-size:11px;line-height:1.7;color:var(--muted);margin:12px 2px 0}.effect-end{height:1px;background:var(--line);margin-top:28px}.collection-loading{padding:70px 0;color:var(--muted);font-size:13px}.empty-state{padding:70px 0;font-family:Georgia,serif;font-size:22px}.masthead,main{position:relative}footer{border-top:1px solid var(--line);margin-top:90px;padding:30px 0 48px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}.footer-name{font-family:Georgia,serif;font-size:23px;letter-spacing:-.5px;color:var(--ink)}.footer-name span{font-family:Arial,sans-serif;font-size:13px;color:var(--gold);margin-left:4px}
dialog{padding:0;border:1px solid #fff9;border-radius:4px;background:#edf4f9;color:var(--ink);width:min(1180px,calc(100vw - 48px));max-height:94dvh;overflow:auto;box-shadow:0 20px 100px #0c273b66}dialog::backdrop{background:#183244bd;backdrop-filter:blur(9px)}.focus-heading{display:flex;align-items:center;justify-content:space-between;padding:17px 24px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:2px}.focus-heading button{display:flex;align-items:center;gap:16px;font-size:11px;letter-spacing:0}.focus-heading button span{font-size:24px;font-weight:normal}.focus-heading button:hover{color:var(--gold)}#focus-body{padding:24px}.effect.in-focus .focus-button{display:none}.effect.in-focus .effect-end,.effect.in-focus .effect-note{display:none}.effect.in-focus .frame{max-height:66dvh;aspect-ratio:16/9}.effect.in-focus .effect-bottom{padding-bottom:2px}body.focus-open{overflow:hidden}.focus-placeholder{min-height:200px}
@media(min-width:1600px){.intro{padding-top:62px;padding-bottom:42px}main{max-width:1120px}.masthead{max-width:1400px}}@media(max-width:700px){.masthead{min-height:76px;padding:15px 22px}.brand{font-size:24px}.brand img{width:35px}.brand-sub{font-size:8px;letter-spacing:1.5px}.portfolio-link{font-size:10px;gap:7px}main{padding:0 20px}.intro{padding:33px 0 27px;gap:10px}h1{font-size:54px;letter-spacing:-2.5px}.eyebrow{font-size:8px;letter-spacing:1.8px}.intro-note{font-size:10px;line-height:1.5;margin-bottom:5px}.categories{gap:25px;min-height:53px}.category-tab{font-size:11px;padding:18px 0}.collection-heading{padding:22px 0}.effect h3{font-size:23px}.effect-name{gap:10px}.effect-number{font-size:9px}.effect-tools{gap:13px}.variant-prefix{display:none}.variant{font-size:10px;gap:6px}.focus-button span{display:none}.focus-button svg{width:18px;height:18px}.frame{border-width:3px}.big-play{width:48px;height:48px}.big-play svg{width:20px;height:20px}.angle-arrow{width:28px;height:43px;opacity:1}.angle-prev{left:10px}.angle-next{right:10px}.gallery{gap:43px}.effect-note{font-size:10px}.effect-end{margin-top:24px}.playback-row{gap:9px}.time{font-size:9px;min-width:62px}footer{margin-top:65px;flex-wrap:wrap;gap:15px}footer>span{order:3;flex-basis:100%}dialog{width:calc(100vw - 20px);max-height:96dvh}.focus-heading{padding:12px 14px}#focus-body{padding:17px 12px}.effect.in-focus .effect-name{gap:8px}.effect.in-focus h3{font-size:22px}.sky{background-position:52% center}}
@media(max-width:420px){.intro-note{display:none}.effect-tools{gap:10px}.effect h3{font-size:21px}.variant{max-width:128px}.variant-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.angle-label{font-size:9px}.light-toggle button{padding:6px 9px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.sky{animation:none;will-change:auto}.big-play,.angle-arrow{transition:none}}