@font-face{font-family:'Nanum Brush Script';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/NanumBrushScript-Regular.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/Newsreader-Variable.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 500;font-display:swap;src:url(../fonts/Newsreader-Italic-Variable.woff2) format('woff2')}
:root{
  --paper:#D3D6D7;      /* cool grey rice paper */
  --paper-deep:#C4C8CA;
  --ink:#0E0F12;        /* sumi */
  --ink-soft:#40444A;   /* diluted ink */
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{overflow-anchor:none}
body{font-family:Newsreader,Georgia,serif;-webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block}
#caps{position:fixed;inset:0;pointer-events:none;z-index:1}
.cap{position:absolute;font-family:'Nanum Brush Script',cursive;color:var(--ink);line-height:.95;opacity:0;visibility:hidden}
.cap p{margin:0;clip-path:inset(-40% calc((1 - var(--r,0)) * 100%) -40% -3%)}
.cap .l1{font-size:calc(var(--s) * 70px)}
.cap .l2{font-size:calc(var(--s) * 38px);margin-top:calc(var(--s) * 10px);color:var(--ink-soft)}
.cap .pn{position:relative;top:-.14em;margin-left:.03em}
.cap.title{text-align:center;left:0!important;right:0;max-width:none!important}
.cap.title .l1{white-space:nowrap}
.cap.title p{display:table;margin-left:auto;margin-right:auto}
.cap.title .l1{font-size:min(calc(var(--s) * 168px),11vw);letter-spacing:-.01em}
.cap.title .l2{font-size:calc(var(--s) * 40px);margin-top:calc(var(--s) * 4px)}
.cap.title .l3{font-family:Newsreader,serif;font-style:italic;font-size:calc(var(--s) * 20px);margin-top:calc(var(--s) * 34px);color:var(--ink-soft)}
.cap.now{color:var(--paper)}
.cap.now .l1{font-size:calc(var(--s) * 96px)}
.cap.now .l2{color:#B9BDC0;margin-top:calc(var(--s) * 4px)}
.cap.now .l3{font-family:Newsreader,serif;font-style:italic;font-size:calc(var(--s) * 22px);margin-top:calc(var(--s) * 12px);color:#B9BDC0}
.cap .l3 a{color:inherit;text-decoration:underline;text-underline-offset:.2em;pointer-events:auto}
/* landscape phones (short screens): floors for the scaled captions; the name mark would sit on the panel frame */
@media (max-height:500px){
  html.mode-l .cap .l1{font-size:max(calc(var(--s) * 70px),22px)}
  html.mode-l .cap .l2{font-size:max(calc(var(--s) * 38px),14px)}
  html.mode-l .cap .l3{font-size:max(calc(var(--s) * 20px),13px)}
  html.mode-l .cap.title .l1{font-size:max(min(calc(var(--s) * 168px),11vw),44px)}
  html.mode-l .cap.title .l2{font-size:max(calc(var(--s) * 40px),14px)}
  html.mode-l .cap.title .l3{font-size:max(calc(var(--s) * 20px),13px)}
  html.mode-l .cap.now .l1{font-size:max(calc(var(--s) * 96px),22px)}
  html.mode-l .cap.now .l3{font-size:max(calc(var(--s) * 22px),13px)}
  html.mode-l .namemark{display:none}
}
/* portrait: captions live in their own band below the art (900x1600 virtual, band from y 1290) */
html.mode-p .cap .l1{font-size:max(calc(var(--s) * 68px),24px)}
html.mode-p .cap .l2{font-size:max(calc(var(--s) * 36px),16px);margin-top:calc(var(--s) * 12px);color:var(--ink-soft)}
html.mode-p .cap .l3{font-family:Newsreader,serif;font-style:italic;font-size:max(calc(var(--s) * 30px),16px);margin-top:calc(var(--s) * 16px);line-height:1.3;color:var(--ink-soft)}
html.mode-p .cap.title .l1{white-space:normal;font-size:max(calc(var(--s) * 132px),44px);line-height:.85}
html.mode-p .cap.title .l2{font-size:max(calc(var(--s) * 40px),17px);margin-top:calc(var(--s) * 14px)}
html.mode-p .cap.title .l3{font-size:max(calc(var(--s) * 30px),16px);margin-top:calc(var(--s) * 26px)}
html.mode-p .cap.now{color:var(--ink)}
#spacer{position:relative;pointer-events:none}
html.facts-only #stage,html.facts-only #caps,html.facts-only #spacer{display:none}
.sr{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

html.mode-p .cap.now .l2,html.mode-p .cap.now .l3{color:var(--ink-soft)}

/* ── top corners: name mark (left) and the dossier link (right) ─────────────── */
.namemark,.topnav a{font-family:'Nanum Brush Script',cursive;font-weight:400;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;min-height:46px;padding:4px 10px;position:relative;line-height:1;
  text-shadow:0 0 3px rgba(211,214,215,.95),0 0 10px rgba(211,214,215,.85),0 0 18px rgba(211,214,215,.6);
  -webkit-tap-highlight-color:transparent}
.namemark{position:fixed;z-index:6;top:max(6px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));
  font-size:26px;transition:opacity .4s ease,visibility .4s}
.topnav{position:fixed;z-index:6;top:max(6px,env(safe-area-inset-top));right:max(6px,env(safe-area-inset-right))}
.topnav a{font-size:30px;animation:navin .45s ease both}
.topnav a[hidden]{display:none}
@keyframes navin{from{opacity:0;transform:translateY(-5px)}}
.topnav .u{position:absolute;left:10px;bottom:7px;width:calc(100% - 20px);height:8px;fill:currentColor;
  clip-path:inset(0 100% 0 0);transition:clip-path .38s cubic-bezier(.6,.05,.3,1)}
.topnav a:hover .u,.topnav a:focus-visible .u{clip-path:inset(0 0 0 0)}
.namemark:focus-visible,.topnav a:focus-visible{outline:2px solid currentColor;outline-offset:-2px;border-radius:3px}
html[data-beat="0"]:not(.in-dossier) .namemark{opacity:0;visibility:hidden}
@media (max-width:480px){
  .namemark{font-size:23px}.topnav a{font-size:27px}
  html.in-dossier .namemark{opacity:0;visibility:hidden}
}
@media (max-width:330px){.namemark{font-size:21px;padding:4px 6px}.topnav a{font-size:24px;padding:4px 8px}.topnav .u{left:8px;width:calc(100% - 16px)}}

/* over the dossier, a band of paper mist keeps the corner links off the text */
body::before{content:'';position:fixed;z-index:5;left:0;right:0;top:0;height:calc(64px + env(safe-area-inset-top));pointer-events:none;
  background:linear-gradient(rgba(211,214,215,.97) 55%,rgba(211,214,215,0));opacity:0;transition:opacity .3s ease}
html.in-dossier body::before{opacity:1}
html.facts-only body::before{opacity:1}
@media (max-width:480px){body::before{height:calc(86px + env(safe-area-inset-top));background:linear-gradient(var(--paper) 62%,rgba(211,214,215,.9) 74%,rgba(211,214,215,0))}}

/* 9:16 portrait phones: the art fills the screen, so the same mist sits behind the nav in the story view */
@media (max-width:480px){
  html.mode-p:not(.in-dossier) body::before{opacity:1;height:calc(70px + env(safe-area-inset-top));
    background:linear-gradient(var(--paper) 60%,rgba(211,214,215,0))}
}

/* ── the dossier ─────────────────────────────────────────────────────────────── */
#dossier{position:relative;z-index:3;background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.06 0 0 0 0 0.07 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  padding:clamp(104px,15vh,160px) max(28px,5vw,env(safe-area-inset-right)) 120px max(28px,5vw,env(safe-area-inset-left))}
#dossier .alias{position:absolute;top:0;left:0;width:1px;height:1px}
#dossier .inner{max-width:1180px;margin:0 auto}
#dossier h2{font-family:'Nanum Brush Script',cursive;font-weight:400;font-size:clamp(78px,9vw,136px);line-height:.8;margin:0;letter-spacing:-.01em}
#dossier .sub{font-style:italic;font-size:clamp(18px,1.5vw,22px);color:var(--ink-soft);margin:.55em 0 0;font-weight:380}
#dossier .lede{font-size:clamp(20px,1.65vw,24px);line-height:1.55;font-weight:370;max-width:34em;margin:2.6rem 0 3rem}

/* skills: hand-inked tags */
#dossier .skills h3{font-family:'Nanum Brush Script',cursive;font-weight:400;font-size:46px;line-height:.9;margin:0 0 .9rem}
#dossier .group h4{font-style:italic;font-weight:400;font-size:15.5px;color:var(--ink-soft);margin:0 0 .55rem;letter-spacing:.01em}
#dossier .tags{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .45rem}
@media (min-width:1024px){#dossier .tags{gap:.36rem .34rem;margin-bottom:1rem}#dossier .tag{font-size:14.5px;padding:.17em .6em .23em}#dossier .group h4{margin-bottom:.4rem;font-size:15px}#dossier .skills h3{font-size:42px;margin-bottom:.7rem}}
#dossier .group:last-child .tags{margin-bottom:0}
#dossier .tag{--rot:-.4deg;--br:5px 10px 4px 11px/10px 4px 11px 5px;--br2:10px 4px 12px 5px/4px 11px 5px 10px;
  position:relative;font-size:15px;line-height:1.25;padding:.3em .72em .36em;max-width:100%;overflow-wrap:anywhere;
  border:1.3px solid rgba(14,15,18,.8);border-radius:var(--br);transform:rotate(var(--rot))}
#dossier .tag::after{content:'';position:absolute;inset:-1px -2px 0 -1px;border:1px solid rgba(14,15,18,.2);border-radius:var(--br2);
  transform:rotate(calc(var(--rot) * -1.6));pointer-events:none}
#dossier .tag:nth-child(5n+2){--rot:.5deg;--br:11px 4px 10px 6px/5px 10px 4px 11px;--br2:4px 11px 5px 10px/10px 5px 11px 4px}
#dossier .tag:nth-child(5n+3){--rot:-.15deg;--br:7px 12px 5px 9px/12px 6px 10px 5px}
#dossier .tag:nth-child(5n+4){--rot:.3deg;--br:4px 9px 12px 6px/9px 12px 5px 10px;--br2:9px 5px 6px 12px/5px 9px 12px 6px}
#dossier .tag:nth-child(5n){--rot:-.5deg;--br:10px 5px 8px 12px/6px 11px 5px 9px}

/* the timeline */
#dossier dl{display:grid;grid-template-columns:11rem minmax(0,1fr);column-gap:2rem;margin:0}
#dossier .entry{display:grid;grid-column:1/-1;grid-template-columns:subgrid;padding:1.55rem 0 1.65rem;position:relative}
#dossier .entry::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3.3 C 80 2.5, 200 3.3, 320 2.7 S 520 2.2, 600 3 L 600 3.5 C 500 4, 380 3.7, 300 4.1 S 90 4.5, 0 4 Z' fill='%230E0F12' fill-opacity='.5'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
#dossier .entry:nth-child(even)::before{transform:scaleX(-1)}
#dossier .entry:first-child{padding-top:0}
#dossier .entry:first-child::before{display:none}
#dossier dt{font-family:'Nanum Brush Script',cursive;font-size:31px;line-height:1;padding-top:.02em;color:var(--ink);min-width:0}
#dossier dd{margin:0;font-size:18px;line-height:1.65;max-width:64ch;min-width:0}
#dossier dd p{margin:0 0 .6em}
#dossier dd p:last-child{margin-bottom:0}
#dossier .role{font-weight:500}
#dossier h2:focus,h1.sr:focus{outline:none}
#dossier mark.ink{color:inherit;padding:0 .2em;margin:0 -.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 30 7, 70 9, 110 7.5 S 170 6, 196 8.5 L 199 12 L 195.5 15.5 L 199.5 20 L 195 25.5 L 198.5 31 C 160 33.5, 120 32, 80 33.5 S 25 34.5, 4.5 32.5 L 1.5 27 L 4 21 L .5 15.5 Z' fill='rgb(64,68,74)' fill-opacity='.28'/%3E%3Cpath d='M9 14.5 C 60 13, 120 14, 191 12.5 L 191 14.6 C 120 16, 60 15, 9 16.6 Z M6 25.5 C 70 24.5, 130 26.5, 194 25 L 194 27 C 130 28.5, 70 27, 6 28 Z' fill='rgb(64,68,74)' fill-opacity='.09'/%3E%3C/svg%3E") 0 55%/0% 100% no-repeat;
  transition:background-size .6s cubic-bezier(.45,.1,.2,1) calc(.42s + var(--i,0) * 80ms)}
#dossier mark.ink.on,html:not(.rv) #dossier mark.ink{background-size:100% 100%}
#dossier a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.22em}
#dossier a:hover{text-decoration-thickness:2px}
#dossier a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
#dossier .links{display:flex;flex-wrap:wrap;gap:.2em 1.4em}
#dossier .links a{overflow-wrap:anywhere}
#dossier .stroke{display:block;width:min(420px,70vw);height:28px;margin:4rem 0 1.4rem}
#dossier .colophon{font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:34em;font-style:italic;margin:0}

/* desktop: timeline left, sticky skills right */
@media (min-width:1024px){
  #dossier .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,340px);column-gap:clamp(56px,6.5vw,112px);
    grid-template-areas:"lede aside" "tl aside"}
  #dossier .lede{grid-area:lede}
  #dossier dl{grid-area:tl}
  #dossier .skills{grid-area:aside;align-self:start;position:sticky;top:var(--aside-top,96px);margin-top:.4rem}
}
@media (max-width:1023px){
  #dossier .inner{max-width:760px}
  #dossier .skills{margin:0 0 3.2rem}
}
@media (max-width:700px){
  #dossier{padding:72px max(22px,env(safe-area-inset-right)) 96px max(22px,env(safe-area-inset-left))}
  #dossier h2{font-size:clamp(64px,19vw,84px)}
  #dossier .lede{font-size:19px;margin:1.8rem 0 2.4rem}
  #dossier dl{grid-template-columns:minmax(0,1fr)}
  #dossier .entry{padding:1.35rem 0 1.4rem}
  #dossier dt{font-size:29px;margin-bottom:.45rem}
  #dossier dd{font-size:17px}
  #dossier .skills h3{font-size:42px}
}

/* one orchestrated reveal per entry (html.rv is set by js/dossier.js) */
html.rv #dossier h2{clip-path:inset(-20% 100% -20% -2%);transition:clip-path .9s cubic-bezier(.6,.05,.3,1)}
html.rv #dossier .sub,html.rv #dossier .lede{opacity:0;transform:translateY(8px);transition:opacity .7s ease .35s,transform .7s cubic-bezier(.2,.7,.2,1) .35s}
html.rv #dossier .lede{transition-delay:.5s}
html.rv #dossier .head.in h2{clip-path:inset(-20% -4% -20% -4%)}
html.rv #dossier .head.in .sub,html.rv #dossier .lede.in{opacity:1;transform:none}
html.rv #dossier .entry dt{clip-path:inset(-15% 100% -15% -4%);transition:clip-path .7s cubic-bezier(.6,.05,.3,1)}
html.rv #dossier .entry dd{opacity:0;transform:translateY(8px);transition:opacity .6s ease .28s,transform .6s cubic-bezier(.2,.7,.2,1) .28s}
html.rv #dossier .entry::before{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.5,.1,.3,1)}
html.rv #dossier .entry.in dt{clip-path:inset(-15% -6% -15% -4%)}
html.rv #dossier .entry.in dd{opacity:1;transform:none}
html.rv #dossier .entry.in::before{clip-path:inset(0 0 0 0)}
html.rv #dossier .group h4{opacity:0;transition:opacity .5s ease}
html.rv #dossier .group .tag{opacity:0;transform:rotate(calc(var(--rot) * 3 + .4deg)) scale(.86);
  transition:opacity .3s ease calc(var(--i,0) * 32ms),transform .5s cubic-bezier(.3,1.5,.5,1) calc(var(--i,0) * 32ms)}
html.rv #dossier .group.in h4{opacity:1}
html.rv #dossier .group.in .tag{opacity:1;transform:rotate(var(--rot))}
@media (prefers-reduced-motion:reduce){
  .topnav a{animation:none}
  .namemark,.topnav .u,body::before{transition:none}
}