:root{
  color-scheme:dark;
  --bg:#14110f; --surface:#1d1916; --line:#35302b; --text:#f1ece4; --muted:#a39b90;
  --accent:#ffc23c; --accent2:#ff6a4d; --teal:#38d3c0; --ease:cubic-bezier(.22,1,.36,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:100px;scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55;overflow-x:hidden}

.glass-adjustment-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(20, 17, 15, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  will-change: backdrop-filter;
  transform: translateZ(0);
}

#page{
  position: relative;
  z-index: 1;
  transform-origin:50% 0;
  transition:transform .5s var(--ease),border-radius .5s var(--ease);
  will-change:transform;
}
body.open #page{transform:scale(.94) translateX(-3%);border-radius:28px;pointer-events:none}
body.open{overflow:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:min(1400px,100% - 2*clamp(20px,4vw,56px));margin-inline:auto}

#bgCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block;opacity:.65}

nav{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding: 28px 0 45px; 
  background: transparent;
}

nav::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  bottom: -80px; 
  z-index: -1;
  background: rgba(20, 17, 15, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
  will-change: backdrop-filter;
}

nav b{font-weight:700;letter-spacing:-.02em}
nav div{position:relative;display:flex;gap:0;padding:4px;border:1px solid var(--line);border-radius:99px;background:rgba(20,17,15,.65);font-size:.95rem;color:var(--muted)}
nav a{position:relative;z-index:1;padding:8px 16px;border-radius:99px;text-decoration:none;transition:color .3s}
nav a:hover{color:var(--text)}
nav a.on,nav a.on:hover{color:#161412}
.pill{position:absolute;top:4px;bottom:4px;left:0;width:0;background:#fff;border-radius:99px;transition:transform .55s var(--ease),width .55s var(--ease)}

.hero{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,60px);align-items:start;padding:12vh 0 6vh}
.hero-content{display:flex;flex-direction:column;gap:28px}
h1{margin:0;font-size:clamp(3rem,10vw,8.5rem);line-height:.92;letter-spacing:-.045em;font-weight:700;font-variation-settings:"opsz" 96}
h1 .l{display:block;overflow:hidden;padding-bottom:.08em}
h1 .l span{display:inline-block;transform:translateY(110%);animation:rise 1.1s var(--ease) forwards}
h1 .l:nth-child(2){font-size:.4em;line-height:1.15;margin-top:.2em;letter-spacing:0.08em;}
h1 .l:nth-child(2) span{animation-delay:.12s;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise 1.1s .12s var(--ease) forwards,shine 6s linear infinite}
@keyframes rise{to{transform:none}}
@keyframes shine{to{background-position:200% 0}}

.about{opacity:0;animation:fade 1s .5s var(--ease) forwards}
@keyframes fade{to{opacity:1}}
.about p{margin:0;font-size:clamp(1.05rem,1.6vw,1.35rem);color:#cfcbe0;max-width:60ch}

.photo-col{display:flex;flex-direction:column;align-items:center;text-align:center;will-change:transform}
.photo{position:relative;width:clamp(180px,20vw,280px);aspect-ratio:1;border-radius:50%;margin:14px}
.photo::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px dashed var(--accent);animation:spin 30s linear infinite}
@keyframes spin{to{rotate:360deg}}
.photo .in{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--surface);display:grid;place-items:center;text-align:center;color:var(--muted);font-size:.9rem;z-index:1}
.photo img{width:100%;height:100%;object-fit:cover}

.since{margin-top:22px!important;margin-bottom:0!important;font-size:clamp(1.1rem,1.8vw,1.6rem)!important;font-weight:650;letter-spacing:-.03em;color:var(--text)!important;text-align:center;position:relative;z-index:2;background:var(--bg);padding:2px 10px;border-radius:8px}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:32px;padding-top:8vh}
  .photo-col{order:-1;align-self:center;width:100%}
  .photo{width:clamp(160px,45vw,240px);margin:10px auto}
}

.sec-title{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 26px}
h2{margin:0;font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.03em;font-weight:650}
.sec-title small{color:var(--muted)}
.skills{padding:6vh 0}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.chip{display:flex;align-items:center;gap:12px;padding:8px 20px 8px 8px;border-radius:16px;font-weight:550;background:rgba(29, 25, 22, 0.9);border:1px solid var(--line);transition:transform .35s var(--ease),border-color .25s,background .25s;width:100%}
.chip:hover{transform:translateY(-4px) rotate(-1.5deg);border-color:var(--accent);background:rgba(255,194,60,.15)}
.lg{width:42px;height:42px;min-width:42px;min-height:42px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:.95rem;letter-spacing:-.03em;overflow:hidden;aspect-ratio:1}
.lg svg,.lg img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1}
.marquee{overflow:hidden;margin-top:38px;border-block:1px solid var(--line);padding:16px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee div{display:flex;gap:48px;width:max-content;animation:slide 40s linear infinite;font-size:clamp(1.4rem,3vw,2.4rem);font-weight:600;letter-spacing:-.02em;color:#4d443a}
@keyframes slide{to{transform:translateX(-50%)}}

.work{padding:6vh 0 10vh}

.creation-category {
  margin-bottom: 48px;
}

.category-title {
  margin: 0 0 16px 0;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 650;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.category-box {
  background: rgba(29, 25, 22, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
@media(max-width:1200px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.grid{grid-template-columns:1fr}nav div{gap:14px}nav a{padding:8px 11px;font-size:.88rem}}

.card {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 16px;
  isolation: isolate;
  animation: pop .8s var(--ease) both;
}

@keyframes pop{from{opacity:0;transform:translateY(26px) scale(.96)}}

.card-inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .5s var(--ease), border-color .3s, box-shadow .5s;
}

.card:hover .card-inner {
  transform: translateY(-6px) scale(1.02);
  border-color: hsl(var(--h) 80% 65% / .7);
  box-shadow: 0 24px 50px -20px hsl(var(--h) 90% 60% / .45);
}

.card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.card-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .14), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

.card:hover .card-inner::after {
  opacity: 1;
}

.card .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 34px 14px 12px;
  background: linear-gradient(transparent, rgba(8, 7, 12, .85));
  transform: translateY(60%);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .4s;
}

.card:hover .cap,
.card:focus-visible .cap {
  transform: none;
  opacity: 1;
}

.cap b{display:block;font-size:1rem;letter-spacing:-.01em}
.cap span{font-size:.82rem;color:var(--muted)}
@media(hover:none){.card .cap{transform:none;opacity:1}}

.card img, .card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card video {
  display: none;
  pointer-events: none;
}

.card:hover video {
  display: block;
}

.card:hover img {
  display: none;
}

.links{padding:6vh 0 10vh}
.ll{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.lk{position:relative;display:flex;align-items:center;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;text-decoration:none;overflow:hidden;isolation:isolate;transition:color .35s,transform .45s var(--ease)}
.lk::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:translateX(-101%);transition:transform .55s var(--ease)}
.lk:hover,.lk:focus-visible{color:#161412;transform:translateY(-4px)}
.lk:hover::before,.lk:focus-visible::before{transform:none}
.lk .ic{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#161412;font-weight:700}
.lk b{display:block;font-size:1.15rem}
.lk em{font-style:normal;color:var(--muted);font-size:.9rem;transition:color .3s}
.lk:hover em{color:#6b645a}
.lk .ar{margin-left:auto;font-size:1.4rem;transition:transform .4s var(--ease)}
.lk:hover .ar{transform:translate(4px,-4px)}

.lk-text {
  flex: 1;
  min-width: 0;
}

.lk-text b, .lk-text em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.th-empty{position:absolute;inset:0;display:grid;place-content:center;gap:4px;text-align:center;padding:12px;background:var(--surface);color:var(--muted);font-size:.85rem}
.th-empty small{font-size:.72rem;opacity:.7;word-break:break-all}

.media img, .media video, .media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #111;
}
.media .th-empty{background:#1b1b1b}

.scrim{
  position:fixed;
  inset:0;
  z-index:40;
  background:rgba(5,4,9,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .5s,visibility 0s .5s;
}
body.open .scrim{
  opacity:1;
  visibility:visible;
  transition:opacity .5s;
}

.modal-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  width: min(880px, 94vw);
  pointer-events: none;
  overflow: visible;
  transform: translateX(104%);
  visibility: hidden;
  transition: transform .5s var(--ease), visibility 0s .5s;
}

body.open .modal-container {
  transform: translateX(0px);
  visibility: visible;
  transition: transform .5s var(--ease), visibility 0s;
  pointer-events: auto;
}

.back {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -10px;
  right: 0;
  z-index: 41;
  background: var(--accent);
  border-radius: 36px 0 0 36px;
  pointer-events: none;
}

.panel {
  position: absolute;
  inset: 0;
  z-index: 42;
  background: #fff;
  color: #16141d;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(28px + env(safe-area-inset-top,0px)) clamp(20px,3.5vw,44px) calc(40px + env(safe-area-inset-bottom,0px));
  border-radius: 28px 0 0 28px;
  box-shadow: -20px 0 40px rgba(0,0,0,0.25);
}

.panel .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;color:#6b6780;font-size:.92rem}
.x{all:unset;cursor:pointer;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#f0eef7;font-size:1.3rem;transition:transform .4s var(--ease),background .2s}
.x:hover{transform:rotate(90deg);background:#e2deef}
.x:focus-visible{outline-color:#d4472a;outline-offset:2px}

.media{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#111;transform:translateY(24px);opacity:0;transition:transform .5s .1s var(--ease),opacity .4s .1s}

.media::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  border: 2px solid #ffffff;
  pointer-events: none;
  z-index: 2;
}

body.open .media{transform:none;opacity:1}
.panel h3{margin:20px 0 0;font-size:clamp(1.6rem,3.5vw,2.2rem);line-height:1.1;letter-spacing:-.035em}
.panel .sub{font-size:1rem;color:#d4472a;margin:0 0 14px;font-weight:550;display:block}
.panel .body>*{opacity:0;transform:translateY(16px);transition:transform .5s var(--ease),opacity .4s}
body.open .panel .body>*{opacity:1;transform:none}
body.open .panel .body>:nth-child(1){transition-delay:.15s}
body.open .panel .body>:nth-child(2){transition-delay:.22s}
body.open .panel .body>:nth-child(3){transition-delay:.3s}
.panel p{margin:0 0 16px;max-width:62ch;color:#3c3950}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.tags span{padding:6px 14px;border-radius:99px;background:#fff0cf;font-size:.9rem}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.btn{display:inline-block;padding:14px 26px;border-radius:99px;background:#16141d;color:#fff;text-decoration:none;font-weight:600;transition:transform .35s var(--ease),background .25s}
.btn:hover{transform:translateY(-3px);background:#d4472a}

.btn-drive {
  background: #16141d;
  color: #fff;
  font-weight: 650;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 10px;
  margin-bottom: 14px;
}

@media (max-width: 600px) {
  .btn-drive {
    align-self: flex-start;
  }
  .category-box {
    padding: 16px;
    border-radius: 18px;
  }
}

.drive-ic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.btn-drive:hover {
  background: #d4472a;
  color: #fff;
}

footer{padding:6vh 0 8vh;border-top:1px solid var(--line);color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

body::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  h1 .l span{transform:none}.about{opacity:1}
}