/* ── Customize (customize.html, js/custom.js): the craft table. Stand-ins until his ChatGPT pieces arrive:
   the table is the cream linen in a gingham frame, the step patches are fabric circles, the photos hang as
   polaroids on a thread. The magazine pages are Sama's real spreads, in EB Garamond like her covers. ── */
@font-face { font-family: "EB Garamond"; font-weight: 400; src: url("../../fonts/new/eb-garamond-400.woff2?h=53bd25cc") format("woff2"); font-display: swap; }
@font-face { font-family: "EB Garamond"; font-weight: 400; font-style: italic; src: url("../../fonts/new/eb-garamond-400i.woff2?h=60c9318a") format("woff2"); font-display: swap; }
@font-face { font-family: "EB Garamond"; font-weight: 700; src: url("../../fonts/new/eb-garamond-700.woff2?h=1265bed5") format("woff2"); font-display: swap; }
@font-face { font-family: "Dreamer"; src: url("../../fonts/new/dreamer-1871.woff2?h=3be5a942") format("woff2"); font-display: swap; }

.k-cz { overflow-x: clip; background: url("../img/c/story-ground.webp?h=f53ea0f6") left top / 14.354% auto repeat, #e9b7a6; }
.k-cz > section { --u: calc(100cqw / 1672); position: relative; }
.cz-head { padding: calc(var(--u) * 170) 7.5% calc(var(--u) * 40); text-align: center; }
.cz-head h1 { margin: 0; font: 400 calc(var(--u) * 66)/1.05 "Alfa Slab One", "Zilla Slab", Georgia, serif; letter-spacing: .05em; text-transform: uppercase;
  color: #4a5f6b; text-shadow: 2px 2px 0 rgba(255, 246, 236, .7); }
.cz-head > p { max-width: 36em; margin: calc(var(--u) * 16) auto 0; font: 500 calc(var(--u) * 22)/1.5 "Zilla Slab", Georgia, serif; color: #5d4a40; }

/* the five patches, sewn on a ribbon */
.cz-patches { display: flex; justify-content: center; gap: calc(var(--u) * 26); margin: calc(var(--u) * 40) 0 0; padding: 0; list-style: none; position: relative; }
.cz-patches::before { content: ""; position: absolute; left: 18%; right: 18%; top: calc(var(--u) * 46); border-top: 2px dashed rgba(122, 74, 58, .45); }
.cz-patch { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 10); padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 calc(var(--u) * 15)/1 "Zilla Slab", Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #7a4a3a; }
.cz-patch i { display: grid; place-items: center; width: calc(var(--u) * 92); aspect-ratio: 1; border-radius: 50%; font: 400 calc(var(--u) * 34)/1 "Alfa Slab One", serif; font-style: normal; color: #3f5563;
  background: url("../img/c/fab-1-soft-320.webp?h=0fe66348") 0 0 / calc(var(--u) * 120) auto, #dfe7ec; box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(90, 55, 35, .22), inset 0 0 0 calc(var(--u) * 7) rgba(247, 241, 230, .55);
  outline: 2px dashed rgba(247, 241, 230, .85); outline-offset: calc(var(--u) * -14); transition: transform .5s var(--ease-back); }
.cz-patch:nth-child(1) i, li:nth-child(1) > .cz-patch i { background-image: url("../img/c/fab-1-soft-320.webp?h=0fe66348"); }
li:nth-child(2) > .cz-patch i { background-image: url("../img/c/fab-2-soft.webp?h=3070c6c1"); background-color: #f4ecd2; }
li:nth-child(3) > .cz-patch i { background-image: url("../img/c/fab-5-soft.webp?h=d37c3cec"); background-color: #e7e0ee; }
li:nth-child(4) > .cz-patch i { background-image: url("../img/c/fab-3-soft.webp?h=c59e13f7"); background-color: #e6e4d2; }
li:nth-child(5) > .cz-patch i { background-image: url("../img/c/fab-4-soft.webp?h=45d13462"); background-color: #f1ddd2; }
.cz-patch:hover i { transform: rotate(-6deg) scale(1.05); }
.cz-patch.is-on i { transform: scale(1.16); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 16) rgba(90, 55, 35, .3), inset 0 0 0 calc(var(--u) * 7) rgba(247, 241, 230, .55), 0 0 0 calc(var(--u) * 5) #7a4a3a; }
.cz-patch.is-done:not(.is-on) i::after { content: "✓"; position: absolute; right: calc(var(--u) * -4); top: calc(var(--u) * -4); display: grid; place-items: center; width: calc(var(--u) * 30); aspect-ratio: 1;
  border-radius: 50%; background: #7c8a5c; color: #f7f1e6; font: 700 calc(var(--u) * 16)/1 "Zilla Slab", sans-serif; }
.cz-patch.is-on span { color: #3f5563; }

/* the table: linen in a gingham frame, the stage (the magazine) and the card side by side */
.cz-table { isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 470); gap: calc(var(--u) * 40); align-items: start; margin: calc(var(--u) * 50) 7.5% 0;
  padding: calc(var(--u) * 82); background: url("../img/c/fab-1-soft-320.webp?h=0fe66348") 0 0 / calc(var(--u) * 150) auto, #dfe7ec; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(110, 60, 40, .22); }
/* the linen top laid inside the gingham frame, and its running stitch */
.cz-table::before { content: ""; position: absolute; inset: calc(var(--u) * 26); z-index: -1; background: url("../img/c/story-linen.webp?h=0207da0f") center / calc(var(--u) * 600) auto, #f4ead9;
  box-shadow: 0 0 calc(var(--u) * 10) rgba(60, 70, 80, .18); }
.cz-table::after { content: ""; position: absolute; inset: calc(var(--u) * 40); pointer-events: none; z-index: -1; border: 2px dashed rgba(162, 96, 63, .45); }
.cz-table > * { min-width: 0; }
.cz-stage { position: relative; z-index: 1; min-height: calc(var(--u) * 760); display: grid; place-items: center; }
.cz-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 22); padding: calc(var(--u) * 40) calc(var(--u) * 38);
  background: url("../img/c/story-linen.webp?h=0207da0f") center / calc(var(--u) * 420) auto, #fbf5ea; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(110, 60, 40, .18); }
.cz-card::before { content: ""; position: absolute; inset: calc(var(--u) * 10); pointer-events: none; border: 2px dashed rgba(162, 96, 63, .5); }
.cz-step[hidden] { display: none; }
.cz-step { display: flex; flex-direction: column; gap: calc(var(--u) * 18); margin: 0; padding: 0; border: 0; min-width: 0; }
.cz-step legend { display: flex; align-items: center; gap: .6em; margin-bottom: calc(var(--u) * 8); padding: 0;
  font: 400 calc(var(--u) * 30)/1.1 "Alfa Slab One", "Zilla Slab", Georgia, serif; letter-spacing: .04em; text-transform: uppercase; color: #7a4a3a; }
.cz-step legend b { display: grid; place-items: center; width: 1.5em; aspect-ratio: 1; border-radius: 50%; background: #4a5f6b; color: #f7f1e6; font-size: .6em; }
.cz-field { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.cz-field > span { font: 700 calc(var(--u) * 14)/1 "Zilla Slab", Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #8a5a44; }
.cz-field input, .cz-field textarea, .or-ten input { width: 100%; box-sizing: border-box; padding: .7em .85em; border: 0; border-bottom: 2px dashed rgba(122, 74, 58, .4); border-radius: 6px 6px 0 0;
  background: rgba(255, 252, 246, .85); font: 500 calc(var(--u) * 20)/1.4 "Zilla Slab", Georgia, serif; color: #3f3a34; resize: vertical; }
.cz-field input:focus, .cz-field textarea:focus, .or-ten input:focus { outline: 2px solid #8ea6b8; outline-offset: 2px; border-bottom-color: transparent; }
.cz-hint { margin: 0; font: 500 calc(var(--u) * 16)/1.5 "Zilla Slab", Georgia, serif; color: #7b6d62; }
.cz-warn { margin: 0; padding: .6em .8em; border-radius: 8px; background: #f6e1d6; font: 600 calc(var(--u) * 16)/1.4 "Zilla Slab", serif; color: #8a4a34; }
.cz-looks { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 12); }
.cz-looks label { display: flex; align-items: center; gap: .6em; padding: .5em .6em; border-radius: 10px; background: rgba(255, 252, 246, .85); cursor: pointer;
  font: 600 calc(var(--u) * 15)/1.2 "Zilla Slab", serif; color: #5d5a53; box-shadow: inset 0 0 0 2px transparent; }
.cz-looks input { position: absolute; opacity: 0; }
.cz-looks label:has(input:checked) { box-shadow: inset 0 0 0 2px #7a4a3a; }
.cz-look { display: grid; place-items: center; width: 2.4em; aspect-ratio: 3 / 4; font: 700 calc(var(--u) * 20)/1 "EB Garamond", serif; font-style: normal; border-radius: 3px; }
.cz-look--red { background: #2b2623; color: #d0202a; } .cz-look--classic { background: #8d8d8d; color: #fff; }
.cz-upload { position: relative; display: flex; align-items: center; justify-content: center; gap: .6em; padding: 1em; border-radius: 14px; cursor: pointer; text-align: center;
  background: url("../img/c/fab-2-soft.webp?h=3070c6c1") 0 0 / calc(var(--u) * 140) auto, #f4ecd2; box-shadow: inset 0 0 0 2px rgba(122, 74, 58, .25);
  font: 700 calc(var(--u) * 16)/1 "Zilla Slab", serif; letter-spacing: .12em; text-transform: uppercase; color: #5b4636; transition: transform .4s var(--ease-back); }
.cz-upload::before { content: "+"; font: 400 1.6em/0 "Alfa Slab One", serif; }
.cz-upload:hover { transform: rotate(-1.5deg) scale(1.02); }
.cz-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cz-ghost { padding: .8em 1.4em; border: 2px dashed rgba(122, 74, 58, .45); border-radius: 12px; background: none; cursor: pointer;
  font: 700 calc(var(--u) * 15)/1 "Zilla Slab", serif; letter-spacing: .12em; text-transform: uppercase; color: #7a4a3a; }
.cz-ghost:hover { background: rgba(255, 252, 246, .7); }
.cz-count { margin: 0; font: 600 calc(var(--u) * 18)/1 "Zilla Slab", serif; color: #7b6d62; }
.cz-count b { font: 400 calc(var(--u) * 52)/1 "Alfa Slab One", serif; color: #4a5f6b; }
.cz-count.is-full b { color: #6f7f4c; }
.cz-sum { margin: 0; font: 500 calc(var(--u) * 18)/1.6 "Zilla Slab", serif; color: #4a4038; }
.cz-sum s { opacity: .55; }
.cz-order { align-self: flex-start; }
.cz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--u) * 8); }

/* the product choices */
.cz-products { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 14); }
.cz-prod { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35em; padding: calc(var(--u) * 14) calc(var(--u) * 10); border-radius: 12px; cursor: pointer; text-align: center;
  background: rgba(255, 252, 246, .85); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .3s, transform .4s var(--ease-back); }
.cz-prod input { position: absolute; opacity: 0; }
.cz-prod:has(input:checked) { box-shadow: inset 0 0 0 2px #7a4a3a; transform: translateY(-3px); }
.cz-prod:has(input:focus-visible) { outline: 2px solid #8ea6b8; }
.cz-prod img { width: 72%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(70, 40, 25, .22)); }
.cz-prod b { font: 700 calc(var(--u) * 14)/1.2 "Zilla Slab", serif; letter-spacing: .06em; text-transform: uppercase; color: #5b4636; }
.cz-prod span { font: 600 calc(var(--u) * 14)/1 "Zilla Slab", serif; color: #7b6d62; } .cz-prod s { opacity: .55; }

/* the stage contents */
.cz-prodpic { margin: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 26); }
.cz-prodpic img { width: calc(var(--u) * 520); max-height: calc(var(--u) * 600); object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 24) calc(var(--u) * 26) rgba(70, 40, 25, .3)); }
.cz-prodpic figcaption { display: flex; flex-direction: column; align-items: center; gap: .4em; font: 400 calc(var(--u) * 30)/1.1 "Alfa Slab One", serif; letter-spacing: .05em; text-transform: uppercase; color: #7a4a3a; }
.cz-prodpic figcaption span { font: 600 calc(var(--u) * 20)/1 "Zilla Slab", serif; letter-spacing: .08em; color: #5d5a53; }
.cz-one .cz-page { width: calc(var(--u) * 470); }
.cz-two { display: flex; gap: calc(var(--u) * 30); } .cz-two .cz-page { width: calc(var(--u) * 400); }
.cz-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 26) calc(var(--u) * 22); width: 100%; }
.cz-bp { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.cz-bp > span { font: 700 calc(var(--u) * 12)/1 "Zilla Slab", serif; letter-spacing: .14em; text-transform: uppercase; color: #8a5a44; }
.cz-bookwrap { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 18); width: 100%; }
.cz-book { width: 100%; }
.cz-turn { margin: 0; font: italic 500 calc(var(--u) * 16)/1 "Zilla Slab", serif; color: #8a7a6c; }

/* ── a page of the magazine (container: every size in cqw of the page) ── */
.cz-page { container-type: inline-size; position: relative; aspect-ratio: 210 / 297; overflow: hidden; background: #fbf8f2; color: #1d1b19;
  box-shadow: 0 4px 14px rgba(60, 40, 25, .22); font-family: "EB Garamond", Georgia, serif; }
.cz-leaf .cz-page { width: 100%; height: 100%; box-shadow: none; }
.cz-slot { position: absolute; overflow: hidden; background: #e9e1d4; cursor: pointer; transition: box-shadow .2s, transform .3s var(--ease-back); }
.cz-slot img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cz-slot.is-empty { background: repeating-linear-gradient(45deg, #efe7da 0 6px, #e8dfd0 6px 12px); box-shadow: inset 0 0 0 1.5px rgba(122, 74, 58, .35); }
.cz-slot.is-empty i { position: absolute; inset: 0; display: grid; place-items: center; font: 700 7cqw/1 "Zilla Slab", serif; font-style: normal; color: rgba(122, 74, 58, .45); }
.cz-slot.is-pick { box-shadow: 0 0 0 3px #4a5f6b, 0 0 0 6px rgba(247, 241, 230, .9); z-index: 5; }
.cz-slot:hover { box-shadow: 0 0 0 2px #8ea6b8; }
.cz-full { inset: 0; }
.cz-cov { position: absolute; inset: 0; pointer-events: none; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.cz-mast { position: absolute; left: 0; right: 0; top: 4cqw; text-align: center; font: 700 17cqw/1 "EB Garamond", serif; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.cz-cov--red .cz-mast { color: #d4202b; text-shadow: none; }
.cz-page--cover:has(.cz-cov--classic) .cz-slot img { filter: grayscale(1) contrast(1.05); }
.cz-tag { position: absolute; right: 5cqw; top: 23cqw; font: 400 2.8cqw/1 "EB Garamond", serif; text-transform: uppercase; letter-spacing: .06em; }
.cz-line { position: absolute; left: 6cqw; top: 25cqw; width: 34cqw; font: 400 4.2cqw/1.1 "EB Garamond", serif; text-transform: uppercase; }
.cz-cov--classic .cz-line { left: auto; right: 5cqw; top: 29cqw; text-align: right; }
.cz-inside { position: absolute; left: 6cqw; bottom: 7cqw; font: 400 7cqw/1.05 "EB Garamond", serif; }
.cz-ded { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; padding: 12cqw; text-align: center; }
.cz-ded small { font: italic 400 4.4cqw/1 "EB Garamond", serif; color: #8a7a6c; }
.cz-ded b { font: 700 13cqw/1 "EB Garamond", serif; text-transform: uppercase; color: #a0222b; }
.cz-ded p { margin: 0; font: 400 5cqw/1.45 "EB Garamond", serif; white-space: pre-line; }
.cz-ded em { font: 400 9cqw/1 "Dreamer", "EB Garamond", serif; font-style: normal; color: #4a5f6b; }
.cz-hello { position: absolute; left: 0; right: 0; top: 8cqw; text-align: center; }
.cz-hello b { display: block; font: italic 400 13cqw/.95 "EB Garamond", serif; color: #a0222b; }
.cz-hello span { display: block; margin-top: 2cqw; font: 700 5cqw/1 "EB Garamond", serif; letter-spacing: .3em; text-transform: uppercase; }
.cz-h1 { left: 8cqw; top: 48cqw; width: 50cqw; height: 66cqw; transform: rotate(-3deg); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); border: 2cqw solid #fff; }
.cz-h2 { right: 7cqw; top: 82cqw; width: 42cqw; height: 52cqw; transform: rotate(4deg); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); border: 2cqw solid #fff; }
.cz-g4 { position: absolute; left: 7cqw; right: 7cqw; top: 7cqw; height: 110cqw; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 3cqw; }
.cz-g4 .cz-slot, .cz-duo .cz-slot, .cz-film .cz-slot { position: relative; inset: auto; }
.cz-cap { position: absolute; left: 0; right: 0; bottom: 9cqw; margin: 0; text-align: center; font: italic 400 6cqw/1 "EB Garamond", serif; color: #4a4038; }
.cz-big { left: 7cqw; right: 7cqw; top: 7cqw; height: 112cqw; }
.cz-cap--big { font: 700 6cqw/1 "EB Garamond", serif; font-style: normal; letter-spacing: .2em; text-transform: uppercase; }
.cz-news { position: absolute; left: 6cqw; right: 6cqw; top: 6cqw; display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 2cqw; border-bottom: .6cqw solid #1d1b19; }
.cz-news b { white-space: nowrap; font: 700 7.4cqw/1 "EB Garamond", serif; text-transform: uppercase; letter-spacing: .02em; }
.cz-news span { font: italic 400 3.6cqw/1 "EB Garamond", serif; }
.cz-n1 { left: 6cqw; right: 6cqw; top: 22cqw; height: 52cqw; }
.cz-n2 { left: 6cqw; top: 78cqw; width: 42cqw; height: 42cqw; }
.cz-n3 { left: 52cqw; top: 78cqw; width: 42cqw; height: 42cqw; }
.cz-ntext { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; margin: 0; font: 400 4cqw/1.35 "EB Garamond", serif; columns: 2; column-gap: 4cqw; }
.cz-page--strip { background: #f3ede2; }
.cz-film { box-sizing: border-box; position: absolute; left: 6cqw; top: 0; bottom: 0; width: 40cqw; display: flex; flex-direction: column; justify-content: center; gap: 3cqw; padding: 0 4cqw; background: #1d1b19;
  background-image: repeating-linear-gradient(180deg, #f3ede2 0 2cqw, transparent 2cqw 5cqw), repeating-linear-gradient(180deg, #f3ede2 0 2cqw, transparent 2cqw 5cqw);
  background-size: 2cqw 100%, 2cqw 100%; background-position: 1cqw 0, calc(100% - 1cqw) 0; background-repeat: repeat-y; }
.cz-film .cz-slot { height: 38cqw; }
.cz-love { position: absolute; left: 52cqw; right: 6cqw; top: 30cqw; }
.cz-love b { display: block; font: italic 400 7.2cqw/1.05 "EB Garamond", serif; color: #a0222b; }
.cz-love p { margin: 4cqw 0 0; font: 400 4.4cqw/1.45 "EB Garamond", serif; }
.cz-page--polar { background: #efe6d8; }
.cz-pol { width: 52cqw; height: 52cqw; border: 3cqw solid #fff; border-bottom-width: 11cqw; box-shadow: 0 3px 10px rgba(0, 0, 0, .22); }
.cz-p1 { left: 6cqw; top: 8cqw; transform: rotate(-6deg); } .cz-p2 { right: 5cqw; top: 46cqw; transform: rotate(5deg); } .cz-p3 { left: 12cqw; top: 86cqw; transform: rotate(-2deg); }
.cz-duo { position: absolute; left: 7cqw; right: 7cqw; top: 20cqw; height: 80cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.cz-bk { left: 18cqw; right: 18cqw; top: 18cqw; height: 80cqw; border: 2cqw solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.cz-backline { position: absolute; left: 10cqw; right: 10cqw; bottom: 22cqw; margin: 0; text-align: center; font: italic 400 6.4cqw/1.25 "EB Garamond", serif; }

/* the photos, hung on a thread under the table */
.cz-tray { grid-column: 1 / -1; position: relative; z-index: 1; padding: calc(var(--u) * 36) 0 calc(var(--u) * 8); }
.cz-tray::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--u) * 30); border-top: 2px solid rgba(122, 74, 58, .5); }
.cz-tray ul { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 16); margin: 0; padding: 0; list-style: none; }
.cz-tray li:nth-child(odd) { transform: rotate(-2.5deg); } .cz-tray li:nth-child(even) { transform: rotate(2deg); }
.cz-pol-btn { position: relative; display: block; width: calc(var(--u) * 104); padding: calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 22); border: 0; background: #fff; cursor: grab;
  box-shadow: 0 3px 8px rgba(60, 40, 25, .22); transition: transform .3s var(--ease-back), opacity .3s; }
.cz-pol-btn::before { content: ""; position: absolute; left: 50%; top: calc(var(--u) * -12); width: calc(var(--u) * 12); height: calc(var(--u) * 26); translate: -50% 0; border-radius: 3px; background: #b88a5c; }
.cz-pol-btn img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cz-pol-btn.is-used { opacity: .45; }
.cz-pol-btn.is-pick { transform: translateY(-8px) scale(1.06); box-shadow: 0 0 0 3px #4a5f6b, 0 8px 14px rgba(60, 40, 25, .3); opacity: 1; }
.cz-low { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #c0573a; color: #fff; font: 700 13px/1 sans-serif; }
.cz-tray-empty { font: italic 500 calc(var(--u) * 17)/1 "Zilla Slab", serif; color: #8a7a6c; padding: calc(var(--u) * 10) 0; }
.k-cz .k-sp-tail { margin-top: calc(var(--u) * 130); }

@media (max-width: 989px) {
  .k-cz { background-size: 62vw auto; }
  .k-cz > section { --u: calc(100cqw / 760); }
  .cz-head { padding: 140px 16px 10px; }
  .cz-patch span { display: none; }
  .cz-patches { gap: 14px; }
  .cz-table { grid-template-columns: 1fr; margin: 30px 16px 0; padding: 22px 14px; gap: 22px; }
  .cz-stage { min-height: 0; }
  .cz-one .cz-page { width: 78vw; } .cz-two { flex-direction: column; } .cz-two .cz-page { width: 76vw; }
  .cz-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-prodpic img { width: 70vw; }
  .cz-card { position: relative; top: auto; padding: 26px 20px; }
  .cz-step legend { font-size: 22px; } .cz-field > span, .cz-hint, .cz-ghost, .cz-upload { font-size: 13px; } .cz-field input, .cz-field textarea, .or-ten input { font-size: 16px; }
  .cz-tray ul { flex-wrap: nowrap; overflow-x: auto; padding: 14px 4px 10px; scrollbar-width: none; }
  .cz-pol-btn { width: 76px; }
  .cz-prod b, .cz-prod span, .cz-looks label { font-size: 12px; } .cz-count b { font-size: 34px; } .cz-count { font-size: 14px; } .cz-sum { font-size: 15px; }
}

/* his felt props (grok/results/26-props-chatgpt.png, tools/k_props.py), lying on the table's edges and spilling
   over its gingham frame; the peg pinches the step card */
.cz-props { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cz-prop { position: absolute; height: auto; pointer-events: none; filter: drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 8) rgba(70, 45, 30, .25)); }
.cz-prop--scissors { width: calc(var(--u) * 250); left: calc(var(--u) * -90); top: calc(var(--u) * -60); rotate: -16deg; }
.cz-prop--spool    { width: calc(var(--u) * 150); right: calc(var(--u) * -70); top: calc(var(--u) * -70); rotate: 14deg; }
.cz-prop--pins     { width: calc(var(--u) * 120); right: calc(var(--u) * -66); top: 38%; rotate: -8deg; }
.cz-prop--washi    { width: calc(var(--u) * 160); left: calc(var(--u) * -86); top: 44%; rotate: 22deg; }
.cz-prop--leaves   { width: calc(var(--u) * 220); left: calc(var(--u) * -80); bottom: calc(var(--u) * -50); rotate: -24deg; }
.cz-prop--flowers  { width: calc(var(--u) * 170); right: calc(var(--u) * -66); bottom: calc(var(--u) * -56); rotate: 8deg; }
.cz-prop--tape     { width: calc(var(--u) * 330); left: 30%; bottom: calc(var(--u) * -48); rotate: -4deg; }
.cz-prop--peg      { z-index: 3; width: calc(var(--u) * 150); right: calc(var(--u) * 40); top: calc(var(--u) * -34); rotate: 84deg; }
@media (max-width: 989px) {
  .cz-prop--pins, .cz-prop--washi, .cz-prop--tape { display: none; }
  .cz-prop--scissors { width: 96px; left: -24px; top: -30px; } .cz-prop--spool { width: 56px; right: -16px; top: -30px; }
  .cz-prop--leaves { width: 84px; left: -22px; bottom: -22px; } .cz-prop--flowers { width: 70px; right: -16px; bottom: -22px; }
  .cz-prop--peg { width: 64px; right: 22px; top: -16px; }
}

/* his embroidered patches (grok/results/27-patches-chatgpt.png, tools/k_patches.py) in place of the numbered circles */
.cz-patch i { font-size: 0; background: none !important; box-shadow: none; outline: 0; filter: drop-shadow(0 calc(var(--u) * 5) calc(var(--u) * 8) rgba(90, 55, 35, .28)); }
.cz-patch i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pic) center / 100% no-repeat; }
li:nth-child(1) > .cz-patch { --pic: url("../img/c/patch-1.webp?h=972718b8"); } li:nth-child(2) > .cz-patch { --pic: url("../img/c/patch-2.webp?h=809ec0cc"); }
li:nth-child(3) > .cz-patch { --pic: url("../img/c/patch-3.webp?h=dc7c68bd"); } li:nth-child(4) > .cz-patch { --pic: url("../img/c/patch-4.webp?h=243d5ffa"); }
li:nth-child(5) > .cz-patch { --pic: url("../img/c/patch-5.webp?h=ae263c4c"); }
.cz-patch i { position: relative; width: calc(var(--u) * 104); }
.cz-patch:not(.is-on):not(:hover) i { filter: drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 6) rgba(90, 55, 35, .2)) saturate(.8); }
.cz-patch.is-on i { box-shadow: 0 0 0 calc(var(--u) * 5) #f7f1e6, 0 0 0 calc(var(--u) * 8) #7a4a3a; }
.cz-patch.is-done:not(.is-on) i::after { z-index: 1; }
.cz-patch.is-on span { translate: 0 calc(var(--u) * 12); }
.cz-prop--peg { right: calc(var(--u) * -34); top: calc(var(--u) * -58); rotate: 64deg; }
@media (max-width: 989px) {
  .cz-card { order: -2; } .cz-tray { order: -1; padding-top: 18px; }   /* on a phone: the controls, the photos, then the pages they fill */
  .cz-patch.is-on span { translate: none; }
  .cz-prop--peg { right: -14px; top: -26px; }
}

/* mistake-proofing (his note 2026-11-06): an x on every photo in the tray, a note when a step is not done */
.cz-tray li { position: relative; }
.cz-x { position: absolute; left: -7px; top: -7px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: #4a5f6b; color: #fff; font: 700 15px/1 sans-serif; cursor: pointer; }
.cz-need { margin: 0; }
@media (max-width: 989px) { .cz-x { width: 26px; height: 26px; left: -8px; top: -8px; font-size: 16px; } }
/* the photos go onto the pages by themselves now, so a placed photo is not dimmed (it read as broken) */
.cz-pol-btn.is-used { opacity: 1; }
@media (max-width: 989px) { .cz-tray ul { padding-left: 12px; padding-top: 16px; } }

/* the box's own photos, in step 3 (his message, 2026-11-07) */
.cz-boxph { display: flex; flex-direction: column; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 14); padding-top: calc(var(--u) * 16); border-top: 2px dashed rgba(162, 96, 63, .4); }
.cz-boxph[hidden] { display: none; }
.cz-boxlist { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--u) * 10); margin: 0; padding: 0; list-style: none; }
.cz-boxlist li { position: relative; padding: 6% 6% 18%; background: #fffdf8; box-shadow: 0 3px 8px rgba(70, 40, 25, .2); }
.cz-boxlist li:nth-child(odd) { rotate: -2deg; } .cz-boxlist li:nth-child(even) { rotate: 2deg; }
.cz-boxlist img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cz-boxlist .cz-x { position: absolute; top: -8px; right: -8px; }
@media (max-width: 989px) { .cz-boxlist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
.cz-boxph .or-ten-h { margin: 0; font: 400 calc(var(--u) * 22)/1.1 "Alfa Slab One", "Zilla Slab", serif; letter-spacing: .05em; text-transform: uppercase; color: #7a4a3a; }
@media (max-width: 989px) { .cz-boxph .or-ten-h { font-size: 18px; } }

/* Sama's own design (his call, 2026-11-07): her page on top, the photos under it in her boxes */
.cz-page--sama { display: grid; place-items: center; }
.sm-art { position: relative; container-type: inline-size; overflow: hidden; }
.sm-el { position: absolute; }
.sm-in { position: absolute; overflow: hidden; }
.sm-in .cz-slot.sm-slot { inset: 0; width: 100%; height: 100%; }
.sm-tpl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.sm-name { position: absolute; z-index: 3; left: 5.9%; right: 5.9%; top: 10%; text-align: center; pointer-events: none;
  font: 700 9.6cqw/1.2 "EB Garamond", Georgia, serif; text-transform: uppercase; color: #be1818; white-space: nowrap; overflow: hidden; }
.cz-tmpls label { flex-direction: column; text-align: center; }
.cz-tmpls img { width: 64px; height: 84px; object-fit: contain; background: #f3ece6; border-radius: 6px; }
.cz-tmpls em { font-style: normal; font-size: .82em; opacity: .7; }

/* Sama's sentences (his call, 2026-11-08): her own pixels until the customer types, then their words in her box */
.sm-w { position: absolute; z-index: 3; pointer-events: none; }
.sm-t { position: absolute; z-index: 3; pointer-events: none; overflow-wrap: break-word; transform-origin: 50% 50%; }
.sm-t.is-line { overflow: hidden; overflow-wrap: normal; }
.cz-inks i { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 600 15px/1 "Playfair Display", Georgia, serif; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.cz-ink--red { color: #be1818; background: #f4eee8; } .cz-ink--white { color: #fff; background: #6b6460; } .cz-ink--black { color: #111; background: #f4eee8; }
.cz-wpage { border-top: 1px dashed rgba(0,0,0,.18); padding-top: 8px; margin-top: 8px; }
.cz-wpage-h { display: block; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; opacity: .65; margin-bottom: 4px; }
.cz-word { margin: 4px 0; }

/* page 5, nine equal squares (his call, 2026-11-08): photos on her background, her 1.5 px grey edge, her stickers above */
.sm-over .sm-el { z-index: 3; }
.sm-over .sm-in::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .14cqw #7d7c7d; pointer-events: none; }
.sm-top { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }

/* her photo in an empty place of her design (his call, 2026-11-08): shown as it is, no stripes, no number */
.cz-slot.is-sample { background: none; box-shadow: none; }

/* step 4, the words written for them (his call, 2026-11-11): taps, one button, the long list folded away */
.cz-quiz { display: grid; gap: calc(var(--u) * 14); padding: calc(var(--u) * 14); border-radius: 14px; background: rgba(255, 252, 246, .6); box-shadow: inset 0 0 0 1px rgba(122, 74, 58, .18); }
.cz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cz-chips label { position: relative; cursor: pointer; }
.cz-chips input { position: absolute; opacity: 0; }
.cz-chips span { display: inline-block; padding: .38em .8em; border-radius: 99px; background: rgba(255, 252, 246, .95); box-shadow: inset 0 0 0 1.5px rgba(122, 74, 58, .3);
  font: 600 calc(var(--u) * 15)/1.2 "Zilla Slab", serif; color: #5d5a53; transition: background .15s, color .15s; }
.cz-chips input:checked + span { background: #7a4a3a; color: #fbf3ea; box-shadow: none; }
.cz-chips input:focus-visible + span { outline: 2px solid #8ea6b8; outline-offset: 2px; }
.cz-write { justify-self: start; }
.cz-wrote { color: #4f6b3a; font-weight: 600; }
.cz-wedit { margin-top: calc(var(--u) * 14); }
.cz-wedit summary { cursor: pointer; font: 700 calc(var(--u) * 16)/1.4 "Zilla Slab", serif; color: #7a4a3a; padding: .4em 0; }
.cz-word.has-shuf { position: relative; }
.cz-word.has-shuf input, .cz-word.has-shuf textarea { padding-right: 2.6em; }
.cz-shuf { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 2em; height: 2em; border: 0; border-radius: 50%; cursor: pointer;
  background: #efe3d4; color: #7a4a3a; font: 700 calc(var(--u) * 18)/1 sans-serif; }
.cz-shuf:hover { background: #7a4a3a; color: #fbf3ea; }
@media (max-width: 989px) { .cz-chips span { font-size: 13px; } .cz-shuf { font-size: 16px; } }

/* the words, typed on the page itself (his call, 2026-11-11): every page in view beside the list, the word being changed lit */
.cz-wboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-t[contenteditable] { pointer-events: none; cursor: text; outline: 1px dashed transparent; outline-offset: .3cqw; border-radius: .4cqw; transition: outline-color .2s, background-color .2s; }
.sm-t[contenteditable] .sm-tx { pointer-events: auto; }
.sm-t[contenteditable]:hover, .sm-t[contenteditable]:has(.sm-tx:hover) { outline-color: rgba(162, 96, 63, .7); }
.sm-t[contenteditable]:focus, .sm-t.is-lit { outline: 2px solid #c2603f; background: rgba(255, 255, 255, .14); }
@media (min-width: 990px) {
  .cz-stage.is-words { position: sticky; top: 110px; align-self: start; place-items: start; max-height: calc(100vh - 130px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 4px 4px; scrollbar-width: thin; }
}
.sm-mask { position: absolute; inset: 0; z-index: 3; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* step 1 by occasion (2026-11-12): a heading per occasion, its designs under it */
#cz-products { display: block; }
.cz-occ + .cz-occ { margin-top: 22px; }
.cz-occ-h { margin: 0 0 calc(var(--u) * 10); font: 700 calc(var(--u) * 17)/1.2 "Zilla Slab", serif; letter-spacing: .08em; text-transform: uppercase; color: #5b4636; }
.cz-occ-h small { font: 600 .72em/1 "Zilla Slab", serif; letter-spacing: .04em; text-transform: none; color: #7b6d62; margin-left: .4em; }
.cz-occ-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 14); }
/* pages built in code (js/code-designs.js): every part stacks in Canva's order, so none keeps a z-index of its own */
.sm-code > .sm-deco, .sm-code > .sm-el, .sm-code > .sm-t { position: absolute; z-index: auto; }
.sm-code > .sm-deco { pointer-events: none; }
.sm-cutbox { overflow: visible; }
.sm-cutbox .cz-slot.sm-cut, .sm-cutbox .cz-slot.sm-cut img { background: none; box-shadow: none; }
.cz-slot.sm-cut.fit-width-bottom img { position: absolute; left: 0; bottom: 0; top: auto; width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: 50% 100%; }
.cz-slot.sm-cut.is-cutting img { opacity: .55; filter: blur(.3cqw); transition: opacity .3s; }
.cz-slot.sm-cut.is-cutting::after { content: "\2702"; position: absolute; left: 50%; top: 60%; translate: -50% -50%; font-size: 6cqw; color: #fff; animation: smcut 1s ease-in-out infinite alternate; }
@keyframes smcut { to { opacity: .3; } }
.cz-slot.sm-cut.fit-contain-bottom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.cz-count.is-over b, .is-over > b { color: #b3261e; }

/* the page foot (its big name picture) is drawn only when it comes near: not part of the first load (2026-11-12) */
.k-czpage .k-sp > .k-sp-tail:not(.is-near), .k-czpage .k-sp-tail:not(.is-near) .k-sp-cta, .k-czpage .k-sp-tail:not(.is-near) .k-foot { background-image: none !important; }

/* a picked photo can be moved inside its place (2026-11-12): drag it, zoom with + / − */
.cz-slot.is-pan { cursor: grab; touch-action: none; }
.cz-slot.is-pan:active { cursor: grabbing; }
.cz-slot.is-pan img { will-change: transform; }
.cz-zoom { position: absolute; z-index: 6; right: 4px; bottom: 4px; display: flex; gap: 4px; }
.cz-zoom button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(74, 95, 107, .92); color: #fff; font: 700 16px/26px system-ui, sans-serif; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
@media (max-width: 989px) { .cz-zoom button { width: 30px; height: 30px; line-height: 30px; } }

/* the box choice under the magazines (2026-11-12) */
.cz-boxpick { margin-top: calc(var(--u) * 26); padding-top: calc(var(--u) * 18); border-top: 1.5px dashed rgba(122, 74, 58, .3); }
.cz-boxpick .cz-occ-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cz-boxnote { display: block; font: 500 calc(var(--u) * 12)/1.3 "Zilla Slab", Georgia, serif; color: #7b6d62; }
@media (max-width: 989px) { .cz-boxpick .cz-occ-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .cz-boxpick .cz-prod b { font-size: 11px; } }

/* "Change a sentence yourself" as a clear button with a big arrow (his note, 2026-11-13: the icon could not be seen on a phone) */
.cz-wedit { margin: 14px 0 22px; }
.cz-wedit > summary { list-style: none; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 20px 10px 14px; border-radius: 14px;
  background: #fbf3e6; border: 2px dashed rgba(122, 74, 58, .55); font: 700 max(16px, calc(var(--u) * 17))/1.25 "Zilla Slab", Georgia, serif; color: #7a4a3a; box-shadow: 0 2px 6px rgba(90, 55, 35, .12); }
.cz-wedit > summary::-webkit-details-marker { display: none; }
.cz-wedit > summary::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #7a4a3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; transition: transform .25s ease; }
.cz-wedit[open] > summary::before { transform: rotate(90deg); }
.cz-wedit > summary:hover { background: #f6e8d4; }