:root{--bg:#fcfcfc;--ink:#18181b;--mute:#86868e;--line:#e4e4e7;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:Pretendard,system-ui,sans-serif;font-weight:300;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:normal;opacity:.6}
h1{font-weight:300;font-size:clamp(34px,4.4vw,58px);line-height:1.1;letter-spacing:-.025em}
h2{font-weight:400;font-size:clamp(26px,2.8vw,36px);letter-spacing:-.02em;margin-bottom:24px}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;height:72px}
.nav ul{display:flex;gap:28px;list-style:none;font-size:15px}
.btn{display:inline-block;background:var(--ink);color:#fff;border-radius:999px;padding:12px 24px;font-size:15px;font-weight:400}
.btn:active{transform:scale(.98)}

.reel{position:relative;min-height:min(86dvh,760px);display:grid;grid-template-rows:auto 1fr;transition:background-color .8s var(--ease),color .8s var(--ease)}
.reel-copy{padding-top:72px;max-width:820px;display:grid;gap:28px;justify-items:start}
.reel-stage{position:relative;overflow:hidden}
.reel-slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.4fr;align-items:center;gap:40px;padding:32px}
.reel-slide[hidden]{display:none}
.reel-logo{max-height:180px;max-width:80%;justify-self:center}
.reel-mock{max-height:100%;border-radius:8px;justify-self:end}

.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:96px 0}
.project-tile{background:var(--bg);color:var(--ink);border-radius:8px;overflow:hidden;display:grid;grid-template-rows:1fr auto}
.tile-art{aspect-ratio:4/3;display:grid;place-items:center;padding:40px;overflow:hidden}
.tile-art img{max-height:100%;object-fit:contain}
.tile-cap{display:flex;justify-content:space-between;padding:16px 20px;font-size:15px}
.tile-cap b{font-weight:400}

.cats{display:flex;flex-wrap:wrap;gap:8px 40px;font-size:22px;color:var(--mute);padding-bottom:120px}
.campaigns,.web,.how,.about{padding-bottom:120px}
.email-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;max-height:520px;overflow:hidden;background:#f1f1f3;border-radius:8px;padding:32px 24px 0;margin-bottom:20px}
.email-row img{border-radius:4px;align-self:start}
.campaigns p,.how p,.about p{max-width:640px;color:#5f5f66}
.web-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.web-grid a,.web-grid figure{display:grid;gap:10px;font-size:15px}
.web-grid img{border-radius:8px;background:#f1f1f3}
.contact{padding:80px 0 40px}
.contact p{color:var(--mute);margin-bottom:12px}
.mail{font-size:clamp(36px,6.4vw,92px);font-weight:300;letter-spacing:-.03em;line-height:1}
.foot{display:flex;justify-content:space-between;padding-top:20px;padding-bottom:40px;margin-top:80px;border-top:1px solid var(--line);font-size:14px;color:var(--mute)}

@media (max-width:820px){
  .wrap{padding:0 16px}.nav ul{gap:14px;font-size:14px}
  .reel-slide{grid-template-columns:1fr;padding:16px}
  .projects,.web-grid{grid-template-columns:1fr}
  .email-row{grid-template-columns:repeat(3,1fr);padding:16px 12px 0}
}
.detail{background:var(--bg);color:var(--ink);padding-bottom:96px}
.detail-head{padding-top:72px;padding-bottom:48px;max-width:860px}
.detail-meta{font-size:14px;opacity:.7;margin:16px 0 24px}
.detail-story{max-width:640px;margin-bottom:12px}
.detail-images{display:grid;gap:16px}
.detail-img{border-radius:8px;width:100%}
.detail-back{padding-top:40px;font-size:15px}
.notfound{padding:120px 0;display:grid;gap:28px;justify-items:start}
@media (prefers-reduced-motion: no-preference){
  .reel-slide.in .reel-logo{animation:pop .6s var(--ease) both}
  .reel-slide.in .reel-mock{animation:slide .8s var(--ease) .15s both}
  @keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
  @keyframes slide{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion: no-preference){
  [data-moment="sticker"] .tile-art img,[data-moment="sticker"] .detail-img:first-child{transform:scale(1.25) rotate(-8deg);opacity:0}
  [data-moment="sticker"].moment-on .tile-art img,[data-moment="sticker"].moment-on .detail-img:first-child{transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .2s;transform:rotate(-2deg);opacity:1}
  [data-moment="sprout"] .tile-art img{transform:translateY(30px) scaleY(.85);transform-origin:bottom;opacity:0}
  [data-moment="sprout"].moment-on .tile-art img{transition:transform .9s var(--ease),opacity .6s;transform:none;opacity:1}
  [data-moment="ticker"] .tile-cap span{display:inline-block}
  [data-moment="ticker"].moment-on .tile-cap span{animation:tick 1.2s steps(6) 1}
  @keyframes tick{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
}