:root {
  --ink: #372c24;
  --paper: #fbf5e8;
  --cream: #f8f1df;
  --butter: #f5c54f;
  --peach: #f6b993;
  --leaf: #647d60;
  --blue: #bed9d9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 1440px;
  margin: 0;
  overflow-x: auto;
  background: var(--paper);
  color: var(--ink);
  font-family: "ZCOOL XiaoWei", Georgia, serif;
  font-size: 18px;
  line-height: 1.55;
}
main {
  width: 1440px;
  margin: 0 auto;
}
a { color: inherit; text-decoration: none; }
a, button, [role="button"] { cursor: url("assets/croissant-cursor.png") 24 18, pointer; }

.hero {
  position: relative;
  height: 850px;
  overflow: hidden;
  padding: 33px 80px 60px;
  background:
    radial-gradient(circle at 91% 9%, #ffe7aa 0 96px, transparent 97px),
    radial-gradient(circle at 32% 79%, rgba(234, 201, 133, .28) 0 145px, transparent 146px),
    var(--cream);
  box-shadow: 0 0 0 100vmax var(--cream);
  clip-path: inset(0 -100vmax);
}
.nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; }
.wordmark { display: flex; gap: 9px; align-items: center; font-family: "ZCOOL KuaiLe", sans-serif; font-size: 25px; }
.croissant-mark { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: var(--butter); transform: rotate(-15deg); }
.nav-link { padding-bottom: 4px; border-bottom: 1px solid var(--ink); font: 500 12px/1 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.hero-copy { position: relative; z-index: 3; width: 610px; padding-top: 133px; }
.eyebrow { margin: 0 0 14px; color: #7c654e; font: 500 11px/1.2 "DM Mono", monospace; letter-spacing: .12em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-weight: 400; letter-spacing: -.045em; line-height: .95; }
h1 { margin-bottom: 28px; font-size: 136px; }
h1 em, h2 em { color: #df865c; font-family: Georgia, serif; font-weight: 400; }
.hero-intro { width: 440px; color: #67564a; font-size: 20px; }
.round-link { display: inline-flex; align-items: center; gap: 15px; margin-top: 20px; padding: 13px 18px; border: 1px solid var(--ink); border-radius: 99px; font-family: "ZCOOL KuaiLe", sans-serif; font-size: 15px; transition: transform .25s ease, background .25s ease; }
.round-link span { font-size: 20px; }
.round-link:hover { background: var(--butter); transform: rotate(-2deg) translateY(-2px); }
.hero-illustration-wrap { position: absolute; z-index: 1; right: 160px; bottom: -15px; width: 760px; }
.hero-illustration { display: block; width: 100%; mix-blend-mode: multiply; }
.illustration-note { position: absolute; right: 20%; bottom: 8%; margin: 0; transform: rotate(-7deg); color: #8d775c; font: 11px/1.2 "DM Mono", monospace; }
.age-card { position: absolute; z-index: 4; top: 144px; right: 220px; display: flex; flex-direction: column; min-width: 172px; padding: 18px 20px; border: 1px solid var(--ink); border-radius: 50% 48% 46% 51%; background: #fce2bd; transform: rotate(4deg); text-align: center; }
.age-label, .age-subtitle { font: 10px/1.2 "DM Mono", monospace; letter-spacing: .08em; }
.age-card strong { margin: 6px 0; font-family: "ZCOOL KuaiLe", sans-serif; font-size: 19px; }
.age-subtitle { color: #886d54; }
.orbit { position: absolute; border: 1px solid rgba(91, 77, 58, .3); border-radius: 50%; pointer-events: none; }
.orbit-one { top: 215px; left: 675px; width: 65px; height: 65px; }
.orbit-two { bottom: 126px; left: 145px; width: 20px; height: 20px; border: 0; background: var(--peach); }
.croissant-sticker { position: absolute; z-index: 2; display: block; pointer-events: none; }
.sticker-hero { top: 96px; right: 520px; width: 95px; transform: rotate(-10deg); }

.hello-section, .timeline-section { position: relative; padding: 160px; }
.hello-section { min-height: 690px; box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
.section-number { margin-bottom: 110px; color: #9a8064; font: 11px/1 "DM Mono", monospace; letter-spacing: .1em; }
.hello-grid { display: grid; grid-template-columns: 1.1fr .8fr; gap: 145px; align-items: end; }
h2 { margin-bottom: 0; font-size: 95px; }
h2 span { color: var(--leaf); font-family: Georgia, serif; font-style: italic; }
.hello-text { color: #66554a; font-size: 22px; }
.hello-text p + p { margin-top: 20px; }
.sticker-hello { top: 116px; right: 188px; width: 78px; transform: rotate(18deg); }

.timeline-section { min-height: 980px; background: var(--blue); box-shadow: 0 0 0 100vmax var(--blue); clip-path: inset(0 -100vmax); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 105px; }
.section-aside { margin-bottom: 7px; color: #586d6d; font-size: 17px; }
.timeline { width: 1080px; margin: 0 auto; padding: 0; list-style: none; }
.timeline-item { position: relative; display: grid; grid-template-columns: 145px 95px 1fr; gap: 24px; padding: 37px 0; border-top: 1px solid rgba(55,44,36,.45); }
.timeline-item:last-child { border-bottom: 1px solid rgba(55,44,36,.45); }
.date, .event-kicker { font: 11px/1.4 "DM Mono", monospace; letter-spacing: .06em; }
.date { padding-top: 7px; color: #5a6d6c; }
.doodle { display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid var(--ink); border-radius: 49% 51% 48% 52%; }
.doodle img { width: 46px; }
.doodle-sun { background: #f8d76f; transform: rotate(-11deg); }
.doodle-roll { background: #f5ba94; transform: rotate(11deg); }
.doodle-star { background: #efefc1; transform: rotate(-4deg); }
.event-kicker { color: #9a664d; }
h3 { margin: 8px 0 7px; font-family: "ZCOOL KuaiLe", sans-serif; font-size: 38px; font-weight: 400; line-height: 1.1; }
.event-content p { width: 530px; margin: 0; color: #5a6261; }

.closing { position: relative; min-height: 620px; overflow: hidden; padding: 205px 24px 80px; background: #f7bc6e; text-align: center; box-shadow: 0 0 0 100vmax #f7bc6e; clip-path: inset(0 -100vmax); }
.click-croissant { position: fixed; z-index: 50; width: 35px; height: 35px; object-fit: contain; pointer-events: none; animation: croissant-pop .85s cubic-bezier(.18,.75,.28,1) forwards; }
@keyframes croissant-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(0deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.75) rotate(var(--r)); }
}
.closing .eyebrow { color: #845234; }
.closing h2 { position: relative; z-index: 2; font-size: 130px; }
.closing-note { position: relative; z-index: 2; font: 11px/1.4 "DM Mono", monospace; letter-spacing: .1em; }
.closing-sun { position: absolute; top: 28px; left: 50%; color: #f9d46b; font-size: 640px; line-height: 1; transform: translateX(-50%); }