/* Back to the Fig, the site's kit.
   The two live pages (landing/index.html, the front page, and
   landing/mission.html) and the review rounds before them (landing/proposals/)
   share this sheet so they stay one brand. The tokens, the type, the stones,
   the door and the footer came from the earlier landing; the two doors, the
   pen and the tightrope are the deck's (landing/deck.html). Paths in the kit's
   scripts are written from landing/: the live pages sit there (at "/" the
   server's <base> points them at /new-landing/), and every review page sets
   <base href="../">. */

@font-face {
  font-family: 'ABC Social'; font-weight: 400; font-style: normal;
  src: local('ABC Social Unlicensed Trial Regular'), local('ABCSocialUnlicensedTrial-Regular');
}

:root {
  color-scheme: only light;
  --paper: #f9fafb;
  --white: #fff;
  --red: #d70000;
  --blue: #0000b8;
  --ink: #171717;
  --muted: rgb(23 23 23 / 0.55);
  --quiet: rgb(23 23 23 / 0.7);
  --hair: rgb(23 23 23 / 0.08);
  --imsg-blue: #0a7aff;
  --display: clamp(30px, 5.21vw, 75px);
  --title: clamp(28px, 3.45vw, 50px);
  --beat: clamp(56px, 11.04vw, 159px);
  --gutter: clamp(16px, 5vw, 72px);
  --ease: cubic-bezier(0.4, 0, 0.1, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.3, 1.3, 0.5, 1);
  --pop: cubic-bezier(0.3, 1.6, 0.5, 1);
  --shadow: 0 2px 6px rgb(23 21 15 / 0.06), 0 12px 32px rgb(23 21 15 / 0.1);
  --shadow-lift: 0 6px 14px rgb(23 21 15 / 0.16), 0 22px 48px rgb(23 21 15 / 0.24);
  --shadow-card: 0 2px 5px rgb(23 21 15 / 0.09), 0 12px 26px rgb(23 21 15 / 0.13);
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'ABC Social', 'Helvetica Neue', system-ui, sans-serif;
  --apple: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
}

/* on a phone the paper is white (John, 18 Oct: "the whole landing page on
   mobile ... should also be white"); both pages' theme-color follows */
@media (max-width: 699px) { :root { --paper: #fff; } }

* { box-sizing: border-box; }
html { overflow-x: clip; background: var(--paper); scrollbar-width: thin; }
body {
  margin: 0;
  position: relative;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, b, strong { font-weight: 400; }
img, video, svg { display: block; }
img, video { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls, video::-webkit-media-controls-panel, video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* ── type ─────────────────────────────────────────────────────────────── */
/* the second voice: a keyword in an italic serif, as on the landing */
.kw { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.display { margin: 0; font-size: var(--display); line-height: 0.933; letter-spacing: -0.02em; text-wrap: balance; }
.display--xl { font-size: clamp(44px, 8.4vw, 132px); line-height: 0.9; letter-spacing: -0.035em; }
.title { margin: 0; font-size: var(--title); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.statement { margin: 0; font-size: clamp(26px, 3.3vw, 48px); line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; }
.kicker { margin: 0 0 18px; font-size: 16px; line-height: 1.4; letter-spacing: 0; color: var(--muted); }
.lede { margin: 0; max-width: 30em; font-size: clamp(17px, 1.42vw, 21px); line-height: 1.45; color: var(--quiet); text-wrap: pretty; }
.note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.center { text-align: center; }
.center .lede, .center .title, .center .statement, .center .display { margin-left: auto; margin-right: auto; }
.red { color: var(--red); }
.blue { color: var(--blue); }

/* ── rhythm ───────────────────────────────────────────────────────────── */
.wrap { width: min(100%, 1240px); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { width: min(100%, 860px); }
.screen { position: relative; min-height: 100svh; display: grid; place-items: center; padding: var(--beat) var(--gutter); }
.section { position: relative; padding: var(--beat) 0; }
.paper { background: var(--paper); }
.white { background: #fff; }
.ground-red { background: var(--red); color: var(--ink); }

/* ── arrivals: .rise inside anything the observer marks .in ──────────── */
.rise { opacity: 0; transform: translateY(18px); transition: opacity 900ms var(--ease), transform 1100ms var(--expo); transition-delay: var(--d, 0ms); }
.in .rise, .rise.in { opacity: 1; transform: none; }
.fade { opacity: 0; transition: opacity 1100ms var(--ease); transition-delay: var(--d, 0ms); }
.in .fade, .fade.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rise, .fade { opacity: 1; transform: none; transition: none; }
}

/* ── the hand-lettered words (assets/word-*.png), set on the baseline as
   the landing sets them: a fixed 0.66em margin box, the art overflowing ── */
.wordwrap { white-space: nowrap; }
.word { display: inline-block; width: auto; vertical-align: baseline; transform-origin: 50% 82%; margin: 0 -0.06em 0 0.02em; }
.word--wonder       { height: 1.2em;  margin-top: -0.43em; margin-bottom: -0.11em; }
.word--play         { height: 1.12em; margin-top: -0.17em; margin-bottom: -0.29em; }
.word--togetherness { height: 1.2em;  margin-top: -0.31em; margin-bottom: -0.23em; }
.word--spontaneous  { height: 1.3em;  margin-top: -0.45em; margin-bottom: -0.25em; }
.word--leisure      { height: 1.2em;  margin-top: -0.35em; margin-bottom: -0.2em; }
/* slapped on as they arrive, one after another */
.in .word.stick { animation: stick 640ms cubic-bezier(0.2, 0.9, 0.3, 1) both; animation-delay: var(--d, 0ms); }
@keyframes stick {
  0% { opacity: 0; transform: translateY(-0.4em) scale(1.4) rotate(-8deg); }
  45% { opacity: 1; transform: translateY(0) scale(0.93) rotate(2deg); }
  70% { transform: scale(1.04) rotate(0deg); }
  100% { opacity: 1; transform: none; }
}
.word.stick { opacity: 0; }
.in .word.stick { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .word.stick { opacity: 1; } .in .word.stick { animation: none; } }

/* the glitter stickers (assets/word-*-sticker.png), outside the film */
.sticker { display: inline-block; vertical-align: baseline; filter: drop-shadow(0 1px 1px rgb(40 30 20 / 0.16)) drop-shadow(0 4px 7px rgb(40 30 20 / 0.12)); }
.sticker img { display: block; height: 100%; width: auto; }
.sticker--visual    { height: 1.51em; margin-top: -0.57em; margin-bottom: -0.28em; }
.sticker--social    { height: 1.5em;  margin-top: -0.5em;  margin-bottom: -0.34em; }
.sticker--proactive { height: 1.52em; margin-top: -0.42em; margin-bottom: -0.44em; }
.sticker--playful   { height: 1.48em; margin-top: -0.35em; margin-bottom: -0.47em; }

/* the seal over the answer: the light the paper opens from */
.seal { display: block; width: clamp(44px, 6vw, 76px); margin: 0 auto clamp(28px, 6svh, 64px); }
.seal img { width: 100%; height: auto; animation: seal-float 6.5s ease-in-out infinite; }
@keyframes seal-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .seal img { animation: none; } }

/* the answer: Back to the Fig is building an AI that brings wonder, play,
   and togetherness to humans (the landing's .phase.to) */
.answer { margin: 0 auto; max-width: 1100px; font-size: clamp(34px, 4.2vw, 64px); line-height: 1.02; letter-spacing: -0.02em; text-align: center; text-wrap: pretty; }
@media (max-width: 640px) { .answer { line-height: 1.2; } }
@media (max-width: 640px) { .answer br { display: none; } }

/* ── the change between the two pages ─────────────────────────────────── */
/* by the top switch, one smooth move rather than a page that blanks and
   rebuilds (John, 17 Oct: "quite choppy"): the page left goes to paper under
   the switch while its pill travels, and the page arrived at comes up off the
   paper (kit.js K.topnav sets is-leaving; the note it leaves is read in each
   page's head, which sets is-arriving before the first paint). The switch
   stays where it is on both. By hand, not by the browser's view transitions:
   those dropped these two pages' change more often than not */
html.is-leaving main, html.is-leaving .site-footer, html.is-leaving .float-cta { opacity: 0; transition: opacity 340ms ease 290ms; }
html.is-arriving main, html.is-arriving .site-footer { animation: fig-arrive 480ms cubic-bezier(0.25, 0.7, 0.3, 1); }
@keyframes fig-arrive { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.is-leaving main, html.is-leaving .site-footer, html.is-leaving .float-cta { transition: none; }
  html.is-arriving main, html.is-arriving .site-footer { animation: none; }
}

/* ── the top switch between the two pages ─────────────────────────────── */
.topnav {
  position: fixed; z-index: 70;
  top: calc(env(safe-area-inset-top, 0px) + clamp(12px, 2vw, 20px)); left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: 999px; background: rgb(255 255 255 / 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 0 0 1px rgb(23 23 23 / 0.06), 0 6px 20px rgb(23 21 15 / 0.08);
  font-size: 17px; line-height: 1; white-space: nowrap;
  transition: opacity 400ms ease, translate 400ms var(--expo);
}
/* a size up (John, 17 Oct: "quite a bit larger") */
.topnav { gap: 3px; padding: 5px; }
.topnav a { position: relative; z-index: 1; display: block; padding: 12px 21px 13px; border-radius: 999px; color: rgb(23 23 23 / 0.62); text-decoration: none; transition: color 220ms ease; }
.topnav a:hover { color: var(--ink); }
.topnav a[aria-current="page"] { background: var(--ink); color: #fff; }
.topnav a.seal-dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin-right: 2px; }
.topnav a.seal-dot img { width: 31px; height: 31px; object-fit: contain; }
.topnav.hide { opacity: 0; translate: -50% -12px; pointer-events: none; }
/* the pill is its own thing behind the words, so it can travel (kit.js
   K.topnav: ?toggle=1..3) */
.topnav.has-blob a[aria-current="page"] { background: none; }
.topnav.has-blob a.is-from { color: rgb(23 23 23 / 0.62); }
.topnav.has-blob a.is-to { color: #fff; }
.tn-blob { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--ink); pointer-events: none; }
.tn-goo { position: absolute; inset: 0; filter: url(#tn-goo); pointer-events: none; }
.tn-ink { opacity: 0; }
.tn-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (max-width: 640px) {
  .topnav { font-size: 15.5px; }
  .topnav a { padding: 11px 16px 12px; }
  .topnav a.seal-dot { width: 40px; height: 40px; }
  .topnav a.seal-dot img { width: 28px; height: 28px; }
}
/* the proposal tag in the corner, so a screenshot says which one it is */
.ptag { position: fixed; z-index: 70; left: clamp(12px, 2vw, 20px); bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 2vw, 20px)); padding: 6px 10px; border-radius: 6px; background: rgb(255 255 255 / 0.85); box-shadow: 0 0 0 1px rgb(23 23 23 / 0.06); font: 500 11px/1.2 var(--apple); letter-spacing: 0.02em; color: var(--muted); text-decoration: none; }
.ptag:hover { color: var(--ink); }
@media (max-width: 640px) { .ptag { display: none; } }
/* the switch between a section's versions (K.picker) */
.vpick { position: fixed; z-index: 68; right: clamp(12px, 2vw, 20px); bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 2vw, 20px)); display: flex; align-items: center; gap: 3px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgb(23 23 23 / 0.08), 0 8px 24px rgb(23 21 15 / 0.12); font: 400 12px/1 var(--apple); color: var(--muted); opacity: 0; translate: 0 10px; pointer-events: none; transition: opacity 400ms ease, translate 500ms var(--expo); }
.vpick.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.vpick span { padding: 0 8px 0 10px; white-space: nowrap; }
.vpick span b { font-weight: 500; color: var(--ink); }
.vpick a { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; color: var(--ink); text-decoration: none; }
.vpick a[aria-current="true"] { background: var(--ink); color: #fff; }
.vpick a b { font-weight: 500; }
.vpick--2 { bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 2vw, 20px) + 48px); }
.vpick--3 { bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 2vw, 20px) + 96px); }
.vpick--4 { bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 2vw, 20px) + 144px); }
@media (max-width: 640px) {
  .vpick span { display: none; }
  .vpick { right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); padding: 3px; gap: 1px; background: rgb(255 255 255 / 0.82); }
  .vpick a { min-width: 24px; height: 24px; padding: 0 6px; font-size: 11px; }
  .vpick--2 { bottom: calc(env(safe-area-inset-bottom, 0px) + 108px); }
  .vpick--3 { bottom: calc(env(safe-area-inset-bottom, 0px) + 142px); }
  .vpick--4 { bottom: calc(env(safe-area-inset-bottom, 0px) + 176px); }
  /* folded to its own number until tapped (kit.js) */
  .vpick:not(.is-open) { padding: 2px; background: rgb(255 255 255 / 0.66); }
  .vpick:not(.is-open) a:not([aria-current="true"]) { display: none; }
}

/* ── pills: the white call to action, and its ink twin ───────────────── */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0.72em 1.6em 0.78em; border: 1px solid rgb(23 23 23 / 0.08); border-radius: 999px;
  background: #fff; color: var(--ink); box-shadow: var(--shadow);
  font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: box-shadow 250ms ease, scale 200ms var(--ease), background-color 250ms ease;
}
.pill:hover { box-shadow: 0 2px 6px rgb(23 21 15 / 0.08), 0 16px 40px rgb(23 21 15 / 0.16); }
.pill:active { scale: 0.97; }
.pill--ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill--small { font-size: 15px; padding: 0.62em 1.2em 0.66em; }
/* "Join the alpha" a step up, where it is the page's own call (John, 17 Oct:
   "a bit larger and bolder, like the current one on the website"): the
   hero's, and the one that floats along the foot. Larger only: the type
   keeps the regular weight it always had (John, 18 Oct: "keep the same one
   as we had before") */
.pill--cta { font-size: 20px; padding: 0.7em 1.7em 0.76em; }
@media (max-width: 640px) { .pill--cta { font-size: 17px; } }
/* the door's, large, the answer to "want in?" */
.pill--big { font-size: clamp(20px, 2vw, 27px); padding: 0.66em 1.6em 0.72em; }
/* the community, as plain to see: Discord's own blue and mark */
.pill--discord { gap: 0.5em; background: #5865f2; border-color: #5865f2; color: #fff; }
.pill--discord:hover { background: #4752c4; }
.pill--discord svg { flex: none; width: 1.2em; height: 1.2em; fill: currentColor; }
.float-cta { position: fixed; z-index: 65; left: 50%; bottom: calc(max(18px, 4svh) + env(safe-area-inset-bottom, 0px)); translate: -50% 14px; opacity: 0; pointer-events: none; transition: opacity 500ms ease, translate 600ms var(--expo); }
.float-cta.on { opacity: 1; translate: -50% 0; pointer-events: auto; }

/* ── iMessage bubbles (iOS 26, measured: see the deck's guilt-trip slide) ── */
.thread { min-width: 0; display: flex; flex-direction: column; gap: 0.26em; font: 400 17px/1.2 var(--apple); font-variation-settings: 'opsz' 17; letter-spacing: -0.025em; text-align: left; }
.thread .who { margin: 0.59em 0 0.1em 0.9em; font-size: 0.72em; letter-spacing: 0.01em; color: rgb(23 23 23 / 0.45); }
.thread .who:first-child { margin-top: 0; }
.bub {
  position: relative; isolation: isolate; width: max-content; max-width: min(19em, 100%); margin: 0;
  padding: 0.61em 0.87em 0.63em; border-radius: 1.2em; background: var(--bg, #e9e9eb); color: var(--fg, #000);
  overflow-wrap: break-word;
}
.bub--me { align-self: flex-end; --bg: var(--imsg-blue); --fg: #fff; background: linear-gradient(180deg, #3d9fff, #0a7aff 58%); }
.bub--fig { --bg: #e9e9eb; --fg: #000; }
.bub--white { --bg: #fff; --fg: var(--ink); box-shadow: 0 0 0 1px rgb(23 23 23 / 0.05), 0 6px 18px rgb(23 21 15 / 0.07); }
.bub + .who, .bub--me + .bub:not(.bub--me), .bub:not(.bub--me) + .bub--me { margin-top: 0.33em; }
/* the tail hangs under the corner, carica-lab's own path (BubbleTail.tsx) */
.bub.tail { margin-bottom: 0.3em; }
.bub.tail::after {
  content: ''; position: absolute; z-index: -1; bottom: -0.47em; left: 0; width: 1.41em; height: 1.71em;
  background: var(--bg); transform: scaleX(-1);
  clip-path: path('M 24 0 L 24 1.05 A 19.95 19.95 0 0 1 19.15 14.09 C 17.89 15.55, 13.64 17.93, 13.64 21.24 C 13.64 23.94, 15.76 25.28, 15.92 26.92 Q 15.68 28.13, 14.53 27.69 C 4.39 23.73, 6.7 21, 0.14 21 L 0.14 18.5 L 4.05 18.5 A 17.45 17.45 0 0 0 21.5 1.05 L 21.5 0 Z');
}
.bub--me.tail::after { left: auto; right: 0; transform: none; background: #0a7aff; }
.bub--white.tail::after { filter: drop-shadow(0 1px 0 rgb(23 23 23 / 0.04)); }
/* typing: three dots in a bubble of their own */
.dots { display: inline-flex; gap: 5px; padding: 0.22em 0.1em; }
.dots i { width: 0.47em; height: 0.47em; border-radius: 50%; background: rgb(23 23 23 / 0.45); animation: dot 1.1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 160ms; }
.dots i:nth-child(3) { animation-delay: 320ms; }
@keyframes dot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* a message pops in from its own corner */
.pop { opacity: 0; transform: scale(0.6); transform-origin: 0% 100%; }
.pop.bub--me { transform-origin: 100% 100%; }
.pop.on { opacity: 1; transform: none; transition: opacity 260ms ease, transform 520ms var(--pop); }
@media (prefers-reduced-motion: reduce) { .pop { opacity: 1; transform: none; } }

/* ── the carica lab's own chat (ui/src/lib/bubbleStyles.ts, components/BubbleTail.tsx,
   components/room/Transcript.tsx, design/tokens/palette.css, light): a Fig's bubble is
   the card, white with ink; a person's is the user bubble, ink with near-white words;
   every corner 22px and no border; iMessage's tail, the product's own path, under the
   last bubble of a run only; 4px within a run, 12px between runs; the far side keeps
   40px; in a group the name over the run's first bubble and the face (28px, 8px off)
   by its last. A Fig speaks at 15/22, a person at 16/22, ABC Social. --k scales it
   all at once (John, 16 Oct: the product's shapes, bolder) ── */
:root {
  --tail-r: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2029'%3E%3Cpath%20d='M%2024%200%20L%2024%201.05%20A%2019.95%2019.95%200%200%201%2019.15%2014.09%20C%2017.89%2015.55%2C%2013.64%2017.93%2C%2013.64%2021.24%20C%2013.64%2023.94%2C%2015.76%2025.28%2C%2015.92%2026.92%20Q%2015.68%2028.13%2C%2014.53%2027.69%20C%204.39%2023.73%2C%206.7%2021%2C%200.14%2021%20L%200.14%2018.5%20L%204.05%2018.5%20A%2017.45%2017.45%200%200%200%2021.5%201.05%20L%2021.5%200%20Z'/%3E%3C/svg%3E");
  --tail-l: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2029'%3E%3Cpath%20d='M%200%200%20L%200%201.05%20A%2019.95%2019.95%200%200%200%204.85%2014.09%20C%206.11%2015.55%2C%2010.36%2017.93%2C%2010.36%2021.24%20C%2010.36%2023.94%2C%208.24%2025.28%2C%208.08%2026.92%20Q%208.32%2028.13%2C%209.47%2027.69%20C%2019.61%2023.73%2C%2017.3%2021%2C%2023.86%2021%20L%2023.86%2018.5%20L%2019.95%2018.5%20A%2017.45%2017.45%200%200%201%202.5%201.05%20L%202.5%200%20Z'/%3E%3C/svg%3E");
}
.lchat { --k: 1; --lfig: #fff; --lme: hsl(0 0% 5%); display: flex; flex-direction: column; min-width: 0; padding-bottom: calc(8px * var(--k)); font-family: var(--sans); text-align: left; -webkit-font-smoothing: antialiased; }
.lrow { display: flex; align-items: flex-end; gap: calc(8px * var(--k)); min-width: 0; margin-top: calc(12px * var(--k)); padding-right: calc(40px * var(--k)); transform-origin: 0 100%; }
.lrow:first-child { margin-top: 0; }
.lrow.lrow--run { margin-top: calc(4px * var(--k)); }
.lrow--me { justify-content: flex-end; padding: 0 0 0 calc(40px * var(--k)); transform-origin: 100% 100%; }
.lcol { display: flex; flex-direction: column; align-items: flex-start; gap: calc(4px * var(--k)); min-width: 0; max-width: 100%; }
.lrow--me .lcol { align-items: flex-end; }
.lname { padding-left: calc(4px * var(--k)); font-size: calc(14px * var(--k)); line-height: calc(18px * var(--k)); font-weight: 500; color: hsl(240 2% 46%); }
.lname[hidden] { display: none; }
.lface { flex: none; width: calc(28px * var(--k)); height: calc(28px * var(--k)); }
.lface > * { --s: calc(28px * var(--k)); width: 100%; height: 100%; visibility: hidden; }
.lrow.has-face .lface > * { visibility: visible; }
.lav { display: grid; place-items: center; border-radius: 50%; background: hsl(0 0% 5% / 0.08); color: hsl(0 0% 5%); font-size: calc(12px * var(--k)); font-weight: 500; }
.lchat .lb, .lb { position: relative; width: fit-content; max-width: 100%; margin: 0; padding: calc(12px * var(--k)) calc(16px * var(--k)); border-radius: calc(22px * var(--k)); background: var(--lfig); color: hsl(0 0% 5%); font-size: calc(15px * var(--k)); line-height: calc(22px * var(--k)); font-weight: 400; letter-spacing: 0; overflow-wrap: break-word; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.07)); }
.lchat .lb--me, .lb--me { background: var(--lme); color: hsl(0 0% 97%); font-size: calc(16px * var(--k)); filter: none; }
.lb.tail::after { content: ''; position: absolute; left: 0; bottom: calc(-8px * var(--k)); width: calc(24px * var(--k)); height: calc(29px * var(--k)); background: inherit; -webkit-mask: var(--tail-l) 0 0 / 100% 100% no-repeat; mask: var(--tail-l) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.lb--me.tail::after { left: auto; right: 0; -webkit-mask-image: var(--tail-r); mask-image: var(--tail-r); }
.lpic { display: block; margin: 0; overflow: hidden; border-radius: calc(22px * var(--k)); filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.07)); }
.lpic img { display: block; width: calc(var(--pw, 180px) * var(--k)); height: auto; aspect-ratio: var(--par, auto); object-fit: cover; object-position: var(--pop, 50% 50%); }
.lcard { display: block; max-width: 100%; }
/* typing: the bubble holds the product's three dots until the words land */
.ldots { display: none; align-items: flex-end; gap: calc(4px * var(--k)); box-sizing: border-box; height: calc(20px * var(--k)); padding: calc(6px * var(--k)) 0; }
.ldots i { width: calc(8px * var(--k)); height: calc(8px * var(--k)); border-radius: 50%; background: hsl(240 2% 46%); animation: ltyping 1.2s ease-in-out infinite; }
.ldots i:nth-child(2) { animation-delay: 0.15s; }
.ldots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ltyping { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(calc(-6px * var(--k, 1))); opacity: 1; } }
.lrow.is-typing .lb-t { display: none; }
.lrow.is-typing .ldots { display: flex; }
/* played: every row keeps its place from the start, so nothing jumps */
.lrow.is-wait { visibility: hidden; }
.lrow.is-in { animation: lrow-in 520ms var(--expo) both; }
@keyframes lrow-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
.lchat .lrow { transition: opacity 400ms ease; }
.lchat.is-fading .lrow { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .lrow.is-in { animation: none; } .ldots i { animation: none; } }

/* ── Timur's map marks (PR #4328 feat/carica-room-types,
   features/board/arrival/room-map.css), as the new Mind Rooms draw them on
   the muted Apple map: a stop in the rooms' white pill with its number, home
   in ink, a spot with its kind in a rounded square, a card on a stem, a
   ring's name in a small white pill, a fan of prints ── */
.rb-stop { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border-radius: 9999px; background: #fff; border: 1px solid rgb(0 0 0 / 0.05); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 6px 16px -6px rgb(0 0 0 / 0.22); color: hsl(0 0% 5%); font: 500 13px/1 var(--sans); white-space: nowrap; }
.rb-stop b { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 9999px; background: hsl(0 0% 5%); color: hsl(300 8% 97.5%); font-size: 12px; font-weight: 500; }
.rb-stop.is-flip { flex-direction: row-reverse; padding: 0 6px 0 14px; }
.rb-home.rb-stop { gap: 6px; padding-left: 10px; background: hsl(0 0% 5%); color: #fff; border-color: transparent; }
.rb-home svg { width: 16px; height: 16px; flex: none; }
.rb-spot.rb-stop { height: 44px; padding-left: 4px; border-radius: 14px; }
.rb-spot i { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: #f1f0f2 center / cover; color: #19191b; font-style: normal; font-size: 18px; line-height: 1; }
.rb-spot.is-flip { flex-direction: row-reverse; padding: 0 4px 0 14px; }
.rb-pin { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.rb-pin.is-flip { align-items: flex-end; }
.rb-pin > .rb-stop { position: relative; z-index: 1; }
.rb-pin-stem { display: block; width: 2px; height: 12px; margin-left: 21px; background: hsl(0 0% 5%); }
.rb-pin-dot { display: block; box-sizing: border-box; width: 10px; height: 10px; margin-left: 17px; border-radius: 9999px; border: 2px solid #fff; background: hsl(0 0% 5%); box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); }
.rb-pin.is-flip .rb-pin-stem { margin: 0 21px 0 0; }
.rb-pin.is-flip .rb-pin-dot { margin: 0 17px 0 0; }
.rb-ring-label { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 10px rgb(0 0 0 / 0.08); color: hsl(0 0% 5%); font: 500 11px/18px var(--sans); white-space: nowrap; }
.rb-fan { position: absolute; z-index: 0; top: -104px; left: 50%; translate: -50% 0; width: 84px; height: 122px; pointer-events: none; }
.rb-fan i { position: absolute; left: 0; bottom: 0; width: 84px; height: 106px; box-sizing: border-box; border-radius: 10px; border: 3px solid #fff; background: #ddd center / cover; box-shadow: 0 6px 14px -6px rgb(0 0 0 / 0.35); transform-origin: 50% 110%; rotate: calc(-18deg + var(--k) * 18deg); }

/* ── a Fig's face: the deck's fig, coloured per Fig (Pip plum, Mochi green,
   Basil amber), on a dark disc ───────────────────────────────────────── */
/* a Fig's face: the real fig, cut (John, 17 Oct: "lets use this image
   instead of the ai drawn fig profile pic"), each Fig its own part of the
   same fruit (assets/site/lab/face-*.webp, crops of assets/m12.jpg): Pip the
   cut edge, Basil the seeds, Juno the rim on blue, Mochi deep in the red */
.figav { display: inline-grid; place-items: center; flex: none; width: var(--s, 34px); height: var(--s, 34px); border-radius: 50%; overflow: hidden; background: #b4203a url('../lab/face-pip.webp') center / cover no-repeat; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.12); }
.figav svg { display: none; }
.figav--pip   { background-image: url('../lab/face-pip.webp'); }
.figav--basil { background-image: url('../lab/face-basil.webp'); }
.figav--juno  { background-image: url('../lab/face-juno.webp'); }
.figav--mochi { background-image: url('../lab/face-mochi.webp'); }
.figav--red   { background-image: url('../lab/face-pip.webp'); box-shadow: 0 0 0 1px rgb(23 23 23 / 0.08); }
.face { display: block; flex: none; width: var(--s, 34px); height: var(--s, 34px); border-radius: 50%; object-fit: cover; }

/* ── a card from the reflection library (deck-assets/kinds/*.html), drawn
   at its own 428px and scaled to the box it stands in ────────────────── */
.cardbox { position: relative; width: var(--cw, 360px); max-width: 100%; }
.cardbox iframe { position: absolute; left: 0; top: 0; width: 428px; border: 0; transform-origin: 0 0; background: transparent; pointer-events: none; color-scheme: light; }
.cardbox.live iframe { pointer-events: auto; }

/* ── photographs set down on the page ─────────────────────────────────── */
.print { margin: 0; background: #fff; padding: 0.55em 0.55em 1.9em; box-shadow: var(--shadow-lift); rotate: var(--rot, 0deg); }
.print img, .print video { width: 100%; height: auto; aspect-ratio: var(--ar, 1); object-fit: cover; background: #ddd; }
.print figcaption { margin-top: 0.6em; font: 400 0.8em/1.2 var(--sans); color: var(--quiet); text-align: left; }
.snap { margin: 0; box-shadow: var(--shadow-lift); rotate: var(--rot, 0deg); background: #ddd; }
.snap img, .snap video { width: 100%; height: auto; aspect-ratio: var(--ar, auto); object-fit: cover; }
.tape { position: absolute; z-index: 2; left: 50%; top: -0.7em; width: 5.2em; height: 1.4em; translate: -50% 0; rotate: var(--tr, -3deg); background: rgb(255 248 220 / 0.72); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }

/* ── the pen: one of the six traced lines, scaled whole, drawn in left to
   right like a pen as it arrives ─────────────────────────────────────── */
.pen { display: block; width: 100%; height: auto; overflow: visible; clip-path: inset(-60% 100% -60% 0); transition: clip-path 1100ms cubic-bezier(0.6, 0.05, 0.3, 1); transition-delay: var(--pd, 300ms); }
.in .pen, .pen.in { clip-path: inset(-60% -2% -60% 0); }
.pen path { fill: var(--pen, #000); shape-rendering: geometricPrecision; }
.pen path.fringe { opacity: 0.16; }
@media (prefers-reduced-motion: reduce) { .pen { clip-path: none; transition: none; } }
/* marks drawn by a Fig on the page (circles, underlines): an SVG stroke
   that writes itself in */
.mark { position: absolute; pointer-events: none; overflow: visible; z-index: 3; }
.mark path { fill: none; stroke: var(--mk, var(--red)); stroke-width: var(--mw, 3); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--L, 2000); stroke-dashoffset: var(--L, 2000); }
.mark.on path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--md, 900ms) cubic-bezier(0.55, 0.05, 0.35, 1); }
@media (prefers-reduced-motion: reduce) { .mark path { stroke-dashoffset: 0; } }

/* ── a Fig at work on the page: the iPad pointer, a small glass disc with
   its name beside it, as the landing's Figs (the .hand) ──────────────── */
.figcur { position: absolute; left: 0; top: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity 300ms ease; --hand: #1f6feb; }
.figcur.on { opacity: 1; }
.figcur .pad { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: rgb(255 255 255 / 0.6); -webkit-backdrop-filter: blur(8px) saturate(1.8); backdrop-filter: blur(8px) saturate(1.8); box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.8), 0 0 0 0.5px rgb(23 23 23 / 0.18), 0 2px 6px rgb(23 21 15 / 0.22); transition: all 220ms var(--spring); }
.figcur.draw .pad { left: -4px; top: -4px; width: 8px; height: 8px; background: var(--hand); box-shadow: 0 0 0 1.5px #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.figcur b { position: absolute; left: 10px; top: 8px; padding: 4px 9px; border-radius: 2px; background: #fff; color: var(--hand); box-shadow: 0 0 0 0.5px rgb(23 21 15 / 0.05), 0 1px 1px rgb(23 21 15 / 0.05), 0 2px 6px rgb(23 21 15 / 0.08); font: 500 12px/1.2 var(--apple); white-space: nowrap; transition: padding 180ms ease, font-size 180ms ease, border-radius 180ms ease; }
.figcur.talk b { padding: 7px 13px; font-size: 14px; border-radius: 4px 18px 18px 18px; color: var(--ink); }
.figcur.flip b { left: auto; right: 10px; }
.figcur.flip.talk b { border-radius: 18px 4px 18px 18px; }
.figcur.grip .pad { scale: 0.82; background: rgb(255 255 255 / 0.82); }

/* ── the board the Figs set: pictures pulled in round the words ──────── */
.board-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bpiece { position: absolute; margin: 0; pointer-events: auto; cursor: grab; touch-action: none; rotate: var(--rot, 0deg); background: #e9e7e2; box-shadow: var(--shadow-lift); transition: rotate 600ms var(--spring), scale 500ms var(--spring), box-shadow 400ms ease; }
.bpiece img, .bpiece video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, auto); object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.bpiece.carried { transition: none; scale: 1.05; box-shadow: 0 14px 28px rgb(23 21 15 / 0.22), 0 34px 70px rgb(23 21 15 / 0.26); z-index: 3; }
.bpiece.held { cursor: grabbing; scale: 1.05; z-index: 4; transition: scale 300ms var(--spring); }
.bpiece.drop-in { animation: drop-in 900ms var(--spring) both; animation-delay: var(--dd, 0ms); }
@keyframes drop-in { from { opacity: 0; translate: 0 -26px; scale: 1.08; } to { opacity: 1; translate: 0 0; scale: 1; } }
/* the wabi-sabi finishes: a polaroid's border, a strip of tape, a torn edge */
.bpiece.pol { background: #fff; padding: 6px 6px 22px; }
.bpiece.taped::after { content: ''; position: absolute; left: 50%; top: -10px; width: 44%; height: 18px; translate: -50% 0; rotate: var(--tr, -4deg); background: rgb(255 248 222 / 0.74); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); }
.bpiece.torn { background: none; box-shadow: none; filter: drop-shadow(0 8px 14px rgb(23 21 15 / 0.22)); }
.bpiece.torn img, .bpiece.torn video { clip-path: polygon(0 3%, 7% 0, 15% 2%, 24% 0, 33% 3%, 45% 1%, 55% 3%, 66% 0, 78% 2%, 88% 0, 100% 2%, 98% 14%, 100% 27%, 97% 41%, 100% 55%, 98% 70%, 100% 84%, 97% 100%, 86% 97%, 74% 100%, 61% 97%, 49% 100%, 37% 97%, 25% 100%, 13% 97%, 0 100%, 2% 86%, 0 72%, 3% 58%, 0 44%, 2% 30%, 0 16%); }
.bpiece.faded img { filter: saturate(0.75) contrast(0.95) sepia(0.12); }
@media (prefers-reduced-motion: reduce) { .bpiece.drop-in { animation: none; } }

/* highlighter strokes sit under the words, pen strokes over them */
.marked-root { position: relative; isolation: isolate; }
.mark--hl { z-index: -1; mix-blend-mode: multiply; }
.mark--hl path { stroke: var(--mk, rgb(255 214 64 / 0.62)); stroke-linecap: round; }

/* ── the memory stones (Carica's own engine, assets/stones/carica-stones.js),
   the landing's #yours stage ─────────────────────────────────────────── */
.stones { position: absolute; inset: 0; z-index: 1; pointer-events: none; letter-spacing: 0; line-height: 1.3; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.stones.reading { z-index: 6; }
.stone-o {
  position: absolute; margin: 0; rotate: var(--r, 0deg); pointer-events: auto; cursor: grab; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transform: translate(calc(var(--px, 0) * var(--dd, 0) * 1px), calc(var(--py, 0) * var(--dd, 0) * 1px));
  transition: translate 500ms var(--spring), rotate 500ms ease, opacity 400ms ease, scale 500ms var(--spring), transform 1100ms var(--expo);
}
.stones.static .stone-o { cursor: default; }
.stone-o:active { cursor: grabbing; }
.stone-o img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 0.05em 0.083em hsl(0 0% 0% / 0.14)); animation: stone-float var(--fl, 6s) ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes stone-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(1.2deg); } }
.stone-o img.wait { visibility: hidden; }
/* a section out of sight holds its animations still (kit.js, K.offscreen) */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }
.stone-o.lift { translate: 0 -10px; scale: 1.05; rotate: 0deg; z-index: 5; }
.stone-o.fresh { animation: stone-in 700ms var(--spring) both; }
.stone-o.drop { animation: stone-drop 900ms cubic-bezier(0.3, 1.25, 0.5, 1) both; animation-delay: var(--sd, 0ms); }
@keyframes stone-in { from { opacity: 0; scale: 0.7; } to { opacity: 1; scale: 1; } }
@keyframes stone-drop { 0% { opacity: 0; translate: 0 -60vh; rotate: calc(var(--r, 0deg) - 40deg); } 70% { opacity: 1; translate: 0 6px; } 100% { opacity: 1; translate: 0 0; rotate: var(--r, 0deg); } }
.stone-o.going { opacity: 0; scale: 0.6; transition: opacity 380ms ease, scale 420ms ease; }
.stone-x {
  position: absolute; left: 50%; top: calc(100% + 4px); translate: -50% 0;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px;
  border: 1px solid rgb(23 23 23 / 0.08); border-radius: 999px; background: #fff; color: var(--ink);
  box-shadow: 0 1px 3px rgb(23 21 15 / 0.08), 0 4px 12px rgb(23 21 15 / 0.1);
  font: 500 12px/1.2 system-ui, sans-serif; white-space: nowrap; cursor: pointer; opacity: 0; transition: opacity 200ms ease;
}
.stone-x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.stone-x:hover { color: #c62a1c; }
.stone-o:hover .stone-x, .stone-o:focus-within .stone-x, .stone-o.sel .stone-x { opacity: 1; }
.stone-o.sel { outline: none; }
@media (pointer: coarse), (max-width: 640px) { .stone-x { display: none; } }
.stone-note {
  position: absolute; left: 8%; top: 2%; z-index: 2; translate: -30% -60%;
  max-width: 16em; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: #fff;
  box-shadow: 0 2px 6px hsl(0 0% 0% / 0.04), 0 14px 32px hsl(0 0% 0% / 0.1);
  font-size: 14px; line-height: 1.3; color: var(--ink); white-space: nowrap;
  animation: stone-in 400ms var(--spring) both;
}
.stone-note::before { content: '✎ '; color: var(--blue); }
.stone-why {
  position: absolute; left: 62%; top: 34%; z-index: 2;
  display: grid; gap: 8px; text-align: left;
  padding: 10px 14px 12px 10px; border-radius: 14px; background: #fff;
  box-shadow: 0 2px 6px hsl(0 0% 0% / 0.04), 0 14px 32px hsl(0 0% 0% / 0.1);
  font-size: 13px; line-height: 1.35; color: rgb(23 23 23 / 0.7); white-space: nowrap;
  animation: stone-in 400ms var(--spring) both;
}
.stone-why b { padding-left: 4px; font-weight: 500; color: var(--ink); }
.stone-why .why-row { display: flex; align-items: flex-start; gap: 9px; }
.stone-why .why-row > span { padding-top: 5px; }
.stone-why .app { flex: none; width: 28px; height: 28px; border-radius: 7.5px; overflow: hidden; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.08); }
.stone-why .app svg { display: block; width: 100%; height: 100%; }
.stone-why .why-thumbs { display: flex; gap: 4px; margin-top: 6px; }
.stone-why .why-thumbs img { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; }
.stone-o.flip .stone-why { left: auto; right: 62%; }
/* without WebGL a stone is a soft pebble of paper with its words, so the
   section still reads */
.stone-o.flat { display: grid; place-items: center; aspect-ratio: 1 / 0.82; padding: 12%; border-radius: 46% 54% 50% 50% / 55% 48% 52% 45%; background: radial-gradient(120% 90% at 30% 25%, #fff 0%, #eef0f7 45%, #dfe5f1 100%); box-shadow: inset 0 -6px 14px rgb(120 130 170 / 0.18), 0 10px 22px rgb(23 21 15 / 0.12); font: 300 clamp(12px, 1.1vw, 16px)/1.2 'Fraunces', serif; color: #3b3f52; text-align: center; }
@media (prefers-reduced-motion: reduce) { .stone-o, .stone-o.fresh, .stone-o.drop, .stone-o img, .stone-note, .stone-why { transition: none; animation: none; } .stone-o { transform: none; } }

/* ── the two doors: more time to scroll, more time to live (the deck's
   slide 2, the split screen) ─────────────────────────────────────────── */
.doors2 { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 100svh; min-height: 560px; overflow: clip; }
.doors2 > .half { position: relative; overflow: clip; container-type: size; display: grid; place-items: center; --u: min(1.6cqw, 1.05cqh); }
.doors2 > .half--scroll { background: var(--red); }
.doors2 > .half--live { background: var(--paper); }
.doors2 .dtitle { position: relative; z-index: 3; top: 7cqh; margin: 0; max-width: 4.8em; font-size: clamp(28px, 4.9vw, 70px); line-height: 1.02; letter-spacing: -0.02em; text-align: center; text-wrap: balance; }
.doors2 .tile { position: absolute; z-index: 1; margin: 0; width: calc(var(--s) * var(--u)); box-shadow: var(--shadow-lift); opacity: 0; scale: 1.1; transition: opacity 900ms var(--ease) var(--dl, 0ms), scale 1300ms var(--expo) var(--dl, 0ms); }
.doors2 .tile img, .doors2 .tile video { width: 100%; height: auto; aspect-ratio: var(--ar, 3 / 4); object-fit: cover; }
.in.doors2 .tile, .in .doors2 .tile { opacity: 1; scale: 1; }
.half--scroll .t1 { left: calc(65% - 26 * var(--u)); top: 4%; --s: 26; --ar: 4 / 5; --dl: 150ms; }
.half--scroll .t2 { left: calc(94% - 17 * var(--u)); top: 36%; --s: 17; --ar: 4 / 5; --dl: 330ms; }
.half--scroll .t3 { left: calc(92% - 26 * var(--u)); top: 70%; --s: 26; --ar: 1 / 0.92; --dl: 510ms; }
.half--scroll .t4 { left: calc(24% - 17 * var(--u)); top: 44%; --s: 17; --ar: 1; --dl: 690ms; }
.half--scroll .t5 { left: calc(45% - 24 * var(--u)); top: 72%; --s: 24; --ar: 1 / 1.12; --dl: 870ms; }
.half--live .t1 { left: 6%; top: 36%; --s: 17; --ar: 4 / 5; --dl: 410ms; }
.half--live .t2 { left: 35%; top: 4%; --s: 26; --ar: 3 / 4; --dl: 590ms; }
.half--live .t3 { left: 8%; top: 70%; --s: 26; --ar: 4 / 3; --dl: 770ms; }
.half--live .t4 { left: 76%; top: 44%; --s: 17; --ar: 1; --dl: 950ms; }
.half--live .t5 { left: 55%; top: 72%; --s: 24; --ar: 1; --dl: 1130ms; }
@media (max-width: 640px) {
  .doors2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; min-height: 640px; }
  .doors2 > .half { --u: min(1.6cqw, 1.2cqh); }
  .doors2 .dtitle { top: 0; }
  .half--scroll .t1 { left: 6%;  top: 6%;  --s: 20; }
  .half--scroll .t2 { left: 74%; top: 8%;  --s: 14; }
  .half--scroll .t3 { left: 68%; top: 66%; --s: 20; }
  .half--scroll .t4 { left: 5%;  top: 70%; --s: 15; }
  .half--scroll .t5 { left: 38%; top: 77%; --s: 13; }
  .half--live .t1 { left: 6%;  top: 8%;  --s: 15; }
  .half--live .t2 { left: 40%; top: 4%;  --s: 17; }
  .half--live .t3 { left: 4%;  top: 70%; --s: 20; }
  .half--live .t4 { left: 77%; top: 38%; --s: 14; }
  .half--live .t5 { left: 62%; top: 72%; --s: 18; }
}

/* ── the promise marks: the ink stamps of the landing's promise ───────── */
.promise-mark { display: block; width: 40px; height: 40px; fill: var(--ink); }

/* ── the tightrope: the deck's promise slide, the walker on her rope ──── */
.rope-walker { position: relative; width: 100%; }
.rope-walker .rope { position: absolute; left: 0; right: 0; height: 2px; }
.rope-walker img.walker { position: relative; mix-blend-mode: multiply; }

/* ── the door: the Fig's two messages, the line, the button ───────────── */
.door { position: relative; display: grid; justify-items: center; gap: clamp(22px, 3vw, 32px); width: 100%; padding: clamp(48px, 10vh, 120px) var(--gutter) clamp(40px, 8vh, 96px); text-align: center; }
.door-chat { position: relative; display: grid; justify-items: start; gap: 5px; }
/* the Fig's messages read as messages, a quiet grey with no lift, so the
   white button under them is the one thing to press (John, 17 Oct) */
.door-msg, .door-typing {
  margin: 0; padding: 14px 26px 15px; width: fit-content; max-width: min(100%, 22em);
  border-radius: 30px 30px 30px 8px; background: rgb(23 23 23 / 0.065);
  font-size: clamp(20px, 2.1vw, 30px); line-height: 1.3; letter-spacing: 0; color: rgb(23 23 23 / 0.86);
  text-align: left; transform-origin: 0% 100%;
}
.door-msg + .door-msg { border-radius: 8px 30px 30px 30px; }
.door-msg { visibility: hidden; }
.door-msg.popped { visibility: visible; animation: door-pop 600ms var(--pop) both; }
.door-chat.done { animation: door-bob 4.5s ease-in-out infinite; }
.door-typing { position: absolute; left: 0; top: 0; display: none; gap: 6px; padding: 22px 26px; }
.door-typing.on { display: flex; animation: door-pop 400ms var(--pop) both; }
.door-typing i { width: 9px; height: 9px; border-radius: 50%; background: rgb(23 23 23 / 0.35); animation: door-dot 1s ease-in-out infinite; }
.door-typing i:nth-child(2) { animation-delay: 0.15s; }
.door-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes door-dot { 0%, 100% { translate: 0 0; opacity: 0.5; } 40% { translate: 0 -5px; opacity: 1; } }
@keyframes door-pop { from { scale: 0.4; opacity: 0; } 40% { opacity: 1; } to { scale: 1; opacity: 1; } }
@keyframes door-bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -5px; rotate: -0.6deg; } }
@media (prefers-reduced-motion: reduce) { .door-msg { visibility: visible; } .door-msg.popped, .door-chat.done { animation: none; } }
.door-line { display: block; margin: 0; font-size: var(--display); line-height: 1.02; letter-spacing: -0.02em; max-width: 6.6em; text-align: center; color: var(--ink); }
/* the closer: "Taste the sweet nectar of Figs", the Figs crossed out by a Fig
   and "Life!" written in beside it (kit.js K.nectar; John, 17 Oct). "of Figs"
   keeps to one line, its own, and the sentence is centred as if "Life!" were
   not there: it hangs off the struck Figs to the right, out of the line
   (John, 18 Oct: "centered when without life", "in an asymmetrical way") */
.door-line:has(.nectar) { max-width: 11.6em; }
.nectar-of, .nectar { display: inline-block; white-space: nowrap; }
.nectar { position: relative; }
.nectar-is { position: absolute; left: 100%; bottom: 0; margin-left: 0.38em; font-family: 'Nanum Pen Script', 'Bradley Hand', cursive; font-size: 1.12em; line-height: 1; letter-spacing: 0; color: #0000b8; translate: 0 -0.1em; rotate: -6deg; clip-path: inset(-0.3em 100% -0.3em -0.2em); }
.nectar.is-said .nectar-is { clip-path: inset(-0.3em -0.2em -0.3em -0.2em); transition: clip-path var(--write, 700ms) linear; }
@media (prefers-reduced-motion: reduce) { .nectar-is { clip-path: none; } }
/* Join the alpha and Join Discord side by side under "want in?", the same
   size (John, 18 Oct): two equal columns, each as wide as the wider. On a
   phone they come a size down to stay side by side; only the narrowest
   screens stack them. Then the line */
.door-ctas { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(10px, 1.2vw, 16px); }
@media (max-width: 640px) { .door-ctas .pill { font-size: 17px; padding-inline: 0.95em; } }
@media (max-width: 339px) { .door-ctas { grid-auto-flow: row; grid-auto-rows: 1fr; } }
.door .door-line { margin-top: clamp(12px, 2.4vw, 36px); }
@media (max-width: 640px) {
  .door-msg, .door-typing { font-size: 16px; padding: 10px 17px 11px; border-radius: 21px 21px 21px 6px; }
  .door-msg + .door-msg { border-radius: 6px 21px 21px 21px; }
  .door-typing { padding: 15px 17px; }
}

/* ── the footer: company business, said once and quietly ──────────────── */
.site-footer {
  position: relative; z-index: 2; display: grid; gap: clamp(28px, 4vw, 44px);
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "links base"; align-items: end; column-gap: 48px;
  max-width: 1240px; margin: 0 auto;
  padding: clamp(24px, 4vh, 48px) var(--gutter) calc(clamp(24px, 4vh, 48px) + env(safe-area-inset-bottom, 0px));
  font-size: 14px; line-height: 1.55; color: rgb(23 23 23 / 0.62); text-align: left;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer p, .site-footer h3 { margin: 0; }
.foot-top { grid-area: links; align-self: start; display: grid; grid-template-columns: repeat(3, max-content); gap: 32px clamp(48px, 8vw, 120px); align-items: start; }
.foot-base { grid-area: base; align-self: end; font-size: 12.5px; color: rgb(23 23 23 / 0.64); text-align: right; }
.foot-col { display: grid; gap: 10px; justify-items: start; }
.foot-col h3 { margin-bottom: 4px; font: inherit; font-size: 13px; color: rgb(23 23 23 / 0.64); }
.foot-col a { display: inline-flex; align-items: center; gap: 8px; color: rgb(23 23 23 / 0.78); }
.foot-col svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.foot-credit { display: inline-block; margin-top: 0.5em; font-size: 11px; }
@media (max-width: 719px) {
  .site-footer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "links" "base"; row-gap: 32px; }
  .foot-base { text-align: left; }
}
@media (max-width: 559px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── films: a looping clip that only plays while it is on screen ──────── */
.clip { display: block; width: 100%; height: 100%; object-fit: cover; background: #e9e7e2; }

/* the board's tools, as the landing has them: crop marks round the piece
   you point at, a corner to resize from, and under it the small white
   delete, as the landing's scatter board draws it (no turning) */
.bpiece.tools { --crop: 18px; --tick: 12px; --hair: 1.5px; }
.bp-marks { position: absolute; inset: calc(var(--crop) * -1); --o: calc(var(--crop) - var(--hair) / 2); pointer-events: none; opacity: 0; transition: opacity 160ms ease;
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-size: var(--tick) var(--hair), var(--hair) var(--tick), var(--tick) var(--hair), var(--hair) var(--tick), var(--tick) var(--hair), var(--hair) var(--tick), var(--tick) var(--hair), var(--hair) var(--tick);
  background-position: 0 var(--o), var(--o) 0, 100% var(--o), calc(100% - var(--o)) 0, 0 calc(100% - var(--o)), var(--o) 100%, 100% calc(100% - var(--o)), calc(100% - var(--o)) 100%; }
.bpiece.tools:hover .bp-marks, .bpiece.tools.sel .bp-marks { opacity: 1; }
.bpiece.tools.carried .bp-marks { opacity: 0; }
.bp-h { position: absolute; z-index: 3; width: calc(var(--crop) + 6px); height: calc(var(--crop) + 6px); pointer-events: none; }
.bpiece.tools:hover .bp-h, .bpiece.tools.sel .bp-h { pointer-events: auto; }
.bp-h.tl { top: calc(var(--crop) * -1 - 2px); left: calc(var(--crop) * -1 - 2px); cursor: nwse-resize; }
.bp-h.tr { top: calc(var(--crop) * -1 - 2px); right: calc(var(--crop) * -1 - 2px); cursor: nesw-resize; }
.bp-h.bl { bottom: calc(var(--crop) * -1 - 2px); left: calc(var(--crop) * -1 - 2px); cursor: nesw-resize; }
.bp-h.br { bottom: calc(var(--crop) * -1 - 2px); right: calc(var(--crop) * -1 - 2px); cursor: nwse-resize; }
.bp-x { position: absolute; z-index: 3; top: calc(100% + var(--crop) + 4px); left: calc(50% - 11px); width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 1px solid rgb(23 23 23 / 0.08); border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgb(23 21 15 / 0.08), 0 4px 12px rgb(23 21 15 / 0.1); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 160ms ease; }
.bp-x svg { width: 8px; height: 8px; display: block; }
.bp-x:hover { transform: scale(1.08); }
.bpiece.tools:hover .bp-x, .bpiece.tools.sel .bp-x { opacity: 1; pointer-events: auto; }
/* what you point at comes forward, so no neighbour covers its delete, and a
   bridge over the gap keeps the pointer on the piece on its way to the ✕ */
.bpiece.tools:hover, .bpiece.tools.sel { z-index: 5; }
.bp-x::before { content: ''; position: absolute; left: -14px; right: -14px; bottom: 100%; height: calc(var(--crop) + 8px); }
.bpiece.tools.carried .bp-x { opacity: 0; pointer-events: none; }
/* the piece's own box keeps the tools: it must not clip them */
.bpiece.tools { overflow: visible; }
@media (pointer: coarse) {
  .bpiece.tools { --crop: 20px; }
  .bp-x { left: calc(50% - 14px); width: 28px; height: 28px; }
  .bp-x svg { width: 10px; height: 10px; }
}