@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --ink:#171717;
  --paper:#fffdf7;
  --cream:#f4efd9;
  --yellow:#ffd84d;
  --pink:#ffd6df;
  --line:#1d1d1d;
  --muted:#706d66;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",system-ui,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%}

.site-header{
  width:min(calc(100% - 40px),var(--max));
  margin:0 auto;
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:20;
}
.logo{
  display:flex;
  gap:10px;
  align-items:center;
  font:700 20px "Space Grotesk",sans-serif;
}
.logo-mark{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:2px solid var(--line);
  border-radius:50%;
  background:#fff;
}
.nav{display:flex;gap:28px;font-weight:600}
.nav a{position:relative;padding:6px 0}
.nav a.active:after,.nav a:hover:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);
}

main{width:min(calc(100% - 40px),var(--max));margin:0 auto}
.hero{
  min-height:680px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:60px;
  padding:80px 0 70px;
}
.eyebrow{
  font-weight:700;
  letter-spacing:.16em;
  font-size:12px;
  margin:0 0 18px;
}
h1,h2{
  font-family:"Space Grotesk",sans-serif;
  letter-spacing:-.04em;
  margin:0;
  line-height:.96;
}
h1{font-size:clamp(54px,7vw,96px)}
h2{font-size:clamp(38px,5vw,66px)}
.lead{
  max-width:640px;
  margin:28px 0 0;
  font-size:clamp(18px,2vw,22px);
  line-height:1.55;
  color:var(--muted);
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.button{
  border:2px solid var(--line);
  border-radius:999px;
  padding:14px 20px;
  font-weight:700;
  transition:.2s ease;
}
.button.primary{background:var(--ink);color:#fff}
.button.secondary{background:transparent}
.button:hover{transform:translateY(-3px)}

.hero-art{display:grid;place-items:center;position:relative}
.mouse-card{
  width:min(420px,85vw);
  aspect-ratio:1;
  border:3px solid var(--line);
  border-radius:42% 58% 50% 50%;
  background:
    radial-gradient(circle at 20px 20px,var(--ink) 2px,transparent 2.5px) 0 0/34px 34px,
    var(--pink);
  position:relative;
  display:grid;
  place-items:center;
  transform:rotate(3deg);
  box-shadow:16px 16px 0 var(--yellow);
}
.mouse-face{
  width:220px;height:190px;
  border:3px solid var(--line);
  border-radius:46% 46% 55% 55%;
  background:#d9d4cb;
  position:relative;
}
.mouse-ears{
  position:absolute;top:82px;
  width:265px;
  display:flex;justify-content:space-between;
  z-index:-1;
}
.mouse-ears span{
  width:92px;height:92px;border:3px solid var(--line);border-radius:50%;
  background:#d9d4cb;
}
.eyes{display:flex;justify-content:space-between;padding:65px 54px 0}
.eyes span{width:11px;height:11px;background:var(--ink);border-radius:50%}
.nose{
  position:absolute;left:50%;top:96px;transform:translateX(-50%);
  width:24px;height:18px;background:#ef8ca6;border:3px solid var(--line);border-radius:50%;
}
.smile{position:absolute;left:50%;top:112px;transform:translateX(-50%);font-size:40px}
.whiskers{position:absolute;top:104px;font-size:36px;letter-spacing:2px}
.whiskers.left{left:-39px;transform:rotate(5deg)}
.whiskers.right{right:-39px;transform:scaleX(-1) rotate(5deg)}
.tiny-cheese{position:absolute;right:-24px;bottom:6px;font-size:66px;transform:rotate(-10deg)}

.polka-panel{
  background:
    radial-gradient(circle,var(--ink) 1.7px,transparent 2px) 0 0/26px 26px,
    var(--cream);
  border:2px solid var(--line);
}
.facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:20px 0 110px;
}
.facts article{
  min-height:170px;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:end;
  background:rgba(255,253,247,.88);
}
.facts article+article{border-left:2px solid var(--line)}
.facts strong{font:700 44px "Space Grotesk",sans-serif}
.facts span{font-weight:600;color:var(--muted)}

.video-section{padding:10px 0 110px}
.section-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:34px}
.section-heading h2{max-width:720px}
.video-frame{
  border:2px solid var(--line);
  padding:12px;
  background:#fff;
}
.video-frame video{
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--cream);
}
.video-note{
  margin:14px 6px 2px;
  color:var(--muted);
  font-size:14px;
}

.footer{
  width:min(calc(100% - 40px),var(--max));
  margin:0 auto;
  border-top:2px solid var(--line);
  padding:28px 0 34px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:14px;
}

.gallery-hero{
  margin:50px 0 42px;
  padding:70px;
  min-height:360px;
  display:flex;
  flex-direction:column;
  justify-content:end;
}
.gallery-hero h1{font-size:clamp(50px,7vw,90px)}
.gallery-hero p:last-child{font-size:20px;color:var(--muted);max-width:600px}

.gallery-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:24px;
  margin-bottom:100px;
}
.gallery-card{
  margin:0;
  border:2px solid var(--line);
  background:#fff;
}
.gallery-card.tall{grid-row:span 2}
.gallery-card img{
  width:100%;
  height:100%;
  min-height:330px;
  object-fit:cover;
  border-bottom:2px solid var(--line);
}
.gallery-card.tall img{min-height:680px}
.gallery-card figcaption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 20px;
}
.gallery-card figcaption span{color:var(--muted)}
.gallery-card figcaption strong{font-family:"Space Grotesk",sans-serif}

.quote{
  padding:90px 0 120px;
  text-align:center;
}
.quote blockquote{
  margin:0 auto 16px;
  max-width:850px;
  font:600 clamp(42px,6vw,78px)/1 "Space Grotesk",sans-serif;
  letter-spacing:-.04em;
}
.quote span{color:var(--muted)}

.cheese{
  position:fixed;
  z-index:10;
  pointer-events:none;
  font-size:34px;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.08));
  animation:fly 11s linear infinite;
}
.cheese-1{left:-60px;top:18%;animation-delay:-1s}
.cheese-2{left:-80px;top:65%;animation-delay:-5s;animation-duration:15s}
.cheese-3{left:-70px;top:42%;animation-delay:-8s;animation-duration:13s}
.cheese-4{left:-70px;top:30%;animation-delay:-4s;animation-duration:14s}
@keyframes fly{
  0%{transform:translateX(-10vw) translateY(0) rotate(0)}
  25%{transform:translateX(28vw) translateY(-40px) rotate(80deg)}
  50%{transform:translateX(58vw) translateY(28px) rotate(160deg)}
  75%{transform:translateX(88vw) translateY(-22px) rotate(250deg)}
  100%{transform:translateX(118vw) translateY(20px) rotate(360deg)}
}

@media (max-width:820px){
  .site-header{min-height:72px}
  .nav{gap:18px}
  .hero{
    grid-template-columns:1fr;
    gap:60px;
    padding:60px 0 80px;
  }
  .hero-copy{order:1}
  .hero-art{order:2}
  .facts{grid-template-columns:1fr;margin-bottom:80px}
  .facts article+article{border-left:0;border-top:2px solid var(--line)}
  .section-heading{align-items:start;flex-direction:column}
  .gallery-hero{padding:36px;margin-top:28px}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-card.tall{grid-row:auto}
  .gallery-card.tall img,.gallery-card img{min-height:auto;aspect-ratio:4/3}
  .footer{flex-direction:column}
}

@media (max-width:520px){
  .site-header,main,.footer{width:min(calc(100% - 24px),var(--max))}
  .logo span:last-child{display:none}
  h1{font-size:52px}
  .hero{padding-top:42px}
  .mouse-card{box-shadow:9px 9px 0 var(--yellow)}
  .mouse-face{transform:scale(.85)}
  .gallery-hero{padding:26px}
  .cheese{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .cheese{animation:none;display:none}
  .button{transition:none}
}