:root{
  --bg:#ffffff;
  --soft:#f6f5f4;
  --ink:#0d0b0c;
  --ink-2:#55504f;
  --ink-3:#8f8a89;
  --line:#ebe8e7;
  --accent:#7a1f2b;
  --accent-soft:#f7e7e9;
  --ribbon:#f4a6cf;
  --font:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad:clamp(20px,3.4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.wrap{width:min(1240px,100% - var(--pad)*2);margin-inline:auto}
.label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* preloader */
.loader{position:fixed;inset:0;z-index:100;background:#fff;display:flex;align-items:flex-end;padding:0 var(--pad) 28px;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.loader__in{width:100%;display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--line);padding-top:10px}
.loader__num{font-size:clamp(90px,13vw,190px);font-weight:700;line-height:.82;letter-spacing:-.05em;display:flex}
.loader__num sup{font-size:.22em;letter-spacing:0;margin-left:4px;line-height:1}
.loader.done{transform:translateY(-100%)}

/* top bar */
.topbar{position:fixed;inset:0 0 auto 0;z-index:50;height:64px;background:rgba(255,255,255,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(235,232,231,.7)}
.topbar .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.meta{display:flex;gap:44px}
.meta div{line-height:1.35}
.meta .label{font-size:9.5px;display:block;margin-bottom:2px}
.meta b{font-size:12.5px;font-weight:500}
.meta .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#2fb36b;margin-right:6px;vertical-align:1px}
.links{display:flex;align-items:center;gap:28px;font-size:13.5px;font-weight:500;color:var(--ink-3)}
.links a{transition:color .2s}
.links a:hover,.links a.on{color:var(--ink)}
.links a.hi{color:var(--accent)}
.menu-btn{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);place-items:center}
.menu-btn svg{width:18px;height:18px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 20px;border-radius:999px;font-size:13.5px;font-weight:600;white-space:nowrap;transition:transform .2s, background .2s, border-color .2s}
.btn svg{width:15px;height:15px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--accent)}
.btn-line{border:1px solid var(--line);background:#fff}
.btn-line:hover{border-color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:500;border:1px solid var(--line);background:#fff;color:var(--ink-2);white-space:nowrap}
.chip--on{background:var(--accent-soft);border-color:transparent;color:var(--accent)}

/* ribbons */
.ribbon{position:absolute;left:-20vw;width:140vw;height:46px;display:flex;align-items:center;overflow:hidden;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ribbon__track{display:flex;width:max-content;animation:ribbon 40s linear infinite}
.ribbon__track span{padding-right:.6em}
.ribbon--pink{background:var(--ribbon);color:var(--ink)}
.ribbon--ink{background:var(--accent);color:#fff}
.ribbon--rev .ribbon__track{animation-direction:reverse}
@keyframes ribbon{to{transform:translateX(-50%)}}

/* hero */
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:clamp(100px,13vh,140px)}
.hero h1{position:relative;z-index:4;text-align:center;font-size:clamp(34px,4.4vw,62px);font-weight:600;line-height:1.08;letter-spacing:-.035em}
.hero h1 .type{color:var(--accent)}
.hero h1 .caret{display:inline-block;width:3px;height:.9em;background:var(--accent);margin-left:4px;vertical-align:-.08em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero p{position:relative;z-index:4;text-align:center;color:var(--ink-2);max-width:56ch;margin:20px 20px 0;font-size:15px}
.hero__photo{position:absolute;z-index:2;bottom:0;left:50%;transform:translateX(-50%);height:clamp(320px,56svh,600px);aspect-ratio:4/5;border-radius:999px 999px 0 0;overflow:hidden;background:#222}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:grayscale(1) contrast(1.12) brightness(1.04);transition:filter .6s}
.hero__photo:hover img{filter:grayscale(0)}
.hero .ribbon--pink{z-index:1;top:58%;transform:rotate(-13deg)}
.hero .ribbon--ink{z-index:3;top:79%;transform:rotate(4deg)}
.hero__foot{position:absolute;z-index:5;left:var(--pad);bottom:28px;display:flex;gap:10px;align-items:center}
.ico{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;transition:border-color .2s, transform .2s}
.ico:hover{border-color:var(--ink);transform:translateY(-2px)}
.ico svg{width:15px;height:15px}
.pill-mail{height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;font-size:12.5px;font-weight:500;transition:border-color .2s}
.pill-mail:hover{border-color:var(--ink)}

/* about */
.sec{padding:110px 0 0}
.head-row{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.status{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.status i{width:7px;height:7px;border-radius:50%;background:#2fb36b}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,100px);align-items:start}
.about h2{font-size:clamp(32px,3.4vw,48px);font-weight:600;line-height:1.08;letter-spacing:-.035em;margin-bottom:22px}
.about p{color:var(--ink-2);max-width:52ch;margin-bottom:30px}
.actions{display:flex;gap:10px;flex-wrap:wrap}

.cal{border:1px solid var(--line);border-radius:18px;padding:22px}
.cal__top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.cal__top b{font-size:15px;font-weight:600}
.cal__tag{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:600}
.cal__tag svg{width:13px;height:13px}
.cal__grid{display:grid;grid-template-columns:38px repeat(12,1fr);gap:5px;align-items:center}
.cal__grid .m{font-size:10.5px;color:var(--ink-3);text-align:center}
.cal__grid .y{font-size:11px;color:var(--ink-3)}
.cell{aspect-ratio:1;border-radius:5px;background:#efeded;position:relative}
.cell[data-l="1"]{background:#e9b9c0}
.cell[data-l="2"]{background:var(--accent)}
.cell[data-l="f"]{background:transparent;border:1px dashed var(--line)}
.cell:hover::after{content:attr(data-tip);position:absolute;z-index:5;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:#fff;font-size:11.5px;padding:6px 10px;border-radius:8px;pointer-events:none}
.cal__legend{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:11.5px;color:var(--ink-3)}
.cal__legend span{display:inline-flex;align-items:center;gap:5px}
.cal__legend i{width:11px;height:11px;border-radius:3px;background:#efeded}

/* career */
.career-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.career-head h2{display:flex;align-items:baseline;gap:16px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.career-head .chips{display:flex;gap:8px;flex-wrap:wrap}
.track-bar{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.progress{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
.progress i{position:absolute;inset:0 auto 0 0;width:20%;background:var(--ink);transition:width .2s}
.arrows{display:flex;gap:8px}
.arrows button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:border-color .2s, opacity .2s}
.arrows button:hover{border-color:var(--ink)}
.arrows button:disabled{opacity:.35;pointer-events:none}
.arrows svg{width:15px;height:15px}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px var(--pad) 8px;margin:0 calc(var(--pad) * -1)}
.rail::-webkit-scrollbar{display:none}
.job{flex:0 0 clamp(270px,25vw,320px);scroll-snap-align:start;border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;background:#fff;transition:border-color .25s, transform .25s}
.job:hover{border-color:#cfc9c8;transform:translateY(-3px)}
.job__co{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:500;color:var(--ink-2);margin-bottom:16px}
.job__co img{width:28px;height:28px;border-radius:50%;object-fit:contain;border:1px solid var(--line);padding:3px;background:#fff}
.job__co span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job__badge{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.job__badge.now{color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:6px}
.job h3{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.job .date{font-size:12px;color:var(--ink-3);margin:3px 0 16px}
.job ul{list-style:none;display:grid;gap:10px;font-size:13px;color:var(--ink-2);background:var(--soft);border-radius:12px;padding:14px 14px 14px 26px;flex:1}
.job li{position:relative}
.job li::before{content:"";position:absolute;left:-12px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--ink-3)}
.job__more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:12.5px;font-weight:600}
.job__more svg{width:13px;height:13px;transition:transform .2s}
.job__more:hover svg{transform:translate(2px,-2px)}

/* contact */
.contact-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.contact-head h2{display:flex;align-items:baseline;gap:16px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.contact-head .notes{display:flex;gap:18px;font-size:12.5px;color:var(--ink-2)}
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
.contact > div > p{color:var(--ink-2);max-width:44ch;margin-bottom:22px}
.c-rows{display:grid;gap:10px}
.c-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;transition:border-color .2s}
.c-row:hover{border-color:#cfc9c8}
.c-row .ic{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.c-row .ic svg{width:17px;height:17px}
.c-row div{flex:1;min-width:0;line-height:1.35}
.c-row div .label{font-size:10px;display:block}
.c-row div b{font-size:13.5px;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-row .act{height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;transition:background .2s,color .2s}
.c-row .act:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.form{border:1px solid var(--line);border-radius:18px;padding:24px}
.form h3{font-size:16px;font-weight:600;margin-bottom:18px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:block;margin-bottom:14px}
.form label .label{display:block;margin-bottom:6px;color:var(--ink-2)}
.form input,.form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;background:#fff;transition:border-color .2s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.form textarea{min-height:130px;resize:vertical}
.form__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.form__foot small{font-size:12px;color:var(--ink-3)}
.form .btn-dark{background:var(--accent)}
.form .btn-dark:hover{background:var(--ink)}

.band{position:relative;height:140px;overflow:hidden;margin-top:60px}
.band .ribbon{top:46px;transform:rotate(-2.5deg)}

/* footer */
.footer{border-top:1px solid var(--line);padding:56px 0 30px}
.footer__grid{display:grid;grid-template-columns:1fr auto auto;gap:64px;align-items:start}
.footer h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.footer p{color:var(--ink-2);font-size:13.5px;max-width:42ch;margin-bottom:20px}
.footer nav .label{display:block;margin-bottom:12px}
.footer nav a{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);margin-bottom:8px;transition:color .2s}
.footer nav a:hover{color:var(--ink)}
.footer nav svg{width:14px;height:14px}
.footer__bottom{display:flex;justify-content:space-between;gap:12px;margin-top:56px;font-size:12px;color:var(--ink-3)}

/* projects page */
.p-hero{padding:120px 0 26px}
.p-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.p-top h1{font-size:clamp(38px,4.4vw,60px);font-weight:600;line-height:1.04;letter-spacing:-.04em;margin-top:10px}
.p-side{max-width:340px;text-align:right}
.p-side p{color:var(--ink-2);font-size:13.5px;margin-bottom:16px}
.p-stats{display:flex;justify-content:flex-end;gap:26px}
.p-stats b{display:block;font-size:22px;font-weight:600;line-height:1;letter-spacing:-.02em}
.p-stats .label{font-size:9.5px}
.filters{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:7px;transition:background .2s,color .2s,border-color .2s}
.tab small{font-size:11.5px;color:var(--ink-3)}
.tab:hover{border-color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tab[aria-selected="true"] small{color:rgba(255,255,255,.6)}
.showing{font-size:12.5px;color:var(--ink-3)}
.p-band{position:relative;height:80px;overflow:hidden;margin:4px 0 18px}
.p-band .ribbon{top:16px;height:40px;transform:rotate(-1.2deg)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:90px}
.card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:border-color .25s, transform .25s}
.card:hover{border-color:#cfc9c8;transform:translateY(-4px)}
.card__cover{position:relative;aspect-ratio:16/10;background:var(--soft);overflow:hidden}
.card__cover img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.card:hover .card__cover img{transform:scale(1.04)}
.card__cover .cat{position:absolute;left:12px;top:12px;height:24px;padding:0 10px;border-radius:999px;background:#fff;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center}
.card__body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.card__title{display:flex;justify-content:space-between;align-items:center;gap:10px}
.card__title h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.card__title .yr{font-size:12px;color:var(--ink-3);white-space:nowrap}
.card__title .st{font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:6px;margin-right:6px}
.card__org{font-size:12px;color:var(--ink-3);margin:2px 0 10px}
.card__body p{font-size:13px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:16px}
.card__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:auto}
.card__foot .tags{display:flex;flex-wrap:wrap;gap:6px}
.card__foot .chip{height:24px;font-size:11px;padding:0 9px}
.card__go{width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .2s,color .2s}
.card:hover .card__go{background:var(--ink);color:#fff;border-color:var(--ink)}
.card__go svg{width:14px;height:14px}
.empty{grid-column:1/-1;border:1px dashed #d9d4d3;border-radius:18px;padding:56px 24px;text-align:center}
.empty h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.empty p{color:var(--ink-2);max-width:44ch;margin:0 auto 20px}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
.no-js .loader{display:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

@media (max-width:900px){
  .meta div:nth-child(3){display:none}
  .meta{gap:24px}
  .about,.contact{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__grid > div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:15px}
  .links{display:none}
  .links.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:16px;padding:20px var(--pad);background:#fff;border-bottom:1px solid var(--line);font-size:16px}
  .menu-btn{display:grid}
  .meta div:nth-child(2){display:none}
  .hero{padding-top:100px}
  .hero__photo{height:auto;width:90vw}
  .hero .ribbon--pink{top:62%}
  .hero .ribbon--ink{top:82%}
  .hero__foot{left:50%;transform:translateX(-50%);bottom:18px}
  .form .two{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .p-side{text-align:left;max-width:none}
  .p-stats{justify-content:flex-start}
  .cal{padding:16px}
  .cal__grid{grid-template-columns:30px repeat(12,1fr);gap:3px}
  .cal__grid .m{font-size:9px}
  .contact-head .notes{display:none}
}