:root{
  --rind:#0e4a32;
  --rind-2:#16623f;
  --seed:#0a1f16;
  --flesh:#ff6b81;
  --lime:#eef5c4;
  --paper:#fbfde8;
  --font:"Unbounded","Trebuchet MS","Segoe UI",Verdana,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--rind)}
body{
  margin:0;min-height:100vh;min-height:100svh;
  font-family:var(--font);color:var(--lime);
  overflow-x:clip;
  background:
    radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(5,22,14,.55) 100%),
    repeating-linear-gradient(90deg,transparent 0 120px,rgba(5,22,14,.22) 120px 190px),
    repeating-linear-gradient(90deg,transparent 0 260px,rgba(255,255,255,.05) 260px 330px),
    repeating-linear-gradient(90deg,var(--rind) 0 70px,var(--rind-2) 70px 140px);
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- home ---------- */
.home{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 20px 64px;
}
.stage{
  --ph:clamp(280px,min(44vw,56svh),520px);
  position:relative;width:100%;
  display:grid;place-items:center;
  min-height:calc(var(--ph) + 14vw);
  perspective:1100px;
}
.stage>*{grid-area:1/1}
.word{
  margin:0;font-weight:900;line-height:.92;letter-spacing:-.035em;
  white-space:nowrap;user-select:none;
  text-shadow:.045em .045em 0 var(--seed);
}
.l1{align-self:start;font-size:min(9vw,150px);color:var(--lime);translate:-2.5vw 0;z-index:1;animation:fromLeft .9s cubic-bezier(.2,.9,.2,1) both}
.l2{align-self:end;font-size:min(12.5vw,210px);color:var(--flesh);translate:3vw 0;rotate:-2deg;z-index:3;animation:fromRight .9s .15s cubic-bezier(.2,.9,.2,1) both}
.photo{
  z-index:2;margin:0;width:calc(var(--ph)*.8);aspect-ratio:4/5;
  animation:pop .8s .05s cubic-bezier(.2,1.2,.3,1) both;
}
.frame{
  width:100%;height:100%;
  border:10px solid var(--lime);border-radius:24px;overflow:hidden;
  background:var(--lime);
  box-shadow:14px 14px 0 var(--seed);
  transform:rotate(-3deg) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
  transition:transform .18s ease-out;
}
.frame img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;border-radius:12px;transform:scale(1.32);transform-origin:46% 46%}
@keyframes fromLeft{from{opacity:0;transform:translateX(-24vw)}}
@keyframes fromRight{from{opacity:0;transform:translateX(24vw)}}
@keyframes pop{from{opacity:0;transform:scale(.8) rotate(6deg)}}

/* ---------- dropdown ---------- */
.dropdown{position:relative;margin-top:clamp(22px,3.5vw,44px);z-index:5}
.dd-toggle{
  display:inline-flex;align-items:center;gap:14px;cursor:pointer;
  font:800 clamp(18px,2vw,24px)/1 var(--font);
  color:var(--seed);background:var(--flesh);
  border:3px solid var(--seed);border-radius:999px;
  padding:18px 34px;
  box-shadow:6px 6px 0 var(--seed);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.dd-toggle:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--seed)}
.dd-toggle:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--seed)}
.dd-toggle:focus-visible,.tile:focus-visible,.back:focus-visible,.nav a:focus-visible{outline:4px solid var(--lime);outline-offset:4px}
.dropdown.open .dd-toggle{background:var(--lime)}
.chev{transition:transform .25s ease}
.dropdown.open .chev{transform:rotate(180deg)}
.dd-menu{
  position:absolute;left:50%;top:calc(100% + 16px);translate:-50% 0;
  width:min(92vw,540px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  list-style:none;margin:0;padding:16px;
  background:var(--lime);border:3px solid var(--seed);border-radius:26px;
  box-shadow:8px 8px 0 var(--seed);
}
.dd-menu[hidden]{display:none}
.tile{
  display:flex;align-items:center;justify-content:center;aspect-ratio:1;
  font:800 clamp(18px,3.4vw,28px)/1 var(--font);
  color:var(--seed);background:var(--paper);text-decoration:none;
  border:3px solid var(--seed);border-radius:14px;
  transition:transform .12s ease,background .12s ease,box-shadow .12s ease;
}
.tile:hover{background:var(--flesh);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--seed)}
.dropdown.open .dd-menu li{animation:tile .32s cubic-bezier(.2,1.3,.4,1) backwards;animation-delay:calc(var(--i)*22ms)}
@keyframes tile{from{opacity:0;transform:translateY(10px) scale(.7)}}

/* ---------- project pages ---------- */
.sub{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px}
.sub-wrap{width:min(100%,640px)}
.back{display:inline-block;margin-bottom:22px;color:var(--lime);font-weight:700;text-decoration:none;font-size:16px}
.back:hover{text-decoration:underline;text-underline-offset:5px}
.card{
  background:var(--lime);color:var(--seed);
  border:3px solid var(--seed);border-radius:28px;padding:clamp(24px,5vw,40px);
  box-shadow:10px 10px 0 var(--seed);
  animation:pop .6s cubic-bezier(.2,1.2,.3,1) both;
}
.badge{
  display:grid;place-items:center;width:84px;height:84px;margin-bottom:20px;
  font-weight:900;font-size:40px;color:var(--seed);background:var(--flesh);
  border:3px solid var(--seed);border-radius:20px;rotate:-5deg;box-shadow:5px 5px 0 var(--seed);
}
.card h1{margin:0 0 12px;font-size:clamp(26px,5vw,38px);letter-spacing:-.02em}
.card p{margin:0;font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;font-size:18px;line-height:1.6}
.nav{display:flex;justify-content:space-between;gap:16px;margin-top:28px;font-weight:700;font-size:15px}
.nav a{color:var(--seed);text-decoration:none;border-bottom:3px solid var(--flesh)}
.nav a:hover{background:var(--flesh)}

@media(max-width:640px){
  .stage{--ph:88vw;min-height:calc(var(--ph) + 22vw)}
  .l1{font-size:10vw;translate:-1vw 0}
  .l2{font-size:18vw;translate:2vw 0}
  .frame{border-width:8px;box-shadow:10px 10px 0 var(--seed)}
  .dd-menu{grid-template-columns:repeat(4,1fr);padding:12px;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---------- extras ---------- */
.home,.sub{position:relative;z-index:1}
.seeds{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;transition:transform .5s ease-out}
.seed{
  position:absolute;top:0;left:var(--x);
  width:var(--s);height:calc(var(--s)*1.65);
  background:#06150e;opacity:.8;
  border-radius:50% 50% 50% 50%/68% 68% 32% 32%;
  animation:fall var(--d) linear var(--delay) infinite;
}
.seed::after{content:"";position:absolute;left:24%;top:16%;width:22%;height:30%;border-radius:50%;background:rgba(238,245,196,.45)}
@keyframes fall{
  from{transform:translate3d(0,-12vh,0) rotate(var(--r0))}
  to{transform:translate3d(var(--dx),112vh,0) rotate(var(--r1))}
}

.ch{display:inline-block;transition:transform .35s cubic-bezier(.3,2.2,.5,1)}
.ch:hover{transform:translateY(-.14em) rotate(-7deg) scale(1.06)}
.l2 .ch:hover{color:var(--lime)}

.photo{position:relative;cursor:pointer}
.ring{
  position:absolute;z-index:4;left:-11%;bottom:5%;
  width:clamp(88px,10.5vw,138px);aspect-ratio:1;padding:0;cursor:pointer;
  display:grid;place-items:center;
  background:var(--lime);color:var(--seed);
  border:3px solid var(--seed);border-radius:50%;
  box-shadow:5px 5px 0 var(--seed);
  transition:transform .2s cubic-bezier(.3,2,.5,1),background .2s ease;
}
.ring:hover{transform:scale(1.1) rotate(8deg);background:var(--flesh)}
.ring:focus-visible{outline:4px solid var(--lime);outline-offset:4px}
.ring-text{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:spin 16s linear infinite}
.ring-text text{font:800 9.4px var(--font);fill:var(--seed)}
.ring-icon{font-size:clamp(28px,3.6vw,46px);line-height:1}
@keyframes spin{to{transform:rotate(360deg)}}

.burst{position:fixed;left:0;top:0;z-index:50;pointer-events:none;line-height:1;will-change:transform,opacity}
.burst.dot{width:10px;height:16px;margin:-8px 0 0 -5px;background:#06150e;border:1.5px solid var(--lime);border-radius:50% 50% 50% 50%/68% 68% 32% 32%}

@media(max-width:640px){
  .ring{left:-7%;bottom:3%;width:92px}
}
@media(prefers-reduced-motion:reduce){
  .seeds{display:none}
  .ring-text{animation:none !important}
}