/* <kin-personaliser> styles (loaded inside its shadow root), in the Kin & Ink
   brand (brand/BRAND.md): white is the wall, ivory is the paper, walnut ink,
   one wax button per screen. Phone first, large type and targets: many
   customers are 45+ and arrive from social ads. Values mirror brand/tokens.css,
   repeated here because the builder may sit on a page that doesn't load it. */

:host {
  --white: #FFFDF9;
  --ivory: #F3E9DC;
  --linen: #E7DAC6;
  --walnut: #4A3223;
  --body: #4A3B33;
  --drift: #76604F;
  --wax: #A94F34;
  --wax-hover: #973F28;
  --rose: #D9A796;
  --rule: #E6DCCD;
  --rule-ivory: #DCCDB8;
  --field: #CDBDA6;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
  display: block;
  color: var(--walnut);
  font: 400 16px/1.5 var(--sans);
}
* { box-sizing: border-box; }
h2 { font: 500 clamp(34px, 4.2vw, 48px)/1.04 var(--serif); letter-spacing: -.01em; margin: 0 0 10px; text-wrap: balance; }
h3 { font: 500 12px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--drift); margin: 0 0 10px; }
p { margin: 0 0 12px; text-wrap: pretty; }
.muted { font: 500 20px/1.5 var(--serif); color: var(--body); }
.wrap { padding: 8px 0 24px; }
.steps { display: flex; gap: 6px; margin: 0 0 28px; }
.steps span { flex: 1; height: 2px; background: var(--rule); }
.steps span.on { background: var(--walnut); }

/* Buttons: the wax button is the one action on each screen */
button, .btn {
  font: 500 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  min-height: 54px; padding: 0 22px; border-radius: 2px; border: 0; cursor: pointer;
  background: var(--wax); color: var(--white); width: 100%; transition: background .2s;
}
button:hover { background: var(--wax-hover); }
button.secondary { background: transparent; color: var(--walnut); box-shadow: inset 0 0 0 1.5px var(--walnut); }
button.secondary:hover { background: var(--ivory); }
button.link { background: none; color: var(--wax); min-height: 44px; width: auto; padding: 0; letter-spacing: 0; text-transform: none; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
button.link:hover { color: var(--walnut); }
button:disabled, button:disabled:hover { background: var(--linen); color: var(--drift); cursor: not-allowed; }
button.secondary:disabled { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule-ivory); }
details summary { cursor: pointer; list-style: none; font-size: 15px; color: var(--walnut); }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+"; display: inline-block; width: 1em; color: var(--wax); font-weight: 500; }
details[open] summary::before { content: "–"; }
button:focus-visible, input:focus-visible, textarea:focus-visible, .chip:focus-within span, .drop:focus-within { outline: 2px solid var(--wax); outline-offset: 2px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1 1 140px; }
.stack > * + * { margin-top: 16px; }

/* Size and frame: the brand's size cards */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; flex: 1 1 auto; }
.chip input { position: absolute; opacity: 0; inset: 0; }
.chip span { display: block; padding: 14px 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule-ivory); font: 500 15px/1.2 var(--sans); text-align: center; cursor: pointer; transition: box-shadow .2s; }
.chip span:hover { box-shadow: inset 0 0 0 1px var(--drift); }
.chip input:checked + span { box-shadow: inset 0 0 0 2px var(--walnut); }
.chip small { display: block; font-weight: 400; color: var(--drift); font-size: 13px; }
.chip .sw { display: inline-block; width: 12px; height: 12px; margin-right: 7px; border-radius: 50%; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.sw[data-frame="oak"] { background: linear-gradient(135deg, #EAD9BB, #CFB48C); }
.sw[data-frame="black"] { background: linear-gradient(135deg, #3D3D3D, #161616); }
.sw[data-frame="white"] { background: linear-gradient(135deg, #F7F7F5, #E0DFDC); }
.sw[data-frame="walnut"] { background: linear-gradient(135deg, #7A5B48, #4E321F); }

/* How many prints: the set prices, front and centre */
.chips.frames { display: grid; grid-template-columns: repeat(2, 1fr); }   /* four frames sit two by two */
.sets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sets + .small { margin-top: 12px; }
.set { position: relative; }
.set input { position: absolute; opacity: 0; inset: 0; }
.set span { display: grid; gap: 3px; justify-items: center; padding: 12px 6px 10px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule-ivory); cursor: pointer; text-align: center; transition: box-shadow .2s; }
.set span:hover { box-shadow: inset 0 0 0 1px var(--drift); }
.set input:checked + span { box-shadow: inset 0 0 0 2px var(--walnut); }
.set b { font: 500 14px/1.2 var(--sans); }
.set em { font: 500 22px/1 var(--serif); font-style: normal; color: var(--walnut); }
.set small { font: 500 12px/1.2 var(--sans); color: var(--wax); letter-spacing: .02em; }
.price small { display: block; margin-top: 4px; font: 400 14px/1.3 var(--sans); color: var(--drift); }

/* Form fields */
label.field { display: block; font: 500 13px/1.4 var(--sans); }
label.field small { font-weight: 400; font-size: 12px; color: var(--drift); margin-left: 4px; }
input[type=text], input[type=email], textarea {
  width: 100%; margin-top: 6px; font: 400 16px/1.3 var(--sans); color: var(--walnut);
  height: 50px; padding: 0 14px; border: 1px solid var(--field); border-radius: 0; background: var(--white);
}
textarea { height: auto; min-height: 92px; padding: 12px 14px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #A8968A; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--body); }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--walnut); flex: none; }
.check a { color: var(--wax); }

/* Photo drop */
.drop {
  display: grid; place-items: center; text-align: center; gap: 6px;
  border: 1.5px dashed var(--field); background: var(--white);
  min-height: 210px; padding: 20px; cursor: pointer; transition: background .2s;
}
.drop:hover { background: #FBF6EF; }
.drop.has { padding: 10px; }
.drop img { max-width: 100%; max-height: 320px; display: block; }
.drop strong { font: 500 26px/1.1 var(--serif); }
.drop .muted { font: 400 15px/1.4 var(--sans); color: var(--drift); }
.tips { list-style: none; font-size: 15px; color: var(--body); padding: 0; margin-bottom: 0; display: grid; gap: 6px; }
.tips li { position: relative; padding-left: 18px; }
.tips li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }

.warn { display: grid; gap: 12px; }
.notice { padding: 14px 16px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule-ivory); font-size: 15px; color: var(--body); }
.notice.error { background: #F7E6DF; box-shadow: inset 0 0 0 1px #E2B4A3; color: var(--walnut); }

.bar { height: 3px; background: var(--rule); overflow: hidden; margin: 16px auto 8px; max-width: 320px; }
.bar i { display: block; height: 100%; background: var(--wax); width: 5%; transition: width 1s linear; }

.variant { position: relative; border: 2px solid transparent; padding: 0; background: var(--white); min-height: 0; overflow: hidden; border-radius: 0; }
.variant:hover { background: var(--white); border-color: var(--rule-ivory); }
.variant img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.variant.on { border-color: var(--walnut); }
.variant .tag { position: absolute; left: 8px; top: 8px; background: var(--white); color: var(--walnut); font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 999px; letter-spacing: .04em; text-transform: none; }
.history { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.history .variant { flex: 0 0 76px; }

/* The live print, on ivory paper like a band on the page */
.framewrap { position: relative; background: var(--ivory); padding: 18px 16px; }
@media (min-width: 720px) { .framewrap { padding: 28px; } }
.frame { position: relative; margin: 0 auto; padding: 3.2%; background: linear-gradient(135deg, #EAD9BB, #DEC8A4 45%, #D6BF98 55%, #E2CDA9);
  box-shadow: 0 1px 1px rgba(30, 20, 10, .18), 2px 5px 8px rgba(30, 20, 10, .2), 6px 14px 26px rgba(30, 20, 10, .14); max-width: 420px; }
.glass { position: relative; overflow: hidden; background: #F6EFE4; }
.glass iframe { position: absolute; border: 0; transform-origin: 0 0; pointer-events: none; }

.price { font: 500 34px/1 var(--serif); color: var(--walnut); }
.small { font-size: 14px; color: var(--drift); }
.center { text-align: center; }
[hidden] { display: none !important; }

.split > * + * { margin-top: 26px; }
@media (min-width: 720px) {
  .split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: start; }
  .split > * + * { margin-top: 0; }
}

/* Drawing screen: real stages with a countdown, and the photo in the frame
   shimmering like a sketch while the drawing is made. */
.progress { background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); padding: 16px 18px 8px; margin: 18px 0 22px; }
#check:not(:empty) { margin-bottom: 18px; }
/* When the drawing finishes, its choices take the progress panel's place */
.ready { display: grid; gap: 12px; margin: 18px 0 22px; animation: rise .5s ease-out; }
.ready .link { justify-self: start; }
@media (min-width: 720px) {
  .ready { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .ready > * { grid-column: 1 / -1; }
  .ready #again, .ready #change { grid-column: auto; }
}
/* Draw it again (with a reason) and Change a detail (with a topic) */
.panel { display: grid; gap: 12px; padding: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule-ivory); animation: rise .3s ease-out; }
.panel-h { font: 500 22px/1.2 var(--serif); margin: 0; color: var(--walnut); }
.reasons { display: grid; gap: 8px; }
.reason { display: flex; gap: 10px; align-items: center; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--rule-ivory); cursor: pointer; font-size: 15px; color: var(--walnut); }
.reason input { accent-color: var(--walnut); width: 18px; height: 18px; margin: 0; flex: none; }
.reason:has(input:checked) { box-shadow: inset 0 0 0 2px var(--walnut); }
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topic { width: auto; min-height: 0; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--white); color: var(--walnut);
  box-shadow: inset 0 0 0 1px var(--rule-ivory); font: 500 14px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.topic:hover { background: var(--ivory); }
.topic.on { background: var(--walnut); color: var(--ivory); box-shadow: none; }
.panel .row { display: flex; gap: 18px; align-items: center; }
.panel .row button:first-child { flex: 1; width: auto; }
.panel .row .link { flex: none; width: auto; }
/* Checking the photo, and drawing: say what's happening where they're looking */
.checking { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule-ivory); animation: rise .3s ease-out; }
.checking b { display: block; font: 500 18px/1.2 var(--serif); color: var(--walnut); }
.checking div span { display: block; font-size: 14px; color: var(--drift); }
.spin { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--rule-ivory); border-top-color: var(--wax); animation: spin 1s linear infinite; }
.drawing-badge { position: absolute; z-index: 3; top: 70px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center;
  padding: 8px 14px; background: rgba(255, 253, 249, .95); border-radius: 999px; box-shadow: 0 4px 14px rgba(40, 28, 16, .16);
  font: 500 13px/1 var(--sans); color: var(--walnut); white-space: nowrap; }
.drawing-badge .spin { width: 14px; height: 14px; border-width: 1.5px; }
@media (min-width: 720px) { .drawing-badge { top: 80px; } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stages li { display: grid; grid-template-columns: 26px 1fr; align-items: center; column-gap: 10px; color: var(--drift); font-size: 15px; font-weight: 500; }
.stages li small { grid-column: 2; font-weight: 400; font-size: 14px; color: var(--drift); }
.stages .dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--rule-ivory); display: grid; place-items: center; font-size: 11px; }
.stages .done { color: var(--walnut); }
.stages .done .dot { background: var(--walnut); border-color: var(--walnut); color: var(--ivory); }
.stages .now { color: var(--walnut); }
.stages .now .dot { border-color: var(--wax); border-top-color: transparent; animation: spin 1s linear infinite; }
.progress .bar { margin: 14px 0 8px; max-width: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.glass.sketching .shimmer { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 253, 249, .55) 50%, transparent 70%);
  background-size: 250% 100%; animation: sweep 2.4s ease-in-out infinite; }
@keyframes sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .stages .now .dot, .glass.sketching .shimmer { animation: none; } }

/* Preview views. Close up: the frame on its own. Room views: a measured
   room photo; JS sizes and places the frame in inches. Light in both rooms
   comes from the left, so the frame's shadow falls right and down. */
.viewtoggle { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 18px; padding: 4px; background: var(--white); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-ivory); }
.viewtoggle button { min-height: 0; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--drift); font: 500 13px/1 var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer; white-space: nowrap; width: auto; }
.viewtoggle button:hover { background: transparent; color: var(--walnut); }
.viewtoggle button[aria-pressed="true"] { background: var(--walnut); color: var(--ivory); }
@media (min-width: 720px) { .viewtoggle button { padding: 0 16px; } }
.room { position: relative; }
.room.wall { aspect-ratio: 1; overflow: hidden; background: #E9E1D5; }
.room.wall .scene { position: absolute; aspect-ratio: 1; background: center / 100% 100% no-repeat; }
.room.wall .frame { position: absolute; transform: translateX(-50%); margin: 0; max-width: none;
  box-shadow: 0 1px 1px rgba(30, 20, 10, .18), 2px 5px 8px rgba(30, 20, 10, .2), 6px 14px 26px rgba(30, 20, 10, .14); }
/* Standing on furniture rather than hanging: a contact shadow where it meets the tabletop */
.room.wall .frame.standing::after { content: ""; position: absolute; left: 1%; right: -6%; bottom: -4px; height: 8px;
  background: radial-gradient(ellipse at 45% 50%, rgba(40, 28, 16, .45), rgba(40, 28, 16, 0) 70%); filter: blur(2px); pointer-events: none; }
.frame .glass { box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .28); }
/* The frame's depth casts a soft shadow onto the print (on the sheen, above the print), and in a room the print sits in the room's light. */
.frame .glass .sheen { box-shadow: inset 2px 3px 6px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(0, 0, 0, .06); }
.room.wall .glass .sheen { background: linear-gradient(100deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 32%, rgba(40, 25, 10, 0) 55%, rgba(40, 25, 10, .1) 100%), rgba(60, 45, 30, .05); }
.frame .sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .06) 100%); }
.scale:empty { display: none; }
.scale { margin: 12px 0 0; font: italic 500 17px/1.4 var(--serif); color: var(--drift); }

/* First visit: finished prints above the upload */
.examples { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 20px -4px 26px; padding: 4px 4px 14px; scrollbar-width: none; }
.examples::-webkit-scrollbar { display: none; }
.example { flex: 0 0 156px; margin: 0; scroll-snap-align: start; }
.example .mini { padding: 7px; background: linear-gradient(135deg, #EAD9BB, #DEC8A4 45%, #D6BF98 55%, #E2CDA9); box-shadow: 0 2px 6px rgba(40, 28, 16, .18); }
.example .paper { background: #F6EFE4; padding: 12px 11px 10px; aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.example img { width: 100%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; }
.example span { font: 500 13px/1.15 var(--serif); color: var(--walnut); text-align: center; }
.example .sig { margin-top: auto; width: auto; height: 9px; aspect-ratio: auto; mix-blend-mode: normal; }


/* ---- The new flow (personaliser-next): which print, the offer, "Got someone
   else in mind?", and the "Your prints" hub ---- */
.tag-order { display: inline-block; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: var(--ivory); font-size: 13px; font-weight: 500; color: var(--walnut); }
.tag-order b { color: var(--wax); font-weight: 500; }
.offer-line { padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--rule-ivory); font-size: 14px; color: var(--body); }
.offer-line b { color: var(--wax); font-weight: 500; }
.donestrip { display: grid; gap: 8px; margin-bottom: 18px; }
.done { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; background: var(--ivory); }
.done b, .hubtext b { display: block; font: 600 17px/1.2 var(--serif); color: var(--walnut); }
.done small, .hubtext small { display: block; font-size: 13px; color: var(--drift); }
.ok { color: #5E7A4F; font-weight: 500; font-size: 14px; white-space: nowrap; }
.wip { color: var(--wax); font-weight: 500; font-size: 14px; white-space: nowrap; }
.miniframe { border-style: solid; border-color: transparent; box-shadow: 0 1px 2px rgba(30, 20, 10, .2), 0 4px 10px rgba(30, 20, 10, .14); background: #F6EFE4; }
.minipaper { aspect-ratio: 2 / 3; background: #F6EFE4; display: grid; align-items: start; justify-items: center; padding-top: 14%; overflow: hidden; }
.minipaper img { width: 84%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; }
.someone { padding: 18px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule-ivory); display: grid; gap: 10px; }
.someone-h { margin: 0; font: 500 24px/1.15 var(--serif); color: var(--walnut); text-transform: none; letter-spacing: 0; }
.counts { display: grid; gap: 8px; }
.count { position: relative; display: block; cursor: pointer; }
.count input { position: absolute; opacity: 0; inset: 0; }
.count span { display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--rule-ivory); background: var(--white); transition: box-shadow .2s; }
.count span b { font: 600 18px/1.15 var(--serif); color: var(--walnut); }
.count span small { grid-column: 1; font-size: 13px; color: var(--drift); }
.count span em { grid-column: 2; grid-row: 1 / span 2; font: 500 22px/1 var(--serif); font-style: normal; color: var(--walnut); }
.count span i { grid-column: 3; grid-row: 1 / span 2; font: 500 12px/1 var(--sans); font-style: normal; letter-spacing: .04em; padding: 6px 8px; border-radius: 2px; background: var(--wax); color: var(--white); white-space: nowrap; }
.count input:checked + span { box-shadow: inset 0 0 0 2px var(--walnut); }
.count input:disabled + span { opacity: .45; cursor: not-allowed; }
.count input:focus-visible + span { outline: 2px solid var(--wax); outline-offset: 2px; }
.price small { display: block; margin-top: 6px; font: 500 14px/1.3 var(--sans); color: var(--wax); }
.hub { display: grid; gap: 12px; margin: 18px 0; }
.hubcard { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule-ivory); }
.hubcard.open { grid-template-columns: 64px 1fr; align-items: start; background: var(--ivory); box-shadow: inset 0 0 0 1.5px var(--walnut); }
.hubcard .ph { aspect-ratio: 2 / 3; display: grid; place-items: center; border: 1.5px dashed #B9A68F; font: 500 24px/1 var(--serif); color: var(--wax); }
.hubside { display: grid; gap: 6px; justify-items: end; }
.hubside .link, .hubtext .link { min-height: 0; width: auto; padding: 0; font-size: 14px; }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pick button { min-height: 0; height: 44px; padding: 0 8px; font-size: 12px; letter-spacing: .12em; }
.hubframes { display: flex; gap: 8px; margin-top: 8px; }
.hubframe { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule-ivory); display: grid; place-items: center; }
.hubframe .sw { width: 18px; height: 18px; margin: 0; }
.hubframe.on { box-shadow: inset 0 0 0 2px var(--walnut); }
.third { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 0; height: 52px; padding: 0 16px; background: transparent; color: var(--walnut); box-shadow: none; border: 1.5px dashed #CDBDA6; text-transform: none; letter-spacing: 0; font: 500 16px/1 var(--sans); }
.third em { font-style: normal; color: var(--wax); font-size: 14px; }
.third:hover { background: var(--ivory); }
.bill { display: grid; gap: 6px; margin: 18px 0 14px; font-size: 15px; color: var(--body); }
.bill div { display: flex; justify-content: space-between; }
.bill .save { color: var(--wax); font-weight: 500; }
.bill .tot { padding-top: 10px; border-top: 1px solid var(--rule); font: 500 24px/1.2 var(--serif); color: var(--walnut); }
b.save { color: var(--wax); font-weight: 500; }

/* The hub's frame: one for the whole order */
.hubframe-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 4px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--ivory); }
.hubframe-row .hubframes { margin-top: 0; }
.hubframe-row b { color: var(--walnut); font-weight: 500; }

/* ---- Four and six moments ------------------------------------------------- */
.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 22px; padding: 4px; border-radius: 999px; background: var(--ivory); }
.formats button { width: auto; height: 40px; padding: 0 10px; border-radius: 999px; background: transparent; color: var(--drift); font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.formats button:hover { background: rgba(255, 253, 249, .6); color: var(--walnut); }
.formats button.on { background: var(--white); color: var(--walnut); box-shadow: 0 1px 2px rgba(40, 28, 16, .12), 0 3px 10px rgba(40, 28, 16, .08); }
.mslots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; margin: 22px 0 6px; }
@media (min-width: 700px) { .mslots.m6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mslots.m4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mslot { display: grid; gap: 8px; align-content: start; }
.mpick { position: relative; width: 100%; height: auto; aspect-ratio: 1; padding: 0; display: grid; place-items: center; align-content: center; gap: 4px; border: 1.5px dashed var(--field); border-radius: 2px; background: var(--white); color: var(--drift); text-transform: none; letter-spacing: 0; overflow: hidden; }
.mpick:hover { background: #FBF6EF; }
.mpick.has { border: 0; background: var(--ivory); }
.mpick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mpick .plus { font: 400 30px/1 var(--serif); color: var(--walnut); }
.mpick small { font: 500 12px/1.2 var(--sans); }
.mpick .ok { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--white); color: var(--wax); font: 600 12px/1 var(--sans); box-shadow: 0 1px 3px rgba(40, 28, 16, .2); }
.mslot.flag .mpick { outline: 2px solid var(--rose); outline-offset: 2px; }
.mwhen, .mcap input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px; border: 1px solid var(--field); border-radius: 0; background: var(--white); color: var(--walnut); font: 400 16px/1 var(--sans); }
.mnote { margin: 0; font-size: 13px; line-height: 1.4; color: var(--body); }
.mnote.err { color: var(--wax); }
.mcount { margin: 0 0 8px; font: 500 15px/1.3 var(--sans); color: var(--walnut); }
.mcaps { display: grid; gap: 8px; }
.mcap { display: grid; grid-template-columns: 22px .8fr 1.2fr; gap: 8px; align-items: center; }
.mnum { font: italic 500 20px/1 var(--serif); color: var(--wax); text-align: center; }
.mlist { display: grid; gap: 10px; }
.mitem { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule-ivory); transition: box-shadow .2s; }
.mitem.on { box-shadow: inset 0 0 0 2px var(--walnut); }
.mitem img, .mitem > i { width: 56px; height: 56px; object-fit: cover; background: var(--ivory); display: block; }
.mtext { display: grid; gap: 2px; min-width: 0; }
.mtext b { font: 600 17px/1.2 var(--serif); }
.mtext small { font-size: 13px; color: var(--drift); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbtns { display: grid; gap: 2px; justify-items: end; }
.mbtns .link { width: auto; height: auto; padding: 4px 0; font-size: 13px; }
.minipaper.mgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6%; padding: 14% 12%; align-content: center; }
.minipaper.mgrid img, .minipaper.mgrid i { width: 100%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; display: block; }

.chip input:disabled + span { opacity: .45; cursor: not-allowed; }
@media (max-width: 480px) { .formats button { padding: 0 4px; font-size: 11px; letter-spacing: .06em; } }

/* "I love it", always within reach once the drawing is ready (personaliser.js loveBar). */
.lovebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--white); box-shadow: 0 -1px 0 var(--rule-ivory), 0 -8px 24px rgba(74, 50, 35, .08); animation: rise .3s ease-out; }
.lovebar[hidden] { display: none; }
.lovebar .love { display: block; max-width: 560px; margin: 0 auto; }
.lovebar-more { display: flex; justify-content: center; gap: 32px; max-width: 560px; margin: 2px auto -8px; }
.lovebar-more button.link { min-height: 40px; color: var(--walnut); }
@media (prefers-reduced-motion: reduce) { .lovebar { animation: none; } }

/* The print's words, size and frame, summarised after "I love it". */
.summary { padding: 18px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule-ivory); display: grid; gap: 4px; }
.summary p { margin: 0; }
.summary .sum-title { font: 500 24px/1.15 var(--serif); color: var(--walnut); }
.summary .sum-names { font-size: 16px; color: var(--body); }
.summary .link { justify-self: start; margin-top: 4px; }
.summary[hidden], #details[hidden] { display: none; }

/* A flagged photo: the reason first, beside a small copy of the photo (render_photo). */
.photocheck { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: start; padding: 14px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule-ivory); }
.photocheck.noimg { grid-template-columns: 1fr; }
.photocheck.stop { background: #F7E6DF; box-shadow: inset 0 0 0 1px #E2B4A3; }
.photocheck img { width: 88px; height: 88px; object-fit: cover; border-radius: 2px; display: block; }
.photocheck b { display: block; margin-bottom: 4px; font: 500 21px/1.2 var(--serif); color: var(--walnut); }
.photocheck p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--body); }
.tips-h { margin-bottom: -6px; }

/* ---- NEXT (2026-11-11): three steps, the new start, simpler copy ---- */
.steplabel { margin: 0 0 8px; font: 500 11px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--drift); }
.steps { margin-bottom: 22px; }
.steps span { height: 3px; border-radius: 2px; }
h2.center { text-align: center; }
.lede { font: 400 16px/1.5 var(--sans); color: var(--body); margin: 0 0 16px; }
.aside { font: italic 500 19px/1.35 var(--serif); color: var(--body); text-align: center; margin: 14px 0 18px; }

/* The Kin & Ink Hand (brand/tokens.css), with hand-next.js's redrawn letters */
.kh { font-family: 'Dawning of a New Day', cursive; font-weight: 400; -webkit-text-stroke: 0.016em currentColor; }
.kh .d { position: relative; }
.kh .d::after { content: ""; position: absolute; left: 0.13em; top: 0.36em; width: 0.085em; height: 0.065em; border-radius: 50%; background: currentColor; transform: rotate(-25deg); }
.kh .amp { display: inline-block; width: 0.5em; height: 0.63em; margin: 0 0.2em 0 0.24em; vertical-align: -0.04em; overflow: visible; }
.kh .capg { display: inline-block; width: 0.67em; height: 0.79em; margin: 0 -0.08em 0 0; vertical-align: -0.03em; overflow: visible; }
.kh .kh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Step 1: the before-and-after */
/* Everything is pinned to the panel: it keeps the mockup's shape (390 × 318)
   and each piece is placed in --u, a 390th of its width, at the mockup's own
   coordinates, so the arrow and labels never drift at other widths. */
.pair { position: relative; aspect-ratio: 390 / 318; margin: 0 -16px 22px; background: var(--ivory); container-type: inline-size; --u: calc(100cqw / 390); }
@supports not (width: 1cqw) { .pair { --u: calc(min(100vw, 470px) / 390); } }
@media (min-width: 720px) { .pair { max-width: 470px; margin: 0 auto 26px; } }
.pair figure { position: absolute; margin: 0; box-sizing: border-box; }
.pair img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }   /* height: auto, or the img's height attribute wins over the square */
.polaroid { background: #fff; padding: 8px 8px 26px; box-shadow: 0 6px 18px rgba(74, 50, 35, .18); }
.pair .polaroid { left: calc(22 * var(--u)); top: calc(48 * var(--u)); width: calc(166 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(26 * var(--u)); transform: rotate(-6deg); }
.pair .sheet { left: calc(156 * var(--u)); top: calc(22 * var(--u)); width: calc(216 * var(--u)); padding: calc(10 * var(--u)); background: #F6EFE4; box-shadow: 0 10px 26px rgba(74, 50, 35, .22); transform: rotate(3deg); }
.pair .hand { position: absolute; font-size: calc(30 * var(--u)); line-height: 1; white-space: nowrap; color: var(--walnut); }
.pair .hand.l { left: calc(30 * var(--u)); top: calc(250 * var(--u)); }
.pair .hand.r { right: calc(44 * var(--u)); top: calc(254 * var(--u)); }
.pair .arrow { position: absolute; left: calc(150 * var(--u)); top: calc(222 * var(--u)); width: calc(64 * var(--u)); height: calc(40 * var(--u)); fill: none; stroke: var(--walnut); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* Handwriting waits for the Hand script's drawn letters (2 s at most). */
.kh:not([data-kh-done]) { visibility: hidden; animation: kh-reveal 0s linear 2s forwards; }
@keyframes kh-reveal { to { visibility: visible; } }
.polaroid.solo { width: 200px; padding: 8px 8px 24px; margin: 4px auto 10px; transform: rotate(-2deg); }
.polaroid.solo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.photo-ok { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; margin: 0 0 18px; }
.photo-ok .tick { color: var(--wax); font-weight: 600; }
.photo-ok .link { min-height: 0; font-size: 15px; color: var(--drift); }

/* The main button with a second line under it */
.cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 66px; padding: 10px 22px; border-radius: 3px; background: var(--wax); color: var(--white); cursor: pointer; text-align: center; }
.cta:hover { background: var(--wax-hover); }
.cta .cta-main { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.cta .cta-sub { font: 400 13px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: #FBE6DC; }
.cta:disabled .cta-sub { color: var(--drift); }
.cta .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.perks { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.perks li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 99px; font-size: 13px; }
.perks li::before { content: "✓"; color: var(--wax); font-weight: 600; }

/* Step 2 */
.framewrap.solo { padding-top: 22px; }
.emailnote { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; background: var(--ivory); border-radius: 4px; }
.emailnote svg { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--walnut); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.emailnote p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--body); }
.emailnote b { font-weight: 500; color: var(--walnut); }
.nomark { margin: 8px 0 16px; }
label.field small.rec { color: var(--wax); }
label.field.need input { box-shadow: inset 0 0 0 2px var(--wax); }
label.field.need::after { content: "Please add a title for your print"; display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--wax); }
.pair-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pair-btns button { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 8px; border-width: 1.5px; font: 500 15px/1.2 var(--sans); letter-spacing: 0; text-transform: none; }
.pair-btns small { font: 400 12px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--drift); }

/* One moment, or a year */
.mcards { display: grid; gap: 10px; }
.mcard { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--rule-ivory); cursor: pointer; }
.mcard:has(input:checked) { box-shadow: inset 0 0 0 2px var(--walnut); }
.mcard input { order: 3; flex: none; width: 20px; height: 20px; margin: 0 0 0 auto; accent-color: var(--wax); cursor: pointer; }
.mthumb { flex: none; width: 58px; height: 80px; padding: 6px; background: #F6EFE4; box-shadow: 0 2px 6px rgba(74, 50, 35, .14); display: grid; gap: 3px; align-content: start; }
.mthumb.g1 { padding: 6px 6px 18px; }
.mthumb.g4, .mthumb.g6 { grid-template-columns: 1fr 1fr; }
.mthumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.mthumb i { aspect-ratio: 1; border: 1px dashed #B9A68F; }
.mtext { display: flex; flex-direction: column; gap: 3px; }
.mtext b { font: 500 17px/1.2 var(--sans); }
.mtext em { font-style: normal; font-weight: 400; color: var(--wax); }
.mtext small { font-size: 14px; color: var(--drift); }

/* Step 3: size, frame and sets */
.opts { display: grid; gap: 6px; }
.opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px var(--rule-ivory); text-align: center; }
.opt b { font: 500 15px/1.2 var(--sans); }
.opt small { font-size: 13px; color: var(--drift); }
.opt input:checked + span { box-shadow: inset 0 0 0 2px var(--walnut); }
.opt input:disabled + span { opacity: .45; }
.opt input:focus-visible + span { outline: 2px solid var(--wax); outline-offset: 2px; }
.opt-h { text-align: center; font-size: 14px; color: var(--drift); margin: 4px 0 8px; }
.swatches { display: flex; justify-content: center; gap: 20px; }
.swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--drift); cursor: pointer; }
.swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
/* Each circle shows that frame's corner from Artelo's photo, on a bit of wall */
.swatch i { display: block; width: 52px; height: 52px; border-radius: 50%; background-color: #EFE7DC; background-repeat: no-repeat; background-size: 330px auto; background-position: 12px 12px; box-shadow: inset 0 0 0 1px rgba(74, 50, 35, .16); }
.swatch input:checked ~ i { outline: 2px solid var(--walnut); outline-offset: 3px; }
.swatch input:checked ~ span { color: var(--walnut); font-weight: 500; }
.swatch input:focus-visible ~ i { outline: 2px solid var(--wax); outline-offset: 3px; }

/* The single-column screens keep a phone-like width on a wide screen */
.wrap.narrow { max-width: 560px; margin: 0 auto; }

/* The words for the print, typed while it draws */
.words-wait { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.words-h { margin: 0; font: 400 15px/1.45 var(--sans); color: var(--body); }

/* The drawing and "here's your drawing": the print small and centred on the
   page, as in the mockups, so the words and buttons sit close below it. */
.framewrap.compact { background: none; padding: 6px 0 2px; }
.framewrap.compact .frame { max-width: 200px; }
@media (min-width: 720px) { .framewrap.compact .frame { max-width: 240px; } }
/* Size and frame: the room as a short strip around the print */
.framewrap.crop { background: none; padding: 4px 0 0; }
.roomcrop { aspect-ratio: 342 / 230; overflow: hidden; border-radius: 3px; }
.framewrap.crop .scale { margin: 6px 0 0; font: 400 12px/1.4 var(--sans); }
.wrap.narrow h2 { font-size: clamp(30px, 3.4vw, 38px); }
.wrap.narrow .pair ~ h2 { font-size: clamp(36px, 4vw, 44px); }
/* Size and frame, as the mockup: the sets row is a plain line and three cards, no box */
.someone { padding: 0; background: none; box-shadow: none; gap: 8px; }
.someone .opt-h { font-size: 13px; color: var(--drift); text-align: center; }
.panel-left { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font-size: 13px; color: var(--drift); }
.panel-left b { font-weight: 500; color: var(--walnut); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }

/* No frame (2026-11-12): the print alone, a paper edge with a soft shadow,
   no moulding and no glass. */
.frame.bare { background: #FBF8F2; box-shadow: 0 1px 2px rgba(30, 20, 10, .16), 0 6px 16px rgba(30, 20, 10, .12); }
.frame.bare .glass { box-shadow: none; }
.frame.bare .sheen { display: none; }
.miniframe.bare { border: 0; background: #FBF8F2; }
.swatch i.none { position: relative; background: #FBF8F2; box-shadow: inset 0 0 0 1px var(--rule-ivory); }
/* Five choices now: a little tighter so they fit a phone */
.swatches { gap: 14px; }
.swatch i.none::after { content: ""; position: absolute; inset: 30%; border: 1px solid #CDBDA6; background: #FFFDF9; }
.sw[data-frame="unframed"] { background: #FBF8F2; box-shadow: inset 0 0 0 1px #CDBDA6; }