/* Christmas unwrap — night blues + kraft/tape accents */

@font-face {
  font-family: "Papermark";
  src: url("/fonts/Papermark.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sky: #0b1a2b;
  --sky-deep: #07101c;
  --ice: #a8c0d4;
  --moon: #c9d7e4;
  --kraft: #c49a70;
  --kraft-note: #d8b588;
  --ink: #0a0704;
  --tape: #d9c27a;
  --marker: #7a1f14;
  --font: "Papermark", "Segoe Print", "Comic Sans MS", cursive;
  /* Flat system-theme stage behind the closed box (no kraft wash / night sky). */
  --xmas-bg: #ffffff;
  --xmas-fg: #0a0704;
  --xmas-hint-bg: color-mix(in srgb, var(--tape) 88%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --xmas-bg: #000000;
    --xmas-fg: #e8e4dc;
    --xmas-hint-bg: color-mix(in srgb, var(--tape) 78%, #1a140c);
  }
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  height: 100%;
  width: 100%;
  background: var(--xmas-bg);
  color: var(--xmas-fg);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* Pin the experience: trying to scroll must not lose the box. */
body {
  position: fixed;
  inset: 0;
}

.skip {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 40;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  background: var(--kraft);
  color: var(--ink);
  text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}

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

.skip:not(:focus):not(:focus-visible) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  min-height: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
}

.stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  background: var(--xmas-bg);
  touch-action: none;
  user-select: none;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Christmas Day wrap keeps the night room; everything else stays flat theme. */
.stage[data-scene="wrap"] {
  background:
    radial-gradient(ellipse at 50% 18%, #16324f 0%, transparent 55%),
    var(--sky-deep);
  color: var(--moon);
}

.stage__canvas {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: opacity 0.85s ease;
}

.stage[data-scene="box"] .stage__canvas {
  cursor: pointer;
}

/* Once we are inside the box, the DOM interior takes over and the canvas fades. */
.stage[data-scene="interior"] .stage__canvas {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s cubic-bezier(0.4, 0.05, 0.2, 1);
}

/* ASCII tide easter egg (secret only — not a signup gate).
   Tap the canvas or press Escape to return to the open-box interior. */
.stage[data-scene="wave"] .stage__canvas {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  image-rendering: auto;
  background: #000;
  position: relative;
  z-index: 30;
}

.stage[data-scene="wave"] .interior {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.stage[data-scene="wave"] .chrome .hint {
  z-index: 35;
  pointer-events: none;
}

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

.chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}

.hint {
  position: absolute;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  padding: 0.35rem 0.75rem;
  max-width: min(92vw, 28rem);
  text-align: center;
  font-size: clamp(0.85rem, 2.6vw, 1.05rem);
  color: var(--ink);
  background: var(--xmas-hint-bg);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

/* ---- Scene 1: the gift tag on the wrapped present ------------------------
   A die-cut kraft tag lying on the paper, lettered in marker, hung on white
   string that is taped down. Everything is sized in em off .tag's font-size,
   so the whole tag scales as one object. */

.tag {
  position: absolute;
  left: 50%;
  top: 41%;
  font-size: clamp(1.05rem, 5.3vw, 2rem);
  width: 10.9em;
  height: 6.2em;
  margin: -3.1em 0 0 -4.3em; /* a little right of centre: the string and its tape hang off the left */
  color: var(--ink);
  transform: rotate(-5deg);
  transform-origin: 8% 50%;
}

/* Shadow lives on a wrapper: the face below is clipped and masked, and a
   filter on the same element would be cut off with it. */
.tag__card {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 4, 12, 0.6)) drop-shadow(0.12em 0.34em 0.4em rgba(0, 4, 12, 0.5));
}

.tag__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.05em;
  padding: 0.35em 0.6em 0.45em 2.15em;
  background:
    linear-gradient(102deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 42%, rgba(70, 38, 8, 0.12) 100%),
    repeating-linear-gradient(7deg, rgba(92, 56, 20, 0.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(96deg, rgba(255, 242, 214, 0.08) 0 1px, transparent 1px 5px),
    var(--kraft-note);
  box-shadow:
    inset 0 0 0 1px rgba(92, 56, 20, 0.22),
    inset 0 -0.12em 0.2em rgba(92, 56, 20, 0.18);
  /* clipped corners at the string end + a punched hole you can see through */
  clip-path: polygon(1.05em 0, 100% 0, 100% 100%, 1.05em 100%, 0 73%, 0 27%);
  -webkit-mask-image: radial-gradient(circle at 0.95em 50%, transparent 0.25em, #000 0.29em);
  mask-image: radial-gradient(circle at 0.95em 50%, transparent 0.25em, #000 0.29em);
}

/* reinforcement ring around the hole */
.tag__face::before {
  content: "";
  position: absolute;
  left: 0.95em;
  top: 50%;
  width: 1.16em;
  height: 1.16em;
  margin: -0.58em 0 0 -0.58em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kraft-note) 78%, white);
  box-shadow:
    0 0 0 1px rgba(92, 56, 20, 0.28),
    inset 0 0 0.12em rgba(92, 56, 20, 0.35);
}

.tag__line {
  position: relative;
  display: block;
  white-space: nowrap;
  line-height: 1;
  /* Sharpie bleed into kraft fibre, as on the rest of the site */
  text-shadow:
    0.5px 0.8px 0.5px rgba(60, 35, 12, 0.35),
    -0.4px 0.3px 0.4px rgba(60, 35, 12, 0.2);
}

.tag__line--to {
  transform: rotate(-1.4deg);
}

.tag__line--from {
  margin-left: 0.5em;
  transform: rotate(0.8deg);
}

.tag__label {
  font-size: 1.05em;
  margin-right: 0.12em;
}

.tag__name {
  font-size: 2.55em;
}

.tag__line--from .tag__name {
  font-size: 2.15em;
}

/* String: over the card's front edge and into the hole. */
.tag__string {
  position: absolute;
  left: -4.25em;
  top: -0.9em;
  width: 5.4em;
  height: 4.2em;
  z-index: 1;
  background: url("/xmas/tag-string.svg") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 0.07em 0.06em rgba(0, 4, 12, 0.6));
}

/* A torn-off piece of matte tape holding the string to the paper. */
.tag__string::after {
  content: "";
  position: absolute;
  left: -0.75em;
  top: -0.2em;
  width: 2.7em;
  height: 0.95em;
  transform: rotate(-66deg);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0,
    rgba(232, 240, 248, 0.2) 9%,
    rgba(232, 240, 248, 0.24) 55%,
    rgba(232, 240, 248, 0.17) 92%,
    rgba(255, 255, 255, 0.3) 100%
  );
  clip-path: polygon(
    0 0, 100% 0, 97.5% 12.5%, 100% 25%, 97.5% 37.5%, 100% 50%, 97.5% 62.5%, 100% 75%, 97.5% 87.5%, 100% 100%,
    0 100%, 2.5% 87.5%, 0 75%, 2.5% 62.5%, 0 50%, 2.5% 37.5%, 0 25%, 2.5% 12.5%
  );
}

/* On the wrapped present the hint is a small kraft label like the tag,
   not a strip of yellow tape. Other scenes keep the shared .hint style. */
.stage[data-scene="wrap"] .hint {
  border: 0;
  background:
    linear-gradient(102deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 45%, rgba(70, 38, 8, 0.12) 100%),
    var(--kraft-note);
  box-shadow:
    0 1px 1px rgba(0, 4, 12, 0.6),
    0.1rem 0.3rem 0.5rem rgba(0, 4, 12, 0.45);
}

/* The paper under the tag has been torn away: it lets go and drops. */
.tag.is-falling {
  animation: tag-fall 0.62s cubic-bezier(0.5, 0, 0.9, 0.5) forwards;
}

@keyframes tag-fall {
  0% {
    transform: translateY(0) rotate(-5deg);
    opacity: 1;
  }
  18% {
    transform: translateY(-0.2em) rotate(-9deg);
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateY(105vh) rotate(24deg);
    opacity: 0;
  }
}

.cta {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: max(1.4rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 0.65rem 1.25rem;
  background: var(--kraft);
  color: var(--ink);
  text-decoration: none;
  font-size: 1.1rem;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  z-index: 20;
}

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

.cta[hidden],
.hint[hidden],
.tag[hidden] {
  display: none !important;
}

/* ---- Scene 3: open box = kraft home page ---------------------------------
   Camera + floor CSS vars are written every box frame (see applyBoxFrame in
   xmas.js). The full floor plate carries the open-box texture (walls + face);
   homepage ink lives ONLY on .interior__backwall — the planar kraft rect. */

.interior {
  --box-x: 10%;
  --box-y: 12%;
  --box-w: 80%;
  --box-h: 72%;
  --wall-x: 20%;
  --wall-y: 17%;
  --wall-w: 59%;
  --wall-h: 64%;
  --cam-fx: 50%;
  --cam-fy: 48%;
  --cam-zoom: 1;
  --gap-top: 8%;
  --gap-bot-inset: 8%;
  --floor-live: 0;
  position: absolute;
  inset: 0;
  /* Above the canvas so kraft + ink show in the cavity (canvas alpha punch
     does not reliably composite sibling DOM underneath in all engines). */
  z-index: 13;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.interior.is-live,
.interior.is-open {
  opacity: 1;
}

.interior.is-open {
  transition: opacity 0.55s cubic-bezier(0.33, 0.05, 0.2, 1);
}

.interior[hidden] {
  display: none !important;
}

/* Same camera push as box.js: scale around the box focus point. */
.interior__camera {
  position: absolute;
  inset: 0;
  transform-origin: var(--cam-fx) var(--cam-fy);
  transform: scale(var(--cam-zoom));
  will-change: transform;
  pointer-events: none;
}

/* Cardboard floor plate — full open-box texture (side walls + kraft face). */
.interior__floor {
  position: absolute;
  left: var(--box-x);
  top: var(--box-y);
  width: var(--box-w);
  height: var(--box-h);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(18, 11, 5, 0.22) 0%, rgba(18, 11, 5, 0) 18%, rgba(18, 11, 5, 0) 78%, rgba(10, 7, 4, 0.28) 100%),
    #9a7048 url("/xmas/box-interior.webp") center / cover no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(40, 24, 12, 0.35),
    inset 0 0 28px rgba(20, 12, 6, 0.28);
  /* Match the flap gap so kraft shows in the cavity above the canvas flaps. */
  clip-path: inset(var(--gap-top) 1.6% var(--gap-bot-inset) 1.6%);
  pointer-events: auto;
}

.interior.is-open .interior__floor {
  clip-path: inset(0% 0% 0% 0%);
}

/* Planar kraft face only — mail / photo / works never cross corner seams. */
.interior__backwall {
  position: absolute;
  left: var(--wall-x);
  top: var(--wall-y);
  width: var(--wall-w);
  height: var(--wall-h);
  overflow: hidden;
  container-type: size;
  pointer-events: auto;
  /* No OS scrollbar chrome on kraft. */
  scrollbar-width: none;
}

.interior__backwall::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.interior__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
  /* Warm cardboard cavity shade — not a night-sky / purple wash. */
  background:
    radial-gradient(ellipse at 48% 36%, rgba(40, 24, 10, 0) 28%, rgba(28, 16, 8, 0.42) 100%),
    linear-gradient(180deg, rgba(36, 22, 10, 0.34) 0%, rgba(36, 22, 10, 0) 24%);
}

.interior.is-open .interior__vignette {
  opacity: 1;
}

/* Coffee rings / board tooth — interior kraft face only (clipped by backwall).
   FRAGILE and other exterior packing marks stay on the closed-box canvas. */
.home__grit {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.home__grit::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      92deg,
      rgba(70, 42, 18, 0.045) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      8deg,
      rgba(255, 236, 210, 0.04) 0 1px,
      transparent 1px 5px
    );
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.home__stain {
  position: absolute;
  display: block;
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  background:
    radial-gradient(
      ellipse at 42% 38%,
      rgba(92, 52, 22, 0.22) 0%,
      rgba(92, 52, 22, 0.1) 38%,
      rgba(92, 52, 22, 0.04) 62%,
      transparent 78%
    );
  mix-blend-mode: multiply;
  opacity: 0.7;
  filter: blur(0.3px);
}

.home__stain--a {
  width: 28%;
  height: 18%;
  top: 8%;
  right: 6%;
  transform: rotate(18deg);
}

.home__stain--b {
  width: 18%;
  height: 12%;
  left: 8%;
  bottom: 22%;
  background:
    radial-gradient(
      ellipse at 50% 50%,
      transparent 42%,
      rgba(78, 44, 18, 0.28) 48%,
      rgba(78, 44, 18, 0.12) 58%,
      transparent 72%
    );
  transform: rotate(-22deg);
  opacity: 0.55;
}

.home__stain--c {
  width: 14%;
  height: 9%;
  left: 42%;
  top: 58%;
  opacity: 0.4;
  transform: rotate(8deg) scale(0.85);
}

/* Kraft homepage grid — one cardboard wall page.
   Polaroid on top; all marker copy (holidays / mail / works) below it. */
.home {
  /* Opaque marker on kraft — keep contrast even where multiply hits mid-tone board. */
  --ink-marker: #120c08;
  --ink-hot: #5a120c;
  --ink-faint: #2e1c12;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Pack to the TOP of the kraft face — Polaroid upper, copy below. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "photo"
    "mail"
    "works";
  gap: clamp(0.2rem, 1.8cqw, 0.55rem);
  padding: clamp(0.45rem, 3.5cqw, 0.9rem);
  color: var(--ink-marker);
  pointer-events: none; /* only interactive children catch clicks */
  user-select: none;
  overflow: hidden;
  align-content: start;
  justify-items: stretch;
}

.interior.is-open .home {
  padding: clamp(0.45rem, 3.5cqw, 0.9rem);
}

/*
  Form open: reclaim Polaroid / ask / works so consent + Turnstile + CTA
  fit the kraft back wall. No interior overflow scroll (trompe-l'oeil).
  Stage/body stay scroll-locked.
*/
.interior[data-mail="yes"] .home__holidays,
.interior[data-mail="yes"] .home__works {
  display: none;
}

/* Form open: Polaroid yields — fields + Turnstile + CTA need the wall. */
.interior[data-mail="yes"] .home__photo-wrap {
  display: none;
}

/*
  Ask collapses once yes is picked — radios stay in the DOM (screen readers /
  change-of-mind) but leave the kraft face for fields + CTA.
*/
.interior[data-mail="yes"] .home__q {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.interior[data-mail="yes"] .home__circles {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.15rem 0.35rem;
  margin: 0 0 0.15rem;
  transform: scale(0.85);
  transform-origin: left top;
}

/* Form open: densify + clip — never a scrollable kraft pane. */
.interior[data-mail="yes"] .home {
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "mail";
  gap: 0;
  padding: clamp(0.2rem, 2cqw, 0.5rem);
  align-content: start;
}

.interior[data-mail="yes"] .home__mail {
  overflow: hidden;
  max-height: none;
  align-self: start;
  min-height: 0;
}

/*
  Readable Papermark on kraft until Kyle's pencil scans load (.home__hand.is-ink).
  No SVG turbulence / displacement / gaussian / Sharpie bleed shadows —
  those waterlogged the labels. Real pencil replaces this tomorrow.
*/
.home__ink {
  color: var(--ink-marker);
  mix-blend-mode: multiply;
  text-shadow: none;
  filter: none;
  -webkit-text-stroke: 0;
}

/*
  Handwriting slots: Papermark (.home__hand-text) until /xmas/hand/*.png loads.
  Drop scans with the SHOT_LIST names → interior.js adds .is-ink.
  Optional .home__hand--mask paints gray+alpha PNGs with --hand-ink / --ink-marker.
*/
.home__hand {
  display: inline-block;
  position: relative;
  max-width: 100%;
  vertical-align: baseline;
}

.home__hand-img {
  display: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.home__hand.is-ink > .home__hand-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.home__hand.is-ink > .home__hand-img {
  display: block;
}

.home__hand--mask.is-ink {
  background-color: var(--hand-ink, var(--ink-marker));
  -webkit-mask-image: var(--hand-url);
  mask-image: var(--hand-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.home__hand--mask.is-ink > .home__hand-img {
  display: block;
  opacity: 0;
  mix-blend-mode: normal;
}

.home__hand--holidays,
.home__hand--arrow {
  --hand-ink: #6a1610;
  display: block;
}

.home__hand--arrow.is-ink > .home__hand-img {
  width: clamp(1.5rem, 8cqw, 2.2rem);
  height: auto;
  margin: 0 auto 0.05rem;
}

.home__hand--holidays.is-ink > .home__hand-img {
  width: min(100%, 6.2rem);
  height: auto;
  margin: 0 auto;
}

.home__hand--consent {
  display: inline;
}

.home__hand--consent.is-ink {
  display: inline-block;
  max-width: 100%;
  margin-right: 0.25rem;
  vertical-align: middle;
}

.home__mail,
.home__works,
.home__photo-wrap,
.home a,
.home button,
.home input,
.home label,
.home .cf-turnstile,
.home__captcha {
  pointer-events: auto;
  /* Body sets touch-action: none; restore taps + field caret on controls. */
  touch-action: manipulation;
}

.home__mail,
.home__works,
.home__input,
.home__consent-text {
  user-select: text;
}

.home__mail {
  grid-area: mail;
  align-self: stretch;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  /* Fit by shrinking — never a scrollable kraft pane. */
  overflow: hidden;
  transform: rotate(-1.2deg);
}

.home__q {
  margin: 0 0 0.4rem;
  font-size: clamp(0.92rem, 5.2cqw, 1.35rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  transform: rotate(-1.6deg);
  transition: color 0.15s ease, opacity 0.15s ease;
}

.home__q:hover {
  color: #5a4534;
  opacity: 0.88;
}

.home__circles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: center;
  margin: 0 0 0.45rem;
}

.home__circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.35rem 0.45rem;
  margin: 0;
  cursor: pointer;
  font-size: clamp(0.9rem, 4.6cqw, 1.12rem);
}

.home__radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

/* Hand-drawn circle — CSS oval tonight; hand-circle-*.png when scanned. */
.home__dot {
  position: relative;
  flex: 0 0 auto;
  width: 1.18rem;
  height: 1.26rem;
  border: 2.7px solid var(--ink-marker);
  border-top-width: 2.2px;
  border-right-width: 3px;
  border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%;
  background: transparent;
  box-shadow:
    inset 0 0 0 0 var(--ink-marker),
    0.55px 0.7px 0 rgba(28, 18, 10, 0.26);
  transform: rotate(-4deg);
  mix-blend-mode: multiply;
  filter: none;
  transition: box-shadow 0.12s ease;
}

.home__dot-img {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.home__dot.is-ink {
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}

.home__dot.is-ink .home__dot-img--empty {
  display: block;
}

.home__circle:nth-child(2) .home__dot {
  transform: rotate(3deg);
  border-radius: 50% 48% 52% 49% / 49% 52% 48% 51%;
}

.home__radio:checked + .home__dot {
  box-shadow:
    inset 0 0 0 0.3rem var(--ink-marker),
    0.4px 0.5px 0 rgba(28, 18, 10, 0.15);
}

.home__radio:checked + .home__dot.is-ink:not(.is-ink-filled) {
  box-shadow: inset 0 0 0 0.3rem var(--ink-marker);
}

.home__radio:checked + .home__dot.is-ink-filled {
  box-shadow: none;
}

.home__radio:checked + .home__dot.is-ink-filled .home__dot-img--empty {
  display: none;
}

.home__radio:checked + .home__dot.is-ink-filled .home__dot-img--filled {
  display: block;
}

.home__radio:focus-visible + .home__dot {
  outline: 2px solid var(--marker);
  outline-offset: 3px;
}

.home__opt {
  transform: rotate(-0.6deg);
}

.home__circle:nth-child(2) .home__opt {
  transform: rotate(0.8deg);
}

.home__kfine {
  margin: 0.35rem 0 0;
  font-size: clamp(1.35rem, 5cqw, 1.85rem);
  transform: rotate(-1.4deg);
}

/* After "yes": denser fields (ask/photo/works already collapsed above). */
.interior[data-mail="yes"] .home__circle {
  min-height: 32px;
  padding: 0.08rem 0.25rem;
  font-size: clamp(0.78rem, 3.8cqw, 0.95rem);
}

.interior[data-mail="yes"] .home__fields {
  margin-top: 0.08rem;
}

.interior[data-mail="yes"] .home__form {
  gap: 0.14rem;
}

.interior[data-mail="yes"] .home__label {
  margin-bottom: 0.02rem;
  font-size: clamp(0.72rem, 3.6cqw, 0.9rem);
}

.interior[data-mail="yes"] .home__input {
  min-height: 32px;
  padding: 0.28rem 0.08rem 0.18rem;
  font-size: clamp(0.8rem, 3.6cqw, 0.92rem);
}

.interior[data-mail="yes"] .home__consent {
  margin: 0;
  padding: 0.06rem 0;
  min-height: 0;
  font-size: clamp(0.64rem, 2.8cqw, 0.78rem);
  line-height: 1.2;
  gap: 0.3rem;
}

.interior[data-mail="yes"] .home__captcha {
  margin: 0.12rem 0 0.08rem;
  height: 3.4rem;
  min-height: 3.4rem;
  max-height: 3.4rem;
  max-width: min(100%, 9rem);
  overflow: hidden !important;
}

.interior[data-mail="yes"] .home .su-turnstile,
.interior[data-mail="yes"] .home .cf-turnstile {
  height: 3.4rem;
  min-height: 3.4rem;
  max-height: 3.4rem;
  overflow: hidden;
}

.interior[data-mail="yes"] .home__captcha iframe {
  max-height: 3.4rem !important;
}

.interior[data-mail="yes"] .home__submit {
  margin-top: 0.06rem;
  min-height: 36px;
  padding: 0.32rem 0.8rem 0.28rem;
  font-size: clamp(0.9rem, 4.4cqw, 1.15rem);
}

.home__fields {
  margin-top: 0.35rem;
  min-width: 0;
}

.home__form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.home__field {
  display: block;
}

.home__label {
  display: block;
  margin-bottom: 0.1rem;
  font-size: clamp(0.85rem, 4.4cqw, 1.08rem);
  transform: rotate(-0.7deg);
}

.home__field:nth-child(2) .home__label {
  transform: rotate(0.5deg);
}

/* Marker underline only — no white field chrome. */
.home__input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.15rem 0.35rem;
  font: inherit;
  font-size: clamp(0.92rem, 4.2cqw, 1.05rem);
  color: var(--ink-marker);
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  /* Wobbly marker underline via layered gradients */
  background-image:
    linear-gradient(
      92deg,
      transparent 0%,
      var(--ink-marker) 2%,
      var(--ink-marker) 48%,
      transparent 49%,
      var(--ink-marker) 51%,
      var(--ink-marker) 97%,
      transparent 100%
    );
  background-size: 100% 2.2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  caret-color: var(--marker);
  mix-blend-mode: multiply;
}

.home__input:focus-visible {
  outline: 2px solid var(--marker);
  outline-offset: 2px;
  background-image:
    linear-gradient(
      88deg,
      transparent 0%,
      var(--marker) 3%,
      var(--marker) 96%,
      transparent 100%
    );
}

.home__input[aria-invalid="true"] {
  background-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #8a1f14 2%,
      #8a1f14 98%,
      transparent 100%
    );
  caret-color: #8a1f14;
}

.home__input[aria-invalid="true"]:focus-visible {
  outline-color: #8a1f14;
}

.home__consent {
  position: relative;
  z-index: 1; /* above Turnstile blend so consent copy stays readable/tappable */
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0.1rem 0 0.15rem;
  padding: 0.25rem 0;
  min-height: 44px;
  font-size: clamp(0.78rem, 3.4cqw, 0.9rem);
  line-height: 1.35;
  color: var(--ink-faint);
  max-width: 100%;
  transform: rotate(-0.55deg);
  cursor: pointer;
}

/* Native box is hit-target only; .home__check is the marker square. */
.home__consent-box {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.home__check {
  flex: 0 0 auto;
  position: relative;
  width: 1.25rem;
  height: 1.28rem;
  margin-top: 0.12rem;
  border: 2.5px solid var(--ink-marker);
  border-top-width: 2.1px;
  border-left-width: 2.9px;
  border-radius: 12% 18% 10% 16% / 14% 10% 18% 12%;
  background: transparent;
  box-shadow:
    0.45px 0.65px 0 rgba(28, 18, 10, 0.22),
    -0.35px 0.2px 0.35px rgba(60, 35, 15, 0.16);
  transform: rotate(-3deg);
  mix-blend-mode: multiply;
  filter: none;
}

.home__check::after {
  content: "";
  position: absolute;
  inset: -18%;
  background: url("/textures/mark-x.svg") center / 92% 92% no-repeat;
  opacity: 0;
  transform: scale(0.7) rotate(4deg);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.home__consent-box:checked + .home__check::after {
  opacity: 0.9;
  transform: scale(1) rotate(-2deg);
}

.home__consent-box:focus-visible + .home__check {
  outline: 2px solid var(--marker);
  outline-offset: 3px;
}

.home__consent-box[aria-invalid="true"] + .home__check {
  outline: 2px solid #8a1f14;
  outline-offset: 2px;
  border-color: #8a1f14;
}

.home__consent-quote {
  display: inline;
  color: var(--ink-marker);
}

.home__consent-text a {
  display: inline-block;
  padding: 0.2rem 0.12rem;
  margin: -0.1rem 0;
  color: var(--ink-hot);
  text-decoration: underline;
  text-decoration-thickness: 1.6px;
  text-underline-offset: 2px;
  mix-blend-mode: multiply;
}

.home__consent-text a:focus-visible {
  outline: 2px solid var(--marker);
  outline-offset: 2px;
}

/* Turnstile is forced white chrome — soak it into kraft as much as CSS allows.
   Compact widget + no scale transforms: scaled iframes mis-hit on phones. */
.home__captcha {
  position: relative;
  z-index: 0;
  margin: 0.45rem 0 0.35rem;
  max-width: min(100%, 10.5rem);
  min-height: 4.1rem;
  overflow: hidden; /* keep test-banner chrome from stretching the kraft column */
  transform: rotate(0.7deg);
  filter: sepia(0.28) saturate(0.72) contrast(0.94) brightness(0.93);
  opacity: 0.92;
  mix-blend-mode: multiply;
  scroll-margin-block: 0.85rem;
}

.home .su-turnstile,
.home .cf-turnstile {
  margin: 0;
  min-height: 4.1rem;
  max-width: 100%;
  overflow: hidden;
}

.home__captcha iframe {
  max-width: 100% !important;
}

.home__notice {
  margin: 0;
  max-width: 100%;
  scroll-margin-block: 0.85rem;
}

.home__notice:focus-visible {
  outline: 2px solid var(--marker);
  outline-offset: 2px;
}

.home__submit,
.home__consent,
.home__input {
  scroll-margin-block: 0.75rem;
}

/* Marker scribble CTA — loud ink on kraft, not a chrome web button. */
.home__submit {
  align-self: flex-start;
  margin-top: 0.25rem;
  min-height: 44px;
  padding: 0.55rem 1rem 0.5rem;
  font: inherit;
  font-size: clamp(1.05rem, 5.4cqw, 1.4rem);
  letter-spacing: 0.02em;
  color: #5c120c;
  background:
    radial-gradient(
      ellipse at 35% 40%,
      color-mix(in srgb, var(--ink-hot) 22%, transparent) 0%,
      color-mix(in srgb, var(--ink-hot) 10%, transparent) 55%,
      transparent 78%
    );
  border: 3.2px solid #6a1610;
  border-radius: 46% 54% 48% 52% / 58% 42% 56% 44%;
  border-top-width: 2.6px;
  border-left-width: 3.6px;
  box-shadow:
    1.4px 1.8px 0 rgba(80, 20, 12, 0.3),
    -0.7px 0.45px 0 rgba(90, 30, 16, 0.22),
    inset 0.5px -1.5px 0 rgba(90, 25, 14, 0.14);
  text-shadow: none;
  cursor: pointer;
  transform: rotate(-2.4deg);
  mix-blend-mode: multiply;
  filter: none;
}

.home__submit:hover,
.home__submit:focus-visible {
  background:
    radial-gradient(
      ellipse at 40% 45%,
      color-mix(in srgb, var(--ink-hot) 34%, transparent) 0%,
      color-mix(in srgb, var(--ink-hot) 16%, transparent) 58%,
      transparent 80%
    );
  color: #4a0e0a;
}

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

.home__submit[disabled] {
  opacity: 0.55;
  cursor: default;
}

.home__done-title {
  margin: 0.2rem 0 0.25rem;
  font: inherit;
  font-size: clamp(1.25rem, 4.5vw, 1.7rem);
  font-weight: 400;
  color: var(--ink-marker);
  mix-blend-mode: multiply;
  transform: rotate(-1deg);
  text-shadow: none;
}

.home__done-lede {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-faint);
  mix-blend-mode: multiply;
}

/* ---- my works → peel packing slip ---------------------------------------- */

.home__works {
  grid-area: works;
  align-self: end;
  justify-self: start;
  position: relative;
  max-width: 100%;
  z-index: 2;
  transform: rotate(1.2deg);
}

.home__works-link {
  display: inline-flex;
  align-items: center;
  margin: 0;
  min-height: 44px;
  padding: 0.45rem 0.35rem;
  font-size: clamp(0.95rem, 4.8cqw, 1.3rem);
  line-height: 1.15;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  background-image:
    linear-gradient(
      94deg,
      transparent 0%,
      var(--ink-marker) 3%,
      var(--ink-marker) 46%,
      transparent 48%,
      var(--ink-marker) 51%,
      var(--ink-marker) 96%,
      transparent 100%
    );
  background-size: 100% 2.4px;
  background-position: 0 calc(100% - 0.35rem);
  background-repeat: no-repeat;
  cursor: pointer;
  transform: rotate(0.4deg);
}

.home__works-link:hover,
.home__works-link:focus-visible {
  color: #5a4634;
}

.home__works-link:focus-visible {
  outline: 2px solid var(--marker);
  outline-offset: 3px;
}

.home__slip {
  position: absolute;
  left: 0.15rem;
  /* Clear the 44px "my works" hit area so the slip doesn't eat the toggle. */
  bottom: 2.9rem;
  width: min(11.5rem, 72vw);
  z-index: 3;
  transform-origin: 70% 100%;
  transform: translateY(8px) rotate(-2deg) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.45s cubic-bezier(0.33, 0.05, 0.2, 1),
    opacity 0.35s ease;
}

.home__slip.is-open {
  transform: translateY(0) rotate(-3.5deg) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.home__slip-sheet {
  position: relative;
  padding: 1.15rem 0.75rem 0.7rem;
  background:
    linear-gradient(160deg, rgba(255, 248, 230, 0.4) 0%, transparent 42%),
    repeating-linear-gradient(0deg, rgba(90, 55, 25, 0.04) 0 1px, transparent 1px 4px),
    #e4d4b4;
  color: #2b1c0d;
  border: 1.5px solid color-mix(in srgb, #2b1c0d 28%, transparent);
  box-shadow:
    0 1px 0 rgba(40, 24, 12, 0.14),
    2px 5px 12px rgba(28, 16, 8, 0.28);
  border-radius: 1px 3px 2px 2px;
  transform: rotate(0deg);
  mix-blend-mode: multiply;
  transition: transform 0.55s cubic-bezier(0.4, 0.05, 0.2, 1);
}

.home__slip.is-peeled .home__slip-sheet {
  transform: rotate(-12deg) translate(-6px, -18px);
}

.home__slip-stamp {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--marker) 70%, #2b1c0d);
  opacity: 0.85;
}

.home__slip-body,
.home__slip-empty {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.3;
  mix-blend-mode: multiply;
}

.home__slip-empty {
  margin-top: 0.35rem;
  color: #5a4634;
  transform: rotate(-0.8deg);
}

.home__slip-tape {
  position: absolute;
  top: -0.95rem;
  right: 0.85rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.6rem;
  min-width: 44px;
  height: 2.75rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.home__slip-tape-face {
  display: block;
  width: 100%;
  height: 1.05rem;
  background: url("/textures/packing-tape.svg") center / 100% 100% no-repeat;
  opacity: 0.92;
  box-shadow:
    0 1px 2px rgba(40, 24, 12, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  mix-blend-mode: multiply;
  filter: saturate(0.9) contrast(1.05);
  transform: rotate(-8deg);
  transition: transform 0.45s cubic-bezier(0.4, 0.05, 0.2, 1), opacity 0.35s ease;
}

.home__slip.is-peeled .home__slip-tape-face {
  transform: rotate(-38deg) translate(18px, -22px);
  opacity: 0.35;
}

.home__slip-tape:focus-visible .home__slip-tape-face {
  outline: 2px solid var(--marker);
  outline-offset: 2px;
}

/* ---- Photo on top; happy holidays on kraft BELOW (arrow points up) ------ */

.home__photo-wrap {
  grid-area: photo;
  position: relative;
  justify-self: center;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.35rem, 2.2cqw, 0.65rem);
  width: auto;
  max-width: 100%;
  min-width: 0;
  pointer-events: none;
}

.home__holidays {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin: 0.15rem 0 0;
  width: auto;
  max-width: 6.2rem;
  text-align: center;
  transform: rotate(-9deg);
  pointer-events: none;
}

.home__holidays-text {
  display: block;
  font-size: clamp(0.78rem, 4.2cqw, 1.05rem);
  line-height: 1.05;
  color: #6a1610;
  mix-blend-mode: multiply;
  text-shadow: none;
  transform: rotate(-1.5deg);
  filter: none;
  -webkit-text-stroke: 0;
}

.home__holidays-arrow {
  display: block;
  width: clamp(1.5rem, 8cqw, 2.2rem);
  height: auto;
  margin: 0 auto 0.05rem;
  overflow: visible;
  mix-blend-mode: multiply;
  transform: rotate(-4deg);
  filter: none;
  opacity: 0.92;
}

.home__holidays-shaft,
.home__holidays-ghost,
.home__holidays-head {
  stroke: #6a1610;
  stroke-width: 3.1;
  fill: none;
}

.home__holidays-ghost {
  stroke-width: 1.6;
  stroke: #8a2a1a;
}

.home__holidays-head {
  fill: color-mix(in srgb, #6a1610 82%, transparent);
  stroke-width: 2.1;
  opacity: 0.92;
}

/*
  Polaroid pressed flat on kraft.
  Stack: img (z0) → caption (z1) → tape (z5 ON TOP of white border + kraft).
  No parent filter (flattens kids). Tape uses normal blend — multiply on white
  made strips look like they stop at the border (read as "under").
*/
.home__photo {
  position: relative;
  flex: 0 0 auto;
  width: min(28cqw, 7.2rem);
  margin: 0;
  aspect-ratio: 3 / 4;
  transform: rotate(2.8deg);
  pointer-events: none;
  overflow: visible;
  filter: none;
}

.home__photo-img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1px;
  background:
    linear-gradient(165deg, rgba(255, 252, 245, 0.55) 0%, transparent 45%),
    #efe4d0;
  padding: 4.2% 4.2% 13%;
  /* Contact shadow — tight, one light; not a floating blob. */
  box-shadow:
    0 0 0 1px rgba(60, 40, 20, 0.14),
    1px 1px 0 rgba(28, 16, 8, 0.2),
    1px 2px 2px rgba(28, 16, 8, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-user-drag: none;
  user-select: none;
}

.home__photo-cap {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 3.2%;
  text-align: center;
  font-size: clamp(0.7rem, 2.4vw, 0.9rem);
  color: #24180e;
  pointer-events: none;
}

/*
  Frosted packing-tape.svg (book.html). Ends of the SVG are ~0.12 opacity —
  if only the tip sits on white, tape reads as "under" the frame. Park the
  opaque middle of each strip across the corner (white border + kraft).
*/
.home__tape {
  position: absolute;
  z-index: 5;
  width: 46%;
  aspect-ratio: 640 / 90;
  height: auto;
  background: url("/textures/packing-tape.svg") center / 100% 100% no-repeat;
  opacity: 1;
  box-shadow: 0 0.5px 1px rgba(40, 24, 12, 0.18);
  mix-blend-mode: normal;
  filter: none;
  pointer-events: none;
}

.home__tape--tl {
  /* Mid-strip crosses TL corner: kraft outside + white border inside. */
  top: 1%;
  left: -4%;
  transform: rotate(-38deg);
}

.home__tape--tr {
  top: 2%;
  right: -3%;
  width: 42%;
  transform: rotate(34deg);
}

.home__tape--bl {
  bottom: 6%;
  left: -3%;
  width: 42%;
  transform: rotate(24deg);
}

.home__tape--br {
  bottom: 5%;
  right: -4%;
  width: 44%;
  transform: rotate(-32deg);
}

/* Error = marker note on kraft, not a pink form card. */
.notice {
  margin: 0.15rem 0 0.4rem;
  padding: 0.35rem 0.15rem;
  font-size: 0.9rem;
  line-height: 1.3;
  color: #4a120c;
  background: transparent;
  border: 0;
  border-radius: 0;
  mix-blend-mode: multiply;
  transform: rotate(-0.8deg);
  text-shadow: none;
}

.notice[hidden] {
  display: none !important;
}

@media (max-width: 560px) {
  .home {
    width: 100%;
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "photo"
      "mail"
      "works";
    justify-items: stretch;
    align-content: start;
    gap: clamp(0.15rem, 1.6cqw, 0.4rem);
    padding: clamp(0.35rem, 3cqw, 0.6rem);
  }

  .home__photo-wrap {
    justify-self: center;
    align-items: center;
    max-width: 100%;
  }

  .home__holidays {
    max-width: 5rem;
    transform: rotate(-8deg);
  }

  .home__holidays-arrow {
    width: 1.5rem;
    margin-left: auto;
    margin-right: auto;
  }

  .home__photo {
    width: min(24cqw, 5.2rem);
  }

  .home__holidays {
    max-width: 4.4rem;
  }

  .home__holidays-text {
    font-size: clamp(0.72rem, 3.8cqw, 0.92rem);
  }

  .home__works {
    align-self: end;
  }

  .home__mail {
    max-width: none;
    overflow: hidden;
  }

  .home__input {
    max-width: none;
  }

  /* Compact Turnstile — never scale(); scaled widgets miss taps. */
  .home__captcha {
    margin: 0.4rem 0 0.45rem;
    min-height: 4.1rem;
    max-width: min(100%, 9.5rem);
    transform: rotate(0.5deg);
  }

  .home .su-turnstile,
  .home .cf-turnstile {
    min-height: 4.1rem;
  }

  .home__form {
    gap: 0.35rem;
  }

  .home__stain--a {
    width: 32%;
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home__slip,
  .home__slip-sheet,
  .home__slip-tape-face,
  .home__check::after,
  .home__dot,
  .home__q {
    transition: none !important;
  }
}

.noscript {
  max-width: 28rem;
  margin: 4rem auto;
  padding: 1.5rem;
  color: var(--moon);
}

.noscript a {
  color: var(--ice);
}

/* ---- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /* the tag just goes with the paper: no drop */
  .tag.is-falling {
    animation: none;
    opacity: 0;
  }

  .stage__canvas,
  .interior,
  .interior__vignette,
  .home {
    transition: none !important;
  }
}

/* Instant open (reduced motion): no fade/scale-in. */
.interior.is-instant,
.interior.is-instant .home {
  transition: none !important;
}

/* ---- No-scroll locks (keep last; win over usability scroll / 44px pads) --
   Trompe-l'oeil: kraft face must not scroll. Fit by density; clip if needed.
   Compact Turnstile: never scale(). Page stage stays pinned. */

.interior .home,
.interior .home__mail,
.interior__backwall,
.interior[data-mail="yes"] .home,
.interior[data-mail="yes"] .home__mail {
  overflow: hidden !important;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  touch-action: manipulation;
  scrollbar-width: none;
}

.interior .home::-webkit-scrollbar,
.interior .home__mail::-webkit-scrollbar,
.interior__backwall::-webkit-scrollbar,
.interior[data-mail="yes"] .home::-webkit-scrollbar,
.interior[data-mail="yes"] .home__mail::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

@media (max-width: 560px) {
  .interior[data-mail="yes"] .home,
  .interior[data-mail="yes"] .home__mail {
    overflow: hidden !important;
  }

  /* Phone form: drop Polaroid — fields + CTA need every pixel. */
  .interior[data-mail="yes"] .home {
    padding: clamp(0.18rem, 2cqw, 0.4rem);
  }

  .interior[data-mail="yes"] .home__circles {
    margin-bottom: 0.08rem;
    transform: scale(0.78);
  }

  .interior[data-mail="yes"] .home__circle {
    min-height: 26px;
    padding: 0.02rem 0.15rem;
    font-size: clamp(0.72rem, 3.4cqw, 0.9rem);
  }

  .interior[data-mail="yes"] .home__dot {
    width: 0.88rem;
    height: 0.92rem;
  }

  .interior[data-mail="yes"] .home__fields {
    margin-top: 0.04rem;
  }

  .interior[data-mail="yes"] .home__form {
    gap: 0.06rem;
  }

  .interior[data-mail="yes"] .home__label {
    margin-bottom: 0;
    font-size: clamp(0.62rem, 3cqw, 0.78rem);
  }

  .interior[data-mail="yes"] .home__input {
    min-height: 28px;
    padding: 0.14rem 0.05rem 0.1rem;
    font-size: clamp(0.74rem, 3.2cqw, 0.86rem);
  }

  .interior[data-mail="yes"] .home__consent {
    min-height: 0;
    padding: 0;
    font-size: clamp(0.54rem, 2.4cqw, 0.68rem);
    line-height: 1.15;
    gap: 0.25rem;
  }

  .interior[data-mail="yes"] .home__check {
    width: 0.92rem;
    height: 0.95rem;
    margin-top: 0.05rem;
  }

  .interior[data-mail="yes"] .home__captcha {
    margin: 0.05rem 0 0.03rem;
    height: 3.1rem;
    min-height: 3.1rem;
    max-height: 3.1rem;
    max-width: min(100%, 8.2rem);
    overflow: hidden !important;
    transform: rotate(0.5deg); /* no scale() */
  }

  .interior[data-mail="yes"] .home .su-turnstile,
  .interior[data-mail="yes"] .home .cf-turnstile {
    height: 3.1rem;
    min-height: 3.1rem;
    max-height: 3.1rem;
  }

  .interior[data-mail="yes"] .home__captcha iframe {
    max-height: 3.1rem !important;
  }

  .interior[data-mail="yes"] .home__submit {
    min-height: 32px;
    margin-top: 0.02rem;
    padding: 0.22rem 0.65rem 0.2rem;
    font-size: clamp(0.8rem, 3.8cqw, 0.98rem);
  }
}

/* ---- Absolute last: no interior scroll, density wins over 44px pads -----
   Owner: trompe-l'oeil > usability scroll. Compact Turnstile, never scale(). */

.interior .home,
.interior .home__mail,
.interior__backwall,
.interior[data-mail="yes"] .home,
.interior[data-mail="yes"] .home__mail {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.interior[data-mail="yes"] .home__circle,
.interior[data-mail="yes"] .home__input,
.interior[data-mail="yes"] .home__consent,
.interior[data-mail="yes"] .home__submit {
  min-height: 0 !important;
}

.interior[data-mail="yes"] .home__circle {
  min-height: 30px !important;
  padding: 0.06rem 0.22rem !important;
}

.interior[data-mail="yes"] .home__input {
  min-height: 30px !important;
  padding: 0.2rem 0.08rem 0.14rem !important;
}

.interior[data-mail="yes"] .home__consent {
  min-height: 0 !important;
  padding: 0.04rem 0 !important;
}

.interior[data-mail="yes"] .home__submit {
  min-height: 34px !important;
  padding: 0.28rem 0.75rem 0.24rem !important;
}

.interior[data-mail="yes"] .home__captcha {
  height: 3.25rem !important;
  min-height: 3.25rem !important;
  max-height: 3.25rem !important;
  overflow: hidden !important;
  transform: rotate(0.5deg); /* tilt ok; scale not ok */
}

.interior[data-mail="yes"] .home .su-turnstile,
.interior[data-mail="yes"] .home .cf-turnstile {
  height: 3.25rem !important;
  min-height: 3.25rem !important;
  max-height: 3.25rem !important;
}

.interior[data-mail="yes"] .home__captcha iframe {
  max-height: 3.25rem !important;
}

@media (max-width: 560px) {
  /* Phone form: drop yes/no row — already answered; reclaim CTA space. */
  .interior[data-mail="yes"] .home__circles {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    transform: none !important;
  }

  .interior[data-mail="yes"] .home__input {
    min-height: 28px !important;
  }

  .interior[data-mail="yes"] .home__submit {
    min-height: 32px !important;
  }

  .interior[data-mail="yes"] .home__captcha,
  .interior[data-mail="yes"] .home .su-turnstile,
  .interior[data-mail="yes"] .home .cf-turnstile {
    height: 2.85rem !important;
    min-height: 2.85rem !important;
    max-height: 2.85rem !important;
  }

  .interior[data-mail="yes"] .home__captcha iframe {
    max-height: 2.85rem !important;
  }
}

/* ---- LOCKED overnight (Kyle feedback) ------------------------------------
   Do NOT flatten open-box to a scrolling kraft page.
   - Content on back wall only (polaroid above, text below)
   - No interior / page scrollbar; fit by densifying when mail=yes
   - Polaroid + holidays + works hide when mail=yes
   - FRAGILE stays on closed-box canvas / .info kraft extras only
   - Wave = long-press empty kraft (not a signup gate)
   Parallel agents: leave this block; densify inside .interior[data-mail=yes]
   rules above instead of undoing trompe-l'oeil. */

html:has(.stage[data-scene="interior"]),
body:has(.stage[data-scene="interior"]) {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

.stage[data-scene="interior"] .interior .home,
.stage[data-scene="interior"] .interior .home__mail,
.stage[data-scene="interior"] .interior__backwall,
.stage[data-scene="interior"] .interior[data-mail="yes"] .home,
.stage[data-scene="interior"] .interior[data-mail="yes"] .home__mail {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.stage[data-scene="interior"] .interior[data-mail="yes"] .home__photo-wrap,
.stage[data-scene="interior"] .interior[data-mail="yes"] .home__holidays,
.stage[data-scene="interior"] .interior[data-mail="yes"] .home__works {
  display: none !important;
}