/* ==========================================================================
   Polymath Holiday Gift 2026 — landing page
   Implements "Polymath Holiday Gift.dc.html" from the Claude Design project
   "Givington's & Polymath Holiday Gift 2026 Landing Pages".

   Foundations (color tokens, type ramp, @font-face) come from
   _ds/polymath-design-system-…/colors_and_type.css, which is loaded first.
   Everything here is page-level composition on top of those tokens.
   ========================================================================== */

:root {
  /* Museo Sans Medium — eyebrows, form labels, CTA text, and the emphasised
     phrase in the hero lede. Kept as a token because these runs read as one
     group: they are the only things on the page set heavier than body copy
     without being bold. Requires museo-sans 500 in the Adobe Fonts kit. */
  --weight-label: 500;
}

/* ---------------- Page shell ---------------- */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
a:hover { opacity: 0.65; }

img { max-width: 100%; }

/* The DS stylesheet gives <p> a 62ch max-width and bottom margin; this page
   controls its own measure, so reset and re-declare per block. */
p { max-width: none; margin: 0; }

/* ---------------- Shared: pill buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-weight: var(--weight-label);
  font-size: var(--fs-small);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 30px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.btn:hover { opacity: 0.85; }
.btn__arrow { display: block; flex: none; }
/* .btn sets display, which outranks the UA's [hidden] rule — restate it so the
   hero CTA can actually be hidden once the form is submitted. */
.btn[hidden] { display: none; }

.btn--light { background: var(--paper); color: var(--ink); }
.btn--dark  { background: var(--ink);   color: var(--paper); padding: 19px 32px; }

/* ---------------- Shared: flat white card ---------------- */

.card {
  background: var(--paper);
  border-radius: var(--radius-0); /* Polymath cards are sharp — never rounded */
  box-shadow: var(--shadow-0);
}

/* ---------------- Masthead ---------------- */

.masthead {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  background: var(--ink);
  border-bottom: 2px dashed var(--sage);
}
.masthead__mark { display: block; height: 34px; width: auto; }

/* ---------------- Hero ---------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink-muted);
  padding: clamp(52px, 8vw, 92px) clamp(18px, 5vw, 48px) clamp(92px, 11vw, 130px);
  text-align: center;
}

.hero__snow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;

  /* Keep the snow off the lede copy so it stays readable, while it keeps
     falling down the far left and right of the hero.

     Two mask layers, each opaque where snow SHOULD show:
       X — opaque at the outer edges, clear through the centre column
       Y — opaque above and below the copy, clear across the copy band
     mask-composite defaults to `add` (union), so snow is hidden only where
     BOTH layers are clear — the centre column AND the copy band, i.e. the
     rectangle the paragraphs actually occupy. The gradient ramps are the soft
     edge; there is no hard cut anywhere.

     The four --snow-clear-* values are measured from the live paragraph
     geometry in app.js (on load, on resize, and after the webfonts swap in),
     because the copy block's share of the hero shifts a lot between mobile and
     desktop — the values below are only a sane starting point. */
  --snow-clear-top: 44%;
  --snow-clear-bottom: 78%;
  --snow-clear-left: 28%;
  --snow-clear-right: 72%;
  --snow-ramp-x: 9%;
  --snow-ramp-y: 7%;
  --snow-mask-x: linear-gradient(to right,
    #000 0,
    #000 calc(var(--snow-clear-left) - var(--snow-ramp-x)),
    transparent var(--snow-clear-left),
    transparent var(--snow-clear-right),
    #000 calc(var(--snow-clear-right) + var(--snow-ramp-x)),
    #000 100%);
  --snow-mask-y: linear-gradient(to bottom,
    #000 0,
    #000 calc(var(--snow-clear-top) - var(--snow-ramp-y)),
    transparent var(--snow-clear-top),
    transparent var(--snow-clear-bottom),
    #000 calc(var(--snow-clear-bottom) + var(--snow-ramp-y)),
    #000 100%);
  -webkit-mask-image: var(--snow-mask-x), var(--snow-mask-y);
  mask-image: var(--snow-mask-x), var(--snow-mask-y);
  mask-composite: add;
}
.hero__snow[hidden] { display: none; }

.hero__ribbon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 230px;
  background: url("assets/hero-ribbon-v4.png") center bottom / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent 100%);
  mask-image: linear-gradient(to top, #000 60%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.hero__ribbon[hidden] { display: none; }

/* Hanging ornaments — a string plus an outlined ring, gently swaying from the
   top edge. Sizes/offsets/timings match the design frame. */
.ornament {
  position: absolute;
  top: -8px;
  z-index: 1;
  transform-origin: top center;
  animation: pm-sway 6.2s ease-in-out infinite;
}
.ornament__string {
  display: block;
  width: 1px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.32);
}
.ornament__ball {
  display: block;
  border-radius: var(--radius-pill);
  box-sizing: border-box;
}

.ornament--1 { left: 3%;     animation-duration: 6.2s; }
.ornament--2 { left: 9.5%;   animation-duration: 7.4s; animation-delay: 0.7s; }
.ornament--3 { left: 16%;    animation-duration: 6.9s; animation-delay: 1.4s; }
.ornament--4 { right: 3.5%;  animation-duration: 6.6s; animation-delay: 0.3s; }
.ornament--5 { right: 10.5%; animation-duration: 8.1s; animation-delay: 1.1s; }
.ornament--6 { right: 17%;   animation-duration: 5.8s; animation-delay: 0.9s; }

.ornament--1 .ornament__string { height: clamp(60px, 9vw, 138px); }
.ornament--2 .ornament__string { height: clamp(38px, 5.4vw, 82px); }
.ornament--3 .ornament__string { height: clamp(88px, 13vw, 190px); }
.ornament--4 .ornament__string { height: clamp(50px, 7.2vw, 108px); }
.ornament--5 .ornament__string { height: clamp(74px, 11vw, 160px); }
.ornament--6 .ornament__string { height: clamp(30px, 4.3vw, 64px); }

.ornament--1 .ornament__ball { width: clamp(28px, 5vw, 72px);   height: clamp(28px, 5vw, 72px);   border: 3px solid var(--sage); }
.ornament--2 .ornament__ball { width: clamp(18px, 3.2vw, 46px); height: clamp(18px, 3.2vw, 46px); border: 3px solid var(--blue); }
.ornament--3 .ornament__ball { width: clamp(14px, 2.4vw, 34px); height: clamp(14px, 2.4vw, 34px); border: 2px solid var(--paper); }
.ornament--4 .ornament__ball { width: clamp(22px, 4.2vw, 60px); height: clamp(22px, 4.2vw, 60px); border: 3px solid var(--sage); }
.ornament--5 .ornament__ball { width: clamp(16px, 2.7vw, 38px); height: clamp(16px, 2.7vw, 38px); border: 2px solid var(--blue); }
.ornament--6 .ornament__ball { width: clamp(20px, 3.6vw, 52px); height: clamp(20px, 3.6vw, 52px); border: 3px solid var(--paper); }

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  animation: pm-fade var(--dur-slow) ease-out both;
}

.hero__eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-label);
  font-size: var(--fs-small);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 30px;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(42px, 10.5vw, 104px);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0;
}

.hero__lede {
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.6;
  max-width: 540px;
  margin: 16px auto 0;
  color: var(--paper);
  text-wrap: pretty;
}
.hero__eyebrow + .hero__lede { margin-top: clamp(26px, 4vw, 38px); }
.hero__lede strong { font-weight: var(--weight-label); }
.hero__lede--hint { margin-top: 28px; text-wrap: initial; }
.hero__hint { font-size: 13px; font-style: italic; color: var(--blue); }

.hero .btn { margin-top: 42px; }

/* ---------------- Confirm section ---------------- */

.confirm {
  background: var(--sage);
  padding: clamp(56px, 9vw, 96px) clamp(16px, 4vw, 48px) clamp(64px, 9vw, 104px);
}
.confirm [hidden] { display: none; }

.confirm__pending { max-width: 860px; margin: 0 auto; }

.confirm__intro { text-align: center; margin-bottom: 46px; }

.confirm__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(30px, 6.4vw, 52px);
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.confirm__copy {
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.6;
  margin: 20px auto 0;
  max-width: 560px;
  color: var(--ink);
}
.confirm__copy strong { font-weight: 700; }

.confirm__deadline {
  font-family: var(--font-sans);
  font-weight: var(--weight-label);
  font-size: var(--fs-small);
  text-transform: uppercase;
  color: var(--ink);
  margin: 22px 0 0;
}

/* ---------------- Form ---------------- */

.form { padding: clamp(26px, 5vw, 52px) clamp(20px, 5vw, 52px) clamp(26px, 4vw, 44px); }

.form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px 28px;
}

.field { display: flex; flex-direction: column; gap: 9px; }

.field__label {
  font-family: var(--font-sans);
  font-weight: var(--weight-label);
  font-size: 13px;
  text-transform: uppercase;
  color: var(--ink-75);
}
.field__req { color: var(--blue); }

.field__input {
  height: 52px;
  box-sizing: border-box;
  border: 1px solid var(--ink-30);
  border-radius: var(--radius-0);
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
}
.field__input::placeholder { color: rgba(29, 29, 39, 0.4); }
.field__input:focus { outline: none; border-color: var(--focus); }
.field__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Custom chevron — the native select arrow is suppressed with appearance:none. */
.field__select-wrap { position: relative; }
.field__input--select { width: 100%; padding-right: 38px; appearance: none; -webkit-appearance: none; }
.field__chevron {
  position: absolute;
  right: 14px;
  top: 18px;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.form__error {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--danger);
}

.form__submit { margin-top: 38px; width: 100%; }
.form__submit[disabled] { cursor: progress; opacity: 0.7; }

.form__footnote {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-55);
  margin: 26px 0 0;
  text-align: center;
}
.form__footnote strong { font-weight: 700; }

/* ---------------- Success state ---------------- */

.confirm__done {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(44px, 8vw, 76px) clamp(24px, 5vw, 56px);
  animation: pm-fade 360ms ease-out both;
}
.confirm__done-icon { width: 56px; height: auto; display: block; margin: 0 auto 30px; }
.confirm__done-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(30px, 6.4vw, 50px);
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.confirm__done-title:focus { outline: none; }
.confirm__done-copy { font-size: 19px; line-height: 1.6; margin: 24px 0 0; color: var(--ink-75); }
.confirm__done-sub  { font-size: 17px; line-height: 1.6; margin: 28px 0 0; color: var(--ink); }

/* Read-back of the address just submitted, so the recipient can spot a typo
   before the gift ships. Left-aligned inside the otherwise-centred card —
   an address block reads as an address block. */
.shipping {
  margin: 34px 0 0;
  border: 1px solid rgba(29, 29, 39, 0.18);
  background: #F7F7F5;
  padding: 24px 26px;
  text-align: left;
}
.shipping__label {
  font-family: var(--font-sans);
  font-weight: var(--weight-label);
  font-size: 13px;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 0 0 12px;
}
.shipping__address { font-size: 17px; line-height: 1.55; color: var(--ink); margin: 0; }

.confirm__done-fix {
  font-size: 15px;
  line-height: 1.6;
  margin: 16px 0 0;
  color: var(--ink-55);
  text-align: left;
}
.confirm__done-sign {
  font-family: var(--font-sans);
  font-weight: var(--weight-label);
  font-size: var(--fs-small);
  text-transform: uppercase;
  color: var(--ink);
  margin: 32px 0 0;
}

/* ---------------- Footer ---------------- */

.footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(48px, 7vw, 72px) clamp(18px, 5vw, 48px);
  text-align: center;
}
.footer__icon { width: 78px; height: auto; display: block; margin: 0 auto 30px; }

.footer__social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  color: var(--paper);
  text-decoration: none;
}
.footer__social a:hover { color: var(--sage); opacity: 1; }
.footer__social svg { display: block; }

.footer__display {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(38px, 8vw, 84px);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--paper);
  margin-top: 38px;
}
.footer__tagline {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(18px, 3.4vw, 30px);
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--paper);
  margin-top: 14px;
}
.footer__legal { font-size: 13px; line-height: 1.7; color: var(--sage); margin-top: 38px; }

/* ---------------- Snowfall (rings drifting down the hero) ---------------- */

.snowflake {
  position: absolute;
  top: 0;
  border-radius: var(--radius-pill);
  box-sizing: border-box;
}

@keyframes pm-drift {
  0%   { transform: translate3d(0, -40px, 0); }
  100% { transform: translate3d(var(--dx, 0px), 900px, 0); }
}
@keyframes pm-sway {
  0%, 100% { transform: rotate(-1.8deg); }
  50%      { transform: rotate(1.8deg); }
}
@keyframes pm-fade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- Reduced motion ----------------
   Snow is skipped entirely in app.js; the rest of the motion is stilled here. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ornament,
  .hero__inner,
  .confirm__done { animation: none; }
  .snowflake { animation: none; opacity: 0.45; }
}