/*
 * baxx.io before launch, in The Standing Order world: the landing page's first view on the night
 * before the round begins. Tokens and components are the main branch's resources/css/world, copied
 * value for value; only what this page uses is here. Flat and hard-edged: colour steps, it never
 * blends, and nothing casts a shadow. The order card is the only box.
 */

/* ----------------------------------------------------------------- faces */

@font-face {
    font-family: 'Big Shoulders Display Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/fonts/big-shoulders-display-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
    font-family: 'Public Sans Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/fonts/public-sans-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
    font-family: 'Courier Prime';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('/fonts/courier-prime-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Courier Prime';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url('/fonts/courier-prime-latin-700-normal.woff2') format('woff2');
}

/* ---------------------------------------------------------------- tokens */

:root {
    --color-enamel: #0e1528;
    --color-sky-2300: #121b33;
    --color-sky-0300: #213258;
    --color-sky-0400: #2a3f6b;
    --color-apricot: #f19a73;
    --color-apricot-pale: #f6c48f;
    --color-step: #c9ccc6;
    --color-step-edge: #a9ada6;
    --color-glass: #f3f5f0;
    --color-glass-soft: #c3ccdc;
    --color-glass-muted: #dfe4ee;
    --color-foil-gold: #e8b43c;
    --color-ink: #1a2644;
    --color-ink-soft: #46546e;

    --font-sign: 'Big Shoulders Display Variable', 'Arial Narrow', 'Roboto Condensed', sans-serif;
    --font-text: 'Public Sans Variable', ui-sans-serif, system-ui, sans-serif;
    --font-docket: 'Courier Prime', 'Courier New', ui-monospace, monospace;

    --text-sign-md: clamp(1.625rem, 1.35rem + 0.9vw, 2.125rem);
    --text-lede: clamp(1.125rem, 1.04rem + 0.35vw, 1.3125rem);
    --text-body: 1.0625rem;
    --text-small: 0.9375rem;
    --text-docket: 1rem;
    --text-docket-sm: 0.875rem;
    --text-label: 0.8125rem;

    --tracking-sign: 0.01em;
    --tracking-sign-wide: 0.12em;
    --tracking-label: 0.1em;

    --spacing-2xs: 0.5rem;
    --spacing-xs: 0.75rem;
    --spacing-s: 1rem;
    --spacing-m: 1.5rem;
    --spacing-l: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-gutter: clamp(1rem, -0.35rem + 5.3vw, 4.5rem);
    --spacing-measure: 64ch;
    --spacing-page: 81rem;

    /* The doorstep: its dawn bands, the step's edge, and one slot, exactly one bottle's glass. */
    --dawn-apricot: 1.375rem;
    --dawn-pale: 0.75rem;
    --doorstep-dawn: calc(var(--dawn-apricot) + var(--dawn-pale));
    --step-edge: 0.625rem;
    --slot-width: clamp(3.825rem, 3.24rem + 1.26vw, 4.5rem);
    --bottle-ratio: calc(164 / 72);
}

/* ------------------------------------------------------- browser surfaces */

*,
::before,
::after {
    box-sizing: border-box;
}

html {
    background: var(--color-enamel);
    color-scheme: only light;
    scrollbar-color: var(--color-glass-soft) var(--color-enamel);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow-x: clip;
    background: var(--color-sky-2300);
    color: var(--color-glass);
    font-family: var(--font-text);
    font-size: var(--text-body);
    line-height: 1.6;
    font-kerning: normal;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
p,
dl,
dd {
    margin: 0;
}

p,
li,
dd {
    text-wrap: pretty;
}

::selection {
    background: var(--color-foil-gold);
    color: var(--color-ink);
}

:focus-visible {
    outline: 3px solid var(--color-apricot-pale);
    outline-offset: 3px;
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

svg {
    display: block;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* A phrase that moves to the next line whole when it fits, and wraps inside itself only when it
   can't (large text, or a reader's own text spacing), so nothing is ever clipped. */
.keep-together {
    display: inline-block;
}

/* Signs: condensed enamel caps for every headline. */
.sign {
    font-family: var(--font-sign);
    font-weight: 800;
    letter-spacing: var(--tracking-sign);
    text-transform: uppercase;
    text-wrap: balance;
}

.skip-link {
    position: absolute;
    top: var(--spacing-2xs);
    left: var(--spacing-2xs);
    z-index: 10;
    padding: var(--spacing-xs) var(--spacing-s);
    background: var(--color-glass);
    color: var(--color-ink);
    font-family: var(--font-sign);
    font-weight: 800;
    letter-spacing: var(--tracking-sign-wide);
    text-transform: uppercase;
    translate: 0 -200%;
}

.skip-link:focus-visible {
    translate: 0 0;
    outline-color: var(--color-foil-gold);
}

/* Buttons: cut square, set in sign caps. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: 0.85rem 1.75rem;
    border: 0;
    border-radius: 0;
    font-family: var(--font-sign);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--tracking-sign-wide);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.button:active {
    translate: 0 1px;
}

.button--ink {
    background: var(--color-ink);
    color: var(--color-glass);
}

.button--ink:hover {
    background: var(--color-sky-0400);
}

.button--ink:focus-visible {
    outline-color: var(--color-ink);
}

/* ------------------------------------------------------- the enamel strip */

.enamel {
    position: relative;
    background: var(--color-enamel);
}

/* The plate's edge: a keyline along its foot, where the enamel meets the night. */
.enamel::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: var(--color-glass);
    opacity: 0.32;
}

.enamel__inner {
    display: flex;
    align-items: center;
    max-width: var(--spacing-page);
    min-height: 4.5rem;
    margin-inline: auto;
    padding: 0.875rem var(--spacing-gutter);
    box-sizing: content-box;
}

.enamel__mark {
    font-family: var(--font-sign);
    font-size: 2.125rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none;
}

/* ---------------------------------------------------------------- the hero */

.hero {
    overflow: clip;
}

.hero__inner {
    display: grid;
    grid-template-columns:
        [full-start] var(--spacing-gutter)
        [copy-start card-start] minmax(0, 1fr)
        [copy-end card-end] var(--spacing-gutter)
        [full-end];
    padding-top: clamp(1.75rem, 5vh, 4rem);
}

.hero__title {
    grid-column: copy;
    grid-row: 1;
    /* Each line of the sign fits its column: three lines at every width. The floor keeps it larger
       than the text when a reader sets a large default text size. */
    font-size: max(min(calc((100vw - 2 * var(--spacing-gutter)) / 9.3), 4rem), 1.75rem);
    line-height: 1.06;
}

.hero__line {
    display: block;
}

.hero__lede {
    grid-column: copy;
    max-width: 34rem;
    margin-top: 1rem;
    color: var(--color-glass-muted);
    font-size: var(--text-lede);
    line-height: 1.5;
}

.hero__lede--short {
    grid-row: 2;
}

.hero__lede--full {
    grid-row: 3;
    display: none;
}

/* -------------------------------------------------------- the order card */

/* The landing page's card, printed before the round begins: the same head, labels and values, with
   no fields to fill, and a foot that says orders aren't open yet. */
.order {
    grid-column: full;
    grid-row: 4;
    position: relative;
    z-index: 1;
    margin-top: var(--spacing-m);
    padding: 1.375rem var(--spacing-gutter) 1.25rem;
    background: var(--color-glass);
    color: var(--color-ink);
    font-family: var(--font-docket);
}

.order :focus-visible {
    outline-color: var(--color-ink);
}

.order__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-s);
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--color-ink);
}

.order__title {
    font-family: var(--font-sign);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--tracking-sign-wide);
    text-transform: uppercase;
}

.order__meta {
    color: var(--color-ink-soft);
    font-size: var(--text-docket-sm);
    line-height: 1.2;
    text-align: right;
}

.order__row {
    padding-top: 0.75rem;
}

.order__label {
    color: var(--color-ink-soft);
    font-size: var(--text-label);
    line-height: 1.3;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.order__value {
    margin-top: 0.2rem;
    font-size: 1.125rem;
    line-height: 1.35;
    text-wrap: balance;
}

.order__hint {
    margin-top: 0.1rem;
    color: var(--color-ink-soft);
    font-size: var(--text-label);
    line-height: 1.4;
    text-wrap: balance;
}

/* The foot: a solid rule closes the order, then the card's one word on the round. */
.order__foot {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 2px solid var(--color-ink);
}

.order__status {
    font-size: var(--text-sign-md);
    line-height: 1.08;
}

.order__action {
    width: 100%;
    margin-top: 1.125rem;
}

.order__fine {
    margin-top: 0.7rem;
    color: var(--color-ink-soft);
    font-size: var(--text-docket-sm);
    line-height: 1.4;
    text-align: center;
    text-wrap: balance;
}

/* -------------------------------------------------------------- the doorstep */

.doorstep {
    display: contents;
}

.doorstep__sky {
    grid-column: full;
    grid-row: 5;
    align-self: end;
    display: flex;
    flex-direction: column;
    height: 5.25rem;
}

.band {
    display: block;
}

.band--night {
    flex: 1;
    background: var(--color-sky-0300);
}

.band--apricot {
    height: var(--dawn-apricot);
    background: var(--color-apricot);
}

.band--pale {
    height: var(--dawn-pale);
    background: var(--color-apricot-pale);
}

.doorstep__row {
    grid-column: copy;
    grid-row: 5;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    margin-top: var(--spacing-xl);
}

.doorstep__step {
    grid-column: full;
    grid-row: 6;
    border-top: var(--step-edge) solid var(--color-step-edge);
    background: var(--color-step);
    color: var(--color-ink);
}

.doorstep__step-inner {
    max-width: var(--spacing-page);
    margin-inline: auto;
    padding: 1rem var(--spacing-gutter) 1.25rem;
    box-sizing: content-box;
    font-family: var(--font-docket);
    font-size: var(--text-docket-sm);
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

/* The first night's spot: a dashed outline where the first bottle will stand, drawn twice and cut at
   the band line, glass against the night and ink across the apricot and pale bands, so the one
   dashed line holds 3:1 on every ground. */
.spot {
    position: relative;
    flex: none;
    width: var(--slot-width);
    aspect-ratio: 72 / 164;
}

.dashed-glass {
    width: 100%;
    height: auto;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.dashed-glass use {
    vector-effect: non-scaling-stroke;
}

.spot__outline {
    color: var(--color-glass);
    opacity: 0.7;
    clip-path: inset(-2px -2px var(--doorstep-dawn) -2px);
}

.spot__outline--dawn {
    position: absolute;
    inset: 0 0 auto;
    color: var(--color-ink);
    opacity: 1;
    clip-path: inset(calc(100% - var(--doorstep-dawn)) -2px -2px -2px);
}

/* The clock, the two-line label and the word stand on the band line rather than hang from the
   shoulder, so however the label wraps, "soon" stays on the night, never on the apricot. */
.spot__clock {
    position: absolute;
    inset: auto 0 calc(var(--doorstep-dawn) + 0.375rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    color: var(--color-glass);
    text-align: center;
}

.clock {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    fill: none;
    stroke-linecap: round;
}

.clock__face,
.clock__ticks {
    stroke: currentColor;
    stroke-width: 1.5;
    opacity: 0.8;
}

.clock__hand {
    stroke: var(--color-glass);
    stroke-width: 2;
}

/* Two o'clock, the landing page's default hour, on the pale apricot hour hand. */
.clock__hand--hour {
    stroke: var(--color-apricot-pale);
    stroke-width: 2.5;
    transform-box: view-box;
    transform-origin: 50% 50%;
    rotate: 60deg;
}

.clock__pin {
    fill: var(--color-glass);
}

.spot__label {
    font-family: var(--font-sign);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.spot__time {
    font-family: var(--font-docket);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* --------------------------------------------------------------- not found */

/* 404.html: one sign and one line on the night, and the way home. */
.lost {
    max-width: var(--spacing-page);
    margin-inline: auto;
    padding: var(--spacing-2xl) var(--spacing-gutter) calc(var(--spacing-2xl) * 1.5);
    box-sizing: content-box;
}

.lost__title {
    font-size: clamp(2.5rem, 1.55rem + 3.2vw, 4.75rem);
    line-height: 1.06;
}

.lost__text {
    max-width: 34rem;
    margin-top: 1.25rem;
    color: var(--color-glass-muted);
    font-size: var(--text-lede);
    line-height: 1.5;
}

.lost__text a {
    display: inline-block;
    color: var(--color-glass);
    text-decoration-color: var(--color-apricot-pale);
    text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------- the footer */

.footer {
    position: relative;
    background: var(--color-enamel);
    color: var(--color-glass-soft);
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 1px;
    background: var(--color-glass);
    opacity: 0.32;
}

.footer__inner {
    display: grid;
    gap: var(--spacing-m);
    max-width: var(--spacing-page);
    margin-inline: auto;
    padding: var(--spacing-xl) var(--spacing-gutter) var(--spacing-2xl);
    box-sizing: content-box;
}

.footer__mark {
    color: var(--color-glass);
    font-family: var(--font-sign);
    font-size: 2.125rem;
    font-weight: 800;
    line-height: 1;
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__links a {
    display: inline-block;
    padding-block: 0.3rem;
    color: var(--color-glass);
    font-family: var(--font-sign);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: var(--tracking-sign-wide);
    text-decoration: none;
    text-transform: uppercase;
}

.footer__links a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.footer__legal {
    display: grid;
    gap: 0.4rem;
    font-size: var(--text-small);
    line-height: 1.55;
}

.footer__legal p {
    max-width: var(--spacing-measure);
}

/* -------------------------------------------------------------- breakpoints */

@media (width < 22.5rem) {
    .button {
        padding-inline: 1rem;
        letter-spacing: 0.05em;
    }
}

@media (width < 40rem) {
    .enamel__mark {
        font-size: 1.875rem;
    }
}

@media (width >= 40rem) {
    .hero__lede--short {
        display: none;
    }

    .hero__lede--full {
        display: block;
        margin-top: 1.5rem;
    }

    /* Stacked on a small tablet, the card takes the whole column, as on a phone. */
    .order {
        grid-column: copy;
        padding: 1.625rem 1.875rem 1.375rem;
    }

    .order__row {
        padding-top: 0.875rem;
    }

    .order__value {
        font-size: 1.25rem;
    }

    .order__hint {
        font-size: var(--text-docket-sm);
    }
}

/* From a tablet up the hero has the landing page's desktop shape: the headline, the lede and the
   doorstep down the copy column, and the card beside them from the headline's cap line down to
   the step. */
@media (width >= 48rem) {
    .hero__inner {
        --card-width: 23rem;
        --card-gap: var(--spacing-l);
        grid-template-columns:
            [full-start] var(--spacing-gutter)
            [copy-start] minmax(0, 1fr)
            [copy-end] var(--card-gap)
            [card-start] var(--card-width)
            [card-end] var(--spacing-gutter)
            [full-end];
        /* Title, lede, a flexible gap, the doorstep, the step. */
        grid-template-rows: auto auto 1fr auto auto;
    }

    /* The title's box starts at its cap line, so the card's top edge meets it exactly. */
    .hero__title {
        text-box: trim-both cap alphabetic;
    }

    .hero__lede--short,
    .hero__lede--full {
        grid-row: 2;
        margin-top: 1.75rem;
    }

    /* The card stands from the title's cap line down to the step; its foot sits on the step. */
    .order {
        grid-column: card;
        grid-row: 1 / 5;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        margin-top: 0;
    }

    /* As on the landing page, the rows take up the card's spare height between them, each row
       standing at the foot of its share, so the card never holds a hollow above its foot. */
    .order__rows {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .order__row {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
        justify-content: flex-end;
    }

    .order__foot {
        margin-top: 1.5rem;
    }

    .doorstep__sky,
    .doorstep__row {
        grid-row: 4;
    }

    .doorstep__row {
        margin-top: clamp(2rem, 5vh, 3.5rem);
    }

    .doorstep__step {
        grid-row: 5;
    }
}

/* A tablet's copy column is narrow beside the card, so the sign stacks like a street sign, one phrase
   a line, and the short lede follows. */
@media (48rem <= width < 64rem) {
    .hero__title {
        --hero-copy-width: calc(100vw - 2 * var(--spacing-gutter) - var(--card-gap) - var(--card-width));
        font-size: clamp(1.75rem, calc(var(--hero-copy-width) / 5.1), 3.5rem);
    }

    .hero__part {
        display: block;
    }

    .hero__lede--short {
        display: block;
    }

    .hero__lede--full {
        display: none;
    }
}

@media (width >= 64rem) {
    .hero__inner {
        --card-width: clamp(25rem, 21rem + 6vw, 28.75rem);
        --card-gap: clamp(2.5rem, 5vw, 4.5rem);
        grid-template-columns:
            [full-start] minmax(var(--spacing-gutter), 1fr)
            [copy-start] minmax(0, calc(var(--spacing-page) - var(--card-width) - var(--card-gap)))
            [copy-end] var(--card-gap)
            [card-start] var(--card-width)
            [card-end] minmax(var(--spacing-gutter), 1fr)
            [full-end];
    }

    .hero__title {
        font-size: clamp(3rem, 7.6vw - 1.6rem, 5.25rem);
    }

    /* This page has no rail, so the footer repeats the hero's two edges: the wordmark and the legal
       lines on the headline's, the link on the card's. */
    .footer__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
    }

    .footer__links {
        grid-column: 2;
        grid-row: 1;
    }

    .footer__legal {
        grid-column: 1 / -1;
    }
}

/* A short landscape tablet would spend its whole first view on a sign stacked one phrase a line, so
   it keeps three lines, sized as on a phone. */
@media (48rem <= width < 64rem) and (height < 32rem) {
    .hero__part {
        display: inline;
    }

    .hero__title {
        font-size: clamp(1.75rem, calc(var(--hero-copy-width) / 9.3), 3.5rem);
    }
}

/* Without cap-line trimming the card would start a little above the sign's caps. */
@supports not (text-box: trim-both cap alphabetic) {
    @media (width >= 48rem) {
        .hero__title {
            margin-top: -0.11em;
        }
    }
}

/* Forced colours drop every ground, so the card, the button and the empty spot carry system-colour
   edges instead, and the spot is drawn whole in one colour. */
@media (forced-colors: active) {
    .order {
        border: 1px solid CanvasText;
    }

    .button {
        border: 2px solid ButtonText;
    }

    .spot__outline {
        color: CanvasText;
        opacity: 1;
        clip-path: none;
    }

    .spot__outline--dawn {
        display: none;
    }

    .clock__hand,
    .clock__hand--hour {
        stroke: CanvasText;
    }

    .clock__pin {
        fill: CanvasText;
    }
}

/* On paper: ink on white, the card ruled, and the action printed as its address. */
@media print {
    html,
    body,
    .enamel,
    .footer,
    .order,
    .doorstep__step {
        background: #fff;
        color: #000;
    }

    .hero__lede,
    .footer,
    .footer__mark,
    .footer__links a,
    .order__meta,
    .order__label,
    .order__hint,
    .order__fine {
        color: #000;
    }

    .skip-link,
    .doorstep__sky,
    .doorstep__row,
    .enamel::after,
    .footer::before {
        display: none;
    }

    .order {
        border: 1px solid #000;
        break-inside: avoid;
    }

    .button--ink {
        background: none;
        color: #000;
        border: 2px solid #000;
    }

    .hero__inner {
        padding-top: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .button,
    .footer__links a {
        transition:
            background-color 160ms ease-out,
            color 160ms ease-out;
    }
}