/* Elsewhere: the public site. The home page is a night sky over a small planet; the
support and privacy pages are documents that follow the device's appearance. */
@font-face {
font-family: "Libre Baskerville";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/libre-baskerville-latin-400-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
font-family: "Libre Baskerville";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/fonts/libre-baskerville-latin-400-italic.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
font-family: "Libre Baskerville";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/libre-baskerville-latin-600-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
:root {
--night: #05080c;
--midnight: #09121b;
--ivory: #f5edd9;
--paper: #ebdfc4;
--brass: #deb56e;
--ink: #35342b;
--serif: Baskerville, "Libre Baskerville", "Baskerville Old Face", Georgia, serif;
--sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
--max: 75rem;
--gutter: clamp(1.25rem, 4vw, 3.5rem);
--section: clamp(6rem, 4rem + 8vw, 10.5rem);
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--stars-fine: url("data:image/svg+xml,");
--stars-bright: url("data:image/svg+xml,");
/* Documents: ivory paper by day. */
--bg: var(--ivory);
--fg: var(--ink);
--muted: #5f5b4b;
--faint: #847e6d;
--accent: #7a5820;
--line: rgb(53 52 43 / 0.14);
--card: #fbf6ea;
--shadow: 0 1px 2px rgb(53 52 43 / 0.08), 0 18px 40px -18px rgb(53 52 43 / 0.3);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: var(--midnight);
--fg: var(--ivory);
--muted: #b8b09c;
--faint: #8f8878;
--accent: var(--brass);
--line: rgb(245 237 217 / 0.12);
--card: #101c28;
--shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 22px 44px -20px rgb(0 0 0 / 0.7);
}
}
/* The home page, invitations and the not-found page are always night. */
.home,
.night {
--bg: var(--night);
--fg: var(--ivory);
--muted: rgb(245 237 217 / 0.68);
--faint: rgb(245 237 217 / 0.56);
--accent: var(--brass);
--line: rgb(245 237 217 / 0.12);
--card: #0d1620;
color-scheme: dark;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
color-scheme: light dark;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font: 400 1.0625rem/1.6 var(--sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
[hidden] {
display: none !important;
}
img,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: inherit;
}
h1,
h2,
h3 {
margin: 0;
font-family: var(--serif);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.01em;
text-wrap: balance;
}
p {
margin: 0;
text-wrap: pretty;
}
:where(.home) :where(ul, ol) {
margin: 0;
padding: 0;
list-style: none;
}
:focus-visible {
outline: 2px solid var(--brass);
outline-offset: 3px;
border-radius: 0.25rem;
}
.skip {
position: absolute;
left: 1rem;
top: -4rem;
z-index: 100;
padding: 0.6rem 1rem;
border-radius: 0.5rem;
background: var(--brass);
color: var(--night);
font-weight: 600;
text-decoration: none;
}
.skip:focus {
top: 0.75rem;
}
.wrap {
width: min(100% - 2 * var(--gutter), var(--max));
margin-inline: auto;
}
/* Type */
.mega {
font-size: clamp(3rem, 1.3rem + 6.6vw, 7.5rem);
line-height: 0.93;
letter-spacing: -0.028em;
}
.big {
font-size: clamp(2.5rem, 1.5rem + 3.5vw, 4.75rem);
line-height: 0.98;
letter-spacing: -0.022em;
}
.mega em,
.big em {
display: block;
font-style: italic;
color: var(--accent);
}
.lede {
max-width: 30em;
margin-top: 1.5rem;
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
line-height: 1.55;
color: var(--muted);
}
.label {
margin-bottom: 1.25rem;
font: 600 0.75rem/1.2 var(--sans);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.fine {
max-width: 52em;
font-size: 0.8125rem;
line-height: 1.6;
color: var(--faint);
}
/* The bar across the top: over the sky on the home page, solid on the others. */
.bar {
position: sticky;
top: 0;
z-index: 50;
background: rgb(5 8 12 / 0.92);
color: var(--ivory);
-webkit-backdrop-filter: saturate(1.4) blur(18px);
backdrop-filter: saturate(1.4) blur(18px);
transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.home .bar {
position: fixed;
inset: 0 0 auto;
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.home .bar.is-scrolled {
background: rgb(5 8 12 / 0.72);
-webkit-backdrop-filter: saturate(1.4) blur(18px);
backdrop-filter: saturate(1.4) blur(18px);
box-shadow: 0 1px 0 rgb(245 237 217 / 0.07);
}
.bar__inner {
display: flex;
align-items: center;
gap: 2rem;
min-height: 4.25rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-right: auto;
font: 400 1.375rem/1 var(--serif);
letter-spacing: 0.005em;
text-decoration: none;
}
.brand img {
width: 1.75rem;
height: 1.75rem;
border-radius: 0.45rem;
}
.bar__nav {
display: none;
gap: 2rem;
}
.bar__nav a {
padding-block: 0.5rem;
color: rgb(245 237 217 / 0.72);
font-size: 0.9375rem;
text-decoration: none;
transition: color 0.2s ease;
}
.bar__nav a:hover,
.bar__nav a[aria-current="page"] {
color: var(--ivory);
}
@media (min-width: 48rem) {
.bar__nav {
display: flex;
}
}
.pill {
display: inline-flex;
align-items: center;
min-height: 2.25rem;
padding: 0.5rem 1.05rem;
border-radius: 999px;
background: var(--ivory);
color: var(--night);
font: 600 0.875rem/1 var(--sans);
text-decoration: none;
transition: background-color 0.2s ease;
}
.pill:hover {
background: #fff;
}
/* Buttons and badges */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
min-height: 2.75rem;
padding: 0.7rem 1.3rem;
border: 0;
border-radius: 999px;
background: var(--brass);
color: var(--night);
font: 600 0.9375rem/1 var(--sans);
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.button:hover {
background: #ebc883;
}
.button--quiet {
background: transparent;
color: var(--fg);
box-shadow: inset 0 0 0 1px var(--line);
}
.button--quiet:hover {
background: rgb(245 237 217 / 0.08);
}
.store {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.5rem;
}
.store-badge {
display: inline-block;
border-radius: 0.6rem;
line-height: 0;
}
.store-badge img {
width: auto;
height: 3.25rem;
}
/* Until the App Store id is set, badges carry a note beneath them. It is
positioned outside the flow so nothing moves when it appears. */
.store-badge[data-soon] {
position: relative;
}
.store-badge[data-soon]::after {
content: "Coming soon to the App Store";
position: absolute;
top: calc(100% + 0.5rem);
left: 50%;
transform: translateX(-50%);
font: 400 0.75rem/1.2 var(--sans);
white-space: nowrap;
color: var(--faint);
}
/* Real screens, in no frame but their own corners. */
.screen {
position: relative;
margin: 0;
overflow: hidden;
border-radius: 13.7% / 6.3%;
background: #000;
box-shadow:
0 0 0 1px rgb(245 237 217 / 0.16),
0 2px 6px rgb(0 0 0 / 0.3),
0 60px 120px -50px rgb(0 0 0 / 0.95);
}
.screen img {
width: 100%;
}
.screen::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(128deg, rgb(255 255 255 / 0.08), transparent 30%);
pointer-events: none;
}
/* Hero: a night sky over a small planet, with the route walked along its horizon. */
.hero {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
min-height: 100svh;
overflow: clip;
padding-top: clamp(7rem, 5rem + 9vh, 11rem);
background: radial-gradient(120% 75% at 50% 0%, #0e1b28 0%, #070d14 55%, var(--night) 100%);
}
.sky {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
}
.sky__stars {
position: absolute;
inset: 0;
background-image: var(--stars-fine);
background-size: 520px 520px;
-webkit-mask-image: linear-gradient(#000 35%, transparent 78%);
mask-image: linear-gradient(#000 35%, transparent 78%);
}
.sky__stars--bright {
background-image: var(--stars-bright);
background-position: 130px 60px;
animation: twinkle 6s ease-in-out infinite alternate;
}
.sky__aurora {
position: absolute;
inset: -10% -25% 25%;
background:
radial-gradient(38% 34% at 28% 42%, rgb(78 156 168 / 0.17), transparent 70%),
radial-gradient(34% 30% at 74% 30%, rgb(222 181 110 / 0.13), transparent 70%),
radial-gradient(30% 26% at 52% 62%, rgb(120 110 190 / 0.1), transparent 70%);
animation: drift 32s ease-in-out infinite alternate;
}
@keyframes twinkle {
from {
opacity: 0.3;
}
to {
opacity: 1;
}
}
@keyframes drift {
from {
transform: translate3d(-4%, 0, 0);
}
to {
transform: translate3d(4%, 3%, 0);
}
}
.is-resting .sky__stars--bright,
.is-resting .sky__aurora,
.is-resting .walker {
animation-play-state: paused;
}
.hero__copy {
position: relative;
z-index: 1;
padding-bottom: clamp(3rem, 2rem + 3vw, 4rem);
text-align: center;
}
.hero__copy .lede {
margin-inline: auto;
}
.hero__copy .store {
justify-content: center;
margin-top: 2.5rem;
}
/* The ground holds the planet, so the horizon always sits just above the three
beats however tall they wrap. */
.ground {
position: relative;
margin-top: auto;
padding-top: clamp(4.5rem, 3rem + 4vw, 6.5rem);
}
.planet {
position: absolute;
left: 50%;
top: 0;
z-index: -1;
width: 230vw;
aspect-ratio: 1;
border-radius: 50%;
transform: translateX(-50%);
background: radial-gradient(circle at 50% 0%, #1a3445 0%, #0f2130 5%, #091521 13%, #060b11 30%);
box-shadow:
0 -1px 0 rgb(245 237 217 / 0.28),
0 -24px 80px -20px rgb(130 185 205 / 0.35);
}
.planet::before {
content: "";
position: absolute;
left: 18%;
right: 18%;
top: -3%;
height: 7%;
border-radius: 50%;
background: radial-gradient(50% 50% at 50% 50%, rgb(150 200 215 / 0.16), transparent 70%);
}
@media (max-width: 47.99rem) {
.planet {
width: 300vw;
}
}
.planet__route {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
/* The route is drawn in the planet's own units: about 3.3 px each on a wide
screen and 1.2 px on a phone, so phones get heavier strokes. */
.planet__route path {
fill: none;
stroke-linecap: round;
}
.route-ahead {
stroke: rgb(245 237 217 / 0.55);
stroke-width: 0.5;
stroke-dasharray: 0 2.6;
}
.route-walked {
stroke: var(--brass);
stroke-width: 0.7;
stroke-dasharray: 22 100;
filter: drop-shadow(0 0 2px rgb(222 181 110 / 0.7));
}
.lantern {
r: 1.9;
fill: var(--night);
stroke: rgb(245 237 217 / 0.65);
stroke-width: 0.45;
transition: fill 0.5s ease, stroke 0.5s ease;
}
.walker {
r: 2.4;
}
@media (max-width: 47.99rem) {
.route-ahead {
stroke-width: 1.3;
stroke-dasharray: 0 5.5;
}
.route-walked {
stroke-width: 1.8;
}
.lantern {
r: 4;
stroke-width: 1.1;
}
.walker {
r: 4.6;
}
}
.lantern.is-lit {
fill: var(--brass);
stroke: var(--brass);
filter: drop-shadow(0 0 5px rgb(222 181 110 / 0.9));
}
.walker {
fill: #fff6e0;
filter: drop-shadow(0 0 8px rgb(255 220 150 / 0.95));
transform-box: fill-box;
transform-origin: center;
animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
50% {
transform: scale(1.35);
}
}
@media (prefers-reduced-motion: reduce) {
.sky__stars--bright,
.sky__aurora,
.walker {
animation: none;
}
}
.beats {
position: relative;
z-index: 1;
display: grid;
gap: 1.5rem 2.5rem;
padding-bottom: 3.25rem;
}
@media (min-width: 48rem) {
.beats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.beats li {
padding-top: 1.1rem;
border-top: 1px solid rgb(245 237 217 / 0.14);
font-size: 0.9375rem;
line-height: 1.5;
color: var(--muted);
}
.beats strong {
display: block;
margin-bottom: 0.3rem;
font: 400 1.3125rem/1.2 var(--serif);
color: var(--ivory);
}
.beats__n {
display: block;
margin-bottom: 0.8rem;
font: 600 0.6875rem/1 var(--sans);
letter-spacing: 0.18em;
color: var(--brass);
}
/* The Journey: on wide screens the screen stays put while the words, the light
and the screen change around it. On phones each scene is its own panel. */
.story {
position: relative;
display: grid;
background: var(--night);
}
.story__stage {
display: none;
}
.story__steps {
position: relative;
z-index: 1;
}
.step {
position: relative;
isolation: isolate;
padding-block: clamp(5rem, 3rem + 8vw, 7rem);
}
.step::before {
content: "";
position: absolute;
inset: 0 calc(-1 * var(--gutter));
z-index: -1;
background: var(--scene);
}
.step__screen {
width: min(19rem, 76vw);
margin: 3rem auto 0;
}
.step[data-step="day"],
.glow--day {
--scene: radial-gradient(60% 45% at 50% 65%, rgb(240 200 140 / 0.2), transparent 70%);
}
.step[data-step="dusk"],
.glow--dusk {
--scene: radial-gradient(60% 45% at 50% 65%, rgb(232 128 96 / 0.22), transparent 70%);
}
.step[data-step="night"],
.glow--night {
--scene: radial-gradient(60% 45% at 50% 65%, rgb(92 132 220 / 0.24), transparent 70%);
}
.step[data-step="arrive"],
.glow--arrive {
--scene: radial-gradient(60% 45% at 50% 65%, rgb(255 186 92 / 0.26), transparent 70%);
}
.step[data-step="cloud"],
.glow--cloud {
--scene: radial-gradient(60% 45% at 50% 65%, rgb(196 214 232 / 0.18), transparent 70%);
}
@media (min-width: 60rem) {
.story__stage {
position: sticky;
top: 0;
z-index: 0;
display: block;
grid-area: 1 / 1;
height: 100svh;
overflow: clip;
}
.story__steps {
grid-area: 1 / 1;
}
.step {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100svh;
max-width: min(31rem, 44%);
padding-block: 0;
}
.step::before,
.step__screen {
display: none;
}
.story__sky .glow {
position: absolute;
inset: 0;
background: var(--scene);
opacity: 0;
transition: opacity 1.2s ease;
}
.glow--day,
.glow--dusk,
.glow--night,
.glow--arrive,
.glow--cloud {
--scene-at: 72% 50%;
}
/* Each scene lights the room in its own colour: a pool behind the screen and a
wide wash across the whole stage. */
.story__sky .glow {
background:
radial-gradient(26% 46% at var(--scene-at), var(--tint), transparent 70%),
radial-gradient(80% 90% at var(--scene-at), var(--wash), transparent 75%);
}
.glow--day {
--tint: rgb(244 204 140 / 0.42);
--wash: rgb(120 150 170 / 0.22);
}
.glow--dusk {
--tint: rgb(240 140 104 / 0.42);
--wash: rgb(150 80 100 / 0.24);
}
.glow--night {
--tint: rgb(100 140 230 / 0.42);
--wash: rgb(40 60 140 / 0.3);
}
.glow--arrive {
--tint: rgb(255 190 96 / 0.48);
--wash: rgb(170 100 40 / 0.24);
}
.glow--cloud {
--tint: rgb(206 222 240 / 0.34);
--wash: rgb(90 120 150 / 0.24);
}
.story[data-scene="day"] .glow--day,
.story[data-scene="dusk"] .glow--dusk,
.story[data-scene="night"] .glow--night,
.story[data-scene="arrive"] .glow--arrive,
.story[data-scene="cloud"] .glow--cloud {
opacity: 1;
}
.story__screen {
position: absolute;
top: 50%;
left: 72%;
height: min(80svh, 46rem);
aspect-ratio: 603 / 1311;
transform: translate(-50%, -50%);
}
.story__screen .shot {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.9s ease;
}
.story[data-scene="day"] [data-shot="day"],
.story[data-scene="dusk"] [data-shot="dusk"],
.story[data-scene="night"] [data-shot="night"],
.story[data-scene="arrive"] [data-shot="arrive"],
.story[data-scene="cloud"] [data-shot="cloud"] {
opacity: 1;
}
}
/* Journeys: a rail of paintings over a blurred wash of the one in front. */
.worlds {
position: relative;
isolation: isolate;
overflow: clip;
padding-block: var(--section);
background: var(--night);
}
.worlds__backdrop {
position: absolute;
inset: 0;
z-index: -1;
}
.worlds__backdrop img {
position: absolute;
inset: -12%;
width: 124%;
max-width: none;
height: 124%;
object-fit: cover;
opacity: 0;
filter: blur(64px) saturate(1.4) brightness(0.48);
transition: opacity 1.2s ease;
}
.worlds[data-world="alps"] [data-backdrop="alps"],
.worlds[data-world="japan"] [data-backdrop="japan"],
.worlds[data-world="brooklyn"] [data-backdrop="brooklyn"],
.worlds[data-world="scotland"] [data-backdrop="scotland"],
.worlds[data-world="americas"] [data-backdrop="americas"],
.worlds[data-world="kepler"] [data-backdrop="kepler"],
.worlds[data-world="emberfall"] [data-backdrop="emberfall"],
.worlds[data-world="noctiluca"] [data-backdrop="noctiluca"] {
opacity: 1;
}
.worlds::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(var(--night), transparent 22%, transparent 78%, var(--night));
pointer-events: none;
}
.worlds__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
}
.rail-nav {
display: none;
gap: 0.75rem;
}
@media (min-width: 48rem) {
.rail-nav {
display: flex;
}
}
.round {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border: 0;
border-radius: 50%;
background: rgb(245 237 217 / 0.08);
box-shadow: inset 0 0 0 1px rgb(245 237 217 / 0.16);
color: var(--ivory);
cursor: pointer;
transition: background-color 0.2s ease, opacity 0.2s ease;
}
.round:hover {
background: rgb(245 237 217 / 0.16);
}
.round:disabled {
opacity: 0.32;
cursor: default;
}
.round svg {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.rail {
position: relative;
margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
scrollbar-width: none;
}
.rail::-webkit-scrollbar {
display: none;
}
.rail:focus-visible {
outline-offset: -2px;
}
.rail__track {
display: flex;
gap: clamp(0.9rem, 0.6rem + 1vw, 1.5rem);
width: max-content;
padding-bottom: 1rem;
}
.card {
position: relative;
isolation: isolate;
flex: none;
width: clamp(15.5rem, 10rem + 14vw, 21rem);
aspect-ratio: 2 / 3;
overflow: hidden;
border-radius: 1.5rem;
scroll-snap-align: start;
box-shadow: 0 0 0 1px rgb(245 237 217 / 0.08), 0 40px 70px -40px rgb(0 0 0 / 0.9);
}
.card img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease);
}
.card::after {
content: "";
position: absolute;
inset: 42% 0 0;
z-index: -1;
background: linear-gradient(transparent, rgb(5 8 12 / 0.9));
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.card:hover img {
transform: scale(1.045);
}
}
.card__text {
position: absolute;
inset: auto 1.35rem 1.35rem;
}
.card .label {
margin-bottom: 0.55rem;
font-size: 0.6875rem;
}
.card h3 {
font-size: 1.5rem;
line-height: 1.1;
}
.card__meta {
margin-top: 0.55rem;
font-size: 0.8125rem;
color: rgb(245 237 217 / 0.74);
}
.worlds .fine {
margin-top: 2.25rem;
}
/* The Journal: a medal under a beam of light. */
.keep {
position: relative;
isolation: isolate;
overflow: clip;
padding-block: var(--section);
background: var(--night);
}
.keep__beam {
position: absolute;
z-index: -1;
top: -20%;
right: -10%;
width: min(70rem, 140vw);
height: 140%;
background:
radial-gradient(28% 34% at 62% 52%, rgb(222 181 110 / 0.2), transparent 70%),
conic-gradient(from 180deg at 62% 0%, transparent 168deg, rgb(245 237 217 / 0.07) 176deg, rgb(245 237 217 / 0.1) 180deg, rgb(245 237 217 / 0.07) 184deg, transparent 192deg);
}
.keep__grid {
display: grid;
gap: 3.5rem;
align-items: center;
}
@media (min-width: 60rem) {
.keep__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, max-content));
gap: 1.5rem clamp(1.5rem, 1rem + 2vw, 3rem);
margin-top: 2.75rem;
}
.facts li {
max-width: 9rem;
font-size: 0.9375rem;
line-height: 1.4;
color: var(--muted);
}
.facts strong {
display: block;
margin-bottom: 0.45rem;
font: 400 clamp(2.5rem, 2rem + 1.5vw, 3.25rem)/1 var(--serif);
color: var(--ivory);
}
.medal {
justify-self: center;
width: min(19rem, 70vw);
touch-action: pan-y;
cursor: grab;
}
.medal img {
width: 100%;
transform-origin: 50% 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 18%, #000 95%, transparent);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 18%, #000 95%, transparent);
mask-composite: intersect;
user-select: none;
-webkit-user-drag: none;
}
.medal__hint {
margin-top: 1.25rem;
text-align: center;
font-size: 0.8125rem;
color: var(--faint);
}
/* Walking together and widgets */
.pair {
padding-block: 0 var(--section);
background: var(--night);
}
.pair__grid {
display: grid;
gap: 1.25rem;
}
@media (min-width: 48rem) {
.pair__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.tile {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column-reverse;
gap: 2.75rem;
overflow: hidden;
padding: clamp(2rem, 1.5rem + 2vw, 3.25rem) clamp(1.5rem, 1rem + 2vw, 3rem) 0;
border-radius: 2rem;
background:
radial-gradient(70% 60% at 50% 100%, rgb(222 181 110 / 0.1), transparent 70%),
linear-gradient(rgb(245 237 217 / 0.05), rgb(245 237 217 / 0.015));
box-shadow: inset 0 0 0 1px rgb(245 237 217 / 0.08);
}
.tile__screen {
width: min(16.5rem, 72%);
margin: 0 auto -42%;
}
.tile h3 {
font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
}
.tile p {
margin-top: 0.6rem;
color: var(--muted);
}
/* Privacy */
.private {
padding-block: 0 var(--section);
background: var(--night);
}
.cols {
display: grid;
gap: 2.25rem 3rem;
margin-top: 3.5rem;
}
@media (min-width: 48rem) {
.cols {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.cols li {
padding-top: 1.5rem;
border-top: 1px solid var(--line);
}
.cols h3 {
font-size: 1.4rem;
}
.cols p {
margin-top: 0.6rem;
font-size: 0.9375rem;
color: var(--muted);
}
.arrow-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 3rem;
font-weight: 600;
text-decoration: none;
}
.arrow-link::after {
content: "→";
transition: transform 0.3s var(--ease);
}
.arrow-link:hover::after {
transform: translateX(4px);
}
/* The last word, over the Highlands. */
.finale {
position: relative;
isolation: isolate;
display: grid;
place-items: center;
min-height: min(100svh, 54rem);
overflow: clip;
padding-block: 8rem;
text-align: center;
}
.finale__bg {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
}
.finale::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(var(--night), rgb(5 8 12 / 0.3) 32%, rgb(5 8 12 / 0.5) 70%, var(--night));
}
.finale .mega {
max-width: 11em;
margin-inline: auto;
font-size: clamp(2.75rem, 1.4rem + 4.8vw, 6rem);
}
.finale .store {
justify-content: center;
margin-top: 2.75rem;
}
/* Footer */
.foot {
padding-block: 3rem 2.5rem;
border-top: 1px solid rgb(245 237 217 / 0.08);
background: var(--night);
color: rgb(245 237 217 / 0.7);
font-size: 0.875rem;
}
.foot__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.foot .brand {
margin: 0;
color: var(--ivory);
}
.foot nav {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.75rem;
}
.foot nav a {
padding-block: 0.4rem;
color: var(--ivory);
text-decoration: none;
}
.foot nav a:hover {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.foot__legal {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgb(245 237 217 / 0.06);
font-size: 0.75rem;
line-height: 1.6;
color: rgb(245 237 217 / 0.55);
}
.foot__legal p + p {
margin-top: 0.4rem;
}
/* Sections below the first screen skip layout and painting, and their images
wait, until they come near the viewport. */
.defer {
content-visibility: auto;
contain-intrinsic-size: auto 1000px;
}
/* Documents: support and privacy */
.page-head {
padding-block: clamp(4rem, 3rem + 5vw, 7rem) clamp(2.5rem, 2rem + 2vw, 3.5rem);
border-bottom: 1px solid var(--line);
}
.page-head .display {
font-size: clamp(2.75rem, 1.8rem + 4vw, 5rem);
line-height: 0.96;
letter-spacing: -0.022em;
}
.page-head .lede {
margin-top: 1.25rem;
}
.eyebrow {
margin: 0 0 1.1rem;
font: 600 0.75rem/1.3 var(--sans);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.page {
display: grid;
gap: 3rem;
padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--section);
}
@media (min-width: 64rem) {
.page {
grid-template-columns: 14rem minmax(0, 1fr);
gap: 5rem;
}
}
.toc {
align-self: start;
font-size: 0.9375rem;
}
@media (min-width: 64rem) {
.toc {
position: sticky;
top: 6rem;
}
}
.toc h2 {
margin-bottom: 0.75rem;
font: 600 0.75rem/1.3 var(--sans);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.toc ol {
margin: 0;
padding: 0;
list-style: none;
}
.toc a {
display: block;
padding: 0.35rem 0;
color: var(--muted);
text-decoration: none;
}
.toc a:hover {
color: var(--fg);
}
.prose {
max-width: 42rem;
}
.prose h2 {
margin: 3.5rem 0 1rem;
font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2.1rem);
scroll-margin-top: 6rem;
}
.prose h3 {
margin: 2rem 0 0.5rem;
font-size: 1.3rem;
line-height: 1.25;
}
.prose p,
.prose ul,
.prose ol {
margin: 0 0 1rem;
}
.prose ul,
.prose ol {
padding-left: 1.25rem;
}
.prose li {
margin-bottom: 0.45rem;
}
.prose li::marker {
color: var(--accent);
}
.prose a {
color: var(--accent);
text-underline-offset: 0.2em;
}
.prose strong {
font-weight: 600;
}
.note {
margin: 0 0 2.5rem;
padding: 1.1rem 1.25rem;
border-radius: 0.9rem;
background: var(--card);
box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--brass);
font-size: 0.9375rem;
}
.note strong {
font-weight: 600;
}
.summary {
margin: 0 0 3rem;
padding: 1.75rem;
border-radius: 1.25rem;
background: var(--card);
box-shadow: var(--shadow);
}
.summary h2 {
margin: 0 0 1rem !important;
font-size: 1.5rem !important;
}
.summary ul {
margin: 0;
}
.confirm {
display: inline-block;
margin-inline: 0.15rem;
padding: 0 0.45rem;
border-radius: 999px;
background: rgb(222 181 110 / 0.22);
box-shadow: inset 0 0 0 1px rgb(222 181 110 / 0.7);
color: var(--fg);
font: 600 0.6875rem/1.6 var(--sans);
letter-spacing: 0.04em;
text-transform: uppercase;
vertical-align: 0.1em;
white-space: nowrap;
}
.contact {
padding: 1.5rem;
border-radius: 1.25rem;
background: var(--card);
box-shadow: var(--shadow);
}
.contact h2 {
font-size: 1.4rem;
}
.contact p {
margin-top: 0.5rem;
font-size: 0.9375rem;
color: var(--muted);
}
.contact .button {
margin-top: 1.1rem;
}
.faq-group {
margin-bottom: 3.25rem;
scroll-margin-top: 6rem;
}
.faq-group h2 {
margin-bottom: 0.75rem;
font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.9rem);
}
.faq {
border-top: 1px solid var(--line);
}
.faq:last-child {
border-bottom: 1px solid var(--line);
}
.faq summary {
position: relative;
padding: 1.1rem 2.5rem 1.1rem 0;
font: 400 1.1875rem/1.35 var(--serif);
cursor: pointer;
list-style: none;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: "";
position: absolute;
right: 0.35rem;
top: 50%;
width: 0.6rem;
height: 0.6rem;
margin-top: -0.45rem;
border-right: 1.5px solid var(--accent);
border-bottom: 1.5px solid var(--accent);
transform: rotate(45deg);
transition: transform 0.25s ease;
}
.faq[open] summary::after {
margin-top: -0.15rem;
transform: rotate(-135deg);
}
.faq__answer {
padding: 0 0 1.25rem;
color: var(--muted);
}
.faq__answer p + p,
.faq__answer p + ol,
.faq__answer p + ul {
margin-top: 0.75rem;
}
.faq__answer ol,
.faq__answer ul {
margin: 0;
padding-left: 1.25rem;
}
.faq__answer a {
color: var(--accent);
text-underline-offset: 0.2em;
}
.support-top {
display: grid;
gap: 2rem;
align-items: end;
}
@media (min-width: 52rem) {
.support-top {
grid-template-columns: minmax(0, 1fr) 22rem;
gap: 4rem;
}
}
/* Invitations and the not-found page */
.solo {
position: relative;
isolation: isolate;
display: grid;
place-items: center;
min-height: calc(100svh - 4.25rem);
overflow: clip;
padding-block: 4rem;
text-align: center;
background:
radial-gradient(40rem 28rem at 50% 78%, rgb(222 181 110 / 0.12), transparent 65%),
radial-gradient(120% 75% at 50% 0%, #0e1b28 0%, var(--night) 70%);
}
.solo::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--stars-fine);
background-size: 520px 520px;
-webkit-mask-image: linear-gradient(#000 20%, transparent 85%);
mask-image: linear-gradient(#000 20%, transparent 85%);
}
.solo__inner {
width: min(100% - 2 * var(--gutter), 34rem);
}
.solo .title {
font-size: clamp(2.4rem, 1.6rem + 3vw, 3.75rem);
line-height: 1;
letter-spacing: -0.02em;
}
.solo .title em {
display: block;
font-style: italic;
color: var(--accent);
}
.solo .lede {
margin-inline: auto;
}
.solo .store {
justify-content: center;
margin-top: 2rem;
}
.lantern-mark {
width: 3rem;
height: 3rem;
margin: 0 auto 2rem;
border-radius: 50%;
background: radial-gradient(circle, var(--brass) 0 28%, rgb(222 181 110 / 0.25) 30% 52%, transparent 54%);
}
.steps {
max-width: 26rem;
margin: 2.5rem auto 0;
padding: 0;
text-align: left;
list-style: none;
counter-reset: step;
}
.steps li {
position: relative;
padding: 0.75rem 0 0.75rem 2.75rem;
border-top: 1px solid rgb(245 237 217 / 0.1);
color: var(--muted);
counter-increment: step;
}
.steps li::before {
content: counter(step);
position: absolute;
left: 0;
top: 0.7rem;
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
box-shadow: inset 0 0 0 1.5px var(--brass);
color: var(--brass);
font: 600 0.8125rem/1 var(--sans);
}
.small {
font-size: 0.9375rem;
color: var(--muted);
}
.invite-note {
margin-top: 1.5rem;
}
/* The invitation's buttons keep their place until the code is read, so nothing moves. */
[data-await-code] {
visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}