html { scroll-padding-top: 5rem; }
.landing main { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem 6rem; text-wrap: pretty; }
.landing section { margin-top: 5rem; text-align: center; }
.landing img, .landing video { display: block; width: 100%; height: auto; border-radius: 0.5rem; }
.landing video { margin-top: 2rem; aspect-ratio: 16 / 9; box-shadow: 0 0.75rem 2.5rem var(--shadow-md); }
.landing section > p { max-width: 36rem; margin: 1rem auto 0; }
/* Every size on these pages is one of these steps. Ink: headings darker than the
body, muted clearly lighter; accent is for what can be clicked, gold for ornament. */
body.landing {
--fs-xs: 0.7rem; --fs-sm: 0.8rem; --fs-md: 0.9rem; --fs-base: 1rem;
--fs-lg: 1.15rem; --fs-xl: 1.3rem; --fs-2xl: 1.8rem; --fs-3xl: 2.3rem; --fs-4xl: 3.2rem;
--cream: #1f150d; --muted: #7d6a58; --accent: #6e4b2c;
overflow: clip visible; line-height: 1.6;
font-variant-numeric: lining-nums;
}
.landing :is(.try, .talk) { --muted: #63503f; }
.landing h1, .landing h2, .landing h3 { font-family: var(--font-display); font-weight: 400; color: var(--cream); line-height: 1.15; }
.landing h1 { font-size: var(--fs-4xl); text-wrap: balance; }
.landing h1 span { display: block; }
.landing h2 { font-size: var(--fs-3xl); margin-bottom: 2rem; }
.landing h3 { font-size: var(--fs-xl); margin: 1rem 0 0.25rem; }
.landing h3, .points summary { font-weight: 500; }
.points summary, .cast h3 { color: var(--gold); }
.site {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
gap: 2rem;
padding: 0.4rem 2rem;
background: color-mix(in srgb, var(--header-bg) 86%, transparent);
backdrop-filter: blur(12px);
transition: box-shadow 0.4s;
}
.site > a:first-child { margin-right: auto; }
.site img { width: auto; height: 2.45rem; margin-block: 0.275rem; border-radius: 0; filter: brightness(1.2); }
.site nav { display: flex; gap: 1.75rem; }
.site nav a { white-space: nowrap; color: var(--btn-ink); opacity: 0.85; font-size: var(--fs-sm); letter-spacing: 0.06em; text-decoration: none; transition: opacity 0.25s; }
.site nav a:hover { opacity: 1; }
.site .start { margin-top: 0; padding: 0.3rem 1.2rem; font-size: var(--fs-base); }
.start {
display: inline-block;
margin-top: 2rem;
padding: 0.7rem 2rem;
background: var(--btn-grad);
border: 1px solid var(--btn-border);
border-radius: 0.4rem;
color: var(--btn-ink);
font-family: var(--font-display);
font-size: var(--fs-lg);
letter-spacing: 0.04em;
text-decoration: none;
transition: filter 0.25s, transform 0.25s, box-shadow 0.25s;
}
.start:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 0.4rem 1.2rem var(--shadow-md); }
.landing .hero { margin-top: 3.5rem; }
.hero > p { font-size: var(--fs-lg); max-width: 30rem; }
.hero small { display: block; margin-top: 0.5rem; color: var(--muted); }
/* The painting runs edge to edge and dissolves into the page; the app sits on
its lower half. */
.stage { width: 100vw; margin: 1rem 0 0 calc(50% - 50vw); }
.stage .backdrop {
height: 26rem;
object-fit: cover;
object-position: center 30%;
border-radius: 0;
mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 55%, transparent);
}
/* A world page's painting dissolves slowly at both ends, with no edge to catch the eye. */
.stage.trailer .backdrop {
mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.04) 5%, rgb(0 0 0 / 0.12) 10%, rgb(0 0 0 / 0.24) 15%,
rgb(0 0 0 / 0.4) 20%, rgb(0 0 0 / 0.57) 25%, rgb(0 0 0 / 0.73) 30%, rgb(0 0 0 / 0.86) 35%,
rgb(0 0 0 / 0.95) 40%, #000 46%, #000 52%, rgb(0 0 0 / 0.94) 58%, rgb(0 0 0 / 0.82) 64%,
rgb(0 0 0 / 0.65) 70%, rgb(0 0 0 / 0.46) 76%, rgb(0 0 0 / 0.28) 82%, rgb(0 0 0 / 0.13) 88%,
rgb(0 0 0 / 0.04) 94%, rgb(0 0 0 / 0));
}
.stage > :is(.demo, video) { position: relative; width: min(64rem, 92vw); margin: -18rem auto 0; }
.stage .demo { aspect-ratio: 1920 / 896; overflow: hidden; border-radius: 0.5rem; box-shadow: 0 1.5rem 4rem var(--shadow-lg); }
.landing .watch { margin-top: 1.75rem; font-size: var(--fs-sm); letter-spacing: 0.04em; color: var(--muted); }
.stage .demo.phone { width: min(22rem, 86vw); aspect-ratio: 656 / 888; }
/* hero-demo.js moves the camera; the film glides to it on its own, unless motion is reduced. */
.stage .film { position: relative; transform-origin: 0 0; }
.stage .film video { margin: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.stage .pop { position: absolute; left: 7.6%; top: 17.5%; opacity: 0; pointer-events: none;
font-family: var(--font-display); font-size: var(--fs-lg); color: var(--gold); }
.stage .pop.show { animation: paid 1.6s ease-out both; }
@media (prefers-reduced-motion: reduce) { .stage .pop { translate: none !important; } }
/* The ring sits on the control to press, its step named beside it. */
.stage .spot { position: absolute; width: 1.6rem; height: 1.6rem; padding: 0; translate: -50% -50%; cursor: pointer;
border: 2px solid var(--gold); border-radius: 50%; background: color-mix(in srgb, var(--gold) 18%, transparent); }
.stage .spot:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--gold) 40%, transparent); }
.stage :is(.spot, .replay):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.stage .cue,
.stage .replay { white-space: nowrap; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--header-bg);
color: var(--header-ink); font: var(--fs-sm)/1.4 var(--font-body); }
.stage .cue { position: absolute; translate: 0 -50%; pointer-events: none; }
.stage .cue.flip { translate: -100% -50%; }
.stage .replay { position: absolute; left: 50%; top: 1rem; translate: -50% 0; border: 0; cursor: pointer; }
.stage :is(.spot, .cue, .replay)[hidden] { display: none; }
/* Edge to edge like the stage, with its content held to the column. */
.band { margin-inline: calc(50% - 50vw); padding: 4.5rem max(1.25rem, 50vw - 34.75rem); background: var(--editor-panel); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; text-align: left; }
.steps li::before { content: counter(step, upper-roman); font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--gold); }
.landing section > h2:has(+ p) { margin-bottom: 0; }
.landing .kicker { margin-bottom: 0.9rem; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
/* The sample list, with what its parts do beside it. */
.try-pair { display: flex; justify-content: center; align-items: center; gap: 4rem; margin-top: 2.5rem; }
.try-pair .try { flex: none; margin: 0; }
.try-pair .points { grid-template-columns: minmax(0, 20rem); gap: 1.1rem; margin-top: 0; text-align: left; }
/* The sample list, drawn like the app's own. */
.try, .talk { margin: 2.5rem auto 0; text-align: left; background: var(--panel); border-radius: 0.5rem;
box-shadow: 0 0.75rem 2.5rem var(--shadow-md); font-family: var(--font-body); }
.try { position: relative; width: min(22rem, 100%); padding: 1.25rem 1.25rem 1rem; }
.try ul { list-style: none; }
.try [hidden] { display: none; }
.landing .icon, .talk-face svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round; }
.landing .icon .dot { fill: currentColor; stroke: none; }
.landing .icon-frog { color: color-mix(in srgb, var(--frog-ink), #6fc23d 35%); stroke-width: 2.15; }
.try-tokens { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem;
font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.try-tokens output { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: 0; color: var(--cream); }
.try-head { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.9rem;
font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.try-head[data-icon="today"] { color: var(--danger); }
.try-head[data-icon="ritual"] { color: var(--ritual-ink); }
.try-head[data-icon="frog"] { color: var(--frog-ink); }
.try li > button { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 2.6rem; padding: 0 0.25rem;
background: none; border: 0; font: inherit; font-size: var(--fs-md); color: var(--text); text-align: left; cursor: pointer; }
.try li > button .icon { margin-left: auto; opacity: 0.75; }
.try li > button .icon-frog { opacity: 1; }
.try-days { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); }
.try-toast { position: absolute; left: 50%; top: 0.9rem; translate: -50% 0; padding: 0.4rem 0.9rem; white-space: nowrap;
border-radius: 999px; background: var(--header-bg); color: var(--header-ink); font-size: var(--fs-sm);
box-shadow: 0 0.4rem 1.2rem var(--shadow-md); }
.try li > button[data-kind="manifest"] .icon { color: var(--danger); }
.try-box { position: relative; width: 14px; height: 14px; flex: none; border: 1px solid var(--border-strong); border-radius: 3px; }
.try li > button:hover .try-box { border-color: var(--gold); }
.try li > [aria-pressed="true"] { color: var(--muted); opacity: 0.42; }
.try li > [aria-pressed="true"]:not([data-kind="ritual"]) { text-decoration: line-through; }
.try [aria-pressed="true"] .try-box { background: var(--gold); border-color: var(--gold); }
.try [aria-pressed="true"] .try-box::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 7px;
border-right: 1.5px solid var(--bg); border-bottom: 1.5px solid var(--bg); transform: rotate(45deg); }
.try-payoff { margin-top: 0.75rem; font-size: var(--fs-md); color: var(--text); }
.try-payoff a { color: var(--accent); }
.try-reset, .talk-over { background: none; border: 0; font: inherit; font-size: var(--fs-sm); color: var(--muted);
text-decoration: underline; cursor: pointer; }
.try-reset { display: block; margin: 0.5rem 0 0 auto; }
/* The sample interview (interview-demo.js), drawn like the app's. */
.talk { width: min(32rem, 100%); padding: 1rem 1.25rem 1.25rem; font-size: var(--fs-md); }
.talk-head { display: flex; align-items: center; gap: 0.5rem; }
.talk-face { display: flex; font-size: 1.8rem; color: var(--accent); }
.talk-who { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.25rem; margin-left: auto; }
#talk-who-label { margin-right: 0.35rem; font-size: var(--fs-sm); color: var(--muted); }
.talk-who button, .talk-chips button { padding: 0.2rem 0.75rem; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
background: var(--wash); font: inherit; font-size: var(--fs-sm); color: var(--text); }
.talk-who button[aria-pressed="true"],
.talk-chips button:hover, .talk-who button:hover { border-color: var(--accent); color: var(--accent); }
.talk-log { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.9rem; }
.talk-line { line-height: 1.6; }
.talk-line.frog { color: var(--cream); }
.talk-line.player { align-self: flex-end; color: var(--muted); font-style: italic; }
.talk-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.talk-brief { margin-top: 1rem; padding: 0.75rem 0.9rem; border-radius: 8px; background: var(--accent-wash);
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.talk-label { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.talk-text { margin-top: 0.3rem; font-size: var(--fs-md); line-height: 1.5; white-space: pre-line; }
.talk-end { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; }
.talk-go { color: var(--accent); }
.landing .talk-note { margin-top: 0.9rem; font-size: var(--fs-sm); color: var(--muted); }
.talk-over { margin-left: auto; }
/* One story's scenes, one at a time (journey.js), framed as the app frames a scene:
a wide strip dissolving at its edges, the protagonist on the left and whoever is
met on the right. */
.journey { margin-top: 2.5rem; }
.journey .scenes { --p: 10rem; position: relative; height: calc(var(--p) + 2.75rem); }
.journey figure { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; }
.journey figure.on { opacity: 1; pointer-events: auto; }
.journey .paint { height: 100%; object-fit: cover; border-radius: 0;
mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
linear-gradient(to bottom, transparent, #000 10%, #000 80%, transparent);
mask-composite: intersect; }
.journey .sitter { position: relative; display: block; }
.journey .me, .journey .met { position: absolute; bottom: 1.25rem; }
.journey .me { left: 6%; z-index: 1; }
.journey .met { right: 6%; display: flex; gap: 1.25rem; }
.journey .sitter .inset { position: static; display: block; height: calc(var(--p) * 15 / 19); width: auto; }
.journey .me .inset { height: var(--p); }
/* Each one's name on hover, as the app labels its portraits. */
.journey .sitter > span { position: absolute; inset: auto -4px 0; padding: 4px 5px; border-radius: 0 0 5px 5px;
background: rgba(0, 0, 0, 0.78); color: #dda878; text-align: center;
font-family: var(--font-display); font-style: italic; font-size: var(--fs-sm); letter-spacing: 0.07em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
opacity: 0; transform: translateY(4px); transition: opacity 0.18s, transform 0.18s; pointer-events: none; }
.journey .sitter:hover > span { opacity: 1; transform: none; }
.journey .dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.9rem; }
.journey .dots button { width: 0.55rem; height: 0.55rem; padding: 0; border-radius: 50%; cursor: pointer;
border: 1px solid var(--accent); background: transparent; }
.journey .dots button[aria-current="true"] { background: var(--accent); }
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 16rem)); justify-content: center; gap: 1.25rem 2.5rem; margin-top: 1.75rem; list-style: none; }
.points li { text-align: left; }
.points summary { display: block; font-family: var(--font-display); font-size: var(--fs-xl); }
.points summary .icon, .landing footer .icon { margin-right: 0.4rem; vertical-align: -0.12em; }
.points.two { grid-template-columns: repeat(2, minmax(0, 18rem)); }
.landing .also { max-width: 52rem; margin-top: 1.75rem; font-size: var(--fs-md); color: var(--muted); text-wrap: balance; }
.also b { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; color: var(--gold); }
.worlds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.landing p + .worlds { margin-top: 2.5rem; }
.worlds a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.worlds h3 { transition: color 0.25s; }
.worlds a:hover h3 { color: var(--accent); }
.worlds .more { align-self: center; margin-top: auto; padding-top: 0.5rem; font-size: var(--fs-sm); letter-spacing: 0.04em; color: var(--accent); }
.frame { overflow: hidden; border-radius: 0.5rem; box-shadow: 0 0.75rem 2.5rem var(--shadow-md); }
.frame img { transition: transform 0.8s ease; }
.worlds a:hover .frame img { transform: scale(1.03); }
.hooks { display: grid; gap: 0.6rem; max-width: 40rem; margin: 1.75rem auto 0; list-style: none; font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); line-height: 1.3; color: var(--text); text-wrap: balance; }
.cast { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 12.6rem)); justify-content: center; gap: 1.5rem; text-align: left; }
.cast img { box-shadow: 0 0.75rem 2.5rem var(--shadow-md); }
/* A small portrait card on the corner of a bigger picture, framed as the app frames them. */
.landing .inset { position: absolute; border-radius: 6px; border: 1px solid var(--gold);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); }
.cast .pair { position: relative; }
.cast .inset { right: -0.6rem; bottom: 0; width: 46%; }
.cast figcaption { font-size: var(--fs-md); }
.cast h3 { margin: 0.8rem 0 0.2rem; }
.landing .faq { text-align: left; }
.landing .faq > * { max-width: 46rem; margin-inline: auto; }
.faq h2 { text-align: center; }
.faq details { padding: 0.9rem 0; border-top: 1px solid var(--seam); }
.faq summary { cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '›'; display: inline-block; width: 1rem; color: var(--muted); transition: rotate 0.2s; }
.faq details[open] summary::before { rotate: 90deg; }
.faq summary h3 { display: inline; margin: 0; }
.faq details p { margin-top: 0.5rem; }
.final h2 { margin-bottom: 0; }
/* A last painting under a world page, fading in from the page onto the footer. */
.coda { height: 18rem; margin-top: -4.5rem; background: var(--art) center 60% / cover;
mask-image: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.03) 10%, rgb(0 0 0 / 0.1) 20%, rgb(0 0 0 / 0.22) 30%,
rgb(0 0 0 / 0.38) 40%, rgb(0 0 0 / 0.56) 50%, rgb(0 0 0 / 0.73) 60%, rgb(0 0 0 / 0.87) 70%,
rgb(0 0 0 / 0.96) 80%, #000 90%); }
.landing .back { display: block; margin-top: 1.25rem; font-size: var(--fs-sm); letter-spacing: 0.04em; color: var(--muted); text-decoration: none; transition: color 0.25s; }
.landing .back:hover { color: var(--accent); }
.landing footer { background: var(--header-bg); padding: 1.5rem; text-align: center; color: var(--header-ink); font-size: var(--fs-sm); }
.landing footer a { color: inherit; white-space: nowrap; transition: color 0.25s; }
.landing footer a:hover { color: var(--btn-ink); }
.site.raised { box-shadow: 0 0.25rem 1.5rem var(--shadow-md); }
@keyframes beckon { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); } to { box-shadow: 0 0 0 0.9rem transparent; } }
@keyframes paid { 0% { opacity: 0; translate: 0 0.4rem; } 20%, 65% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -0.6rem; } }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; interpolate-size: allow-keywords; }
.hero > * { animation: rise 0.9s ease both; }
.hero > p { animation-delay: 0.1s; }
.hero > .start, .hero > .hooks { animation-delay: 0.2s; }
.hero > small, .hero > .watch { animation-delay: 0.25s; }
.hero > .stage { animation-delay: 0.35s; }
/* landing.js marks what is waiting below the fold, and each thing as it arrives. */
.reveal { opacity: 0; transform: translateY(1.25rem);
transition: opacity 0.8s ease, transform 0.8s ease;
transition-delay: calc(var(--nth, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.stage .film { transition: transform 0.9s cubic-bezier(0.45, 0, 0.2, 1); }
.stage .spot { animation: beckon 1.2s ease-out 2; }
.journey figure { transition: opacity 0.9s ease; }
}
/* Wider than a phone, but not wide enough for the links on one line. */
@media (max-width: 46rem) {
.site nav { display: none; }
}
@media (max-width: 40rem) {
.landing section { margin-top: 3rem; }
.landing h1 { font-size: var(--fs-3xl); }
.hero > p { font-size: var(--fs-md); }
.landing h2 { font-size: var(--fs-2xl); margin-bottom: 1.25rem; }
.band { padding-block: 3rem; }
.site { padding: 0.4rem 1rem; gap: 1rem; }
.site img { height: 1.8rem; margin-block: 0.2rem; }
.worlds { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 1rem;
overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 1.5rem; }
.worlds > a { scroll-snap-align: start; }
.journey .scenes { --p: 6.5rem; }
.journey .met { gap: 0.6rem; }
.points, .points.two { grid-template-columns: minmax(0, 20rem); }
.try-pair { flex-direction: column; gap: 2.5rem; }
.try-pair .points { text-align: center; }
.points summary { display: list-item; cursor: pointer; }
.points summary::marker { color: var(--muted); font-size: 0.7em; }
.points details[open] summary { margin-bottom: 0.25rem; }
.steps { gap: 0.75rem; }
.steps h3 { font-size: var(--fs-base); }
.steps p { display: none; }
.cast { grid-template-columns: repeat(2, 1fr); }
.hooks { font-size: var(--fs-base); }
.stage .backdrop { height: 18rem; }
.coda { height: 10rem; }
.stage > :is(.demo, video) { margin-top: -6rem; }
}