@font-face {
  font-family: "Jua";
  src: url("/assets/fonts/jua-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --butter: #F3D67A;
  --ivory: #F6F1E7;
  --ink: #292B26;
  --tan: #D9C79F;
  --lift: drop-shadow(0 14px 16px rgba(41, 43, 38, 0.22)) drop-shadow(0 3px 4px rgba(41, 43, 38, 0.14));
  --rest: drop-shadow(0 2px 2px rgba(41, 43, 38, 0.12));
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--butter); -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink) var(--butter); }
body {
  margin: 0;
  background: var(--butter);
  color: var(--ink);
  font-family: "Jua", "Varela Round", ui-rounded, system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--butter); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The page is one sheet: everything is placed in percent of the approved picture, sized in container units. */
.page {
  position: relative;
  width: 100%;
  aspect-ratio: 941 / 1672;
  container-type: inline-size;
  overflow: clip;
  background: var(--butter);
  --band-h: 21.6%;
}

/* The band's lower edge is the hand-cut wave traced from each approved picture (one path per layout). */
.band {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--band-h);
  z-index: 1;
}
.band-shape { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--ivory); }
.band-desk { display: none; }
.mark {
  position: absolute;
  left: 48.9%;
  top: 11.5%;
  width: 47%;
  transform: translateX(-50%);
}
.dashes { position: absolute; top: 49.6%; width: 8%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.dashes-l { left: 14.1%; }
.dashes-r { left: 84.2%; transform: translate(-50%, -50%) scaleX(-1); }
.dashes i {
  position: absolute;
  left: 20%;
  width: 62%;
  height: 11%;
  border-radius: 99px;
  background: var(--butter);
  transform-origin: 100% 50%;
}
.dashes i:nth-child(1) { top: 10%; transform: rotate(38deg); }
.dashes i:nth-child(2) { top: 45%; transform: rotate(0deg); left: 8%; }
.dashes i:nth-child(3) { top: 80%; transform: rotate(-38deg); }
.tagline {
  position: absolute;
  left: 0;
  right: 0;
  top: 81%;
  margin: 0;
  text-align: center;
  font-size: calc(3.2cqw + 0.35rem);
  transform: translateY(-50%);
  text-wrap: balance;
}

/* Words sit above the stickers, so a moved sticker never covers what a visitor must read or tap. */
.copy { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.copy > * { pointer-events: auto; }
.hello {
  position: absolute;
  left: 51.8%;
  top: 63.2%;
  margin: 0;
  font-weight: 400;
  font-size: calc(4.6cqw + 0.45rem);
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-3deg);
}
.place {
  position: absolute;
  left: 13.3%;
  top: 79.9%;
  width: 73.5%;
  min-height: 8.7%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
  background: var(--ivory);
  border-radius: 999px;
  font-size: calc(2.6cqw + 0.32rem);
  line-height: 1.15;
}
.place::before {
  content: "";
  position: absolute;
  inset: 7% 2.5%;
  border: 2px dashed var(--tan);
  border-radius: 999px;
  pointer-events: none;
}
.place-icon { width: 14cqw; height: auto; flex: none; }
.place-rule { width: 2px; height: 46%; background: var(--ink); flex: none; }
.follow {
  position: absolute;
  left: 4.3%;
  top: 88.9%;
  width: 91.4%;
  min-height: 8.7%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  background: var(--ink);
  color: var(--ivory);
  border: 0.9cqw solid var(--ivory);
  border-radius: 999px;
  font-size: calc(2.8cqw + 0.33rem);
  text-decoration: none;
  transition: transform 160ms var(--out), background-color 160ms var(--out);
}
.follow:hover { background: #3a3c36; }
.follow:active { transform: scale(0.98); }
.follow-icon { width: 7.5cqw; height: auto; flex: none; }

/* The sticker board */
.board { position: absolute; inset: 0; z-index: 2; }
.sticker {
  --fx: 0; --fy: 0; --r: 0deg; --s: 1;
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transform: translate(-50%, -50%) translate(calc(var(--fx) * 100cqw), calc(var(--fy) * 100cqw)) rotate(var(--r)) scale(var(--s));
  transition: transform 320ms var(--out);
  border-radius: 14%;
}
.sticker img { width: 100%; pointer-events: none; filter: var(--rest); transition: filter 200ms var(--out); }
.sticker.lifted, .sticker.selected { --s: 1.06; z-index: 5; }
.sticker.lifted img, .sticker.selected img { filter: var(--lift); }
.sticker.selected { touch-action: none; }
.sticker.dragging { cursor: grabbing; transition: none; }
.sticker.flying { transition: none; }
.sticker:focus-visible { outline: 3px dashed var(--ink); outline-offset: 2px; }

/* Where a sticker was peeled from, the sheet keeps its faint pale outline. */
.ghost {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: brightness(0) invert(1);
  opacity: 0.32;
  z-index: 1;
}
@media (min-width: 760px) {
  .ghost { left: calc(var(--dx) * 1%); top: calc(var(--dy) * 1%); width: calc(var(--dw) * 1%); }
}
.wink { position: absolute; }
/* WINK winks by default (the owner, 2026-10-27); a tap or hover opens his eyes for a beat, then he winks again. */
.wink .wink-open { position: absolute; inset: 0; visibility: hidden; }
.wink.looking .wink-closed { visibility: hidden; }
.wink.looking .wink-open { visibility: visible; }
.rays {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--ivory);
  stroke-width: 2.6;
  stroke-linecap: round;
  pointer-events: none;
}

/* Under the sheet */
.foot {
  background: var(--ivory);
  padding: 2.5rem 1.25rem 3rem;
  text-align: center;
}
.about { margin: 0 auto; max-width: 30ch; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); line-height: 1.35; text-wrap: balance; }
.tidy { margin: 1.5rem 0 0; display: flex; gap: 0.75rem; justify-content: center; }
.tidy[hidden] { display: none; }
.tidy button {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.parent { margin: 1.75rem 0 0; font-size: 1rem; }

/* Wide screens: the approved desktop picture */
@media (min-width: 760px) {
  /* The whole sheet fits the window's height on wide screens (the owner, on a 27-inch monitor: "too blown up");
     past the sheet's sides the band and the butter simply continue. */
  .page { aspect-ratio: 1672 / 941; width: min(100%, calc(100svh * 1672 / 941)); margin: 0 auto; --band-h: 28.6%; }
  body { background: linear-gradient(var(--ivory), var(--ivory)) top / 100% calc(min(100vw, 100svh * 1672 / 941) * 941 / 1672 * 0.171) no-repeat, var(--butter); }
  .band-phone { display: none; }
  .band-desk { display: block; }
  .rays-left { display: none; } /* on desktop Coco sits against WINK's left side */
  .mark { left: 49.6%; top: 6%; width: 22%; }
  .dashes { top: 40%; width: 4%; }
  .dashes-l { left: 33%; }
  .dashes-r { left: 66.4%; }
  .tagline { top: 84%; font-size: calc(1.6cqw + 0.75rem); }
  .hello { left: 41.3%; top: 92.2%; font-size: calc(2.1cqw + 0.85rem); }
  .place { left: 65.1%; top: 74.1%; width: 30.3%; min-height: 10.9%; font-size: calc(1.35cqw + 0.65rem); gap: 2cqw; }
  .place-icon { width: 6cqw; }
  .follow { left: 61.5%; top: 86.7%; width: 36.1%; min-height: 9.4%; font-size: calc(1.05cqw + 0.55rem); gap: 1.2cqw; border-width: 0.45cqw; }
  .follow-icon { width: 2.8cqw; }
  .sticker { left: calc(var(--dx) * 1%); top: calc(var(--dy) * 1%); width: calc(var(--dw) * 1%); }
  .foot { padding: 3rem 2rem 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sticker, .sticker img, .follow { transition: none; }
}

/* The link to the sister brand: its own mark, so the family reads at a glance */
.sister-link { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; padding: 0.4rem 0.2rem; }
.sister-link img { width: 7.5rem; height: auto; }
.sister-link .sister-url { font-size: 0.95rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.sister-link:hover .sister-url { text-decoration-thickness: 3px; }

/* One screen, no scrolling (the owner, 2026-10-27: "no scrlling down"): the sheet fits the room the window has, and
   the strip below it holds the paragraph and the links. The ivory band continues past the sheet's sides. */
html, body { height: 100%; }
body { display: flex; flex-direction: column; height: 100svh; background: var(--butter); }
.stage {
  --ar: calc(941 / 1672);
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  container-type: size;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(min(100cqh, 100cqw / var(--ar)) * 0.172);
  background: var(--ivory);
}
.page { flex: none; width: min(100%, calc(100cqh * var(--ar))); max-width: none; margin: 0; }
.foot {
  flex: none;
  padding: 0.55rem 1rem 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 1.5rem;
}
.about { font-size: clamp(0.85rem, 0.78rem + 0.35vw, 1.05rem); max-width: 38ch; line-height: 1.3; }
.tidy { margin: 0; gap: 0.5rem; }
.tidy button { font-size: 0.85rem; padding: 0.25rem 0.75rem; }
.parent { margin: 0; }
.sister-link { padding: 0.15rem; }
.sister-link img { width: 5.5rem; }
@media (min-width: 760px) {
  body { background: var(--butter); }
  .stage { --ar: calc(1672 / 941); }
  .page { width: min(100%, calc(100cqh * var(--ar))); }
  .foot { padding: 0.6rem 2rem 0.75rem; flex-wrap: nowrap; }
  .about { max-width: none; }
}
@media (min-width: 760px) and (max-width: 1099px) { .foot { flex-wrap: wrap; } }
/* "Put everyone back" and "Shuffle" appear after the first move; they must not shift the footer's line or resize the
   sheet (the owner, 2026-11-07). Wider screens keep their place from the start, unseen; on phones they take the
   line's place in a row of the same height. */
@media (min-width: 760px) { .tidy[hidden] { display: flex; visibility: hidden; } }
@media (max-width: 759px) {
  .about, .tidy { min-height: 29px; }
  .about { display: flex; align-items: center; justify-content: center; }
  .foot:has(.tidy:not([hidden])) .about { display: none; }
}
/* Phones taller than the sheet: the sheet grows to the footer and the stickers spread down with it, instead of an
   empty strip of butter under the Follow button (2026-10-27). The band keeps its height. */
@media (max-width: 759px) {
  @container (max-aspect-ratio: 941 / 1672) {
    .page { height: min(100cqh, calc(100cqw / var(--ar) * 1.25)); aspect-ratio: auto; --band-h: calc(100cqw / var(--ar) * 0.216); }
  }
}
/* Both pages' footer strips are the same height on wider screens (the owner, 2026-11-07): 56 px. */
@media (min-width: 760px) { .foot { min-height: 56px; } }