/* ==========================================================================
   arluwu — portfolio 2026
   Nocturne design system
   --------------------------------------------------------------------------
   01 fonts · 02 tokens · 03 reset · 04 base · 05 utilities · 06 atmosphere
   07 loader · 08 nav · 09 hero · 10 marquee · 11 about · 12 work · 13 process
   14 contact · 15 footer · 16 case panels · 17 motion · 18 responsive
   ========================================================================== */

/* 01 · fonts --------------------------------------------------------------- */
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Gabarito';
  src:url('../fonts/gabarito-black.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}

/* 02 · tokens -------------------------------------------------------------- */
:root{
  /* surfaces */
  --bg:#0C0518;
  --bg-2:#120826;
  --surface:#160A26;
  --surface-2:#1D0E32;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  /* type */
  --text:#F7F0FA;
  --text-2:#C4AFDA;
  --text-3:#8F7AA8;
  --text-4:#6D5A85;

  /* accent */
  --pink:#FF2DA8;
  --pink-soft:#FF6AD5;
  --crimson:#E4145E;
  --violet:#8A2BE2;
  --grad:linear-gradient(96deg,#FF6AD5 0%,#FF2DA8 45%,#E4145E 100%);
  --grad-soft:linear-gradient(96deg,rgba(255,106,213,.18),rgba(228,20,94,.18));

  /* geometry */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:30px;
  --gut:clamp(20px,4vw,56px);
  --wrap:1320px;
  --sec:clamp(76px,9vw,140px);

  /* type scale */
  --t-xs:clamp(.68rem,.66rem + .1vw,.76rem);
  --t-sm:clamp(.82rem,.8rem + .1vw,.9rem);
  --t-0:clamp(.95rem,.92rem + .18vw,1.06rem);
  --t-1:clamp(1.1rem,1.02rem + .4vw,1.32rem);
  --t-2:clamp(1.45rem,1.2rem + .9vw,2rem);
  --t-3:clamp(1.9rem,1.4rem + 1.9vw,3rem);
  --t-4:clamp(2.4rem,1.5rem + 3.4vw,4.4rem);
  --t-5:clamp(2.5rem,6.2vw,5.75rem);

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);

  --font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --font-brand:'Gabarito','Space Grotesk',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* 03 · reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--pink);color:#1A0313}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}

/* 04 · base ---------------------------------------------------------------- */
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}
body{
  font-family:var(--font-body);
  font-size:var(--t-0);
  line-height:1.62;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
}
html.is-loading body{overflow:hidden}
body.panel-open,body.menu-open{overflow:hidden}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
p{text-wrap:pretty}
strong{font-weight:600;color:var(--text)}
em{font-style:normal}
i{font-style:normal}

.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

.mono{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.dim{color:var(--text-3)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4BE08B;box-shadow:0 0 0 3px rgba(75,224,139,.15);margin-right:.55em;vertical-align:middle;animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* 05 · utilities ----------------------------------------------------------- */
.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.section{padding-block:var(--sec);position:relative}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,44px)}

.h2{font-size:var(--t-4);line-height:.98;letter-spacing:-.04em}

.kicker{
  display:flex;align-items:center;gap:.7em;
  font-family:var(--font-mono);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
  margin-bottom:clamp(18px,2.4vw,30px);
}
.kicker span:first-child{
  color:var(--pink);border:1px solid rgba(255,45,168,.35);
  border-radius:999px;padding:.24em .6em .28em;letter-spacing:.08em;
  background:rgba(255,45,168,.07);
}
.micro{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:400;margin-bottom:14px}
.prose p + p{margin-top:1.05em}
.prose{color:var(--text-2);max-width:56ch}
.list{display:grid;gap:.55em;color:var(--text-2);font-size:var(--t-sm)}
.list li{position:relative;padding-left:1.1em}
.list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--pink)}
.list--tight{gap:.42em}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips li{
  font-size:.78rem;line-height:1;padding:.55em .8em;border-radius:999px;
  border:1px solid var(--line);color:var(--text-2);background:rgba(255,255,255,.025);
  transition:border-color .3s,color .3s,background .3s;
}
.chips li:hover{border-color:rgba(255,45,168,.5);color:var(--text);background:rgba(255,45,168,.08)}

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1.02em 1.55em;border-radius:999px;font-size:.94rem;font-weight:500;letter-spacing:-.01em;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s,color .3s,border-color .3s;
  will-change:transform;
}
.btn svg{transition:transform .5s var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn--primary{background:var(--grad);color:#1B0314;font-weight:600;box-shadow:0 14px 40px -18px rgba(255,45,168,.85)}
.btn--primary::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(96deg,#FFD1EE,#FF6AD5);opacity:0;transition:opacity .4s;z-index:-1;
}
.btn--primary:hover{box-shadow:0 18px 50px -14px rgba(255,45,168,.9)}
.btn--ghost{border:1px solid var(--line-2);color:var(--text)}
.btn--ghost:hover{border-color:rgba(255,45,168,.6);background:rgba(255,45,168,.08)}
.btn--sm{padding:.7em 1.15em;font-size:.85rem}

.link-arrow{display:inline-flex;align-items:center;gap:.5em;color:var(--text);border-bottom:1px solid var(--line-2);padding-bottom:.18em;transition:color .3s,border-color .3s}
.link-arrow i{transition:transform .45s var(--ease)}
.link-arrow:hover{color:var(--pink);border-color:var(--pink)}
.link-arrow:hover i{transform:translateX(4px)}

.skip{position:fixed;top:12px;left:12px;z-index:300;background:var(--pink);color:#1B0314;padding:.7em 1.1em;border-radius:8px;font-weight:600;transform:translateY(-150%);transition:transform .3s}
.skip:focus{transform:none}

/* 06 · atmosphere ---------------------------------------------------------- */
.grain{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aura span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.aura__a{width:60vw;height:60vw;left:-18vw;top:-22vw;background:radial-gradient(circle,rgba(138,43,226,.5),transparent 62%);animation:drift1 26s ease-in-out infinite alternate}
.aura__b{width:52vw;height:52vw;right:-14vw;top:16vh;background:radial-gradient(circle,rgba(255,45,168,.34),transparent 64%);animation:drift2 32s ease-in-out infinite alternate}
.aura__c{width:48vw;height:48vw;left:22vw;bottom:-26vw;background:radial-gradient(circle,rgba(228,20,94,.3),transparent 66%);animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(6vw,5vh) scale(1.12)}}
@keyframes drift2{to{transform:translate(-5vw,7vh) scale(1.08)}}
@keyframes drift3{to{transform:translate(4vw,-6vh) scale(1.1)}}

.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none}
.scrollbar span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--grad)}

.cursor{
  position:fixed;top:0;left:0;z-index:140;pointer-events:none;
  width:10px;height:10px;margin:-5px 0 0 -5px;
  opacity:0;transition:opacity .3s;
}
.cursor.is-on{opacity:1}
.cursor__ring{
  position:absolute;inset:0;display:grid;place-items:center;
  width:10px;height:10px;border-radius:50%;background:var(--text);
  transition:width .4s var(--ease),height .4s var(--ease),background .3s,opacity .3s,transform .4s var(--ease);
}
.cursor.is-hover .cursor__ring{width:8px;height:8px;background:var(--pink)}
.cursor.is-view .cursor__ring{width:86px;height:86px;background:var(--text);mix-blend-mode:difference}
.cursor.is-view .cursor__ring .cursor__label{opacity:1}
.cursor__label{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#0C0518;opacity:0;transition:opacity .2s}
.cursor__ring{transform:translate(-50%,-50%);left:0;top:0}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* 07 · loader -------------------------------------------------------------- */
.loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden}
.loader__bg{position:absolute;inset:0;background:var(--bg)}
.loader__body{position:relative;text-align:center;display:grid;justify-items:center;gap:26px;padding:24px;will-change:transform}
.loader__mark{
  width:78px;height:78px;background:var(--grad);
  -webkit-mask:url('../img/mark.png') center/contain no-repeat;
  mask:url('../img/mark.png') center/contain no-repeat;
  filter:drop-shadow(0 0 30px rgba(255,45,168,.55));
  animation:markIn 1s var(--ease) both;
}
@keyframes markIn{from{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}
.loader__row{display:flex;align-items:baseline;gap:18px}
.loader__word{font-family:var(--font-brand);font-weight:900;font-size:clamp(2rem,5vw,3rem);letter-spacing:-.03em;color:var(--text)}
.loader__count{font-family:var(--font-mono);font-size:.8rem;color:var(--text-3);letter-spacing:.1em}
.loader__track{width:min(280px,60vw);height:1px;background:rgba(255,255,255,.12);overflow:hidden}
.loader__track span{display:block;height:100%;width:0;background:var(--grad)}
.loader__note{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-4)}
.loader.is-done .loader__body{transform:translateY(-14px);opacity:0;transition:opacity .5s,transform .7s var(--ease)}
.loader.is-done .loader__bg{transform:translateY(-100%);transition:transform 1s var(--ease-io) .1s}
.loader.is-done{pointer-events:none}
.loader.is-hidden{display:none}

/* 08 · nav ----------------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:transform .5s var(--ease),background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(12,5,24,.72);backdrop-filter:blur(16px) saturate(1.3);border-bottom-color:var(--line)}
.nav.is-hidden{transform:translateY(-102%)}
.nav__inner{
  width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;
  height:clamp(66px,7vh,82px);display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{position:relative;z-index:2;display:inline-flex;align-items:center;gap:11px}
.brand__mark{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 20px -6px rgba(255,45,168,.5)}
.brand__word{font-family:var(--font-brand);font-weight:900;font-size:1.32rem;letter-spacing:-.04em;line-height:1;padding-top:.06em}
.brand:hover .brand__mark{transform:scale(1.06) rotate(-6deg);transition:transform .5s var(--ease)}
.brand__mark{transition:transform .5s var(--ease)}

.nav__links{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px)}
.nav__link{position:relative;font-size:.88rem;color:var(--text-2);padding:.4em 0;transition:color .3s}
.nav__link span{display:inline-block}
.nav__link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--pink);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav__link:hover,.nav__link.is-active{color:var(--text)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);transform-origin:left}

.nav__right{position:relative;z-index:2;display:flex;align-items:center;gap:18px}
.menu-foot{display:none}
.status{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.status i{width:6px;height:6px;border-radius:50%;background:#4BE08B;box-shadow:0 0 10px #4BE08B;animation:pulse 2.6s infinite}
.burger{display:none;width:40px;height:40px;position:relative;border-radius:50%;border:1px solid var(--line)}
.burger span{position:absolute;left:11px;width:18px;height:1.5px;background:var(--text);transition:transform .4s var(--ease),opacity .3s}
.burger span:first-child{top:17px}
.burger span:last-child{top:22px}
body.menu-open .burger span:first-child{transform:translateY(2.5px) rotate(45deg)}
body.menu-open .burger span:last-child{transform:translateY(-2.5px) rotate(-45deg)}

/* 09 · hero ---------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(96px,12vh,140px);padding-bottom:clamp(60px,8vh,90px);overflow:hidden}
.hero__inner{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(24px,4vw,60px);align-items:center}
.hero__eyebrow{display:flex;align-items:center;gap:.7em;flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:clamp(22px,3vw,36px)}
.hero__eyebrow .sep{color:var(--text-4)}
.hero__eyebrow .dim{color:var(--text-3)}

.hero__title{font-size:var(--t-5);line-height:.94;letter-spacing:-.045em;font-weight:500;margin-bottom:clamp(24px,3vw,38px)}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.1em}
.hero__title .line__in{display:block;will-change:transform}
.hero__title .grad{position:relative}

.hero__lede{max-width:44ch;color:var(--text-2);font-size:var(--t-1);line-height:1.55;margin-bottom:clamp(26px,3.4vw,40px)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:clamp(34px,4.5vw,56px)}
.hero__stats{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(16px,2.4vw,36px);justify-content:start;border-top:1px solid var(--line);padding-top:22px}
.hero__stats dt{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);margin-bottom:.5em}
.hero__stats dd{font-family:var(--font-display);font-size:clamp(1rem,1.4vw,1.22rem);letter-spacing:-.02em;color:var(--text)}
.hero__stats dd span{color:var(--pink)}

.hero__stage{position:relative;height:clamp(380px,54vh,600px);perspective:1200px}
.stage__glow{position:absolute;inset:8% 4%;background:radial-gradient(ellipse at 60% 40%,rgba(255,45,168,.3),transparent 62%);filter:blur(50px);z-index:0}
.shot{
  position:absolute;margin:0;border-radius:14px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-2);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset;
  will-change:transform;
}
.shot--front{width:min(100%,410px);right:2%;top:6%;z-index:3;transform:rotate(2.2deg)}
.shot--back{width:min(80%,300px);left:-13%;top:-10%;z-index:2;transform:rotate(-5deg);opacity:.58;filter:saturate(.8) blur(.4px)}
.shot__bar{height:30px;display:flex;align-items:center;gap:5px;padding:0 11px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--line)}
.shot__bar i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}
.shot__bar span{margin-left:auto;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;color:var(--text-4)}
.shot img{width:100%;display:block;height:auto}
.shot::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to top,rgba(12,5,24,.92),transparent);pointer-events:none}
.shot--front img{max-height:clamp(330px,48vh,530px);object-fit:cover;object-position:top}
.shot--back img{max-height:300px;object-fit:cover;object-position:top}

.stage__chip{
  position:absolute;z-index:4;display:grid;gap:3px;padding:10px 14px;border-radius:12px;
  background:rgba(22,10,38,.72);border:1px solid var(--line-2);backdrop-filter:blur(14px);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.8);will-change:transform;
}
.stage__chip--a{right:-2%;bottom:12%}
.stage__chip--b{left:-6%;bottom:30%}
.chip__k{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-4)}
.chip__v{font-size:.78rem;color:var(--text)}

.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-4)}
.hero__scroll i{width:1px;height:44px;background:linear-gradient(to bottom,var(--pink),transparent);animation:scrollLine 2.2s infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 10 · about --------------------------------------------------------------- */
.about{position:relative}
.about__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,90px);align-items:start}
.about__intro{max-width:56ch}
.about__intro .h2{margin-bottom:clamp(22px,3vw,34px)}
.about__sig{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:clamp(30px,4vw,44px);border-top:1px solid var(--line);padding-top:22px}
.sig{font-family:var(--font-display);font-weight:500;font-size:clamp(1.2rem,1.9vw,1.55rem);letter-spacing:-.03em;color:var(--text)}

.about__record{position:sticky;top:110px;display:grid;gap:clamp(18px,2.6vw,26px);isolation:isolate}
.record{position:relative;z-index:1;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015) 55%,rgba(255,45,168,.045))}
.record__top{display:flex;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line)}
.record dl{margin:0}
.record__row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:13px 20px;border-bottom:1px solid rgba(255,255,255,.055)}
.record__row:last-child{border-bottom:0}
.record__row dt{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);padding-top:.28em}
.record__row dd{font-size:var(--t-sm);color:var(--text);line-height:1.4}
.record__tools{position:relative;z-index:1;padding:0 2px}
.about__watermark{position:absolute;right:-4%;bottom:-58%;width:min(100%,300px);aspect-ratio:1;background:var(--grad);opacity:.1;pointer-events:none;z-index:0;-webkit-mask:url('../img/mark.png') center/contain no-repeat;mask:url('../img/mark.png') center/contain no-repeat}

/* 11 · work ---------------------------------------------------------------- */
.sec-head{margin-bottom:clamp(34px,5vw,60px)}
.sec-head__row{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,4vw,60px);align-items:end}
.sec-head__note{color:var(--text-2);font-size:var(--t-sm);max-width:42ch;padding-bottom:.4em}
.sec-head--split{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,4vw,60px);align-items:end}

.tier + .tier{margin-top:clamp(44px,6vw,78px)}
.tier__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:clamp(20px,3vw,32px)}
.tier__label{color:var(--text-2);letter-spacing:.18em}
.tier__count{color:var(--text-4)}
.work__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,54px) clamp(22px,3vw,40px)}
.work__grid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,34px)}
.card--sm .card__title{font-size:clamp(1rem,1.25vw,1.18rem)}
.card--sm .card__desc{font-size:.8rem;line-height:1.4}
.card--sm .card__tag{font-size:.52rem}
.card--sm .card__meta{padding-top:14px}
.card--wide .card__frame{aspect-ratio:16/9}
.card{position:relative;display:block;isolation:isolate}
.card__frame{
  position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .5s,box-shadow .6s var(--ease),transform .6s var(--ease);
  transform:translateZ(0);
}
.card__frame::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  background:linear-gradient(180deg,transparent 55%,rgba(12,5,24,.35));
  transition:opacity .5s;
}
.card__img{
  position:absolute;left:0;top:0;width:100%;height:auto;min-height:100%;
  object-fit:cover;object-position:top center;
  transition:transform 1.4s var(--ease),filter .6s;
  will-change:transform;
}
.card:hover .card__img{filter:saturate(1.05)}
.card:hover .card__frame{border-color:rgba(255,45,168,.45);box-shadow:0 30px 70px -34px rgba(255,45,168,.55),0 0 0 1px rgba(255,45,168,.12)}
.card:hover .card__frame::after{opacity:.4}

.card__meta{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:0;padding-top:18px;align-items:start}
.card__idx{grid-column:1;grid-row:1;color:var(--text-4);font-size:.66rem;padding-top:.42em}
.card__main{grid-column:2;grid-row:1;min-width:0}
.card__title{font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:-.03em;transition:color .35s}
.card:hover .card__title{color:var(--pink-soft)}
.card__desc{color:var(--text-3);font-size:var(--t-sm);line-height:1.45;margin-top:4px}
.card__side{grid-column:2;grid-row:2;display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.card__tag{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);line-height:1.5}
.card__year{font-family:var(--font-mono);font-size:.62rem;color:var(--text-3);letter-spacing:.08em;white-space:nowrap}
.card__go{
  position:absolute;right:14px;bottom:14px;z-index:3;
  display:inline-flex;align-items:center;gap:.5em;
  padding:.62em 1em;border-radius:999px;background:rgba(12,5,24,.68);border:1px solid var(--line-2);
  backdrop-filter:blur(10px);font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text);
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease);
}
.card__go i{color:var(--pink)}
.card:hover .card__go{opacity:1;transform:none}
.card:focus-visible .card__go{opacity:1;transform:none}


/* 13 · process — two lanes, four moments ---------------------------------- */
.process{position:relative}
.lanes{
  display:grid;
  grid-template-columns:clamp(62px,7vw,108px) repeat(4,minmax(0,1fr));
  margin-top:clamp(26px,4vw,46px);
}
.lanes__label{
  grid-column:1;
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  padding:24px 16px 26px 0;
}
.lanes__label--design{grid-row:2;color:var(--text-2)}
.lanes__label--build{grid-row:3;color:var(--pink)}
.lanes__label--out{grid-row:4;color:var(--text-4);padding-top:15px}

.moment{display:contents}

.moment__head{
  grid-row:1;grid-column:var(--col);
  display:flex;align-items:baseline;gap:10px;
  padding:0 clamp(14px,2vw,26px) 16px 0;
}
.moment__head .mono{color:var(--pink);font-size:.58rem;flex:none;transform:translateY(-.15em)}
.moment__head h3{font-size:clamp(1.2rem,1.55vw,1.5rem);letter-spacing:-.03em;line-height:1.1}

.moment__cell,.moment__out{
  grid-column:var(--col);
  padding:20px clamp(14px,2vw,26px) 24px 0;
  border-top:1px solid var(--line);
  position:relative;
}
.moment__design{grid-row:2}
.moment__build{grid-row:3}
.moment__out{grid-row:4;border-top:1px solid var(--line);padding:14px clamp(14px,2vw,26px) 0 0}
.moment__cell p{font-size:var(--t-sm);line-height:1.62;color:var(--text-2);max-width:34ch}
.moment__out .mono{font-size:.54rem;letter-spacing:.12em;color:var(--text-4);line-height:1.5;display:block}
.cell__lane{display:none}

.moment__cell{transition:background .4s var(--ease),border-color .4s}
.moment__cell::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(255,45,168,.07),transparent 85%);
  transition:opacity .4s var(--ease);
}
.moment__cell.is-lit::after{opacity:1}
.moment__cell.is-lit{border-color:rgba(255,45,168,.35)}

/* 14 · contact ------------------------------------------------------------- */
.contact{position:relative;overflow:hidden}
.contact__inner{position:relative;border-radius:var(--r-xl);border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,45,168,.1),rgba(255,255,255,.02) 42%,rgba(138,43,226,.08));padding:clamp(34px,6vw,80px);overflow:hidden}
.contact__inner::before{content:"";position:absolute;width:44vw;height:44vw;right:-14vw;top:-18vw;background:radial-gradient(circle,rgba(255,45,168,.28),transparent 62%);filter:blur(40px);pointer-events:none}
.contact__title{font-size:clamp(2.4rem,5.6vw,5.2rem);line-height:.96;margin-bottom:clamp(20px,2.6vw,30px)}
.contact__lede{color:var(--text-2);max-width:48ch;margin-bottom:clamp(30px,4vw,44px);font-size:var(--t-1)}
.contact__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,60px)}
.mailto{
  display:inline-flex;align-items:center;gap:18px;font-family:var(--font-display);
  font-size:clamp(1.15rem,3.4vw,2.5rem);letter-spacing:-.035em;line-height:1;
  padding:.18em .5em .22em .1em;position:relative;color:var(--text);
}
.mailto__text{position:relative}
.mailto__text::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:1px;background:var(--text-3);transform-origin:right;transition:transform .6s var(--ease),background .4s}
.mailto:hover .mailto__text::after{background:var(--pink);transform:scaleX(0);transform-origin:right}
.mailto__ic{display:grid;place-items:center;width:clamp(40px,5vw,58px);height:clamp(40px,5vw,58px);border-radius:50%;background:var(--grad);color:#1B0314;transition:transform .5s var(--ease)}
.mailto:hover .mailto__ic{transform:rotate(-20deg) scale(1.06)}
.copy{display:inline-flex;align-items:center;gap:.55em;padding:.7em 1em;border-radius:999px;border:1px solid var(--line-2);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);transition:border-color .3s,color .3s,background .3s}
.copy:hover{border-color:rgba(255,45,168,.5);color:var(--text);background:rgba(255,45,168,.08)}
.copy.is-done{background:rgba(75,224,139,.14);border-color:rgba(75,224,139,.4);color:#B9F5D0}

.contact__meta{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,60px);border-top:1px solid var(--line);padding-top:26px}
.meta__item{display:grid;gap:6px}
.meta__k{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-4)}
.meta__v{font-size:var(--t-sm);color:var(--text);display:inline-flex;align-items:center}
a.meta__item .meta__v{border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
a.meta__item:hover .meta__v{color:var(--pink);border-color:rgba(255,45,168,.5)}

/* 15 · footer -------------------------------------------------------------- */
.footer{border-top:1px solid var(--line);padding-block:clamp(30px,4vw,46px);position:relative}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.brand--footer .brand__word{font-size:1.15rem}
.footer__nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:var(--t-sm);color:var(--text-3)}
.footer__nav a{transition:color .3s}
.footer__nav a:hover{color:var(--pink)}
.footer__meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-4)}

/* 16 · case panels --------------------------------------------------------- */
.panels{position:relative;z-index:90}
.case{position:fixed;inset:0;z-index:90;display:none;background:var(--bg);overscroll-behavior:contain}
.case:focus{outline:none}
.case.is-open{display:block}
.case__scroll{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  opacity:0;transform:translateY(28px);transition:opacity .5s var(--ease),transform .7s var(--ease);
}
.case.is-visible .case__scroll{opacity:1;transform:none}
.case.is-closing .case__scroll{opacity:0;transform:translateY(14px);transition-duration:.28s}

.case__top{
  position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:16px;margin-bottom:clamp(10px,2vw,24px);
  background:rgba(12,5,24,.9);backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.case__nav{display:flex;align-items:center;gap:12px}
.case__home{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);border:1px solid var(--line-2);border-radius:999px;padding:.62em 1.05em;transition:color .3s,border-color .3s,background .3s,transform .4s var(--ease)}
.case__home:hover{color:var(--pink);border-color:rgba(255,45,168,.6);background:rgba(255,45,168,.08);transform:translateY(-1px)}
.case__back{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);transition:color .3s}
.case__back svg{transition:transform .4s var(--ease)}
.case__back:hover{color:var(--pink)}
.case__back:hover svg{transform:translateX(-4px)}
.case__count{font-size:.6rem;color:var(--text-4)}
.case__count i{color:var(--text-4);opacity:.5;margin:0 .3em}
.case__next{display:grid;gap:2px;text-align:right}
.case__next-k{font-size:.52rem;color:var(--text-4)}
.case__next-v{font-size:.78rem;color:var(--text-2);display:inline-flex;align-items:center;gap:.4em;transition:color .3s}
.case__next:hover .case__next-v{color:var(--pink)}
.case__next-v i{transition:transform .4s var(--ease)}
.case__next:hover .case__next-v i{transform:translateX(3px)}

.case__head{max-width:1000px}
.case__kicker{display:flex;flex-wrap:wrap;gap:.6em;align-items:center;font-size:.62rem;color:var(--text-3);margin-bottom:clamp(16px,2vw,24px)}
.case__kicker span:first-child{color:var(--pink)}
.case__kicker span:last-child{color:var(--text-4)}
.case__kicker span+span::before{content:"·";margin:0 .55em 0 .05em;color:var(--text-4)}
.case__title{font-size:clamp(2rem,4.6vw,3.9rem);line-height:1;letter-spacing:-.042em;margin-bottom:clamp(18px,2.2vw,26px)}
.case__lede{font-size:var(--t-1);color:var(--text-2);max-width:60ch;line-height:1.55;margin-bottom:clamp(28px,3.6vw,44px)}
.case__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);border-top:1px solid var(--line);padding-top:22px}
.case__facts dt{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-4);margin-bottom:7px}
.case__facts dd{font-size:var(--t-sm);color:var(--text-2);line-height:1.45}

.case__hero{margin-top:clamp(34px,5vw,60px);max-width:1180px}
.case__hero figcaption,.case__artifact figcaption{margin-top:12px;font-size:.56rem;color:var(--text-4)}
.frame{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:0 50px 100px -60px rgba(0,0,0,.9)}
.frame__bar{height:32px;display:flex;align-items:center;gap:5px;padding:0 12px;background:rgba(255,255,255,.045);border-bottom:1px solid var(--line)}
.frame__bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)}
.frame__bar span{margin-left:auto;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;color:var(--text-4)}
.frame__view{position:relative;overflow:hidden;background:#fff}
.frame__view img{width:100%;height:auto;display:block}
.frame__view--contain{display:grid;place-items:center;padding:clamp(16px,2.4vw,30px);background:radial-gradient(circle at 50% 6%,rgba(255,45,168,.16),transparent 66%),#0E0619}
.frame__view--contain img{width:auto;max-width:100%;max-height:min(68vh,600px);border-radius:8px;box-shadow:0 30px 70px -34px rgba(0,0,0,.9)}

.case__body{display:grid;grid-template-columns:1fr 1.15fr .85fr;gap:clamp(24px,4vw,54px);margin-top:clamp(38px,5vw,64px);max-width:1180px}
.case__body h3{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);margin-bottom:14px;font-weight:400}
.case__body p{color:var(--text-2);font-size:var(--t-sm);line-height:1.72}
.case__body p+p{margin-top:.9em}
.case__col--list .list{margin-top:2px}

.case__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:clamp(22px,3vw,32px);max-width:1000px}
.case__note{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);max-width:36ch;line-height:1.6}

.versions{margin-top:clamp(40px,6vw,72px);max-width:1180px}
.versions__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,3vw,40px);align-items:baseline;border-top:1px solid var(--line);padding-top:18px;margin-bottom:clamp(18px,2.6vw,28px)}
.versions__head .mono{color:var(--pink)}
.versions__head p{color:var(--text-2);font-size:var(--t-sm);max-width:64ch;line-height:1.6}
.versions__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,26px)}
.version{margin:0}
.version__frame{position:relative;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:#fff}
.version__frame img{width:100%;height:auto;display:block}
.version figcaption{display:flex;gap:10px;align-items:baseline;margin-top:10px;font-size:var(--t-sm);color:var(--text-2)}
.version figcaption .mono{color:var(--text-3)}

.case__artifact{margin-top:clamp(40px,6vw,72px);max-width:900px}
.frame--tall{background:#fff}
.frame--tall img{width:100%;height:auto;display:block}

.case__end{margin-top:clamp(56px,8vw,110px);border-top:1px solid var(--line);padding-top:clamp(26px,4vw,40px);padding-bottom:clamp(60px,9vw,120px)}
.case__nextbig{display:grid;gap:8px;max-width:820px}
.case__nextbig-t{font-family:var(--font-display);font-size:clamp(1.8rem,4.6vw,3.4rem);letter-spacing:-.04em;line-height:1;transition:color .35s}
.case__nextd{font-size:clamp(.92rem,1.5vw,1.1rem);color:var(--text-3);line-height:1.5;max-width:52ch;transition:color .35s}
.case__nextbig:hover .case__nextbig-t{color:var(--pink)}
.case__nextbig:hover .case__nextd{color:var(--text-2)}

/* 17 · motion -------------------------------------------------------------- */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].is-in{opacity:1;transform:none}

.js .hero__title .line__in{transform:translateY(106%)}
.loaded .hero__title .line__in{transform:none;transition:transform 1.15s var(--ease) calc(.15s + var(--i) * .085s)}

/* 18 · responsive ---------------------------------------------------------- */
@media (max-width:1100px){
  .hero__inner{grid-template-columns:1fr;gap:clamp(30px,6vw,54px)}
  .hero__stage{height:clamp(300px,46vh,420px);margin-top:10px}
  .shot--front img{max-height:calc(clamp(300px,46vh,420px) - 34px)}
  .shot--back img{max-height:calc(clamp(300px,46vh,420px) - 110px)}
  .hero__scroll{display:none}
  .shot--front{right:auto;left:50%;transform:translateX(-50%) rotate(1.6deg);width:min(92%,380px);top:0}
  .shot--back{left:auto;right:2%;top:-8%;width:min(62%,260px);opacity:.45}
  .stage__chip--a{right:4%;bottom:4%}
  .stage__chip--b{left:2%;bottom:26%}
  .about__grid{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}
  .about__watermark{display:none}
  .about__record{position:relative;top:0;max-width:560px}
  .work__grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav__links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:8px;background:rgba(10,4,20,.97);backdrop-filter:blur(20px);opacity:0;pointer-events:none;transition:opacity .4s;padding:80px 24px}
  .nav__links.is-open{opacity:1;pointer-events:auto}
  .nav__link{font-family:var(--font-display);font-size:clamp(1.8rem,8vw,2.6rem);letter-spacing:-.03em;color:var(--text);padding:.18em 0}
  .nav__link::after{display:none}
  .burger{display:block}
  .status{display:none}
  .btn--sm{display:none}
  .menu-foot{display:grid;justify-items:center;gap:12px;margin-top:clamp(30px,6vw,48px);border-top:1px solid var(--line);padding-top:26px;width:min(320px,80vw)}
  .menu-foot .status{display:inline-flex}
  .menu-foot__mail{font-size:.95rem;color:var(--text-2);border-bottom:1px solid var(--line-2);padding-bottom:2px}
  .menu-foot__mail:hover{color:var(--pink);border-color:var(--pink)}
  .menu-foot__ln{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
  .menu-foot__ln:hover{color:var(--pink)}

  .work__grid{grid-template-columns:1fr}
  .sec-head__row,.sec-head--split{grid-template-columns:1fr}
  .case__body{grid-template-columns:1fr;gap:30px}
  .case__facts{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hero{min-height:auto;padding-top:calc(96px + env(safe-area-inset-top))}
  .hero__stats{grid-template-columns:1fr 1fr;gap:18px 22px}
  .hero__title{letter-spacing:-.04em}
  .hero__stage{height:330px}
  .shot--back{display:none}
  .stage__chip--b{display:none}
  .stage__chip--a{right:2%;bottom:-2%}
  .work__grid--3{grid-template-columns:1fr}
  .versions__grid{grid-template-columns:1fr}
  .record__row{grid-template-columns:86px minmax(0,1fr)}
  .contact__inner{padding:26px 22px}
  .contact__meta{gap:22px 30px}
  .footer__inner{flex-direction:column;align-items:flex-start}
  .case__top{padding-block:12px}
  .case__next{display:none}
  .case__facts{grid-template-columns:1fr 1fr;gap:18px}
  .case__nav{gap:8px}
  .case__home{padding:.58em .85em;font-size:.55rem}
}

@media (max-width:1024px){
  .lanes{display:block;margin-top:clamp(24px,4vw,36px)}
  .lanes__label{display:none}
  .moment{display:block;border-top:1px solid var(--line);padding:26px 0 6px}
  .moment:first-of-type{border-top:0;padding-top:0}
  .moment__head{padding:0 0 18px}
  .moment__head h3{font-size:clamp(1.35rem,3.4vw,1.7rem)}
  .moment__cell,.moment__out{border-top:0;padding:0 0 14px;display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;align-items:start}
  .moment__cell p{max-width:none;font-size:var(--t-0);line-height:1.55}
  .moment__cell::after{display:none}
  .moment__cell.is-lit{background:none}
  .cell__lane{display:block;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding-top:.32em}
  .moment__build .cell__lane{color:var(--pink)}
  .moment__out{display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.06);margin-top:2px}
  .moment__out::before{content:"Output";font-family:var(--font-mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);padding-top:.2em}
  .moment__out .mono{font-size:.58rem;color:var(--text-3);letter-spacing:.1em}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .hero__title .line__in{transform:none}
  .cursor{display:none}
}

/* 19 · 404 ----------------------------------------------------------------- */
.page-404{min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden}
.notfound{position:relative;z-index:2;padding-block:clamp(48px,10vh,110px);max-width:min(760px,100% - var(--gut)*2)}
.notfound__code{margin-top:clamp(40px,8vh,80px);color:var(--pink)}
.notfound__title{font-family:var(--font-display);font-size:clamp(2.4rem,6.4vw,5rem);line-height:.98;letter-spacing:-.045em;font-weight:500;margin:14px 0 22px}
.notfound__lede{color:var(--text-2);max-width:46ch;font-size:var(--t-1);line-height:1.6;margin-bottom:clamp(28px,4vw,38px)}
.notfound__actions{display:flex;gap:12px;flex-wrap:wrap}
.notfound__mark{
  position:absolute;right:-6%;bottom:-18%;width:min(46vw,420px);aspect-ratio:1;
  background:var(--grad);opacity:.14;pointer-events:none;
  -webkit-mask:url('../img/mark.png') center/contain no-repeat;
  mask:url('../img/mark.png') center/contain no-repeat;
  filter:blur(1px);
}
@media (max-width:640px){.notfound__mark{width:70vw;right:-18%;bottom:-10%}}