/* Veloura v3: "Some flowers are meant to stay."
   One idea, carried through: a camera that comes down out of the air onto her linen table. Everything that moves is a
   transform or an opacity on a flat picture of her real work, so it runs smoothly on any phone; the only drawing is the
   linen (one pattern fill) and the resin (one small canvas, only while it pours). */

:root {
  --paper: #FAF9F6;        /* the page: Porcelain, the gallery white she chose for the site (14 Oct) */
  --paper-2: #F0EFEB;      /* a quiet band */
  --card: #FFFFFF;         /* lifted paper: cards, tags */
  --ink: #2B211B;          /* espresso */
  --ink-2: #4E443D;
  --muted: #70675F;        /* 5.3:1 on the page */
  --line: rgba(43, 33, 27, .14);
  --line-2: rgba(43, 33, 27, .26);
  --linen: #E4DBD0;        /* her linen, measured from the coaster photo */
  --rose: #9A3F45;         /* pressed rose */
  --sage: #6F7A4E;
  --marigold: #D9822B;
  --gold: #C8A15E;
  --night: #15110E;
  --night-2: #201A15;
  --ivory: #F4EDE2;

  --display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --body: "Jost", "Futura", "Avenir Next", "Helvetica Neue", sans-serif;
  --script: "Great Vibes", "Snell Roundhand", cursive;

  --gutter: clamp(18px, 4.4vw, 72px);
  --max: 1360px;
  --head-h: 76px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --U: 40px;               /* the world's unit: 1 cm, before the camera scales it */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* the page only ever moves up and down: nothing may widen it, and a double tap never zooms (pinching still does) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; overflow-x: hidden; touch-action: manipulation; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 300 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }   /* clip, never hidden: that would make the body a scroller and unpin the stages */
@media (pointer: coarse) { html, body { overscroll-behavior-x: none; } }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: #EBD3CF; color: var(--ink); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 4px; }
input, textarea { caret-color: var(--rose); accent-color: var(--rose); }
a { text-underline-offset: .2em; text-decoration-thickness: 1px; }
html { scrollbar-color: rgba(43, 33, 27, .28) transparent; }
.vh, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: 30px; text-decoration: none; }
[hidden] { display: none !important; }
em { font-style: italic; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* the wordmark, drawn from the logo file in whatever colour the text is */
.wordmark { display: block; aspect-ratio: 536.3 / 61.8; background: currentColor;
  -webkit-mask: url(../../logo/veloura-wordmark-espresso.svg) center / contain no-repeat; mask: url(../../logo/veloura-wordmark-espresso.svg) center / contain no-repeat; }

.lede { margin: 0; max-width: 34rem; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: var(--ink-2); }
.sec-title { margin: 0; font: 300 clamp(44px, 6.4vw, 96px)/.94 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.sec-title em { font-weight: 300; color: var(--ink-2); }

/* ---------- buttons ---------- */
.pill { --bg: transparent; --fg: var(--ink); --bd: var(--line-2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd); font: 400 15px/1 var(--body); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .5s var(--ease); white-space: nowrap; overflow: hidden; isolation: isolate; }
.pill--ink { --bg: var(--ink); --fg: var(--paper); --bd: var(--ink); }
.pill--paper { --bg: var(--ivory); --fg: var(--ink); --bd: var(--ivory); }
.pill--line { --bd: var(--line-2); }
.pill--ghost { --fg: var(--ivory); --bd: rgba(244, 237, 226, .3); }
/* a fill that rises from where the pointer came in */
.pill::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--rose); transform: translateY(101%); transition: transform .5s var(--ease); }
.pill--line::before { background: var(--ink); }
.pill--ghost::before, .pill--paper::before { background: #fff; }
@media (hover: hover) {
  .pill:hover::before { transform: none; }
  .pill--line:hover { --fg: var(--paper); }
}
.pill.is-in { --bg: var(--sage); --bd: var(--sage); }

/* ---------- the header ---------- */
.head { position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: var(--head-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding: 0 var(--gutter); color: var(--ink); transition: transform .6s var(--ease), color .4s; }
.head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(250, 249, 246, .78); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .4s; }
.head.is-solid::before { opacity: 1; }
.head.is-hidden { transform: translateY(-100%); }
.head.is-dark { color: var(--ivory); }
.head.is-dark::before { background: rgba(21, 17, 14, .7); border-color: rgba(244, 237, 226, .1); }
.head__nav { display: flex; align-items: center; gap: 30px; }
.head__nav a, .head__link { position: relative; font: 400 14px/1 var(--body); letter-spacing: .04em; text-decoration: none; padding: 10px 0; }
.head__nav a::after, .head__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.head__nav a:hover::after, .head__link:hover::after { transform: scaleX(1); transform-origin: left; }
.head__brand { display: block; width: clamp(128px, 11vw, 168px); color: inherit; }
.head__end { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.head__bag { width: 44px; height: 44px; border-radius: 50%; --vc-ring: var(--paper); }
.head.is-dark .head__bag { --vc-ring: var(--night); }
.head__order { min-height: 42px; padding: 0 18px; font-size: 14px; }
.head.is-dark .head__order { --bg: var(--ivory); --fg: var(--ink); --bd: var(--ivory); }
.head__menu { display: none; width: 44px; height: 44px; margin-left: -10px; border: 0; background: none; cursor: pointer; place-items: center; }
.head__menu-lines { display: grid; gap: 6px; width: 20px; }
.head__menu-lines i { display: block; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.menu-open .head__menu-lines i:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-open .head__menu-lines i:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 90; display: grid; align-content: space-between; padding: calc(var(--head-h) + 30px) var(--gutter) 34px; background: var(--paper); }
.menu__links { display: grid; gap: 4px; }
.menu__links a { display: flex; align-items: baseline; gap: 16px; padding: 6px 0; font: 300 clamp(34px, 9vw, 54px)/1.05 var(--display); text-decoration: none; letter-spacing: -.01em;
  opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.menu.on .menu__links a { opacity: 1; transform: none; }
.menu.on .menu__links a:nth-child(2) { transition-delay: .04s; } .menu.on .menu__links a:nth-child(3) { transition-delay: .08s; }
.menu.on .menu__links a:nth-child(4) { transition-delay: .12s; } .menu.on .menu__links a:nth-child(5) { transition-delay: .16s; }
.menu.on .menu__links a:nth-child(6) { transition-delay: .2s; } .menu.on .menu__links a:nth-child(7) { transition-delay: .24s; } .menu.on .menu__links a:nth-child(8) { transition-delay: .28s; }
.menu__foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; margin: 0; }
.menu__tag { font: 400 26px/1 var(--script); color: var(--ink-2); }

/* =====================================================================
   THE FILM
   ===================================================================== */
.film { position: relative; height: var(--film-h, 760vh); }
.stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--paper); contain: strict; }
.linen { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.world { position: absolute; z-index: 1; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; isolation: isolate; }
.world > * { position: absolute; }

/* her album: a 30 × 19.7 cm spread, photographed from above. The right half lies still; the left half (front board and
   page) is the leaf that closes over it, turning about the spine at x = 0. Sizes are cm × the world unit. */
.book { left: 0; top: calc(var(--U) * -9.84); width: calc(var(--U) * 15.05); height: calc(var(--U) * 19.68); }
.book img { width: 100%; height: 100%; max-width: none; filter: drop-shadow(calc(var(--U) * .25) calc(var(--U) * .45) calc(var(--U) * .5) rgba(50, 36, 22, .35)); }
.book__leaf { left: calc(var(--U) * -14.95); top: calc(var(--U) * -9.84); width: calc(var(--U) * 14.95); height: calc(var(--U) * 19.68); transform-origin: 100% 50%; transform-style: preserve-3d; }
.leaf__front, .leaf__back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.leaf__front img, .leaf__back img { width: 100%; height: 100%; max-width: none; }   /* no filter here: Safari shows a filtered face from behind */
.book__lsh { left: calc(var(--U) * -14.8); top: calc(var(--U) * -9.7); width: calc(var(--U) * 14.8); height: calc(var(--U) * 19.4); border-radius: calc(var(--U) * .3);
  box-shadow: calc(var(--U) * .25) calc(var(--U) * .45) calc(var(--U) * .6) rgba(50, 36, 22, .34); pointer-events: none; }
.leaf__back { transform: rotateY(180deg); }
.leaf__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40, 30, 20, .45), rgba(40, 30, 20, 0) 85%); opacity: 0; pointer-events: none; }

/* the mould: white platinum silicone, a 0.55 cm rounded lip round a polished 13 cm cavity */
.mould { left: calc(var(--U) * -7.05); top: calc(var(--U) * -7.05); width: calc(var(--U) * 14.1); height: calc(var(--U) * 14.1); border-radius: 50%; opacity: 0;
  background: linear-gradient(140deg, #FCFBF8, #E9E5DE);
  box-shadow: inset calc(var(--U) * .05) calc(var(--U) * .06) calc(var(--U) * .06) rgba(255, 255, 255, .95), inset calc(var(--U) * -.08) calc(var(--U) * -.1) calc(var(--U) * .16) rgba(150, 136, 118, .35),
    calc(var(--U) * .14) calc(var(--U) * .3) calc(var(--U) * .7) rgba(70, 52, 34, .24), calc(var(--U) * .03) calc(var(--U) * .06) calc(var(--U) * .1) rgba(70, 52, 34, .2); }
.mould__cavity { position: absolute; inset: calc(var(--U) * .55); border-radius: 50%;
  background: radial-gradient(ellipse 60% 34% at 32% 26%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%), linear-gradient(150deg, #F8F6F1 10%, #ECE8E1 90%);
  box-shadow: inset calc(var(--U) * .2) calc(var(--U) * .28) calc(var(--U) * .42) rgba(90, 70, 50, .22), inset calc(var(--U) * -.05) calc(var(--U) * -.05) calc(var(--U) * .08) rgba(255, 255, 255, .9); }

.sprig { left: 0; top: 0; transform-origin: 50% 50%; z-index: 5; }
.sprig img { position: absolute; left: 0; top: 0; max-width: none; will-change: transform; }
.sprig__shadow { opacity: .4; }
.pour { left: calc(var(--U) * -7); top: calc(var(--U) * -7); width: calc(var(--U) * 14); height: calc(var(--U) * 14); z-index: 7; pointer-events: none; }
.photo { z-index: 8; max-width: none; opacity: 0; will-change: transform, opacity; pointer-events: none; }
.glint { z-index: 9; left: calc(var(--U) * -6.5); top: calc(var(--U) * -6.5); width: calc(var(--U) * 13); height: calc(var(--U) * 13); border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0; }
.glint::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; transform: translateX(var(--gx, -120%)) rotate(18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42) 45%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.42) 55%, rgba(255,255,255,0)); }

/* her table */
.table { left: 0; top: 0; margin: 0; padding: 0; list-style: none; z-index: 4; }
.piece { position: absolute; left: 0; top: 0; }
.piece__btn { position: absolute; inset: 0; display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12%; -webkit-tap-highlight-color: transparent; }
.piece__btn:focus-visible { outline: 3px solid var(--rose); outline-offset: calc(var(--U) * .3); }
.piece img { position: absolute; max-width: none; pointer-events: none; will-change: transform; transition: transform .7s var(--ease), opacity .7s var(--ease); }
.piece__sh { opacity: .5; }
.piece.is-up .piece__img { transform: translate3d(0, calc(var(--U) * -.35), 0) scale(1.035); }
.piece.is-up .piece__sh { transform: translate3d(calc(var(--U) * .5), calc(var(--U) * .7), 0) scale(1.05); opacity: .42; }
.piece.is-gone .piece__img { opacity: .42; filter: grayscale(.6); }
.piece--round .piece__btn, .piece--agate .piece__btn { border-radius: 50%; }

.table-note { position: absolute; left: 0; top: 0; padding: calc(var(--U) * .8) calc(var(--U) * 1.1) calc(var(--U) * .9); background: #FFFDF8; color: var(--ink-2); border-radius: 2px;
  font: 400 calc(var(--U) * 1.2)/1.1 var(--script); white-space: nowrap; transform-origin: 50% 50%;
  box-shadow: 0 calc(var(--U) * .06) calc(var(--U) * .1) rgba(60, 45, 30, .18), 0 calc(var(--U) * .3) calc(var(--U) * .6) rgba(60, 45, 30, .12); }
.table-note b { display: block; font: 500 calc(var(--U) * .4)/1.2 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: calc(var(--U) * .2); }

/* the rope of resin, poured from above the frame: wide where it's near the camera, narrowing to where it lands (screen
   space; its taper is a fixed clip, so moving it never repaints) */
.stream { position: absolute; left: 0; top: 0; width: 40px; height: 100px; transform-origin: 50% 100%; opacity: 0; pointer-events: none; z-index: 3;
  clip-path: polygon(0 0, 100% 0, 69% 100%, 31% 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px); mask-image: linear-gradient(180deg, transparent 0, #000 70px);
  background: linear-gradient(90deg, rgba(120, 96, 70, .08) 0, rgba(120, 96, 70, .34) 7%, rgba(255, 252, 245, .62) 17%, rgba(255, 255, 255, .98) 27%, rgba(248, 242, 232, .55) 40%,
    rgba(214, 200, 180, .3) 58%, rgba(255, 255, 255, .7) 74%, rgba(255, 255, 255, .92) 80%, rgba(120, 96, 70, .3) 93%, rgba(120, 96, 70, .06) 100%); }
.stream i { position: absolute; left: 0; right: 0; top: 0; height: 300%; opacity: .9;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 9%, rgba(255, 255, 255, .55) 11%, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, .35) 28%, rgba(255, 255, 255, 0) 31%);
  animation: run 1.4s linear infinite; }
@keyframes run { from { transform: translateY(-33.33%); } to { transform: translateY(0); } }

/* ---------- the opening ---------- */
.field { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.fl { position: absolute; left: 0; top: 0; will-change: transform; }
.fl img { position: absolute; left: 0; top: 0; max-width: none; }
.fl .fl__sh { opacity: .34; }
.field--front { z-index: 6; }

.hero { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero > * { pointer-events: auto; }
.hero__title { position: absolute; left: var(--gutter); top: calc(var(--head-h) + 5vh); margin: 0; font: 300 clamp(58px, 11.4vw, 210px)/.86 var(--display); letter-spacing: -.035em; color: var(--ink); pointer-events: none; }
.hero__title em { font-weight: 300; }
.ln { display: block; overflow: hidden; padding: .08em .12em .16em; margin: -.08em -.12em -.16em; }
.ln__in { display: inline-block; transform: translate3d(0, 110%, 0); will-change: transform; }
.ln--2 { padding-left: calc(.12em + 1.15em); }
.ln--3 { padding-left: calc(.12em + .35em); }
.is-in .ln__in { transform: none; transition: transform 1.5s var(--ease); }
.is-in .ln--2 .ln__in { transition-delay: .1s; } .is-in .ln--3 .ln__in { transition-delay: .2s; }
.hero__foot { position: absolute; left: var(--gutter); bottom: calc(max(34px, 5vh) + var(--hb, 0px)); display: grid; gap: 26px; max-width: 30rem; }
.hero__lede { margin: 0; font-size: clamp(16px, 1.2vw, 18px); color: var(--ink-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__foot > * { opacity: 0; transform: translateY(18px); }
.is-in .hero__foot > * { opacity: 1; transform: none; transition: opacity 1.2s var(--ease) .55s, transform 1.2s var(--ease) .55s; }
.is-in .hero__foot > *:last-child { transition-delay: .68s; }

/* ---------- chapters ---------- */
.chapters { position: absolute; z-index: 10; left: var(--gutter); top: 50%; width: min(34vw, 470px); margin: 0; padding: 0; list-style: none; pointer-events: none; }
.ch { position: absolute; left: 0; top: 0; transform: translateY(-50%); opacity: 0; visibility: hidden; }
.ch.on { visibility: visible; }
.ch__n { display: block; margin-bottom: 14px; font: 500 12px/1 var(--body); letter-spacing: .3em; color: var(--muted); }
.ch__t { margin: 0; font: 300 clamp(52px, 6.4vw, 116px)/.9 var(--display); letter-spacing: -.03em; }
.ch__t em { color: var(--ink-2); }
.ch__s { margin: 18px 0 0; font-size: clamp(15px, 1.15vw, 18px); color: var(--ink-2); }
/* words that rise in, per word, with masks that reach past the letters */
.ch .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .08em .18em; margin: -.1em -.08em -.18em; }
.ch .w > span { display: inline-block; transform: translate3d(0, var(--rise, 110%), 0); }

/* the piece the film made */
.kept { position: absolute; z-index: 11; left: var(--gutter); top: calc(50% + clamp(64px, 9vw, 150px)); width: min(380px, 34vw); padding: 22px 24px 22px; background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .7); border-radius: 18px; box-shadow: 0 24px 60px -30px rgba(50, 36, 24, .35);
  opacity: 0; visibility: hidden; transform: translateY(20px); }
.kept.on { visibility: visible; }
.kept__name { margin: 0; font: 400 30px/1.05 var(--display); letter-spacing: -.01em; }
.kept__meta { margin: 6px 0 18px; font-size: 14px; color: var(--muted); }
.kept__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kept__price { font: 400 34px/1 var(--display); font-variant-numeric: lining-nums; }
.kept__add { min-height: 46px; }

/* ---------- the table's words ---------- */
.tableui { position: absolute; z-index: 10; left: var(--gutter); top: calc(var(--head-h) + 2.5vh); max-width: 520px; opacity: 0; visibility: hidden; pointer-events: none; }
.tableui.on { visibility: visible; }
.tableui__t { margin: 0; font: 300 clamp(44px, 5vw, 86px)/.92 var(--display); letter-spacing: -.03em; }
.tableui__t em { color: var(--ink-2); }
.tableui__s { margin: 12px 0 0; font-size: 15px; color: var(--ink-2); max-width: 30rem; }
.tableui__how { color: var(--muted); }
.tag { position: absolute; z-index: 12; left: 0; top: 0; display: grid; gap: 2px; padding: 12px 16px 13px; min-width: 170px; background: var(--card); border-radius: 12px; pointer-events: none;
  box-shadow: 0 18px 40px -18px rgba(50, 36, 24, .45), 0 0 0 1px rgba(43, 33, 27, .06); opacity: 0; transform: translate3d(-9999px, 0, 0); transition: opacity .3s var(--ease); }
.tag.on { opacity: 1; }
/* touch: nothing lifts under a finger, so say that a piece can be held (shown once the table's title has gone) */
.tablehint { position: absolute; z-index: 12; left: 50%; bottom: calc(20px + var(--hb, 0px)); display: flex; align-items: center; gap: 9px; margin: 0; padding: 11px 17px 11px 14px;
  background: rgba(255, 255, 255, .94); border-radius: 999px; box-shadow: 0 12px 30px -16px rgba(50, 36, 24, .5), 0 0 0 1px rgba(43, 33, 27, .07);
  font: 500 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); transform: translateX(-50%); opacity: 0; visibility: hidden; pointer-events: none; }
.tablehint i { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); }
.fine .tablehint { display: none; }
.tag__name { font: 400 20px/1.1 var(--display); }
.tag__meta { font-size: 12.5px; color: var(--muted); }
.tag__price { margin-top: 6px; font: 400 22px/1 var(--display); font-variant-numeric: lining-nums; color: var(--ink); }

/* ---------- the rail and the cue ---------- */
.rail { position: absolute; z-index: 12; right: calc(var(--gutter) - 12px); top: 50%; transform: translateY(-50%); display: grid; gap: 4px; }
.rail a { position: relative; display: grid; place-items: center; width: 28px; height: 28px; text-decoration: none; }
.rail i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink); opacity: .45; transition: all .4s var(--ease); }
.rail a.on i { background: var(--ink); opacity: 1; transform: scale(1.3); }
.rail a.done i { background: var(--ink); opacity: .45; }
.rail span { position: absolute; right: 34px; font: 500 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateX(6px); transition: all .4s var(--ease); pointer-events: none; }
.rail a:hover span, .rail a.on span { opacity: .8; transform: none; }
.rail a:first-child span { display: none; }
.cue { position: absolute; z-index: 5; left: 50%; bottom: 28px; margin: 0; display: grid; justify-items: center; gap: 10px; transform: translateX(-50%); font: 500 11px/1 var(--body); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2); }
.cue i { width: 1px; height: 46px; background: linear-gradient(var(--ink), transparent); transform-origin: top; animation: cue 2.2s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.anchor { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* =====================================================================
   MADE FOR YOU
   ===================================================================== */
.made { position: relative; padding: clamp(110px, 14vw, 200px) 0 clamp(90px, 10vw, 150px); background: var(--paper); }
.sec-head { margin-bottom: clamp(48px, 6vw, 90px); }
.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.row { border-bottom: 1px solid var(--line); }
.row a { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 150px; align-items: baseline; gap: 20px; padding: clamp(22px, 2.4vw, 34px) 0; text-decoration: none; }
.row__name { font: 300 clamp(36px, 4.6vw, 76px)/1 var(--display); letter-spacing: -.02em; transition: transform .7s var(--ease), color .5s; }
.row__name em { color: var(--muted); }
.row__meta { font-size: 14.5px; color: var(--muted); transition: color .5s; }
.row__price { justify-self: end; font: 400 clamp(22px, 2vw, 30px)/1 var(--display); font-variant-numeric: lining-nums; white-space: nowrap; }
.row__price small { margin-right: 6px; font: 400 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.row__thumb { display: none; }
.row a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .8s var(--ease); }
@media (hover: hover) {
  .rows:hover .row__name { color: var(--muted); }
  .row a:hover .row__name { color: var(--ink); transform: translateX(18px); font-style: italic; }
  .row a:hover .row__meta { color: var(--ink-2); }
  .row a:hover::after { transform: scaleX(1); transform-origin: left; }
}
.reveal-img { position: fixed; z-index: 30; left: 0; top: 0; width: clamp(240px, 22vw, 340px); aspect-ratio: 4 / 5; pointer-events: none; transform: translate3d(-9999px, 0, 0); }
.reveal-img__in { width: 100%; height: 100%; border-radius: 14px; overflow: hidden; clip-path: inset(50% 50% 50% 50% round 14px); transition: clip-path .6s var(--ease);
  box-shadow: 0 30px 60px -30px rgba(40, 28, 18, .5); }
.reveal-img.on .reveal-img__in { clip-path: inset(0 0 0 0 round 14px); }
.reveal-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform .9s var(--ease); }
.reveal-img.on img { transform: scale(1); }

/* =====================================================================
   YOUR WORDS: a 30 cm tray lying on her linen
   ===================================================================== */
.words { --muted: #625A52; position: relative; padding: clamp(90px, 10vw, 160px) 0; background: var(--linen) url(../img/linen.webp) 0 0 / 120px 120px; overflow-x: clip; }   /* the rim's clear margin reaches past a phone's edges */
.words::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 70% at 72% 50%, rgba(255, 250, 240, .35), rgba(255, 250, 240, 0) 70%), linear-gradient(90deg, rgba(250, 249, 246, .55), rgba(250, 249, 246, 0) 46%); }
.words__grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "head table" "copy table"; column-gap: clamp(30px, 5vw, 90px); align-items: center; }
.words__head { grid-area: head; align-self: end; }
.words__copy { grid-area: copy; align-self: start; }
.words__table { grid-area: table; }
.words__head .lede { margin: 22px 0 34px; }
.field-label { display: block; margin: 0 0 10px; font: 500 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.words__input input { width: 100%; padding: 6px 0 12px; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: var(--ink); font: 300 clamp(30px, 3vw, 44px)/1.1 var(--display); border-radius: 0; outline: none; transition: border-color .4s; }
.words__input input:focus { border-color: var(--ink); }
.words__ideas { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 30px; }
.words__ideas button, .mixes button { padding: 7px 13px; border: 1px solid var(--line-2); border-radius: 30px; background: rgba(255, 255, 255, .5); font-size: 13px; color: var(--ink-2); cursor: pointer; transition: border-color .3s, background .3s, color .3s; }
.words__ideas button:hover, .mixes button:hover { border-color: var(--ink); background: var(--card); }
.words__opts { display: flex; flex-wrap: wrap; gap: 26px 36px; margin-bottom: 34px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 40px; background: rgba(43, 33, 27, .07); }
.seg button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 30px; background: transparent; cursor: pointer; transition: background .35s var(--ease), color .35s; }
.seg button[aria-pressed="true"] { background: var(--card); box-shadow: 0 2px 10px -4px rgba(40, 28, 18, .3); }
.f-script { font: 400 21px/1 var(--script) !important; }
.f-classic { font: italic 400 19px/1 var(--display) !important; }
.f-simple { font: 500 12px/1 var(--body) !important; letter-spacing: .16em !important; text-transform: uppercase; }
.mixes { display: flex; flex-wrap: wrap; gap: 8px; }
.mixes button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.mixes button i { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: 0 0 0 1px rgba(43, 33, 27, .12); }
.mixes button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.words__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding-top: 26px; border-top: 1px solid var(--line-2); }
.words__price { display: grid; gap: 4px; margin: 0; font-size: 13.5px; color: var(--ink-2); }
.words__price b { font: 400 30px/1 var(--display); color: var(--ink); font-variant-numeric: lining-nums; }
.words__table { position: relative; margin: 0; min-width: 0; }
.words__note { position: relative; z-index: 1; margin: 6px auto 0; max-width: 30rem; text-align: center; font-size: 13px; color: var(--muted); }

/* the tray: 30 cm across, drawn in cm (--k is px per cm, set by words.js) */
.tray { --k: 16px; position: relative; width: calc(var(--k) * 38); height: calc(var(--k) * 38); margin: 0 auto; max-width: 100%; }
.tray > * { position: absolute; left: 50%; top: 50%; }
.tray__sh { width: calc(var(--k) * 30); height: calc(var(--k) * 30); transform: translate(-48.8%, -47.6%); border-radius: 50%; box-shadow: 0 calc(var(--k) * .3) calc(var(--k) * 1.2) rgba(70, 52, 34, .12); }
.tray__ring { width: calc(var(--k) * 37.38); height: calc(var(--k) * 37.38); max-width: none; transform: translate(-50%, -50%); pointer-events: none; }
.tray__flowers { width: 0; height: 0; }
.tf { position: absolute; left: 0; top: 0; transition: transform .9s var(--ease), opacity .5s var(--ease); will-change: transform; }
.tf img { position: absolute; left: 0; top: 0; max-width: none; }
.tf .tf__sh { opacity: .28; transform: translate(calc(var(--k) * .12), calc(var(--k) * .2)); }
.tf.is-up { opacity: 0; transition: transform .45s var(--ease-io), opacity .4s var(--ease-io); }
.tray__words { width: calc(var(--k) * 26); transform: translate(-50%, calc(-50% - var(--k) * 8.25)); display: grid; place-items: center; pointer-events: none; }
.inresin { display: inline-block; width: max-content; color: #2E221B; opacity: .9; line-height: 1.2; white-space: nowrap; transform: scale(var(--fit, 1)); transform-origin: 50% 50%; transition: transform .4s var(--ease); }
.inresin.script { font: 400 calc(var(--k) * 3.19) var(--script); }
.inresin.classic { font: italic 400 calc(var(--k) * 2.55) var(--display); }
.inresin.simple { font: 500 calc(var(--k) * 1.58) var(--body); letter-spacing: .16em; text-transform: uppercase; }
.inresin .ch-l { display: inline-block; animation: ink .9s var(--ease) both; }
@keyframes ink { from { opacity: 0; filter: blur(calc(var(--k) * .25)); transform: translateY(.08em) scale(1.04); } 40% { opacity: .9; } }
.tray__gloss { width: calc(var(--k) * 30); height: calc(var(--k) * 30); transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; pointer-events: none;
  background: radial-gradient(ellipse 34% 16% at 30% 22%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse 60% 30% at 70% 84%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%); }
.tray__gloss::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%; transform: translateX(-140%) rotate(16deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.38) 45%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.38) 55%, rgba(255,255,255,0)); }
.tray__gloss.seal::after { animation: seal 1.5s var(--ease-io); }
@keyframes seal { to { transform: translateX(420%) rotate(16deg); } }
/* her gold bar handles, 3 cm in from the rim, seen from above */
.tray__handle { width: calc(var(--k) * 1.15); height: calc(var(--k) * 10.5); border-radius: calc(var(--k) * .6);
  background: linear-gradient(90deg, #7A5A22 0, #C9A048 18%, #F7E3A6 38%, #D8B25E 55%, #A47C34 78%, #6E5020 100%);
  box-shadow: calc(var(--k) * .45) calc(var(--k) * .7) calc(var(--k) * .7) rgba(60, 42, 20, .35), inset 0 calc(var(--k) * .2) calc(var(--k) * .2) rgba(255, 245, 210, .5); }
.tray__handle::before, .tray__handle::after { content: ""; position: absolute; left: 50%; width: calc(var(--k) * 1.5); height: calc(var(--k) * 1.5); margin-left: calc(var(--k) * -.75); border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #FBEBB8, #C99C45 55%, #7C5A22); box-shadow: calc(var(--k) * .2) calc(var(--k) * .3) calc(var(--k) * .3) rgba(60, 42, 20, .3); }
.tray__handle::before { top: calc(var(--k) * -.3); } .tray__handle::after { bottom: calc(var(--k) * -.3); }
.tray__handle--l { transform: translate(calc(-50% - var(--k) * 12.2), -50%); }
.tray__handle--r { transform: translate(calc(-50% + var(--k) * 12.2), -50%); }

/* =====================================================================
   NOËL: a walnut table at night, one ornament wrapped by hand
   ===================================================================== */
.noel { position: relative; height: 560vh; color: var(--ivory); background: #120C08; }
.noel__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; contain: strict; }
.noel__table { position: absolute; inset: -2%; background: #20140D url(../../v2/img/scene/walnut-col-1024.webp) center / 640px; }
/* dark resin (black, forest green): the lamp over the table is turned up a little, so the pieces show their shape */
.noel__table::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease);
  background: radial-gradient(40% 52% at var(--lx, 64%) 50%, rgba(255, 196, 132, .2), rgba(255, 180, 110, .06) 60%, rgba(0, 0, 0, 0) 80%); }
.is-dark-resin .noel__table::before { opacity: 1; }
.noel__table::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(48% 62% at var(--lx, 64%) 52%, rgba(255, 186, 110, .2), rgba(255, 170, 90, .05) 55%, rgba(0, 0, 0, 0) 75%),
    radial-gradient(120% 100% at 64% 50%, rgba(10, 6, 3, .35), rgba(10, 6, 3, .8) 75%), linear-gradient(90deg, rgba(10, 6, 3, .55), rgba(10, 6, 3, 0) 45%); }
.noel__world { position: absolute; left: 0; top: 0; width: 0; height: 0; perspective: 2400px; }
.noel__world > * { position: absolute; }

.gift { left: 0; top: 0; width: 0; height: 0; perspective: 2400px; }
.gift > * { position: absolute; max-width: none; }
/* photographs of a real kraft box, its tissue, lid, gold satin ribbon, bow and tag (_source/gift_images.py, gift_cut.py), in cm */
.gift__box { left: calc(var(--n) * -6); top: calc(var(--n) * -5.9); width: calc(var(--n) * 12); height: calc(var(--n) * 11.79); }
.gift__sh { opacity: .75; pointer-events: none; }
.gift__sh--box { left: calc(var(--n) * (-6 - 12 * .14 + .45)); top: calc(var(--n) * (-5.9 - 11.79 * .1425 + .8)); width: calc(var(--n) * 12 * 1.28); height: calc(var(--n) * 11.79 * 1.285); }
.gift__flap { top: calc(var(--n) * -5.75); width: calc(var(--n) * 6.1); height: calc(var(--n) * 11.5); opacity: 0; }
.gift__flap img { position: absolute; left: 50%; top: 50%; width: calc(var(--n) * 11.5); height: calc(var(--n) * 6.1); max-width: none; transform: translate(-50%, -50%) rotate(90deg); opacity: .93;
  -webkit-backface-visibility: visible; backface-visibility: visible; filter: drop-shadow(0 calc(var(--n) * .12) calc(var(--n) * .3) rgba(60, 40, 20, .35)); }
.gift__flap--r img { transform: translate(-50%, -50%) rotate(-90deg) scaleY(-1); }
.gift__flap--l { left: calc(var(--n) * -11.6); transform-origin: 100% 50%; }
.gift__flap--r { left: calc(var(--n) * 5.5); transform-origin: 0 50%; }
.gift__lid { left: calc(var(--n) * -6.2); top: calc(var(--n) * -6.02); width: calc(var(--n) * 12.4); height: calc(var(--n) * 12.03); opacity: 0; }
.gift__sh--lid { left: calc(var(--n) * (-6.2 - 12.4 * .14 + .5)); top: calc(var(--n) * (-6.02 - 12.03 * .1443 + .9)); width: calc(var(--n) * 12.4 * 1.28); height: calc(var(--n) * 12.03 * 1.289); opacity: 0; }
.gift__rib { left: calc(var(--n) * -6.12); top: calc(var(--n) * -.8); width: calc(var(--n) * 12.24); height: calc(var(--n) * 1.6); clip-path: inset(0 100% 0 0); filter: drop-shadow(0 calc(var(--n) * .08) calc(var(--n) * .12) rgba(50, 32, 12, .45)); }
.gift__rib img { width: 100%; height: 100%; max-width: none; }
.gift__rib--v { transform: rotate(90deg); }
.gift__bow { left: calc(var(--n) * -4.6); top: calc(var(--n) * -3.4); width: calc(var(--n) * 9.2); height: calc(var(--n) * 7.74); opacity: 0; transform-origin: 50% 45%; }
.gift__sh--bow { left: calc(var(--n) * (-4.6 - 9.2 * .14 + .35)); top: calc(var(--n) * (-3.4 - 7.74 * .1664 + .6)); width: calc(var(--n) * 9.2 * 1.28); height: calc(var(--n) * 7.74 * 1.333); opacity: 0; transform-origin: 50% 45%; }
.gift__tag { left: calc(var(--n) * 1.4); top: calc(var(--n) * .6); width: calc(var(--n) * 3.7); height: calc(var(--n) * 8.26); opacity: 0; transform-origin: 30% 4%; }
.gift__tag > * { position: absolute; }
.gift__card { left: 0; top: 0; width: 100%; height: 100%; max-width: none; }
.gift__tag .gift__sh { left: calc(var(--n) * (-3.7 * .309 + .25)); top: calc(var(--n) * (-8.26 * .1385 + .4)); width: calc(var(--n) * 3.7 * 1.618); height: calc(var(--n) * 8.26 * 1.277); opacity: .7; }
.gift__for { left: 0; right: 0; top: 50%; text-align: center; font: 500 calc(var(--n) * .3)/1 var(--body); letter-spacing: .26em; text-transform: uppercase; color: #8A7660; }
.gift__name { left: -10%; right: -10%; top: 57%; text-align: center; font: 400 calc(var(--n) * .95)/1.2 var(--script); color: #3A2A1F; white-space: nowrap; clip-path: inset(-30% calc(100% - var(--w, 0%)) -40% -10%); }

/* the tree: v1's room and hanging points, every ornament at its real size */
.noel__room { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; }
.noel__roomimg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.noel__room::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #120C08 0, rgba(18, 12, 8, .85) 6%, rgba(18, 12, 8, 0) 32%), linear-gradient(0deg, rgba(18, 12, 8, .6), rgba(18, 12, 8, 0) 18%); }
.torn { position: absolute; z-index: 1; transform-origin: 50% 0; opacity: 0; }
.torn img { display: block; width: 100%; height: auto; transform-origin: 50% 0; }
.torn.land img { animation: land 1.7s cubic-bezier(.3, .7, .35, 1); }
.torn.nudge img { animation: nudge 1.7s cubic-bezier(.25, .6, .3, 1); }
@keyframes land { 0% { transform: rotate(-11deg); } 24% { transform: rotate(6deg); } 48% { transform: rotate(-3deg); } 72% { transform: rotate(1.2deg); } 100% { transform: none; } }
@keyframes nudge { 0% { transform: rotate(0); } 16% { transform: rotate(var(--kick)); } 38% { transform: rotate(calc(var(--kick) * -.55)); } 58% { transform: rotate(calc(var(--kick) * .3)); } 78% { transform: rotate(calc(var(--kick) * -.12)); } 100% { transform: none; } }
.tw { position: absolute; z-index: 0; width: 1.6%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 246, 222, .9), rgba(255, 214, 140, .28) 45%, transparent); animation: twinkle var(--dur, 2.6s) ease-in-out var(--dl, 0s) infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }
.noel__treetag { position: absolute; z-index: 3; padding: 6px 11px; border-radius: 999px; background: rgba(20, 14, 10, .85); color: #F3EADB; font-size: 12px; letter-spacing: .06em; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 8px)); pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
.noel__treetag.on { opacity: 1; }
.noel__treeline { position: absolute; z-index: 5; right: var(--gutter); bottom: 26px; margin: 0; font: italic 400 clamp(16px, 1.3vw, 20px)/1.3 var(--display); color: rgba(244, 237, 226, .7); opacity: 0; }

.noel__set { left: 0; top: 0; margin: 0; padding: 0; list-style: none; }
.orn { position: absolute; left: 0; top: 0; }
.orn__in { position: absolute; left: 0; top: 0; transition: opacity .38s var(--ease), transform .5s var(--ease); }
.orn.is-out .orn__in { opacity: 0; transform: translate3d(0, calc(var(--n) * -1.2), 0) scale(1.06); }
.orn.is-pre .orn__in { opacity: 0; transform: translate3d(0, calc(var(--n) * -1.6), 0) scale(1.08); transition: none; }
.orn__hit { position: absolute; border-radius: 30%; }
.orn__img.is-swap { opacity: 0; }   /* a new colour: out, and in again in it */
.orn img { position: absolute; max-width: none; pointer-events: none; transition: transform .6s var(--ease), opacity .3s var(--ease); filter: drop-shadow(calc(var(--n) * .3) calc(var(--n) * .45) calc(var(--n) * .35) rgba(0, 0, 0, .62)); }
.fine .orn:hover .orn__img { transform: translate3d(0, calc(var(--n) * -.25), 0) scale(1.03); }
.orn__label { position: absolute; left: 0; white-space: nowrap; transform: translateX(-50%); font: 400 12.5px/1.3 var(--body); letter-spacing: .05em; text-align: center; color: rgba(244, 237, 226, .7); opacity: 0; transition: opacity .4s; pointer-events: none; }
.orn__label b { display: block; font: 400 17px/1.1 var(--display); letter-spacing: 0; color: var(--ivory); }
.fine .orn:hover .orn__label { opacity: 1; }
.orn.is-wrapped .orn__label { opacity: 0 !important; }

/* the words keep to the room under the header, centred in it; on a short screen the long lede steps aside */
.noel__copy { position: absolute; z-index: 5; left: var(--gutter); top: calc(var(--head-h) + 10px); bottom: 20px; width: min(29rem, 30vw);
  display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 861px) and (max-height: 820px) { .noel__lede { display: none; } .noel__pick { margin-top: 20px; } }
.noel__title { margin: 0; font: 300 clamp(40px, 3.9vw, 70px)/.98 var(--display); letter-spacing: -.02em; }
.noel__lede { margin: 22px 0 24px; color: rgba(244, 237, 226, .74); }
.noel__sets { display: flex; flex-wrap: wrap; gap: 6px; }
.nset { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid rgba(244, 237, 226, .24); border-radius: 30px;
  background: transparent; color: rgba(244, 237, 226, .82); font: 400 13.5px/1 var(--body); cursor: pointer; transition: background .35s var(--ease), color .35s, border-color .35s; }
.nset b { font-weight: 400; }
.nset span { font-size: 11px; color: var(--gold); }
.nset__short { display: none; }
.nset:hover { border-color: rgba(244, 237, 226, .6); }
.nset[aria-pressed="true"] { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.nset[aria-pressed="true"] span { color: #8A6A2E; }
.noel__setnote { margin: 12px 0 14px; font-size: 13px; color: rgba(244, 237, 226, .6); }
.noel__setnote b { font-weight: 400; color: var(--ivory); }
.noel__colours { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.ncol { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; box-shadow: 0 0 0 1px rgba(244, 237, 226, .22);
  transition: box-shadow .3s, transform .3s var(--ease); -webkit-tap-highlight-color: transparent; }
.ncol img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.ncol[aria-pressed="true"] { box-shadow: 0 0 0 2px #120C08, 0 0 0 3.5px var(--gold); }
.nset:focus-visible, .ncol:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (hover: hover) { .ncol:hover { transform: scale(1.08); } }
.noel__tip { display: none; margin: 10px 0 0; font: 500 11px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 237, 226, .6); }
.noel .field-label { color: rgba(244, 237, 226, .55); }
.noel__form input { width: 100%; max-width: 20rem; padding: 4px 0 10px; border: 0; border-bottom: 1px solid rgba(244, 237, 226, .3); border-radius: 0; background: none; color: var(--ivory); font: 400 34px/1.1 var(--script); outline: none; }
.noel__form input:focus { border-color: var(--gold); }
.noel__who { display: none; align-items: center; gap: 10px; padding: 2px 0 8px; border: 0; border-bottom: 1px solid rgba(244, 237, 226, .3); background: none; color: var(--ivory); font: 400 28px/1.1 var(--script); cursor: pointer; }
.noel__who svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round; }
.ask { width: min(420px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 22px; background: var(--card); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(20, 12, 6, .6); }
.ask::backdrop { background: rgba(20, 14, 10, .55); }
.ask form { display: grid; gap: 12px; padding: 24px 22px 22px; }
.ask__t { font: 400 26px/1.1 var(--display); }
.ask input { width: 100%; padding: 6px 0 10px; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: none; font: 400 34px/1.2 var(--script); color: var(--ink); outline: none; }
.ask input:focus { border-color: var(--ink); }
.ask__s { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.ask .pill { justify-self: end; }
.noel__cta { display: grid; justify-items: start; gap: 14px; margin-top: 28px; }
.noel__note { font-size: 13px; letter-spacing: .02em; color: rgba(244, 237, 226, .68); max-width: 26rem; }
.noel__note b { font-weight: 400; color: rgba(244, 237, 226, .85); }
.noel__hint { position: absolute; z-index: 5; right: var(--gutter); bottom: 26px; margin: 0; font: 500 11px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: rgba(244, 237, 226, .66); transition: opacity .5s; }

/* =====================================================================
   HOW AN ORDER WORKS: a conversation with her
   ===================================================================== */
.talk { padding: clamp(100px, 12vw, 180px) 0; background: var(--paper); }
.talk__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(30px, 7vw, 120px); align-items: start; }
.talk__head { position: sticky; top: calc(var(--head-h) + 40px); }
.talk__head .lede { margin: 24px 0 36px; }
.talk__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.talk__steps li { position: relative; padding: 9px 0 9px 22px; font-size: 15px; color: var(--muted); transition: color .5s; }
.talk__steps li i { position: absolute; left: -4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line-2); transition: all .5s var(--ease); }
.talk__steps li.on { color: var(--ink); }
.talk__steps li.on i { background: var(--rose); border-color: var(--rose); transform: scale(1.3); }
.talk__steps li.done i { background: var(--ink-2); border-color: var(--ink-2); }
.talk__thread { display: grid; gap: 12px; max-width: 560px; width: 100%; justify-self: end; }
.talk__day { justify-self: center; margin: 18px 0 6px; padding: 6px 14px; border-radius: 30px; background: var(--paper-2); font: 500 11.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.talk__day:first-child { margin-top: 0; }
.msg { position: relative; max-width: 82%; opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.msg.in { opacity: 1; transform: none; }
.msg p { margin: 0; padding: 12px 16px 13px; font-size: 15.5px; line-height: 1.5; }
.msg--you { justify-self: end; transform-origin: 100% 100%; }
.msg--you p { background: var(--ink); color: var(--paper); border-radius: 20px 20px 6px 20px; }
.msg--her { justify-self: start; padding-left: 38px; transform-origin: 0 100%; }
.msg--her p { background: var(--card); color: var(--ink); border-radius: 20px 20px 20px 6px; box-shadow: 0 1px 2px rgba(43, 33, 27, .06); }
.msg--her::before { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 28px; border-radius: 50%; background: #F2EDE3 url(../../logo/veloura-badge-espresso.svg) center / 78% no-repeat; box-shadow: 0 0 0 1px var(--line); }
.msg--photo { max-width: 74%; }
.msg--photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px 18px 0 0; }
.msg--photo p { border-radius: 0 0 20px 6px; }
.msg--tall img { aspect-ratio: 4 / 4.2; object-position: 50% 30%; }
.talk .sec-title { font-size: clamp(40px, 4.8vw, 84px); }
.msg.is-typing { opacity: 1; transform: none; }
.msg.is-typing > p, .msg.is-typing > img { opacity: 0; }
.msg > p, .msg > img { transition: opacity .4s var(--ease); }
.msg__typing { position: absolute; left: 38px; bottom: 0; display: flex; gap: 4px; padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: var(--card); opacity: 0; transition: opacity .25s; pointer-events: none; }
.msg.is-typing .msg__typing { opacity: 1; }
.msg__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dots 1s infinite ease-in-out; }
.msg__typing i:nth-child(2) { animation-delay: .15s; } .msg__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.compose { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.compose__t { margin: 0 0 12px; font: 300 34px/1 var(--display); }
.compose__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.compose__chips button { padding: 8px 13px; border: 1px solid var(--line-2); border-radius: 30px; background: rgba(255, 255, 255, .7); font-size: 13px; color: var(--ink-2); cursor: pointer; transition: border-color .3s, background .3s; }
.compose__chips button:hover { border-color: var(--ink); background: var(--card); }
.compose__row { display: flex; align-items: flex-end; gap: 10px; padding: 6px 6px 6px 18px; border-radius: 28px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 14px 30px -20px rgba(40, 28, 18, .4); }
.compose__row:focus-within { box-shadow: 0 0 0 1px var(--ink), 0 14px 30px -20px rgba(40, 28, 18, .4); }
.compose textarea { flex: 1; min-height: 44px; max-height: 140px; padding: 11px 0; border: 0; background: none; resize: none; font: 300 16px/1.45 var(--body); color: var(--ink); outline: none; }
.compose__send { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); cursor: pointer; transition: transform .4s var(--ease), background .3s; }
.compose__send:hover { background: var(--rose); transform: rotate(-12deg) scale(1.06); }
.compose__send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.compose__note { margin: 10px 0 0 18px; font-size: 12.5px; color: var(--muted); }

/* =====================================================================
   THE FOOT
   ===================================================================== */
.foot { position: relative; overflow: hidden; padding: clamp(100px, 11vw, 170px) 0 0; background: var(--night); color: var(--ivory); }
.foot__tag { margin: 0 0 40px; font: 400 clamp(46px, 7vw, 120px)/1.1 var(--script); color: var(--ivory); }
/* written in, one half after the other (on a phone they are two lines, and the second must not appear first) */
.foot__tag span { display: inline-block; clip-path: inset(-20% 100% -30% 0); transition: clip-path 1.5s cubic-bezier(.55, .05, .3, 1); }
.foot__tag span + span { transition-delay: 1.2s; }
.foot__tag.is-in span { clip-path: inset(-20% -5% -30% 0); }
.foot__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(60px, 7vw, 100px); }
/* the flowers fall through the room below the links and pile on the letters: the room grows with them (they scale
   with the width), and the links stay above them */
.foot > .wrap:first-child { position: relative; z-index: 4; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 30px; padding-bottom: max(80px, calc(14vw + 20px)); }
.foot__cols h4 { margin: 0 0 14px; font: 500 11px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: rgba(244, 237, 226, .5); }
.foot__cols a { display: block; padding: 5px 0; color: rgba(244, 237, 226, .85); text-decoration: none; font-size: 15px; }
.foot__cols a:hover { color: #fff; }
.foot__mark { position: relative; padding: 0 var(--gutter) clamp(30px, 4vw, 60px); color: var(--ivory); }
.foot__fall { position: absolute; left: 0; z-index: 3; pointer-events: none; }
.foot__mark .wordmark { width: 100%; position: relative; z-index: 2; opacity: .96; }
.foot__peek { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.foot__peek img { position: absolute; max-width: none; will-change: transform; }
.foot__fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding-top: 30px; padding-bottom: 30px; font-size: 12.5px; color: rgba(244, 237, 226, .66); }
.foot__fine a { color: inherit; }

/* =====================================================================
   THE SHEET (one piece, held)
   ===================================================================== */
.sheet { width: min(980px, calc(100vw - 32px)); max-height: min(720px, calc(100svh - 32px)); padding: 0; border: 0; border-radius: 22px; background: var(--card); color: var(--ink); overflow: hidden;
  box-shadow: 0 50px 120px -40px rgba(30, 20, 12, .6); }
.sheet[open] { display: grid; grid-template-columns: 1.05fr 1fr; animation: sheetIn .6s var(--ease); }
.sheet::backdrop { background: rgba(28, 21, 17, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .4s ease; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(26px) scale(.98); } }
@keyframes fade { from { opacity: 0; } }
.sheet form { position: absolute; top: 12px; right: 12px; z-index: 2; margin: 0; }
.sheet__x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); cursor: pointer; }
.sheet__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.sheet__img { background: var(--linen); min-height: 0; }
.sheet__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.sheet__body { display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 50px); overflow: auto; }
.sheet__kind { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.sheet__name { margin: 0; font: 400 clamp(32px, 3.2vw, 46px)/1 var(--display); letter-spacing: -.015em; }
.sheet__name:focus { outline: none; }   /* the sheet opens on the piece's name, not with a ring on its close button */
.sheet__note { margin: 16px 0 26px; color: var(--ink-2); }
.sheet__facts { display: grid; gap: 0; margin: 0 0 30px; border-top: 1px solid var(--line); }
.sheet__facts div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.sheet__facts dt { color: var(--muted); }
.sheet__facts dd { margin: 0; text-align: right; }
.sheet__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: auto; }
.sheet__price { margin-right: auto; font: 400 40px/1 var(--display); font-variant-numeric: lining-nums; }
.sheet__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.sheet__more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .4s var(--ease); }
.sheet__more:hover svg { transform: translateX(4px); }


/* reveal on arrival */
.rv { opacity: 0; transform: translateY(26px); }
.rv.is-in { opacity: 1; transform: none; transition: opacity 1.1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s); }

.noscript { padding: 40px var(--gutter); }

/* =====================================================================
   SMALLER SCREENS
   ===================================================================== */
@media (max-width: 1080px) {
  .head__link { display: none; }
  .row a { grid-template-columns: minmax(0, 1fr) 130px; }
  .row__meta { grid-column: 1; grid-row: 2; margin-top: -8px; }
  .row__price { grid-column: 2; grid-row: 1; }
}
@media (max-width: 860px) {
  :root { --head-h: 62px; }
  .head { grid-template-columns: auto 1fr auto; gap: 8px; }
  .head__nav a { display: none; }
  .head__menu { display: grid; }
  .head__brand { justify-self: center; width: 118px; }
  .head__order { display: none; }
  .head__end { gap: 0; }
  .hero__title { top: calc(var(--head-h) + 3.5vh); font-size: clamp(54px, 15.6vw, 120px); }
  .ln--2 { padding-left: calc(.12em + .7em); }
  .hero__foot { right: var(--gutter); max-width: none; gap: 20px; bottom: calc(max(24px, 3vh) + var(--hb, 0px)); }
  .hero__lede { max-width: 25rem; font-size: 15.5px; }
  .hero__cta .pill { flex: 1 1 auto; min-height: 50px; }
  .chapters { top: calc(var(--head-h) + 20px); width: auto; right: var(--gutter); }
  .ch { transform: none; }
  .ch__t { font-size: clamp(46px, 13vw, 76px); }
  .ch__s { margin-top: 10px; font-size: 15px; }
  .ch__n { margin-bottom: 10px; }
  .kept { top: auto; left: var(--gutter); right: var(--gutter); bottom: calc(18px + var(--hb, 0px)); width: auto; padding: 16px 18px; border-radius: 16px; }
  .kept__name { font-size: 25px; }
  .kept__meta { margin: 4px 0 12px; font-size: 13px; }
  .kept__price { font-size: 28px; }
  .tableui { top: calc(var(--head-h) + 12px); right: var(--gutter); }
  .tableui__t { font-size: clamp(40px, 11.5vw, 64px); }
  .tableui__s { font-size: 14px; }
  .tableui__how { display: none; }
  .rail { display: none; }
  .cue { display: none; }
  .tag { display: none; }
  .row a { grid-template-columns: minmax(0, 1fr) 84px; gap: 6px 16px; align-items: center; padding: 20px 0; }
  .row__name { grid-column: 1; grid-row: 1; font-size: clamp(32px, 9vw, 46px); }
  .row__meta { grid-column: 1; grid-row: 2; margin: 0; font-size: 13.5px; }
  .row__price { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 6px; font-size: 22px; }
  .row__thumb { display: block; grid-column: 2; grid-row: 1 / 4; width: 84px; height: 104px; object-fit: cover; border-radius: 10px; }
  .reveal-img { display: none; }
  .words__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "table" "copy"; }
  .words__head .lede { margin: 14px 0 6px; }
  .words__table { margin: 0 -10px; min-width: 0; }
  .words__table .tray { --k: calc((100vw - 2 * var(--gutter) + 20px) / 34); height: calc(var(--k) * 32); }   /* words.js refines it */
  .words__note { margin-top: 0; margin-bottom: 26px; font-size: 12.5px; }
  .words__opts { gap: 20px; }
  .noel__copy { top: calc(var(--head-h) + 8px); bottom: calc(16px + var(--hb, 0px)); left: var(--gutter); right: var(--gutter); transform: none; width: auto;
    display: flex; flex-direction: column; justify-content: flex-start; pointer-events: none; }
  .noel__copy > * { pointer-events: auto; }
  .noel__title { font-size: clamp(32px, 9vw, 44px); }
  .noel__lede { display: none; }
  .noel__tip { display: block; letter-spacing: .1em; }   /* the lede's one instruction, in a line (it changes as the scene moves on) */
  .noel__act { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
  .noel__pick { margin-top: auto; padding-top: 8px; }
  .noel__sets { flex-wrap: nowrap; gap: 5px; }
  .nset { flex: none; min-height: 34px; padding: 0 11px; font-size: 12.5px; }
  .nset span, .nset__full { display: none; }
  .nset__short { display: inline; }
  .noel__setnote { margin: 8px 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .noel__colours { flex-wrap: nowrap; gap: 6px; margin-bottom: 14px; }
  .ncol { flex: none; width: 30px; height: 30px; }
  /* over the tree, the night gathers behind the choices, the name and the button (the room's own shade falls below the screen) */
  .noel__copy::after { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); bottom: calc(-16px - var(--hb, 0px));
    height: calc(var(--pickh, 220px) + 70px); background: linear-gradient(0deg, rgba(18, 12, 8, .95) 72%, rgba(18, 12, 8, 0)); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
  .noel__head { position: relative; }
  .noel__head::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: calc(-8px - var(--head-h)); bottom: -54px;
    background: linear-gradient(180deg, rgba(18, 12, 8, .94) 78%, rgba(18, 12, 8, 0)); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
  .is-tree .noel__copy::after, .is-tree .noel__head::before { opacity: 1; }
  .noel__form { flex: 1; min-width: 0; }
  .noel__form input { display: none; }
  .noel__form label { pointer-events: none; }
  .noel__who { display: inline-flex; }
  .noel__cta { margin: 0; }
  .noel__cta .pill { min-height: 46px; padding: 0 18px; }
  .noel__note { display: none; }
  .noel__hint { display: none; }
  .noel__treeline { display: none; }   /* the tip under the title says it instead: down here it sat on the name field */
  /* the dark falls over the hanging ornaments too, so the title and the name field read over the tree */
  .noel__room::after { z-index: 2; background: linear-gradient(180deg, rgba(18, 12, 8, .85), rgba(18, 12, 8, 0) 26%), linear-gradient(0deg, rgba(18, 12, 8, .9), rgba(18, 12, 8, 0) 24%); }
  .talk__grid { grid-template-columns: minmax(0, 1fr); }
  .talk__head { position: static; }
  .talk__steps { display: none; }
  .talk__thread { justify-self: stretch; }
  .msg { max-width: 88%; }
  .msg--photo { max-width: 80%; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .sheet { width: 100vw; max-width: 100vw; max-height: 92svh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .sheet[open] { grid-template-columns: 1fr; grid-template-rows: auto 1fr; animation: sheetUp .5s var(--ease); }
  .sheet__img img { aspect-ratio: 5 / 4; max-height: 38svh; }
  .sheet__body { padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); }
  .sheet__note { margin: 10px 0 16px; font-size: 15px; }
  .sheet__facts { margin-bottom: 18px; }
  .sheet__price { font-size: 32px; }
  @keyframes sheetUp { from { transform: translateY(40%); opacity: 0; } }
}

/* less motion: nothing drifts, spins or pulses; the film is still driven by the scroll, which the visitor controls */
.reduced .msg { opacity: 1; transform: none; }
.reduced .cue i, .reduced .noel__lights, .reduced .stream i { animation: none; }
.reduced .ln__in { transform: none !important; }
.reduced .rv { opacity: 1; transform: none; }
.reduced .hero__foot > * { opacity: 1; transform: none; }
.reduced .foot__tag span { clip-path: none; }