:root {
  --sc-canvas: #141110;
  --sc-ink: #fff8ea;
  --sc-accent: #ffc400;
  --sc-accent-ink: #1b1400;
  --sc-font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --drop: cubic-bezier(.2, 1.35, .35, 1);
  --slide-w: min(88vw, calc((100svh - 150px) * 1.55));
  --slide-h: calc(var(--slide-w) / 1.55);
  --slide-top: max(44px, calc((100svh - 96px - var(--slide-h)) / 2));
}
* { box-sizing: border-box; }
html { background: var(--sc-canvas); color: var(--sc-ink); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; font-family: var(--sc-font-text); font-size: 18px; line-height: 1.5; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
h1, h2 { font-family: var(--sc-font-display); font-weight: 800; letter-spacing: -.025em; line-height: 1; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; }
.lede { font-size: clamp(16px, calc(var(--slide-w) * .0175), 23px); line-height: 1.42; max-width: 42em; }

/* The room: the wall behind, then the slide, then light and the projector in front of it. */
.room { position: fixed; inset: 0; overflow: hidden; background: #0d0b0a; --mx: 0; --my: 0; }
.room__plate { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: 58% 50%; transform: translate3d(calc(var(--mx) * -12px), calc(var(--my) * -7px), 0); transition: opacity .35s ease-out; }
.room::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(6, 4, 3, .72) 100%); transition: opacity .35s ease-out; }
.room__plate--day { opacity: 0; }
.fore { position: fixed; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; }
.beam { position: absolute; inset: 0; mix-blend-mode: screen; filter: blur(5px); transition: opacity .25s ease-out; }
.beam__light { position: absolute; inset: 0; clip-path: var(--beam-clip, none); background: radial-gradient(circle at var(--lens-x, 80%) var(--lens-y, 90%), rgba(255, 238, 196, .3), rgba(255, 233, 180, .1) 42%, rgba(255, 233, 180, .04) 80%); }
.beam__dust { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: var(--beam-clip, none); }
.fore__projector { position: absolute; right: -2.5vw; bottom: -17vh; width: clamp(220px, 27vw, 440px); filter: brightness(.86) contrast(1.06) drop-shadow(-16px -6px 34px rgba(0, 0, 0, .55)); transform: translate3d(calc(var(--mx, 0) * 22px), calc(var(--my, 0) * 12px), 0); transition: opacity .25s ease-out; }
.fore__flick { position: absolute; inset: 0; background: #070605; opacity: 0; }
.flick .fore__flick { animation: flick .26s steps(1) both; }
@keyframes flick { 0% { opacity: .96; } 45% { opacity: .96; } 46% { opacity: .35; } 62% { opacity: .7; } 63%, 100% { opacity: 0; } }
/* The hush: projector off, room almost gone. */
.hush .room__plate--night { opacity: .28; }
.hush .beam { opacity: 0; }
/* The tray: the projector leaves the frame to the carousel. */
.traying .fore__projector, .traying .beam { opacity: 0; }

.mark { position: fixed; z-index: 20; top: 12px; left: 16px; display: flex; align-items: center; gap: 8px; color: var(--sc-ink); text-decoration: none; font-family: var(--sc-font-display); font-weight: 700; font-size: 17px; padding: 4px 8px 4px 2px; }
.mark svg { width: 26px; height: 26px; }

/* Slides. Without JS they are ordinary sections, so everything still reads. */
main { position: relative; z-index: 2; }
.slide { padding: 56px 20px; }
.js .act { position: relative; }
.js .slide {
  position: fixed; z-index: 3; left: 50%; top: var(--slide-top); width: var(--slide-w); height: var(--slide-h); padding: 0;
  margin-left: calc(var(--slide-w) / -2); visibility: hidden; overflow: hidden; border-radius: 3px;
  box-shadow: 0 0 calc(var(--slide-w) * .05) rgba(255, 226, 170, .16);
}
.js .act.is-on .slide { visibility: visible; animation: drop .3s var(--drop) both; }
/* Projected light: hottest in the middle, plaster showing through, soft fall-off at the corners. */
.js .slide:not(.slide--hush):not(.slide--yours)::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at 52% 46%, rgba(255, 255, 255, .13), transparent 46%, rgba(20, 8, 0, .27) 100%), url("assets/plaster.svg"); mix-blend-mode: soft-light; }
[data-at] { transition: opacity .28s ease-out, transform .34s var(--drop); }
.js [data-at]:not(.is-at) { opacity: 0; transform: translateY(14px); }
@keyframes drop { from { transform: translateY(-3.5%); } to { transform: none; } }
.slide__in { height: 100%; padding: calc(var(--slide-w) * .05) calc(var(--slide-w) * .06); display: flex; flex-direction: column; justify-content: center; gap: calc(var(--slide-w) * .025); }
.slide h1 { font-size: calc(var(--slide-w) * .072); }
.slide h2 { font-size: calc(var(--slide-w) * .06); }

.slide--hook { background: var(--sc-accent); color: #1b1400; }
.slide--reason { background: #c32a1c; color: #fff8ea; }
.slide--reason h2 { font-size: calc(var(--slide-w) * .085); }
.slide--how { background: #0c4a4c; color: #f2fbf6; --hi: #ffc400; }
.slide--get { background: #f6ecd7; color: #221a12; }
.slide--hush { background: transparent; box-shadow: none !important; }
.slide--hush p { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 8%; font-size: clamp(20px, calc(var(--slide-w) * .028), 34px); color: #efe3cb; }

/* First screen: the promise on the left, a big play on the right. */
.hook { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: calc(var(--slide-w) * .04); row-gap: calc(var(--slide-w) * .022); align-content: center; }
.hook h1 { grid-column: 1 / -1; font-size: calc(var(--slide-w) * .086); }
.hook .lede { grid-column: 1; }
.hook .ask { grid-column: 1; }
.bigplay { grid-column: 2; grid-row: 2 / 4; align-self: start; display: flex; flex-direction: column; align-items: center; gap: calc(var(--slide-w) * .022); border: 0; background: none; color: inherit; font: inherit; cursor: pointer; width: calc(var(--slide-w) * .2); }
.bigplay__disc { position: relative; display: block; width: calc(var(--slide-w) * .115); height: calc(var(--slide-w) * .115); border-radius: 50%; background: #1b1400; color: var(--sc-accent); transition: transform .16s var(--drop); }
.bigplay__disc svg { position: absolute; inset: 27% 24% 27% 30%; width: 46%; height: 46%; display: block; }
.bigplay__disc::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #1b1400; animation: pp-ring 2.6s cubic-bezier(.2, .7, .3, 1) infinite; }
.bigplay:hover .bigplay__disc { transform: scale(1.05); }
.bigplay:active .bigplay__disc { transform: scale(.97); }
.bigplay__words { display: flex; flex-direction: column; align-items: center; line-height: 1.2; text-align: center; }
.bigplay__words b { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(18px, calc(var(--slide-w) * .02), 26px); }
.bigplay__words small { font-size: clamp(13px, calc(var(--slide-w) * .0125), 16px); }

/* The ask */
.ask { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; max-width: 40em; }
.ask label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ask input { flex: 1 1 220px; min-width: 0; min-height: 54px; padding: 0 16px; font: inherit; color: #1b1400; background: #fffdf6; border: 2px solid #1b1400; border-radius: 4px; }
.ask input::placeholder { color: #6e6450; }
.ask button { flex: none; min-height: 54px; padding: 0 24px; font: inherit; font-weight: 600; color: #fff8ea; background: #1b1400; border: 2px solid #1b1400; border-radius: 4px; cursor: pointer; transition: transform .12s ease-out, background-color .15s ease-out; }
.ask button:hover { background: #3a2b00; }
.ask button:active { transform: translateY(1px); }
.ask button[disabled] { opacity: .6; cursor: progress; }
.ask__note { font-size: 15px; }
.ask__note.is-bad { color: #9c1c10; font-weight: 600; }

/* How it works: one slide, three positions */
.how { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: calc(var(--slide-w) * .04); align-items: center; justify-content: stretch; }
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: clamp(14px, calc(var(--slide-w) * .0155), 19px); }
.how__steps li { opacity: .55; padding-left: 16px; position: relative; transition: opacity .18s ease-out; }
.how__steps li::before { content: ''; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.how__steps li.is-on { opacity: 1; font-weight: 600; color: var(--hi); }
.how__panes { display: grid; }
.how__pane { grid-area: 1 / 1; display: flex; flex-direction: column; gap: calc(var(--slide-w) * .018); }
.js .how__pane { visibility: hidden; }
.js .act.is-on .how__pane.is-on { visibility: visible; animation: drop .28s var(--drop) both; }
.how__pane h2 { font-size: calc(var(--slide-w) * .05); }
.how__typed { font-family: var(--sc-font-display); font-weight: 700; font-size: calc(var(--slide-w) * .06); color: var(--hi); }
.how__typed span { border-bottom: 3px solid currentColor; padding-bottom: .05em; }
.how__found { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: clamp(15px, calc(var(--slide-w) * .0175), 22px); }
.how__found li { background: rgba(255, 255, 255, .09); padding: 7px 12px; border-radius: 3px; }
.how__said { margin: 0; font-size: clamp(16px, calc(var(--slide-w) * .021), 26px); line-height: 1.34; color: var(--hi); }
.how__wave { display: flex; align-items: center; gap: 2px; height: calc(var(--slide-w) * .05); }
.how__wave i { flex: 1; background: #f2fbf6; border-radius: 1px; min-height: 2px; }

/* The gate: whatever slide the tray has dropped in */
.slide--gate { background: #0d0b0a; --gate-mount: 76px; }
.gate { margin: 0; height: 100%; display: flex; flex-direction: column; }
.gate__shot { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; background: #1f1a15; display: block; }
.js .act.is-swap .gate__shot { animation: drop .26s var(--drop) both; }
.gate__mount { background: #f6ecd7; color: #221a12; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; }
.gate__words { min-width: 0; }
.gate__name { font-size: clamp(19px, calc(var(--slide-w) * .024), 30px) !important; letter-spacing: -.015em; }
.gate__line { font-size: 15px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gate__do { display: flex; align-items: center; gap: 12px; flex: none; }
.gate__play { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px 0 12px; font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: 999px; color: var(--sc-accent-ink); background: var(--sc-accent); transition: transform .12s ease-out; }
.gate__play:hover { transform: translateY(-1px); }
.gate__play:active { transform: translateY(1px); }
.gate__play svg { width: 22px; height: 22px; }
.gate__secs { font-size: 13px; font-weight: 500; opacity: .75; }
.gate__site { font-size: 15px; white-space: nowrap; }

/* The tray: a big arc of mounts across the bottom of the room */
#tray { --slide-w: min(88vw, calc((100svh - 208px) * 1.55)); --slide-h: calc(var(--slide-w) / 1.55); --slide-top: 44px; }
.carousel { display: none; }
.js .carousel { display: block; position: fixed; z-index: 6; left: 50%; bottom: 0; width: 0; height: 0; pointer-events: none; visibility: hidden; }
.js .act.is-on .carousel { visibility: visible; }
.carousel__ring { position: absolute; left: 0; top: calc(var(--r) - 118px); width: 0; height: 0; transition: transform .42s cubic-bezier(.2, .9, .25, 1); }
.mount { position: absolute; left: -29px; top: -40px; width: 58px; height: 80px; padding: 5px 5px 16px; background: #efe3cb; border: 0; border-radius: 2px; cursor: pointer; pointer-events: auto; box-shadow: 0 5px 12px rgba(0, 0, 0, .55); transform-origin: 29px 40px; transition: background-color .15s ease-out; }
.mount img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; background: #2a241d; }
.mount.is-on { background: var(--sc-accent); }
.mount:focus-visible { outline: 3px solid #fff; }
.traying .pp-invite { display: none; }
.at-hook .pp-invite { display: none; }
.presentation-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html:not(.js) .presentation-list { position: static; width: auto; height: auto; clip-path: none; padding: 24px; }

/* What you get */
.get dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--slide-w) * .018) calc(var(--slide-w) * .05); }
.get dt { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(18px, calc(var(--slide-w) * .022), 27px); line-height: 1.1; }
.get dd { margin: 3px 0 0; font-size: clamp(15px, calc(var(--slide-w) * .0155), 19px); line-height: 1.35; }

/* Lights up */
.lights .room__plate--night, .lights .beam, .lights .fore__projector, .lights .room::after { opacity: 0; }
.lights .room__plate--day { opacity: 1; }
.lights .mark { color: #1f1810; }
.js .slide--yours { background: transparent; box-shadow: none; overflow: visible; color: #1f1810; }
.slide--yours .slide__in { justify-content: flex-start; padding-top: calc(var(--slide-w) * .035); }
.slide--yours h2 { font-size: calc(var(--slide-w) * .078); }
.ask--full input { flex-basis: 240px; }
.foot { position: absolute; left: 0; bottom: 6px; padding: 0 calc(var(--slide-w) * .06); font-size: 14px; color: #1f1810; }
.lights .pp { display: none; }


/* Phone: the slide is mounted portrait */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  :root { --slide-w: calc(100vw - 24px); --slide-h: calc(100svh - 148px); --slide-top: 52px; }
  .slide__in { padding: 22px 20px; gap: 14px; justify-content: flex-start; padding-top: 34px; }
  .slide h1 { font-size: clamp(34px, 10.4vw, 52px); }
  .slide h2, .slide--reason h2, .how__pane h2 { font-size: clamp(29px, 8.8vw, 44px); }
  .lede { font-size: 16.5px; }
  .ask input, .ask button { width: 100%; flex: 1 1 100%; }
  .fore__projector { width: 168px; right: -38px; bottom: -66px; }
  .beam { opacity: .55; }
  .hook { display: flex; }
  .hook h1 { font-size: clamp(36px, 11vw, 56px); }
  .bigplay { flex-direction: row; width: auto; align-self: flex-start; gap: 12px; margin-top: 4px; }
  .bigplay__disc { width: 66px; height: 66px; }
  .bigplay__words { align-items: flex-start; text-align: left; }
  #tray { --slide-w: calc(100vw - 24px); --slide-h: calc(100svh - 188px); --slide-top: 52px; }
  .how { grid-template-columns: 1fr; align-content: start; gap: 14px; }
  .how__steps { grid-auto-flow: column; gap: 8px; font-size: 12.5px; line-height: 1.2; }
  .how__steps li { padding-left: 12px; }
  .how__typed { font-size: 34px; }
  .how__found, .how__said { font-size: 15.5px; }
  .how__wave { height: 44px; }
  .get dl { grid-template-columns: 1fr; gap: 10px; }
  .get dt { font-size: 18px; }
  .get dd { font-size: 14.5px; }
  .slide--yours h2 { font-size: clamp(33px, 10vw, 50px); }
  .slide--hush p { font-size: 22px; }
  .gate__mount { flex-direction: column; align-items: stretch; padding: 10px 12px; gap: 8px; }
  .gate__line { font-size: 14px; }
  .gate__do { justify-content: space-between; }
  .carousel__ring { top: calc(var(--r) - 92px); }
  .slide--reason .slide__in, .slide--get .slide__in { justify-content: center; }
  .how { align-content: center; }
  .mount { left: -22px; top: -30px; width: 44px; height: 60px; padding: 4px 4px 12px; transform-origin: 22px 30px; }
  .foot { position: static; padding: 14px 0 0; }
}
@media (max-width: 760px) and (max-height: 720px) {
  .slide__in { padding-top: 16px; gap: 10px; }
  .hook h1 { font-size: 33px; }
  .hook .lede { display: none; }
  .bigplay__disc { width: 52px; height: 52px; }
  .ask input, .ask button { min-height: 48px; }
  .how__found li { padding: 4px 10px; }
}
@keyframes pp-ring { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.65); opacity: 0; } }
@media (max-height: 620px) and (min-width: 761px) {
  .get dd { display: none; }
  .gate__line { -webkit-line-clamp: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .act.is-on .slide, .js .how__pane.is-on, .js .act.is-swap .gate__shot { animation: none; }
  .flick .fore__flick { animation: none; }
  .carousel__ring { transition: none; }
  .room__plate, .fore__projector { transform: none; }
  .bigplay__disc::after { animation: none; opacity: 0; }
  [data-at] { transition: none; }
}

.acct { position: fixed; z-index: 20; top: 10px; right: 16px; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 6px; color: var(--sc-ink); background: rgba(20, 17, 16, .55); font: 500 15px var(--sc-font-text); text-decoration: none; }
.acct:hover { background: rgba(20, 17, 16, .85); }
.lights-up .acct, .is-day .acct { color: #1f1810; background: rgba(255, 248, 234, .7); }