/* Aesthetic Design Guide - the builder.
   Her website sits on top, as big and wide as the window allows, and scrolls inside its frame. Under it is one row of choices
   (the deck), and every card in it is a small copy of her own page. The page around them takes her colors, like the front door.
   The little website has its own shapes: they belong to the look she is making, never to us. */

@property --page { syntax: '<color>'; inherits: true; initial-value: #CFE1EC; }
@property --cta { syntax: '<color>'; inherits: true; initial-value: #13294B; }
@property --cta-ink { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }

:root {
  --page: #CFE1EC; --ink: #13294B; --ink-2: #3B5577; --line: rgba(19, 41, 75, .16); --card: #EAF3F8; --pop: #E2553D; --rbtn: 12px;
  --cta: #2A2530; --cta-ink: #FFFFFF;
  --serif: 'Young Serif', Georgia, serif;
  --sans: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Bradley Hand', cursive;
  --r-card: 18px;
  --shadow: 0 1px 2px rgba(19, 41, 75, .06), 0 12px 32px -10px rgba(19, 41, 75, .24);
  --shadow-big: 0 2px 4px rgba(19, 41, 75, .06), 0 30px 70px -24px rgba(19, 41, 75, .45);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --top: 96px;
  /* sizes. --vh is a window height that does not jump when an iPad's toolbars slide in and out (see the @supports rule below).
     --deck is the room under the stage: the deck's head (64), the cards' top gap (6), a card window (--wh, 155), its name (34)
     and the gap for the scroll bar (15). --scr is the frame's height: whatever the window has left. --seed is the line
     'We started you with three pictures picked at random', when it shows (builder.js adds .seeded). */
  --vh: 1vh;
  --g: clamp(20px, 3vw, 48px);
  --deck: 274px;
  --seed: 0px;
  --wh: 155;
  --scr: clamp(calc(340px - var(--seed)), calc(100 * var(--vh) - var(--top) - 52px - var(--deck) - var(--seed)), 640px);
  color-scheme: light;
  transition: --page .8s var(--ease), --cta .5s var(--ease), --cta-ink .5s var(--ease);
}
@supports (height: 100svh) { :root { --vh: 1svh; } }
:root.seeded { --seed: 28px; }
/* a tablet held upright: a taller deck (two rows of bigger cards); the page scrolls under the pinned stage */
@media (orientation: portrait) and (min-width: 700px) { :root { --deck: 500px; --wh: 170; } }
:root.dk { --ink: #F2ECE6; --ink-2: #B5ADB3; --line: rgba(255, 255, 255, .2); --card: #221E26; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -10px rgba(0, 0, 0, .6); --shadow-big: 0 2px 4px rgba(0, 0, 0, .3), 0 30px 70px -24px rgba(0, 0, 0, .7); color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100dvh; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
[data-icon] { display: inline-flex; width: 1.15em; height: 1.15em; flex: none; }
[data-icon] svg { width: 100%; height: 100%; fill: currentColor; }
.flip { transform: scaleX(-1); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ink); color: var(--page); padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 16px; }
/* there for screen readers, out of sight */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- top bar ---------- */
.b-top { position: sticky; top: 0; z-index: 20; height: var(--top); display: flex; align-items: center; gap: 24px; padding: 0 clamp(20px, 4vw, 56px); background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.brand { font: 400 23px/1 var(--serif); color: var(--ink); text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.brand::before { content: ''; display: inline-block; vertical-align: middle; width: 55px; height: 84px; margin-right: 12px; background: url(../img/logo-mark.png?v=3) center / contain no-repeat; }
.steps { display: flex; gap: 6px; margin: 0 auto; }
.stp { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border: 0; border-radius: var(--rbtn); background: transparent; color: var(--ink-2); font-size: 14.5px; font-weight: 600; transition: background .2s, color .2s; }
/* the step buttons, the group chips and the text buttons are 40px to look at and 44px to tap */
.stp::before, .textbtn::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
.chip::before { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: -3.5px; bottom: -3.5px; }  /* measured from inside the 1.5px border */
.stp i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); font-style: normal; font-size: 13px; font-weight: 700; }
.stp i [data-icon] { width: 14px; height: 14px; }
.stp:hover { color: var(--ink); }
.stp.on { background: var(--ink); color: var(--page); }
.stp.on i { background: var(--page); color: var(--ink); border-color: transparent; }
.stp.past i { background: var(--cta); color: var(--cta-ink); border-color: transparent; }
.toplink { font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 10px 18px; border: 1.5px solid var(--line); border-radius: var(--rbtn); white-space: nowrap; }
.toplink:hover { border-color: var(--ink); }

/* ---------- layout: the stage on top, the deck under it ---------- */
.b-main { display: block; max-width: 1560px; margin: 0 auto; padding: 0 var(--g); }
.b-stage { position: sticky; top: var(--top); z-index: 10; padding-top: 8px; background: var(--page); isolation: isolate; }
.b-stage::before { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; top: 14%; height: 66%; border-radius: 50%; background: radial-gradient(closest-side, var(--cta), transparent); filter: blur(46px); opacity: .22; transition: opacity .6s; }
/* a soft edge under the pinned stage, so cards slide away under it instead of being cut */
.b-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; background: linear-gradient(var(--page), color-mix(in srgb, var(--page) 0%, transparent)); pointer-events: none; }

/* ---------- the browser frame ---------- */
.browser { position: relative; border-radius: var(--r-card); background: #fff; box-shadow: 0 2px 4px rgba(19, 41, 75, .06), 0 18px 40px -22px rgba(19, 41, 75, .4), 0 0 0 1px rgba(0, 0, 0, .07); overflow: hidden; }
.bar { height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 10px 0 14px; background: #F2F0EE; border-bottom: 1px solid #E3DFDC; color: #3A3540; }
.dots { display: flex; gap: 7px; flex: none; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #DDD; }
.dots i:nth-child(1) { background: #EE8B7E; } .dots i:nth-child(2) { background: #F2C46B; } .dots i:nth-child(3) { background: #9FCB8A; }
/* her pages, as browser tabs. They scroll sideways, with a fade at the right when there are more */
/* her pages, as tabs above the frame (the frame is only as wide as her page, so they wrap instead of scrolling) */
.stage-tools { margin: 0 0 8px; padding: 4px; border-radius: 16px; background: #F2F0EE; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); }
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.tab { position: relative; flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #5A5560; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.tab::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.tab.on { background: var(--site-bg, #fff); color: var(--site-ink, #13294B); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .1); }
.tab:focus-visible, .mo-chip:focus-visible, .zoom-btn:focus-visible { outline: 2px solid #13294B; outline-offset: -2px; }
@media (hover: hover) { .tab:not(.on):hover { background: rgba(0, 0, 0, .06); color: #13294B; } }
.url { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 220px; height: 28px; padding: 0 12px; border-radius: 999px; background: #fff; font-size: 13px; color: #5A5560; white-space: nowrap; overflow: hidden; }
.url #url { overflow: hidden; text-overflow: ellipsis; }
.url [data-icon] { width: 12px; height: 12px; opacity: .6; }
/* the motion chip: names her opening and plays it again */
.mo-chip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 999px; background: #fff; color: #13294B; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.mo-chip::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.mo-chip .glyph { width: 16px; height: 16px; }
/* Zoom in / Whole page: 32px to look at, 44px to tap */
.zoom-btn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-left: auto; padding: 0 12px 0 9px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 999px; background: #fff; color: #13294B; font-size: 13px; font-weight: 600; white-space: nowrap; }
.zoom-btn::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.zoom-btn svg { width: 16px; height: 16px; }
.zoom-btn[aria-pressed="true"] { background: #13294B; border-color: #13294B; color: #fff; }
span.mo-chip { cursor: default; }
.screen { position: relative; height: var(--scr); overflow: hidden; background: var(--site-bg, #fff); }
.screen:focus-visible { outline: 3px solid #13294B; outline-offset: -3px; border-radius: 0; }
.screen-tip { position: absolute; z-index: 7; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: min(560px, calc(100% - 24px)); margin: 0; padding: 10px 16px; border-radius: 14px; background: rgba(35, 31, 39, .88); color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.35; text-align: center; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .5); pointer-events: none; }
.stamp { position: absolute; z-index: 6; right: 18px; bottom: 18px; font: 700 15px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: #C2262E; padding: 10px 10px 10px 14px; border: 2.5px solid #C2262E; border-radius: 8px; background: rgba(255, 255, 255, .88); transform: rotate(-7deg); opacity: 0; pointer-events: none; transition: opacity .3s; }
.stamp.on { opacity: 1; }
body[data-step="finish"] .stamp { font-size: 19px; padding: 12px 12px 12px 18px; }

/* ---------- words, buttons and fields ---------- */
.kicker { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
h1 { margin: 0 0 10px; font: 400 clamp(34px, 3.3vw, 46px)/1.04 var(--serif); letter-spacing: -.02em; }
h1:focus, h1:focus-visible { outline: none; }
.sub { margin: 0 0 22px; color: var(--ink-2); font-size: 17.5px; max-width: 44ch; }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border: 0; border-radius: var(--rbtn); background: var(--cta); color: var(--cta-ink); font-size: 17px; font-weight: 700; box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s; }
@media (hover: hover) { .cta:hover { transform: translateY(-2px); } }
.cta:active { transform: scale(.97); }
.cta-ico { display: inline-flex; width: 1.2em; height: 1.2em; }
.cta-ico svg { width: 100%; height: 100%; fill: currentColor; }
.ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 22px; border: 1.5px solid var(--line); border-radius: var(--rbtn); background: transparent; color: var(--ink); font-size: 16px; font-weight: 600; }
@media (hover: hover) { .ghost:hover { border-color: var(--ink); } }
.textbtn { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 0; border: 0; background: none; color: var(--ink); font-size: 15.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.field label { display: block; font-size: 15px; font-weight: 700; }
.field input { width: 100%; padding: 0 18px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); font-size: 18px; }
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 12%, transparent); }
.more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }

/* ---------- the deck ---------- */
.seed-note { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--ink-2); }
/* each step starts with a head: what to do, the step's own control, and Back and Next. It pins right under the stage. */
.deck-head { position: sticky; top: calc(var(--top) + 52px + var(--scr)); z-index: 9; min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 8px 0 6px; background: var(--page); }
.deck-title { min-width: 0; }
.deck-title .t1 { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.deck-head h1 { min-width: 0; margin: 0; font: 400 26px/1.1 var(--serif); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-head .kicker { flex: none; margin: 0; font-size: 12px; }
.deck-head .sub { max-width: none; margin: 2px 0 0; font-size: 14.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-mid { min-width: 0; }
.deck-nav-slot { grid-column: -2; }
.deck-mid .field { display: flex; align-items: center; gap: 12px; margin: 0; }
.deck-mid .field label { white-space: nowrap; font-size: 14px; }
.deck-mid .field input { width: 300px; height: 44px; padding: 0 14px; border-radius: 12px; font-size: 16px; }
.count { max-width: 260px; margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.35; }
.b-nav { display: flex; align-items: center; gap: 10px; }
.b-nav .ghost, .b-nav .cta { min-height: 48px; white-space: nowrap; }
.b-nav .ghost { padding: 0 18px; font-size: 15.5px; }
.b-nav .cta { padding: 0 22px; font-size: 16px; }
/* Your pieces: the group chips, and the line under them */
.step[data-step="pieces"] .deck-head { padding: 2px 0; column-gap: 14px; }
/* The chips keep one width in every group (Show me others and See them all sit in the row, Next keeps one width), so they never
   jump. When they do not all fit, the end with more fades, and a mouse gets a round arrow there; fingers swipe. */
.chips-wrap { position: relative; }
.chips { position: relative; display: flex; gap: 5px; margin: -6px; padding: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips-wrap.can-r .chips { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 60px), transparent calc(100% - 6px)); mask-image: linear-gradient(to right, #000 calc(100% - 60px), transparent calc(100% - 6px)); }
.chips-wrap.can-l .chips { -webkit-mask-image: linear-gradient(to right, transparent 6px, #000 60px); mask-image: linear-gradient(to right, transparent 6px, #000 60px); }
.chips-wrap.can-l.can-r .chips { -webkit-mask-image: linear-gradient(to right, transparent 6px, #000 60px, #000 calc(100% - 60px), transparent calc(100% - 6px)); mask-image: linear-gradient(to right, transparent 6px, #000 60px, #000 calc(100% - 60px), transparent calc(100% - 6px)); }
.chip-arrow { display: none; position: absolute; z-index: 2; top: 50%; width: 36px; height: 36px; margin-top: -18px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.chip-arrow::before { content: ""; position: absolute; inset: -4px; }
.chip-arrow [data-icon] { width: 18px; height: 18px; }
.chip-arrow.l { left: -4px; }
.chip-arrow.r { right: -4px; }
@media (pointer: fine) { .chips-wrap.can-l .chip-arrow.l, .chips-wrap.can-r .chip-arrow.r { display: grid; } }
.chip { position: relative; flex: none; height: 40px; padding: 0 11px; border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
@media (hover: hover) { .chip:not(.on):hover { border-color: var(--ink); color: var(--ink); } }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--page); }
.step[data-step="pieces"] .sub { margin-top: 1px; font-size: 13.5px; }
/* Show me others and See them all, first in the Lettering and Buttons rows */
.row-act.group-btns { width: 158px; gap: 2px; padding: 0 10px; cursor: default; }
.group-btns .more { justify-content: center; width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
.group-btns .more [data-icon] { width: 16px; height: 16px; }
/* Next keeps one width while it walks the groups, so the chips beside it keep theirs */
.step[data-step="pieces"] #nextBtn { min-width: 254px; }

/* one row of cards, sideways. --crop is how tall a slice of her 1200px-wide page each card shows */
.deck-wrap { position: relative; }
.deck-row { --cw: calc(var(--wh) * 1200px / var(--crop)); display: flex; gap: 14px; margin: 0 -6px; padding: 6px 6px 15px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: 6px; scrollbar-width: thin; }
.deck-row > * { flex: none; scroll-snap-align: start; }
.crop-top { --crop: 750; }
.crop-tall { --crop: 900; }
.crop-bar { --crop: 420; }
.crop-page { --crop: 1600; }
/* for a mouse: round arrows over the row's ends, only when the row can move that way (never on hover) */
.row-arrow { display: none; position: absolute; z-index: 4; top: calc(6px + var(--wh) * .5px - 22px); width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.row-arrow [data-icon] { width: 20px; height: 20px; }
.row-arrow.l { left: -16px; }
.row-arrow.r { right: -16px; }
@media (pointer: fine) { .deck-wrap.can-l .row-arrow.l, .deck-wrap.can-r .row-arrow.r { display: grid; } }

/* a card: a window onto her page, and its name under it */
.card { position: relative; display: block; width: calc(var(--cw) + 4px); padding: 0; border: 2px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
@media (hover: hover) { .card:not(.locked):hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); transform: translateY(-2px); } }
.card:active { transform: scale(.98); }
.card.on { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 14%, transparent); }
.card.on::after { content: ""; position: absolute; z-index: 3; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 0 2px #fff; }
:root.dk .card.on::after { background-color: var(--page); filter: invert(1); }
.card.locked { cursor: default; }
.card-l { display: flex; flex-direction: column; justify-content: center; height: 30px; padding: 0 10px; overflow: hidden; }
.card-l b { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; line-height: 15px; font-weight: 700; }
.card-l b > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-l b .glyph { flex: none; width: 15px; height: 15px; }
.card-l small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 12px; line-height: 14px; font-weight: 600; }
.win { position: relative; display: block; width: var(--cw); height: calc(var(--wh) * 1px); overflow: hidden; border-radius: 12px 12px 0 0; }
/* a mini: her page drawn at 1200px wide, then shrunk. Pure CSS, nothing measured, so every card is an exact small copy. */
.mini { content-visibility: auto; background: #fff; }
.mini-in { position: absolute; left: 0; top: 0; width: 1200px; height: calc(var(--crop) * 1px); transform-origin: 0 0; transform: scale(calc(var(--wh) / var(--crop))); pointer-events: none; }
/* with movement off, the Motion cards say in words what would move */
.mo-line { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; background: linear-gradient(rgba(20, 16, 22, 0), rgba(20, 16, 22, .78) 45%); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; }
/* the hand-made cards (lettering pairs, everyday words, buttons, shapes, textures) wear her page's colors */
.sw { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 12px 14px; background: var(--bg); color: var(--ink); font: 400 13px/1.35 var(--body, var(--sans)); }
.sw .d { font-family: var(--fd); font-style: var(--fds); font-weight: var(--fdw); text-transform: var(--fdc); letter-spacing: var(--fdt); }
.sw-h { max-width: 100%; font-size: min(calc(24px * var(--fdz)), 28px); line-height: 1.05; padding-bottom: .06em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-p { max-width: 100%; font-size: 13px; line-height: 1.35; opacity: .88; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw .pv-btn { flex: none; margin-top: 2px; font-size: 12.5px; min-height: 2.5em; padding: 0 1.1em; }
.sw .pv-btn[data-btn="line"] { min-height: 0; padding: 0 0 .35em; }
.sw-items { display: flex; gap: 14px; max-width: 100%; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.sw-btn { gap: 12px; }
.sw-btn .pv-btn { font-size: 14px; }
.sw-shape { align-items: center; padding: 14px; --u: 3.6px; }
.sw-shape .pv-pic { height: 100%; aspect-ratio: 1 / .82; }
.sw-tex { position: relative; align-items: center; text-align: center; }
.sw-tex .sw-h { position: relative; z-index: 1; }
.add-win { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--card); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.add-win .plus { width: 28px; height: 28px; color: var(--ink); }
.add-win .plus svg { width: 100%; height: 100%; fill: currentColor; }
.card.ownfont { cursor: pointer; border-style: dashed; }
.card.ownfont.on { border-style: solid; }
.wheel-win { display: grid; place-items: center; background: var(--card); }
.wheel { position: relative; display: block; width: 44%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 20deg, #E5484D, #F5A524, #F2D400, #30A46C, #0091FF, #6E56CF, #D6409F, #E5484D); }
.wheel::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--card); }
/* Play them all again, first in the Motion row */
.row-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 132px; height: calc(var(--wh) * 1px + 34px); padding: 0 14px; border: 2px dashed var(--line); border-radius: 14px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.25; text-align: center; }
.row-act [data-icon] { width: 22px; height: 22px; }
.own-input { opacity: 0; }

/* her own colors: five color roles and three sliders, in a panel right after the Your own card */
.picker { display: flex; flex-direction: column; gap: 8px; width: 360px; height: calc(var(--wh) * 1px + 34px); padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); overflow: auto; }
.roles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.role { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 48px; padding: 4px 0; border: 1.5px solid transparent; border-radius: 10px; background: transparent; font-size: 11.5px; font-weight: 600; }
.role i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(128, 128, 128, .5); }
.role.on { border-color: var(--ink); }
.sliders { display: grid; gap: 6px; }
.slide { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.slide input { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; border-radius: 12px; background: var(--track, #888); box-shadow: inset 0 0 0 1.5px rgba(128, 128, 128, .45); cursor: pointer; }
.slide input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid #13294B; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.slide input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #13294B; }
.warn { margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); font-style: italic; }

/* the last step: what she chose, the odds, and Take it home, side by side */
.finish { display: grid; grid-template-columns: 1.25fr .85fr 1.1fr; gap: 28px; align-items: start; padding: 4px 0 6px; }
.fin-col { min-width: 0; }
.recap { list-style: none; margin: 0; padding: 0; }
.recap li { display: flex; justify-content: space-between; gap: 18px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.35; }
.recap li span { color: var(--ink-2); }
.recap li b { text-align: right; font-weight: 600; max-width: 74%; }
.finish .textbtn { margin-top: 2px; }
.odds { margin: 0; font: italic 400 21px/1.3 var(--serif); }
.takehome { padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--card); }
.takehome .cta { min-height: 50px; }
.price { margin: 10px 0 2px; font-size: 15.5px; }
/* the extras beside the buy button (14 Oct 2026): ticks, each with its price; the helper works out what is charged */
.th-base { display: flex; justify-content: space-between; gap: 14px; margin: 2px 0 0; padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 15.5px; font-weight: 600; }
.extras { margin: 10px 0 14px; padding: 0; border: 0; min-width: 0; }
.extras legend { margin-bottom: 4px; padding: 0; color: var(--ink-2); font-size: 14px; }
.ex { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; margin: 0 -10px; padding: 5px 10px; border-radius: 12px; cursor: pointer; }
.ex:hover { background: var(--line); }
.ex input { width: 18px; height: 18px; margin: 0; accent-color: var(--cta); }
.ex-t b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ex-t small { display: block; color: var(--ink-2); font-size: 13px; line-height: 1.3; }
.ex-p { font-size: 15px; font-weight: 600; text-align: right; white-space: nowrap; }
.ex-p em { display: block; color: var(--ink-2); font-size: 12.5px; font-style: normal; }
.ex-all { margin-top: 6px; border: 1.5px dashed var(--line); }
.ex-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 6px 32px; }
.ex-card p { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: 13px; }
.ex-card label { display: grid; gap: 3px; font-size: 12.5px; font-weight: 600; min-width: 0; }
.ex-card input { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-weight: 400; font-size: 14px; }
.th-go { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.th-go .price { margin: 0; }
.extras[hidden] + .th-go { margin-top: 14px; }
.honest { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.42; }
.demo { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); font-style: italic; }

/* ---------- the little website: the stage and every mini are drawn from the same page (pageHTML in builder.js) ---------- */
/* No container-height units anywhere: a mini has no height to measure. --fh is the height of the window the page is seen through:
   on the stage the frame (--scr), in a mini the card's crop. The top bar and the hero use it (min() against their usual
   width-based size), so a short, wide frame still shows the top bar, the headline and the button whole. */
.pv { container-type: inline-size; --u: 1cqi; --fh: 100000px; background: var(--bg); color: var(--ink); font: 400 15px/1.45 var(--body, var(--sans)); }
.screen .pv { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; --fh: var(--scr); }
/* her WHOLE page at real desktop width (1440), made small enough to fit, like a picture of the full page (Rachel, 7 Oct: "make it
   the dimensions of a full desktop website - just make it smaller so it fits the area - then let people zoom into it"). builder.js
   (fitStage) measures the page and sets --s (the size it is drawn at), --fw (the frame's width) and --fh2 (the frame's height).
   Zoomed in, the frame takes the whole width and the page scrolls inside it. The picture keeps a laptop's first screen (900 tall)
   for its top section, and the content band of her real theme (1200 wide). */
.b-stage .browser { width: var(--fw, 100%); max-width: 100%; margin: 0 auto; }
.screen { width: var(--fw, 100%); height: var(--fh2, var(--scr)); }
.screen .pv { container-type: inline-size; right: auto; bottom: auto; width: 1440px; height: calc(var(--fh2, var(--scr)) / var(--s, 1)); transform: scale(var(--s, 1)); transform-origin: 0 0; --fh: 900px; }
.b-stage:not(.zoomed) .screen .pv { overflow: hidden; }
.b-stage:not(.zoomed) .screen { cursor: zoom-in; }
.screen .pv-page > :is(.pv-nav, .pv-hero, .pv-strip, .pv-row, .pv-story, .pv-quote, .pv-sec, .pv-foot) { padding-inline: max(calc(3.6cqi * var(--gap)), calc(50% - 600px)); }
.pv.fading, .pv.leaving { z-index: 4; pointer-events: none; }
/* a page about to play its opening holds the moving parts out of sight until it starts, so it never shows whole and then blinks */
.pv.mo-wait :is(.mo-over, .mo-h, .mo-p, .mo-btn, .mo-pic img) { opacity: 0; }
.pv.fading { transition: opacity .55s cubic-bezier(.4, 0, .2, 1); }
.mini-in .pv { position: static; min-height: 100%; overflow: hidden; --fh: calc(var(--crop) * 1px); }
.pv .d { font-family: var(--fd); font-style: var(--fds); font-weight: var(--fdw); text-transform: var(--fdc); letter-spacing: var(--fdt); }
.pv-tex { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* .pv-page holds the texture, the top bar, every section and the footer, so the texture runs the page's full height */
.pv-page { position: relative; min-height: 100%; }
.pv-page > :not(.pv-tex) { position: relative; z-index: 1; }
.pv-btn { font-synthesis: none; }
.pv-links .on, .pv-foot-links .on { text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .4em; }


/* the backdrop (once Texture) is drawn by extras.js and placed by extras.css on .pv-tex */
/* a border strip (13 Oct 2026): the top band in its own room under the top bar, the bottom band under the footer (pageHTML puts
   .pv-edge there instead of .pv-tex), so it never sits behind the bar's name and menu, or behind the footer's words or band */
.pv-edge { display: block; height: var(--bde-h); background: var(--bde-t) left 0 top 0 / var(--bde-s) repeat-x; }
.pv-edge-b { background-image: var(--bde-b); background-position: left 0 bottom 0; }

/* top bar styles */
.pv-nav { display: flex; align-items: center; gap: 3cqi; padding: calc(min(2.4cqi, calc(var(--fh) * .035)) * var(--gap)) calc(3.6cqi * var(--gap)); border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.pv-logo { font-size: calc(min(3.1cqi, calc(var(--fh) * .065)) * var(--fdz)); line-height: 1; margin-right: auto; white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.pv-links { display: flex; gap: 2.8cqi; font-size: clamp(10px, 1.75cqi, 14px); font-weight: 500; }
.pv-links span { white-space: nowrap; }
.pv-ico { width: clamp(14px, 2.4cqi, 20px); height: clamp(14px, 2.4cqi, 20px); }
.pv-ico svg { width: 100%; height: 100%; fill: currentColor; }
.pv-menu { display: none; }
.pv[data-head="center"] .pv-nav { flex-direction: column; gap: 1.2cqi; }
.pv[data-head="center"] .pv-logo { margin: 0; max-width: 90%; font-size: calc(min(3.7cqi, calc(var(--fh) * .07)) * var(--fdz)); }
.pv[data-head="center"] .pv-ico:not(.pv-menu) { position: absolute; right: 3.6cqi; top: 2.6cqi; }
.pv[data-head="split"] .pv-nav { display: grid; grid-template-columns: 1fr auto 1fr; }
.pv[data-head="split"] .pv-links { order: -1; }
.pv[data-head="split"] .pv-logo { margin: 0; text-align: center; max-width: none; overflow: visible; }
.pv[data-head="split"] .pv-ico:not(.pv-menu) { justify-self: end; }
.pv[data-head="stack"] .pv-nav { flex-wrap: wrap; row-gap: 1.2cqi; border-bottom: .5cqi solid var(--ink); padding-bottom: 0; }
.pv[data-head="stack"] .pv-logo { flex: 1 1 100%; max-width: 100%; font-size: calc(min(4.8cqi, calc(var(--fh) * .085)) * var(--fdz)); margin: 0; }
.pv[data-head="stack"] .pv-links { width: 100%; justify-content: space-between; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(8px, 1.4cqi, 12px); padding: 1.2cqi 0; border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.pv[data-head="stack"] .pv-ico { display: none; }
.pv[data-head="minimal"] .pv-links { display: none; }
.pv[data-head="minimal"] .pv-menu { display: inline-flex; }
.pv[data-head="minimal"] .pv-ico:not(.pv-menu) { display: none; }
/* a border strip under the top bar is the bar's edge: the bar's own line, and the stacked header's rule, give way to it, so the two never
   make doubled or tripled lines (13 Oct 2026, review). Only their color goes, so nothing moves. */
.pv .pv-page > .pv-nav:has(+ .pv-edge) { border-bottom-color: transparent; }

/* the front of the page */
.pv-hero { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: calc(4cqi * var(--gap)); align-items: center; padding: calc(min(3.4cqi, calc(var(--fh) * .055)) * var(--gap)) calc(3.6cqi * var(--gap)) calc(min(3.2cqi, calc(var(--fh) * .05)) * var(--gap)); }
.pv-over { margin: 0 0 min(1.2cqi, calc(var(--fh) * .02)); font-size: clamp(9px, 1.55cqi, 13px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.pv-h { margin: 0 0 min(1.6cqi, calc(var(--fh) * .025)); font-size: calc(min(6.6cqi, calc(var(--fh) * .1)) * var(--fdz)); line-height: 1.04; padding-bottom: .05em; }
.pv-p { margin: 0 0 min(2.6cqi, calc(var(--fh) * .04)); font-size: clamp(11px, 2.05cqi, 17px); line-height: 1.45; max-width: 34ch; opacity: .88; }
.pv-media { position: relative; height: min(40cqi, calc(var(--fh) * .5)); }
.pv-pic, .pv-shot { position: relative; display: block; overflow: hidden; background: var(--soft); }
.pv-media .pv-pic.main { position: absolute; inset: 0; }
.pv-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pv[data-lay="arch"] .pv-hero { grid-template-columns: .82fr 1fr; text-align: center; }
.pv[data-lay="arch"] .pv-media { order: -1; height: min(44cqi, calc(var(--fh) * .54)); }
.pv[data-lay="arch"] .pv-p { margin-inline: auto; }
.pv[data-lay="full"] .pv-hero { grid-template-columns: 1fr; min-height: min(47cqi, calc(var(--fh) * .62)); padding: 6cqi 5cqi; color: #FFF8EF; }
.pv[data-lay="full"] .pv-media { position: absolute; inset: 0; height: auto; }
.pv[data-lay="full"] .pv-media .pv-pic { border-radius: 0 !important; clip-path: none !important; padding: 0 !important; transform: none !important; box-shadow: none !important; }
.pv[data-lay="full"] .pv-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 10, 8, .74), rgba(14, 10, 8, .4) 55%, rgba(14, 10, 8, .06)); }
.pv[data-lay="full"] .pv-copy { position: relative; z-index: 1; max-width: 58%; }
/* a see-through main button on the full-picture top (13 Oct 2026, Rachel: the underlined link's words were dark on the dark photo): its
   words take the photo's light words, as the second button's do, and its ring, line or brackets her button color fitted to the shaded
   photo as the headline word's is (--accf, written by builder.js only when her color needs it). A filled button keeps its own colors. */
.pv[data-lay="full"] .pv-hero { --bacc: var(--accf, var(--acc)); }
.pv[data-lay="full"] .pv-hero .pv-btn:is([data-btn="outline"], [data-btn="ghost"], [data-btn="line"], [data-btn="glow"], [data-btn="bracket"]) { --acc: var(--bacc); color: inherit; }
.pv[data-lay="framed"] .pv-media { padding: 1.7cqi; background: var(--soft); box-shadow: 1.8cqi 1.8cqi 0 var(--acc); margin: 0 1.8cqi 1.8cqi 0; }
.pv[data-lay="framed"] .pv-media .pv-pic.main { inset: 1.7cqi; }
.pv[data-lay="center"] .pv-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 2.4cqi; }
.pv[data-lay="center"] .pv-p { margin-inline: auto; }
.pv[data-lay="center"] .pv-media { order: 2; width: 100%; height: min(25cqi, calc(var(--fh) * .3)); }
.pv[data-lay="poster"] .pv-hero { grid-template-columns: 1fr; min-height: min(44cqi, calc(var(--fh) * .6)); align-items: start; padding-bottom: 4cqi; }
.pv[data-lay="poster"] .pv-h { font-size: calc(min(9.6cqi, calc(var(--fh) * .14)) * var(--fdz)); line-height: .96; }
.pv[data-lay="poster"] .pv-copy { max-width: 74%; position: relative; z-index: 2; }
.pv[data-lay="poster"] .pv-p { max-width: 30ch; }
.pv[data-lay="poster"] .pv-media { position: absolute; right: 3.6cqi; bottom: -3cqi; width: 40%; height: min(32cqi, calc(var(--fh) * .42)); z-index: 1; }
.pv[data-lay="collage"] .pv-hero { grid-template-columns: 1fr 1.2fr; }
.pv[data-lay="collage"] .pv-media { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.4cqi; }
.pv[data-lay="collage"] .pv-media .pv-pic { position: relative; inset: auto; }
.pv[data-lay="collage"] .pv-media .pv-pic.main { grid-row: 1 / 3; }

.pv-strip { padding: calc(1.3cqi * var(--gap)) 3.6cqi; background: var(--ink); color: var(--bg); font-size: clamp(9px, 1.6cqi, 13px); font-weight: 600; letter-spacing: .06em; text-align: center; }
.pv-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(2.6cqi * var(--gap)); padding: calc(3cqi * var(--gap)) calc(3.6cqi * var(--gap)); }
.pv-row-title { grid-column: 1 / -1; margin: 0; font-size: calc(3cqi * var(--fdz)); }
/* a band's tour dates (30 Oct 2026): one ruled line per show */
.pv-row.pv-tour { grid-template-columns: 1fr; row-gap: 0; }
.pv-tour .pv-date { display: grid; grid-template-columns: 1.1fr 1.4fr 1.6fr auto; align-items: center; gap: 2cqi; padding: 1.5cqi 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); font-size: clamp(10px, 1.9cqi, 16px); }
.pv-tour .pv-date b { margin: 0; text-transform: uppercase; letter-spacing: .06em; }
.pv-tour .pv-date small { opacity: .75; font-size: inherit; }
.pv-tour .pv-tix { font-style: normal; font-weight: 700; font-size: .8em; text-transform: uppercase; letter-spacing: .08em; padding: .5em 1.1em; border: 1.5px solid currentColor; border-radius: var(--rb, 99px); }
.pv-tour .pv-row-title { margin-bottom: 1.2cqi; }
.pv-grid > .pv-row-title { grid-column: 1 / -1; margin: 0 0 1cqi; }
.pv-release { border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: -10px; }
.pv-release .pv-over { margin: 0; font-size: clamp(9px, 1.4cqi, 12px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.pv-item { min-width: 0; font-size: clamp(10px, 1.75cqi, 14px); line-height: 1.3; }
.pv-item b { display: block; font-weight: 700; margin-top: .2em; }
.pv-shot { aspect-ratio: 1 / .92; margin-bottom: 1.2cqi; isolation: isolate; }
.pv-shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(1.5px) saturate(.9); transform: scale(1.08); opacity: .85; }
.pv-shot > img.clear { filter: none; transform: none; opacity: 1; }
.pv-story { display: grid; grid-template-columns: 26cqi 1fr; gap: calc(3cqi * var(--gap)); align-items: center; padding: calc(3cqi * var(--gap)) calc(3.6cqi * var(--gap)); }
.pv-story .pv-pic { aspect-ratio: 1 / .8; }
.pv-story h4 { margin: 0 0 1cqi; font-size: calc(3.4cqi * var(--fdz)); }
.pv-story p { margin: 0; font-size: clamp(10px, 1.9cqi, 15px); max-width: 44ch; opacity: .88; }
.pv-quote { padding: calc(4cqi * var(--gap)) 10cqi; text-align: center; background: var(--soft); color: var(--sink, var(--ink)); }
.pv-quote blockquote { margin: 0 0 1.4cqi; font-size: calc(3.8cqi * var(--fdz)); line-height: 1.15; }
.pv-quote cite { font-size: clamp(9px, 1.5cqi, 12px); font-style: normal; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }

/* picture shapes. --u is one hundredth of the width, so the same shape works big and small */
[data-shape="rect"] { border-radius: 0; }
[data-shape="soft"] { border-radius: calc(var(--u) * 1.8); }
[data-shape="arch"] { border-radius: 999px 999px 0 0; }
[data-shape="oval"] { border-radius: 50%; }
[data-shape="leaf"] { border-radius: calc(var(--u) * 5) calc(var(--u) * .6) calc(var(--u) * 5) calc(var(--u) * .6); }
[data-shape="blob"] { border-radius: 42% 58% 55% 45% / 55% 45% 58% 42%; }
[data-shape="cut"] { clip-path: polygon(0 0, calc(100% - var(--u) * 4) 0, 100% calc(var(--u) * 4), 100% 100%, calc(var(--u) * 4) 100%, 0 calc(100% - var(--u) * 4)); }
[data-shape="polaroid"] { background: #F7F3EA; padding: calc(var(--u) * 1.1) calc(var(--u) * 1.1) calc(var(--u) * 4.2); box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 2) rgba(0, 0, 0, .28); transform: rotate(-1.6deg); }
[data-shape="polaroid"] img { inset: calc(var(--u) * 1.1) calc(var(--u) * 1.1) calc(var(--u) * 4.2); width: calc(100% - var(--u) * 2.2); height: calc(100% - var(--u) * 5.3); }
.pv-item [data-shape="polaroid"] { transform: rotate(1.2deg); }

/* candles, cards and worksheets, as on the front door */
.candle { position: absolute; left: 50%; bottom: 13%; width: 40%; aspect-ratio: .8; transform: translateX(-50%); z-index: 1; }
.candle::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: -7%; height: 14%; border-radius: 50%; background: rgba(30, 18, 10, .35); filter: blur(4px); z-index: -1; }
.candle .lid { position: absolute; top: 0; left: 6%; right: 6%; height: 17%; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #a77b52, #6f4a2c); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.candle .jar { position: absolute; top: 15%; left: 0; right: 0; bottom: 0; border-radius: 10% 10% 16% 16% / 8% 8% 12% 12%; background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 24%, rgba(0, 0, 0, .06) 70%, rgba(255, 255, 255, .4)), var(--soft); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 -10px 14px -8px rgba(0, 0, 0, .2); }
.candle .label { position: absolute; left: 13%; right: 13%; top: 30%; bottom: 22%; display: grid; place-content: center; gap: 3%; text-align: center; background: var(--bg); color: var(--ink); border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 50%, transparent) inset; padding: 4%; overflow: hidden; }
.candle .label em { font-size: clamp(5px, 1.05cqi, 9px); font-style: var(--fds); line-height: 1.05; display: block; overflow: hidden; }
.candle .label small { font-size: clamp(4px, .8cqi, 7px); letter-spacing: .1em; text-transform: uppercase; opacity: .7; font-family: var(--body, var(--sans)); font-style: normal; }
.cards { position: absolute; inset: 14% 16% 16%; z-index: 1; }
.cards i { position: absolute; inset: 0; border-radius: 4px; background: #fff center/cover no-repeat; border: .9cqi solid #fff; box-shadow: 0 6px 14px -6px rgba(30, 18, 10, .45); }
.cards i:nth-child(1) { transform: rotate(-9deg) translate(-6%, 2%); }
.cards i:nth-child(2) { transform: rotate(5deg) translate(6%, 0); }
.cards i:nth-child(3) { transform: rotate(-1deg); display: grid; place-content: center; text-align: center; background: var(--bg); color: var(--ink); font-size: clamp(6px, 1.35cqi, 11px); padding: 6%; }
.ws { position: absolute; z-index: 1; width: 50%; aspect-ratio: .77; background: #fff; border-radius: 2px; box-shadow: 0 8px 16px -8px rgba(30, 18, 10, .5); padding: 6% 6% 0; display: flex; flex-direction: column; gap: 5%; overflow: hidden; }
.ws.a { left: 13%; top: 12%; transform: rotate(-6deg); }
.ws.b { right: 13%; top: 9%; transform: rotate(5deg); }
.ws .st { font-size: clamp(5px, 1.15cqi, 10px); line-height: 1.05; text-align: center; color: var(--sink, var(--ink)); padding: 6% 2%; background: var(--soft); border-radius: 2px; }
.ws .si { flex: none; height: 26%; border-radius: 2px; background: center/cover no-repeat; }
.ws .sl { height: 3px; flex: none; background: repeating-linear-gradient(90deg, #d8d0cc 0 70%, transparent 70% 100%); }
.ws .sl.k { width: 70%; }

/* buttons: eleven ways to say "go". Sizes are in em so the same style fits the page and the small swatches */
.pv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9em; padding: 0 1.5em; background: var(--acc); color: var(--aink); font-size: clamp(10px, 1.85cqi, 15px); font-weight: 700; white-space: nowrap; border: 0; line-height: 1; }
.pv-btn[data-btn="pill"] { border-radius: 999px; }
.pv-btn[data-btn="soft"] { border-radius: .7em; }
.pv-btn[data-btn="square"] { border-radius: 0; }
.pv-btn[data-btn="outline"] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 .16em var(--acc); border-radius: .5em; }
.pv-btn[data-btn="ghost"] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 .16em var(--acc); border-radius: 999px; }
.pv-btn[data-btn="line"] { background: transparent; color: var(--ink); padding: 0; min-height: 0; padding-bottom: .35em; border-radius: 0; box-shadow: 0 .16em 0 var(--acc); }
.pv-btn[data-btn="line"]::after { content: "\2192"; margin-left: .55em; color: var(--acc); }
.pv-btn[data-btn="sticker"] { border-radius: .45em; box-shadow: inset 0 0 0 .14em var(--ink), .3em .3em 0 var(--ink); }
.pv-btn[data-btn="chunky"] { border-radius: .9em; box-shadow: 0 .3em 0 color-mix(in srgb, var(--acc) 55%, #000); transform: translateY(-.1em); }
.pv-btn[data-btn="glow"] { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--ink); border-radius: .35em; box-shadow: inset 0 0 0 .1em var(--acc), 0 0 1.1em color-mix(in srgb, var(--acc) 65%, transparent); }
.pv-btn[data-btn="pixel"] { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; clip-path: polygon(0 .35em, .35em .35em, .35em 0, calc(100% - .35em) 0, calc(100% - .35em) .35em, 100% .35em, 100% calc(100% - .35em), calc(100% - .35em) calc(100% - .35em), calc(100% - .35em) 100%, .35em 100%, .35em calc(100% - .35em), 0 calc(100% - .35em)); }
.pv-btn[data-btn="bracket"] { background: transparent; color: var(--ink); padding: 0 .4em; font-family: 'Space Mono', monospace; letter-spacing: -.02em; }
/* see-through buttons inside a panel take the panel's readable words (8 Oct 2026, late) */
:is(.pv-banner, .pv-cta-in, .pv-next, .pv-quote) .pv-btn:is([data-btn="outline"], [data-btn="ghost"], [data-btn="line"], [data-btn="glow"], [data-btn="bracket"]) { color: var(--sink, var(--ink)); }
.pv-btn[data-btn="bracket"]::before { content: "["; margin-right: .6em; color: var(--acc); }
.pv-btn[data-btn="bracket"]::after { content: "]"; margin-left: .6em; color: var(--acc); }

/* every section: zero weight, so the home page's own rules (.pv-strip, .pv-row, .pv-story, .pv-quote) still win */
:where(.pv-sec) { padding: calc(3cqi * var(--gap)) 3.6cqi; }
.pv-title { margin: 0; font-size: calc(4.2cqi * var(--fdz)); line-height: 1.05; padding-bottom: .05em; }
.pv-line { margin: 1.2cqi 0 0; font-size: clamp(11px, 1.95cqi, 16px); line-height: 1.45; max-width: 48ch; opacity: .88; }

/* the page's title, when the first section does not carry it */
.pv-pagehead { padding-bottom: calc(.6cqi * var(--gap)); }
.pv-pagehead .pv-title { font-size: calc(5.4cqi * var(--fdz)); }

/* banner: title, line and one button on a soft band */
.pv-banner { text-align: center; background: var(--soft); color: var(--sink, var(--ink)); padding-block: calc(5cqi * var(--gap)); }
.pv-banner .pv-title { font-size: calc(6cqi * var(--fdz)); }
.pv-banner .pv-line { margin: 1.4cqi auto 2.8cqi; }

/* picture cards with a name and a price (the home row's .pv-item and .pv-shot) */
.pv-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: calc(2.8cqi * var(--gap)) calc(2.4cqi * var(--gap)); align-items: start; }
.pv-grid2 { --n: 2; } .pv-grid3 { --n: 3; } .pv-grid4 { --n: 4; }
.pv-grid2 .pv-shot { aspect-ratio: 1 / .7; }
.pv-say .pv-sayq { margin: 0 0 .6cqi; font-style: italic; line-height: 1.4; }

/* list: small picture, title, a line, price or date */
.pv-li { display: grid; grid-template-columns: 11cqi minmax(0, 1fr) auto; gap: 2.6cqi; align-items: center; padding: calc(1.5cqi * var(--gap)) 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.pv-li:first-child { border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.pv-li .pv-pic { aspect-ratio: 1; }
.pv-li-h { display: block; font-size: calc(2.6cqi * var(--fdz)); line-height: 1.12; }
.pv-li-s { display: block; margin-top: .5cqi; font-size: clamp(10px, 1.6cqi, 14px); opacity: .72; }
.pv-li > b { font-size: clamp(10px, 1.75cqi, 15px); white-space: nowrap; }

/* rail: four small cards on a soft band */
.pv-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8cqi; background: color-mix(in srgb, var(--soft) 60%, var(--bg)); }
.pv-rail .pv-item { padding: 1cqi 1cqi 1.4cqi; background: var(--bg); border-radius: 1cqi; font-size: clamp(9px, 1.5cqi, 13px); }
.pv-rail .pv-shot { aspect-ratio: 1; }

/* masonry: three columns of pictures at mixed heights */
.pv-masonry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqi; align-items: start; }
.pv-mcol { display: grid; gap: 1.6cqi; }
.pv-masonry .r1 { aspect-ratio: 1 / 1.3; } .pv-masonry .r2 { aspect-ratio: 1 / .78; } .pv-masonry .r3 { aspect-ratio: 1 / 1.04; }

/* tiles: two by two, a caption under each */
.pv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3cqi 2.4cqi; }
.pv-tile .pv-pic { aspect-ratio: 1 / .64; }
.pv-tcap { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqi; margin-top: 1.2cqi; }
.pv-tcap b { font-size: calc(2.4cqi * var(--fdz)); line-height: 1.1; min-width: 0; }
.pv-tcap small { font-size: clamp(10px, 1.6cqi, 14px); opacity: .75; white-space: nowrap; }

/* split: a picture beside a heading, a paragraph and a button */
.pv-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(4.4cqi * var(--gap)); align-items: center; }
.pv-split .pv-pic { aspect-ratio: 1 / .78; }
.pv-split .pv-line { margin-bottom: 2.8cqi; }

/* three columns: an accent dot, a heading and two lines */
.pv-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(3.4cqi * var(--gap)); }
.pv-dot { display: block; width: 3cqi; height: 3cqi; border-radius: 50%; background: var(--acc); margin-bottom: 1.6cqi; }
.pv-col h4 { margin: 0 0 .8cqi; font-size: calc(2.7cqi * var(--fdz)); line-height: 1.1; }
.pv-col p { margin: 0; font-size: clamp(10px, 1.75cqi, 15px); line-height: 1.45; opacity: .85; }

/* form: heading and line beside three fields and a Send button (drawn, never real fields) */
.pv-form { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: calc(4.4cqi * var(--gap)); align-items: start; }
.pv-fields { display: grid; gap: 1.4cqi; justify-items: start; }
.pv-field { justify-self: stretch; padding: 1.5cqi 1.8cqi; border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); border-radius: .9cqi; background: color-mix(in srgb, var(--soft) 35%, var(--bg)); font-size: clamp(10px, 1.6cqi, 14px); color: color-mix(in srgb, var(--ink) 62%, transparent); }
.pv-field.big { min-height: 13cqi; }

/* price table: name, how long, price, a small button */
.pv-tr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 15cqi 19cqi; gap: 2.4cqi; align-items: center; padding: calc(1.6cqi * var(--gap)) 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.pv-tr:first-child { border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.pv-tn { font-size: calc(2.5cqi * var(--fdz)); line-height: 1.1; }
.pv-tl { font-size: clamp(10px, 1.6cqi, 14px); opacity: .75; }
.pv-tr > b { font-size: clamp(10px, 1.8cqi, 15px); white-space: nowrap; }
.pv-tr .pv-btn { justify-self: end; }
.pv-btn.sm { font-size: clamp(9px, 1.4cqi, 12px); min-height: 2.6em; padding: 0 1.1em; }

/* timeline: three dated steps along one line */
.pv-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-step { position: relative; padding: 3.6cqi 3cqi 0 0; border-top: 2px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.pv-step .pv-dot { position: absolute; left: 0; top: calc(-1.2cqi - 1px); width: 2.4cqi; height: 2.4cqi; margin: 0; }
.pv-step b { display: block; margin-bottom: .8cqi; font-size: calc(3.8cqi * var(--fdz)); line-height: 1; }
.pv-step span { font-size: clamp(10px, 1.8cqi, 15px); }

/* questions: four, the first one open */
.pv-q { padding: calc(1.7cqi * var(--gap)) 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.pv-q:first-child { border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.pv-qh { display: flex; justify-content: space-between; align-items: center; gap: 2cqi; font-size: clamp(11px, 2cqi, 17px); font-weight: 700; }
.pv-qh::after { content: ""; flex: none; width: 1.1cqi; height: 1.1cqi; border-right: 2px solid; border-bottom: 2px solid; transform: translateY(-25%) rotate(45deg); opacity: .6; }
.pv-q.on .pv-qh::after { transform: translateY(25%) rotate(-135deg); }
.pv-q p { margin: 1cqi 0 0; max-width: 62ch; font-size: clamp(10px, 1.75cqi, 15px); line-height: 1.5; opacity: .85; }

/* map: her picture with a pin, and the address */
.pv-map { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: calc(3.6cqi * var(--gap)); align-items: center; }
.pv-map .pv-pic { aspect-ratio: 1 / .56; }
.pv-pin { position: absolute; z-index: 1; left: 50%; top: 50%; width: 4.4cqi; height: 4.4cqi; margin: -4.8cqi 0 0 -2.2cqi; border-radius: 50% 50% 50% 0; background: var(--acc); transform: rotate(-45deg); box-shadow: 0 .6cqi 1.4cqi rgba(0, 0, 0, .3); }
.pv-pin::after { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: var(--aink); }

/* calendar: a month with three dates in her button color, and what is next */
.pv-cal { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: calc(4cqi * var(--gap)); align-items: center; }
.pv-month h4 { margin: 0 0 1.6cqi; font-size: calc(3cqi * var(--fdz)); }
.pv-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .7cqi; text-align: center; font-size: clamp(9px, 1.55cqi, 13px); }
.pv-days span { padding: .8cqi 0; border-radius: .7cqi; background: color-mix(in srgb, var(--soft) 55%, transparent); }
.pv-days .wd, .pv-days .x { background: none; }
.pv-days .wd { font-weight: 700; opacity: .6; }
.pv-days .on { background: var(--acc); color: var(--aink); font-weight: 700; }
.pv-next { padding: 3cqi; border-radius: 1.6cqi; background: var(--soft); color: var(--sink, var(--ink)); }
.pv-next small { display: block; font-size: clamp(9px, 1.4cqi, 12px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.pv-next h4 { margin: 1cqi 0 2.2cqi; font-size: calc(3.4cqi * var(--fdz)); line-height: 1.05; }

/* text: a heading and two paragraphs */
.pv-text p { margin: 1.6cqi 0 0; max-width: 64ch; font-size: clamp(11px, 1.95cqi, 16px); line-height: 1.6; opacity: .88; }

/* one thing to do next, on a soft band */
.pv-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 3cqi; padding: calc(3.6cqi * var(--gap)) 4cqi; border-radius: 2cqi; background: var(--soft); color: var(--sink, var(--ink)); }
.pv-cta .pv-title { font-size: calc(3.8cqi * var(--fdz)); }

/* filters beside a two-column grid */
.pv-side-grid { display: grid; grid-template-columns: 17cqi minmax(0, 1fr); gap: calc(4cqi * var(--gap)); align-items: start; }
.pv-filters { display: grid; gap: 1.5cqi; padding-top: .4cqi; font-size: clamp(10px, 1.8cqi, 15px); }
.pv-filters .on { font-weight: 700; text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: .14em; text-underline-offset: .4em; }

/* links: stacked link buttons */
.pv-linklist { display: grid; gap: 1.8cqi; padding-inline: 24cqi; }
.pv-linklist .pv-btn { min-height: 3.3em; font-size: clamp(11px, 2cqi, 17px); }

/* footer: her name, her pages, the small print */
.pv-foot { display: grid; justify-items: center; gap: 1.6cqi; margin-top: 2cqi; padding: calc(4cqi * var(--gap)) 3.6cqi; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); text-align: center; }
.pv-foot-name { font-size: calc(3.6cqi * var(--fdz)); line-height: 1; padding-bottom: .05em; }
.pv-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6cqi 2.6cqi; font-size: clamp(10px, 1.6cqi, 14px); }
.pv-foot small { font-size: clamp(9px, 1.3cqi, 12px); opacity: .65; }

/* ---------- the nine touches (13 Oct 2026). Every rule waits for a mark that only a non-default choice writes. ---------- */
/* Section colors. Shades of one color: card sections sit on the band (her panel color, one shade deeper than the page), cards one shade paler */
.pv [data-band] { background: var(--soft); color: var(--sink); --ink: var(--sink); }
.pv[data-sc="tone"] [data-band] :is(.pv-item, .pv-col) { background: var(--card); color: var(--cink); --ink: var(--cink); padding: 1.2cqi 1.2cqi 1.6cqi; border-radius: .6cqi; }
/* One standout section, and the footer: her text color as the band, her page color as the words; everything inside follows */
.pv [data-deep], .pv[data-sc="deep"] .pv-foot { --ink: var(--dink); --sink: var(--dink); --bg: var(--deep); --soft: color-mix(in srgb, var(--deep) 86%, var(--dink)); --acc: var(--dacc); --aink: var(--daink); background: var(--deep); color: var(--dink); }
.pv[data-sc="deep"] .pv-foot { border-top: 0; }
/* a band that ends the page already marks where the footer starts: no hairline under it (13 Oct 2026, the test picture; the theme has none) */
.pv [data-band] + .pv-foot { border-top: 0; }
/* inside the standout band a call to action or calendar drops its own panel, as in the theme: its words sit on the band (13 Oct 2026, review) */
.pv [data-deep] :is(.pv-cta-in, .pv-next) { background: transparent; }
/* a standout section that ends the page runs straight into the footer's band, with no strip of page color between (13 Oct 2026, review).
   -1px: the two bands overlap by a hair, so the scaled preview shows no light seam where they meet */
.pv [data-deep] + .pv-foot { margin-top: -1px; }
/* Headline word */
.pv:is([data-hw="it"], [data-hw="both"]) .pv-hw { font-family: var(--wd); font-style: var(--wds); font-weight: var(--wdw); font-size: calc(1em * var(--wdz)); }
.pv:is([data-hw="ac"], [data-hw="both"]) .pv-hw { color: var(--hacc); }
/* on the full-picture top the word sits on the shaded photo: its color is fitted to that (--hacf, 13 Oct 2026, review), and a soft dark
   shadow behind its letters keeps it readable on a light or colorful photo too, where a color alone can blend in (13 Oct 2026, review:
   a pink word on a pink photo). The theme's cover block gets the same shadow (make-theme.cjs). The words also sit over a photo style's
   own layer (Pastel's pink wash, Dreamy's glow), as they do in the theme's cover block, so that layer cannot wash the color out. */
.pv[data-lay="full"]:is([data-hw="ac"], [data-hw="both"]) .pv-hero .pv-copy { z-index: 2; }
.pv[data-lay="full"]:is([data-hw="ac"], [data-hw="both"]) .pv-hero .pv-hw { color: var(--hacf); text-shadow: 0 0 .08em rgba(14, 10, 8, .7), 0 0 .3em rgba(14, 10, 8, .55), 0 0 .7em rgba(14, 10, 8, .4); }
/* Section labels: the same small capitals as the line over her headline (.pv-over) */
/* .pv first, so the story and text sections' own paragraph rules (.pv-story p, .pv-text p) do not resize it */
.pv .pv-lab { grid-column: 1 / -1; max-width: none; margin: 0 0 calc(1.2cqi * var(--gap)); font-size: clamp(9px, 1.55cqi, 13px); font-weight: 700; line-height: inherit; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.pv:is([data-lb="line"], [data-lb="rules"]) :is(.pv-over, .pv-lab)::before, .pv[data-lb="rules"] :is(.pv-over, .pv-lab)::after { content: ""; display: inline-block; width: 2.2em; height: 1px; vertical-align: .3em; background: currentColor; }
.pv:is([data-lb="line"], [data-lb="rules"]) :is(.pv-over, .pv-lab)::before { margin-right: .9em; }
.pv[data-lb="rules"] :is(.pv-over, .pv-lab)::after { margin-left: .9em; }
/* one count per page (13 Oct 2026, review): with Tall numbers on, the numbered labels show as plain ones (builder.js touchesSpec says so too) */
.pv[data-lb="num"]:not([data-ln="nums"], [data-ln="both"]) .pv-page { counter-reset: lab; }
.pv[data-lb="num"]:not([data-ln="nums"], [data-ln="both"]) :is(.pv-over, .pv-lab)::before { counter-increment: lab; content: counter(lab, decimal-leading-zero); margin-right: .9em; font-weight: 400; }
/* in a grid section the label is a row of its own, and the grid's gap would hold it far from what it names (40 to 75px on the 1440 page):
   the gap goes, and a section with a second row (the row's own title, tiles, links) keeps that row's distance (13 Oct 2026, test picture 6) */
.pv :is(.pv-row, .pv-grid, .pv-rail, .pv-masonry, .pv-tiles, .pv-cols3, .pv-side-grid, .pv-linklist):has(> .pv-lab) { row-gap: 0; }
.pv .pv-row > .pv-lab + .pv-row-title { margin-bottom: calc(2.6cqi * var(--gap)); }
.pv .pv-tiles:has(> .pv-lab) > .pv-tile:nth-child(n+3 of .pv-tile) { margin-top: 3cqi; }
.pv .pv-linklist:has(> .pv-lab) > .pv-btn + .pv-btn { margin-top: 1.8cqi; }
/* the timeline's dots sit half above its line: the label keeps its usual distance from them */
.pv .pv-timeline > .pv-lab { margin-bottom: calc(1.2cqi * var(--gap) + 1.2cqi + 1px); }
/* a list, price table or questions draws a line over its first row; with a label over it that row is no longer the first child */
.pv-lab + .pv-li { border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.pv-lab + :is(.pv-tr, .pv-q) { border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
/* Lines and numbers: a fine line over a section (data-rule, from builder.js) and between columns */
.pv [data-rule]::before { content: ""; position: absolute; top: 0; left: max(3.6cqi, calc(50% - 600px)); right: max(3.6cqi, calc(50% - 600px)); height: 1px; background: color-mix(in srgb, var(--ink) 20%, transparent); }
.pv-grid { --cg: calc(2.4cqi * var(--gap)); } .pv-row { --cg: calc(2.6cqi * var(--gap)); } .pv-cols3 { --cg: calc(3.4cqi * var(--gap)); } .pv-tiles { --cg: 2.4cqi; }
.pv:is([data-ln="lines"], [data-ln="both"]) :is(.pv-grid > .pv-item, .pv-row > .pv-item, .pv-cols3 > .pv-col, .pv-tiles > .pv-tile) { position: relative; }
.pv:is([data-ln="lines"], [data-ln="both"]) :is(.pv-grid2 > .pv-item:nth-child(even of .pv-item), .pv-grid3 > .pv-item:not(:nth-child(3n+1 of .pv-item)), .pv-grid4 > .pv-item:not(:nth-child(4n+1 of .pv-item)), .pv-row > .pv-item + .pv-item, .pv-cols3 > .pv-col + .pv-col, .pv-tiles > .pv-tile:nth-child(even of .pv-tile))::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--cg) / -2); width: 1px; background: color-mix(in srgb, var(--ink) 20%, transparent); }
/* with Shades of one color each card is its own pale box on the band: its edges already part the cards, so no line between them (13 Oct 2026, review) */
.pv[data-sc="tone"][data-ln] .pv-sec[data-band] :is(.pv-grid > .pv-item, .pv-row > .pv-item, .pv-cols3 > .pv-col)::before { content: none; }
/* a word date (Now) in capitals, so it stands as tall as the digits beside it (13 Oct 2026, review); the theme's .adg-num does the same */
.pv-num { display: block; font-family: var(--body); font-style: normal; font-weight: 300; text-transform: uppercase; letter-spacing: -.02em; font-size: 5cqi; line-height: .9; font-variant-numeric: lining-nums tabular-nums; }
.pv:is([data-ln="nums"], [data-ln="both"]) .pv-li { grid-template-columns: 6.5cqi 11cqi minmax(0, 1fr) auto; }
.pv-li > .pv-num { font-size: 4.2cqi; }
.pv-step > .pv-num { margin-bottom: 1cqi; font-size: 5cqi; }  /* as tall as the theme's; .pv-step b would make it the date's size */
/* a list draws its own line over its first row and under its last: next to a fine line between sections it gives way, so there is one line, not two.
   A label between the fine line and the first row does not bring that row's line back; price tables and questions do the same (13 Oct 2026, review) */
.pv :is(.pv-list, .pv-table, .pv-faq)[data-rule] > :is(.pv-li, .pv-tr, .pv-q):first-child, .pv :is(.pv-list, .pv-table, .pv-faq)[data-rule] > .pv-lab + :is(.pv-li, .pv-tr, .pv-q) { border-top: 0; }
.pv :is(.pv-list, .pv-table, .pv-faq):has(+ [data-rule]) > :is(.pv-li, .pv-tr, .pv-q):last-child { border-bottom: 0; }
/* Button pair: a quieter second button with a fine arrow (or an arrow in a small circle) */
.pv { --arr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M0 5h24.5M20.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
  --arrc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15.3' fill='none' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M9.5 16h12.5M18 12l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E"); }
.pv-btns { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1em 2em; }
.pv:is([data-lay="center"], [data-lay="arch"]) .pv-btns { justify-content: center; }
.pv-btn2 { position: relative; display: inline-flex; align-items: center; gap: .7em; min-height: 2.9em; font-size: clamp(10px, 1.85cqi, 15px); font-weight: 700; line-height: 1; white-space: nowrap; color: var(--ink); font-synthesis: none; }
.pv[data-lay="full"] .pv-btn2 { color: inherit; }
.pv-arr { flex: none; width: 1.7em; height: .65em; background: currentColor; -webkit-mask: var(--arr) center / contain no-repeat; mask: var(--arr) center / contain no-repeat; }
.pv[data-bp="circle"] .pv-arr { width: 2.3em; height: 2.3em; -webkit-mask-image: var(--arrc); mask-image: var(--arrc); }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px); z-index: 60; max-width: min(92vw, 520px); padding: 14px 22px; border-radius: var(--rbtn); background: var(--ink); color: var(--page); font-size: 15px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .3s, transform .35s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- smaller than a laptop: the steps in the top bar shrink to numbers ---------- */
@media (max-width: 1180px) {
  .steps .stp span:not(:first-child) { display: none; }
  .stp { padding: 0 6px; }
  .stp.on span:not(:first-child) { display: inline; padding-right: 8px; }
}
/* under 1100px wide, Back and Next stay on the title line and only the step's own control (the name, the page count) drops to a
   second line, so a step without one keeps a one-line head */
@media (max-width: 1099px) {
  .deck-head { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .deck-title { grid-column: 1; grid-row: 1; }
  .deck-nav-slot { grid-column: 2; grid-row: 1; }
  .deck-mid { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 899px) { .url { display: none; } }
/* a tablet held upright: the cards sit in a grid and the page scrolls, while the stage and the step's head stay pinned */
@media (orientation: portrait) and (min-width: 700px) {
  .b-main { padding-bottom: 24px; }
  .deck-head .sub { white-space: normal; }  /* the page scrolls here anyway, so a long line can take two */
  .deck-row { display: grid; grid-template-columns: repeat(auto-fill, calc(var(--cw) + 4px)); justify-content: space-between; margin: 0; padding: 6px 0 15px; overflow: visible; }
  .picker { grid-column: span 2; width: auto; }
  .row-act, .row-act.group-btns { width: auto; }
  .finish { grid-template-columns: 1fr 1fr; }
  .takehome { grid-column: 1 / -1; }
}
/* upright, the top-bar cards show a little more of the page so two fit across */
@media (orientation: portrait) and (min-width: 700px) { .crop-bar { --crop: 440; } }
/* an 11-inch tablet held upright: slightly smaller cards, so three fit across instead of two with a hole between them.
   Back and Next share the title line, so the kicker ('Page 2 of 5') sits above a slightly smaller title. */
@media (orientation: portrait) and (min-width: 700px) and (max-width: 999px) {
  :root { --wh: 150; }
  .deck-row { justify-content: start; }
  .crop-bar { --crop: 480; }
  .deck-title .t1 { flex-direction: column; align-items: flex-start; gap: 2px; }
  .deck-head h1 { max-width: 100%; font-size: 22px; }
}
/* computers and tablets (700px and wider, either way up): her whole page on the left, as wide as it needs to be to fit the
   window's height (never more than about half the width); the step's head and its cards in a column beside it. Zoomed in, the
   page takes the whole width and the cards step aside until she taps Whole page. */
@media (min-width: 700px) and (min-height: 600px) {
  :root { --deck: 0px; }
  .b-main { display: grid; grid-template-columns: max(var(--fw, 480px), 340px) minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 36px); align-items: start; }
  .b-stage { grid-column: 1; grid-row: 1; align-self: start; padding: 8px 0 16px; }
  .b-stage::after { display: none; }
  .b-deck { grid-column: 2; grid-row: 1; min-width: 0; padding-top: 8px; }
  .b-main.zoomed { grid-template-columns: minmax(0, 1fr); }
  .b-main.zoomed .b-deck { display: none; }
  .deck-head { top: var(--top); grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 6px 0 10px; }
  .deck-title, .deck-mid, .deck-nav-slot { grid-column: 1; grid-row: auto; }
  .deck-head h1, .deck-head .sub { white-space: normal; }
  .deck-mid .field { flex-wrap: wrap; }
  .deck-mid .field input { width: min(100%, 360px); }
  .b-nav { justify-content: space-between; max-width: 560px; }
  .step[data-step="pieces"] #nextBtn { min-width: 0; }
  .deck-row { display: grid; grid-template-columns: repeat(auto-fill, calc(var(--cw) + 4px)); gap: 14px; justify-content: start; margin: 0; padding: 6px 0 24px; overflow: visible; }
  .row-arrow { display: none !important; }
  .picker { grid-column: 1 / -1; width: auto; height: auto; }
  .row-act, .row-act.group-btns { width: auto; }
  .finish { grid-template-columns: 1fr; gap: 18px; max-width: 620px; }
}
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 600px) { :root { --wh: 112; } }
/* the whole-page cards (Section colors, Section labels, Lines and numbers, Spacing, Order of sections) keep their laptop size there: at
   the smaller size they were 84px wide and their names and lines were cut off (13 Oct 2026, review) */
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 600px) { .crop-page { --wh: 155; } }
/* a short window: a pinned stage would leave no room, so everything scrolls together */
@media (max-height: 679px) { .b-stage, .deck-head { position: static; } }
/* the picture of her design for the kit: the tools add .capture to the page first, so the frame is 1200 x 900 (4:3, as WordPress
   shows a theme's picture) and shows the top of her page, with no note or scroll bar over it */
:root.capture { --scr: 900px; }
:root.capture .b-main { display: block; }
:root.capture .screen { width: auto; height: var(--scr); }  /* the theme's picture stays as it was: the top of her page at full size */
:root.capture .screen .pv { inset: 0; width: auto; height: auto; transform: none; --fh: var(--scr); }
:root.capture .stage-tools { display: none; }
:root.capture .b-stage .browser { width: auto; }
:root.capture .b-stage { position: relative; top: 0; width: 1200px; }
:root.capture .b-top, :root.capture .deck-head { position: static; }  /* nothing pinned may sit over the picture */
:root.capture .screen .pv { overflow: hidden; scrollbar-width: none; }
:root.capture .screen-tip { display: none !important; }
/* the builder is made for a computer or a tablet; a phone is sent to one */
.narrow { display: none; }
@media (max-width: 699px) {
  .b-top, .b-main { display: none; }
  .narrow { display: grid; place-items: center; min-height: 100dvh; padding: 32px 24px; text-align: center; }
  .narrow-in { max-width: 380px; }
  .narrow-in .brand { display: block; margin-bottom: 28px; }
  .narrow h1 { font-size: 34px; }
  .narrow p { color: var(--ink-2); }
  .narrow .cta { width: 100%; margin: 12px 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- the dice and Suggested (8 Oct 2026, late) ---------- */
/* the dice sits in the website window's bar, before Zoom in; Undo shows beside it for a while after a roll */
.roll-btn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-left: auto; padding: 0 12px 0 9px; border: 1px solid rgba(0, 0, 0, .14); border-radius: var(--rbtn); background: #fff; color: #13294B; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.roll-btn svg { width: 17px; height: 17px; }
.roll-btn::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.roll-btn:focus-visible { outline: 2px solid #13294B; outline-offset: -2px; }
.undo-btn { margin-left: 6px; padding: 0 12px; }
.roll-btn ~ .zoom-btn { margin-left: 6px; }
.roll-btn.rolling svg { animation: dice-roll .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes dice-roll { from { transform: rotate(-200deg) scale(.6); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .roll-btn.rolling svg { animation: none; } }
/* a narrow window: the dice keeps only its picture */
@media (max-width: 1180px) and (min-width: 1024px), (max-width: 760px) { .roll-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .roll-btn:not(.undo-btn) { padding: 0 8px; } }
/* a narrow frame: a short computer window draws her page tall and thin, so the bar can be under 300 wide and "Zoom in" was cut
   off (found by builder-sweep.cjs, 19 Oct 2026, Rachel's check d24). As it narrows: the dots go, then the dice and Zoom in keep
   only their pictures, then the motion chip does, and last the address box. The words stay for screen readers. */
.b-stage .bar { container-type: inline-size; }
@container (max-width: 560px) { .bar .dots { display: none; } }
@container (max-width: 500px) {
  .bar .roll-w, .bar #zoomWord { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar .roll-btn:not(.undo-btn), .bar .zoom-btn { padding: 0 8px; }
}
@container (max-width: 360px) {
  .bar .mo-chip > span:not(.vh) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar .mo-chip { padding: 0 8px; }
}
/* under 300 the address box is only its padlock by then; it goes, so Undo still fits beside the dice */
@container (max-width: 300px) { .bar .url { display: none; } }
/* Suggested: a small tag on one card in each step, from what she chose before (js/match.js) */
.sug-tag { position: absolute; z-index: 4; top: 8px; left: 8px; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: var(--card); font-size: 11.5px; font-weight: 700; line-height: 1.1; letter-spacing: .02em; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); pointer-events: none; }
header .brand { display: inline-flex; align-items: center; line-height: 1.04; white-space: normal; font-size: 21px; }
@media (max-width: 700px) { header .brand::before { width: 43px; height: 66px; margin-right: 10px; } header .brand { font-size: 18px; } }