@font-face{font-family:"Roboto Mono";src:url(/assets/fonts/RobotoMono-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Mono";src:url(/assets/fonts/RobotoMono-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Mono";src:url(/assets/fonts/RobotoMono-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Mono";src:url(/assets/fonts/RobotoMono-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* Jaedyn Tang — portfolio */
@font-face{font-family:"Helvetica Neue LTPro Bd";src:url(/assets/fonts/HelveticaNeueLTPro-Bd.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#fdfdfc;
  --pink:#ffd9f2;
  --text:#161616;
  --frame:#ecebe9;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --bold:"Helvetica Neue LTPro Bd","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--frame);color:var(--text)}
body{font-family:var(--mono);-webkit-font-smoothing:antialiased}
a{color:inherit}
img,video{display:block}
::selection{background:var(--pink)}
:focus-visible{outline:1px solid var(--text);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.frame{padding:14px;min-height:100vh}
.card{position:relative;display:flex;flex-direction:column;min-height:calc(100vh - 28px);border-radius:16px;overflow:hidden;background:var(--bg)}
body.is-home .card{height:calc(100vh - 28px);min-height:620px;touch-action:none}

/* ---------- header ---------- */
.site-header{position:relative;z-index:3}
.site-header .bar-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:24px;row-gap:16px;padding:36px 44px 0;font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.nav{display:flex;gap:56px}
.nav a{text-decoration:none;padding:4px 5px;margin:-4px -5px;transition:background .2s ease-out}
.nav a:hover,.nav a[aria-current="page"]{background:var(--pink)}
.sname{visibility:hidden}
body:not(.is-home) .sname{visibility:visible}
.logo-link{display:block;text-decoration:none;font-family:var(--bold);font-weight:700;font-size:30px;line-height:1;letter-spacing:-.045em;text-transform:none;white-space:nowrap}

.logo{position:relative;display:inline-block}
.logo .dot{position:absolute;border-radius:50%;mix-blend-mode:multiply}
.logo .d1{left:.16em;top:-.17em;width:.98em;height:.98em;background:#f9f3b0}
.logo .d2{left:calc(56% - .18em);top:.46em;width:.36em;height:.36em;background:#bfe6f4}
.logo .d3{right:-.145em;top:-.045em;width:.51em;height:.51em;background:#e7b4e1}
.logo .word{position:relative}

.player{justify-self:end;display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:0}
.sticker{width:26px;height:26px;border:2px solid #fff;border-radius:4px;box-shadow:0 1px 3px rgba(22,22,22,.1),0 1px 1px rgba(22,22,22,.06);opacity:0;transform:rotate(-8deg) scale(.6);transition:opacity .25s ease-out,transform .3s ease-out}
.is-playing .sticker{opacity:1;transform:rotate(-8deg) scale(1)}
.play{all:unset;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.play:focus-visible{outline:1px solid var(--text)}
.play .i-pause{display:none}
.is-playing .play .i-pause{display:block}
.is-playing .play .i-play{display:none}
.time{font-variant-numeric:tabular-nums}
.progress{width:86px;height:2px;background:rgba(22,22,22,.18)}
.progress span{display:block;height:100%;width:0;background:var(--text);transition:width .25s linear}

.blur{position:absolute;left:0;right:0;z-index:0;pointer-events:none;display:none;background:rgba(253,253,252,.3);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
body.is-home .blur{display:block}
.blur-top{top:0;height:200px;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.45) 62%,rgba(0,0,0,.2) 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.45) 62%,rgba(0,0,0,.2) 80%,transparent 100%)}
.blur-bottom{bottom:0;height:240px;-webkit-mask-image:linear-gradient(to top,#000 0%,#000 30%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.45) 62%,rgba(0,0,0,.2) 80%,transparent 100%);mask-image:linear-gradient(to top,#000 0%,#000 30%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.45) 62%,rgba(0,0,0,.2) 80%,transparent 100%)}

/* ---------- footer ---------- */
.site-footer{position:relative;z-index:3;margin-top:120px}
body.is-home .site-footer{margin-top:0}
.site-footer .foot-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:40px;row-gap:16px;padding:0 44px 40px;font-size:11px;line-height:1.4}
.site-footer p{margin:0}
.site-footer a{text-decoration:none}

/* ---------- view ---------- */
#view{position:relative;z-index:2;flex:1;display:flex;flex-direction:column}
.enter{flex:1;display:flex;flex-direction:column;animation:fade .4s ease-out both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lz{animation:fade .7s ease-out both}

/* ---------- home ---------- */
.home{flex:1;display:flex;align-items:center;justify-content:center;padding:0 24px}
.home h1{margin:0;font-family:var(--bold);font-weight:700;font-size:12.5vw;line-height:.9;letter-spacing:-.045em;white-space:nowrap}
.trail{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;display:none}
body.is-home .trail{display:block}
.seed{position:absolute;right:5%;top:16%;width:34%;height:auto}
.ti{position:absolute;width:240px;transform:translate(-50%,-50%);pointer-events:none;animation:trail 1.4s ease-out both}
.ti img{width:100%;height:auto;filter:grayscale(1) contrast(1.05)}
.ti.gr::after,.grain::after{content:"";position:absolute;inset:0;background:url(/assets/img/grain.png) 0 0/128px 128px;mix-blend-mode:overlay;opacity:.2;pointer-events:none}
@keyframes trail{0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}10%{opacity:1;transform:translate(-50%,-50%) scale(1)}65%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}

/* ---------- work index ---------- */
.work{padding:64px 0 0}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.tile{position:relative;display:block;text-decoration:none}
.tile .ph{position:relative;aspect-ratio:3/4;overflow:hidden;background:#f6eef3;transition:filter .25s ease-out}
.tile .ph img{width:100%;height:100%;object-fit:cover;transition:filter .35s ease-out}
.tile:hover .ph,.tile:focus-visible .ph{filter:brightness(.62)}
.tile:hover .ph img,.tile:focus-visible .ph img{filter:blur(5px)}
.tile .cap{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;margin:0;padding:16px;color:#fff;font-size:12px;letter-spacing:.04em;opacity:0;transition:opacity .3s ease-out;pointer-events:none}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1}
@media (hover:none){.tile .cap{opacity:1;align-items:flex-end;justify-content:flex-start;font-size:11px;background:linear-gradient(to top,rgba(0,0,0,.45),transparent 45%)}}

/* ---------- case study ---------- */
.about-pg{flex:1;display:grid;grid-template-columns:420px minmax(0,343px);column-gap:72px;align-items:center;justify-content:center;padding:96px 44px 0}
.about-pg figure{position:relative;margin:0;width:420px;aspect-ratio:1000/978;overflow:hidden}
.about-pg img{width:100%;height:100%;object-fit:cover;display:block}
.about-pg .txt{max-width:343px}
.about-pg p{margin:0 0 1.4em;font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.4}
.about-pg p:last-child{margin-bottom:0}
@media (max-width:800px){.about-pg{grid-template-columns:minmax(0,1fr);row-gap:32px;padding:56px 20px 0}.about-pg figure{width:min(100%,420px)}}
.case{padding:96px 44px 0}
.intro{display:grid;grid-template-columns:auto minmax(0,54ch);justify-content:center;align-items:center;column-gap:56px;row-gap:20px;margin-bottom:72px}
.pname{margin:0;font-family:var(--mono);font-weight:700;font-size:20px;line-height:1.2;letter-spacing:0}
.intro .para{margin:0 0 14px;max-width:54ch;font-family:var(--sans);font-size:17px;line-height:1.4}
.intro .para:last-child{margin-bottom:0}
.gal{display:flex;flex-direction:column;gap:32px}
.gal figure{margin:0;overflow:hidden;background:#f3f1f0}
.gal figure img,.gal figure video{width:100%;height:100%;object-fit:cover}
.gal .bare{background:none}
.gal .bare img{object-fit:contain}
.two{display:grid;column-gap:32px;align-items:start}
.solo{margin-left:auto !important;margin-right:auto !important;width:58%}
.prints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;width:84%;margin:24px auto}
.prints img{width:100%;aspect-ratio:1/1}
.phone{width:34%;margin:0 auto !important;background:none !important}
.next{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:120px;padding-top:20px;border-top:1px solid var(--text)}
.next .bk{font-size:13px;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;padding:2px 4px;margin:-2px -4px;transition:background .2s ease-out}
.next .bk:hover{background:var(--pink)}
.next .nx{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-decoration:none}
.next .nt{font-family:var(--mono);font-weight:700;font-size:20px;line-height:1.35;letter-spacing:0}
.next .nx small{font-size:13px;text-transform:uppercase;letter-spacing:.02em}

/* nom: app screens + instagram */
.ui{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:72px;margin:0 auto 120px}
.ui figure{margin:0;width:320px;max-width:100%}
.ui img{width:100%;height:auto}
.ui figcaption{margin-top:16px;text-align:center;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.ig{max-width:935px;margin:0 auto}
.igh{display:grid;grid-template-columns:96px minmax(0,1fr) auto;column-gap:28px;row-gap:16px;align-items:center;padding-bottom:28px;margin-bottom:4px;border-bottom:1px solid rgba(22,22,22,.14)}
.av{width:96px;height:96px;border-radius:50%;background:#fff;border:1px solid rgba(22,22,22,.12);display:flex;align-items:center;justify-content:center;overflow:hidden}
.av img{width:78%;height:auto}
.igh .handle{margin:0 0 6px;font-family:var(--bold);font-weight:700;font-size:20px}
.igh .count{margin:0 0 8px;font-size:11px;letter-spacing:.02em;text-transform:uppercase}
.igh .bio{margin:0;font-family:var(--sans);font-size:15px;line-height:1.4}
.iglink{justify-self:start;padding:10px 14px;border:1px solid var(--text);font-size:11px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;text-decoration:none;transition:background .2s ease-out}
.iglink:hover{background:var(--pink)}
.iggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.igt{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#eee}
.igt img{width:100%;height:100%;object-fit:cover;transition:filter .3s ease-out}
.igt:hover img,.igt:focus-visible img{filter:brightness(.62)}
.igt:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.igt svg{position:absolute;top:10px;right:10px}
.igt .cnt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;letter-spacing:.04em;opacity:0;transition:opacity .3s ease-out}
.igt:hover .cnt,.igt:focus-visible .cnt{opacity:1}
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:32px;background:rgba(22,22,22,.86);animation:fade .25s ease-out both}
.lb[hidden]{display:none}
.lbx,.lba{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lbx{position:absolute;top:14px;right:14px;width:44px;height:44px}
.lba{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;background:rgba(255,255,255,.92)}
.lba[hidden]{display:none}
.lbx:focus-visible,.lba:focus-visible{outline:2px solid #fff}
.lbp{display:flex;width:100%;max-width:1180px;max-height:calc(100vh - 64px);background:var(--bg)}
.lbm{position:relative;flex:0 0 auto;height:min(calc(100vh - 64px),860px);aspect-ratio:3/4;background:#161616;touch-action:pan-y;user-select:none}
.lbm img{width:100%;height:100%;object-fit:contain}
.dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:5px}
.dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45)}
.dots span.on{background:#fff}
.lbs{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;padding:20px 22px;overflow:auto}
.lbs .who{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid rgba(22,22,22,.12)}
.lbs .who .av{width:32px;height:32px}
.lbs .who b{font-family:var(--bold);font-size:14px}
.lbs .who .ctr{margin-left:auto;font-size:11px}
.lbs .capn{margin:16px 0 0;font-family:var(--sans);font-size:14px;line-height:1.45;white-space:pre-line}
.lbs .date{margin:auto 0 0;padding-top:18px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;opacity:.6}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .site-header .bar-inner{padding:20px 20px 0;grid-template-columns:minmax(0,1fr) auto}
  .sname{grid-column:1/-1;grid-row:1}
  body.is-home .sname{display:none}
  .logo-link{font-size:28px}
  .nav{gap:24px}
  .progress{display:none}
  .site-footer .foot-inner{grid-template-columns:minmax(0,1fr);padding:0 20px 24px;font-size:12px}
  .home h1{font-size:14vw}
  .seed{width:42%;top:16%}
  .ti{max-width:42vw}
  .work{padding-top:40px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .case{padding:56px 20px 0}
  .two{grid-template-columns:minmax(0,1fr) !important;row-gap:16px}
  .solo{width:100%}
  .gal{gap:16px}
  .prints{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .phone{width:72%}
  .intro{grid-template-columns:minmax(0,1fr)}
  .next{flex-direction:column;align-items:flex-start}
  .next .nx{align-items:flex-start}
  .igh{grid-template-columns:64px minmax(0,1fr);column-gap:16px}
  .igh .av{width:64px;height:64px}
  .iglink{grid-column:1/-1}
  .iggrid{gap:2px}
  .lb{padding:0}
  .lbp{flex-direction:column;max-height:100%;height:100%;overflow:auto}
  .lbm{width:100%;height:auto}
}
@media (prefers-reduced-motion:reduce){
  .enter,.lz,.ti{animation-duration:.01ms}
}