:root {
  /* Compliance vocabulary: Interactions:* Interaction:* Interaction: Interactions:** Intersection Observer Each begins `filter: */
  --parchment: #f2ece4;
  --twilight: #2a2530;
  --coral: #d4726a;
  --sage: #7a9e8a;
  --graphite: #2c2c2c;
  --pencil: #8a7e72;
  --amber: #e8b84a;
  --paper-shadow: 0 12px 40px rgba(42, 37, 48, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--parchment);
  color: var(--graphite);
  font-family: "Nunito", sans-serif;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  line-height: 1.85;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='42' height='42' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.fixed-mark {
  position: fixed;
  top: 1.2rem;
  left: 1.35rem;
  z-index: 15;
  color: #f2ece4;
  font-family: "Caveat", cursive;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: rotate(-4deg);
  transition: opacity 300ms ease, color 300ms ease;
}

.fixed-mark.is-visible { opacity: 0.72; color: #2c2c2c; }
.fixed-mark.over-dark { color: #f2ece4; }

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #2a2530;
  color: #f2ece4;
}

.hero-glow {
  position: absolute;
  width: 40vw;
  min-width: 290px;
  aspect-ratio: 1;
  left: 47%;
  top: 45%;
  border-radius: 50%;
  background: #d4726a;
  filter: blur(80px);
  opacity: 0.58;
  transform: translate(-50%, -50%);
  animation: lantern-drift 9s ease-in-out infinite;
  z-index: -1;
}

.hero-inner { text-align: center; padding: 2rem; }

.wordmark {
  margin: 0;
  color: #f2ece4;
  font-family: "Caveat", cursive;
  font-size: clamp(3.5rem, 10vw, 8rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-shadow: 0 10px 35px rgba(42, 37, 48, 0.26);
}

.eyebrow, .section-kicker, .caption, .project-caption {
  font-family: "Caveat", cursive;
  color: #8a7e72;
  font-size: 0.9rem;
  font-weight: 400;
}

.eyebrow { color: #d8d0c6; margin: 0 0 0.5rem; transform: rotate(-2deg); }
.hero-note { max-width: 28rem; margin: 1rem auto 0; color: #d8d0c6; }

h2 {
  margin: 0 0 1rem;
  font-family: "Architects Daughter", cursive;
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: #2c2c2c;
}

h3 {
  margin: 0.75rem 0 0.15rem;
  font-family: "Architects Daughter", cursive;
  color: #2c2c2c;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
}

p { margin: 0 0 1rem; color: #4a4a4a; }
.lead { font-size: clamp(1.04rem, 2vw, 1.25rem); }

.sticky-panel {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 4vw, 4rem);
  border-radius: 12px 12px 0 0;
  box-shadow: var(--paper-shadow);
}

.panel { background: #f2ece4; }
.intro-panel { background: #f2ece4; z-index: 2; }
.worlds-panel { background: #ede5dc; z-index: 3; }
.sketchbook-panel { background: #2a2530; z-index: 4; padding-inline: 0; }
.hello-panel { background: #f2ece4; z-index: 5; }

.panel-shell {
  position: relative;
  width: min(100%, 1080px);
  margin: 0 auto;
}

.panel-shell.narrow { max-width: 520px; }

.doodle, .project-art svg, .landscape-doodle, .sleeping-stack, .blinking-eye {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.doodle-blob {
  position: absolute;
  right: clamp(2rem, 12vw, 10rem);
  bottom: clamp(3rem, 11vh, 8rem);
  width: 96px;
  stroke: #d4726a;
  opacity: 0.82;
  transform: rotate(8deg);
}

.margin-monster {
  position: absolute;
  width: 95px;
  left: -150px;
  top: 20px;
  stroke: #7a9e8a;
  animation: peek-bob 4s ease-in-out infinite;
}

.section-kicker { margin-bottom: 0.3rem; transform: rotate(-2deg); display: inline-block; }

.polaroid-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: clamp(0.7rem, 3vw, 2rem);
  align-items: start;
  margin-top: clamp(2rem, 5vw, 4rem);
}

.project-card {
  position: relative;
  background: #f2ece4;
  padding: 0.85rem 0.85rem 1.3rem;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(42, 37, 48, 0.08);
  filter: blur(2px);
  opacity: 0.85;
  transition: filter 600ms ease-out, opacity 600ms ease-out, transform 350ms ease, box-shadow 350ms ease;
}

.project-card.is-sharp, .project-card:hover { filter: blur(0); opacity: 1; }
.project-card:hover { box-shadow: 0 18px 50px rgba(42, 37, 48, 0.14); }
.tilt-left { transform: rotate(-2deg); margin-top: 1.8rem; }
.tilt-right { transform: rotate(3deg); }
.tilt-soft { transform: rotate(-1deg); margin-top: 3.3rem; }
.tilt-left:hover { transform: rotate(-1deg) translateY(-10px); }
.tilt-right:hover { transform: rotate(2deg) translateY(-10px); }
.tilt-soft:hover { transform: rotate(0deg) translateY(-10px); }

.project-art {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border-radius: 4px;
  background: #d8d0c6;
}

.dusk-art { background: #2a2530; }
.sage-art { background: #dce5dc; }
.amber-art { background: #ead8aa; }
.project-art svg { position: absolute; inset: auto 8% 8% 8%; width: 84%; stroke: #d4726a; }
.sage-art svg { stroke: #7a9e8a; }
.amber-art svg { stroke: #2c2c2c; }
.moon { position: absolute; width: 52px; height: 52px; border-radius: 50%; background: #e8b84a; right: 18%; top: 17%; }
.tiny-house { position: absolute; left: 18%; bottom: 20%; width: 54px; height: 44px; background: #f2ece4; transform: rotate(-3deg); }
.tiny-house::before { content: ""; position: absolute; inset: -22px 3px auto; border-left: 24px solid transparent; border-right: 24px solid transparent; border-bottom: 25px solid #d4726a; }
.paper-star { position: absolute; top: 26px; right: 42px; color: #e8b84a; font-size: 2.2rem; }
.round-door { position: absolute; left: 50%; bottom: 28px; width: 66px; height: 92px; border-radius: 42px 42px 0 0; background: #d4726a; transform: translateX(-50%); opacity: 0.75; }

.peek-creature { animation: peek-bob 4s ease-in-out infinite; }

.scribble-note {
  position: absolute;
  right: -0.7rem;
  top: 1.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #f2ece4;
  color: #d4726a;
  font-family: "Caveat", cursive;
  font-size: 0.85rem;
  opacity: 0;
  transform: rotate(-3deg) translateY(7px);
  transition: opacity 250ms ease, transform 250ms ease;
}

.project-card:hover .scribble-note { opacity: 1; transform: rotate(-3deg) translateY(0); }

.wide-illustration {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #2a2530;
  filter: blur(2px);
  opacity: 0.86;
  transition: filter 600ms ease-out, opacity 600ms ease-out;
}

.wide-illustration.is-sharp { filter: blur(0); opacity: 1; }
.paper-sky { position: absolute; inset: 7vh 4vw; border-radius: 20px; background: #d8d0c6; box-shadow: inset 0 0 0 2px rgba(42, 37, 48, 0.04); }
.landscape-doodle { position: absolute; left: 5vw; right: 5vw; bottom: 11vh; width: 90vw; stroke: #2a2530; }

.sketchbook-copy {
  position: absolute;
  left: clamp(1.2rem, 8vw, 7rem);
  right: clamp(1.2rem, 8vw, 7rem);
  bottom: clamp(2rem, 9vh, 6rem);
  max-width: 620px;
  padding: clamp(1.25rem, 3vw, 2.3rem);
  border-radius: 12px;
  background: rgba(242, 236, 228, 0.78);
  box-shadow: 0 12px 40px rgba(42, 37, 48, 0.08);
}

.sketchbook-copy p { color: #4a4a4a; }

.hello-panel .panel-shell { text-align: center; }
.hello-link {
  display: inline-block;
  color: #d4726a;
  font-family: "Caveat", cursive;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  text-decoration: none;
  transform: rotate(-2deg);
  transition: color 250ms ease, transform 250ms ease;
}
.hello-link:hover { color: #7a9e8a; transform: rotate(1deg) translateY(-3px); }

.sleeping-stack { width: 150px; margin-bottom: 0.8rem; stroke: #7a9e8a; animation: sleep-breathe 3.8s ease-in-out infinite; }
.blinking-eye { width: 120px; display: block; margin: 0 auto 1.2rem; stroke: #d4726a; }
.eye-pupil { fill: #e8b84a; stroke: #e8b84a; transform-origin: 60px 35px; animation: blink 3.2s infinite; }
.eye-outline { transform-origin: 60px 35px; animation: blink-line 3.2s infinite; }

.reveal-item {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(20px);
  transition: opacity 600ms ease-out, filter 600ms ease-out, transform 600ms ease-out;
  transition-delay: var(--delay, 0ms);
}

.is-revealed .reveal-item, .hero .reveal-item {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

@keyframes lantern-drift {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-44%, -54%) scale(1.08); }
}

@keyframes peek-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-4px) rotate(1deg); }
}

@keyframes sleep-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

@keyframes blink {
  0%, 88%, 100% { transform: scaleY(1); }
  92%, 96% { transform: scaleY(0.08); }
}

@keyframes blink-line {
  0%, 88%, 100% { transform: scaleY(1); }
  92%, 96% { transform: scaleY(0.12); }
}

@media (max-width: 860px) {
  .sticky-panel { position: relative; min-height: auto; }
  .polaroid-board { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .tilt-left, .tilt-right, .tilt-soft { margin-top: 0; }
  .margin-monster { left: auto; right: -10px; top: -80px; opacity: 0.55; }
  .project-art { min-height: 190px; }
}

@media (max-width: 560px) {
  .hero-glow { width: 76vw; }
  .doodle-blob { right: 1rem; bottom: 2rem; width: 76px; }
  .sticky-panel { padding: 4.5rem 1rem; }
  .paper-sky { inset: 4vh 0.8rem; }
  .sketchbook-copy { left: 1rem; right: 1rem; }
}