/* Jeong-ah Woo Portfolio — static re-implementation */
:root{
  --fg: rgba(0,0,0,.75);
  --fg-strong: rgba(0,0,0,.85);
  --accent: #3b78e7;
  --gap: 1rem;
  --content: 1040px; /* images and multi-column grids */
  --measure: 680px;  /* running text */
  --edge: 32px;      /* side padding */
  --bar: 56px;       /* top bar height */
}
*{box-sizing:border-box}
html{
  font-size:12px; /* fixed base: 1.5rem = 18px body text */
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overscroll-behavior-y:none; /* no rubber-band at the page ends, so the top bar stays put */
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:#fff;color:var(--fg);
  font-family:"Geist",-apple-system,"system-ui","Segoe UI",Roboto,"Helvetica Neue","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size:1.5rem;line-height:1.3;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
img,video{display:block;max-width:100%}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:22;height:var(--bar);display:flex;align-items:center;gap:12px;padding:0 24px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.past-hero .topbar{border-bottom-color:rgba(0,0,0,.08)}
.topbar .brand{flex-shrink:0;white-space:nowrap;font-size:16px;font-weight:700;color:var(--fg-strong)}
.site-nav{margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:24px;font-size:14px;font-weight:600}
.site-nav>a,.menu summary{color:rgba(0,0,0,.6);white-space:nowrap;cursor:pointer;transition:color .15s}
.site-nav>a:hover,.site-nav>a:focus-visible,.site-nav>a[aria-current],.menu summary:hover,.menu summary:focus-visible,.menu[open] summary{color:var(--fg-strong)}
.menu{position:relative}
.menu summary{display:flex;align-items:center;gap:4px;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:5px;height:5px;margin-top:-3px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .15s}
.menu[open] summary::after{margin-top:3px;transform:rotate(-135deg)}
.menu-list{position:absolute;top:calc(100% + 12px);right:0;min-width:200px;padding:8px;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.menu-list a{padding:8px 12px;border-radius:4px;color:rgba(0,0,0,.6);font-weight:500;white-space:nowrap}
.menu-list a:hover,.menu-list a:focus-visible{background:rgba(0,0,0,.05);color:var(--fg-strong)}
.menu-list a[aria-current]{color:var(--fg-strong);font-weight:600}
.topbar .title{position:absolute;top:0;left:max(var(--edge),calc((100% - var(--content)) / 2));max-width:calc(var(--content) - 360px);margin:0;line-height:var(--bar);font-size:16px;font-weight:600;color:var(--fg-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s} /* starts on the content column's left edge */
.past-hero .topbar .title{opacity:1;visibility:visible;transform:none}
.topbar .title:hover{color:rgba(0,0,0,.6)} /* links back to the top of the page */
/* below ~1400px the column edge runs into the name, so the title takes the name's place */
/* no room left of the content column: the title follows the name, which stays as the link Home */
@media (max-width:1400px){.topbar .title{position:static;flex:0 1 auto;min-width:0;max-width:none;margin-left:12px}}
/* section menu: a vertical list on the right edge, shown once the header scrolls away */
.toc{position:fixed;z-index:21;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:12px;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.past-hero .toc{opacity:1;visibility:visible}
.toc a{font-size:14px;line-height:1.3;font-weight:500;color:rgba(0,0,0,.6)} /* 5.7:1; lighter than the top bar menu */
.toc a:hover,.toc a.active{color:var(--fg-strong)}
/* below ~1300px the right margin can't hold the column without covering content,
   and the menu never moves into the top bar, so it is simply not shown */
@media (max-width:1300px){
  .toc{display:none}
}
h2[id]{scroll-margin-top:calc(var(--bar) + 48px)}

/* ---- main column ---- */
main{max-width:calc(var(--content) + 2*var(--edge));margin:0 auto;padding:24px var(--edge) 9rem;container-type:inline-size}
main p,main ul,main .caption,main figcaption{max-width:var(--measure)}
/* ---- next project (end of a case study) ---- */
main>.next{display:block;margin-top:9.6rem;color:var(--fg-strong)}
.next .eyebrow{display:block}
.next-title{display:block;max-width:var(--measure);font-size:32px;line-height:1.2;font-weight:600;letter-spacing:-.014em}
.next-title span{display:inline-block;transition:transform .2s}
.next:hover{color:rgba(0,0,0,.6)}
.next:hover .next-title span{transform:translateX(4px)}

/* ---- footer: mirrors the top bar. Name sits at the bar's 24px edge,
   the sentence starts on the content column, like the project title above ---- */
.foot{position:relative;display:grid;grid-template-columns:calc((100% + 48px - var(--content)) / 2 - 24px) minmax(0,var(--measure)) 1fr;align-items:start;padding:32px 24px 64px;font-size:14px;line-height:1.6;color:rgba(0,0,0,.6)}
.foot::before{content:"";position:absolute;top:0;left:24px;right:24px;border-top:1px solid rgba(0,0,0,.12)}
.foot p{margin:0;font-size:inherit}
.foot a,.foot a[target]{color:var(--fg-strong);text-decoration:underline;text-decoration-color:rgba(0,0,0,.3);text-underline-offset:.2em}
.foot a:hover{text-decoration-color:currentColor;color:var(--fg-strong)}
.foot .who{color:var(--fg-strong)}
.foot .lang{display:flex;gap:12px;justify-self:end}
.foot .lang a,.foot .lang a[lang]{color:rgba(0,0,0,.6);text-decoration:none}
.foot .lang a:hover{color:var(--fg-strong)}
.foot .lang a[aria-current]{color:var(--fg-strong);font-weight:600}
/* not enough room beside the column: stack both on the content edge */
@media (max-width:1400px){
  .foot{display:block;padding:32px max(var(--edge),calc((100% - var(--content)) / 2)) 64px}
  .foot::before{left:max(var(--edge),calc((100% - var(--content)) / 2));right:max(var(--edge),calc((100% - var(--content)) / 2))}
  .foot .who{margin-bottom:1em}
  .foot .lang{margin-top:1em}
  .foot p:not(.who){max-width:var(--measure)}
}
main>*{margin-top:4rem}
main>*:first-child{margin-top:0}
main>h1+*{margin-top:2rem}
main>.m+.m,main>.m+.m,main>.m+.row,main>.row+.m,main>.row+.row,main>.m+.strip,main>.strip+.strip,main>.strip+.m{margin-top:var(--gap)}

h1{font-size:32px;line-height:1.2;font-weight:600;letter-spacing:-.014em;color:var(--fg-strong);margin:0}
h2{font-size:24px;line-height:1.2;font-weight:500;color:var(--fg-strong);margin:0 0 2rem}
h3,h4{font-size:1.5rem;line-height:1.3;font-weight:600;color:var(--fg-strong);margin:1.3em 0 .2em}
h3 small{font-weight:400;opacity:.75;font-size:1em}
.unit>h2:not(:first-child){margin-top:2.6rem}
.eyebrow+h2,.unit>.eyebrow+h2{margin-top:0}
p{margin:0 0 1.3em}
.unit>*:last-child{margin-bottom:0}
ul{margin:0 0 1.3em;padding-left:3rem}
/* project header: lead paragraph under the title, then meta in one row */
.lead{font-size:22px;line-height:1.3;max-width:600px;font-weight:500;color:var(--fg-strong)}
main>h1+.lead{margin-top:1.6rem}
dl.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4rem;margin-bottom:0;padding-top:1.4rem;border-top:1px solid rgba(0,0,0,.12)}
dl.meta dt{font-size:13px;line-height:1.3;font-weight:500;color:rgba(0,0,0,.6);margin-bottom:.4rem} /* #666 on white = 5.7:1 (WCAG AA) */
/* section label above an h2, matches the meta labels */
.eyebrow{font-size:13px;line-height:1.3;font-weight:500;color:rgba(0,0,0,.6);margin:0 0 .6rem}
/* spec-document excerpt: dense, small, monospaced on purpose */
.doc{font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;background:#f6f6f5;border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:2rem 2.2rem;color:rgba(0,0,0,.72)}
.doc p{font-size:12px;line-height:1.55;margin:0 0 .7em}
.doc p:first-child{font-weight:600;color:var(--fg-strong)}
.doc p:last-child{margin-bottom:0}
/* user quote: a thin rule on the left, body color for full contrast */
.quote{margin:.8rem 0 0;padding-left:1.2rem;border-left:2px solid rgba(0,0,0,.15)}
.quote p{margin:0;font-size:16px;line-height:1.5;color:var(--fg)}
/* single big number with a label */
.stat .stat-value{font-size:48px;line-height:1.1;font-weight:600;color:var(--fg-strong);margin:0}
.stat .stat-label{font-size:13px;line-height:1.3;font-weight:500;color:rgba(0,0,0,.6);margin:.6rem 0 0}
dl.meta dd{margin:0;font-size:16px;line-height:1.35;color:var(--fg-strong)}
/* links in the meta (e.g. the company site) use the same quiet underline as the footer */
dl.meta dd a,dl.meta dd a[target]{text-decoration:underline;text-decoration-color:rgba(0,0,0,.3);text-underline-offset:.2em}
dl.meta dd a:hover{color:var(--fg-strong);text-decoration-color:currentColor}
strong{font-weight:600}
p{font-size:18px}
a[target]{text-decoration:underline;text-underline-offset:.15em}
/* external links inside running text: darker than the text, with an arrow so they read as links */
main p a[target]{color:var(--fg-strong);font-weight:500;text-decoration-color:rgba(0,0,0,.35);text-underline-offset:.2em}
main p a[target]:hover{color:var(--fg-strong);text-decoration-color:currentColor}
hr{border:0;border-top:2px solid rgba(0,0,0,.75);margin:6.8rem 0 1.5rem}
main>hr{margin-top:6.8rem}

/* ---- column sets ---- */
.set{display:grid;gap:var(--gap);align-items:start}
.set.middle{align-items:center}
.term p{margin:0}
.term-orig{font-size:13px;line-height:1.3;font-weight:500;color:rgba(0,0,0,.6)}
.term-new{font-size:24px;line-height:1.3;font-weight:600;color:var(--fg-strong);margin-top:.4rem !important}
.term-gloss{font-size:16px;line-height:1.4;color:var(--fg);margin-top:.2rem !important}
.unit{min-width:0}
.unit>.m+.m{margin-top:var(--gap)}
.unit>.m{margin-bottom:1.3em}
.unit>.m:last-child{margin-bottom:0}

/* ---- media ---- */
.m{margin-bottom:0;margin-left:0;margin-right:0;position:relative;min-width:0}
main>.m,main>.row,main>.strip{margin-top:4rem}
.m .box{aspect-ratio:var(--r,1.5);width:100%;background:transparent;overflow:hidden}
.m img,.m video{width:100%;height:100%;object-fit:contain}
.m.zoom img{cursor:zoom-in}
.m.center{margin-left:auto;margin-right:auto}
.m.panel .box{aspect-ratio:auto;padding:40px;background:#f0f0f0;box-sizing:border-box}
.m.pan .box{position:relative;aspect-ratio:auto;height:720px;overflow:hidden}
.m.pan img{position:absolute;left:0;top:0;width:100%;height:auto;animation:pan-down 35s ease-in-out infinite alternate}
.m.pan.wait img{animation-play-state:paused}
@keyframes pan-down{to{top:100%;transform:translateY(-100%)}}
@media (prefers-reduced-motion:reduce){.m.pan img{animation:none}}
.m.panel.accent .box{background:#014242}
.m.panel.blue .box{background:#279DEB}
.m.panel video,.m.panel img{display:block;height:auto;border-radius:8px}
.m.panel.bleed .box{aspect-ratio:1.8;padding:7.06% 15.45% 0}
.m.panel.bleed video,.m.panel.bleed img{border-radius:8px 8px 0 0}
.m.half .box{aspect-ratio:1}
.m.half img{object-fit:cover}
.unit>.m.half{margin-bottom:0}
/* line up the heading, text, images, and caption across before/after columns */
@media (min-width:821px){
  .set:has(.half){row-gap:0}
  .set:has(.half)>.unit{display:grid;grid-row:span 5;grid-template-rows:subgrid}
}
.m.before img{object-position:0 50%}
.m.after img{object-position:100% 50%}
.m.half figcaption{margin-top:.4rem}
.m.border .box{position:relative}
.m.border .box::after{content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.1);pointer-events:none}
figcaption,.caption{font-size:16px;line-height:1.4;margin-top:.6rem;color:var(--fg)}
main>.caption{margin-top:.6rem}
.row{display:flex;gap:var(--gap);align-items:flex-start}
.row .m{min-width:0}
.row.wide{gap:40px}
.strip{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;container-type:inline-size}
.strip .m{flex:0 0 auto;scroll-snap-align:start;height:var(--h)}
.strip .m img{height:100%;width:auto;max-width:none}

/* ---- home ---- */
.home main>.hero h1{max-width:90%}
.intro{padding:2rem 0 1rem}
.intro h1{max-width:820px}
.intro h1 .keep{display:inline-block} /* moves the job title and name to the next line as one unit */
.intro p{font-size:22px;line-height:1.45;max-width:var(--measure);margin:1.6rem 0 0}
/* home: each project stacks title, client, summary, and a button above a large image or Lottie */
.cards{display:flex;flex-direction:column;gap:80px;margin:5rem 0 0}
.card{display:block;min-width:0;color:inherit}
.card:hover{color:inherit}
.card h2{margin:0;font-weight:600}
.card h2 a{color:inherit}
.card h2 a::after{content:"\2192";display:inline-block;margin-left:.35em;opacity:0;transform:translateX(-6px);transition:opacity .15s,transform .15s}
.card h2 a:hover::after,.card h2 a:focus-visible::after,.card:has(.card-media:hover) h2 a::after{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.card h2 a::after{transition:none}}
.card h2 a:hover{color:var(--accent)}
.card-media{display:block}
.card .client{font-size:14px;line-height:1.3;font-weight:500;color:rgba(0,0,0,.6);margin:8px 0 0}
.card .summary{font-size:18px;line-height:1.45;color:var(--fg);max-width:var(--measure);margin:20px 0 0}
.card .thumb{overflow:hidden;border-radius:8px;margin-top:32px}
.card .thumb.lottie{aspect-ratio:760/420}
.card .thumb svg{display:block}
.card .thumb img{display:block;width:100%;height:auto;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.card-media:hover .thumb img{transform:scale(1.03)}} /* clipped by .thumb */
@media (prefers-reduced-motion:reduce){.card .thumb img{transition:none}.card-media:hover .thumb img{transform:none}}
.intro p+p{margin-top:0}
.intro a{white-space:nowrap} /* keeps an app icon on the same line as its name */
.app-icon{display:inline-block;width:1em;height:1em;margin-right:.25em;vertical-align:-.16em;border-radius:22.5%;outline:1px solid rgba(0,0,0,.08);outline-offset:-1px}
.vita{list-style:none;padding:0;margin:3rem 0 0;max-width:var(--content)}
.about main>.about-h{margin:80px 0 0;font-size:24px;line-height:1.2;font-weight:500;color:var(--fg-strong)}
.about main>.about-h+.vita{margin-top:16px}
.about main>.photo-strip{margin-top:80px}
.about main>.contact{margin:40px 0 0}
.vita li{display:flex;align-items:baseline;column-gap:16px;padding:14px 0;font-size:16px;line-height:1.45}
.vita .v-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.vita .v-desc{font-size:15px;color:rgba(0,0,0,.6);max-width:var(--measure)}
.vita li+li{border-top:1px solid rgba(0,0,0,.08)}
.vita .v-co{font-weight:600;color:var(--fg-strong)}
.vita .v-co a,.vita .v-co a[target]{color:inherit;text-decoration:none}
.vita .v-co a:hover{color:var(--accent)}
.vita .v-co a::after{content:"\2009\2197";display:inline-block;font-weight:400}
.vita .v-date{font-family:"Geist Mono",ui-monospace,Menlo,monospace;font-size:14px;color:rgba(0,0,0,.6)}
.photo-strip{position:relative;z-index:11;width:100vw;margin:80px 0 0 calc(50% - 50vw);overflow-x:auto;scrollbar-width:none;cursor:grab}
.photo-strip::-webkit-scrollbar{display:none}
.photo-strip.dragging{cursor:grabbing;user-select:none}
.photo-strip.dragging img{pointer-events:none}
.photo-strip .track{display:flex;gap:16px;width:max-content}
.photo-strip figure{position:relative;margin:0;height:280px;flex:none;transition:opacity .3s}
.photo-strip img{height:100%;width:auto;display:block}
.photo-strip:hover figure,.photo-strip:focus-within figure{opacity:.45}
.photo-strip:hover figure:hover,.photo-strip figure:focus-visible{opacity:1;outline:none}
.photo-strip figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:32px 16px 14px;max-width:none;font-size:14px;line-height:1.4;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transition:opacity .3s}
.photo-strip figure:hover figcaption,.photo-strip figure:focus-visible figcaption{opacity:1}
.contact{list-style:none;padding:0;margin:40px 0 40px;display:flex;flex-wrap:wrap;gap:8px 28px}
@media (min-width:1300px){
  .about main>.contact{position:fixed;left:24px;top:calc(var(--bar) + 27px);z-index:10;margin:0;flex-direction:column;align-items:flex-start;gap:8px}
}
.contact a,.contact a[target]{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--fg-strong);text-decoration:none}
.contact a:hover{color:var(--accent)}
.contact svg{flex:none;width:18px;height:18px}
.more-link{margin-top:24px}
.projects{margin-top:4rem}
.hero p{max-width:49%;margin:2rem 0 2rem}
.btn{display:inline-block;background:#1b1b1a;color:#fff;font-size:1.35rem;line-height:1;padding:1.05rem 1.3rem;border-radius:.6rem;box-shadow:0 .25rem .8rem rgba(0,0,0,.25);font-weight:500;transition:transform .15s,box-shadow .15s}
.btn:hover{color:#fff;transform:translateY(-1px);box-shadow:0 .4rem 1rem rgba(0,0,0,.3)}
.hero .m{margin-top:4rem}
.hero p{margin-top:2rem}
.home main>hr{margin:6.8rem 0 1.5rem}

/* ---- about / concept ---- */
.about main{max-width:calc(var(--measure) + 2*var(--edge))}
h1.small{font-size:1.5rem;line-height:1.3;font-weight:600;letter-spacing:0;color:var(--fg-strong)}
.about main>h1+*{margin-top:1.3rem}
.about main>*{margin-top:1.3rem}
.about main>*:first-child{margin-top:0}
.about main>p+p{margin-top:0}
.about main>.m{margin-top:1.3rem}
.about main>hr{margin:1.3rem 0}
.about main>hr+p,.about main>p+p{margin-top:0}

/* ---- lightbox ---- */
.lb{position:fixed;inset:0;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;z-index:50;cursor:zoom-out;padding:2rem}
.lb img{max-width:100%;max-height:100%;object-fit:contain}

/* ---- small screens ---- */
@media (max-width:820px){
  :root{--edge:16px}
  main{padding:32px var(--edge) 6rem}
  .topbar .title{display:none}
  .topbar{padding:0 var(--edge)}
  .set{grid-template-columns:1fr !important}
  .hero p{max-width:100%}
  .home main>.hero h1{max-width:100%}
  .intro p{font-size:18px}
  .photo-strip figure{height:200px}
  .photo-strip figcaption{opacity:1}
  .row:not(.tile){flex-direction:column;gap:var(--gap)}
  dl.meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row:not(.tile) .m{flex:none !important;width:100%}
  .row.tile .m{margin-top:0}
  .m.panel .box{padding:16px}
  .m.pan .box{height:360px}
}

.unit>h3:first-child,.unit>h4:first-child{margin-top:0}

/* Korean pages share the layout; Hangul needs its own face, looser lines, and whole-word breaks */
html[lang="ko"] body{font-family:"Geist","Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-weight:500;word-break:keep-all;overflow-wrap:break-word}
html[lang="ko"] .card .summary,html[lang="ko"] main p:not([class]),html[lang="ko"] main li,html[lang="ko"] .lead,html[lang="ko"] .intro p,html[lang="ko"] figcaption,html[lang="ko"] .caption,html[lang="ko"] .quote p{line-height:1.6}
html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3,html[lang="ko"] .next-title{line-height:1.35}
html[lang="ko"] h2,html[lang="ko"] .about main>.about-h{font-weight:600}