/* Hallmark · shape: poster, one screen · genre: editorial · theme: brand (@tadamio/design-tokens, docs/brand/store-design.md) · job: visit · hero: the Sorpri logo on the cream box every product sits on, filling the screen above the line · nav: none, the logo is the page · footer: one line · imagery: the logo itself · signature: the tag swinging once on its string as the page opens
 * axes: Nata/Caprasimo/Frambuesa · posture: restrained · surface: the brand's Ciruela on Nata · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · waive 59 · the stage and the intro are one hero, 40px apart, on a one-screen holding page · sorpri.com shows a single screen until the store opens, so there are no sections to space */
/* Hallmark · waive 80 · div.stage holds the Sorpri logo, the brand's own logo file · the logo is the only picture a store that has not opened can show honestly */
/* Hallmark · dismissed 77 · two sections by request: a simple holding page for sorpri.com, one screen until the store opens */

:root {
  --page-width: 1280px;
  --page-gutter: var(--space-4);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 48rem) {
  :root {
    --page-gutter: 40px;
  }
}

html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--color-accent);
  scrollbar-color: var(--color-border-strong) var(--color-bg);
}

::selection {
  background: var(--color-text);
  color: var(--color-bg);
}

p,
h1 {
  margin: 0;
}

.page {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-height: 100svh;
  max-width: calc(var(--page-width) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding: var(--space-4) var(--page-gutter) var(--space-6);
}

@media (min-width: 48rem) {
  .page {
    padding-block: 40px var(--space-8);
  }
}

.hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 48rem) {
  .hero {
    gap: 40px;
  }
}

/* The logo sits on the warm cream every product sits on in the store. */
.stage {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: clamp(220px, 42svh, 640px);
  padding: var(--space-12) clamp(var(--space-6), 7vw, var(--space-24));
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.mark {
  display: block;
  width: min(100%, 880px);
  height: auto;
  overflow: visible;
}

/* The logo's own colours (@tadamio/design-tokens' logoTones.brand), whatever the theme, but its string, which turns Rosa on a dark page. */
.tag {
  fill: #d3195a;
}

.word {
  fill: #ffd4e0;
}

.string {
  stroke: #3a0f2a;
}

@media (prefers-color-scheme: dark) {
  .string {
    stroke: #ffd4e0;
  }
}

/* Once, on arrival: the tag swings on its string, as a present's tag does when it's picked up, and settles. Under a second, so nothing keeps moving. */
@media (prefers-reduced-motion: no-preference) {
  .mark {
    transform-origin: 7% 9%;
    animation: tag-swing 1s var(--ease-pop) 150ms both;
  }
}

@keyframes tag-swing {
  0% {
    opacity: 0;
    transform: rotate(-8deg);
  }
  40% {
    opacity: 1;
    transform: rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

.intro {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 56rem) {
  .intro {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: var(--space-12);
  }
}

h1 {
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, var(--text-4xl));
  font-weight: var(--font-weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  overflow-wrap: break-word;
  text-wrap: balance;
}

.aside {
  display: grid;
  gap: var(--space-6);
}

.lede {
  max-width: 34ch;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  text-wrap: pretty;
}

/* A sentence a line. */
.lede span {
  display: block;
}

@media (min-width: 56rem) {
  .lede {
    font-size: var(--text-xl);
    line-height: 1.45;
  }
}

.foot {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}