/* MIRA17 — public entry page (mira17.com), site v5.

   Layout: see the "v5 layout" section below (artworks shown as delivered, letterboxed with
   their own edge colours when the screen shape differs; client entry on the free stone).
   */

@font-face {
  font-family: "MIRA17 Serif";
  src: url("fonts/mira17-serif.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: block;
}

:root {
  --ink: #1a1409;
  --cream: #f6efe2;
  --cream-soft: rgba(246, 239, 226, 0.72);
  --gold: #d4af6a;
  --gold-hi: #e2c07f;
  --error: #ffc9b5;
  --bg: #14100c;
  --serif: "MIRA17 Serif", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.gate-page { overflow-x: hidden; }

.sr-only,
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ================================================================ v5 layout (fill fix, 2026-11-02)
   The artwork ALWAYS fills the page edge to edge (cover); nothing is letterboxed and no background shows.
   It is cropped instead: the painted logo and texts (top-left) always stay whole; the right edge, the empty wall
   above the logo and the bottom stone are cropped first. All content lies on the stone countertop. When a screen
   is too short to hold the painted texts AND the content on the stone at the same time, the page simply becomes
   taller than the screen (still all artwork) and scrolls a little.
   Desktop artwork 1536 x 1024 (screens 6:5 and wider): painted texts from native y 100 / x 120; laptop to x 1465,
   its base ends at y 765 above the free stone (x 960-1495) where the content sits, bottom-right.
   Phone artwork 941 x 1672 (narrower screens): painted texts from native y 150 / x 70; laptop base ends at y 1175;
   below it the stone holds the content, full width.
   Screen position of an artwork pixel: x = --ox + --k * x_native, y = --oy + --k * y_native (page coordinates). */

.stage {
  position: relative;
  container-type: inline-size;
  background: var(--bg);
}

.scene {
  position: relative;
  overflow: hidden;
  height: var(--S);
  --cw: 100vw;
  --ch: 100vh;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --st: max(8px, calc(var(--safe-t) + 4px));
  --pad-b: 10px;

  /* ---- desktop artwork ---- */
  /* type scale: follows the artwork, but also the window height, so the content fits typical browser windows */
  --kt: min(var(--k), calc(var(--ch) / 1085));
  --fs-head: clamp(22px, calc(var(--kt) * 34), 46px);
  --fs-input: clamp(16px, calc(var(--kt) * 17), 22px);
  --row-h: clamp(40px, calc(var(--kt) * 46), 56px);
  --fs-btn: clamp(15px, calc(var(--kt) * 15.5), 19px);
  --fs-status: clamp(13px, calc(var(--kt) * 14), 17px);
  --fs-ask: clamp(15px, calc(var(--kt) * 16), 20px);
  --fs-foot: clamp(12px, calc(var(--kt) * 13), 15px);
  --gap: max(8px, calc(var(--kt) * 10));
  /* scale: cover the width; cover the height with at most the empty wall above the logo cropped; and enough
     stone below the laptop for the smallest version of the content (170px) */
  --k: max(calc(var(--cw) / 1536), calc((var(--ch) - var(--st)) / 924), calc((170px + var(--safe-b)) / 249));
  --A: calc(var(--k) * 1536);
  --H: calc(var(--k) * 1024);
  /* crop the right edge first; shift left only as far as needed to keep the laptop whole, never into the texts */
  --ox: min(0px, max(calc(var(--cw) - var(--A)), max(calc(8px - var(--k) * 115), min(0px, calc(var(--cw) - 8px - var(--k) * 1470)))));
  --oy: min(0px, calc(var(--st) - var(--k) * 100));
  /* content height: heading, form (one row on wide stone, two rows on narrower), last line */
  --form-h: calc(var(--row-h) + clamp(0px, calc((1.42px - var(--k)) * 100000), calc(var(--row-h) + var(--gap))));
  /* on narrower stone the last line splits in two (feedback link, then footer) */
  --meta-extra: clamp(0px, calc((0.75px - var(--k)) * 100000), calc(var(--fs-foot) * 1.4 + 6px));
  --content-h: calc(var(--fs-head) * 1.1 + var(--gap) * 3 + var(--form-h) + var(--fs-ask) * 1.4 + var(--meta-extra));
  /* page height: the screen, or taller when the content would otherwise reach the laptop */
  --S: max(var(--ch), calc(var(--oy) + var(--k) * 775 + var(--content-h) + var(--safe-b)));
  --zl: max(var(--gut-l), calc(var(--ox) + var(--k) * 960));
  --zr: min(calc(var(--cw) - var(--gut-r)), calc(var(--ox) + var(--k) * 1495));

  --ink: #17130f;
  --line: rgba(23, 19, 15, 0.82);
  --error: #8a1c0a;
}

@supports (height: 100dvh) {
  .scene { --ch: 100dvh; }
}

@supports (width: 1cqw) {
  .scene { --cw: 100cqw; }
}

/* ---- phones held sideways and other short wide screens: the content spans the stone at the bottom (it may lie
   over the books and the phone, never the laptop) and the page scrolls a little ---- */
@media (min-aspect-ratio: 6/5) and (max-height: 540px) {
  .scene {
    --fs-head: 22px;
    --row-h: 40px;
    --fs-input: 16px;
    --fs-btn: 14px;
    --fs-ask: 15px;
    --fs-foot: 12px;
    --gap: 6px;
    --content-h: calc(var(--fs-head) * 1.1 + var(--gap) * 3 + var(--row-h) * 2 + var(--gap) + var(--fs-ask) * 1.4 + 14px);
    --k: max(calc(var(--cw) / 1536), calc((var(--ch) - var(--st)) / 924), calc((var(--content-h) + var(--safe-b)) / 249));
    --S: max(var(--ch), calc(var(--oy) + var(--k) * 775 + var(--content-h) + var(--safe-b)));
    --zl: var(--gut-l);
    --zr: calc(var(--cw) - var(--gut-r));
  }
}

/* ---- phone artwork (screens narrower than 6:5) ---- */
@media (max-aspect-ratio: 6/5) {
  .scene {
    --row-h: 44px;
    --fs-head: 26px;
    --fs-input: 16px;
    --fs-btn: 15px;
    --fs-ask: 16px;
    --fs-status: 13px;
    --fs-foot: 13px;
    --gap: 8px;
    /* heading, link, email, button, feedback line, footer line */
    --content-h: calc(var(--fs-head) * 1.1 + var(--row-h) * 3 + var(--gap) * 5 + var(--fs-ask) * 1.4 + var(--fs-foot) * 1.4 + var(--pad-b));
    --k: max(calc(var(--cw) / 941), calc((var(--ch) - var(--st)) / 1522), calc((var(--content-h) + var(--safe-b)) / 490));
    --A: calc(var(--k) * 941);
    --H: calc(var(--k) * 1672);
    /* left edge kept (painted texts start at x 70); the right side is cropped */
    --ox: 0px;
    --oy: min(0px, calc(var(--st) - var(--k) * 150));
    --S: max(var(--ch), calc(var(--oy) + var(--k) * 1182 + var(--content-h) + var(--safe-b)));
    --zl: var(--gut-l);
    --zr: calc(var(--cw) - var(--gut-r));
  }
}

/* short phones (also any phone in Safari with its toolbars showing): a more compact form, so that everything
   fits on the stone below the laptop without scrolling */
@media (max-aspect-ratio: 6/5) and (max-height: 780px) {
  .scene {
    --row-h: 40px;
    --fs-head: 22px;
    --fs-btn: 14px;
    --fs-ask: 15px;
    --fs-foot: 12px;
    --gap: 5px;
    --pad-b: 4px;
  }
}

/* ---------------------------------------------------------------- artwork */

.art {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  width: var(--A);
  height: var(--H);
}

.art picture,
.art img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- client entry */

.block {
  position: absolute;
  z-index: 2;
  left: var(--zl);
  bottom: calc(var(--safe-b) + var(--pad-b));
  width: calc(var(--zr) - var(--zl));
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  color: var(--ink);
  container-type: inline-size;
  text-shadow: 0 0 10px rgba(255, 246, 234, 0.55);
}

.headline {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "opsz" 48;
  font-size: var(--fs-head);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.gate {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--gap);
  margin: 0;
}

/* one row (link | email | button) when the stone is wide enough, otherwise link above, email + button below */
.row { display: flex; flex: 1 1 100%; gap: var(--gap); }
.field-url { flex: 1 1 100%; }
@container (min-width: 760px) {
  /* one-row form: the thank-you uses the same height (two lines of smaller text at most) */
  .block .done { min-height: var(--row-h); font-size: var(--fs-ask); line-height: 1.3; }
  .gate { flex-wrap: nowrap; }
  .row { flex: 1.15 1 0; }
  .field-url { flex: 1.2 1 0; }
}

.field {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: var(--row-h);
  display: flex;
  align-items: center;
}

.field-icon {
  position: absolute;
  left: calc(var(--fs-input) * 0.65);
  width: calc(var(--fs-input) * 0.9);
  height: calc(var(--fs-input) * 0.9);
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* thin, high-contrast lines; a faint light wash only so letters stay readable over the stone texture */
.field-input {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 calc(var(--fs-input) * 0.6) 0 calc(var(--fs-input) * 2);
  border: 1.5px solid var(--line);
  border-radius: 3px;
  background: rgba(255, 249, 241, 0.62);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "opsz" 20;
  font-size: var(--fs-input);
  line-height: 1.2;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
}

.field-input::placeholder { color: #5b4d41; font-weight: 400; opacity: 1; }
.field-input:focus { outline: none; }
.field:focus-within .field-input { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.field-input[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  transition: background-color 600000s 0s;
}
.field-input:disabled { opacity: 0.7; }

.go {
  flex: 0 0 auto;
  height: var(--row-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding: 0 1.3em;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: rgba(255, 249, 241, 0.62);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.go:hover:not(:disabled) { background: var(--ink); color: #fbf6ee; }
.go:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.go:disabled { cursor: progress; opacity: 0.75; }
.go-arrow { font-size: 1.05em; line-height: 1; }

/* last line: the status message (or, when there is none, the footer) on the left, the feedback link right */
.meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  min-height: calc(var(--fs-ask) * 1.4);
}

.status, .foot { grid-column: 1; grid-row: 1; }
.ask { grid-column: 2; grid-row: 1; }

.status {
  min-width: 0;
  margin: 0;
  font-size: var(--fs-status);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.meta:has(.status:not(:empty)) .foot { visibility: hidden; }
.status.is-error { color: var(--error); }

.ask {
  position: relative;
  flex: none;
  margin: 0 0 0 auto;
  padding: 0 0 0.1em;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "opsz" 20;
  font-size: var(--fs-ask);
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ask::after { content: ""; position: absolute; inset: -12px -8px; }
.ask:hover { color: #000; border-bottom-width: 2px; }
.ask:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

.done {
  margin: 0;
  /* the thank-you takes the form's place without moving anything (two rows; one row on wide stone) */
  min-height: calc(var(--row-h) * 2 + var(--gap));
  display: flex;
  align-items: center;
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "opsz" 20;
  font-size: var(--fs-input);
  line-height: 1.35;
  color: var(--ink);
  outline: none;
}

/* ---------------------------------------------------------------- footer (inside the last line) */

.foot {
  display: flex;
  align-items: center;
  gap: 1.4em;
  min-width: 0;
  font-size: var(--fs-foot);
  line-height: 1.3;
  color: var(--ink);
  text-shadow: 0 0 5px rgba(255, 246, 234, 0.95), 0 0 12px rgba(255, 246, 234, 0.8);
  white-space: nowrap;
}

.foot-links { display: flex; align-items: center; gap: 1.2em; }

.foot-link {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.foot-link::after { content: ""; position: absolute; inset: -12px -6px; }
.foot-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.foot-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

@container (max-width: 399px) {
  .meta { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .ask { grid-column: 1; grid-row: 1; justify-self: end; }
  .status, .foot { grid-row: 2; justify-self: end; }
}

/* a soft light veil behind the content where it lies over darker parts of the picture (phones, short screens) */
@media (max-aspect-ratio: 6/5), (max-height: 540px), (max-width: 1100px) {
  .block::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -12px -10px -10px;
    border-radius: 14px;
    background: rgba(247, 238, 226, 0.6);
    box-shadow: 0 0 22px 14px rgba(247, 238, 226, 0.6);
    pointer-events: none;
  }
}

/* large screens: a faint glow behind the small footer line keeps it readable on the brighter/darker stone */
@media (min-width: 1101px) and (min-aspect-ratio: 6/5) and (min-height: 541px) {
  .foot { border-radius: 6px; background: rgba(250, 243, 234, 0.35); box-shadow: 0 0 10px 6px rgba(250, 243, 234, 0.35); }
}

/* ---------------------------------------------------------------- phone layout */

@media (max-aspect-ratio: 6/5) {
  .block { container-type: normal; }
  .gate { flex-direction: column; flex-wrap: nowrap; }
  .row { flex-direction: column; flex: none; }
  .field-url, .row .field { flex: none; }
  .go { width: 100%; }
  /* feedback link on its own line (right); below it the footer, or the status message in its place */
  .meta { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .ask { grid-column: 1; grid-row: 1; justify-self: end; }
  .status, .foot { grid-row: 2; }
  .foot { justify-content: space-between; }
  .done { min-height: calc(var(--row-h) * 3 + var(--gap) * 2); }
}

@media (max-width: 380px) {
  .foot { gap: 10px; }
  .foot-links { gap: 0.9em; }
}


/* ---------------------------------------------------------------- feedback sheet */

.sheet {
  width: min(440px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto auto max(16px, env(safe-area-inset-bottom, 0px));
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 -10px 40px rgba(10, 7, 4, 0.45);
  color-scheme: light;
  overflow: auto;
}

.sheet::backdrop {
  background: rgba(10, 8, 6, 0.45);
}

.sheet-form {
  position: relative;
  padding: 20px 20px 18px;
  font-family: var(--sans);
}

.sheet-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(33, 26, 16, 0.08);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.sheet-close:hover { background: rgba(33, 26, 16, 0.14); }
.sheet-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.sheet-title {
  margin: 2px 44px 10px 0;
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "opsz" 30;
  font-size: 21px;
  line-height: 1.25;
}

.sheet-label {
  display: block;
  margin: 12px 0 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4a3f2e;
}

.sheet-hint { text-transform: none; letter-spacing: 0; font-weight: 500; }

.sheet-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(33, 26, 16, 0.28);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  resize: vertical;
}

textarea.sheet-input { min-height: 96px; }

.sheet-input:focus-visible { outline: 2px solid #9b7a3a; outline-offset: 1px; border-color: transparent; }
.sheet-input[aria-invalid="true"] { border-color: #9c3b22; box-shadow: 0 0 0 1px #9c3b22; }

.sheet-field-error {
  margin: 4px 0 0;
  min-height: 1.2em;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #8f2f16;
}

.sheet-field-error:empty { min-height: 0; }

.sheet-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.sheet-send {
  flex: none;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  background: var(--bg);
  color: var(--cream);
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.sheet-send:hover:not(:disabled) { background: #2a2118; }
.sheet-send:focus-visible { outline: 2px solid #9b7a3a; outline-offset: 2px; }
.sheet-send:disabled { opacity: 0.65; cursor: progress; }

.sheet-status {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.sheet-status.is-error { color: #8f2f16; }

@media (max-aspect-ratio: 76/100), (max-width: 520px) {
  .sheet {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: 18px 18px 0 0;
  }
  .sheet-form { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}

.noscript {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  padding: 10px 16px;
  background: var(--cream);
  color: var(--ink);
  font-size: 14px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .go { transition: none; }
}

@media (forced-colors: active) {
  .field-input { border-bottom: 1px solid CanvasText; }
  .go { border: 1px solid ButtonText; }
}

/* ---------------------------------------------------------------- legal pages */

.doc {
  min-height: 100%;
  background: var(--bg);
  color: #ece3d1;
  font-family: var(--serif);
  font-variation-settings: "opsz" 20;
}

.doc-header { padding: max(16px, env(safe-area-inset-top, 0px)) 16px 0; max-width: 712px; margin: 0 auto; }
.doc-header a { display: inline-block; padding: 12px 0; }
.doc-header img { width: clamp(150px, 30vw, 220px); height: auto; display: block; }

.doc-main {
  max-width: 712px;
  margin: 0 auto;
  padding: 8px 16px 56px;
  font-size: 18px;
  line-height: 1.65;
}

.doc-main h1 {
  font-weight: 500;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 6vw, 44px);
  line-height: 1.15;
  color: #fff;
  margin: 20px 0 6px;
}

.doc-main h2 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 40px 0 8px;
}

.doc-main .updated { font-family: var(--sans); font-size: 14px; color: #b9ad97; margin: 0 0 32px; }
.doc-main a { color: var(--gold); text-underline-offset: 0.15em; }
.doc-main ul { padding-left: 1.2em; }
.doc-main li + li { margin-top: 6px; }

.doc-footer {
  max-width: 712px;
  margin: 0 auto;
  padding: 22px 16px calc(36px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(212, 175, 106, 0.3);
  font-family: var(--sans);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: #b9ad97;
}

.doc-footer a { color: #ece3d1; }

.draft-note {
  font-family: var(--sans);
  font-size: 14px;
  background: #5a2a17;
  color: #fbe9dd;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 0 0 24px;
}

.todo { background: rgba(212, 175, 106, 0.28); padding: 0 4px; border-radius: 3px; }

.doc-main img { max-width: 100%; height: auto; border-radius: 6px; }

/* Keep the existing link/email row, with the optional request below it. */
.block .gate { flex-wrap: wrap; }
.request-message { flex: 0 0 100%; min-width: 0; }
.request-message .sheet-input { min-height: 80px; background: rgba(255,255,255,.85); }
.request-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.4; }

/* Let the form's actual height (including wrapping and textarea resizing) grow
   the page below the laptop rather than estimating an extra content height. */
.scene {
  height: auto;
  min-height: var(--S);
  display: flex;
  flex-direction: column;
  padding-top: max(0px, calc(var(--oy) + var(--k) * 775));
  padding-bottom: calc(var(--safe-b) + var(--pad-b));
}
.scene .block {
  position: relative;
  left: auto;
  bottom: auto;
  margin-left: var(--zl);
  margin-top: auto;
  flex: none;
}
@media (max-aspect-ratio: 6/5) {
  /* Phone artwork: the form block starts below the painted phone and its shadow (native y 1400 of 1672, measured on
     the delivered art; the phone body ends at about y 1360). Same landmark scale as the rest: y = --oy + --k * y_native.
     The page then grows with the form (vertical scrolling is expected); the artwork keeps its scale and crop. */
  .scene {
    /* landmark + clear spacing in the form's own gap unit (the block's veil reaches 12px above the headline) */
    --phone-bottom: calc(var(--oy) + var(--k) * 1400 + var(--gap) * 4);
    --S: max(var(--ch), calc(var(--phone-bottom) + var(--content-h) + var(--safe-b)));
    padding-top: max(0px, var(--phone-bottom));
    /* below the artwork's last row the page continues in the stone colour of its lower edge */
    background: #d2aa8c;
  }
  .art {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent);
  }
  .request-message { flex: none; }
}