/* Web Faery, the main page: the twilight look (Oct 2026).
   Three paintings carry the page: the faery door, the redwood hero, and the little mailbox at the bottom. The
   lantern path from the tall scroll painting backs the four steps. Everything in between sits on one calm
   twilight field (blue-violet to lavender, a faint speckle of CSS stars, no pictures), and the things you read
   closely are lavender-cream cards with a slow shimmer on their edge and a few tiny star glints.
   The hero melts into the twilight: the painting runs on under the top of Recent work, thinning out to the
   ground color with an eased fade and a soft blur, so there is no line where one ends and the other begins.
   Every color, size, radius, shadow and timing comes from /wf-tokens.css (loaded first, after fonts/fonts.css,
   which serves the fonts from this site). The few colors written out here are paint: the glow of the door, the
   sparkles, and the twilight field's own stops where its top has to stay clear for the hero (see .twilight).
   Contrast is checked in wf-tokens.css against the real backgrounds. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--wf-head-h); color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--wf-ink); font: 400 var(--wf-text)/var(--wf-line) var(--wf-font-read); font-synthesis: none;
  background: var(--wf-ground);
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: var(--wf-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--wf-gold-hi); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--wf-font-display); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: .005em; }
h2 { font-size: var(--wf-h2); }
h2 em, h1 em { font-family: var(--wf-font-read); font-style: italic; font-weight: 400; color: var(--wf-italic); }
p { margin: 0 0 .8em; }
ul { margin: 0; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wf-wrap); margin: 0 auto; padding-inline: var(--wf-gut); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 90; background: var(--wf-gold); color: var(--wf-on-gold); padding: 10px 16px; border-radius: var(--wf-r-input); }
.skip:focus { top: 12px; }
main:focus { outline: none; }

.eyebrow { margin: 0 0 12px; font: 600 var(--wf-eyebrow-size)/1.3 var(--wf-font-read); letter-spacing: var(--wf-eyebrow-track); text-transform: uppercase; color: var(--wf-eyebrow); }
.lede { font-size: var(--wf-lede); color: var(--wf-ink-soft); margin: 14px 0 0; }
.sec-head { text-shadow: var(--wf-text-shadow); }
.sec-head h2 + .lede { margin-top: 14px; }
.sec-head.center { text-align: center; max-width: 640px; margin-inline: auto; }
.sec-head .lede:last-child { margin-bottom: 0; }

/* ---------- buttons: lantern gold is the main one; a moonlit outline for the rest ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 11px 26px;
  border-radius: var(--wf-r-pill); border: 1px solid var(--wf-btn-edge); color: var(--wf-btn-ink); text-decoration: none; cursor: pointer;
  font: 400 18px/1.1 var(--wf-font-display); letter-spacing: .01em;
  background: var(--wf-btn-bg);
  box-shadow: var(--wf-shadow-btn);
  transition: box-shadow var(--wf-dur-quick) ease, transform var(--wf-dur-quick) ease;
}
.btn:hover { box-shadow: var(--wf-shadow-btn-hover); transform: translateY(-1px); text-decoration: none; }
.btn.ghost { background: var(--wf-ghost-bg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--wf-ink); border-color: var(--wf-ghost-edge); box-shadow: none; }
.btn.ghost:hover { background: rgb(255 255 255 / .1); box-shadow: 0 0 24px -6px rgb(247 182 207 / .6); }
.card .btn { box-shadow: var(--wf-shadow-btn-card); }
.card .btn.ghost { background: transparent; color: var(--wf-c-ink); border-color: var(--wf-c-ghost-edge); -webkit-backdrop-filter: none; backdrop-filter: none; }
.card .btn.ghost:hover { background: rgb(84 72 160 / .08); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }

/* =============================== the door =============================== */
/* The site opens on the door painting (once per visit in a tab; deep links and ?door=0 skip it). The inline
   script in index.html shows it before the first paint and keeps a way out even if site.js can't run. */
.door { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: var(--wf-ground); --dx: 51%; --dy: 74%; --dr: 90px; }
.door[hidden] { display: none; }
html.door-up, html.door-up body { overflow: hidden; }
html.door-up .site-head { visibility: hidden; opacity: 0; }
.door-stage { position: absolute; inset: 0; transform-origin: var(--dx) var(--dy); will-change: transform; }
.door-art { width: 100%; height: 100%; object-fit: cover; object-position: 51% 60%; }
/* the door's own warm light, a little stronger than the painting's; it brightens when you tap */
.door-glow {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background:
    radial-gradient(calc(var(--dr) * 1.1) calc(var(--dr) * 1.25) at var(--dx) var(--dy), rgb(255 214 140 / .55), rgb(255 170 110 / .18) 55%, transparent 80%),
    radial-gradient(calc(var(--dr) * 3.2) calc(var(--dr) * 2.6) at var(--dx) var(--dy), rgb(247 160 200 / .22), transparent 70%);
  transition: opacity .7s ease;
}
.door-light {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--dx) var(--dy), #fff6dc 0, #ffe2a6 12%, #f7b9d2 38%, #b9a8ea 70%, #8f86cf 100%);
}
.door-mark {
  position: absolute; left: 0; right: 0; top: max(22px, env(safe-area-inset-top)); margin: 0; text-align: center; pointer-events: none;
  font: 400 clamp(26px, 3vw, 34px)/1 var(--wf-font-display); color: var(--wf-hero-lede); letter-spacing: .01em;
  text-shadow: 0 2px 18px rgb(30 26 80 / .9), 0 0 2px rgb(30 26 80 / .6);
}
.door-mark span { font-family: var(--wf-font-read); font-style: italic; color: var(--wf-italic); }
.door-go { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.door-go:focus-visible { outline: none; }
.door-ring { position: absolute; left: var(--dx); top: var(--dy); width: calc(var(--dr) * 2.7); height: calc(var(--dr) * 2.7); transform: translate(-50%, -52%); border-radius: 50%; pointer-events: none; opacity: 0; box-shadow: 0 0 0 3px var(--wf-gold-hi), 0 0 30px 6px rgb(255 224 160 / .6); }
.door-go:focus-visible ~ .door-ring { opacity: 1; }
.door-hint {
  position: absolute; left: 0; right: 0; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 14px); margin: 0; text-align: center; pointer-events: none;
  font: italic 400 clamp(18px, 1.6vw, 21px)/1.3 var(--wf-font-read); color: #fff4dc; letter-spacing: .02em;
  text-shadow: 0 1px 14px rgb(30 26 80 / .95), 0 0 2px rgb(30 26 80 / .8);
}
.door-skip {
  position: absolute; top: max(18px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--wf-tap);
  padding: 8px 16px; border-radius: var(--wf-r-pill); color: var(--wf-hero-lede); text-decoration: none; font: 500 16px/1.2 var(--wf-font-read); letter-spacing: .04em;
  background: rgb(var(--wf-ground-rgb) / .55); border: 1px solid rgb(247 243 255 / .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.door-skip:hover { background: rgb(var(--wf-ground-rgb) / .8); }
/* the walk in (timing lives in site.js) */
.door.opening { cursor: default; }
.door.opening .door-glow { opacity: 1; }
.door.opening .door-hint, .door.opening .door-mark, .door.opening .door-skip { opacity: 0; transition: opacity .5s ease; }
.door.zoom .door-stage { transform: scale(var(--zoom, 3.4)); transition: transform 2.5s cubic-bezier(.5, .02, .62, .62); }
.door.flood .door-light { opacity: .94; transition: opacity 1s cubic-bezier(.5, 0, .7, .4); }
.door.gone { opacity: 0; transition: opacity 1.1s ease; pointer-events: none; }
.door.quick { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .door-glow, .door.opening .door-hint, .door.opening .door-mark, .door.opening .door-skip { transition: none; }
}

/* =============================== header =============================== */
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--wf-ink); transition: opacity 1s ease .2s, visibility 0s, background-color .4s ease, box-shadow .4s ease; }
.site-head::before { content: ''; position: absolute; inset: 0 0 -60px 0; z-index: -1; pointer-events: none; background: var(--wf-head-fade); transition: opacity .4s ease; }
.site-head.solid { background: var(--wf-head-solid); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 10px 30px -18px var(--wf-shade); }
.site-head.solid::before { opacity: 0; }
.wf-banner { margin: 0; text-align: center; background: var(--wf-banner-bg); border-bottom: 1px solid var(--wf-banner-line); }
.wf-banner a { display: block; height: var(--wf-banner-h); line-height: var(--wf-banner-h); color: var(--wf-gold-hi); text-decoration: none; font: 500 14px/var(--wf-banner-h) var(--wf-font-read); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.wf-banner a:hover { text-decoration: underline; }
.wb-short { display: none; }
.bar { display: flex; align-items: center; justify-content: space-between; height: var(--wf-bar-h); gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--wf-tap); color: var(--wf-ink); text-decoration: none; text-shadow: 0 1px 12px rgb(30 26 80 / .6); }
.brand .logo { height: 40px; width: auto; }
.wm { position: relative; font: 400 26px/1 var(--wf-font-display); letter-spacing: .01em; padding-right: 14px; }
.wm > span { font-family: var(--wf-font-read); font-style: italic; color: var(--wf-italic); }
/* the one tiny sparkle by the name: a four-point glint in lantern gold (it holds still) */
.wm-spark { position: absolute; right: 0; top: -5px; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 214 140 / .55), rgb(247 182 207 / .18) 60%, transparent); }
.wm-spark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #fffaf0 0 14%, #ffd98f 34%, var(--wf-gold) 70%);
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%); }
.site-head nav ul { list-style: none; display: flex; gap: 4px clamp(10px, 2.2vw, 30px); padding: 0; margin: 0; }
.site-head nav a { color: var(--wf-ink); text-decoration: none; font: 500 17px/1 var(--wf-font-read); letter-spacing: .04em; padding: 14px 4px; display: inline-block; text-shadow: 0 1px 10px rgb(30 26 80 / .7); }
.site-head nav a:hover { color: var(--wf-gold-hi); }
@media (max-width: 560px) {
  .wb-long { display: none; } .wb-short { display: inline; }
  .wf-banner a { font-size: 12.5px; letter-spacing: .08em; }
  .nav-more { display: none; }
  .wm { font-size: 23px; }
}

/* =============================== hero =============================== */
/* The hero is taller than the screen by --wf-melt, and the twilight below is pulled up by the same amount, so
   the painting runs on under the top of Recent work. Over its last stretch (--fade-h) the painting, its veil and
   a soft blur all thin out on one eased curve to exactly the ground color, which is where the twilight starts:
   no line, no step in color, no sudden change of texture.
   Wide screens: the painting keeps the size and crop of one screen (as approved), and a mirrored copy of its
   foot continues it into the melt, so the trees fade into their own mist rather than stopping.
   Tall screens (phones): the phone painting is cut taller from the scroll painting, so there is real painting to
   melt. Static, so reduced motion changes nothing here. */
.hero {
  --fade-h: calc(var(--wf-melt) + 38vh); --fade-h: calc(var(--wf-melt) + 38svh);
  position: relative; min-height: calc(100vh + var(--wf-melt)); min-height: calc(100svh + var(--wf-melt));
  display: flex; align-items: center; overflow: hidden; isolation: isolate;
}
.hero-paint, .hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--fade-h) + 2px) no-repeat, var(--wf-melt-mask) bottom / 100% var(--fade-h) no-repeat;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--fade-h) + 2px) no-repeat, var(--wf-melt-mask) bottom / 100% var(--fade-h) no-repeat;
}
.hero-paint { z-index: -3; }
.hero-paint picture { position: absolute; inset: 0 0 var(--wf-melt) 0; }
.hero-art, .hero-mirror img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
/* the mirror: the same painting (the same file, so nothing more to download) flipped below the first, so its foot
   carries on into the melt */
.hero-mirror { transform: translateY(100%) scaleY(-1); }
.hero-veil { z-index: -2;
  background:
    linear-gradient(90deg, rgb(var(--wf-ground-rgb) / .8) 0%, rgb(var(--wf-ground-rgb) / .66) max(30%, 380px), rgb(var(--wf-ground-rgb) / .3) max(50%, 660px), rgb(var(--wf-ground-rgb) / 0) max(64%, 840px)),
    linear-gradient(180deg, rgb(var(--wf-ground-rgb) / .25) 0%, rgb(var(--wf-ground-rgb) / 0) 22%); }
/* the soft blur: two still layers at the hero's foot, the lower one stronger, so the trees soften as they fade */
.hero-melt { position: absolute; left: 0; right: 0; bottom: 0; height: var(--fade-h); z-index: -1; pointer-events: none; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero-melt::before, .hero-melt::after { content: ''; position: absolute; inset: 0; }
  .hero-melt::before { -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
    -webkit-mask: linear-gradient(180deg, transparent 0%, #000 40%); mask: linear-gradient(180deg, transparent 0%, #000 40%); }
  .hero-melt::after { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    -webkit-mask: linear-gradient(180deg, transparent 25%, #000 65%); mask: linear-gradient(180deg, transparent 25%, #000 65%); }
}
.hero-text { position: relative; padding-top: calc(var(--wf-head-h) + 40px); padding-bottom: calc(80px + var(--wf-melt)); text-shadow: var(--wf-text-shadow-strong); }
.hero-text > * { max-width: 580px; }
.hero .eyebrow { color: var(--wf-hero-eyebrow); }
.hero h1 { font-size: var(--wf-h1); line-height: 1.02; }
.hero .h1a, .hero .h1b { display: block; }
.hero .h1b { font-family: var(--wf-font-read); font-style: italic; color: var(--wf-italic); font-size: .74em; line-height: 1.12; margin-top: .14em; }
.hero-lede { font-size: clamp(19px, 1.55vw, 22px); line-height: 1.55; color: var(--wf-hero-lede); margin: 26px 0 30px; max-width: 26em; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.quiet { color: var(--wf-ink); font-size: 18px; display: inline-flex; align-items: center; min-height: var(--wf-tap); }
/* the slow fade-in: each line arrives on its own, softly (house style). Plays once, after the door. */
html.js .hero .fade { opacity: 0; transform: translateY(16px); filter: blur(5px); }
html.js .hero.go .fade { animation: wf-rise var(--wf-dur-rise) var(--wf-ease-rise) forwards; }
.hero.go .f1 { animation-delay: .1s !important; } .hero.go .f2 { animation-delay: .6s !important; } .hero.go .f3 { animation-delay: 1.35s !important; }
.hero.go .f4 { animation-delay: 2.2s !important; } .hero.go .f5 { animation-delay: 2.9s !important; }
html.js .hero.rest .fade { opacity: 1; transform: none; filter: none; animation: none; }
@keyframes wf-rise { to { opacity: 1; transform: none; filter: blur(0); } }
/* after the door, the painting settles from the last bit of the zoom (its mirror with it, so the melt holds) */
.hero.settle .hero-art, .hero.settle .hero-mirror img { animation: wf-settle var(--wf-dur-settle) var(--wf-ease-settle) both; }
@keyframes wf-settle { from { transform: scale(1.07); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.js .hero .fade { opacity: 1; transform: none; filter: none; animation: none !important; }
  .hero.settle .hero-art, .hero.settle .hero-mirror img { animation: none; }
}
/* phones and tall screens: the top of the tall scroll painting, words over the treetops and clouds, and the
   painting itself runs all the way into the melt */
@media (max-aspect-ratio: 3/4) {
  .hero { align-items: flex-start; --fade-h: calc(var(--wf-melt) + 26vh); --fade-h: calc(var(--wf-melt) + 26svh); }
  .hero-paint picture { inset: 0; }
  .hero-mirror { display: none; }
  .hero-art { object-position: 50% 0%; }
  /* the words' veil is measured on the first screen (the hero less the melt), as approved; past it, it holds */
  .hero-veil { --s: calc(100% - var(--wf-melt)); background:
    linear-gradient(180deg, rgb(var(--wf-ground-rgb) / .56) 0, rgb(var(--wf-ground-rgb) / .6) calc(var(--s) * .22), rgb(var(--wf-ground-rgb) / .62) calc(var(--s) * .46),
      rgb(var(--wf-ground-rgb) / .56) calc(var(--s) * .68), rgb(var(--wf-ground-rgb) / .24) calc(var(--s) * .84), rgb(var(--wf-ground-rgb) / .12) calc(var(--s) * .9), rgb(var(--wf-ground-rgb) / .12) 100%); }
  .hero-text { text-align: center; padding-top: calc(var(--wf-head-h) + 28px); }
  .hero-text > * { margin-inline: auto; }
  .hero-cta, .hero .btns { justify-content: center; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: var(--wf-h1-phone); }
  .hero-lede { font-size: 18.5px; margin: 18px auto 22px; }
  .hero .btns { width: 100%; }
  .hero .btn { flex: 1 1 100%; }
  .hero .quiet { padding: 6px 16px; border-radius: var(--wf-r-pill); background: rgb(var(--wf-ground-rgb) / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

/* =============================== the twilight field =============================== */
/* One long calm field under every section between the hero and the mailbox. Its top is pulled up under the
   hero (by --wf-melt) and stays clear at first, so the painting shows through, then deepens to the ground color
   and holds it a moment before the field's own gentle lighter bands begin. These are --wf-field's stops, written
   out because the clear top has to come first. The stars (--wf-stars) come out slowly below the melt.
   Nothing here moves. */
.twilight {
  position: relative; isolation: isolate; margin-top: calc(-1 * var(--wf-melt));
  background: linear-gradient(180deg, rgb(var(--wf-ground-rgb) / 0) 0, rgb(var(--wf-ground-rgb) / 0) calc(var(--wf-melt) * .2), var(--wf-ground) var(--wf-melt),
    var(--wf-ground) calc(var(--wf-melt) + 140px), #2f3376 9%, #353880 22%, #3a3b87 38%, #33367d 52%, #3b3a87 66%, #36377f 82%, var(--wf-ground) 100%);
}
.twilight::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--wf-stars);
  -webkit-mask: linear-gradient(180deg, transparent 0, transparent var(--wf-melt), #000 calc(var(--wf-melt) + 280px));
  mask: linear-gradient(180deg, transparent 0, transparent var(--wf-melt), #000 calc(var(--wf-melt) + 280px)); }
/* soft lavender and pink light in each section, so the field has depth (each section places its own). The glows
   stay well inside their section (centers between 28% and 72% down), so no glow is cut off at a section edge. */
.field { position: relative; isolation: isolate; padding: var(--wf-section-pad) 0; }
.field::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 38% at var(--gx1, 82%) var(--gy1, 30%), var(--wf-glow-lavender), transparent 70%),
    radial-gradient(42% 34% at var(--gx2, 12%) var(--gy2, 70%), var(--wf-glow-pink), transparent 70%); }
.work { --gx1: 86%; --gy1: 46%; --gx2: 8%; --gy2: 72%; padding-top: clamp(56px, 7vw, 96px); }
.prices { --gx1: 50%; --gy1: 28%; --gx2: 92%; --gy2: 64%; }
.how { --gx1: 18%; --gy1: 36%; --gx2: 88%; --gy2: 70%; }
.about { --gx1: 78%; --gy1: 50%; --gx2: 14%; --gy2: 40%; }
.faq-sec { --gx1: 20%; --gy1: 30%; --gx2: 84%; --gy2: 70%; }
.tools { --gx1: 80%; --gy1: 40%; --gx2: 12%; --gy2: 64%; }
.guestbook { --gx1: 70%; --gy1: 40%; --gx2: 16%; --gy2: 66%; }

/* =============================== the cards =============================== */
/* Lavender-cream, so they clearly stand apart from the dark twilight. Their sparkle is the same on every card:
   a faint line of light that travels slowly around the edge (::before), and three tiny star glints (added by
   site.js as .glint) that twinkle at their own pace. With reduced motion both simply hold still.
   The questions are cards too (.faq details), styled here rather than by a class. */
.card, .faq details {
  position: relative; border-radius: var(--wf-r-card); padding: clamp(22px, 2.6vw, 34px);
  color: var(--wf-c-text);
  background: var(--wf-card-bg);
  box-shadow: var(--wf-shadow-card);
}
.card::before, .faq details::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1.5px;
  background: var(--wf-shimmer);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: wf-shimmer var(--wf-dur-shimmer) linear infinite;
}
@keyframes wf-shimmer { from { background-position: 120% 0, 0 0; } to { background-position: -20% 0, 0 0; } }
.glint { position: absolute; z-index: 4; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none;
  background:
    radial-gradient(circle, #fffaf0 0 1.3px, rgb(255 214 140 / .9) 2px, rgb(240 168 60 / 0) 4.5px),
    linear-gradient(90deg, transparent, rgb(228 156 48) 50%, transparent) 50% 50% / 100% 1.8px no-repeat,
    linear-gradient(0deg, transparent, rgb(228 156 48) 50%, transparent) 50% 50% / 1.8px 100% no-repeat;
  filter: drop-shadow(0 0 3px rgb(247 168 200 / .9));
  opacity: .25; transform: scale(.55) rotate(0deg);
  animation: wf-twinkle var(--tw, 6s) ease-in-out var(--td, 0s) infinite; }
.glint.g1 { left: calc(100% - 22px); top: 20px; width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; }
.glint.g2 { left: 20px; top: calc(100% - 20px); }
.glint.g3 { left: 34%; top: 1px; width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.faq .glint.g1 { left: calc(100% - 66px); top: 14px; }
/* out of sight (site.js): held still until it comes back into view */
.out-of-view::before, .out-of-view .glint { animation-play-state: paused; }
@keyframes wf-twinkle {
  0%, 100% { opacity: .2; transform: scale(.5) rotate(0deg); }
  45% { opacity: 1; transform: scale(1) rotate(12deg); }
  60% { opacity: .9; transform: scale(.92) rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) {
  .card::before, .faq details::before { animation: none; background-position: 40% 0, 0 0; }
  .glint { animation: none; opacity: .85; transform: none; }
}
/* words on cream */
.card h2, .card h3 { color: var(--wf-c-ink); }
.card h2 em, .card h3 em { color: var(--wf-c-rose); }
.card .eyebrow { color: var(--wf-c-rose); }
.card a, .faq details a { color: var(--wf-c-link); }
.card a.btn { color: var(--wf-btn-ink); }
.card a.btn.ghost { color: var(--wf-c-ink); }
.card .lede { color: var(--wf-c-text); }
.card b, .card strong, .faq details b { color: var(--wf-c-ink); }
.card :focus-visible, .faq details :focus-visible { outline-color: var(--wf-c-link); }

/* the bullets everywhere: a small gold diamond */
.gets ul, .every-plan ul, .bullets, .faq ul { list-style: none; padding: 0; }
.gets li, .every-plan li, .bullets li, .faq li { text-wrap: pretty; position: relative; padding-left: 22px; margin: 0 0 7px; font-size: 17px; line-height: 1.5; color: var(--wf-c-text); }
.gets li::before, .every-plan li::before, .bullets li::before, .faq li::before {
  content: ''; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; transform: rotate(45deg); border-radius: 1px;
  background: var(--wf-bullet); box-shadow: var(--wf-bullet-glow);
}

/* ---------- recent work ---------- */
.work .wrap { display: grid; gap: clamp(22px, 3vw, 36px); }
.work .sec-head { max-width: 620px; }
.piece { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 48px); align-items: center; }
.shots { position: relative; display: block; padding: 0 34px 34px 0; text-decoration: none; }
.browser { margin: 0; border-radius: var(--wf-r-frame); overflow: hidden; background: var(--wf-frame); box-shadow: var(--wf-shadow-frame); border: 1px solid rgb(84 72 160 / .2); }
.chrome { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--wf-frame-bar); color: var(--wf-frame-ink); font: 500 13px/1 var(--wf-font-read); }
.dots { display: inline-flex; gap: 5px; } .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--wf-frame-dot); }
.url { flex: 1; background: var(--wf-frame-url); border-radius: 8px; padding: 5px 10px; }
.browser img, .phone img { width: 100%; height: auto; }
.phone { position: absolute; right: 0; bottom: 0; width: 23%; margin: 0; border-radius: 18px; overflow: hidden; border: 4px solid var(--wf-frame); box-shadow: 0 18px 36px -16px rgb(38 42 94 / .7), 0 0 0 1px rgb(84 72 160 / .2); }
.piece-text h3 { font-size: clamp(26px, 2.4vw, 32px); margin-bottom: 10px; }
.piece-text > p:not(.eyebrow) { color: var(--wf-c-text); }
.visit { display: inline-flex; align-items: center; gap: .3em; min-height: var(--wf-tap); margin: 0 0 6px; font-weight: 500; }
.kind { margin: 14px 0 0; padding: 18px 0 0; border-top: 1px solid var(--wf-c-rule); }
.kind p { font-style: italic; color: var(--wf-c-ink); font-size: 18px; }
.kind footer { color: var(--wf-c-rose); font-size: 15px; letter-spacing: .06em; }

/* ---------- prices ---------- */
.prices .sec-head { margin-bottom: clamp(36px, 4vw, 56px); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); align-items: stretch; }
.tier { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tier-art { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--wf-r-card) var(--wf-r-card) 0 0; }
.tier-art picture, .tier-art img { width: 100%; height: 100%; }
.tier-art img { object-fit: cover; }
.tier-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--wf-ground-rgb) / 0) 58%, rgb(var(--wf-ground-rgb) / .78) 100%); }
.tier-art h3 { position: absolute; left: 26px; bottom: 18px; z-index: 1; font-size: clamp(34px, 3vw, 42px); color: var(--wf-ink); text-shadow: 0 2px 16px rgb(28 24 78 / .9); }
.tier-body { display: flex; flex-direction: column; flex: 1; padding: 22px 26px 26px; }
.does { color: var(--wf-c-ink); }
.does-note { color: var(--wf-c-soft); font-size: 17px; font-style: italic; }
.gets { margin: 6px 0 18px; padding-top: 14px; border-top: 1px solid var(--wf-c-rule); }
.gets-k { font: 600 var(--wf-eyebrow-size)/1.4 var(--wf-font-read); letter-spacing: .14em; text-transform: uppercase; color: var(--wf-c-rose); margin-bottom: 8px; }
.gets-plus { font-weight: 500; margin-bottom: 6px; color: var(--wf-c-ink); }
.gets-more { color: var(--wf-c-soft); font-size: 15.5px; font-style: italic; margin: 8px 0 0; }
.money { margin-top: auto; padding: 16px 18px; border-radius: var(--wf-r-sheet); background: var(--wf-money-bg); border: 1px solid var(--wf-money-edge); }
.money p { margin: 0; }
.price strong { font: 400 40px/1 var(--wf-font-display); color: var(--wf-c-ink); }
.price span { color: var(--wf-c-soft); }
.founding { margin-top: 6px !important; color: var(--wf-c-text); }
.founding b { color: var(--wf-c-gold); font-weight: 600; }
.care-mo { color: var(--wf-c-soft); font-size: 17px; }
.care-mo b { color: var(--wf-c-ink); font-weight: 600; }
.every-plan { margin-top: clamp(18px, 2vw, 26px); }
.every-plan-k { font: 400 clamp(24px, 2.2vw, 30px)/1.2 var(--wf-font-display); margin: 0 0 14px; color: var(--wf-c-ink); }
.every-plan ul { columns: 2; column-gap: 40px; }
.every-plan li { break-inside: avoid; }
.panel { margin-top: clamp(18px, 2vw, 26px); }
.lead { font-weight: 600; color: var(--wf-c-ink); }
.founding-line { margin: 0 0 22px; padding: 14px 18px; border-radius: var(--wf-r-line); background: var(--wf-founding-bg); border: 1px solid var(--wf-founding-edge); color: var(--wf-c-ink); }
.founding-line b { color: var(--wf-c-gold); }
.panel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 44px; }
.panel-cols p { color: var(--wf-c-text); }
.after > p:last-child a { display: inline-flex; align-items: center; min-height: var(--wf-tap); }
.prices-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 18px 0 10px; padding-top: 22px; border-top: 1px solid var(--wf-c-rule); }
.prices-cta p { margin: 0; color: var(--wf-c-text); }
.quiz, .quoted { color: var(--wf-c-soft); font-size: 17px; margin: 6px 0 0; }

/* ---------- In Bloom: your tools, built right in ----------
   Laid out like the questions: the heading on the left (it stays put on wide screens), one card on the right. The
   other apps’ prices at the foot of the card are small print, in the card’s soft ink, links included. */
.tools-card .bullets li { margin-bottom: 12px; }
.tools-pay { margin: 16px 0 0; font-size: 18px; }
.tools-costs { margin: 20px 0 0; }
.tools-costs li { font-size: 15.5px; color: var(--wf-c-soft); margin-bottom: 5px; }
.tools-costs a { color: inherit; }
.tools-costs .gets-more { margin-top: 10px; }

/* ---------- how it works ---------- */
/* wide screens: the lantern path is a tall framed panel on the left that stays put while the steps pass */
.how-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: 'art head' 'art main'; grid-template-rows: auto 1fr; gap: 0 clamp(32px, 4.4vw, 64px); align-items: start; }
.how-head { grid-area: head; margin-bottom: clamp(26px, 3vw, 40px); }
.path-art { grid-area: art; position: sticky; top: calc(var(--wf-head-h) + 28px); margin: 0; width: 100%; max-width: 470px; justify-self: end;
  height: min(calc(100vh - var(--wf-head-h) - 56px), 900px); min-height: 560px; border-radius: var(--wf-r-panel); overflow: hidden;
  box-shadow: var(--wf-shadow-panel); }
.path-art picture, .path-art img { width: 100%; height: 100%; }
.path-art img { object-fit: cover; object-position: 50% 100%; }
.path-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 236 196 / .25), inset 0 -40px 60px -40px rgb(var(--wf-ground-rgb) / .6); }
.how-main { grid-area: main; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(14px, 1.6vw, 20px); }
.steps li { display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; padding: 24px 28px 24px 24px; }
.steps li .num { grid-row: span 2; }
.steps h3 { font-size: 25px; margin: 8px 0 8px; }
.steps p { color: var(--wf-c-text); font-size: 17.5px; margin: 0; }
.num { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font: 400 21px/1 var(--wf-font-display); color: var(--wf-on-gold);
  background: var(--wf-step-num); box-shadow: 0 0 0 1px rgb(201 138 36 / .35), 0 0 18px 2px rgb(246 197 111 / .55); }
.ready-line { margin: clamp(20px, 2vw, 28px) 0 0; color: var(--wf-ink-soft); }
.ready-line b { color: var(--wf-gold-hi); font-weight: 600; }

/* ---------- about: just the words on the twilight ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 64px); align-items: start; }
.about-text { padding-top: 10px; border-top: 1px solid rgb(247 182 207 / .3); }
.about-text p { color: var(--wf-ink-soft); font-size: clamp(19px, 1.5vw, 21px); }
.about-text p:last-child { margin-bottom: 0; }

/* ---------- questions: each one its own card ---------- */
.faq-grid, .tools-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(18px, 2.4vw, 40px); align-items: start; }
.faq-grid .sec-head, .tools-grid .sec-head { position: sticky; top: calc(var(--wf-head-h) + 24px); }
.faq { display: grid; gap: 12px; }
.faq details { padding: 0 clamp(18px, 2.2vw, 28px); border-radius: var(--wf-r-sheet); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; min-height: var(--wf-tap); font: 400 21px/1.3 var(--wf-font-display); color: var(--wf-c-ink); }
.faq summary::-webkit-details-marker { display: none; }
/* the question line fills its card, so its focus ring sits just inside the card's edge (outside, it would fall on
   the twilight, where the dark ring can't be seen) */
.faq summary:focus-visible { outline-offset: -3px; border-radius: 12px; }
.faq summary::after { content: '+'; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font: 400 22px/1 var(--wf-font-read); color: var(--wf-c-gold); border: 1px solid rgb(201 138 36 / .55); background: rgb(246 197 111 / .14); }
.faq details[open] summary::after { content: '\2212'; }
.faq summary:hover { color: var(--wf-c-rose); }
.ans { padding: 0 2px 18px; }
.ans p { color: var(--wf-c-text); font-size: 18px; }
.ans .plan { color: var(--wf-c-ink); margin: 14px 0 6px; }
.ans ul { margin-bottom: 12px; }

/* ---------- guestbook ----------
   The old personal-site guestbook, done softly: little cream notes resting on the twilight, each with the stamp
   its writer picked, and a small form on a card. The stamps are line drawings kept as <symbol>s at the top of
   the section, so they can be swapped for Taya's own drawings in one place. */
.guestbook[hidden], .guestbook [hidden] { display: none !important; }
.gb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.gb-grid { display: grid; gap: clamp(48px, 6vw, 64px); margin-top: clamp(44px, 6vw, 68px); align-items: start; }
/* a stamp: a little square of colored paper with a perforated edge (a mask cuts the notches, 3px round, every
   9px, so each size is a multiple of 9) and a fine frame inside it, like a postage stamp */
.gb-stamp {
  --r: 3px; --stamp: var(--wf-gold);
  display: grid; place-items: center; flex: none;
  width: 45px; height: 54px; background: var(--stamp); color: var(--wf-c-ink);
  box-shadow: inset 0 0 0 5px var(--stamp), inset 0 0 0 6px rgb(38 42 94 / .38);
  -webkit-mask:
    radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  mask:
    radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}
.gb-stamp svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gb-stamp.is-moon { --stamp: var(--wf-lilac); }
.gb-stamp.is-fern { --stamp: #b6cba5; }   /* a pale fern green, the one green on the page */
/* the notes: small cream cards set down by hand, each tipped a little */
.gb-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.gb-note figure {
  position: relative; margin: 0; display: flow-root; padding: 22px 24px 18px;
  color: var(--wf-c-ink); background: var(--wf-card-bg); border-radius: var(--wf-r-line);
  box-shadow: var(--wf-shadow-card);
}
.gb-note .gb-stamp { float: right; margin: -38px -8px 8px 14px; rotate: 5deg; filter: drop-shadow(0 1px 1px rgb(38 42 94 / .4)) drop-shadow(0 4px 6px rgb(22 20 66 / .25)); }
.gb-note:nth-child(3n+2) .gb-stamp { rotate: -6deg; }
.gb-note:nth-child(3n) .gb-stamp { rotate: 3deg; }
/* "sample" (and "waiting to be read"), like a little rubber stamp inked onto the card */
.gb-tag {
  display: inline-block; margin: 0 0 12px; padding: 0 8px; border-radius: 4px;
  color: var(--wf-c-rose); border: 1.5px solid currentColor;
  font: 600 11px/1.8 var(--wf-font-read); letter-spacing: .16em; text-transform: uppercase;
  rotate: -2deg;
}
.gb-note blockquote { margin: 0; }
.gb-note blockquote p { margin: 0; font-style: italic; font-size: 19px; line-height: 1.5; color: var(--wf-c-ink); overflow-wrap: anywhere; }
.gb-note figcaption {
  clear: both; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 14px; padding-top: 11px;
  border-top: 1px solid var(--wf-c-rule);
}
.gb-by { font: 400 16px/1.4 var(--wf-font-display); letter-spacing: .01em; overflow-wrap: anywhere; color: var(--wf-c-ink); }
.gb-by span { font-family: var(--wf-font-read); letter-spacing: 0; color: var(--wf-c-soft); }
.gb-note time { margin-left: auto; font: 500 12.5px/1.4 var(--wf-font-read); letter-spacing: .1em; text-transform: uppercase; color: var(--wf-c-soft); white-space: nowrap; }
.gb-quiet { margin: 26px 0 0; font-size: 16.5px; font-style: italic; color: var(--wf-ink-soft); }
.gb-empty { margin: 0; font-size: 17.5px; color: var(--wf-ink-soft); }
.gb-notes > .gb-note:nth-child(3n+1) figure { rotate: -.7deg; }
.gb-notes > .gb-note:nth-child(3n+2) figure { rotate: .6deg; }
.gb-notes > .gb-note:nth-child(3n) figure { rotate: -.3deg; }
/* the form, on its own card, under a tiny old-web badge */
.gb-sign { padding: clamp(26px, 4vw, 38px) clamp(20px, 4vw, 38px) clamp(26px, 4vw, 36px); }
.gb-badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 7px 13px 7px 12px; border-radius: 3px;
  font: 500 12px/1.3 var(--wf-font-read); letter-spacing: .16em; text-transform: uppercase;
  color: var(--wf-c-gold); border: 1px solid rgb(201 138 36 / .55);
  background: linear-gradient(180deg, rgb(246 197 111 / .2), rgb(246 197 111 / .05));
  box-shadow: inset 0 0 0 2px var(--wf-cream), inset 0 0 0 3px rgb(201 138 36 / .25);
}
.gb-badge svg { width: 10px; height: 10px; flex: none; fill: currentColor; }
.gb-nojs { margin: 0; font-size: 17.5px; color: var(--wf-c-soft); }
.gb-row { display: grid; gap: 18px 14px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.gb-field { margin-top: 18px; }
.gb-row .gb-field { margin-top: 0; }
/* the name's note sits in the second row: under both fields side by side, or right under First name when the
   fields stack on the narrowest phones */
.gb-row .gb-err { grid-column: 1 / -1; grid-row: 2; margin-top: -10px; }
.gb-field label, .gb-stamps legend {
  display: block; margin: 0 0 7px; padding: 0;
  font: 400 17px/1.3 var(--wf-font-display); letter-spacing: .01em; color: var(--wf-c-ink);
}
.gb-opt { font-family: var(--wf-font-read); font-style: italic; color: var(--wf-c-soft); line-height: 1; }
.gb-field input, .gb-field textarea {
  display: block; width: 100%; margin: 0; min-height: 48px; padding: 11px 14px;
  background: var(--wf-b-field); color: var(--wf-c-ink); border: 1px solid var(--wf-c-ghost-edge); border-radius: var(--wf-r-input);
  font: 400 18px/1.45 var(--wf-font-read);
}
.gb-field textarea { min-height: 116px; max-height: 320px; resize: vertical; field-sizing: content; }
.gb-field input:focus-visible, .gb-field textarea:focus-visible { outline: 2px solid var(--wf-c-link); outline-offset: 2px; border-color: var(--wf-c-link); }
.gb-field [aria-invalid="true"] { border-color: var(--wf-b-trouble); }
.gb-count { margin: 6px 0 0; text-align: right; font: italic 400 15px/1.4 var(--wf-font-read); font-variant-numeric: tabular-nums; color: var(--wf-c-soft); }
.gb-count.near { color: var(--wf-c-gold); }
.gb-err { margin: 6px 0 0; font-size: 16px; color: var(--wf-b-trouble); }
/* the stamp picker: three radio buttons that look like stamps. The picked one lifts, tips and glows, and its name
   is underlined and darker; the others rest a little smaller */
.gb-stamps { border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }
.gb-stamp-row { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 4px; }
.gb-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 78px; padding: 12px 6px 4px; border-radius: 12px; cursor: pointer; }
.gb-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.gb-pick .gb-lift { display: block; transform: scale(.88); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), filter .35s ease; }
.gb-pick .gb-stamp { width: 54px; height: 63px; }
.gb-pick-name { font: 400 15.5px/1.3 var(--wf-font-display); letter-spacing: .01em; color: var(--wf-c-soft); text-underline-offset: 5px; }
.gb-pick:hover .gb-lift { transform: scale(.94); }
.gb-pick input:checked + .gb-lift { transform: translateY(-4px) rotate(-5deg) scale(1.02); filter: drop-shadow(0 8px 12px rgb(201 138 36 / .45)); }
.gb-pick input:checked ~ .gb-pick-name { color: var(--wf-c-ink); text-decoration: underline 2px var(--wf-gold); }
.gb-pick:has(input:focus-visible) { outline: 2px solid var(--wf-c-link); outline-offset: 2px; }
.gb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.gb-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.gb-send p { margin: 0; flex: 1 1 14em; font-size: 15.5px; line-height: 1.5; color: var(--wf-c-soft); }
.gb-status { margin: 14px 0 0; font-size: 16px; color: var(--wf-b-trouble); }
.gb-status:empty { display: none; }
/* after signing: a thank-you, the note as it will look, and a way to write another */
.gb-thanks { text-align: center; }
.gb-sign.thanked .gb-badge { display: flex; width: fit-content; margin-inline: auto; }
.gb-thanks h3 { font-size: clamp(26px, 3vw, 32px); }
.gb-thanks h3:focus { outline: none; }
.gb-thanks > p { margin: 10px auto 0; max-width: 26em; color: var(--wf-c-text); }
.gb-thanks .gb-notes { margin: 44px auto 0; max-width: 420px; text-align: left; }
.gb-thanks .gb-notes > .gb-note figure { rotate: -.8deg; box-shadow: 0 0 0 1px var(--wf-c-rule), 0 18px 34px -22px rgb(38 42 94 / .55); }
.gb-again {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 28px; padding: 10px 26px;
  border-radius: var(--wf-r-pill); border: 1px solid var(--wf-c-ghost-edge); background: transparent; color: var(--wf-c-ink); cursor: pointer;
  font: 400 17px/1.2 var(--wf-font-display); letter-spacing: .01em;
  transition: background-color var(--wf-dur-quick) ease;
}
.gb-again:hover { background: rgb(84 72 160 / .08); }
.gb-thanks.settle .gb-note { animation: gb-settle 1.1s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes gb-settle { from { opacity: 0; transform: translateY(-18px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .gb-pick .gb-lift { transition: none; }
  .gb-thanks.settle .gb-note { animation: none; }
}
@media (min-width: 640px) {
  .gb-notes > .gb-note:nth-child(3n+1) figure { rotate: -1deg; }
  .gb-notes > .gb-note:nth-child(3n+2) figure { rotate: .8deg; }
  .gb-notes > .gb-note:nth-child(3n) figure { rotate: -.4deg; }
  .gb-note .gb-stamp { width: 54px; height: 63px; margin: -44px -10px 8px 16px; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .gb-grid > * { width: 100%; max-width: 600px; margin-inline: auto; }
  .gb-board .gb-note:nth-child(3n+2) { margin-left: 8%; }
  .gb-board .gb-note:nth-child(3n) { margin-left: 3%; margin-right: 5%; }
}
@media (min-width: 900px) {
  .gb-grid { grid-template-columns: 1fr 1.06fr; gap: clamp(48px, 6vw, 80px); }
  .gb-board .gb-note:nth-child(3n+2) { margin-left: 9%; margin-right: -2%; }
  .gb-board .gb-note:nth-child(3n) { margin-left: 3%; margin-right: 6%; }
}
@media (max-width: 420px) {
  .gb-send .btn { width: 100%; }
  .gb-stamp-row { justify-content: space-between; gap: 8px 4px; }
  .gb-pick { min-width: 0; flex: 1; }
}

/* =============================== the mailbox =============================== */
/* The painting stays put (sticky) while the card passes over it; its top and foot melt into the twilight on the
   same eased curve as the hero. */
.scene { position: relative; isolation: isolate; }
.scene-art { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; z-index: -2; }
.scene-art picture, .scene-art img { width: 100%; height: 100%; }
.scene-art img { object-fit: cover; object-position: var(--focus, 50% 50%); }
.scene::before, .scene::after { content: ''; position: absolute; left: 0; right: 0; height: 220px; z-index: -1; pointer-events: none; }
.scene::before { top: 0; background: var(--wf-melt-ramp-up); }
.scene::after { bottom: 0; background: var(--wf-melt-ramp); }
.scene-body { position: relative; margin-top: -100vh; margin-top: -100lvh; min-height: 100vh; min-height: 100lvh; display: flex; align-items: center; padding-top: 16vh; padding-bottom: 16vh; }
.contact { --focus: 10% 62%; }   /* the painting leans left so the mailbox stays clear of the card, 1024 px wide and up */
.contact-card { max-width: 500px; }
.contact-card h2 { margin-bottom: 18px; }
.contact-card .btns { margin-top: 24px; }
.contact-links { margin: 18px 0 0; }
.contact-links a { display: inline-flex; align-items: center; min-height: var(--wf-tap); }

/* ---------- footer ---------- */
.site-foot { padding: 60px 0 calc(70px + env(safe-area-inset-bottom)); text-align: center; background: var(--wf-foot); }
.site-foot ul { list-style: none; padding: 0; margin: 18px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 26px; }
.site-foot li a { display: inline-flex; align-items: center; min-height: var(--wf-tap); }
.site-foot a { color: var(--wf-ink); }
.site-foot .brand .wm { font-size: 30px; }
.site-foot .fine { color: var(--wf-ink-soft); font-size: 16px; }

/* =============================== smaller screens =============================== */
@media (max-width: 1080px) {
  .tiers { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .tier-art { aspect-ratio: 5 / 4; }
  .tier-art img { object-position: 50% 62%; }
  .every-plan, .panel { max-width: 560px; margin-inline: auto; }
  .every-plan ul { columns: 1; }
  .panel-cols { grid-template-columns: 1fr; }
  .piece { grid-template-columns: 1fr; }
  .faq-grid, .about-grid, .tools-grid { grid-template-columns: 1fr; }
  .faq-grid .sec-head, .tools-grid .sec-head { position: static; }
}
/* phones and narrow tablets: the lantern path sits full width above the steps, and the first step rests on the
   end of the path */
@media (max-width: 860px) {
  .how-grid { display: block; }
  .how-head { text-align: center; margin-bottom: 26px; }
  .path-art { position: relative; top: auto; max-width: none; height: auto; min-height: 0; aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none;
    width: auto; margin-inline: calc(-1 * var(--wf-gut)); }
  .path-art::after { display: none; }
  .path-art img {
    -webkit-mask: var(--wf-melt-mask-up) top / 100% 16% no-repeat, linear-gradient(transparent 15.8%, #000 15.8%, #000 80.2%, transparent 80.2%), var(--wf-melt-mask) bottom / 100% 20% no-repeat;
    mask: var(--wf-melt-mask-up) top / 100% 16% no-repeat, linear-gradient(transparent 15.8%, #000 15.8%, #000 80.2%, transparent 80.2%), var(--wf-melt-mask) bottom / 100% 20% no-repeat; }
  .how-main { position: relative; margin-top: -64px; }
  .ready-line { text-align: center; }
}
@media (max-width: 760px) {
  body { font-size: var(--wf-text-sm); }
  .card, .faq details { border-radius: 22px; }
  .faq details { border-radius: var(--wf-r-sheet); }
  .tier-art { aspect-ratio: 4 / 5; border-radius: 22px 22px 0 0; }
  .shots { padding: 0 22px 26px 0; }
  .steps li { grid-template-columns: 44px 1fr; column-gap: 16px; padding: 20px 18px; }
  .num { width: 44px; height: 44px; }
  .steps h3 { margin: 6px 0 6px; font-size: 23px; }
  .faq summary { font-size: 19.5px; }
  .prices-cta .btn { width: 100%; }
  .contact-card .btn { flex: 1 1 100%; }
}

/* phones, narrow tablets and any portrait screen: the mailbox painting sits above the card (so the mailbox always
   shows), melting into the twilight at both ends, and the card rests on its lower edge */
@media (max-width: 900px), (orientation: portrait) {
  .contact { --focus: 46% 72%; }
  .scene-art { position: relative; height: auto; aspect-ratio: 16 / 11; }
  .scene-art img {
    -webkit-mask: var(--wf-melt-mask-up) top / 100% 18% no-repeat, linear-gradient(transparent 17.8%, #000 17.8%, #000 76.2%, transparent 76.2%), var(--wf-melt-mask) bottom / 100% 24% no-repeat;
    mask: var(--wf-melt-mask-up) top / 100% 18% no-repeat, linear-gradient(transparent 17.8%, #000 17.8%, #000 76.2%, transparent 76.2%), var(--wf-melt-mask) bottom / 100% 24% no-repeat; }
  .scene::before, .scene::after { display: none; }
  .scene-body { margin-top: -90px; min-height: 0; display: block; padding-top: 0; padding-bottom: 56px; }
  .contact-card { margin-inline: auto; }
}
@media (max-width: 600px) { .scene-art { aspect-ratio: 5 / 6; } }
/* narrow tablets: the lantern path is a framed panel in the middle instead of edge to edge (it stays sharp) */
@media (min-width: 601px) and (max-width: 860px) {
  .path-art { max-width: 540px; margin-inline: auto; }
}

/* print: the words, on white paper */
@media print {
  .door, .hero-paint, .hero-veil, .hero-melt, .site-head, .scene-art, .dust, .glint { display: none !important; }
  body, .twilight, .site-foot { background: #fff !important; color: #262a5e; }
  .hero { min-height: 0; }
  .hero-text { padding: 24px 0; text-shadow: none; }
  html.js .hero .fade { opacity: 1; transform: none; filter: none; }
  .twilight { margin-top: 0; }
  .twilight::before, .field::before, .card::before, .faq details::before { display: none; }
  .card, .faq details { box-shadow: none; border: 1px solid #ccc; }
  h1, h2, .site-foot a, .eyebrow, .lede, .about-text p, .ready-line, .gb-quiet { color: #262a5e !important; text-shadow: none !important; }
}