:root{color-scheme:dark;--paper:#e9e7e1;--muted:#959690;--dark:#080909;--line:#343634}
*{box-sizing:border-box}html{background:var(--dark)}body{margin:0;background:var(--dark);color:var(--paper);font-family:Arial,Helvetica,sans-serif;min-height:100svh;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}::selection{background:var(--paper);color:var(--dark)}
#wind{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.grain{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.masthead{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;margin:0 5.5vw;height:108px;border-bottom:1px solid var(--line)}.wordmark{font-family:Georgia,serif;font-size:43px;line-height:1}.wordmark span{color:#858b83}.coordinate,.edition,.eyebrow,.section-label,.index,.portrait-caption,footer{font-family:"Courier New",monospace;font-size:12px;letter-spacing:2px}.coordinate{color:var(--muted);position:absolute;left:50%;transform:translateX(-50%)}.edition{letter-spacing:1.5px;color:var(--muted)}
main{position:relative;z-index:2;margin:0 5.5vw}.composition{position:relative;max-width:1520px;margin:auto;min-height:calc(100svh - 182px);padding:11vh 0 6vh;display:flex;flex-direction:column;justify-content:center}.identity{position:relative;z-index:3;pointer-events:none}.eyebrow{color:var(--muted);margin:0 0 24px;letter-spacing:3px;font-size:12px}h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(100px,13.8vw,220px);font-weight:400;letter-spacing:-.065em;line-height:.92;margin:0 0 30px;padding-bottom:.06em}.period{color:#a5aaa1}.intro{font-family:Georgia,serif;font-size:clamp(18px,1.65vw,25px);line-height:1.65;color:#b4b5af;margin:0}
.portrait-wrap{position:absolute;width:min(52vw,760px);right:-2vw;top:50%;transform:translateY(-55%);aspect-ratio:1/1;opacity:0;animation:portrait-arrival 2.5s 1.6s cubic-bezier(.16,1,.3,1) forwards}.portrait{position:absolute;inset:0;clip-path:inset(0 100% 0 0);animation:unveil 2.8s 1.4s cubic-bezier(.16,1,.3,1) forwards;mask-image:linear-gradient(to right,transparent 0%,#000 18%,#000 85%,transparent 100%),linear-gradient(to bottom,#000 60%,transparent 98%);mask-composite:intersect}.portrait img{width:100%;height:100%;object-fit:cover;filter:invert(1) grayscale(1) contrast(1.12) brightness(.77);mix-blend-mode:screen;transform:scale(1.03);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}.portrait-line{position:absolute;top:10%;right:7%;width:1px;height:64%;background:linear-gradient(transparent,#575b54,transparent);opacity:.4}.portrait-caption{position:absolute;bottom:7%;right:10%;font-size:10px;color:#6f746d;letter-spacing:2px}
.interests{position:relative;z-index:3;width:min(620px,54%);margin-top:54px}.section-label{font-size:10px;color:#8b8e87;margin:0 0 20px;display:flex;align-items:center;gap:12px;letter-spacing:2px}.rule{width:30px;height:1px;background:#777d73}.interest-buttons{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.interest-buttons button{position:relative;flex:1;text-align:left;display:flex;align-items:center;gap:12px;border:0;background:transparent;color:#92968e;padding:22px 12px 22px 0;cursor:pointer;transition:color .3s,background .3s;white-space:nowrap;font-family:Georgia,serif;font-size:20px}.interest-buttons button+button{padding-left:20px}.index{font-size:10px;letter-spacing:0;color:#72766e}.interest-mark{margin-left:auto;font:16px "Courier New",monospace;opacity:0;transform:rotate(-90deg);transition:opacity .3s,transform .4s}.interest-buttons button[aria-pressed="true"],.interest-buttons button:hover{color:var(--paper)}.interest-buttons button[aria-pressed="true"] .interest-mark{opacity:1;transform:rotate(0)}.interest-buttons button:focus-visible,.wordmark:focus-visible{outline:1px solid #e9e7e1;outline-offset:6px}.interest-note{display:flex;align-items:center;gap:14px;min-height:56px;color:#a4a89e}.note-symbol{font-size:23px;color:#7d8576}.interest-note p{font-family:Georgia,serif;font-size:16px;line-height:1.5;margin:12px 0;transition:opacity .18s,transform .18s}.interest-note p.changing{opacity:0;transform:translateY(4px)}
footer{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px;margin:0 5.5vw;border-top:1px solid var(--line);color:#71766c;letter-spacing:1.6px;font-size:10px}.footer-center{font-size:21px;color:#959e88}.reveal{opacity:0;transform:translateY(20px);filter:blur(6px);animation:arrive 1.5s cubic-bezier(.16,1,.3,1) forwards}.masthead{animation-delay:.7s}.eyebrow{animation-delay:2.4s}h1{animation-delay:2.6s}.intro{animation-delay:3s}.interests{animation-delay:3.7s}footer{animation-delay:4.5s}
@keyframes arrive{to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes unveil{to{clip-path:inset(0 0 0 0)}}@keyframes portrait-arrival{from{opacity:0;filter:blur(14px);transform:translateY(-50%) scale(1.06)}to{opacity:.88;filter:blur(0);transform:translateY(-55%) scale(1)}}
@media(min-width:1700px){.composition{padding-top:90px;padding-bottom:90px}.portrait-wrap{right:0;width:740px}.interests{width:650px}}
@media(max-width:900px){.masthead{height:85px}.coordinate{font-size:10px;letter-spacing:1px}.edition{font-size:10px}.composition{min-height:calc(100svh - 155px);padding:9vh 0 5vh}.portrait-wrap{width:65vw;right:-8vw;top:42%}.interests{width:65%;margin-top:40px}.interest-buttons button{font-size:18px;gap:7px}.interest-buttons button+button{padding-left:12px}.interest-mark{display:none}h1{font-size:16vw}footer{height:70px;font-size:9px;letter-spacing:.8px}.eyebrow{font-size:10px;letter-spacing:2px}}
@media(max-width:600px){.masthead{margin:0 7vw;height:76px}.coordinate{display:none}.wordmark{font-size:37px}main{margin:0 7vw}.composition{padding:0 0 24px;min-height:auto}.portrait-wrap{position:relative;width:100%;height:330px;aspect-ratio:auto;right:auto;top:auto;transform:none;margin:14px 0 -70px;animation-name:mobile-portrait}.portrait{mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 65%,transparent 100%)}.portrait img{object-fit:contain;filter:invert(1) grayscale(1) contrast(1.12) brightness(.68)}.portrait-line{right:3%;top:15%;height:50%}.portrait-caption{font-size:9px;bottom:20%;right:0}.identity{margin-top:0}.eyebrow{font-size:9px;letter-spacing:1.8px;margin-bottom:17px}h1{font-size:clamp(86px,24vw,150px);margin-bottom:20px}.intro{font-size:18px;line-height:1.5}.interests{width:100%;margin-top:35px}.interest-buttons button{font-size:18px;padding-top:19px;padding-bottom:19px;gap:8px}.interest-buttons button+button{padding-left:10px}.index{font-size:9px}.interest-note p{font-size:15px}.section-label{margin-bottom:16px}footer{margin:0 7vw;height:65px;font-size:8px;letter-spacing:1px}.footer-center{display:none}footer span:last-child{max-width:120px;text-align:right;line-height:1.8}@keyframes mobile-portrait{from{opacity:0;filter:blur(12px);transform:scale(1.06)}to{opacity:1;filter:blur(0);transform:scale(1)}}}
.masthead,footer{justify-content:flex-end}.footer-center{position:absolute;left:50%;transform:translateX(-50%)}
.intro{font-family:"Courier New",monospace;font-size:14px;letter-spacing:2px;line-height:1.8}
.portrait img{filter:invert(1) grayscale(1) contrast(1.12) brightness(.55)}
@media(min-width:601px) and (max-width:900px){.portrait-wrap{width:58vw;top:50%;right:-5vw}}
@media(max-width:600px){.portrait-wrap{margin-bottom:-30px}.portrait img{filter:invert(1) grayscale(1) contrast(1.12) brightness(.68)}.portrait-caption{bottom:14%}.eyebrow{color:#a5a89f}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none;filter:none}.portrait-wrap{opacity:.88;filter:none}.portrait{clip-path:none}#wind{opacity:.3}}
