@font-face{font-family:Infamous;src:url('/fonts/Infamous-Regular.otf') format('opentype');font-weight:400;font-display:swap}
:root{--accent-cyan:#37defa;--accent-pink:#ff00c7;--annotation-yellow:#fff1a6;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:#000;min-width:0;font-family:Infamous,cursive}
html.intro-active,html.intro-active body{height:100%;overflow:hidden;overscroll-behavior:none}
html.intro-active body{position:fixed;inset:0;width:100%}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid #000;outline-offset:5px}
[hidden]{display:none!important}
#flow{position:relative;overflow-x:clip;min-height:100svh}
.film-stage{position:relative;height:100svh;min-height:0;overflow:hidden;background:#fff}
.film-stage:focus{outline:none}
.film-surface{position:absolute;inset:0 0 calc(104px + env(safe-area-inset-bottom,0px));background:#fff}
#film{display:block;width:100%;height:100%;object-fit:contain;background:#fff;transform-origin:center center}
.film-controls{position:absolute;bottom:calc(40px + env(safe-area-inset-bottom,0px));left:40px;right:40px;display:flex;justify-content:flex-end;transition:opacity 120ms ease-out}
#explore{display:inline-flex;align-items:center;gap:10px;min-height:44px;max-width:100%;padding:8px 0;border:0;background:transparent;color:#000;font-family:Infamous,cursive;font-size:24px;line-height:1.2;font-weight:400;cursor:pointer;touch-action:manipulation;white-space:nowrap;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity 350ms cubic-bezier(.22,1,.36,1),transform 350ms cubic-bezier(.22,1,.36,1)}
#explore.is-revealed,#explore:focus-visible{opacity:1;transform:none;pointer-events:auto}
.entry-arrow{font:20px/1 Georgia,serif;margin-top:2px}
body[data-phase="ending"] .film-controls{opacity:0;pointer-events:none}
.experience-nav{position:absolute;top:var(--navigation-top,42px);left:50%;width:min(100%,1360px);transform:translateX(-50%);z-index:6;pointer-events:none}
.experience-nav-links{position:relative;margin-left:10.735294%;width:max-content;pointer-events:auto}
.experience-nav-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 0;background:none;border:0;border-radius:0;color:#000;text-decoration:none;font:400 22px/1.3 Infamous,cursive;white-space:nowrap;cursor:pointer;touch-action:manipulation;text-underline-offset:6px;text-decoration-thickness:1px}
.menu-toggle{gap:9px;min-width:88px;justify-content:flex-start}
.menu-plus{display:inline-block;font:400 32px/1 Infamous,cursive;transform-origin:center;transition:transform 180ms ease-out}
.menu-toggle[aria-expanded="true"] .menu-plus{transform:rotate(45deg)}
.navigation-panel{position:absolute;left:-16px;top:calc(100% + 8px);width:192px;padding:12px 16px;background:#fff;border:1px solid #e7e7e7;box-shadow:0 8px 24px #00000008}
.menu-destination{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:8px 0;border:0;background:none;color:#000;text-decoration:none;font:400 22px/1.3 Infamous,cursive;cursor:pointer;touch-action:manipulation;text-underline-offset:6px}
.menu-play-symbol{font:20px/1 Infamous,cursive}
.ink-marker{position:relative;display:inline-block;isolation:isolate}
.ink-marker::before{content:'';position:absolute;z-index:-1;left:-.16em;right:-.16em;bottom:.02em;height:.34em;background:var(--accent-cyan);clip-path:polygon(0 11%,98% 0,100% 91%,2% 100%);transition:height 160ms ease-out;pointer-events:none}
.portrait-play-cue .ink-marker::before,#play-from-menu .ink-marker::before{background:var(--accent-pink)}
.menu-destination .ink-marker::before{height:0}
.menu-toggle[aria-expanded="true"] .ink-marker::before,.menu-toggle:focus-visible .ink-marker::before,.menu-destination:focus-visible .ink-marker::before,#home-logo:focus-visible .ink-marker::before,#explore:focus-visible .ink-marker::before{height:.95em}
@media(hover:hover){.menu-toggle:hover .ink-marker::before,.menu-destination:hover .ink-marker::before,#home-logo:hover .ink-marker::before,#explore:hover .ink-marker::before{height:.95em}}
.brand-header{position:relative;width:100%;max-width:1440px;margin:auto;height:297px}
#logo-dock{position:absolute;display:block}
#home-logo{position:absolute;display:block;z-index:5;padding:0;border:0;background:transparent;color:#000;outline-offset:8px;transform-origin:top left;cursor:pointer;touch-action:manipulation}
#portrait{display:block;width:100%;height:100%;pointer-events:none}
#portrait-crown{position:absolute;inset:0;display:block;width:100%;height:100%;mask:url('../portfolio-interaction-study/crown-only-aperture.svg') center / 100% 100% no-repeat;-webkit-mask:url('../portfolio-interaction-study/crown-only-aperture.svg') center / 100% 100% no-repeat;transform-origin:36.3438% 10.6129%;pointer-events:none}
.portrait-play-cue{position:absolute;right:calc(100% + 20px);top:48px;font:400 22px/1.2 Infamous,cursive;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 240ms ease-out}
body[data-phase="settled"] .portrait-play-cue{opacity:1;pointer-events:auto}
.crown-arrow{position:absolute;left:calc(100% - 4px);top:-40px;width:calc(var(--portrait-width,181px)*.363438 + 12px);height:48px;pointer-events:none;overflow:visible}
.crown-arrow path{stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.portfolio-page{min-height:100svh}
.portfolio-experience h1{margin-bottom:64px}
.portfolio-work-item:first-child{margin-top:0}
.proposal-note-space{display:none;position:relative;margin:16px 0 24px}
.proposal-note-space:not([hidden]){display:block}
.proposal-note-space .experience-note{width:clamp(240px,26vw,330px);margin-left:auto;padding-right:52px}
.experience-note::before{background:var(--annotation-yellow)}
.portfolio-row-highlight{background:var(--annotation-yellow)}
.note-close{position:absolute;right:4px;top:4px;min-width:44px;min-height:44px;border:0;background:transparent;font:22px system-ui;cursor:pointer}
.portfolio-work-row img{transition:opacity 180ms ease}
.portfolio-work-item{scroll-margin-top:32px}
@media(min-width:1181px){.portrait-play-cue{font-size:clamp(20px,calc(31.076923px - .7692308vw),22px);top:var(--desktop-cue-top,48px)}}
@media(max-width:760px){
  .film-surface{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .film-controls{left:24px;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  #explore{font-size:22px}
  .entry-arrow{font-size:18px}
  .experience-nav-link{font-size:20px}
  .menu-toggle{gap:8px;min-width:80px}
  .menu-plus{font-size:30px}
  .menu-destination{font-size:20px}
  .navigation-panel{width:176px}
  .portrait-play-cue{top:36px;font-size:20px;right:calc(100% + 16px)}
  .brand-header{max-width:520px}
  .portfolio-experience h1{margin-bottom:32px}
  .proposal-note-space{margin:14px 0 22px 12%}
  .proposal-note-space .experience-note{width:100%;padding:20px 48px 20px 18px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}#explore{opacity:1;transform:none;pointer-events:auto}}