@font-face {
  font-family: ShelftopiaV2Poppins;
  src: url("../assets/fonts/Poppins-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: ShelftopiaV2Poppins;
  src: url("../assets/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: ShelftopiaV2Poppins;
  src: url("../assets/fonts/Poppins-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "ShelftopiaV2LookingGlass";
  src: url("../assets/fonts/LookingGlassDisplaySmooth-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root:where(.shelftopia-v2) {
  --ink: #000;
  --paper: #fff;
  --pink: #ea3283;
  --purple: #8500d7;
  --content-width: 72rem;
  --gutter: clamp(1rem, 3vw, 3rem);
}
:where(html.shelftopia-v2) * { box-sizing: border-box; }
html:where(.shelftopia-v2) { scroll-behavior: smooth; }
:where(html.shelftopia-v2) body { margin: 0; background: var(--ink); color: var(--ink); font-family: ShelftopiaV2Poppins, sans-serif; }
:where(html.shelftopia-v2) img { display: block; max-inline-size: 100%; block-size: auto; }
:where(html.shelftopia-v2) a { color: inherit; }
:where(html.shelftopia-v2) a:focus-visible { outline: 3px solid var(--purple); outline-offset: 5px; }
:where(html.shelftopia-v2) .skip-link { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; padding: .75rem 1rem; background: white; z-index: 100; transform: translateY(-200%); }
:where(html.shelftopia-v2) .skip-link:focus { transform: none; }

:where(html.shelftopia-v2) .site-header { position: sticky; inset-block-start: 0; z-index: 10; background: var(--paper); border-block-end: 1px solid var(--ink); }
:where(html.shelftopia-v2) .site-header__inner { inline-size: min(calc(100% - 2 * var(--gutter)), var(--content-width)); min-block-size: 4.625rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
:where(html.shelftopia-v2) .site-header__brand { flex: 0 1 18.75rem; margin-inline-start: 1rem; }
:where(html.shelftopia-v2) .site-header__brand img { inline-size: 100%; }
:where(html.shelftopia-v2) .site-header__nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; }
:where(html.shelftopia-v2) .site-header__nav .button { padding: .75rem 1.35rem; font-size: 1rem; white-space: nowrap; }
:where(html.shelftopia-v2) .site-header__nav .button--register { border: 1px solid var(--ink); border-radius: 1.1rem; }
:where(html.shelftopia-v2) .button { display: inline-flex; align-items: center; justify-content: center; padding: .875rem 2.5rem; border-radius: .625rem; background: linear-gradient(90deg, var(--pink), var(--purple)); color: var(--paper); font-size: 1.375rem; font-weight: 600; line-height: 1.35; text-decoration: none; text-transform: uppercase; }
:where(html.shelftopia-v2) .button:hover { filter: brightness(1.08); }

/* No section-level clipping: this wrapper can own artwork shared with later sections. */
:where(html.shelftopia-v2) .scene-stack { position: relative; isolation: isolate; }
:where(html.shelftopia-v2) .hero {
  --scene-height: max(60rem, 71.9vw);
  position: relative;
  display: grid;
  min-block-size: var(--scene-height);
  scroll-margin-block-start: 4.75rem;
}
:where(html.shelftopia-v2) .hero__landscape { position: absolute; inset: 0; z-index: -1; background: url("../assets/images/section-one-bg.svg") center top / auto 100% no-repeat; pointer-events: none; }
:where(html.shelftopia-v2) .hero__content { align-self: start; display: grid; justify-items: center; padding-block-start: 3rem; gap: 1.125rem; }
:where(html.shelftopia-v2) .hero__eyebrow { margin: 0; padding-inline: var(--gutter); text-align: center; text-transform: none; line-height: 1.15; }
:where(html.shelftopia-v2) .hero__eyebrow-title, :where(html.shelftopia-v2) .hero__eyebrow-detail { display: block; }
:where(html.shelftopia-v2) .hero__eyebrow-title { font-size: 1.6667rem; font-weight: 700; }
:where(html.shelftopia-v2) .hero__eyebrow-detail { margin-block-start: .3rem; font-size: 1.5rem; font-weight: 400; }
:where(html.shelftopia-v2) .hero__title { display: flex; flex-direction: column; align-items: center; inline-size: 100%; margin: 0; font-weight: 500; }
:where(html.shelftopia-v2) .hero__wordmark { inline-size: min(46.5%, 55rem); }
:where(html.shelftopia-v2) .hero__ribbon { display: grid; place-items: center; inline-size: 18.6875rem; aspect-ratio: 299 / 43; margin-block-start: .875rem; background: url("../assets/images/THROUGH-THE.svg") center / contain no-repeat; color: var(--paper); font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
:where(html.shelftopia-v2) .hero__theme { inline-size: 26%; max-inline-size: 31rem; margin-block-start: .8125rem; transform: translateY(20px); }

/* The envelope and sign belong to the illustrated landscape. Their offsets are
   proportional to that scene, independent of text wrapping and header height. */
:where(html.shelftopia-v2) .hero__props { position: absolute; inset: 0; inline-size: min(calc(100% - 2 * var(--gutter)), 71.25rem); margin-inline: auto; pointer-events: none; }
:where(html.shelftopia-v2) .hero__invitation { position: absolute; inset-block-start: 38.6%; inset-inline-start: 0; inline-size: 27%; margin: 0; }
:where(html.shelftopia-v2) .hero__invitation img { inline-size: 100%; }
:where(html.shelftopia-v2) .hero__invitation-date { position: absolute; inset-block-start: 20%; inset-inline-start: 15%; inline-size: 67%; transform: rotate(-7.85deg); color: white; font: 400 clamp(.9rem, 2vw, 1.75rem)/1.18 "ShelftopiaV2LookingGlass", serif; text-align: center; }
:where(html.shelftopia-v2) .hero__sign { position: absolute; inset-block-start: 54.1%; inset-inline-end: -1.375rem; inline-size: 22.5%; }
:where(html.shelftopia-v2) .hero__sign img { inline-size: 100%; }
:where(html.shelftopia-v2) .hero__sign-link { position: absolute; inset-block-start: 12%; inset-inline-start: 2%; inline-size: 90%; block-size: 30%; display: grid; place-items: center; padding-inline-end: 3%; font-family: "ShelftopiaV2LookingGlass", serif; font-size: clamp(1.25rem, 1.83vw, 1.75rem); line-height: 1; text-decoration: none; pointer-events: auto; }
:where(html.shelftopia-v2) .hero__sign-link:hover { color: var(--purple); }

/* Tablet: a wider title and smaller props keep the portal open and text legible. */
@media (max-width: 64rem) {
  :where(html.shelftopia-v2) .site-header__inner { gap: 2rem; }
  :where(html.shelftopia-v2) .site-header__brand { margin-inline-start: 0; }
  :where(html.shelftopia-v2) .site-header__nav { gap: 0; }
  :where(html.shelftopia-v2) .site-header__nav .button { padding: .7rem .9rem; font-size: .82rem; }
  :where(html.shelftopia-v2) .hero { --scene-height: 60rem; }
  :where(html.shelftopia-v2) .hero__wordmark { inline-size: 90%; max-inline-size: 48rem; }
  :where(html.shelftopia-v2) .hero__theme { inline-size: 32%; }
  :where(html.shelftopia-v2) .hero__invitation { inline-size: 25%; inset-block-start: 32%; }
  :where(html.shelftopia-v2) .hero__sign { inline-size: 24%; inset-block-start: 55%; inset-inline-end: 0; }
  :where(html.shelftopia-v2) .hero__sign-link { font-size: clamp(1rem, 2.2vw, 1.5rem); }
}

/* Phone: let the date and CTA occupy a real grid row below the title.
   The landscape is separately framed so its central portal survives the crop. */
@media (max-width: 37.5rem) {
  :where(html.shelftopia-v2) .site-header { position: relative; }
  :where(html.shelftopia-v2) .site-header__inner { min-block-size: 4.5rem; flex-wrap: wrap; gap: .75rem; padding-block: .75rem; }
  :where(html.shelftopia-v2) .site-header__brand { flex-basis: 12rem; margin-inline: auto; }
  :where(html.shelftopia-v2) .site-header__nav { flex: 1 0 100%; display: grid; grid-template-columns: 1fr; gap: .5rem; }
  :where(html.shelftopia-v2) .site-header__nav .button { padding: .65rem .35rem; font-size: .72rem; }
  :where(html.shelftopia-v2) .site-header__nav .button--register { justify-self: stretch; }
  :where(html.shelftopia-v2) .button { padding: .75rem 1rem; font-size: .875rem; border-radius: .5rem; }
  :where(html.shelftopia-v2) .hero { --scene-height: clamp(45rem, 160vw, 54rem); grid-template-rows: auto 1fr; align-content: start; }
  :where(html.shelftopia-v2) .hero__landscape { background-size: auto 100%; }
  :where(html.shelftopia-v2) .hero__content { padding-block-start: 2rem; gap: 1.25rem; }
  :where(html.shelftopia-v2) .hero__eyebrow { max-inline-size: 32rem; line-height: 1.3; }
  :where(html.shelftopia-v2) .hero__eyebrow-title { font-size: clamp(1rem, 4vw, 1.25rem); }
  :where(html.shelftopia-v2) .hero__eyebrow-detail { font-size: clamp(.875rem, 3.5vw, 1.125rem); }
  :where(html.shelftopia-v2) .desktop-break { display: none; }
  :where(html.shelftopia-v2) .hero__wordmark { inline-size: 94%; }
  :where(html.shelftopia-v2) .hero__ribbon { inline-size: 11rem; font-size: 1rem; margin-block-start: .75rem; }
  :where(html.shelftopia-v2) .hero__theme { inline-size: 55%; max-inline-size: 16rem; margin-block-start: .75rem; }
  :where(html.shelftopia-v2) .hero__props { position: relative; inset: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 2rem; inline-size: calc(100% - 2 * var(--gutter)); margin-block-start: 1.5rem; }
  :where(html.shelftopia-v2) .hero__invitation { position: static; inline-size: 100%; max-inline-size: 11rem; justify-self: start; }
  :where(html.shelftopia-v2) .hero__invitation-date { font-size: clamp(.8rem, 4.2vw, 1.05rem); }
  :where(html.shelftopia-v2) .hero__sign { position: relative; inset: auto; inline-size: 100%; max-inline-size: 11rem; margin-block-start: 3rem; justify-self: end; }
  :where(html.shelftopia-v2) .hero__sign-link { font-size: clamp(.875rem, 3.6vw, 1.25rem); }
}
@media (prefers-reduced-motion: reduce) {
  html:where(.shelftopia-v2) { scroll-behavior: auto; }
}