:root{
  --paper:#EDE2D3; --panel:#F6EFE6; --ink:#3F2622; --muted:#7D625A; --line:#D8C6B3;
  --pink:#F3C9D5; --on-pink:#3F2622;
  --sans:"Inter Tight","Helvetica Neue",Arial,system-ui,sans-serif;
  --script:"Marck Script","Segoe Script","Brush Script MT",cursive;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#3F2622;--panel:#4A2E29;--ink:#F3C9D5;--muted:#CFA9AE;--line:#5E403A}
}
:root[data-theme="dark"]{--paper:#3F2622;--panel:#4A2E29;--ink:#F3C9D5;--muted:#CFA9AE;--line:#5E403A}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 70px);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
*,*::before,*::after{box-sizing:inherit;margin:0}
html,body{background:var(--paper);color:var(--ink)}
body{font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .5s,color .5s}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{width:min(1320px,100% - 40px);margin-inline:auto}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .5s}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:60px;font-size:15px}
.mark{text-decoration:none;font-weight:600;letter-spacing:-.01em}
nav ul{display:flex;gap:28px;list-style:none;padding:0}
nav a{text-decoration:none;color:var(--muted);transition:color .2s}
nav a:hover{color:var(--ink)}
.bar-r{justify-self:end;display:flex;align-items:center;gap:18px}
.bar-r > a{text-decoration:none}
.bar-r > a:hover{text-decoration:underline}
.theme{display:flex;gap:4px;align-items:center}
.theme button{appearance:none;width:26px;height:26px;border:1px solid var(--ink);cursor:pointer;padding:0;transition:transform .2s}
.theme button:hover{transform:scale(1.12)}
.theme [data-t="light"]{background:#F3C9D5}
.theme [data-t="dark"]{background:#3F2622}
.theme button[aria-pressed="true"]{outline:1.5px solid var(--ink);outline-offset:2px}
@media (max-width:820px){nav{display:none}.bar{grid-template-columns:1fr auto}.bar-r > a{display:none}}

/* hero: dictionary entry */
.hero{padding-top:clamp(24px,4vw,48px)}
.entry{background:var(--panel);padding:clamp(14px,2vw,28px) clamp(14px,2vw,28px) clamp(40px,6vw,80px);position:relative;transition:background .5s}
.word{font-weight:500;font-size:clamp(54px,14.2vw,212px);line-height:.86;letter-spacing:-.06em;white-space:nowrap}
.meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;font-size:14px;margin-top:14px;color:var(--ink)}
.hello{position:absolute;right:clamp(10px,4vw,60px);top:clamp(30px,5vw,80px);font-family:var(--script);font-size:clamp(40px,7vw,104px);color:#E9A7BA;transform:rotate(-6deg);line-height:1;pointer-events:none;text-shadow:0 0 0 transparent}
:root[data-theme="dark"] .hello{color:var(--pink)}
.def{text-align:center;margin:clamp(56px,9vw,130px) auto 0;max-width:30ch}
.def small{display:block;font-size:14px;margin-bottom:14px;color:var(--muted)}
.def p{font-size:clamp(22px,2.6vw,34px);line-height:1.2;letter-spacing:-.02em}
.def u{text-decoration-thickness:1.5px;text-underline-offset:5px}
.hero-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--pink);color:var(--on-pink)}
.hp-side{position:relative;display:grid;place-items:center;padding:24px;min-height:200px}
.hp-side .ph{font-family:var(--script);font-size:clamp(70px,11vw,180px);line-height:1;transform:rotate(-6deg)}
.hp-side .cap{position:absolute;left:20px;right:20px;bottom:16px;display:flex;justify-content:space-between;font-size:14px}
.hp-img{position:relative;aspect-ratio:4/5;background:var(--pink);overflow:hidden}
.hp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
@media (max-width:700px){.hero-photo{grid-template-columns:1fr}.hp-side{order:2;min-height:150px}.hello{top:auto;bottom:-4px;right:12px}}

/* sections */
section.block{padding:clamp(64px,9vw,120px) 0}
h2{font-weight:500;font-size:clamp(34px,5vw,68px);letter-spacing:-.045em;line-height:1}
h2 sup{font-size:.3em;letter-spacing:0;vertical-align:top;margin-left:4px}

/* about */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.about h2{grid-column:1 / span 4}
.about .txt{grid-column:6 / span 7}
.about .txt p{font-size:clamp(19px,1.8vw,24px);line-height:1.35;letter-spacing:-.015em;margin-bottom:1em;max-width:36ch}
.about .txt p + p{font-size:17px;line-height:1.55;letter-spacing:0;color:var(--muted);max-width:56ch}
.sign{font-family:var(--script);font-size:40px;margin-top:10px;display:block}
@media (max-width:820px){.about h2,.about .txt{grid-column:1 / -1}}

/* works */
.works-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.views{display:flex;gap:24px;font-size:clamp(18px,1.8vw,22px)}
.views button{appearance:none;border:0;background:none;padding:0;font:inherit;color:var(--muted);cursor:pointer;letter-spacing:-.02em}
.views button[aria-pressed="true"]{color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.grid .item button{all:unset;cursor:pointer;display:block;width:100%}
.grid .item button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tile{position:relative;aspect-ratio:4/5;overflow:hidden;display:grid;place-items:center;text-align:center;padding:16px}
.tile .nm{font-family:var(--script);font-size:clamp(30px,3vw,44px);line-height:1.05;position:relative;z-index:0}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.item button:hover .tile img{transform:scale(1.04)}
.t0{background:#3F2622;color:#F3C9D5}.t1{background:#F3C9D5;color:#3F2622}.t2{background:#C9B39B;color:#3F2622}.t3{background:#E8D7DB;color:#3F2622}
.cap2{display:flex;justify-content:space-between;gap:10px;padding:10px 2px 18px;font-size:14px}
.cap2 span:last-child{color:var(--muted)}
.list{list-style:none;padding:0;border-top:1px solid var(--ink)}
.list li{border-bottom:1px solid var(--line)}
.list button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:80px minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:baseline;padding:20px 0;transition:padding .3s}
.list button:hover{padding-left:14px}
.list button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.list .t{font-size:clamp(22px,2.6vw,36px);letter-spacing:-.035em;line-height:1.1}
.list .s{color:var(--muted);font-size:15px}
[hidden]{display:none!important}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.list button{grid-template-columns:1fr;gap:4px}.list button:hover{padding-left:0}}

/* skills */
.skills{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.skills h2{grid-column:1 / span 4}
.skills .body{grid-column:6 / span 7}
.skills .body > p{max-width:56ch;margin-bottom:36px}
.svc{list-style:none;padding:0;border-top:1px solid var(--ink)}
.svc li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:clamp(20px,2vw,26px);letter-spacing:-.025em}
.svc li span{font-size:15px;color:var(--muted);letter-spacing:0;text-align:right}
.tools{margin-top:36px;font-size:15px;color:var(--muted)}
.tools b{font-weight:500;color:var(--ink)}
@media (max-width:820px){.skills h2,.skills .body{grid-column:1 / -1}.svc li{flex-direction:column;gap:2px}.svc li span{text-align:left}}

/* contacts */
.contact{background:var(--ink);color:var(--paper);transition:background .5s,color .5s}
.contact .hi{font-family:var(--script);font-size:clamp(34px,4vw,56px);color:var(--pink);display:block;margin-bottom:6px}
:root[data-theme="dark"] .contact .hi{color:#3F2622}
.contact h2{font-size:clamp(48px,11vw,170px);letter-spacing:-.06em;line-height:.88}
.contact h2 a{text-decoration:none}
.contact h2 a:hover{font-style:italic}
.c-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(48px,7vw,96px);padding-top:18px;border-top:1px solid color-mix(in srgb,var(--paper) 40%,transparent);font-size:15px}
.c-list dt{opacity:.65}
.c-list dd{margin:0;overflow-wrap:anywhere}
.c-list a{text-decoration:none}
.c-list a:hover{text-decoration:underline}
@media (max-width:820px){.c-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
footer{padding:18px 0;font-size:14px;display:flex;justify-content:space-between}

/* case viewer */
dialog{border:0;padding:0;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--paper);color:var(--ink)}
dialog::backdrop{background:rgba(63,38,34,.55)}
dialog[open]{animation:fade .4s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.v{display:grid;grid-template-rows:auto 1fr auto;height:100%;padding:calc(env(safe-area-inset-top,0px) + 16px) 20px calc(env(safe-area-inset-bottom,0px) + 16px)}
.v-top,.v-bot{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:16px;font-size:14px}
.v-top > :last-child,.v-bot > :last-child{justify-self:end;text-align:right}
.v button.lnk{appearance:none;border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:4px 0}
.v button.lnk:hover{text-decoration:underline}
.v-mid{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:28px;align-items:center;min-height:0}
.v-info .yr{font-size:14px;color:var(--muted)}
.v-info h3{font-weight:500;font-size:clamp(28px,3vw,42px);letter-spacing:-.04em;line-height:1;margin:8px 0 16px}
.v-info p{font-size:15px;max-width:40ch}
.v-info ul{list-style:none;padding:0;margin-top:16px;font-size:14px;color:var(--muted)}
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;align-items:center;height:min(68vh,720px);padding-bottom:6px;scrollbar-width:thin}
.strip img{height:100%;width:auto;max-width:none;scroll-snap-align:center;flex:none}
.empty{flex:1;height:100%;display:grid;place-items:center;text-align:center;background:var(--panel);font-size:15px;color:var(--muted);padding:30px}
.empty b{display:block;font-family:var(--script);font-weight:400;font-size:clamp(56px,8vw,110px);color:var(--ink);line-height:1;margin-bottom:12px}
@media (max-width:860px){
  .v{height:auto;min-height:100%}
  dialog{overflow-y:auto}
  .v-mid{grid-template-columns:1fr;padding:24px 0}
  .strip{height:56vh}
}

/* cursor */
.cur{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;background:#E9A7BA;pointer-events:none;z-index:100;opacity:0;transition:width .25s,height .25s,opacity .2s}
.cur.big{width:56px;height:56px;opacity:.55!important}
@media (pointer:fine){body.has-cur,body.has-cur a,body.has-cur button{cursor:none}
  body.has-cur dialog{cursor:auto}body.has-cur dialog a,body.has-cur dialog button{cursor:pointer}}