/*
 *  site.css
 *  Wayfare — the website layer
 *
 *  `index.css` is The Index: the tokens, and the app's own components
 *  ported so the demonstration on this site is the product rather than a
 *  picture of it. This file is the *website* around them — the bar at the
 *  top, the bands down the page, the footer at the bottom.
 *
 *  Kept apart on purpose. A marketing page wants room, rhythm and a
 *  centre line; an app screen wants a margin and a measure. Mixing the two
 *  is how the site ended up looking like an iPhone in a browser window.
 *
 *  The house rules do not bend here: no gradient, no shadow, no colour
 *  outside the palette, every size from a token. Structure comes from
 *  rules, margins and weight — at website scale.
 */

/* ── Page rhythm ───────────────────────────────────────────────────────
 *
 *  Three widths and nothing else. `--page` is the centred column every
 *  band is laid out in; `--reading` is prose, which stays narrow however
 *  wide the window is; `--gutter` is the air at the edge, which grows on
 *  a large screen because a full-bleed band with a 20px margin reads as
 *  an unstyled document.
 */

:root {
    --page: 1080px;
    --reading: 62ch;
    --gutter: var(--space-lg);
    --bar: 52px;
}

html {
    scroll-padding-top: calc(var(--bar) + var(--space-sm));
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (min-width: 48rem) {
    :root {
        --gutter: var(--space-xl);
        --bar: 56px;
    }
}

body.site {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.wrap {
    width: 100%;
    max-width: var(--page);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.wrap--reading {
    max-width: calc(var(--reading) + var(--gutter) * 2);
}

/* ── The bar ───────────────────────────────────────────────────────────
 *
 *  Thin, sticky, and translucent so the page moves under it. The hairline
 *  along the bottom is the only edge it has; there is no shadow, and it
 *  does not change height on scroll — a bar that resizes as you read is a
 *  bar that redraws the page under your eye.
 */

.bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--sheet) 82%, transparent);
    border-bottom: 1px solid var(--rule);
}

@supports (backdrop-filter: blur(1px)) {
    .bar {
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
    }
}

.bar__row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: var(--bar);
}

.bar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xxs);
    color: var(--ink);
    text-decoration: none;
    flex: none;
}

.bar__mark {
    width: auto;
    height: 1.55em;
    display: block;
    flex: none;
    transform: translateY(-0.34em);
}

.bar__name {
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

/* The links. Small, quiet, evenly spaced — the bar is a way back, not a
   second pitch. */
.bar__links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-inline: auto;
}

.bar__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-minimum);
    color: var(--ink-secondary);
    text-decoration: none;
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    transition: color var(--fade);
}

.bar__links a:hover {
    color: var(--ink);
}

.bar__links a[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

.bar__end {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: none;
    margin-left: auto;
}

/* The bar's badge is the small one; the page's own are larger. */
.bar .badge {
    height: 32px;
}

/* Signed in on this browser: a way back into the web app, next to the
   badge. Hidden until `chrome.js` sees a session, so a stranger is not
   offered a door that will bounce them to log in. */
.bar__open {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-minimum);
    color: var(--ink);
    text-decoration: none;
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.bar__open[hidden] {
    display: none;
}

.bar .account_bar__name {
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

/* ── The App Store badge ───────────────────────────────────────────────
 *
 *  Apple's artwork, unmodified, from the Marketing Resources guidelines.
 *  Two files because there is a black badge and a white badge and the
 *  rule is to use whichever has contrast — this site has both grounds.
 *  Nothing here recolours, stretches or crops it; the only thing CSS
 *  decides is which of the two is shown and how tall it is.
 */

.badge {
    display: inline-flex;
    align-items: center;
    height: 44px;
    flex: none;
    transition: opacity var(--fade);
}

.badge:hover {
    opacity: 0.82;
}

.badge img {
    height: 100%;
    width: auto;
}

.badge .badge__dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .badge .badge__light {
        display: none;
    }

    .badge .badge__dark {
        display: block;
    }
}

:root[data-appearance="light"] .badge .badge__light {
    display: block;
}

:root[data-appearance="light"] .badge .badge__dark {
    display: none;
}

:root[data-appearance="dark"] .badge .badge__light {
    display: none;
}

:root[data-appearance="dark"] .badge .badge__dark {
    display: block;
}

/* Until `APP_STORE_ID` is filled in there is nothing to link to.
   `download.js` swallows the press; this says so without going grey and
   looking broken. */
.badge[aria-disabled="true"] {
    cursor: default;
}

.badge[aria-disabled="true"]:hover {
    opacity: 1;
}

.badge_note {
    margin: var(--space-xs) 0 0;
    color: var(--ink-tertiary);
}

.badge_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

/* ── Bands ─────────────────────────────────────────────────────────────
 *
 *  A page is a stack of bands. Each one gets air above and below rather
 *  than a box around it, and the only thing between two of them is the
 *  change of ground or a hairline. This is the whole layout system.
 */

.band {
    padding-block: clamp(var(--space-xl), 7vw, 96px);
}

.band--tight {
    padding-block: clamp(var(--space-lg), 4vw, var(--space-xxl));
}

/* `plate` is the second ground the app already has. Alternating it is how
   one band is told from the next without a card, a shadow or a tint that
   is not in the palette. */
.band--plate {
    background: var(--plate);
    border-block: 1px solid var(--rule);
}

.band__head {
    max-width: 34ch;
}

.band__head--centre {
    max-width: 30ch;
    margin-inline: auto;
    text-align: center;
}

.band__eyebrow {
    margin: 0 0 var(--space-sm);
    color: var(--ink-tertiary);
}

.band__title {
    margin: 0;
    color: var(--ink);
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 0, "WONK" 1;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.12;
}

.band__lede {
    margin: var(--space-md) 0 0;
    color: var(--ink-secondary);
    max-width: 46ch;
}

.band__head--centre .band__lede {
    margin-inline: auto;
}

.band__body {
    margin-top: clamp(var(--space-lg), 3vw, var(--space-xl));
}

/* ── The hero ──────────────────────────────────────────────────────────
 *
 *  One sentence, as large as the window will carry it, and the way to the
 *  App Store under it. `clamp` rather than a breakpoint: the hook is the
 *  one line on this site that should be as big as it can be and never
 *  wrap in the wrong place.
 */

.hero {
    padding-top: clamp(var(--space-xl), 7vw, 104px);
    padding-bottom: clamp(var(--space-lg), 4vw, var(--space-xxl));
    text-align: center;
}

.hero .hero__hook {
    margin: 0 auto;
    color: var(--ink);
    max-width: 16ch;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 0, "WONK" 1;
    font-size: clamp(40px, 7.4vw, 84px);
    line-height: 1.04;
}

.hero .hero__lede {
    margin: clamp(var(--space-md), 2vw, var(--space-lg)) auto 0;
    color: var(--ink-secondary);
    max-width: 48ch;
    font-size: clamp(17px, 1.5vw, 21px);
}

.hero__actions {
    margin-top: clamp(var(--space-lg), 3vw, var(--space-xl));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

/* ── The stage ─────────────────────────────────────────────────────────
 *
 *  The landing page's first screen is the map. The hook sits on it.
 *  Paper begins at the next band, so the rest of the page can be read
 *  and so the map's attribution stays on a map that is on screen.
 */

.stage {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
}

.stage__map {
    position: absolute;
    inset: 0;
}

.stage__map .map {
    height: 100%;
    aspect-ratio: auto;
    border: 0;
}

.landing .hero {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.landing main {
    background: var(--sheet);
}

/* Under the map the page is one sheet, not three padded bands.
   Values, steps and the closer sit flush so the paper is filled. */
.landing .values {
    border-top: 0;
}

.landing .run__label {
    margin: 0;
    padding: var(--space-md) 0;
    color: var(--ink-tertiary);
}

.landing .steps {
    border-block: 0;
    border-bottom: 1px solid var(--rule);
}

.landing .closer {
    display: grid;
    gap: var(--space-md);
    padding-block: var(--space-lg);
}

@media (min-width: 48rem) {
    .landing .closer {
        grid-template-columns: minmax(0, 1.4fr) auto;
        align-items: start;
    }

    .landing .closer .promise {
        grid-column: 1 / -1;
    }
}

.landing .closer__title {
    margin: 0;
    color: var(--ink);
}

.landing .closer__lede {
    margin: var(--space-xs) 0 0;
    color: var(--ink-secondary);
    max-width: 42ch;
}

.landing .closer__get {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

@media (min-width: 48rem) {
    .landing .closer__get {
        align-items: flex-end;
        text-align: right;
    }
}

.landing .closer .promise {
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
    max-width: none;
}

.landing .foot {
    padding-block: var(--space-lg);
}

/* ── Value grid ────────────────────────────────────────────────────────
 *
 *  Four things the app does, each a mark, a line and a sentence. Ruled
 *  rather than carded: a grid of floating boxes is the pattern this
 *  design system exists to avoid.
 */

.values {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--rule);
    border-block: 1px solid var(--rule);
}

@media (min-width: 40rem) {
    .values {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .values {
        grid-template-columns: repeat(4, 1fr);
    }
}

.values li {
    background: var(--sheet);
    padding: var(--space-lg) var(--space-md);
    display: grid;
    gap: var(--space-xs);
    align-content: start;
}

.band--plate .values li {
    background: var(--plate);
}

.values__mark {
    width: 22px;
    height: 22px;
    color: var(--ink-tertiary);
}

.values__title {
    margin: 0;
    color: var(--ink);
}

.values__note {
    margin: 0;
    color: var(--ink-secondary);
}

/* Three numbered steps. The number is ink, not accession — a sequence
   is not a visited mark. */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--rule);
    border-block: 1px solid var(--rule);
}

@media (min-width: 48rem) {
    .steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.steps li {
    background: var(--sheet);
    padding: var(--space-lg) var(--space-md);
    display: grid;
    gap: var(--space-xs);
    align-content: start;
}

.band--plate .steps li {
    background: var(--plate);
}

.steps__n {
    margin: 0;
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
}

.steps__title {
    margin: 0;
    color: var(--ink);
}

.steps__note {
    margin: 0;
    color: var(--ink-secondary);
}

/* ── Split ─────────────────────────────────────────────────────────────
 *
 *  A claim beside the thing it is a claim about. The exhibit is the app's
 *  own component, live — the register, the map, the timeline — so what is
 *  being described is on the page next to the description of it.
 */

.split {
    display: grid;
    gap: clamp(var(--space-lg), 4vw, var(--space-xxl));
    align-items: center;
}

@media (min-width: 60rem) {
    .split {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .split--flip .split__copy {
        order: 2;
    }
}

.split__copy {
    min-width: 0;
}

.split__exhibit {
    min-width: 0;
}

/* The exhibit is a phone-shaped column of real app UI. Not a device
   mock-up with a notch drawn on it — the app's own margin, on paper. */
.exhibit {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    overflow: hidden;
}

.band--plate .exhibit {
    background: var(--sheet);
}

.exhibit--tall {
    max-height: 560px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.exhibit__caption {
    margin: var(--space-sm) 0 0;
    color: var(--ink-tertiary);
    text-align: center;
}

/* ── Figures ───────────────────────────────────────────────────────────
 *
 *  Three numbers from the worked example. Tabular, so they line up, and
 *  labelled with what they are rather than with an adjective.
 */

.figures_row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 44ch;
    margin-top: var(--space-lg);
}

.figures_row div {
    display: grid;
    gap: var(--space-xxxs);
}

.figures_row dt {
    color: var(--ink-tertiary);
}

.figures_row dd {
    margin: 0;
    color: var(--ink);
}

/* ── Quiet note ────────────────────────────────────────────────────────
 *
 *  The privacy promise, said once on this site, where the scan is
 *  explained. A lock, a hairline, and one sentence.
 */

.promise {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--rule);
    max-width: 46ch;
}

.promise svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 2px;
    color: var(--ink-tertiary);
}

.promise p {
    margin: 0;
    color: var(--ink-secondary);
}

/* ── Questions ─────────────────────────────────────────────────────────
 *
 *  A support page is a list of questions, and a list of questions that is
 *  all open at once is a wall. `<details>` because the browser already
 *  knows how to do this, including for a screen reader and for Find in
 *  Page — which opens the answer it matched.
 */

.faq__topic {
    margin: var(--space-xxl) 0 var(--space-sm);
    color: var(--ink);
}

.faq__topic:first-child {
    margin-top: 0;
}

.faq {
    border-top: 1px solid var(--rule);
}

.faq__item {
    border-bottom: 1px solid var(--rule);
}

.faq__item summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    min-height: var(--tap-minimum);
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__item summary:hover {
    color: var(--ink-secondary);
}

/* A hairline cross that closes into a plus. The one moving part on the
   page, and it is 12px wide. */
.faq__sign {
    position: relative;
    width: 12px;
    height: 12px;
    flex: none;
    margin-left: auto;
    align-self: center;
}

.faq__sign::before,
.faq__sign::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1px;
    background: var(--ink-tertiary);
}

.faq__sign::after {
    transform: rotate(90deg);
    transition: transform var(--snappy);
}

.faq__item[open] .faq__sign::after {
    transform: rotate(0deg);
}

.faq__answer {
    padding-bottom: var(--space-md);
    max-width: var(--reading);
}

.faq__answer > *:first-child {
    margin-top: 0;
}

.faq__answer p {
    margin: var(--space-sm) 0 0;
    color: var(--ink-secondary);
}

.faq__answer ul {
    list-style: none;
    margin: var(--space-sm) 0 0;
    padding: 0 0 0 var(--indent);
}

.faq__answer li {
    padding: var(--space-xxs) 0 var(--space-xxs) var(--space-sm);
    border-left: 1px solid var(--rule);
    color: var(--ink-secondary);
}

.faq__answer a {
    color: var(--ink);
    text-decoration-color: var(--rule-strong);
    text-underline-offset: 2px;
}

/* The topic jump list at the top of Support. Chips, because thirteen
   destinations as a column of rows is the page again before the page. */
.topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-lg);
}

.topics a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-minimum);
    padding: 0 var(--space-md);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
    transition: background var(--fade), color var(--fade);
}

.topics a:hover {
    background: var(--ink);
    color: var(--sheet);
}

/* ── Contact ───────────────────────────────────────────────────────────── */

.contact {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-md);
    max-width: 46ch;
}

.contact p {
    margin: 0;
    color: var(--ink-secondary);
}

.contact a {
    color: var(--ink);
    text-underline-offset: 2px;
}

/* ── Documents ─────────────────────────────────────────────────────────
 *
 *  Privacy and Terms. The contents sit beside the prose on a wide screen
 *  and above it on a narrow one, and the prose keeps its own measure
 *  either way — a policy set across 1080px is a policy nobody finishes.
 */

.doc {
    display: grid;
    gap: clamp(var(--space-lg), 4vw, var(--space-xl));
    align-items: start;
}

@media (min-width: 64rem) {
    .doc {
        grid-template-columns: 15rem minmax(0, 1fr);
    }

    .doc__contents {
        position: sticky;
        top: calc(var(--bar) + var(--space-lg));
        max-height: calc(100svh - var(--bar) - var(--space-xl));
        overflow-y: auto;
    }
}

.doc__contents p {
    margin: 0 0 var(--space-xs);
    color: var(--ink-tertiary);
}

.doc__contents ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.doc__contents a {
    display: block;
    padding: var(--space-xxs) 0;
    color: var(--ink-secondary);
    text-decoration: none;
}

.doc__contents a:hover {
    color: var(--ink);
}

.doc__body {
    min-width: 0;
    max-width: var(--reading);
}

.doc__body .rule {
    display: none;
}

.doc__body .section {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--rule);
}

.doc__body .section:first-child {
    padding-top: 0;
    border-top: 0;
}

.doc__body .section_header {
    padding-top: 0;
}

body.site main.auth {
    flex: 1;
    width: 100%;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.foot {
    margin-top: auto;
    border-top: 1px solid var(--rule);
    background: var(--sheet);
    padding-block: var(--space-xl);
}

.foot__cols {
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 40rem) {
    .foot__cols {
        grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    }
}

.foot__about p {
    margin: var(--space-xs) 0 0;
    color: var(--ink-tertiary);
    max-width: 32ch;
}

.foot__group h2 {
    margin: 0 0 var(--space-xs);
    color: var(--ink);
}

.foot__group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.foot__group a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--ink-secondary);
    text-decoration: none;
}

.foot__group a:hover {
    color: var(--ink);
}

.foot__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--rule);
    color: var(--ink-tertiary);
}

.foot__base_spacer {
    flex: 1;
}

/* ── Arrival ───────────────────────────────────────────────────────────
 *
 *  A band lifts a few pixels as it arrives. Eight pixels and 400ms: at
 *  that size it reads as the page settling rather than as an animation,
 *  which is the only version of this worth having.
 *
 *  The initial state is set by script, not by CSS, so a page with no
 *  JavaScript is a page with all its content visible rather than a blank
 *  one waiting for an observer that will never run.
 */

.js-reveal {
    opacity: 0;
    transform: translateY(8px);
}

.js-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 400ms ease-out, transform 400ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal,
    .js-reveal.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .faq__sign::after {
        transition: none;
    }
}

/* ── Narrow ────────────────────────────────────────────────────────────
 *
 *  The links come out of the bar below 48rem and sit under it as a row
 *  that scrolls sideways. A hamburger for four destinations is a menu
 *  hiding a menu.
 */

@media (max-width: 47.999rem) {
    .bar__row {
        flex-wrap: wrap;
        padding-block: var(--space-xs);
    }

    .bar__links {
        order: 3;
        width: 100%;
        margin-inline: 0;
        gap: var(--space-md);
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: var(--space-xxs);
    }

    .bar__links::-webkit-scrollbar {
        display: none;
    }

    .bar__links a {
        min-height: 36px;
        white-space: nowrap;
    }

    .bar .badge {
        height: 30px;
    }
}