/* Base: reset, page typography, page layout (wrap, section spacing and headings, scalloped edges),
   focus outlines, scroll reveal, shared animations and reduced motion */

* { box-sizing: border-box; }
/* The page never moves sideways or zooms: anything poking out past the edges (the tilted ribbon, stickers)
   is clipped, and fingers can only scroll (pinch zoom is also off in the viewport tag and script.js).
   clip, unlike hidden, doesn't break the sticky nav; hidden is the fallback for older browsers */
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 90px; touch-action: pan-x pan-y; }
body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
/* Buttons and links show their own pressed state, so no gray tap flash on phones */
a, button { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
/* Rules like the one above would otherwise override the hidden attribute (script.js hides elements with it) */
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; }
.wrap { width: calc(100% - 32px); margin: 0 auto; }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border: var(--line); border-radius: 99px; background: var(--paper); font-weight: 800; }
.skip-link:focus { top: 16px; }

a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Sections. A heading is centered on phones (like the hero and Collections), left on tablets, and on
   desktop has its intro on the right */
.section-pad { padding: 64px 0; }
.section-heading { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 32px; text-align: center; }
.section-heading h2 { margin: 0; font-size: clamp(2.6rem, 5vw, 4.2rem); }
.section-heading-center { align-items: center; justify-content: center; text-align: center; }
.section-intro { max-width: 340px; margin: 0 0 6px; color: var(--ink-soft); font-size: 1.02rem; }
.section-heading .eyebrow { margin-bottom: 12px; }

/* Scalloped "cloud" edges between sections, in the section's --scallop color. Each 30px arc is a half
   ellipse of that color inside an ink ring, with the color filling below the arcs; drawn with gradients
   (not an SVG) so they follow the theme. The bottom edge is the top one flipped */
.scallop-top, .scallop-bottom { position: relative; }
.scallop-top::before, .scallop-bottom::after {
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  content: "";
  background-image:
    linear-gradient(transparent 14px, var(--scallop) 14px),
    radial-gradient(13.5px 10.5px at 15px 14px, var(--scallop) calc(100% - 1px), transparent 100%),
    radial-gradient(16.5px 13.5px at 15px 14px, var(--ink) calc(100% - 1px), transparent 100%);
  background-repeat: repeat-x;
  background-size: 30px 26px;
}
.scallop-top::before { top: -25px; }
.scallop-bottom::after { bottom: -25px; z-index: 1; transform: scaleY(-1); }

/* Sparkle cursor trail */
.trail-sparkle { position: fixed; z-index: 100; width: 16px; height: 16px; margin: -8px 0 0 -8px; pointer-events: none; stroke: var(--ink); stroke-width: 1.5px; animation: trail .8s ease-out forwards; }

/* Scroll reveal (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(26px) scale(.97); transition: opacity .5s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(5deg); } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.7) rotate(25deg); } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes pop { from { opacity: 0; transform: scale(.88) rotate(-3deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes trail { from { opacity: 1; transform: scale(1) rotate(0); } to { opacity: 0; transform: translateY(14px) scale(.2) rotate(120deg); } }

@media (min-width: 681px) {
  html { scroll-padding-top: 100px; }
  .wrap { width: min(1160px, calc(100% - 48px)); }
  .section-pad { padding: 90px 0; }
  .section-heading { align-items: start; gap: 14px; margin-bottom: 48px; text-align: start; }
  .section-heading-center { align-items: center; text-align: center; }
  .section-heading .eyebrow { margin-bottom: 16px; }
}

@media (min-width: 901px) {
  .section-pad { padding: 110px 0; }
  .section-heading { flex-direction: row; align-items: end; gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}