/* Shared base for the four gift landing pages. Each page sets its own ground and its one moving part. */
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/CormorantGaramond-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/CormorantGaramond-LightItalic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/CormorantGaramond-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/CormorantGaramond-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Great Vibes'; src: url('../fonts/GreatVibes-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/Raleway-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/Raleway-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ink: #1C1F1E; --gold: #B08930; --gold-deep: #8A6A22; --sage: #3D5242; --mist: #536860;
  --parchment: #FAF8F3; --parchment2: #F2EDE3; --parchment3: #EDE8DC;
  --display: 'Cormorant Garamond', Georgia, serif;
  --ui: 'Raleway', system-ui, sans-serif;
  --sign: 'Sacramento', 'Cormorant Garamond', cursive;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Each page overrides these four. */
  --ground: var(--parchment); --text: var(--ink); --soft: var(--sage); --accent: var(--gold-deep);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ground); color: var(--text);
  font-family: var(--display); font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
p, h1, h2 { margin: 0; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--text); }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
html { scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }

.mark {
  position: absolute; top: 28px; left: 0; right: 0; text-align: center;
  font-family: 'Great Vibes', cursive; font-size: 30px; line-height: 1; color: var(--text);
  text-decoration: none;
}

/* The opening sentence: alone in the first viewport. */
header.open {
  min-height: 100svh; display: grid; place-items: center; padding: 96px 24px;
  text-align: center; position: relative;
}
header.open h1 {
  font-weight: 300; font-style: italic; letter-spacing: -0.01em;
  font-size: clamp(2.6rem, 7.2vw, 5.6rem); line-height: 1.04; max-width: 13ch; text-wrap: balance;
}
.cue {
  position: absolute; bottom: 32px; left: 50%; width: 1px; height: 44px; translate: -50% 0;
  background: linear-gradient(var(--accent), transparent);
}

/* After the story: the turn, what Palaio is, how they use it, how the gift works. */
.bridge { padding: 18vh 24px 0; text-align: center; }
.how { max-width: 40rem; margin: 0 auto; padding: 18vh 28px 0; }
.say { font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.lede { margin-top: 28px; font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.6; text-wrap: pretty; }
.steps { list-style: none; padding: 0; margin: 40px 0 0; }
.steps li {
  display: grid; grid-template-columns: 3.4rem 1fr; align-items: baseline; padding: 22px 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
.steps li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.num { font-style: italic; font-size: 1.3rem; color: var(--accent); }
.steps p { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.55; text-wrap: pretty; }
.steps strong { font-weight: 400; font-style: italic; }
.aside { margin-top: 28px; max-width: 46ch; font-family: var(--ui); font-size: 14px; line-height: 1.65; color: var(--soft); }

/* The app's own screens, moving sideways as the reader scrolls down.
   Without JS (or with reduced motion) it is a strip you swipe. */
.reel { margin-top: 14vh; }
.reel-track {
  list-style: none; margin: 0; padding: 0 max(28px, calc(50vw - 21rem));
  display: flex; align-items: center; gap: clamp(32px, 4.5vw, 72px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.reel-track::-webkit-scrollbar { display: none; }
.frame { flex: 0 0 auto; width: clamp(210px, 21vw, 280px); scroll-snap-align: center; }
.frame img {
  display: block; width: 100%; height: auto; border-radius: 15% / 7%;
  box-shadow: 0 34px 60px -34px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.18);
}
/* Captions sit above the phones; phones share a bottom edge so captions of
   different lengths don't knock them out of line. */
.frame:not(.chap) { align-self: flex-end; }
.frame .cap { margin-bottom: 22px; font-size: 1.12rem; line-height: 1.5; text-wrap: pretty; display: flex; flex-direction: column; }
.frame .cap .num { display: block; margin-bottom: 4px; }
.frame .cap strong { font-weight: 400; font-style: italic; }
.frame.chap { width: min(27rem, 80vw); }
.frame.chap .say { font-size: clamp(2rem, 3.8vw, 2.9rem); }
html.reel-js .reel-stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
html.reel-js .reel-track { overflow: visible; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }

/* The close: one line, one button, one line of small print. */
.close { padding: 20vh 24px 22vh; text-align: center; }
.turn {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 300; line-height: 1.3;
  max-width: 22ch; margin: 0 auto; text-wrap: balance;
}
.turn em { font-style: italic; }
.give {
  display: inline-block; margin-top: 44px; padding: 17px 34px;
  background: var(--text); color: var(--ground); text-decoration: none;
  font-family: var(--ui); font-weight: 700; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 2px; transition: background .25s var(--ease-out), translate .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.give:hover { background: color-mix(in srgb, var(--text) 86%, var(--accent)); translate: 0 -1px; box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--text) 60%, transparent); }
.give:active { translate: 0 0; box-shadow: none; }
/* The two offers, side by side with a hairline between; stacked on phones. */
.offers {
  display: grid; grid-template-columns: 1fr 1fr; max-width: 46rem; margin: 52px auto 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
.offer { padding: 40px 28px 44px; display: flex; flex-direction: column; align-items: center; }
.offer + .offer { border-left: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.offer-name { margin: 0; font-weight: 400; font-style: italic; font-size: 1.45rem; line-height: 1.3; }
.offer-price { margin-top: 10px; font-weight: 300; font-size: clamp(3rem, 6vw, 3.8rem); line-height: 1; letter-spacing: -0.01em; }
.offer-list { list-style: none; margin: 20px 0 0; padding: 0; flex: 1; font-size: 1.12rem; line-height: 1.45; text-align: center; }
.offer-list li { text-wrap: balance; }
.offer-list li + li { margin-top: 8px; }
.offer-list li::before { content: ''; display: block; width: 14px; height: 1px; margin: 0 auto 8px; background: var(--accent); opacity: .7; }
.offer-list li:first-child::before { display: none; }
.offer .give { margin-top: 28px; }
.give.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 55%, transparent); }
.give.ghost:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
@media (max-width: 640px) {
  .offers { grid-template-columns: 1fr; }
  .offer + .offer { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
}

.fine {
  margin: 20px auto 0; max-width: 34ch; font-family: var(--ui); font-size: 13px; line-height: 1.6;
  color: var(--soft);
}

/* Links to the features and questions pages. */
.gift-more { margin: 14px auto 0; font-family: var(--ui); font-size: 13px; line-height: 1.6; color: var(--soft); }
.gift-more a { color: var(--accent); text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.gift-more a + a::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; margin: 0 12px 3px; }

/* The features and questions pages. */
.sub { max-width: 56rem; margin: 0 auto; padding: clamp(112px, 18vh, 168px) 24px clamp(64px, 12vh, 112px); }
.sub-head { text-align: center; margin-bottom: clamp(40px, 7vh, 64px); }
.sub-eyebrow { margin: 0; font-family: var(--ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.sub-head h1 { margin: 12px 0 0; font-weight: 300; font-size: clamp(2.4rem, 5.4vw, 3.8rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.sub-lede { margin: 16px auto 0; max-width: 34rem; font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.5; color: var(--soft); text-wrap: balance; }
.sub-end { margin-top: clamp(48px, 8vh, 72px); text-align: center; }
.sub-end .give { margin-top: 0; }
.sub-end .gift-more { margin-top: 20px; }

.foot {
  padding: 0 24px 40px; text-align: center; font-family: var(--ui); font-size: 12px; color: var(--soft);
}
.foot a { color: inherit; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.foot a + a::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; margin: 0 12px 3px; }

html.ink-js [data-ink] { opacity: .2; filter: blur(1.6px); transition: opacity 1.6s var(--ease-out), filter 1.6s var(--ease-out); }
html.ink-js [data-ink].inked { opacity: 1; filter: none; }

/* Christmas: real fir sprigs (matching the gift card photos) laid in from the
   outer edges of the window, never on the content. Remove the .holly images
   to take it down after the season. */
html, body { overflow-x: clip; }
body { position: relative; }
.close { position: relative; }
.holly {
  position: absolute; z-index: 0; pointer-events: none; height: auto;
  width: clamp(120px, 11vw, 170px);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.16));
}
.holly.top-l { top: 18px; left: -30px; rotate: 58deg; }
.holly.top-r { top: 54svh; right: -40px; rotate: -64deg; width: clamp(110px, 10vw, 150px); }
.holly.end-l { top: 22%; left: -38px; rotate: 72deg; width: clamp(110px, 10vw, 150px); }
.holly.end-r { top: 50%; right: -34px; rotate: -52deg; }
@media (max-width: 760px) {
  .holly { width: 84px; }
  .holly.top-l { top: 34px; left: -26px; }
  .holly.top-r { right: -34px; width: 74px; }
  .holly.end-l, .holly.end-r { display: none; }
}

/* Signatures */
.sig { font-family: var(--sign); font-size: 2.6rem; line-height: 1; color: var(--text); margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}