@font-face {
  font-family: "Be Vietnam";
  src: url("../assets/fonts/BeVietnam-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam";
  src: url("../assets/fonts/BeVietnam-SemiBoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Romie";
  src: url("../assets/fonts/Romie-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Romie";
  src: url("../assets/fonts/Romie-BoldItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

.curtain-preview main.curtain-stack {
  isolation: isolate;
  padding: 0;
}
.curtain-preview .menu-toggle, .curtain-preview .mobile-contact { display: none; }
.curtain-preview .site-navigation[hidden] { display: none; }
.curtain-preview .animation-controls[hidden] { display: none; }
.mobile-textured-scribble { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.curtain-hero {
  position: relative;
  z-index: 2;
  display: flow-root;
  min-height: max(100svh, min(83.0556vw, 1196px));
  padding-bottom: 80px;
  overflow: clip;
  background: var(--paper);
}
.curtain-hero .scribble-stage {
  position: absolute;
  z-index: 0;
  left: -20.19%;
  top: 481.5px;
  width: 140.38%;
  aspect-ratio: 1000 / 757.56;
  transform: translateY(-50%);
}
.curtain-hero .original-scribble {
  width: 1270.75px;
  height: 1853.64px;
  transform: translate(-50%, -50%) rotate(81.48deg) scale(var(--art-scale, 1));
}
.frosted-panel {
  position: relative;
  z-index: 1;
  width: calc(100% - 120px);
  max-width: 1086.33px;
  min-height: 625px;
  margin: 80px auto 0;
  padding: 56px 68px 64px;
  border-radius: 18.097px;
  background: rgb(255 255 255 / 32%);
  -webkit-backdrop-filter: blur(21.226px);
  backdrop-filter: blur(21.226px);
  text-align: center;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 334px;
  max-width: 100%;
  min-height: 36px;
  margin: 0 auto 24px;
  padding: 11px 16px;
  border: 1px dashed var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .99px;
  text-transform: uppercase;
  text-wrap: balance;
}
.curtain-preview .frosted-panel h1 {
  max-width: 950px;
  margin: 0 auto;
  font-family: "Romie", Georgia, serif;
  font-weight: 700;
  font-synthesis: none;
  font-size: clamp(56px, 7.2917vw, 105px);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: none;
}
.romie-line { display: block; }
.romie-messy { font-feature-settings: "ordn" 1, "ss06" 1, "ss11" 1, "ss12" 1, "ss13" 1, "ss14" 1, "ss15" 1, "ss18" 1, "ss19" 1, "ss20" 1, "dlig" 1; }
.curtain-preview .frosted-panel .preview-copy { max-width: 890px; margin: 19px auto 0; }
.messy-section {
  position: sticky;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: max(775px, 100svh);
  padding: 175px 60px;
  background: var(--yellow);
  color: var(--ink);
  text-align: center;
  animation: section-palette 55s ease-in-out infinite;
  animation-play-state: paused;
}
.messy-content { width: 100%; max-width: 912px; }
.messy-section h2 {
  margin: 0;
  font-family: "Romie", Georgia, serif;
  font-size: 65px;
  font-weight: 700;
  font-synthesis: none;
  line-height: 1.15;
  letter-spacing: -.01em;
  font-feature-settings: "dlig" 1;
}
.romie-section-line { display: block; }
.messy-section h2 em { font-weight: 700; letter-spacing: -.16px; }
.messy-copy {
  max-width: 859px;
  margin: 54px auto 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.38;
}
.messy-copy p { margin: 0; }
.messy-copy p + p { margin-top: 24.84px; }
.messy-copy em { font-weight: 600; }
.colors-running .messy-section { animation-play-state: running; }
@keyframes section-palette {
  0%, 5%, 100% { background-color: var(--yellow); }
  25% { background-color: var(--blush); }
  50% { background-color: var(--pink); }
  75% { background-color: var(--turquoise); }
}
@media (min-width: 1200px) {
  .messy-copy { max-width: 910px; }
}
@media (min-width: 1920px) {
  .frosted-panel { max-width: 1320px; }
  .curtain-preview .frosted-panel .preview-copy,
  .curtain-preview .messy-copy { font-size: 20px; }
}
@media (min-width: 1441px) {
  .frosted-panel { margin-top: max(80px, calc(50svh - 396.5px)); }
  .curtain-hero .scribble-stage { top: max(481.5px, 50svh); }
}
@media (max-width: 1199px) {
  .frosted-panel { width: calc(100% - 64px); min-height: 0; padding: 64px 40px; }
  .messy-section { padding: 120px 32px; }
  .messy-section h2 { font-size: clamp(36px, 4.514vw, 65px); }
}
@media (max-width: 899px) {
  .curtain-hero { --art-scale: .85; }
  .frosted-panel { margin-top: 64px; padding: 56px 32px; }
  .curtain-hero .scribble-stage { top: 50%; transform: translateY(-50%); }
  .messy-section { min-height: 100svh; padding: 100px 32px; }
}
@media (max-width: 599px) {
  .curtain-hero { --art-scale: 1; padding-bottom: 48px; }
  .curtain-hero .scribble-stage {
    width: 100%;
    height: calc(100% + 150px);
    aspect-ratio: auto;
    left: 0;
    top: -75px;
    transform: none;
    contain: paint;
  }
  /* Bake the grain once instead of rerunning SVG noise/displacement over
     a large drawing beneath the frosted panel on every phone frame. */
  .curtain-hero .scribble-line { filter: none; }
  .curtain-hero .scribble-stage svg {
    overflow: hidden;
  }
  .curtain-hero .scribble-stage.is-canvas svg { opacity: 0; }
  .curtain-hero .scribble-stage.is-canvas .mobile-textured-scribble { display: block; }
  .has-mobile-menu .site-header { flex-wrap: nowrap; }
  .has-mobile-menu .site-header > .contact-button { display: none; }
  .curtain-preview .menu-toggle {
    display: flex;
    flex: 0 0 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid rgb(0 0 0 / 30%);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
  }
  .curtain-preview .menu-toggle[hidden] { display: none; }
  .menu-toggle span { width: 22px; height: 2px; background: currentColor; transition: transform 180ms ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .has-mobile-menu .site-navigation {
    position: absolute;
    top: calc(100% + 16px);
    left: 0;
    right: 0;
    padding: 24px;
    border: 1px solid rgb(0 0 0 / 15%);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: 0 12px 28px rgb(0 0 0 / 10%);
  }
  .has-mobile-menu .site-navigation ul { flex-direction: column; align-items: flex-start; gap: 18px; }
  .has-mobile-menu .site-navigation span { font-size: 16px; }
  .has-mobile-menu .site-navigation .mobile-contact { display: inline-flex; margin-top: 24px; }
  .frosted-panel { width: calc(100% - 32px); margin-top: 48px; padding: 40px 20px; border-radius: 16px; }
  .curtain-preview .frosted-panel h1 { font-size: clamp(32px, 9.6vw, 44px); }
  .curtain-preview .frosted-panel .preview-copy { margin-top: 28px; }
  .messy-section { padding: 80px 24px; }
  .messy-section h2 { font-size: clamp(32px, 8.2vw, 44px); }
  .romie-section-line { display: inline; }
  .messy-copy { margin-top: 36px; font-size: 16px; line-height: 1.5; }
  .messy-copy p + p { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .messy-section { position: relative; animation: none; }
  .menu-toggle span { transition: none; }
}

/* Short, one-time entrances settle into the existing layout. */
@media (prefers-reduced-motion: no-preference) {
  .curtain-preview .site-header .brand,
  .curtain-preview .site-navigation li,
  .curtain-preview .site-header .contact-button,
  .curtain-preview .site-header .menu-toggle {
    animation: navigation-enter 650ms cubic-bezier(.22, 1, .36, 1) backwards;
  }
  .curtain-preview .site-header .brand { animation-delay: 80ms; }
  .curtain-preview .site-header .menu-toggle { animation-delay: 160ms; }
  .curtain-preview .site-navigation li:nth-child(1) { animation-delay: 160ms; }
  .curtain-preview .site-navigation li:nth-child(2) { animation-delay: 220ms; }
  .curtain-preview .site-navigation li:nth-child(3) { animation-delay: 280ms; }
  .curtain-preview .site-navigation li:nth-child(4) { animation-delay: 340ms; }
  .curtain-preview .site-header .contact-button { animation-delay: 400ms; }
  .frosted-panel { animation: glass-enter 1100ms cubic-bezier(.22, 1, .36, 1) 120ms backwards; }
  .hero-eyebrow { animation: copy-enter 750ms cubic-bezier(.22, 1, .36, 1) 260ms backwards; }
  .frosted-panel h1 { animation: copy-enter 850ms cubic-bezier(.22, 1, .36, 1) 350ms backwards; }
  .frosted-panel .preview-copy p { animation: copy-enter 750ms cubic-bezier(.22, 1, .36, 1) backwards; }
  .frosted-panel .preview-copy p:first-child { animation-delay: 620ms; }
  .frosted-panel .preview-copy p + p { animation-delay: 760ms; }

  .scroll-reveal:not(.is-revealed) { opacity: 0; transform: translateY(24px); }
  .scroll-reveal.is-revealed { animation: copy-enter 850ms cubic-bezier(.22, 1, .36, 1) backwards; }
  .messy-copy p:nth-child(2).is-revealed { animation-delay: 70ms; }
  .messy-copy p:nth-child(3).is-revealed { animation-delay: 140ms; }

  .curtain-preview.animations-paused :is(.brand, .site-navigation li, .contact-button, .menu-toggle, .frosted-panel, .hero-eyebrow, .frosted-panel h1, .preview-copy p, .scroll-reveal),
  .curtain-preview .curtain-hero.hero-paused :is(.brand, .site-navigation li, .contact-button, .menu-toggle, .frosted-panel, .hero-eyebrow, .frosted-panel h1, .preview-copy p) {
    animation-play-state: paused;
  }
  /* Keyboard focus exposes content immediately during an entrance. */
  .curtain-preview .site-header:focus-within :is(.brand, .site-navigation li, .contact-button, .menu-toggle),
  .curtain-preview main:focus :is(.frosted-panel, .hero-eyebrow, .frosted-panel h1, .preview-copy p),
  .curtain-preview .messy-section:focus-within .scroll-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
@keyframes navigation-enter {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes glass-enter {
  from { opacity: 0; transform: translateY(28px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes copy-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}