@font-face{
  font-family:'Area';
  src:url('../fonts/Area_Normal_Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Area';
  src:url('../fonts/Area_Normal_SemiBold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Area';
  src:url('../fonts/Area_Normal_Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Area';
  src:url('../fonts/Area_Normal_Black.woff2') format('woff2');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#F7F5F0;
  --ink:#181614;
  --gray:#8a8680;
  --gray-light:#d8d5cd;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Area', sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit;}

header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px;
  max-width:1180px; margin:0 auto;
  position:sticky; top:0; z-index:50;
  background:var(--bg);
}
.logo{ font-family:'Area', sans-serif; font-weight:700; font-size:24px; letter-spacing:-0.01em; text-decoration:none; color:var(--ink); }
nav{display:flex; gap:32px;}
nav a{
  font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--gray); text-decoration:none; font-weight:600;
  padding-bottom:3px; border-bottom:2px solid transparent;
}
nav a.active{color:var(--ink); border-bottom-color:var(--ink);}
nav a:hover{color:var(--ink);}

footer{
  max-width:1180px; margin:0 auto; padding:0 32px;
}
.footer-inner{
  border-top:1px solid var(--gray-light); padding:24px 0 40px;
  display:flex; justify-content:space-between; align-items:center;
}
.foot-name{font-size:13px; color:var(--gray); font-weight:400;}
.socials{display:flex; gap:16px;}
.socials a{color:var(--ink); display:flex;}
.socials svg{width:18px; height:18px;}

/* Animation / home page */
.hero{max-width:1180px; margin:0 auto; padding:0 32px 8px; margin-top:36px;}
.hero-video{
  position:relative; aspect-ratio:16/9;
  background-size:cover; background-position:center;
  border-radius:6px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; background-color:#111;
}
.hero-video iframe{width:100%; height:100%; border:0; display:block;}
.play-btn{
  width:72px; height:72px; border-radius:50%;
  background:rgba(255,255,255,0.92);
  display:flex; align-items:center; justify-content:center;
  z-index:2; transition:transform .18s ease;
}
.hero-video:hover .play-btn{transform:scale(1.08);}
.play-btn svg{width:40px; height:40px;}

.hero-meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:18px; padding-bottom:56px; border-bottom:1px solid var(--gray-light);
}
.hero-title{ font-family:'Area', sans-serif; font-weight:600; font-size:18px; letter-spacing:-0.01em; }
.hero-sub{font-size:14px; color:var(--gray); font-weight:400;}

.section-label{
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gray); font-weight:600;
  margin:56px auto 20px; max-width:1180px; padding:0 32px;
}

.strip{
  display:flex; gap:20px; overflow-x:auto;
  padding:0 32px 8px; max-width:1180px; margin:0 auto;
  scrollbar-width:thin;
}
.strip::-webkit-scrollbar{height:6px;}
.strip::-webkit-scrollbar-thumb{background:var(--gray-light); border-radius:3px;}

.clip{flex:0 0 280px; cursor:pointer;}
.clip-thumb{
  aspect-ratio:16/9; border-radius:5px; position:relative;
  background-size:cover; background-position:center; background-color:#111;
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease;
}
.clip-thumb iframe{width:100%; height:100%; border:0; border-radius:5px; position:absolute; inset:0;}
.clip:hover .clip-thumb{transform:translateY(-3px);}
.clip-thumb .play-btn{width:44px; height:44px;}
.clip-thumb .play-btn svg{width:24px; height:24px;}
.clip-title{margin-top:10px; font-size:13px; font-weight:600;}

/* Illustration grid */
.grid{
  max-width:1180px; margin:0 auto; padding:16px 32px 40px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px 24px;
}
.card{ text-decoration:none; color:var(--ink); display:block; }
.thumb{
  aspect-ratio:1/1; border-radius:6px; background-color:#eee;
  background-size:cover; background-position:center;
  transition:transform .18s ease, opacity .18s ease;
}
.card:hover .thumb{transform:translateY(-4px);}
.card-title{
  margin-top:12px; font-size:13px; font-weight:600;
  letter-spacing:0.01em;
}

@media (max-width:800px){
  .grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr; gap:24px;}
}

/* Illustration project page */
main.project{max-width:1180px; margin:0 auto; padding:16px 32px 80px;}
.project-content{max-width:820px;}
.back-link{
  display:inline-block; font-size:13px; font-weight:600; color:var(--gray);
  text-decoration:none; margin-bottom:28px;
}
.back-link:hover{color:var(--ink);}
.project-title{
  font-family:'Area', sans-serif; font-weight:600; font-size:18px;
  letter-spacing:-0.01em; margin-bottom:26px;
}
.project-meta{ font-size:14px; color:var(--gray); margin-bottom:36px; }
.gallery{ display:flex; flex-direction:column; gap:20px; }
.gallery img{ width:100%; border-radius:6px; display:block; }

/* About page */
main.about{max-width:1180px; margin:0 auto; padding:16px 32px 80px;}
.about-content{max-width:680px;}
.statement{
  font-family:'Area', sans-serif; font-weight:600; font-size:18px;
  line-height:1.25; letter-spacing:-0.01em; margin-bottom:40px;
}
.body-text{
  font-size:16px; line-height:1.7; color:var(--ink);
  margin-bottom:24px; max-width:560px;
}
.festival-block{ margin-top:48px; padding-top:28px; border-top:1px solid var(--gray-light); }
.festival-label{
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gray); font-weight:600; margin-bottom:14px;
}
.festival-list{ font-size:14px; line-height:1.9; color:var(--ink); font-weight:400; }
.contact-block{
  margin-top:48px; padding-top:28px; border-top:1px solid var(--gray-light);
  font-size:16px; line-height:1.7;
}
.contact-block a{ color:var(--ink); font-weight:600; }

@media (max-width:640px){
  header{flex-direction:column; align-items:flex-start; gap:14px;}
  nav{gap:20px;}
  .hero-title{font-size:16px;}
  .hero-meta{flex-direction:column; gap:6px; align-items:flex-start;}
  .clip{flex-basis:220px;}
}