/* loveMap — quiet stationery. One family (serif, real italic) + one display script, ivory paper,
   charcoal ink, one carmine accent reserved for the heart and the focus ring.
   Elevation rule: hairlines for interface, shadows for objects (the artwork only). */

@font-face {
  font-family: "LoveMapSerif"; font-style: normal; font-weight: 400;
  src: url("/static/fonts/serif.woff2?v=1") format("woff2"), url("/static/fonts/serif.ttf?v=1") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "LoveMapSerif"; font-style: italic; font-weight: 400;
  src: url("/static/fonts/serif-italic.woff2?v=1") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "LoveMapScript";
  src: url("/static/fonts/script.woff2?v=1") format("woff2"), url("/static/fonts/script.ttf?v=1") format("truetype");
  font-display: swap;
}
/* metric-matched fallbacks, so the swap to the real faces doesn't move the layout */
@font-face {
  font-family: "LoveMapSerif Fallback";
  src: local("Georgia"), local("Baskerville"), local("Times New Roman");
  size-adjust: 104%; ascent-override: 93%; descent-override: 26%; line-gap-override: 0%;
}
@font-face {
  font-family: "LoveMapScript Fallback";
  src: local("Snell Roundhand"), local("SnellRoundhand"), local("Apple Chancery"), local("Brush Script MT"), local("Georgia Italic");
  size-adjust: 92%;
}

:root {
  color-scheme: light;

  /* color roles */
  --bg: #efe9e0;               /* the room the print hangs in */
  --surface-art: #e6dfd5;      /* the artwork's paper, sampled from real prints */
  --surface-plaster: #e4ddd3;
  --surface-field: #f8f4ed;    /* inputs, listbox, round buttons */
  --surface-sheet: #f5f0e8;    /* dialogs, the offer card */
  --surface-bar: rgba(243, 237, 228, .96);
  --surface-hover: #ebe3d7;
  --surface-selected: #e6dccd;
  --text: #3a302e;             /* 10.6:1 on bg */
  --text-muted: #62564f;       /* 5.9:1 */
  --text-faint: #776b64;       /* 4.7:1 on field: placeholders only */
  --line: #ddd4c7;             /* decorative dividers */
  --line-mid: #cfc4b5;         /* underline decoration, veil track */
  --line-strong: #8f8275;      /* control borders: 3.1:1 on bg, 3.4:1 on field */
  --primary: #3a302e;
  --on-primary: #e6dfd5;
  --primary-hover: #241d1b;
  --primary-active: #1a1413;
  --primary-disabled: #6f625c;
  --on-primary-disabled: #f6f1ea;
  --accent: #a83e34;           /* the heart and the focus ring. Nothing else. */
  --danger: #8e2f26;           /* 6.7:1 */
  --success: #46613f;
  --scrim: rgba(43, 35, 33, .55);
  --scrim-strong: rgba(43, 35, 33, .86);
  --tint-press: rgba(58, 48, 46, .07);
  --tint-hover: rgba(58, 48, 46, .05);
  --tint-select: rgba(168, 62, 52, .18);
  --surface-veil: rgba(233, 226, 217, .82);
  --surface-fade: rgba(239, 233, 224, 0);      /* --bg at zero alpha, for the sticky Create's fade */
  --mask-editor: rgba(230, 223, 213, .7);
  --line-frame: rgba(58, 48, 46, .5);

  /* old names, kept as aliases */
  --wall: var(--bg); --paper: var(--surface-art); --plaster: var(--surface-plaster);
  --field: var(--surface-field); --ink: var(--text); --ink-soft: var(--text-muted);
  --hair: var(--line-mid); --hair-soft: var(--line); --carmine: var(--accent);

  --serif: "LoveMapSerif", "LoveMapSerif Fallback", Georgia, serif;
  --script: "LoveMapScript", "LoveMapScript Fallback", cursive;

  /* type scale (desktop; phones override below) */
  --fs-caption: .8125rem;      /* 13px */
  --fs-small: .9375rem;        /* 15px */
  --fs-body: 1.0625rem;        /* 17px */
  --fs-lede: 1.1875rem;        /* 19px */
  --fs-title-sm: 1.375rem;     /* 22px */
  --fs-title: 1.75rem;         /* 28px */
  --fs-display: clamp(2.125rem, 4.4vw, 3.875rem);
  --fs-display-sm: clamp(2rem, 3.6vw, 3rem);     /* the closing headline; short phones' h1 */
  --fs-script-names: 1.5rem;
  --fs-script-brand: 2.25rem;
  --track-caps: .16em;

  /* spacing (4-pt) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --gutter: clamp(16px, 4vw, 56px);
  --section: clamp(64px, 11vh, 128px);
  --max: 1360px;

  /* radii, elevation, layers */
  --r-crisp: 2px; --r-pill: 999px;
  --elev-popover: 0 12px 32px -16px rgba(58, 48, 46, .40);
  --shadow-print: 0 1px 1px rgba(58, 48, 46, .06), 0 2px 6px rgba(58, 48, 46, .06),
                  0 28px 60px -30px rgba(58, 48, 46, .45);
  --shadow-print-lift: 0 1px 1px rgba(58, 48, 46, .06), 0 4px 10px rgba(58, 48, 46, .07),
                       0 36px 70px -30px rgba(58, 48, 46, .5);
  --z-sheet: 5; --z-shelf: 20; --z-bar: 30; --z-skip: 50;

  /* motion */
  --dur-press: 100ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 350ms;
  --dur-exit: 240ms; --dur-reveal: 1400ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease: var(--ease-out);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (min-width: 1000px) { html { scroll-padding-bottom: 140px; } }   /* focus never hides under the sticky Create */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-body)/1.6 var(--serif);
  font-synthesis-weight: none;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--tint-select); color: var(--text); }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
p, li, dd, .hint, summary { text-wrap: pretty; }
figcaption { text-wrap: balance; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Spanish visitors: the English words wait for the dictionary instead of swapping under their eyes,
   while the artwork and the layout paint at once (boot.js sets the class, i18n.js removes it;
   the animation is the safety net if the modules never run). */
.i18n-pending :is([data-i18n], [data-place-cap], #ui-lang-code, #final-note, #faq-a3, #print-3,
  #offer-title-text, #country-text, #locate-btn, #create-label, #veil-stage, #editor-hint) {
  visibility: hidden; animation: i18n-reveal 0s 1.2s forwards;
}
@keyframes i18n-reveal { to { visibility: visible; } }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: var(--z-skip);
  background: var(--primary); color: var(--on-primary); padding: 8px 16px; text-decoration: none;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- header ---------- */
.top {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 12px var(--gutter) 0;
  max-width: var(--max); margin: 0 auto;
}
.brand {
  font-family: var(--script); font-size: var(--fs-script-brand); line-height: 1.2;
  color: var(--text); text-decoration: none; padding: 4px 4px; margin-right: auto;
  /* a fixed box, so the swap from the fallback script to ours never moves the page */
  display: inline-flex; align-items: center; height: calc(var(--fs-script-brand) * 1.2 + 8px);
}
/* native <select> dressed as text + chevron; the invisible select is the hit area */
.pick {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-muted); white-space: nowrap;
  transition: color var(--dur-fast);
}
.pick select {
  position: absolute; inset: -10px -8px; width: calc(100% + 16px); height: calc(100% + 20px);
  opacity: 0; cursor: pointer; font-size: 16px; margin: 0; border: 0;
}
.pick .chev { width: 10px; height: 6px; flex: none; }
.pick:has(select:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.lang-pick {
  font-size: var(--fs-small); letter-spacing: .06em;
  min-width: 44px; min-height: 44px; justify-content: center;
}
.lang-pick select { inset: 0; width: 100%; height: 100%; }
.top-link {
  display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
  color: var(--text-muted); text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 6px; padding: 0 2px;
  transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
}
.top-link[aria-current] { color: var(--text); text-decoration-color: var(--line-strong); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 52px; padding: 8px 32px; border-radius: var(--r-crisp);
  font-size: var(--fs-body); letter-spacing: .02em; line-height: 1.3; text-decoration: none; cursor: pointer;
  border: 1px solid var(--primary);
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast),
              transform var(--dur-press) var(--ease-out);
}
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:active:not(:disabled) { background: var(--primary-active); border-color: var(--primary-active); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] {
  background: var(--primary-disabled); border-color: var(--primary-disabled); color: var(--on-primary-disabled); cursor: not-allowed;
}
.is-busy .create:disabled { cursor: progress; }
.btn-secondary { background: transparent; color: var(--text); }
.btn-secondary:active { background: var(--tint-press); }
.btn small { font-size: var(--fs-caption); letter-spacing: .03em; opacity: .8; margin-top: 2px; }
.btn-link, .btn-quiet {
  background: none; border: 0; padding: 0 2px; min-height: 44px; cursor: pointer;
  color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast);
}
.btn-link:active, .btn-quiet:active { text-decoration-color: var(--text); }
.round {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface-field); color: var(--text);
  display: inline-grid; place-items: center; cursor: pointer; padding: 0;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), transform var(--dur-press);
}
.round svg { width: 16px; height: 16px; }
.round:active:not(:disabled) { background: var(--surface-hover); transform: scale(.96); }
.round:disabled { opacity: .4; cursor: default; }

@media (hover: hover) {
  .pick:hover { color: var(--text); }
  .top-link:hover { color: var(--text); text-decoration-color: var(--line-strong); }
  .btn-primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--primary-hover); border-color: var(--primary-hover); }
  .btn-secondary:hover { background: var(--tint-hover); }
  .btn-link:hover, .btn-quiet:hover { text-decoration-color: var(--text); }
  .round:hover:not(:disabled) { border-color: var(--text); }
  input:hover:not(:focus) { border-color: var(--text-muted); }
  .chip input:hover + span, .seg:hover { border-color: var(--text); }
  #place-list [role="option"]:hover { background: var(--surface-hover); }
  .disclose summary:hover, .faq summary:hover { text-decoration-color: var(--text); }
  .art-btn:hover img { box-shadow: var(--shadow-print-lift); transform: translateY(-2px); }
  .order-pick:hover span { text-decoration-color: var(--text); }
  .foot a:hover, .rec-help a:hover { text-decoration-color: var(--text); }
}

/* ---------- shared section type ---------- */
.kicker, .done-kicker, .get-title {
  font-size: var(--fs-caption); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--text-muted); line-height: 1.5;
}
.landing h2 { font-size: var(--fs-title); line-height: 1.25; }

/* ---------- intro ---------- */
.intro {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(24px, 5vh, 64px) var(--gutter) clamp(40px, 7vh, 88px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-rows: repeat(5, auto) 1fr;     /* copy and artwork share a top edge; a font swap moves neither */
  column-gap: clamp(32px, 6vw, 112px);
}
.intro > * { grid-column: 1; }
.eyebrow { grid-row: 1; } .intro h1 { grid-row: 2; } .lede { grid-row: 3; } .cta { grid-row: 4; } .how { grid-row: 5; }
.intro > .intro-art { grid-column: 2; grid-row: 1 / -1; align-self: start; }
.eyebrow {       /* the occasions, set like a line of stationery rather than a shouting label */
  margin-bottom: var(--sp-4); text-transform: none; letter-spacing: .01em;
  font-size: var(--fs-small); font-style: italic;
}
.intro h1 {
  font-size: var(--fs-display); line-height: 1.07; letter-spacing: -.012em; max-width: 15ch;
}
.lede { margin-top: var(--sp-5); font-size: var(--fs-lede); line-height: 1.65; color: var(--text-muted); max-width: 31em; }
.cta { margin-top: var(--sp-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.begin { min-width: 200px; }
.cta-note { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.45; min-height: 1.45em; }
.is-pending { visibility: hidden; }
/* phones get the short lede (three lines at 360 px); 600 px and up keep the full sentence */
.lede-short { display: none; }
@media (max-width: 599px) {
  .lede-long { display: none; }
  .lede-short { display: inline; }
}
.how {
  list-style: none; padding: 0; margin: var(--sp-7) 0 0; max-width: 36em;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-6);
  color: var(--text-muted); font-size: var(--fs-small); line-height: 1.45;
  padding-top: var(--sp-5); border-top: 1px solid var(--line);
}
.how li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.how-n, .step-n {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  border: 1px solid var(--line-strong); border-radius: 50%; font-size: var(--fs-caption); color: var(--text);
  line-height: 1;
}
.intro-art { margin: 0; justify-self: center; width: min(100%, 520px); }
.art-btn {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: 0;
}
.art-btn img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  background: var(--surface-art); box-shadow: var(--shadow-print);
  transition: box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.art-btn:focus-visible { outline-offset: 6px; }
.intro-art figcaption, .gallery figcaption {
  margin-top: var(--sp-4); font-style: italic; color: var(--text-muted); font-size: var(--fs-small);
  text-align: center; line-height: 1.45; min-height: 1.45em;
}

/* ---------- facts strip ---------- */
.facts { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.facts-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.facts-list li {
  padding: var(--sp-5) var(--sp-5); text-align: center; font-size: var(--fs-small);
  color: var(--text-muted); line-height: 1.45; text-wrap: balance;
}
.facts-list li + li { border-left: 1px solid var(--line); }

/* ---------- gallery ---------- */
.gallery { max-width: var(--max); margin: 0 auto; padding: var(--section) var(--gutter) 0; }
.gallery h2 { text-align: center; }
.gallery-list {
  list-style: none; padding: 0; margin: var(--sp-7) 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-6) clamp(20px, 3vw, 48px);
}
.gallery-list li { width: clamp(150px, 17vw, 240px); }
.gallery-list figure { margin: 0; }
.gallery-note { margin-top: var(--sp-6); text-align: center; color: var(--text-muted); font-size: var(--fs-small); }

/* ---------- gift ---------- */
.gift {
  max-width: var(--max); margin: 0 auto; padding: var(--section) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6) clamp(32px, 7vw, 128px);
  align-items: start;
}
.gift h2 { max-width: 18ch; }
.gift-body { margin-top: var(--sp-5); color: var(--text-muted); font-size: var(--fs-lede); line-height: 1.65; max-width: 30em; }
.moments { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.moments li {
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-title-sm); font-style: italic; line-height: 1.35;
  display: flex; align-items: baseline; gap: var(--sp-4);
}
.moments li::before {
  content: ""; flex: none; width: 11px; height: 10px; transform: translateY(-1px);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'><path fill='%23a83e34' d='M12 21.3 10.6 20C5.4 15.4 2 12.3 2 8.5 2 5.4 4.4 3 7.5 3c1.7 0 3.4.8 4.5 2.1C13.1 3.8 14.8 3 16.5 3 19.6 3 22 5.4 22 8.5c0 3.8-3.4 6.9-8.6 11.5L12 21.3z'/></svg>") center / contain no-repeat;
  opacity: .9;
}

/* ---------- studio ---------- */
.studio {
  border-top: 1px solid var(--line);
  max-width: var(--max); margin: 0 auto;
  padding: clamp(28px, 5vh, 56px) var(--gutter) 72px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 408px);
  gap: clamp(36px, 5vw, 96px); align-items: start;
  min-height: 100svh;
}
.studio:focus { outline: none; }
.stage { position: sticky; top: 20px; min-width: 0; }
.poster-frame {
  width: min(100%, calc((100svh - 196px) * 0.746667));
  margin: 0 auto;
}

.sheet {
  position: relative; width: 100%; aspect-ratio: 3584 / 4800; overflow: hidden;
  background:
    radial-gradient(ellipse 120% 100% at 50% 50%, rgba(255, 252, 246, .0) 55%, rgba(120, 100, 80, .07) 100%),
    var(--surface-art);
  box-shadow: var(--shadow-print);
  contain: layout paint;
  transition: opacity var(--dur-slow), filter var(--dur-slow);
}
.sheet::after {       /* paper fibre: the artwork's own surface */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .35 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.panel {
  position: absolute; z-index: 1;
  --f: var(--feather, 16px);
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent);
  mask-composite: intersect;
}
.panel-map, .editor-panel .panel-map { position: absolute; inset: 0; background: var(--surface-plaster); }
.panel-map.is-waiting { cursor: default; }
.panel-map:focus-visible { outline: none; }
.panel:focus-within:has(.panel-map:focus-visible)::before {
  content: ""; position: absolute; inset: 10px; z-index: 600; pointer-events: none;
  border: 2px solid var(--accent);
}
/* the streets, read as ivory plaster */
.panel-map {
  filter: grayscale(1) sepia(.18) contrast(.34) brightness(1.42) saturate(.7);
}
.panel::after {       /* soft inner light, like a cast surface */
  content: ""; position: absolute; inset: 0; z-index: 450; pointer-events: none;
  box-shadow: inset 0 0 calc(var(--f) * 3) rgba(228, 221, 211, .9);
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(120, 100, 80, .06));
}
.panel .heart, .editor-panel .heart {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 500; pointer-events: none; max-width: none;
}
/* no hairline seams between tiles at fractional zoom: overlap by a pixel, plain blend */
.panel-map img.leaflet-tile { mix-blend-mode: normal; width: 257px !important; height: 257px !important; }
.leaflet-container { font: inherit; background: var(--surface-plaster); }
.leaflet-container:focus-visible { outline: none; }

.caption { position: absolute; left: 0; width: 100%; height: 0; z-index: 2; pointer-events: none; }   /* sized by poster.js */

.result {
  position: absolute; inset: 0; z-index: 4; padding: 0; border: 0; margin: 0;
  background: var(--surface-art); cursor: zoom-in; display: block;
}
.result img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: blur(8px); transform: scale(1.01);
  transition: opacity var(--dur-reveal) var(--ease-out), filter 1.6s var(--ease-out), transform 1.6s var(--ease-out);
}
.result.revealed img { opacity: 1; filter: none; transform: none; }
.result:focus-visible { outline-offset: -6px; }

.veil {
  position: absolute; inset: 0; z-index: var(--z-sheet);
  display: grid; place-items: center; padding: 8%;
  background: var(--surface-veil);
  -webkit-backdrop-filter: blur(3px) saturate(.8); backdrop-filter: blur(3px) saturate(.8);
  animation: veil-in .6s var(--ease-out);
}
@keyframes veil-in { from { opacity: 0; } }
.veil-inner { text-align: center; max-width: 28em; }
.veil-stage { font-size: var(--fs-title-sm); font-style: italic; line-height: 1.3; text-wrap: balance; }
.veil-sub { margin-top: 8px; color: var(--text-muted); font-size: var(--fs-small); min-height: 1.6em; }
.veil-track {
  margin: 24px auto 0; width: min(240px, 70%); height: 1px; background: var(--line-mid); overflow: hidden;
}
.veil-track span {
  display: block; height: 100%; width: 100%; background: var(--text);
  transform-origin: left; transform: scaleX(.02); transition: transform 1.4s linear;
}
.veil-note { margin-top: 24px; color: var(--text-muted); font-size: var(--fs-small); text-wrap: balance; }
.veil.is-error .veil-track, .veil.is-error .veil-note, .veil.is-error .veil-sub { display: none; }
.veil-error p { color: var(--text-muted); margin-top: 8px; }
.veil-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; align-items: center; }

.stage-bar {
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  width: min(100%, max(380px, calc((100svh - 196px) * 0.746667))); margin: 12px auto 0;
}
.zoom { display: flex; gap: 8px; flex: none; }
.place {
  flex: 1; min-width: 0; text-align: center; font-style: italic; color: var(--text-muted);
  font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adjust { flex: none; font-size: var(--fs-small); }
.guide {
  width: min(100%, calc((100svh - 196px) * 0.746667)); margin: 8px auto 0;
  font-size: var(--fs-caption); line-height: 1.5; color: var(--text-muted); text-align: center; text-wrap: balance;
}
.guide-frozen { display: none; }
.is-busy .guide { display: none; }
.is-result .guide { display: none; }
.attrib {
  width: min(100%, calc((100svh - 196px) * 0.746667)); margin: 4px auto 0;
  font-size: 12px; line-height: 1.4; color: var(--text-muted); text-align: center; font-family: system-ui, sans-serif;
}
.attrib a { color: inherit; }
.is-result .stage-bar .zoom, .is-result .stage-bar .adjust { display: none; }
.is-busy .stage-bar .zoom, .is-busy .stage-bar .adjust { visibility: hidden; }
@media (min-width: 1000px) and (max-width: 1180px) {
  /* the place line gets its own row instead of an ellipsis between the controls */
  .stage-bar { flex-wrap: wrap; row-gap: 8px; }
  .place { order: -1; flex-basis: 100%; white-space: normal; text-wrap: balance; }
}

/* ---------- side: steps ---------- */
.side { min-width: 0; padding-top: 4px; }
.step { border: 0; margin: 0; padding: 0 0 var(--sp-6); min-width: 0; }
.step + .step { border-top: 1px solid var(--line); padding-top: var(--sp-5); }
.step legend {
  float: left; width: 100%; padding: 0; margin-bottom: var(--sp-4); font-size: var(--fs-title-sm); line-height: 1.3;
  display: flex; align-items: center; gap: 12px;
}
.step legend + * { clear: both; }
.label { display: block; font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--sp-2); }

input[type="text"], input[type="search"], input[type="email"], input[type="date"], input[type="time"] {
  width: 100%; height: 50px; padding: 0 12px;
  background: var(--surface-field); border: 1px solid var(--line-strong); border-radius: var(--r-crisp);
  font-size: var(--fs-body); color: var(--text); -webkit-appearance: none; appearance: none;
  caret-color: var(--accent);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
input[type="date"], input[type="time"] { display: flex; align-items: center; min-width: 0; }
input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; transition: opacity var(--dur-fast); }
input::-webkit-calendar-picker-indicator:hover { opacity: .85; }
input::placeholder { color: var(--text-faint); opacity: 1; font-style: italic; }
input:focus { border-color: var(--text); }
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 -2px 0 var(--danger); }

.field-msg {
  margin-top: var(--sp-2); color: var(--danger); font-size: var(--fs-small); line-height: 1.45;
  padding-left: 24px; position: relative;
}
.field-msg::before {        /* a drawn "!" so an error never relies on colour alone */
  content: ""; position: absolute; left: 0; top: .2em; width: 15px; height: 15px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7.2' fill='none' stroke='%238e2f26' stroke-width='1.3'/><path d='M8 4.2v4.9' stroke='%238e2f26' stroke-width='1.5' stroke-linecap='round'/><circle cx='8' cy='11.6' r='.95' fill='%238e2f26'/></svg>") center / contain no-repeat;
}
.field-msg.is-info { color: var(--text-muted); font-style: italic; padding-left: 0; }
.field-msg.is-info::before { display: none; }
.field-status { margin-top: var(--sp-2); color: var(--text-muted); font-size: var(--fs-small); font-style: italic; }
.counter { margin-top: 8px; font-size: var(--fs-caption); color: var(--text-muted); text-align: right; }
.hint { margin-top: 8px; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5; }

.combo { position: relative; }
.search-head { display: flex; margin-bottom: var(--sp-2); }
.country-pick { font-size: var(--fs-small); line-height: 1.6; max-width: 100%; }
.country-pick .pick-text { overflow: hidden; text-overflow: ellipsis; }
.shelf-sentinel { position: absolute; top: 40px; left: 0; width: 1px; height: 1px; pointer-events: none; }
.only-narrow { display: none; }
.framing-line { display: none; }
.editor-frame { display: none; }
#place-list {
  position: absolute; z-index: var(--z-shelf); left: 0; right: 0; top: 100%;
  margin: 4px 0 0; padding: 8px 0; list-style: none;
  background: var(--surface-field); border: 1px solid var(--line-mid); border-radius: var(--r-crisp);
  box-shadow: var(--elev-popover);
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
}
#place-list [role="option"] {
  display: flex; flex-direction: column; padding: 8px 12px; min-height: 44px; cursor: pointer;
  border-left: 2px solid transparent;
}
#place-list [aria-selected="true"] { background: var(--surface-selected); border-left-color: var(--accent); }
.opt-label { line-height: 1.35; }
.opt-detail { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.35; }

.locate { margin-top: 8px; font-size: var(--fs-small); }
.framing { margin-top: var(--sp-4); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.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 var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: var(--fs-small); background: transparent;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.chip input:active + span { background: var(--tint-press); }
.chip input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.disclose { margin-top: var(--sp-3); }
.disclose summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
  list-style: none; text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 4px; transition: text-decoration-color var(--dur-fast);
}
.disclose summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.disclose-mark, .faq-mark {
  position: relative; flex: none; width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 50%;
}
.disclose-mark::before, .disclose-mark::after, .faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.3px; background: currentColor;
  transform: translate(-50%, -50%); transition: transform var(--dur-base) var(--ease-out);
}
.disclose-mark::after, .faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] > summary .disclose-mark::after, details[open] > summary .faq-mark::after { transform: translate(-50%, -50%) rotate(0deg); }
.disclose-body { padding-top: 8px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 8px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--primary); margin: 0; }
.more { border-top: 1px solid var(--line); margin-top: 0; padding-top: 8px; }
.lang { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lang legend { padding: 0; }
.seg { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg { display: inline-flex; align-items: center; min-height: 44px; padding: 0 24px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.seg:active { background: var(--tint-press); }
.seg:has(input:checked) { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.seg:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.action { margin-top: var(--sp-5); }
.create { width: 100%; font-size: var(--fs-body); }
.action-note { margin-top: 8px; font-size: var(--fs-small); color: var(--text-muted); text-align: center; min-height: 1.4em; }
.action-note.is-error { color: var(--danger); }
@media (min-width: 1000px) {
  /* keep the one thing to do next in view on laptop screens */
  .action {
    position: sticky; bottom: 0; z-index: var(--z-sheet); margin-top: 8px;
    padding: 32px 0 16px; background: linear-gradient(var(--surface-fade), var(--bg) 32px);
  }
}
.back-link { display: block; margin: -8px 0 12px; }

/* ---------- result ---------- */
.done { padding-top: 4px; }
.done-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.done-heart { width: 15px; height: 14px; fill: var(--accent); flex: none; }
.done h3 + .done-lede { margin-top: 12px; }
.done:focus { outline: none; }
.done h3 { font-size: var(--fs-title); line-height: 1.25; }
.done-lede { margin-top: 8px; color: var(--text-muted); }
.dl { width: 100%; margin-top: var(--sp-4); }
.dl-bar { display: contents; }
#dl-print { margin-top: 32px; }
.done-tips {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-2);
  font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5;
}
.done-tips li { padding-left: 24px; position: relative; }
.done-tips li::before {
  content: ""; position: absolute; left: 3px; top: .72em; width: 8px; height: 1px; background: var(--line-strong);
}
.done-links { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: var(--sp-5); padding-top: 12px; border-top: 1px solid var(--line); }
.done .hint { margin-top: 4px; }

/* ---------- payments: review & pay, order, corrections, recovery ---------- */
.kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.review h3, .order h3, .recover h3, .fix h3 { font-size: var(--fs-title); line-height: 1.25; }
.review h3:focus, .recover h3:focus, .fix h3:focus, .order:focus { outline: none; }

.summary { margin: 24px 0 0; border-top: 1px solid var(--line); }
.sum-row {
  display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline;
  padding: 4px 0; border-bottom: 1px solid var(--line);
}
.sum-row dt { font-size: var(--fs-caption); color: var(--text-muted); }
.sum-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sum-sub { display: block; font-size: var(--fs-caption); color: var(--text-muted); font-style: italic; }
.sum-names { font-family: var(--script); font-size: var(--fs-script-names); line-height: 1.25; }
.sum-edit .btn-link { font-size: var(--fs-small); }

.get-title { margin: 24px 0 8px; }
.get { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.get li { position: relative; padding-left: 24px; line-height: 1.4; }
.get li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 11px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'><path fill='%23a83e34' d='M12 21.3 10.6 20C5.4 15.4 2 12.3 2 8.5 2 5.4 4.4 3 7.5 3c1.7 0 3.4.8 4.5 2.1C13.1 3.8 14.8 3 16.5 3 19.6 3 22 5.4 22 8.5c0 3.8-3.4 6.9-8.6 11.5L12 21.3z'/></svg>") center / contain no-repeat;
}
.get small { display: block; font-size: var(--fs-caption); color: var(--text-muted); }

.price-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 24px; padding: 12px 0 8px; border-top: 1px solid var(--line-mid); border-bottom: 1px solid var(--line-mid);
}
.price-row > span:first-child { font-size: var(--fs-caption); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.price { font-size: var(--fs-title); line-height: 1.1; }
.price-note { margin-top: 8px; font-size: var(--fs-small); color: var(--text-muted); }
.price-note:empty { display: none; }
.review .label[for="email-input"] { margin-top: 24px; }
.pay-bar { margin-top: 24px; }
.pay { width: 100%; font-size: var(--fs-body); }
.pay-bar .action-note { margin: 0 0 8px; min-height: 0; }
.pay-bar .action-note:empty, .fix .action-note:empty, .recover .action-note:empty { display: none; }
.btn[aria-disabled="true"] { cursor: progress; }
.assure {
  list-style: none; margin: var(--sp-3) 0 0; padding: 0; text-align: center;
  font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5;
}
.trust { margin-top: 8px; font-size: var(--fs-caption); color: var(--text-muted); text-align: center; text-wrap: balance; }
.lock { display: inline-block; width: 10px; height: 12px; margin-right: 7px; vertical-align: -1px; }
.review-back { display: block; margin: 12px auto 0; }

.order-body { margin-top: 12px; color: var(--text-muted); }
.order[data-view="checking"] h3 { font-style: italic; color: var(--text-muted); font-size: var(--fs-title-sm); }
.order-bar { margin-top: var(--sp-5); }
.order-bar .btn { width: 100%; }
.order-note { margin-top: 12px; font-size: var(--fs-small); color: var(--text-muted); font-style: italic; }
.order-note:empty, .order-ref:empty { display: none; }
.order-ref { margin-top: 24px; font-size: var(--fs-caption); color: var(--text-muted); }
.order-ref .ref-code {
  display: inline-block; font: 500 var(--fs-caption)/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em; color: var(--text); user-select: all; word-spacing: .1em; overflow-wrap: anywhere;
}
.order-ref .ref-group { margin-left: .45em; }
.order + .done { margin-top: 32px; }
.allow { margin-top: 16px; font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }
.done .action-note:empty { display: none; }
.done .action-note { margin-top: 8px; text-align: left; }

.fix-lock { margin: 8px 0 24px; }
.fix-gap, .rec-gap { margin-top: 24px; }
.opt { font-size: var(--fs-caption); }
.fix .check { margin-top: 8px; }
.fix .lang { margin-top: 12px; }
.fix .lang legend { width: 100%; margin-bottom: 8px; }
#fix-left { margin-top: 16px; }
.fix .action-note, .recover .action-note { text-align: left; margin-top: 12px; }
.fix-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 12px; }
.fix-actions .btn { flex: 1 1 220px; }

.recover-lede { margin-top: 12px; color: var(--text-muted); }
.recover .label[for="rec-email-input"] { margin-top: 24px; }
.rec-btn { width: 100%; margin-top: 24px; }
.rec-help { margin-top: 16px; }
.rec-help a { color: var(--text); text-decoration-color: var(--line-strong); }

.order-more {
  margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start;
}
.order-more .btn-link { display: inline-flex; align-items: center; }
.order-list { list-style: none; margin: 0 0 8px; padding: 0; width: 100%; }
.order-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; text-align: left; text-decoration: none; }
.order-pick span { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.order-pick[aria-current="true"] span { text-decoration-color: var(--text); }
.order-pick small { display: inline-block; font-size: var(--fs-caption); color: var(--text-muted); }
.order-pick[aria-current="true"]::before {
  content: ""; width: 11px; height: 10px; flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'><path fill='%23a83e34' d='M12 21.3 10.6 20C5.4 15.4 2 12.3 2 8.5 2 5.4 4.4 3 7.5 3c1.7 0 3.4.8 4.5 2.1C13.1 3.8 14.8 3 16.5 3 19.6 3 22 5.4 22 8.5c0 3.8-3.4 6.9-8.6 11.5L12 21.3z'/></svg>") center / contain no-repeat;
}

.page-order .landing, .page-order .design { display: none; }
.page-order #mine-link[hidden] { display: inline-flex !important; }   /* shown by JS later; no header jump */
/* /order paints its studio once it knows which layout it needs (an order, or the recovery form),
   so the page never rearranges itself in front of the customer; the animation is the safety net */
:root.page-order:not(.order-ready) .studio { visibility: hidden; animation: i18n-reveal 0s 2.5s forwards; }
/* ...and if app.js never runs, a plain line says so instead of an empty poster */
.order-fallback { display: none; }
:root.page-order:not(.order-ready) .order-fallback {
  display: block; visibility: hidden; animation: i18n-reveal 0s 2.5s forwards;
  max-width: var(--max); margin: 0 auto; padding: var(--sp-5) var(--gutter) 0;
  font-size: var(--fs-body); color: var(--text);
}
.order-fallback [lang="es"], :root[lang="es"] .order-fallback [lang="en"] { display: none; }
:root[lang="es"] .order-fallback [lang="es"] { display: inline; }
.no-pay [data-pay] { display: none !important; }
.page-order .studio { border-top: 0; }
.is-review .guide, .page-order .guide { display: none; }
/* frozen preview (review, awaiting, pending): say what the labels on the map are */
.is-review .guide-frozen, .page-order.order-frozen .guide-frozen { display: block; }
.is-review .stage-bar .zoom, .is-review .stage-bar .adjust,
.page-order .stage-bar .zoom, .page-order .stage-bar .adjust { display: none; }
.is-review .stage-bar, .page-order .stage-bar { justify-content: center; }
.order-dim .sheet { opacity: .5; filter: grayscale(1); }
@media (min-width: 1000px) {
  .is-recover .studio { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .is-recover .stage { display: none; }
}

/* ---------- after the studio: offer + print ---------- */
.after {
  max-width: var(--max); margin: 0 auto; padding: var(--section) var(--gutter) 0;
}
.studio + .after { padding-top: max(var(--sp-5), calc(var(--section) - 72px)); }   /* studio pads 72px */
.after {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7) clamp(32px, 6vw, 112px);
  align-items: start;
}
.offer {
  background: var(--surface-sheet); border: 1px solid var(--line); border-radius: var(--r-crisp);
  padding: clamp(24px, 3.2vw, 44px);
}
.offer-list { margin-top: var(--sp-5); gap: var(--sp-4); }
.offer-list li { font-size: var(--fs-body); }
.offer-note {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line);
  color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5;
}
.print { padding-top: clamp(0px, 3.2vw, 44px); }
.print-list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-5); }
.print-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--sp-4); align-items: start; color: var(--text-muted); line-height: 1.6; }
.print-list .how-n { margin-top: 1px; }

/* ---------- FAQ ---------- */
.faq {
  max-width: var(--max); margin: 0 auto; padding: var(--section) var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--sp-6) clamp(32px, 6vw, 112px);
  align-items: start;
}
.faq h2 { position: sticky; top: var(--sp-6); max-width: 14ch; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  min-height: 64px; padding: var(--sp-3) 0; cursor: pointer; list-style: none;
  font-size: var(--fs-lede); line-height: 1.4;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px;
  transition: text-decoration-color var(--dur-fast);
}
.faq summary:focus-visible { outline-offset: 2px; }
.faq details p { padding: 0 var(--sp-7) var(--sp-5) 0; color: var(--text-muted); max-width: calc(48ch + var(--sp-7)); line-height: 1.65; }
.faq details[open] p { animation: faq-in var(--dur-slow) var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- final CTA ---------- */
.final {
  max-width: var(--max); margin: 0 auto; padding: var(--section) var(--gutter);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.final-heart { width: 22px; height: 20px; fill: var(--accent); margin-bottom: var(--sp-5); }
.final h2 { font-size: var(--fs-display-sm); line-height: 1.1; letter-spacing: -.01em; }
.final-note { margin-top: var(--sp-4); color: var(--text-muted); font-size: var(--fs-lede); }
.final-cta { margin-top: var(--sp-6); min-width: 220px; }

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--line); max-width: var(--max); margin: 0 auto;
  padding: var(--sp-6) var(--gutter) var(--sp-7); color: var(--text-muted); font-size: var(--fs-small); text-align: center;
  display: grid; gap: var(--sp-2);
}
.foot a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); }
.foot-small { font-size: var(--fs-caption); }
.page-order .foot-support { display: none; }

/* ---------- mobile sticky landing CTA (≤999px) ---------- */
.sticky-bar { display: none; }

/* ---------- dialogs ---------- */
dialog { border: 0; padding: 0; color: var(--text); background: var(--surface-sheet); }
dialog::backdrop { background: var(--scrim); }
dialog[open] { animation: dlg-in var(--dur-slow) var(--ease-out); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px); } }

.editor {
  width: min(760px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px);
  padding: 24px 24px 24px;
}
.editor-head h2 { font-size: var(--fs-title-sm); line-height: 1.25; }
.editor-panel { position: relative; margin: 16px auto 0; box-shadow: 0 0 0 1px var(--line); }
.editor-panel:has(.panel-map:focus-visible) { box-shadow: 0 0 0 2px var(--accent); }
.editor-foot { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.editor-foot .btn-link { margin-left: auto; }
.editor-foot .btn { min-width: 128px; }
.editor[open] { display: flex; flex-direction: column; }
.editor-stage { flex: 1; min-height: 0; display: grid; place-items: center; position: relative; }
/* Leaflet still on its way: the plaster placeholder and the heart stay, with one quiet line */
.map-loading {
  position: absolute; left: 50%; top: calc(50% + 36px); transform: translateX(-50%); z-index: 460;
  max-width: calc(100% - 32px); padding: 4px 12px; text-align: center;
  font-size: var(--fs-small); font-style: italic; color: var(--text-muted); pointer-events: none;
}
.editor-panel .panel-map.is-waiting { filter: none; }   /* the ivory plaster, not a grey square */

.lightbox {
  max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; inset: 0;
  background: transparent; overflow: hidden; display: none; place-items: center;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: var(--scrim-strong); }
.lightbox img { max-height: calc(100dvh - 48px); max-width: calc(100vw - 32px); width: auto; box-shadow: var(--shadow-print); }
.lightbox .close {
  position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  background: var(--surface-art);
}

.confirm { width: min(500px, calc(100vw - 32px)); padding: 32px; }
.confirm .btn { padding: 8px 24px; }
.confirm h2 { font-size: var(--fs-title-sm); line-height: 1.25; }
.confirm p { margin-top: 8px; color: var(--text-muted); }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 24px; }

/* ---------- responsive: ≤999px = the Shelf (FABLE-MOBILE.md) ---------- */
@media (max-width: 999px) {
  :root {
    /* JS sets these once per viewport (px); CSS fallbacks keep the page sane without it */
    --shelf-exp: clamp(300px, 50svh, 460px);
    --pw: min(calc(100vw - 32px), calc(var(--shelf-exp) * .746667));
    --ph: calc(var(--pw) / .746667);
    --shelf-cmp: clamp(176px, 27svh, 240px);
    --k: .52;
    --vvh: 100dvh;
    --bar-h: calc(76px + env(safe-area-inset-bottom));
    --bar-w: calc(560px - 2 * var(--gutter));
  }
  html {
    scroll-padding-top: calc(var(--shelf-cmp) + 24px);
    scroll-padding-bottom: var(--bar-h);
    overflow-anchor: none;               /* the shelf resizes on purpose; never "correct" it */
  }
  html:has(dialog[open]) { overflow: hidden; }
  .only-wide { display: none; }
  .only-narrow { display: inline; }

  /* header: brand · (My artwork) · Design yours · EN */
  .top { min-height: 56px; padding-top: 8px; gap: var(--sp-4); }

  /* landing: eyebrow → h1 → artwork → CTA + note → lede → how */
  .intro { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 12px; padding-bottom: var(--sp-7); }
  .eyebrow { order: 0; margin-bottom: var(--sp-2); }
  .intro h1 { order: 1; max-width: 18ch; }
  .intro-art { order: 2; width: auto; align-self: center; margin-top: 24px; }
  .intro-art .art-btn { width: fit-content; max-width: 100%; margin: 0 auto; }
  .intro-art .art-btn img { height: 40svh; width: auto; max-width: 100%; }
  .intro-art figcaption { margin-top: var(--sp-3); font-size: var(--fs-caption); }
  .cta { order: 3; margin-top: var(--sp-5); }
  .lede { order: 4; margin-top: var(--sp-5); }
  .how { order: 5; }

  .facts-list { grid-auto-flow: row; grid-template-columns: 1fr; }
  .facts-list li { padding: var(--sp-4) 0; text-align: left; }
  .facts-list li + li { border-left: 0; border-top: 1px solid var(--line); }

  /* gallery: one horizontal scroll-snap row; the next card peeks */
  .gallery { padding: var(--section) 0 0; }
  .gallery h2, .gallery-note { padding: 0 var(--gutter); }
  .gallery-list {
    flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    padding: 4px var(--gutter) 32px; margin-top: var(--sp-5); gap: var(--sp-4); scrollbar-width: none;
  }
  .gallery-list::-webkit-scrollbar { display: none; }
  .gallery-list li { width: 150px; flex: none; scroll-snap-align: start; }
  .gallery figcaption { font-size: var(--fs-caption); margin-top: 8px; }
  .gallery-note { margin-top: var(--sp-2); }

  .gift { grid-template-columns: 1fr; }
  .after { grid-template-columns: 1fr; }
  .print { padding-top: 0; }
  .faq { grid-template-columns: 1fr; }
  .faq h2 { position: static; max-width: 20ch; }
  .final { padding-bottom: calc(var(--section) + 24px); }

  /* sticky landing CTA: after the hero, before and after the studio */
  .sticky-bar {
    display: flex; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface-bar); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transform: translateY(110%); visibility: hidden;
    transition: transform var(--dur-exit) var(--ease-in), visibility 0s var(--dur-exit);
  }
  .sticky-bar .btn { width: 100%; max-width: var(--bar-w); }
  .show-sticky .sticky-bar { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease-out); }
  .show-sticky .foot { padding-bottom: calc(var(--sp-7) + var(--bar-h)); }

  /* studio: artwork on top (sticky shelf), form below */
  .studio {
    display: block; min-height: 0; position: relative;   /* anchors the shelf sentinel */
    padding: 0 0 var(--section);        /* the Create bar hides once the studio is behind; no bar-sized gap */
  }
  .studio + .after { padding-top: 0; }
  .page-order .studio { padding-bottom: calc(var(--bar-h) + 24px); min-height: 100svh; }   /* the download bar stays; the footer stays below while the panel fills in */
  .stage {
    position: sticky; top: 0; z-index: var(--z-shelf); background: var(--bg);
    padding: 8px 16px 8px;
    display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .poster-frame {
    width: var(--pw); height: var(--ph); margin: 0;
    /* the frame and the scaled sheet shrink together, so the form rises with the shelf (deliberate) */
    transition: width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out);
  }
  .stage .sheet {
    width: var(--pw); transform-origin: 0 0;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .stage-bar {
    width: var(--pw); margin: 0; min-height: 44px; gap: 12px; flex-wrap: nowrap;
  }
  .stage-bar .zoom { display: none; }
  .place { text-align: left; font-size: var(--fs-small); }
  .adjust { font-size: var(--fs-small); }
  .guide { display: none; }
  .is-review .guide-frozen, .page-order.order-frozen .guide-frozen { display: block; width: var(--pw); margin: 2px 0 4px; }
  .attrib {
    width: var(--pw); margin: 0; text-align: right; font-size: 12px; line-height: 1.3;
  }
  .side { width: 100%; max-width: 560px; margin: 0 auto; padding: var(--sp-5) var(--gutter) 0; }
  .step legend { font-size: var(--fs-title-sm); }
  .search-head { margin-bottom: 4px; }
  .country-pick { min-height: 44px; }
  .country-pick select { inset: 0; width: 100%; height: 100%; }
  #place-list { max-height: var(--list-max, 320px); }

  /* compact shelf while the form scrolls under it (portrait only) */
  .framing-line { font-size: var(--fs-caption); color: var(--text-muted); }
  @media (min-height: 501px), (orientation: portrait) {
    .studio-compact .stage {
      grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
      column-gap: 12px; justify-items: stretch; align-items: center;
      padding: 8px 16px; border-bottom: 1px solid var(--line);
    }
    .studio-compact .poster-frame {
      grid-row: 1 / span 2; width: calc(var(--pw) * var(--k)); height: var(--shelf-cmp);
    }
    .studio-compact .stage .sheet { transform: scale(var(--k)); }
    .studio-compact .stage-bar {
      width: auto; grid-column: 2; flex-direction: column; align-items: flex-start; gap: 0;
      animation: shelf-in .3s var(--ease-out) .06s both;
    }
    .studio-compact .place {
      font-size: var(--fs-small); white-space: normal; line-height: 1.35;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
      margin-bottom: 2px;
    }
    .studio-compact .adjust { min-height: 44px; }
    .studio-compact .framing-line { display: block; }
    .studio-compact .attrib { width: auto; grid-column: 2; align-self: end; font-size: 0; }
    .studio-compact .attrib a { font-size: 12px; }
    /* keyboard up on a short screen: the shelf steps aside */
    .is-typing.vv-short:not(.is-review):not(.page-order) .stage { transform: translateY(calc(-100% - 48px)); }   /* + the print shadow */
  }
  @keyframes shelf-in { from { opacity: 0; } }
  .no-anim .poster-frame, .no-anim .stage .sheet { transition: none; }

  /* bottom bar: Create, then (result) Download print file */
  .action, .dl-bar, .pay-bar, .order-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface-bar); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: flex; flex-direction: column; align-items: center;
  }
  .action {
    transform: translateY(110%); transition: transform var(--dur-exit) var(--ease-in), visibility 0s var(--dur-exit);
    visibility: hidden;
  }
  .in-studio .action { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease-out); }
  .is-typing .action, .is-busy .action { transform: translateY(110%); visibility: hidden; }
  .action > *, .dl-bar > *, .pay-bar > *, .order-bar > * { width: 100%; max-width: var(--bar-w); }
  .is-typing .pay-bar { transform: translateY(110%); visibility: hidden; }
  .pay-bar .action-note { order: -1; margin: 0 0 8px; text-align: center; }
  .create, .dl-bar .btn, .pay, .order-bar .btn { min-height: 52px; white-space: normal; text-wrap: balance; text-align: center; }
  .action-note { order: -1; min-height: 0; margin: 0 0 8px; }
  .action-note:empty { display: none; }
  #dl-print { margin-top: 0; }
  .done .dl-share, #dl-share { margin-top: 24px; }
  /* the bar has its own hairline: the footer's would double it right above */
  .page-order .foot, .in-studio .foot { border-top-color: transparent; }

  /* progress: nothing on screen asks for input */
  .is-busy .design { opacity: .55; }
  .veil { padding: 6%; }
  .veil-track { margin-top: 16px; }
  .veil-note { margin-top: 12px; font-size: var(--fs-caption); }

  /* result: poster expanded and static; kicker, title, one-line lede */
  .is-result .stage, .is-review .stage, .page-order .stage { position: static; }
  .is-recover .stage { display: none; }      /* phones: the form is the whole point here */
  .is-recover .side { padding-top: 8px; }
  html:has(body.is-review), html:has(body.page-order) { scroll-padding-top: 16px; }
  .review h3, .order h3, .recover h3, .fix h3 { font-size: var(--fs-title); }
  .kicker { margin-bottom: 8px; }
  .summary { margin-top: 16px; }
  .pay-bar, .order-bar { margin: 0; }
  .done { padding-top: 0; }
  .done-kicker { margin-bottom: 8px; }
  .done h3 { font-size: var(--fs-title); }
  .done h3 + .done-lede { margin-top: 8px; }

  /* placement editor: a full-screen sheet, map full-bleed, crop frame drawn on top */
  .editor, .editor[open] {
    inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
    background: var(--bg);
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .editor:not([open]) { display: none; }
  .editor-head {
    min-height: 56px; padding: max(10px, env(safe-area-inset-top)) 16px 8px;
    border-bottom: 1px solid var(--line);
  }
  .editor-head h2 { font-size: var(--fs-title-sm); line-height: 1.3; }
  .editor-head .hint { margin-top: 2px; font-size: var(--fs-caption); line-height: 1.4; }
  .editor-stage { position: relative; display: block; overflow: hidden; }
  .editor-panel { position: absolute; inset: 0; margin: 0; box-shadow: none; }
  .editor-panel .panel-map { touch-action: none; }
  .editor-frame {
    display: block; position: absolute; left: 50%; top: 50%; z-index: 450; pointer-events: none;
    width: var(--fw, 300px); height: var(--fh, 324px); transform: translate(-50%, -50%);
    box-shadow: 0 0 0 100vmax var(--mask-editor);
    outline: 1px solid var(--line-frame);
  }
  .editor-foot {
    min-height: 72px; margin: 0; gap: 8px;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: var(--bg);
  }
  .editor-foot .btn { min-width: 128px; }
}
@media (max-width: 560px) {
  :root {
    --fs-caption: .75rem; --fs-small: .875rem; --fs-body: 1rem; --fs-lede: 1.0625rem;
    --fs-title-sm: 1.25rem; --fs-title: 1.5rem; --fs-display: 2.125rem;
    --fs-script-names: 1.375rem; --fs-script-brand: 2rem;
  }
  .sum-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; padding: 8px 0; }
  .sum-row dt { grid-column: 1; letter-spacing: .12em; text-transform: uppercase; }
  .sum-row dd { grid-column: 1; }
  .sum-row .sum-edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .lede { line-height: 1.6; }
  .how { grid-template-columns: 1fr; gap: 8px; margin-top: var(--sp-6); }
  .how li { flex-direction: row; align-items: center; }
  .begin { width: 100%; }
  .cta { align-items: stretch; }
  .cta-note { text-align: center; min-height: 2.9em; }
  .chips { display: grid; grid-template-columns: 1fr 1fr; }
  .chip span { width: 100%; justify-content: center; text-align: center; line-height: 1.25; padding: 4px 8px; }
  .faq summary { font-size: var(--fs-body); min-height: 56px; }
  .faq details p { padding-right: 0; }
  .confirm { padding: 24px 24px; }
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions .btn { width: 100%; }
}
/* narrow phones: the header keeps one line (brand · My artwork · EN) */
@media (max-width: 420px) {
  .top { gap: var(--sp-3); }
  .has-mine .studio-link { display: none; }
}
@media (max-width: 360px) {
  :root { --fs-script-brand: 1.75rem; }
  .top-link { font-size: var(--fs-small); }
}
/* short phones (360×740): keep eyebrow, headline, artwork, CTA and price note above the fold */
@media (max-width: 560px) and (max-height: 780px) {
  .intro { padding-top: 4px; }
  .intro h1 { font-size: var(--fs-display-sm); }
  .intro-art { margin-top: 12px; }
  .intro-art .art-btn img { height: 34svh; }
  .cta { margin-top: var(--sp-4); }
}
/* landscape phones: the artwork beside the copy, the CTA in the first screen; the shelf never compacts */
@media (max-width: 999px) and (max-height: 500px) and (orientation: landscape) {
  .intro {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: repeat(4, auto) 1fr;
    column-gap: var(--sp-6); align-items: start; padding-top: var(--sp-2);
  }
  .eyebrow { grid-row: 1; } .intro h1 { grid-row: 2; } .cta { grid-row: 3; } .lede { grid-row: 4; } .how { grid-row: 5; }
  .intro > .intro-art { grid-column: 2; grid-row: 1 / -1; align-self: start; margin-top: 0; }
  .intro-art .art-btn img { height: 70svh; }
  .stage { position: static; }
  html { scroll-padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  /* keep the two meaningful fades, without movement or blur */
  .result img { filter: none; transform: none; transition: opacity 200ms linear !important; }
  .veil { animation: veil-in 200ms linear !important; }
  .art-btn img { transform: none !important; }
}
@media (max-width: 420px) { .page-order .studio-link { display: none; } }