/* Aesthetic Design Guide - front door.
   Shape rule (sky blue look, 28 Oct 2026): buttons are 12px, cards are 18px, picture tiles are 14px. Coral (--pop) marks the headline word and the row numbers.
   The little website inside the browser frame has its own shapes: they belong to the look she is choosing. */

@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: #FFE27A; }
@property --s-bg { syntax: '<color>'; inherits: true; initial-value: #F7F3E8; }
@property --s-ink { syntax: '<color>'; inherits: true; initial-value: #2E3A2B; }
@property --s-soft { syntax: '<color>'; inherits: true; initial-value: #DCE6CC; }
@property --s-acc { syntax: '<color>'; inherits: true; initial-value: #B4506A; }
@property --s-aink { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --s-extra { syntax: '<color>'; inherits: true; initial-value: #8FA67C; }

:root {
  --page: #CFE1EC;
  --ink: #13294B;
  --ink-2: #3B5577;
  --line: rgba(19, 41, 75, .16);
  --card: #EAF3F8;
  --cta: #13294B;
  --cta-ink: #FFE27A;
  --pop: #E2553D;
  --rose: #C2385F;
  --rbtn: 12px;
  --serif: 'Young Serif', Georgia, serif;
  --sans: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Bradley Hand', cursive;
  --r-card: 18px;
  --r-tile: 14px;
  --shadow: 0 1px 2px rgba(19, 41, 75, .06), 0 12px 32px -10px rgba(19, 41, 75, .22);
  --shadow-big: 0 2px 4px rgba(19, 41, 75, .06), 0 30px 70px -24px rgba(19, 41, 75, .42);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --top: 112px;
  /* the rows of pictures and the preview, for computers and iPads 1024px and wider: page gutter, intro column, tile size, gap,
     row height (36px head + 7 + tile + 10 + the 7px gap) and preview height (with its 40px bar). The tablet and phone blocks reset them.
     --inset keeps the band and the rows lined up on very wide windows; its % is worked out on each full-width piece, so nothing is 100vw wide.
     --vh is a window height that does not jump when an iPad's toolbars slide in and out (see the @supports rule below). */
  --vh: 1vh;
  --gutter: 40px;
  --col: 300px; --colgap: 36px;
  --inset: max(var(--gutter), calc((100% - 1480px) / 2));
  --tile: clamp(112px, calc((100vw - 2 * var(--gutter)) / 11), 128px);
  --gap: 10px;
  --rowh: calc(var(--tile) + 60px);
  --pv: clamp(400px, calc(100 * var(--vh) - var(--top) - 30px - 2 * var(--rowh)), 640px);
  --fd: 'Cormorant Garamond', Georgia, serif; --fds: italic; --fdw: 600; --fdc: none; --fdt: 0; --fdz: 1.18; --rb: 99px;
  /* a picture's outline when its shape has no cut corners: six corners, well outside the picture, so Cut corners can grow out of it */
  --clip0: polygon(-25% -25%, 125% -25%, 125% -25%, 125% 125%, -25% 125%, -25% 125%);
  color-scheme: light;
  transition: --page .9s var(--ease), --cta .6s var(--ease), --cta-ink .6s var(--ease);
}

/* svh is the window height with the toolbars showing, so it stays still. A custom property cannot fall back on its own, hence the @supports. */
@supports (height: 100svh) { :root { --vh: 1svh; } }

:root.dk { --ink: #F2ECE6; --ink-2: #B5ADB3; --line: rgba(255, 255, 255, .18); --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%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 12px); }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
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; }
[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; }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  height: var(--top);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.brand { font: 400 21px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.brand::before { content: ''; flex: none; width: 65px; height: 100px; margin-right: 14px; background: url(../img/logo-mark.png?v=3) center / contain no-repeat; }
.brand { display: inline-flex; align-items: center; }
a.brand { display: inline-flex; align-items: center; min-height: 44px; }
.toplink { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 0 16px; border-radius: var(--rbtn); border: 1.5px solid var(--line); transition: border-color .2s, background .2s; }
.toplink:hover { border-color: var(--ink); background: rgba(255, 255, 255, .4); }

/* ---------- the game: a band with the intro and the website example stays put under the top bar,
   and the five rows of pictures run edge to edge under it, so every tap is seen landing ---------- */
.play { display: block; padding: 0 0 56px; }
.pinband {
  position: sticky; top: var(--top); z-index: 15;
  display: grid; grid-template-columns: var(--col) minmax(0, 1fr); column-gap: var(--colgap); align-items: start;
  padding: 8px var(--inset) 10px;
  background: var(--page);
}
/* a short fade under the band, so the rows slide away under it softly */
.pinband::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(var(--page), transparent); pointer-events: none; }
.intro { padding-top: 6px; }
/* in the result state the column is never taller than the website example beside it: it scrolls inside itself (Make it mine is near the top).
   While more of it is below (app.js sets .more), its foot fades softly into the page, so it reads as "keeps going", not as cut off. */
.is-result .intro { max-height: var(--pv); overflow-y: auto; scrollbar-width: thin; padding-right: 4px; padding-bottom: 8px; }
.is-result .intro.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), rgba(0, 0, 0, .45) calc(100% - 18px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), rgba(0, 0, 0, .45) calc(100% - 18px), transparent); }
/* a little tighter in the result column, so more of it shows beside the example */
.intro-result .look-name { margin-bottom: 12px; }
.intro-result .made { gap: 5px; margin-bottom: 14px; }
.intro-result .field { margin-bottom: 12px; }

.what { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--cta); }
h1 {
  font: 400 44px/1.0 var(--serif);
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
h1 em { position: relative; display: inline-block; font-style: normal; color: var(--pop); padding-right: .04em; }
.swash { position: absolute; left: -2%; right: -4%; bottom: -.16em; width: 106%; height: .3em; overflow: visible; }
.swash path { fill: none; stroke: var(--pop); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw .9s .15s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.lede { font-size: 17px; line-height: 1.45; margin: 0 0 16px; max-width: 46ch; }

/* the tray: five slots, one per row. Each slot is a button that goes to its row. They shrink to fit a narrow column. */
.band-row .cta { display: none; }
.tray { display: grid; grid-template-columns: repeat(5, minmax(0, 72px)); gap: 8px; margin-bottom: 8px; }
.slot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: center; min-width: 0; text-align: center; background: none; border: 0; padding: 0; margin: 0; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.slot-pic {
  width: 100%; aspect-ratio: 1; border-radius: var(--r-tile);
  border: 2px dashed color-mix(in srgb, var(--ink) 28%, transparent);
  background: rgba(255, 255, 255, .35) center/cover no-repeat;
  transition: border-color .3s, transform .45s var(--ease);
}
.slot-pic { display: grid; place-items: center; color: color-mix(in srgb, var(--ink) 38%, transparent); }
.slot-pic .ghost-dots { display: flex; gap: 4px; } .slot-pic .ghost-dots i { width: 13px; height: 13px; border-radius: 50%; background: currentColor; }
.slot-pic .ghost-dots i:nth-child(2) { opacity: .6; } .slot-pic .ghost-dots i:nth-child(3) { opacity: .35; }
.slot-pic .ghost-aa { font: 400 30px/1 var(--serif); }
.slot-pic .ghost-ic { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slot.full .slot-pic > * { display: none; }
.slot.full .slot-pic { border: 3px solid #fff; box-shadow: var(--shadow); }
.slot.pop .slot-pic { animation: pop .5s var(--ease); }
.slot.want .slot-pic { animation: want .9s ease-in-out 2; }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes want { 0%, 100% { transform: none; border-color: color-mix(in srgb, var(--ink) 28%, transparent); } 50% { transform: translateY(-4px); border-color: var(--cta); } }
.slot-lab { font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.slot.full .slot-lab { color: var(--ink); }
/* the hint is read out to screen readers as she taps; on screen the tray and the row headings already show it */
.hint { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#seeBtn { min-height: 56px; margin-top: 12px; }

.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 60px; padding: 0 28px;
  border: 0; border-radius: var(--rbtn);
  background: var(--cta); color: var(--cta-ink);
  font-size: 19px; font-weight: 700; letter-spacing: .005em; white-space: nowrap;
  box-shadow: 0 3px 0 var(--pop), 0 14px 28px -12px color-mix(in srgb, var(--cta) 70%, transparent);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .2s;
}
.cta:active { transform: translateY(1px) scale(.985); }
.cta-ico { transition: transform .25s var(--ease); }
.cta.ready { animation: ready 1.1s var(--ease); }
@keyframes ready { 0% { transform: scale(1); } 30% { transform: scale(1.05); } 60% { transform: scale(.98); } 100% { transform: scale(1); } }
.price { font-size: 15.5px; font-weight: 500; margin: 12px 0 0; text-align: center; }
.price b { font-weight: 700; }
.price span { white-space: nowrap; }
.intro .price { font-size: 14.5px; margin-top: 10px; }

.textbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background: none; border: 0; padding: 10px 2px; font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.textbtn:hover { color: var(--ink); }

/* result, on a computer */
.intro-result { animation: rise .6s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.kicker { font-size: 16px; font-weight: 600; color: var(--ink-2); margin: 4px 0 2px; }
.look-name {
  font-family: var(--fd, var(--serif)); font-style: var(--fds, normal); font-weight: var(--fdw, 400);
  text-transform: var(--fdc, none); letter-spacing: var(--fdt, 0);
  font-size: calc(40px * var(--fdz, 1));
  line-height: 1.08; margin: 0 0 16px; padding-bottom: .06em;
  text-wrap: balance;
}
.made { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.made li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; font-size: 15.5px; line-height: 1.3; }
.made li span:first-child { width: 40px; height: 40px; border-radius: 10px; background: center/cover no-repeat; box-shadow: 0 0 0 2px #fff, var(--shadow); }
.made b { font-weight: 700; }

.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label, .kinds legend { font-size: 15px; font-weight: 700; }
.field input {
  width: 100%; height: 52px; padding: 0 16px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 32%, transparent); border-radius: 12px;
  background: #fff; font-size: 17px; color: #13294B; /* the box stays white on dark looks, so its words stay dark */
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: #8A7480; }
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cta) 22%, transparent); }
.kinds { border: 0; padding: 0; margin: 0 0 18px; }
.intro-result .price { margin-bottom: 14px; }
.kinds legend { padding: 0; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--rbtn); border: 1.5px solid color-mix(in srgb, var(--ink) 26%, transparent); background: color-mix(in srgb, var(--card) 85%, transparent); font-size: 15px; font-weight: 600; transition: background .2s, color .2s, border-color .2s; }
.chip input:checked + span { background: var(--ink); color: var(--page); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------- the browser frame and the little website ---------- */
.stage { position: relative; isolation: isolate; }
/* a soft glow of her colors behind the website */
.stage::before { content: ""; position: absolute; z-index: 0; left: 6%; right: 6%; top: 8%; height: 72%; border-radius: 50%; background: radial-gradient(closest-side, var(--s-soft), transparent), radial-gradient(closest-side at 80% 70%, color-mix(in srgb, var(--s-acc) 55%, transparent), transparent); filter: blur(34px); opacity: .9; transition: --s-soft .8s, --s-acc .8s; pointer-events: none; }
.browser {
  position: relative; z-index: 1;
  height: var(--pv);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-big), 0 0 0 1px rgba(45, 27, 38, .08);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: arrive .8s .05s var(--ease) backwards;
}
@keyframes arrive { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.bar { flex: none; height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #F4EFEC; border-bottom: 1px solid #E8E0DB; }
.bar i { width: 11px; height: 11px; border-radius: 50%; background: #E2D8D2; }
.bar i:nth-child(1) { background: #EE8B7E; } .bar i:nth-child(2) { background: #F2C46B; } .bar i:nth-child(3) { background: #9FCB8A; }
.url { margin: 0 auto; transform: translateX(-24px); display: inline-flex; align-items: center; gap: 6px; max-width: 70%; height: 26px; padding: 0 14px; border-radius: 999px; background: #fff; font-size: 13px; color: #5D4A54; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.url [data-icon] { width: 12px; height: 12px; opacity: .6; }
/* the frame is a size container: the little website caps its picture and headline by the frame's height as well as its width */
.screen { position: relative; flex: 1; min-height: 0; overflow: hidden; container-type: size; }

/* the motion on the example now, over the right end of the bar. Tapping it plays the opening again. With movement off it is a plain label. */
.mo-chip {
  position: absolute; z-index: 6; top: 5px; right: 10px;
  display: inline-flex; align-items: center; gap: 6px; height: 30px; max-width: 46%; padding: 0 12px 0 9px;
  border: 0; border-radius: 999px; background: #fff; color: #13294B;
  font: 700 13px/1 var(--sans); white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(45, 27, 38, .1), 0 1px 3px rgba(45, 27, 38, .14);
  -webkit-tap-highlight-color: transparent; transition: transform .2s var(--ease);
}
.mo-chip::before { content: ""; position: absolute; inset: -7px; }
.mo-chip svg { flex: none; width: 14px; height: 14px; }
.mo-chip span { overflow: hidden; text-overflow: ellipsis; }
.mo-chip:empty { display: none; }
button.mo-chip:active { transform: scale(.95); }
span.mo-chip { cursor: default; }
/* with movement off, a Motion tap says what the motion would do, for a few seconds */
.mo-note { position: absolute; z-index: 7; left: 10px; bottom: 10px; max-width: min(400px, calc(100% - 20px)); margin: 0; padding: 9px 13px; border-radius: 12px; background: rgba(35, 31, 39, .92); color: #fff; font: 600 13.5px/1.35 var(--sans); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }

.stamp {
  position: absolute; z-index: 5; right: 18px; bottom: 18px;
  font: 700 15px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase;
  color: #C2385F; padding: 10px 10px 10px 14px; border: 2.5px solid #C2385F; border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  transform: rotate(-7deg); opacity: 0; pointer-events: none;
}
.is-result .browser .stamp, .phone-site .stamp, .stamp-kit { opacity: 1; animation: stamp .5s var(--ease) both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-7deg) scale(1.6); } to { opacity: 1; transform: rotate(-7deg) scale(1); } }

.note { display: none; align-items: center; gap: 10px; margin: 10px 0 0 18px; font: 600 22px/1.1 var(--hand); color: var(--ink-2); transform: rotate(-1.5deg); }
.note svg { width: 46px; height: 32px; flex: none; transform: translateY(-10px); }
.note path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* the little website. Every look sets these through the --s-* colors and --fd lettering */
.site {
  container-type: inline-size;
  --pu: calc(100cqi / 1440);   /* backdrop patterns are drawn for a 1440-wide page (extras.js) */
  position: absolute; inset: 0;
  background: var(--s-bg); color: var(--s-ink);
  /* everyday words in the Lettering pick's everyday lettering; headlines use --fd (the .d class) */
  font: 400 15px/1.45 var(--fb, var(--sans));
  overflow: hidden;
  /* for the openings in motion.css: the distance unit and the two accent colors. --u: one hundredth of the page's width, for the picture shapes */
  --mo-u: .1cqi; --mo-a: var(--s-acc); --mo-b: var(--s-extra); --u: 1cqi;
  transition: --s-bg .7s var(--ease), --s-ink .7s var(--ease), --s-soft .7s var(--ease), --s-acc .5s var(--ease), --s-aink .5s var(--ease), --s-extra .7s var(--ease);
}
.site.still, .site.still .shp, .site.still .shp > img, .site.still .s-hero { transition: none; }
.site.ghost { z-index: 3; pointer-events: none; transition: opacity .55s cubic-bezier(.4, 0, .2, 1); }
/* the parts of the hero that will move wait out of sight until the opening plays (at load, after a first Motion pick, as the phone sheet
   opens), so it starts from nothing instead of blinking. They go at once, not with their usual short fade. */
.screen.mo-wait .site:not(.ghost) :is(.mo-over, .mo-h, .mo-p, .mo-btn, .mo-pic img) { opacity: 0; transition: none; }
.site .d { font-family: var(--fd); font-style: var(--fds); font-weight: var(--fdw); text-transform: var(--fdc); letter-spacing: var(--fdt); transition: opacity .18s; }
.s-nav { display: flex; align-items: center; gap: 3cqi; padding: 2.4cqi 3.6cqi; border-bottom: 1px solid color-mix(in srgb, var(--s-ink) 12%, transparent); }
.s-logo { font-size: calc(3.1cqi * var(--fdz)); line-height: 1; margin-right: auto; white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.s-links { display: flex; gap: 2.8cqi; font-size: clamp(10px, 1.75cqi, 14px); font-weight: 500; }
.s-ico { width: clamp(14px, 2.4cqi, 20px); height: clamp(14px, 2.4cqi, 20px); }
.s-ico svg { width: 100%; height: 100%; fill: currentColor; }
.s-menu { display: none; }

.s-hero { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 4cqi; align-items: center; padding: 3.4cqi 3.6cqi 3.2cqi; transition: opacity .18s, color .5s var(--ease); }
.s-over { margin: 0 0 1.2cqi; font-size: clamp(9px, 1.55cqi, 13px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.s-h { margin: 0 0 1.6cqi; font-size: calc(min(6.6cqi, 10cqh) * var(--fdz)); line-height: 1.04; padding-bottom: .05em; text-wrap: balance; }
.s-p { margin: 0 0 2.6cqi; font-size: clamp(11px, 2.05cqi, 17px); line-height: 1.45; max-width: 34ch; opacity: .88; }
.s-btn { display: inline-flex; align-items: center; min-height: clamp(26px, 5.4cqi, 46px); padding: 0 clamp(12px, 2.8cqi, 24px); border-radius: var(--rb); background: var(--s-acc); color: var(--s-aink); font-size: clamp(10px, 1.85cqi, 15px); font-weight: 700; white-space: nowrap; font-synthesis: none; transition: border-radius .5s var(--ease); }
/* the picture place in the top section: the main picture fills it; Collage shows two more beside it */
.s-media { position: relative; height: min(40cqi, 50cqh); }
.s-pic { position: relative; display: block; background: var(--s-soft); }
.s-media .s-pic.main { position: absolute; inset: 0; }
.s-media .s-pic.b, .s-media .s-pic.c { display: none; }

/* picture shapes, the same as the builder's: on the top picture and on the pictures in the row. --u is one hundredth of the page's width,
   so a shape looks the same big and small. Between two shapes the corners turn from one into the other (Cut corners grows out of
   --clip0); a dissolve or a first paint changes them at once (.still) */
.shp { --morph: .8s cubic-bezier(.33, 1, .68, 1); overflow: hidden; border-radius: 0; clip-path: var(--clip0); transition: border-radius var(--morph), clip-path var(--morph), padding var(--morph), transform var(--morph), box-shadow var(--morph), background-color .8s; }
.shp > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s, inset var(--morph), width var(--morph), height var(--morph); }
.shp[data-shape="soft"] { border-radius: calc(var(--u) * 1.8); }
.shp[data-shape="arch"] { border-radius: 999px 999px 0 0; }
.shp[data-shape="oval"] { border-radius: 50%; }
.shp[data-shape="leaf"] { border-radius: calc(var(--u) * 5) calc(var(--u) * .6) calc(var(--u) * 5) calc(var(--u) * .6); }
.shp[data-shape="blob"] { border-radius: 42% 58% 55% 45% / 55% 45% 58% 42%; }
.shp[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)); }
.shp[data-shape="polaroid"] { background-color: #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); }
.shp[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); }
.s-item .shp[data-shape="polaroid"] { transform: rotate(1.2deg); }

/* seven page layouts, from the Layout pick (until there is one, from the Colors pick) */
.site[data-lay="arch"] .s-hero { grid-template-columns: .82fr 1fr; text-align: center; }
.site[data-lay="arch"] .s-media { order: -1; height: min(44cqi, 54cqh); }
.site[data-lay="arch"] .s-p { margin-inline: auto; }
.site[data-lay="full"] .s-hero { grid-template-columns: 1fr; min-height: 47cqi; padding: 6cqi 5cqi; margin: 0; color: #FFF8EF; }
.site[data-lay="full"] .s-media { position: absolute; inset: 0; height: auto; z-index: 0; }
/* a full picture has no shape of its own: it is the whole top of the page */
.site[data-lay="full"] .s-media .s-pic.main { border-radius: 0 !important; clip-path: var(--clip0) !important; padding: 0 !important; transform: none !important; box-shadow: none !important; }
.site[data-lay="full"] .s-media .s-pic.main > img { inset: 0 !important; width: 100% !important; height: 100% !important; }
.site[data-lay="full"] .s-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 12, 8, .72), rgba(20, 12, 8, .38) 55%, rgba(20, 12, 8, .05)); }
.site[data-lay="full"] .s-copy { position: relative; z-index: 1; max-width: 58%; }
.site[data-lay="framed"] .s-media { padding: 1.7cqi; background: var(--s-soft); box-shadow: 1.8cqi 1.8cqi 0 var(--s-acc); margin: 0 1.8cqi 1.8cqi 0; }
.site[data-lay="framed"] .s-media .s-pic.main { inset: 1.7cqi; }
.site[data-lay="center"] .s-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 2.4cqi; }
.site[data-lay="center"] .s-p { margin-inline: auto; }
.site[data-lay="center"] .s-media { order: 2; width: 100%; height: min(25cqi, 30cqh); }
.site[data-lay="poster"] .s-hero { grid-template-columns: 1fr; min-height: min(44cqi, 60cqh); align-items: start; padding-bottom: 4cqi; }
.site[data-lay="poster"] .s-h { font-size: calc(min(9.6cqi, 14cqh) * var(--fdz)); line-height: .96; }
.site[data-lay="poster"] .s-copy { max-width: 66%; position: relative; z-index: 2; }
.site[data-lay="poster"] .s-p { max-width: 30ch; }
.site[data-lay="poster"] .s-media { position: absolute; right: 3.6cqi; bottom: -3cqi; width: 40%; height: min(32cqi, 42cqh); z-index: 1; }
.site[data-lay="collage"] .s-hero { grid-template-columns: 1fr 1.2fr; }
.site[data-lay="collage"] .s-media { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.4cqi; }
.site[data-lay="collage"] .s-media .s-pic { display: block; position: relative; inset: auto; }
.site[data-lay="collage"] .s-media .s-pic.main { grid-row: 1 / 3; }

.s-strip { padding: 1.3cqi 3.6cqi; background: var(--s-ink); color: var(--s-bg); font-size: clamp(9px, 1.6cqi, 13px); font-weight: 600; letter-spacing: .06em; text-align: center; }
.s-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqi; padding: 3cqi 3.6cqi; }
.s-row-title { grid-column: 1 / -1; margin: 0; font-size: calc(3cqi * var(--fdz)); }
.s-item { min-width: 0; font-size: clamp(10px, 1.75cqi, 14px); line-height: 1.3; }
.s-item b { display: block; font-weight: 700; margin-top: .2em; }
.s-shot { position: relative; aspect-ratio: 1 / .92; overflow: hidden; background: var(--s-soft); margin-bottom: 1.2cqi; isolation: isolate; }
.s-shot > img { filter: blur(1.5px) saturate(.9); transform: scale(1.08); opacity: .85; }
.s-shot > img.clear { filter: none; transform: none; opacity: 1; }

/* a candle in a glass jar, labelled with her shop name */
.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(--s-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(--s-bg); color: var(--s-ink); border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-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(--fb, var(--sans)); font-style: normal; }

/* a set of printed cards */
.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(--s-bg); color: var(--s-ink); font-size: clamp(6px, 1.35cqi, 11px); padding: 6%; }

/* printable worksheets */
.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(--s-ink); padding: 6% 2%; background: var(--s-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%; }

/* a wide frame (760px and up) shows the whole top of the page: a shorter picture, a smaller headline, more room for the words.
   The picture and headline are capped by the frame's height too (cqh), so a wide, short frame still shows the top bar, hero and strip. */
@container (min-width: 760px) {
  .s-nav { padding: min(1.8cqi, 4.4cqh) 3.6cqi; }
  .s-logo { font-size: calc(min(3.1cqi, 8.6cqh) * var(--fdz)); }
  .s-hero, .site[data-lay="arch"] .s-hero { grid-template-columns: 1.15fr 1fr; padding: min(2.2cqi, 4.4cqh) 3.6cqi; }
  .site[data-lay="arch"] .s-hero { grid-template-columns: .9fr 1fr; }
  .s-media, .site[data-lay="arch"] .s-media { height: min(24cqi, 48cqh); }
  /* the framed picture also carries its frame, offset and shadow below it */
  .site[data-lay="framed"] .s-media { height: min(24cqi, 41cqh); margin-bottom: min(1.8cqi, 3cqh); }
  .s-h { font-size: calc(min(4.6cqi, 8cqh) * var(--fdz)); margin-bottom: 1.2cqi; }
  .s-p { margin-bottom: 1.8cqi; }
  .site[data-lay="full"] .s-hero { min-height: min(27cqi, 60cqh); grid-template-columns: 1fr; padding: min(4cqi, 6.4cqh) 5cqi; }
  .site[data-lay="center"] .s-hero { gap: min(1.8cqi, 3cqh); }
  .site[data-lay="center"] .s-media { height: min(20cqi, 30cqh); }
  .site[data-lay="poster"] .s-hero { min-height: min(34cqi, 56cqh); }
  .site[data-lay="poster"] .s-h { font-size: calc(min(7.2cqi, 12cqh) * var(--fdz)); }
  .site[data-lay="poster"] .s-copy { max-width: 64%; }
  .site[data-lay="poster"] .s-media { width: 33%; height: min(25cqi, 40cqh); }
  .site[data-lay="collage"] .s-hero { grid-template-columns: 1fr 1.25fr; }
  .site[data-lay="collage"] .s-media { height: min(26cqi, 50cqh); }
  .s-strip { padding-block: min(1.3cqi, 3cqh); }
  .s-row-title { font-size: calc(2.6cqi * var(--fdz)); }
}

/* phone-sized container: the same website, stacked */
@container (max-width: 470px) {
  .s-nav { padding: 3cqi 4.6cqi; }
  .s-logo { font-size: calc(5.4cqi * var(--fdz)); max-width: 75%; }
  .s-links { display: none; }
  .s-menu { display: inline-flex; }
  .s-hero, .site[data-lay="arch"] .s-hero { grid-template-columns: 1fr; gap: 3.4cqi; padding: 4cqi 4.6cqi; }
  .s-media, .site[data-lay="arch"] .s-media { order: -1; height: 30cqi; }
  .site[data-lay="arch"] .s-media { height: 30cqi; width: 62%; margin-inline: auto; }
  .site[data-lay="full"] .s-hero { min-height: 66cqi; align-content: end; padding: 6cqi 5.6cqi; }
  .site[data-lay="full"] .s-media::after { background: linear-gradient(0deg, rgba(20, 12, 8, .8), rgba(20, 12, 8, .25) 70%, rgba(20, 12, 8, .05)); }
  .site[data-lay="full"] .s-copy { max-width: 100%; }
  .site[data-lay="framed"] .s-media { margin: 0 3cqi 3cqi 0; box-shadow: 3cqi 3cqi 0 var(--s-acc); padding: 2.6cqi; }
  .site[data-lay="framed"] .s-media .s-pic.main { inset: 2.6cqi; }
  /* Centered keeps its words first and the wide picture under them; Collage puts its three pictures on top; Poster keeps its big
     headline, with the paragraph narrower so the picture can sit in the corner beside it */
  .site[data-lay="center"] .s-hero { gap: 3cqi; }
  .site[data-lay="center"] .s-media { order: 2; height: 26cqi; }
  .site[data-lay="collage"] .s-hero { grid-template-columns: 1fr; }
  .site[data-lay="collage"] .s-media { order: -1; height: 32cqi; }
  .site[data-lay="poster"] .s-hero { min-height: 0; padding-bottom: 6cqi; }
  .site[data-lay="poster"] .s-h { font-size: calc(11.6cqi * var(--fdz)); }
  .site[data-lay="poster"] .s-copy { max-width: 100%; }
  .site[data-lay="poster"] .s-p { max-width: 56%; }
  .site[data-lay="poster"] .s-media { order: 0; width: 36%; height: 30cqi; right: 4.6cqi; bottom: -3cqi; }
  .s-over { display: none; }
  .s-h { font-size: calc(9.2cqi * var(--fdz)); margin-bottom: 1.8cqi; }
  .s-p { font-size: 3.7cqi; margin-bottom: 3.2cqi; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .s-btn { min-height: 10.5cqi; padding: 0 5.4cqi; font-size: 3.7cqi; }
  .s-strip { font-size: 3cqi; padding: 2.4cqi 4.6cqi; }
  .s-row { grid-template-columns: 1fr 1fr; gap: 3.6cqi; padding: 4.6cqi; }
  .s-row-title { font-size: calc(5.6cqi * var(--fdz)); }
  .s-item { font-size: 3.4cqi; }
  .candle .label em { font-size: 2.1cqi; }
  .candle .label small { font-size: 1.6cqi; }
  .cards i { border-width: 1.6cqi; }
  .cards i:nth-child(3) { font-size: 2.6cqi; }
  .ws .st { font-size: 2.3cqi; }
}
/* short phones: a shorter hero picture and a one-line paragraph keep the headline and button inside the frame (the main example only, not the sheet).
   The frame is pinned and shorter there, so the picture is capped by the frame's height too. */
@media (max-height: 700px) and (max-width: 599px) {
  #screen .s-nav { padding: 2.4cqi 4.6cqi; }
  #screen .s-hero, #screen .site[data-lay="arch"] .s-hero { padding: 3cqi 4.6cqi; gap: 2.6cqi; }
  #screen .s-media, #screen .site[data-lay="arch"] .s-media { height: min(22cqi, 24cqh); }
  #screen .s-h { margin-bottom: 1.2cqi; }
  #screen .s-p { -webkit-line-clamp: 1; margin-bottom: 2.4cqi; }
  #screen .site[data-lay="full"] .s-hero { min-height: 50cqi; }
}

/* ---------- the five rows of pictures: 1 Colors, 2 Lettering, 3 Motion, 4 Layout, 5 Shape. Each runs the full width of the window. ---------- */
.strips { display: grid; gap: 7px; margin-top: 12px; }
.strip { position: relative; min-width: 0; }
.strip-head { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 var(--inset); }
.num { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--pop); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; transform: rotate(-4deg); }
.strip-head h2 { margin: 0; font: 400 24px/1 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.strip-why { flex: 1; min-width: 0; margin: 0; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-why .why-short { display: none; }
/* the pick chip: a check, the picked picture and where it came from */
.strip-pick { display: inline-flex; align-items: center; gap: 7px; min-width: 0; margin-left: auto; padding: 4px 12px 4px 8px; border-radius: var(--rbtn); background: color-mix(in srgb, var(--card) 85%, transparent); border: 1.5px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.strip-pick .pick-ck { width: 16px; height: 16px; color: var(--cta); }
.strip-pick .pick-pic { flex: none; width: 22px; height: 22px; border-radius: 6px; background: center/cover no-repeat; box-shadow: 0 0 0 1.5px #fff; }
.strip-pick .pick-txt { overflow: hidden; text-overflow: ellipsis; }
/* no pick yet: hidden from sight but still there for screen readers, so the first pick is read out */
.strip:not(.has-pick) .strip-pick { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.strip.pulse .strip-head h2 { animation: pulseHead .8s var(--ease); }
@keyframes pulseHead { 0%, 100% { transform: none; } 40% { transform: scale(1.12); color: var(--cta); } }
/* arrows for people with a mouse: always there, never on hover; never on touch */
.arrows { display: none; flex: none; align-items: center; height: 36px; gap: 6px; margin-left: 4px; }
.arrows button { width: 44px; height: 44px; margin: -4px 0; border-radius: 50%; border: 1.5px solid var(--line); background: color-mix(in srgb, var(--card) 85%, transparent); display: grid; place-items: center; color: var(--ink); padding: 0; }
.arrows button [data-icon] { width: 18px; height: 18px; }
.arrows button.prev [data-icon] { transform: rotate(180deg); }
.arrows button:active { transform: scale(.94); }
@media (pointer: fine) { .arrows { display: flex; } }
/* Play again, in the Motion row's heading: every pointer, 44px tall like the arrows, so the heading stays 36px */

.row { display: flex; gap: var(--gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 7px var(--inset) 10px; margin: 0; scroll-padding: 0 var(--inset); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.row::-webkit-scrollbar { display: none; }
.tile {
  position: relative; flex: none; width: var(--tile); height: var(--tile);
  border: 0; padding: 0; margin: 0;
  border-radius: var(--r-tile); overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, var(--page));
  box-shadow: 0 1px 2px rgba(19, 41, 75, .08);
  scroll-snap-align: start; scroll-margin-bottom: 14px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile:active { transform: scale(.96); }
.tile[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--page), 0 0 0 6px var(--ink), var(--shadow); scroll-snap-align: center; }
/* a picked tile's outline would sit on its ring, so keyboard focus shows as a ring inside the picture */
.tile[aria-pressed="true"]:focus-visible::after { content: ""; position: absolute; inset: 6px; border-radius: 9px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); pointer-events: none; }
.tick { position: absolute; z-index: 2; top: 7px; right: 7px; width: 30px; height: 30px; border-radius: 50%; background: var(--cta); color: var(--cta-ink); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .35s var(--ease); pointer-events: none; }
.tick [data-icon], .tick svg { width: 16px; height: 16px; }
.tile[aria-pressed="true"] .tick { opacity: 1; transform: none; }
.tile.beat .tick { animation: beat .7s var(--ease); }
@keyframes beat { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 55% { transform: scale(.92); } 100% { transform: scale(1); } }

/* a Motion picture: the photo sits in its own frame, which plays the opening (motion.css) the first time the picture comes into view */
.tile-pic { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.tile[data-mo] { --mo-u: .4px; --mo-t: .8; }
/* the chip's word plays the headline's part (app.js gives it mo-h). Stamp's shake on the photo is made bigger, or it is too small to see
   on a tile; Type out lets its caret show just past the word. */
.tile[data-mo="stamp"] .mo-pic img { --mo-u: 1px; }
.tile[data-mo="typed"].mo-play .mk-mo .mo-h { overflow: visible; }
/* Float's word rises like Rise's, and its photo's bob is small at this size, so the whole chip floats along with the photo, twice, then rests */
@media (prefers-reduced-motion: no-preference) {
  @keyframes tile-float { 50% { translate: 0 -3px; } }
  .tile[data-mo="float"].mo-play .mk-mo { animation: tile-float calc(2000ms * var(--mo-t, 1)) ease-in-out calc(600ms * var(--mo-t, 1)) 2; }
}

/* the markers: what tapping this picture would give, drawn from the look's own colors and lettering. Never a font name or a code.
   They sit above the picture, and above Color sweep's band. */
.mk { position: absolute; z-index: 2; left: 7px; bottom: 7px; pointer-events: none; }
.mk-dots { display: flex; align-items: center; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.mk-dots i { width: 16px; height: 16px; border-radius: 50%; margin-right: -4px; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .22); }
.mk-dots i:last-child { margin-right: 0; }
/* a lettering pair, like a type specimen: the big headline letters, a thin line, then the small everyday letters */
.mk-pair { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 9px; border-radius: 12px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 1px 4px rgba(0, 0, 0, .22); }
.mk-pair img { flex: none; height: clamp(18px, calc(25px * var(--z, 1)), 30px); width: auto; max-width: 36px; max-height: 36px; object-fit: contain; }
.mk-div { flex: none; width: 1px; height: 60%; background: color-mix(in srgb, var(--mk-ink) 25%, transparent); }
/* the everyday letters are a drawing used as a mask (its file is set on the element), filled with the look's ink */
.mk-abc { flex: none; width: 26px; height: 15px; background-color: var(--mk-ink); -webkit-mask-position: left bottom; mask-position: left bottom; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* a motion: its little drawing and its name */
.mk-mo { display: inline-flex; align-items: center; gap: 5px; height: 28px; max-width: calc(100% - 14px); padding: 0 10px 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); color: #13294B; font: 700 12.5px/1 var(--sans); white-space: nowrap; }
.mk-mo svg { flex: none; width: 14px; height: 14px; }
.mk-mo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* a layout: its little drawing and its name; a picture shape: its name. A long name takes two lines rather than being cut short */
.mk-lay, .mk-sh { height: auto; min-height: 28px; padding: 4px 10px 4px 6px; border-radius: 14px; white-space: normal; }
.mk-sh { padding: 4px 10px; }
.mk-lay svg { width: 26px; height: 19.5px; }
.mk-lay span, .mk-sh span { text-align: left; font-size: 12px; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: balance; }
/* on the smallest phones a picture is only about 95px wide: the name tags take a little less room, so long names (Houndstooth,
   Cross-stitch border, Checkerboard) show whole (13 Oct 2026, review) */
@media (max-width: 359px) { .mk-sh { padding-inline: 7px; } .mk-sh span { font-size: 11px; } }
/* a Shape picture: the photo cut to the look's picture shape, on the tile's own ground, with room below it for the shape's name */
.tile-shape { position: absolute; inset: 9px 9px 42px; --u: calc(var(--tile) * .024); }

/* rows 3 to 5 (7 Oct 2026, late). Backdrop: the photo on a card of its look's backdrop. Little details: the photo on a card of its look's
   page color with the set's drawings around it, as on the website (sized from the tile; extras.css places them). Photo style: the photo
   in its style. Each leaves room at the foot for the name. */
.tile-bd { position: absolute; inset: 0; --pu: .7px; }
.bd-pic, .dt-pic, .dt-box { position: absolute; inset: 22% 22% 34%; }
.bd-pic, .dt-pic { overflow: hidden; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .22); }
.tile-dt { position: absolute; inset: 0; container-type: inline-size; --dkk: 3; }
.orn-wrap { position: absolute; inset: 0; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .22)); }
.tile-dt .orn-u { position: absolute; left: 50%; top: 11%; margin: 0; --tx: -50%; --ty: -50%; --dkk: 1.6; }
.tile-dt .orn-u { transform: translate(var(--tx), var(--ty)) rotate(var(--r, 0deg)); }
.tile-ph { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.tile-ph > img { position: absolute; inset: 0; }

/* None, first in rows 3 to 5; a None pick shows as "None" in its square, the bottom bar and the result list */
.slot.is-none .slot-pic, .mini-tray span.is-none, .made li span.none { background: var(--card); }
.slot.is-none .slot-pic > *, .slot.full.is-none .slot-pic > * { visibility: hidden; }
.slot.is-none .slot-pic::after { content: "None"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 13px/1 var(--sans); color: var(--ink-2); }
.slot.is-none .slot-pic { position: relative; }

/* Motion, Layout, Shape under See my style: each tap shows a different one on the example (app.js) */
.mix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.mix-btn { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 12px 6px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .2s var(--ease); }
.mix-btn:active { transform: scale(.96); }
.mix-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.mix-ico, .mix-ico svg { flex: none; width: 18px; height: 18px; }
.mix-txt { display: grid; min-width: 0; }
.mix-txt b { font: 700 14px/1.2 var(--sans); }
.mix-txt small { font: 500 12.5px/1.25 var(--sans); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .mix { gap: 6px; } .mix-btn { padding: 6px 8px; min-height: 48px; } .mix-ico { display: none; } }   /* a phone: the names get the room */

/* add your own pictures: first in the Colors row, the same square as the other tiles */
.own { container-type: inline-size; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; padding: 10px; cursor: pointer; background: var(--card); border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); box-shadow: none; }
.own input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.own:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.own .plus { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--page); margin-bottom: 4px; }
.own .plus svg { width: 18px; height: 18px; fill: currentColor; }
.own b { font-size: 13.5px; line-height: 1.15; }
.own small { font-size: 11.5px; color: var(--ink-2); line-height: 1.25; }
.own small .nw { white-space: nowrap; }   /* "Colors only," then "up to 10", never "up / to 10" (14 Oct 2026, review A6) */
/* the container is the tile's inside, 24px narrower than the tile. Under 118 the plus shrinks; under 110 the words get a touch smaller so they keep to two lines;
   "Up to 10" goes only on tiles under 100 (none today: the smallest tile is 104) */
@container (max-width: 93px) { .own .plus { width: 30px; height: 30px; } }
@container (max-width: 85px) { .own b { font-size: 12.5px; letter-spacing: -.01em; } }
@container (max-width: 75px) { .own small { display: none; } }

/* her own pictures, and what they look most like */
.suggest { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin: 10px var(--inset) 0; padding: 12px 18px 12px 14px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); animation: rise .5s var(--ease); }
.suggest p { margin: 0; font-size: 15.5px; line-height: 1.4; }
.suggest p span { display: block; color: var(--ink-2); font-size: 14px; }
.sg-pics { display: flex; flex: none; padding-left: 10px; }
.sg-pics i { width: 40px; height: 40px; margin-left: -10px; border-radius: 10px; background: center/cover no-repeat; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .15); }
.sg-pics i:nth-child(1) { transform: rotate(-6deg); } .sg-pics i:nth-child(3) { transform: rotate(5deg); }
.has-suggest .note { display: none; }

/* what flies from a picture to the website: the marker itself */
.fly { position: fixed; left: 0; top: 0; z-index: 40; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .28); pointer-events: none; will-change: transform; }
.fly.aa { display: grid; place-items: center; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 12px; border: 0; }
.fly.aa img { height: clamp(18px, calc(25px * var(--z, 1)), 30px); width: auto; max-width: 36px; max-height: 36px; }
/* the small everyday letters follow the big ones, to the paragraph */
.fly.abc { display: grid; place-items: center; width: 36px; height: 22px; margin: -11px 0 0 -18px; border-radius: 999px; border: 0; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 3px 10px rgba(0, 0, 0, .28); }
.fly.abc i { width: 24px; height: 14px; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* rows 3 to 5: a square of the backdrop, the set's main drawing, or the photo in its style */
.fly.bd { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 12px; border: 2.5px solid #fff; --pu: .3px; }
.fly.dt { width: 52px; height: auto; aspect-ratio: var(--ar, 1); margin: -26px 0 0 -26px; border: 0; border-radius: 0; box-shadow: none; }
.fly.phf { width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 12px; border: 2.5px solid #fff; overflow: hidden; }
.fly.phf .ph { position: absolute; inset: 0; }
.fly.phf .ph > img { width: 100%; height: 100%; object-fit: cover; }
/* the motion chip flies to the picture; it is centred on its path whatever its width */
.fly.mo { display: inline-flex; align-items: center; gap: 5px; width: auto; height: 28px; margin: 0; translate: -50% -50%; padding: 0 10px 0 7px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .96); color: #13294B; font: 700 12.5px/1 var(--sans); white-space: nowrap; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 3px 10px rgba(0, 0, 0, .28); }
.fly.mo svg { width: 14px; height: 14px; }
/* a layout's drawing flies to the top of the website on a little white card */
.fly.lay { display: grid; place-items: center; width: 60px; height: 46px; margin: -23px 0 0 -30px; border-radius: 10px; border: 0; background: #fff; color: #13294B; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 3px 12px rgba(0, 0, 0, .28); }
.fly.lay svg { width: 46px; height: 34.5px; }
/* the picture, cut to its shape, flies to the picture on the website; its shadow follows the shape */
.fly.shape { width: 58px; height: 58px; margin: -29px 0 0 -29px; border: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .32)); }
.fly.shape .shp { position: absolute; inset: 0; --u: 1.5px; }
.ring { position: fixed; z-index: 39; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid; pointer-events: none; }

/* ---------- what you get ---------- */
.take {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 96px); align-items: center;
  max-width: 1280px; margin: 0 auto; padding: clamp(64px, 9vw, 128px) clamp(16px, 3.6vw, 56px);
}
.take h2 { font: 400 clamp(38px, 3.7vw, 54px)/1.04 var(--serif); letter-spacing: -.03em; margin: 0 0 36px; }
.how { list-style: none; margin: 0 0 36px; padding: 0; display: grid; gap: 24px; }
.how li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; }
.how-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow); color: var(--cta); }
.how-ico svg { width: 24px; height: 24px; }
.how h3 { margin: 2px 0 2px; font-size: 20px; line-height: 1.3; }
.how p { margin: 0; color: var(--ink-2); max-width: 42ch; }
.deal { padding: 24px 26px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); }
.deal-price { margin: 0; font-size: 18px; }
.deal-price b { font: 500 46px/1 var(--serif); letter-spacing: -.02em; margin-right: 8px; }
.deal-line { margin: 8px 0 12px; font-weight: 700; }
.deal-honest { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; }

.kit { position: relative; aspect-ratio: 1 / .92; }
.kit-page { position: absolute; width: 58%; aspect-ratio: .78; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow-big); }
.kit-page-a { left: 4%; top: 4%; transform: rotate(-4deg); }
.kit-page-b { left: 26%; top: 0; transform: rotate(5deg); filter: blur(2.5px); opacity: .9; }
.kit-site { position: absolute; inset: 0; container-type: size; }
.kit-site .site { position: absolute; inset: 0; }
.kit-page-a .kit-site::after { content: ""; position: absolute; inset: 50% 0 0; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5)); }
.kit-board { transition: --s-bg .7s, --s-ink .7s; position: absolute; right: 0; bottom: 6%; width: 52%; padding: 22px 22px 18px; border-radius: var(--r-card); background: var(--s-bg); color: var(--s-ink); box-shadow: var(--shadow-big); transform: rotate(2deg); }
.kit-label { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.kit-name { margin: 0 0 14px; font-family: var(--fd); font-style: var(--fds); font-weight: var(--fdw); text-transform: var(--fdc); letter-spacing: var(--fdt); font-size: calc(30px * var(--fdz)); line-height: 1.08; }
.kit-dots { display: flex; gap: 8px; margin-bottom: 12px; }
.kit-dots i[data-c="bg"] { background: var(--s-bg); } .kit-dots i[data-c="soft"] { background: var(--s-soft); } .kit-dots i[data-c="extra"] { background: var(--s-extra); } .kit-dots i[data-c="accent"] { background: var(--s-acc); } .kit-dots i[data-c="ink"] { background: var(--s-ink); }
.kit-dots i { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8), 0 2px 6px rgba(0, 0, 0, .15); }
.kit-aa { display: flex; gap: 14px; margin: 0 0 10px; font-size: 34px; line-height: 1; }
.kit-aa span:first-child { font-family: var(--fd); font-style: var(--fds); font-weight: var(--fdw); }
.kit-aa span:last-child { font-family: var(--fb, var(--sans)); font-weight: 500; }
.kit-lock { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; opacity: .75; }
.kit-steps { position: absolute; left: 10%; bottom: 0; width: 36%; padding: 16px 18px 18px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: var(--shadow-big); transform: rotate(-3deg); display: grid; gap: 8px; }
.kit-steps .kit-label { margin: 0; }
.kit-steps-for { margin: 0 0 4px; font-weight: 700; font-size: 17px; }
.kit-steps i { height: 8px; border-radius: 4px; background: #EDE6E2; }
.kit-steps i.short { width: 60%; }
.stamp-kit { right: 3%; top: 9%; bottom: auto; font-size: 20px; padding: 12px 12px 12px 18px; }

/* ---------- questions ---------- */
.faq { max-width: 780px; margin: 0 auto; padding: 0 clamp(16px, 3.6vw, 56px) clamp(64px, 8vw, 112px); }
.faq h2 { font: 400 clamp(32px, 3.2vw, 44px)/1.1 var(--serif); letter-spacing: -.02em; margin: 0 0 18px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 19px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
/* the + is drawn, not read aloud (21 Oct 2026 read-aloud check) */
.faq summary::after { content: "+"; content: "+" / ""; font: 400 28px/1 var(--sans); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -4px 0 22px; color: var(--ink-2); max-width: 60ch; }
/* the contact form inside "How do I reach you?" (15 Oct 2026); no email address is shown anywhere */
.contact-form { display: grid; gap: 12px; max-width: 520px; margin: 0 0 24px; }
.contact-form label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px 14px; border: 1.5px solid color-mix(in srgb, var(--ink) 32%, transparent); border-radius: 12px;
  background: #fff; color: #13294B; font: 400 17px/1.4 var(--sans); }   /* the boxes stay white on dark looks, so their words stay dark */
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cta) 22%, transparent); }
.contact-send { justify-self: start; min-height: 48px; padding: 0 28px; border: 0; border-radius: var(--rbtn); background: var(--cta); color: var(--cta-ink); font-size: 17px; font-weight: 700; cursor: pointer; }
.contact-send:disabled { opacity: .6; cursor: default; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.faq details .contact-note { margin: 0; min-height: 1.4em; }

.foot { text-align: center; padding: 40px 16px 56px; border-top: 1px solid var(--line); }
.foot p { margin: 4px 0; }
.foot .brand { font-size: 22px; }
.foot .small { font-size: 14px; color: var(--ink-2); }
.foot a, .faq details p a { color: inherit; text-underline-offset: 3px; }

/* about.html and contact.html (22 Oct 2026, for Pinterest's seller check) */
.page { max-width: 780px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) clamp(16px, 3.6vw, 56px) clamp(64px, 8vw, 112px); }
.page h2 { font: 400 clamp(24px, 2.4vw, 30px)/1.15 var(--serif); letter-spacing: -.01em; margin: 32px 0 8px; }
.page p { max-width: 60ch; }
.page a { color: inherit; text-underline-offset: 3px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; max-width: min(92vw, 460px); padding: 14px 20px; border-radius: 14px; background: var(--ink); color: var(--page); font-size: 15.5px; font-weight: 500; box-shadow: var(--shadow-big); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* phone pieces are hidden on a computer */
.dock, .sheet { display: none; }

/* ---------- computers and iPads: tall, short and in-between windows ---------- */
/* 1100px tall and up (a 13-inch iPad held upright): three of the rows fit under the band with no scroll */
@media (min-width: 1024px) and (min-height: 1100px) { :root { --pv: clamp(460px, calc(100 * var(--vh) - var(--top) - 30px - 3 * var(--rowh)), 720px); } }
/* while the band is pinned, a row that is scrolled to lands just under it, never behind it */
@media (min-width: 1024px) and (min-height: 700px) { .strip, .row > .tile, #strips { scroll-margin-top: calc(var(--pv) + 20px); } }
/* computers and big tablets (Rachel, 7 Oct): the example is a real laptop page, 1440 x 900, drawn small in half the band, so it
   looks like a whole website and not a blown-up top section. app.js (fitFrame) sets --k, the size it is drawn at. The frame keeps
   the laptop's shape, and the five squares on the left are the same size as the pictures in the rows. */
@media (min-width: 1024px) and (min-height: 700px) {
  :root { --pv: calc((min(100vw, 1560px) - 2 * var(--gutter)) * .3125 + 40px); }
  .pinband { grid-template-columns: minmax(0, 1fr) 50%; }
  #screen { container-type: inline-size; }
  #screen > .site { inset: 0 auto auto 0; width: 1440px; height: 900px; container-type: size; transform: scale(var(--k, .5)); transform-origin: 0 0; }
  #screen > .site { --pu: 1px; }
  /* five squares the size of the row pictures, or a little smaller when the column is narrower than five of them */
  .tray { grid-template-columns: repeat(5, minmax(0, var(--tile))); gap: var(--gap); }
  .slot-pic .ghost-aa { font-size: 46px; }
  .slot-pic .ghost-dots i { width: 18px; height: 18px; }
  .slot-pic .ghost-ic { width: 40px; height: 40px; }
}

/* a 13-inch iPad held upright (Rachel, 8 Oct 2026: "Bigger, 60%"): the example takes 60% of the band, still laptop-shaped. The band
   is already that tall here (its left column sets the height), so the rows stay where they were */
@media (min-width: 1024px) and (min-height: 1100px) and (orientation: portrait) {
  :root { --pv: calc((min(100vw, 1560px) - 2 * var(--gutter)) * .6 / 1.6 + 40px); }
  .pinband { grid-template-columns: minmax(0, 1fr) 60%; }
}

/* a short laptop window: Rachel's second sentence stays, a little smaller (8 Oct 2026; it was hidden here before) */
@media (min-width: 1024px) and (max-height: 819px) { .lede { font-size: 15px; line-height: 1.35; margin-bottom: 10px; } }
/* under 700px tall the band would fill the window, so it scrolls away with the page */
@media (min-width: 1024px) and (max-height: 699px) { .pinband { position: static; } .pinband::after { display: none; }
  /* the intro column is narrow here, so the five slots and their drawings are smaller */
  .slot-lab { font-size: 12px; }
  .slot-pic .ghost-aa { font-size: 24px; }
  .slot-pic .ghost-dots { gap: 3px; } .slot-pic .ghost-dots i { width: 9px; height: 9px; }
  .slot-pic .ghost-ic { width: 22px; height: 22px; }
}
@media (min-width: 1024px) and (max-width: 1280px) {
  :root { --gutter: 32px; --col: 272px; --colgap: 28px; }
  h1 { font-size: 42px; }
  .strip.has-pick .strip-why { display: none; }
}
/* the band's example is shorter here, so her five picks in the result column sit two to a line, and Make it mine stays in sight */
@media (min-width: 1024px) and (max-width: 1280px) and (min-height: 700px) {
  .intro-result .made { grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 6px; }
  .intro-result .made li { grid-template-columns: 32px 1fr; gap: 8px; font-size: 14px; }
  .intro-result .made li span:first-child { width: 32px; height: 32px; border-radius: 8px; }
}

/* ---------- one column: tablet (600 to 1023) and phone ---------- */
@media (max-width: 1023px) {
  :root { --top: 96px; --gutter: 24px; --tile: clamp(112px, calc((100vw - 88px) / 6.2), 140px); --gap: 10px; --rowh: calc(var(--tile) + 61px); --pv: clamp(300px, calc(40 * var(--vh)), 440px); }
  html { scroll-padding-top: 0; }
  body { font-size: 16px; padding-bottom: 40px; }
  .play { display: block; padding: 4px 0 8px; }
  /* one column: the band steps aside, so the website example pins inside the whole game as before */
  .pinband { display: contents; }
  .pinband::after { display: none; }
  .intro { position: static; padding: 0 var(--gutter) 8px; }
  .is-result .intro, .is-result .intro.more { max-height: none; overflow: visible; padding-bottom: 8px; -webkit-mask-image: none; mask-image: none; }
  .what { font-size: 15px; margin: 0 0 2px; }
  h1 { font-size: 40px; margin-bottom: 4px; white-space: nowrap; }
  .lede { font-size: 16px; margin-bottom: 10px; max-width: none; }
  /* the band under the headline: the tray on the left, See my style on the right */
  .band-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .band-row .cta { display: inline-flex; width: auto; min-height: 54px; font-size: 17.5px; padding: 0 24px; }
  .tray { grid-template-columns: repeat(5, 56px); gap: 8px; margin: 0; }
  .slot-pic .ghost-aa { font-size: 22px; }
  .slot-pic .ghost-dots i { width: 10px; height: 10px; }
  .slot-pic .ghost-ic { width: 22px; height: 22px; }
  .slot-lab { font-size: 12px; }
  #seeBtn, .intro-result { display: none !important; }
  .hint { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .intro-start .price { margin: 10px 0 0; font-size: 14.5px; text-align: left; }
  .intro .price b, .intro .price span { display: inline; }
  /* the website example stays under the top bar while she scrolls the rows, so every tap is seen landing */
  .stage { position: sticky; top: var(--top); z-index: 15; padding: 6px var(--gutter) 0; background: var(--page); }
  .stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(var(--page), transparent); pointer-events: none; }
  .browser { border-radius: 16px; animation-duration: .6s; }
  .strips { margin-top: 12px; gap: 10px; }
  #seeBtn { margin-top: 0; }
  .strip { scroll-margin-top: calc(var(--top) + var(--pv) + 24px); }
  .row > .tile { scroll-margin-top: calc(var(--top) + var(--pv) + 24px); }
  #strips { scroll-margin-top: calc(var(--top) + var(--pv) + 16px); }
  .strip-head { padding: 0 var(--gutter); min-height: 34px; }
  .strip-head h2 { font-size: 22px; }
  .row { padding: 7px var(--gutter) 10px; margin: 0; scroll-padding: 0 var(--gutter); }
  .suggest { margin: 10px var(--gutter) 0; padding: 9px 12px 9px 10px; gap: 10px; }
  .suggest p { font-size: 14px; }
  .sg-pics i { width: 32px; height: 32px; }

  .take { grid-template-columns: 1fr; padding: 56px 16px; gap: 40px; }
  .take h2 { font-size: 38px; margin-bottom: 26px; }
  .kit { aspect-ratio: 1 / 1.02; }
  .kit-board { width: 64%; padding: 16px; }
  .kit-name { font-size: calc(22px * var(--fdz)); }
  .kit-dots i { width: 26px; height: 26px; }
  .kit-aa { font-size: 26px; }
  .kit-lock { font-size: 11.5px; }
  .kit-steps { width: 44%; padding: 12px; left: 2%; }
  .kit-steps-for { font-size: 14px; }
  .stamp-kit { font-size: 14px; right: 2%; top: 6%; }
  .faq summary { font-size: 17px; }

  .sheet { display: block; position: fixed; inset: 0; z-index: 45; overflow-y: auto; overscroll-behavior: contain; background: var(--page); animation: sheetUp .5s var(--ease); }
  .sheet[hidden] { display: none; }
  @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .sheet-in { position: relative; padding: 22px 16px calc(40px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; }
  .sheet-x { position: absolute; top: 14px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--card) 85%, transparent); }
  .sheet-x [data-icon] { width: 20px; height: 20px; }
  .sheet .kicker { font-size: 14.5px; margin-top: 2px; padding-right: 50px; }   /* clear of the close button (14 Oct 2026, review A10) */
  .sheet .look-name { font-size: calc(36px * var(--fdz, 1)); margin: 0 50px 14px 0; }
  .phone-site { position: relative; height: 420px; margin: 0 0 18px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-big), 0 0 0 6px #fff; }
  .phone-site .screen { position: absolute; inset: 0; }
  .sheet .made { margin-bottom: 20px; }
  .sheet .made li { font-size: 14.5px; grid-template-columns: 34px 1fr; }
  .sheet .made li span:first-child { width: 34px; height: 34px; }
  .send { margin: 6px 0 4px; }
  .send .cta { font-size: 17.5px; }
  .send-why { margin: 10px 4px 0; font-size: 14.5px; color: var(--ink-2); text-align: center; }
  .send-step, .sent { margin-top: 8px; padding: 20px 16px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); animation: rise .5s var(--ease); }
  .send-step h3, .sent h3 { margin: 0 0 14px; font: 400 26px/1.1 var(--serif); letter-spacing: -.01em; }
  .send-step .cta { font-size: 17px; min-height: 54px; }
  .err { margin: 0; font-size: 14px; color: #A3123A; font-weight: 600; }
  .demo { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-2); text-align: center; }
  .or { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; font-size: 14px; color: var(--ink-2); }
  .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .alt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  /* the two plain buttons in the sheet (scoped, because the frozen copy of the little website is also called .ghost) */
  .alt .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 12px; border-radius: var(--rbtn); border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .sent { text-align: center; }
  .sent-ico { width: 52px; height: 52px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: var(--cta); color: var(--cta-ink); }
  .sent-ico svg { width: 26px; height: 26px; }
  .sent p { margin: 0; }
  #keepBtn { display: block; margin: 14px auto 0; }
  .sheet-mine { display: none; }

  /* the bottom bar's five picks and See my style (phones always; tablets once all five picks are in) */
  .dock-row { display: flex; align-items: center; gap: 12px; }
  .mini-tray { display: flex; flex: none; }
  .mini-tray span { width: 32px; height: 32px; border-radius: 9px; margin-right: -7px; border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); background: var(--page) center/cover no-repeat; transition: transform .4s var(--ease); }
  .mini-tray span.full { border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
  .mini-tray span.pop { animation: pop .5s var(--ease); }
  .mini-tray span.want { animation: want .9s ease-in-out 2; }
}

/* ---------- tablets (600 to 1023): See my style in the intro scrolls away with the intro while she taps the rows. Once all five picks
   are in and it is out of sight, the bottom bar floats up as a small pill: her five picks and See my style. ---------- */
@media (min-width: 600px) and (max-width: 1023px) {
  .dock {
    display: block; position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30;
    padding: 7px 7px 7px 16px; border-radius: 16px;
    background: color-mix(in srgb, var(--page) 94%, white);
    box-shadow: 0 0 0 1px var(--line), 0 16px 36px -12px rgba(19, 41, 75, .45);
    translate: -50% 0; transform: translateY(calc(100% + 40px)); visibility: hidden;
    transition: transform .4s var(--ease), visibility 0s linear .4s;
  }
  .dock .price { display: none; }
  .dock .cta { width: auto; min-height: 54px; padding: 0 24px; font-size: 17.5px; margin-left: 6px; }
  .all-picked.see-away:not(.sheet-open) .dock { transform: none; visibility: visible; transition: transform .4s var(--ease), visibility 0s; }
  .all-picked.see-away .toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
}

/* an upright tablet: the builder fits its screen, so the result sheet offers Make it mine first; sending it to a computer comes second */
@media (min-width: 700px) and (max-width: 1023px) and (min-height: 600px) {
  .sheet-mine { display: block; margin: 0 0 22px; }
  .sheet-mine .price { margin-top: 10px; font-size: 14.5px; }
  #sendBtn { background: transparent; color: var(--ink); min-height: 54px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 32%, transparent); }
}

/* an upright tablet (an 11-inch iPad): a taller preview, sized so three of the rows fit under it once the intro has scrolled away */
@media (min-width: 700px) and (max-width: 1023px) and (orientation: portrait) {
  :root { --pv: clamp(300px, calc(100 * var(--vh) - var(--top) - 3 * var(--rowh) - 16px), 560px); }
}

/* ---------- phone (under 600): the bottom bar, rows that bleed to the screen edge, a 16px gutter ---------- */
@media (max-width: 599px) {
  :root { --top: 78px; --gutter: 16px; --tile: clamp(108px, calc((100vw - 44px) / 2.6), 135px); --gap: 8px; --pv: clamp(300px, calc(44 * var(--vh)), 400px); }
  body { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .brand { font-size: 18px; }
  .toplink { font-size: 14px; padding: 0 13px; }
  .what { font-size: 14.5px; margin: 0 0 1px; }
  h1 { font-size: min(40px, calc((100vw - 32px) / 11.4)); margin-bottom: 2px; }  /* Young Serif runs about 11.2 of its own sizes wide on one line */
  .lede { font-size: 15px; margin-bottom: 8px; }
  .band-row, .intro-start .price { display: none !important; }
  .bar { height: 26px; padding: 0 10px; gap: 5px; }
  .bar i { width: 8px; height: 8px; }
  .url { height: 18px; font-size: 11px; transform: none; padding: 0 10px; max-width: 62%; }
  .stamp { right: 10px; bottom: 10px; font-size: 12px; padding: 7px 7px 7px 10px; }
  /* the bar is too thin for the motion's name: the chip becomes a small round button at the bar's right end, where the bar is empty,
     so it never covers the little website. Its name is in its label. Its tap area is 44px square, reaching down into the frame. */
  .mo-chip { top: 3px; right: 8px; width: 20px; height: 20px; max-width: none; padding: 0; justify-content: center; box-shadow: 0 0 0 1px rgba(45, 27, 38, .14), 0 1px 3px rgba(45, 27, 38, .2); }
  .mo-chip::before { inset: -3px -8px -21px -16px; }
  .mo-chip svg { width: 13px; height: 13px; }
  .mo-chip span { display: none; }
  /* the website example stays put under the top bar while she scrolls the rows, so every tap is seen landing; the rows land just under it */
  .strip { scroll-margin-top: calc(var(--top) + var(--pv) + 20px); }
  .row > .tile { scroll-margin-top: calc(var(--top) + var(--pv) + 24px); }
  #strips { scroll-margin-top: calc(var(--top) + var(--pv) + 16px); }
  .strip-head { min-height: 32px; gap: 8px; }
  .strip-head h2 { font-size: 20px; }
  .strip-why { font-size: 13.5px; }
  .strip-why .why-long { display: none; }
  .strip-why .why-short { display: inline; }
  /* the pick chip: no check (the picture shows it), smaller words, and two lines rather than cutting a long name short */
  .strip-pick { gap: 6px; padding: 3px 10px 3px 5px; font-size: 12.5px; line-height: 1.15; white-space: normal; border-radius: 12px; }
  .strip-pick .pick-ck { display: none; }
  .strip-pick .pick-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .strip.has-pick .strip-why { display: none; }
  .tick { width: 28px; height: 28px; top: 6px; right: 6px; }
  .tick [data-icon], .tick svg { width: 14px; height: 14px; }
  .mk { left: 6px; bottom: 6px; }
  .mk-dots i { width: 15px; height: 15px; }
  .mk-pair { height: 36px; padding: 0 7px; gap: 6px; border-radius: 10px; }
  .mk-pair img { height: clamp(16px, calc(21px * var(--z, 1)), 26px); max-width: 30px; max-height: 30px; }
  .mk-abc { width: 22px; height: 13px; }
  .mk-mo { height: 26px; }
  /* Play again shows its icon only */
  .suggest p { font-size: 13.5px; }

  .dock {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 7px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--page) 94%, white);
    box-shadow: 0 -10px 30px -12px rgba(19, 41, 75, .3);
    transition: transform .4s var(--ease);
  }
  .dock .price { margin: 0 0 6px; font-size: 13.5px; }
  .dock .cta { min-height: 50px; font-size: 17.5px; margin-left: 8px; }
  .sheet-open .dock { transform: translateY(110%); }
  .toast { bottom: calc(120px + env(safe-area-inset-bottom)); }
}
/* short phones (under 700px tall): a shorter example, still pinned, sized so one whole row of pictures fits between it and the bottom bar */
@media (max-width: 599px) and (max-height: 699px) {
  :root { --pv: clamp(200px, calc(100 * var(--vh) - var(--top) - 6px - 104px - var(--rowh) - 10px), 300px); }
}

/* very small phones */
@media (max-width: 360px) {
  h1 { font-size: calc((100vw - 32px) / 11.4); }
  .toplink { display: none; }
  .lede { display: none; }
  .dock .cta { font-size: 16px; padding: 0 16px; }
  .alt { grid-template-columns: 1fr; }
}

/* people who switch movement off get a still page */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .swash path { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
  /* nothing in the Motion row plays, so there is nothing to play again */
}

/* ---------- the dice and Suggested (8 Oct 2026, late) ---------- */
/* Roll the dice under See my style, Roll again under Make it mine and in the phone's result sheet */
.dice-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 10px; padding: 0 20px; border-radius: var(--rbtn);
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-size: 16.5px; font-weight: 700; white-space: nowrap; }
.dice-btn small { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.dice-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.dice-ico, .dice-ico svg { flex: none; width: 22px; height: 22px; }
.dice-btn.rolling .dice-ico { animation: dice-roll .6s var(--ease); }
@keyframes dice-roll { from { transform: rotate(-200deg) scale(.6); } to { transform: none; } }
.again-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.again-row .dice-btn { margin-top: 0; padding: 0 12px; }
.sheet .again-row { margin: 12px 0 4px; }
@media (min-width: 1024px) {
  .go-row { display: flex; gap: 10px; margin-top: 12px; }
  .go-row #seeBtn { flex: 1 1 auto; width: auto; margin-top: 0; }
  .go-row .dice-btn { flex: none; width: auto; min-height: 56px; margin-top: 0; padding: 0 18px; }
  .go-row .dice-btn small { display: none; }
}
/* the left column can be narrow: 272 to 300 wide in a short window, and less again when the Mac shows scroll bars (Rachel's Air,
   15 Oct 2026). So its buttons follow the column's real width, not the window's. */
@media (min-width: 1024px) { .intro { container-type: inline-size; } }
/* See my style and the whole dice button need about 386: below that the dice shows only its drawing, as a round button.
   Its words stay for screen readers, and the button's title shows them on hover */
@container (max-width: 389px) {
  .go-row #seeBtn { padding: 0 20px; }
  .go-row .dice-btn { width: 56px; padding: 0; border-radius: 50%; }
  .go-row .dice-btn > span:not(.dice-ico) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Roll again and Start over side by side need about 310: below that they stack, one per line */
@container (max-width: 319px) { .again-row { grid-template-columns: 1fr; } }
.dice-mix { display: none; }
@media (max-width: 1023px) {
  .go-row { display: none; }
  .mix { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dice-mix { display: flex; }
  .dice-mix .mix-txt b { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .dice-btn.rolling .dice-ico { animation: none; } }
/* Suggested: a small tag on one picture in each row after Colors (js/match.js) */
.sug-tag { position: absolute; z-index: 3; top: 7px; left: 7px; padding: 4px 9px; border-radius: var(--rbtn); background: var(--cta); color: var(--cta-ink); font-size: 12px; font-weight: 700;
  line-height: 1.1; letter-spacing: .02em; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); pointer-events: none; }
/* header logo (30 Oct 2026, Rachel): the full balloon with the name stacked beside it */
header .brand::before { width: 65px; height: 100px; }
header .brand { line-height: 1.04; font-size: 24px; }
@media (max-width: 1099px) { header .brand::before { width: 55px; height: 84px; margin-right: 12px; } header .brand { font-size: 21px; } }
@media (max-width: 700px) { header .brand::before { width: 43px; height: 66px; margin-right: 10px; } header .brand { font-size: 18px; } }

/* social icons (Rachel 31 Oct 2026): moved from the top bar to the footer; vintage sticker icons linked to her profiles */
.foot .social { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 16px 0 18px; }
.foot .social a { display: block; width: 48px; height: 48px; transition: transform .15s; }
.foot .social a:hover, .foot .social a:focus-visible { transform: translateY(-2px) rotate(-4deg); }
.foot .social img { display: block; width: 100%; height: 100%; }
@media (max-width: 360px) {
  header .brand::before { width: 36px; height: 56px; margin-right: 7px; }
  header .brand { font-size: 16px; }
}
/* footer logo + name match the top bar (Rachel 31 Oct 2026) */
.foot .brand { line-height: 1.04; font-size: 24px; text-align: left; margin-bottom: 8px; }
@media (max-width: 700px) { .foot .brand::before { width: 55px; height: 84px; margin-right: 12px; } .foot .brand { font-size: 21px; } }
/* footer tagline sits under the name (Rachel 31 Oct 2026) */
.foot .brand .tagline { display: block; margin-top: 8px; font: 400 17px/1.3 var(--sans); letter-spacing: 0; color: var(--ink); }
/* the tagline under the name in the top bar too (Rachel 31 Oct 2026) */
header .brand .tagline { display: block; margin-top: 6px; font: 400 15px/1.2 var(--sans); letter-spacing: 0; color: var(--ink); }
@media (max-width: 700px) { header .brand .tagline { font-size: 13px; margin-top: 4px; } }
@media (max-width: 400px) { header .brand .tagline { display: none; } }