/*
 * BackBeer, every page.
 *
 * One stylesheet for the whole site: the landing page, /business, and the
 * legal pages in four languages. Generated pages all share the same navbar
 * and footer, so the chrome is defined once here rather than per page.
 *
 * Archivo throughout - 400 for reading, Archivo Black for the wordmark and
 * the headings. The measure stops at 44rem on a document you are expected to
 * read to the end; the landing page opens out wider because its job is to be
 * scanned, not read.
 *
 * Do not edit the copies under apps/web - they are generated. Edit this file
 * and run `npm run site:build`.
 */

:root {
    /* The brand yellow is the app icon's background, sampled, not guessed. */
    --gold: #F2B705;
    --gold-deep: #D97706;
    --ink: #17150F;
    --ink-soft: #4B5563;
    --ink-faint: #6B7280;
    --rule: #E7E2D6;
    --yes: #047857;
    --no: #B91C1C;
    --ground: #FFFBF3;
    /* The app's splash ground. Used for the two warm bands on the home page,
       and nowhere else - see the home page's shape at the foot of this file. */
    --ground-warm: #FDF8EF;
    --card: #FFFFFF;
    --black: #000000;
    --on-black: #FFFFFF;
    --on-black-soft: #9CA3AF;
    --nav-h: 4rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 400;
    background: var(--ground);
    color: var(--ink);
    margin: 0;
    line-height: 1.65;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .wordmark {
    font-family: 'Archivo Black', 'Archivo', system-ui, sans-serif;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

a { color: var(--gold-deep); }
a:hover { color: var(--ink); }

/* ------------------------------------------------------------- navbar */

/* Not sticky on a phone, and that is the whole reason this rule exists.
   
   The bar carries six links and a four-way language switch. Below 45rem they
   wrap to two rows and the bar is about 157px tall, which is a fifth of a
   phone screen held back from the page for the whole visit. A header that
   large is worth more as something you scroll back to than as something you
   scroll under. From 45rem up it fits on one row and sticks, as designed.
   
   The alternative is collapsing it behind a menu button on small screens,
   which is a design decision rather than a CSS one. */
.nav {
    z-index: 50;
    background: rgba(255, 251, 243, 0.92);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--rule);
}

.nav-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
    min-height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Logo and wordmark, always first and always a link home. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--ink);
    flex: 0 0 auto;
}

.brand img {
    width: 2.1rem;
    height: 2.1rem;
    display: block;
}

.brand .wordmark {
    font-size: 1.22rem;
    letter-spacing: -0.02em;
}

/* The bar is brand, then actions, then the links. Below 45rem the links are a
   panel the button opens; from 45rem they are a row in the bar and the button
   is gone. Source order is brand, actions, links, and `order` puts the links
   back in the middle on the wide layout: the panel has to come after the
   button in the DOM so that tabbing out of the button lands in what it just
   opened. */
.nav-inner { flex-wrap: wrap; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    order: 2;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.15rem 1.1rem;
    flex-wrap: wrap;
    order: 3;
}

/* Hidden only where something can open it again: `js` is set in the head, so
   with scripting off the links stay in the bar and wrap as they always did. */
.js .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.4rem 0 0.9rem;
    border-top: 1px solid var(--rule);
    margin-top: 0.6rem;
}

.js .nav-open .nav-links { display: flex; }

/* Full width and 44px tall, because in a panel there is no reason for a target
   to be anything less. */
.js .nav-links > a {
    width: 100%;
    padding: 0.62rem 0;
    font-size: 1rem;
}

.js .nav-links .langs { margin-top: 0.7rem; }

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.36rem 0.7rem;
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.js .nav-toggle { display: inline-flex; }
.nav-toggle:hover { border-color: var(--ink-faint); }

/* One button, both icons, and CSS picks. Swapping the icon in script leaves
   the button momentarily empty. */
.nav-toggle .i-close,
.nav-open .nav-toggle .i-open { display: none; }
.nav-open .nav-toggle .i-close { display: block; }

/* The word goes at 22rem, where the bar starts to run out of room. The button
   keeps its aria-label either way, so it is never an unlabelled icon. */
.nav-toggle-word { display: none; }

@media (min-width: 22rem) {
    .nav-toggle-word { display: inline; }
}

.nav-links a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
    /* Padding rather than a bigger font: the target grows from 25px to 36px
       and the type does not move. This bar wraps to two rows on a phone, so
       these were 25px targets with the next row 17px below. */
    display: inline-block;
    padding: 0.35rem 0;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
    color: var(--ink);
}

.nav-links a[aria-current="page"] {
    box-shadow: inset 0 -2px 0 var(--gold);
}

/* The four-language picker, top right.
 *
 * This is the app's rail, rebuilt in CSS: a gray track with a white pill on
 * the selected chip. The tokens are the app's own, not an approximation -
 * segmentTrack #e9ebee, surface #ffffff, muted #71777d, text #181f25, radius
 * 12 on the track and 22 on the chip, 3px of padding. See
 * apps/mobile/src/components/ui/Rail.tsx.
 *
 * The app's rail slides its pill between chips. There is nothing to slide
 * here: each chip is a link to another page, so the pill is already where it
 * belongs when the page arrives.
 *
 * Codes rather than language names, which is the app's call and for the same
 * reason - a two-letter code is the one label that reads equally to somebody
 * who has landed in a language they do not speak and is looking for the way
 * out.
 */
.langs {
    --track: #e9ebee;
    --chip-on: #ffffff;
    --chip-ink: #181f25;
    --chip-ink-off: #71777d;

    display: inline-flex;
    align-items: stretch;
    background: var(--track);
    border-radius: 12px;
    padding: 3px;
    flex: 0 0 auto;
}

.langs a,
.langs span {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.1px;
    line-height: 15px;
    padding: 7px 11px;
    border-radius: 22px;
    text-decoration: none;
    color: var(--chip-ink-off);
    text-align: center;
}

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

.langs .current {
    background: var(--chip-on);
    color: var(--chip-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

/* The one filled control in the bar, so there is a single focal point -
   the same reasoning that took the ink-filled chips out of the app's rail. */
.nav-account {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--gold);
    color: var(--ink) !important;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.nav-account:hover { background: var(--gold-deep); color: var(--ink) !important; }

/* ------------------------------------------------------------- layout */

.wrap {
    max-width: 44rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.wrap-wide {
    max-width: 68rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

h1 { font-size: 2rem; margin: 0 0 0.35rem; }
h2 { font-size: 1.3rem; margin: 2.4rem 0 0.6rem; }
h3 { font-size: 1.05rem; margin: 1.6rem 0 0.4rem; }

p { margin: 0 0 1rem; }

.updated {
    color: var(--ink-faint);
    font-size: 0.92rem;
    margin-bottom: 2rem;
}

/* The summary box the legal pages open with. */
.short {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 0.8rem;
    padding: 1.2rem 1.4rem;
    margin: 0 0 2rem;
}

.short h2 { margin-top: 0; font-size: 1.1rem; }

ul.yes, ul.no { list-style: none; padding-left: 0; margin: 0 0 0.6rem; }
ul.yes li, ul.no li { padding-left: 1.6rem; position: relative; }
ul.yes li::before { content: "\2713"; color: var(--yes); position: absolute; left: 0; font-weight: 700; }
ul.no  li::before { content: "\2715"; color: var(--no);  position: absolute; left: 0; font-weight: 700; }

.who {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 0.8rem;
    padding: 1rem 1.2rem;
    margin: 1.2rem 0;
}

.binding {
    margin-top: 2.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-faint);
    font-size: 0.92rem;
}

table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 700; }

code {
    background: #F3EFE4;
    padding: 0.1rem 0.32rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

/* ------------------------------------------------------- shared cards
 *
 * The business page still uses these. The home page's own shapes live at the
 * foot of this file, where the design that draws them is described.
 */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 0.9rem;
    padding: 1.3rem;
}

.card h3 { margin-top: 0; }
.card p { margin-bottom: 0; color: var(--ink-soft); }

.note {
    background: #FDF6E3;
    border: 1px solid #F0E3BD;
    border-radius: 0.7rem;
    padding: 1rem 1.2rem;
    color: var(--ink-soft);
}

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

.foot {
    background: var(--black);
    color: var(--on-black);
    margin-top: 4rem;
}

.foot a { color: var(--on-black); text-decoration: none; }
.foot a:hover { color: var(--gold); text-decoration: underline; }

.foot-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 3rem 1.25rem 1.5rem;
    display: grid;
    /* The brand column holds three paragraphs rather than one line, so it gets
       real width: a paragraph in a 16rem column is a stack of four-word rows.
       The link columns need far less than the half they used to take. */
    grid-template-columns: minmax(18rem, 32rem) 1fr;
    gap: 3.5rem;
}

/* The mark, with the wordmark underneath it rather than beside it.
   Ranged left, because what sits under them is three paragraphs of prose now:
   centring was right for the one line that used to be there and sets a
   paragraph as a column of ragged short rows. */
.foot-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.foot-brand img { width: 7.2rem; height: 7.2rem; display: block; }

.foot-brand .wordmark {
    display: block;
    margin-top: 0.6rem;
    font-size: 1.35rem;
    color: var(--on-black);
}

.foot-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1.8rem;
}

.foot-cols h4 {
    font-family: 'Archivo', sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-black-soft);
    margin: 0 0 0.7rem;
    font-weight: 600;
}

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

/* These were 16px tall with 7px between them, under the 24px WCAG 2.5.8 asks
   for. The padding does the work and the margin gives most of it back, so the
   footer is barely taller than it was. */
.foot-cols li { margin-bottom: 0.1rem; }
.foot-cols a {
    font-size: 0.95rem;
    display: inline-block;
    padding: 0.3rem 0;
}

.foot-bottom {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
    border-top: 1px solid #262626;
    color: var(--on-black-soft);
    font-size: 0.86rem;
}

.foot-bottom .partners { margin: 0 0 0.3rem; }
.foot-bottom .copy { margin: 0; }

@media (max-width: 40rem) {
    .foot-inner { grid-template-columns: 1fr; gap: 2rem; }
    .nav-inner { flex-wrap: wrap; padding-top: 0.6rem; padding-bottom: 0.6rem; }
    .nav-links { width: 100%; margin-left: 0; gap: 0.9rem; }
    body { font-size: 16px; }
}

/* Visible only once focused, which is the point: a keyboard user gets past
   the navbar on every page without it appearing for anybody else. */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--gold);
    color: var(--ink);
    padding: 0.6rem 1rem;
    z-index: 100;
    border-radius: 0 0 0.4rem 0;
    font-weight: 600;
    text-decoration: none;
}

.skip:focus { left: 0; }

/* ------------------------------------------- the server-rendered pages
 *
 * /share/<code> and /lists are rendered by the API and proxied here by Caddy,
 * so they load this stylesheet like any other page. Keeping their styles in
 * this file rather than inline is what stops the two halves of the site
 * drifting apart visually.
 */

.share-from { color: var(--ink-soft); margin-bottom: 0.2rem; }
.share-stats { color: var(--ink-faint); font-size: 0.92rem; margin-bottom: 2rem; }

/* The list is the app's list: a 5px bar in the beer's own colour, the name,
   what it is, where it is, and the count in mono. A shared link should look
   like what the owner sees, which is the addendum's whole argument for this
   page - and it is why the page holds 45rem at any window width. A row
   stretched to the full desktop width puts the name and its count too far
   apart to read as one line. */
.share-page { max-width: 45rem; }

.share-list { list-style: none; margin: 0 0 2rem; padding: 0; }

.share-beer {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--rule);
}

.share-bar { flex: none; width: 5px; align-self: stretch; min-height: 2rem; border-radius: 2.5px; }
.share-body { flex: 1; min-width: 0; }
.share-meta { color: var(--ink-faint); font-size: 0.9rem; }

/* Squares, never circles. A filled square means where a bottle is, everywhere
   in this product; a round one means which list a beer is in, and a page that
   borrows the wrong shape teaches the wrong axis. */
.share-pips { flex: none; display: flex; gap: 0.25rem; }

.pip { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.pip-fridge { background: #347bc5; }
.pip-cellar { background: #9f4f2f; }
.pip-storage { background: #181f25; }

.share-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.1rem;
    color: var(--ink-faint);
    font-size: 0.85rem;
    margin: 0 0 1.2rem;
}

.share-legend .pip { margin-right: 0.35rem; }

/* The count in mono, like every number in the app. A pill made it a badge;
   it is a quantity. */
.share-qty {
    flex: none;
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 1rem;
    letter-spacing: -0.05em;
    color: var(--ink);
}

/* The beer ramp, keyed by what @beerlog/shared derives. The hexes are the
   app's light theme, so a beer is the same colour on a phone and here. */
.beer-pale { background: #e2d18c; }
.beer-gold { background: #e4c560; }
.beer-amber { background: #dc9242; }
.beer-ruby { background: #a24b36; }
.beer-deep { background: #743b1f; }
.beer-dark { background: #4c2c1a; }
.beer-imperial { background: #392218; }
.beer-neutral { background: #ced1d5; }

.share-empty, .share-note { color: var(--ink-faint); }
.share-note { font-size: 0.92rem; margin-top: 2rem; }

.share-report { margin-top: 2rem; font-size: 0.92rem; }
.share-report summary { cursor: pointer; color: var(--ink-faint); }
.share-report form { display: grid; gap: 0.4rem; margin-top: 0.8rem; max-width: 26rem; }
.share-report label { font-weight: 600; }
.share-report select,
.share-report textarea {
    font: inherit;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--rule);
    border-radius: 0.5rem;
    background: var(--card);
}
.share-report button {
    font: inherit;
    font-weight: 600;
    justify-self: start;
    background: var(--gold);
    border: 0;
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    cursor: pointer;
}

/* ----------------------------------------------------------- /lists */

.dir-controls {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 1rem;
}

/* The list/map switch is the rail again, at the page's own scale. */
.dir-views {
    display: inline-flex;
    background: #e9ebee;
    border-radius: 12px;
    padding: 3px;
}

.dir-views a, .dir-views .current {
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border-radius: 22px;
    text-decoration: none;
    color: #71777d;
}

.dir-views .current {
    background: #fff;
    color: #181f25;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

#near-me {
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid var(--rule);
    background: var(--card);
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    cursor: pointer;
}

#near-me:hover:not(:disabled) { border-color: var(--gold); }
#near-me:disabled { opacity: 0.55; cursor: progress; }

.dir-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.7rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.dir-cities a { color: var(--ink-soft); text-decoration: none; }
.dir-cities a:hover { color: var(--ink); text-decoration: underline; }
.dir-cities .current { font-weight: 700; color: var(--ink); }

.dir-status { min-height: 1.4em; color: var(--ink-faint); font-size: 0.9rem; }

.dir-map {
    height: 26rem;
    border-radius: 0.9rem;
    border: 1px solid var(--rule);
    overflow: hidden;
    margin-bottom: 2rem;
    background: #E8E6E1;
}

.dir-sub { color: var(--ink-faint); font-size: 0.92rem; margin-top: -0.4rem; }

.dir-grid {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}

.dir-card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 0.9rem;
}

.dir-link {
    display: block;
    padding: 1.1rem 1.2rem;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.dir-link:hover { border-radius: 0.9rem; background: #FDF6E3; }
.dir-link h3 { margin: 0 0 0.15rem; font-size: 1.02rem; }

.dir-owner { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 0.6rem; }

.dir-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.8rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-faint);
}

.dir-where { font-weight: 600; color: var(--ink-soft); }

.dir-empty { color: var(--ink-faint); }

/* Leaflet draws its own controls; keep them in the page's type. */
.leaflet-container { font-family: 'Archivo', system-ui, sans-serif; }

/* The directory's shout on the home page. One filled thing per page, so this
   is the card and the store links above it stay plain text. */
.home-directory {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: var(--gold);
    border-radius: 1rem;
    padding: 1.6rem 1.8rem;
    margin: 2.5rem 0 1rem;
}

.home-directory h2 { margin: 0 0 0.3rem; font-size: 1.35rem; }
.home-directory p { margin: 0; color: #4a3f16; max-width: 34rem; }

.home-directory-cta {
    flex: 0 0 auto;
    background: var(--ink);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    white-space: nowrap;
}

.home-directory-cta:hover { background: #000; color: #fff; }

/* The tagline lives in the footer, with the mark, which is where the design
   puts the brand line. Above an h1 it is an eyebrow: a line nobody reads
   sitting on top of the heading they came for. */
/* Three paragraphs rather than the one line that used to be here, so it is
   wider and the paragraphs are spaced. Still the quiet corner of the page: the
   third one is the longest thing in the footer and is the only place that says
   why the catalogue is worth adding to. */
.foot-blurb {
    margin: 0.8rem 0 0;
    /* `align-self` because .foot-brand is a flex column with the items ranged
       left, which sizes each one to its own content: without this the
       paragraphs set themselves narrower than the column they are in. */
    align-self: stretch;
    max-width: 32rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--on-black-soft);
}

.foot-blurb + .foot-blurb { margin-top: 0.75rem; }

/* ------------------------------------------------- the home page's model
 *
 * The three lists are the product, so they get their own band rather than a
 * card among cards. A definition list because that is what they are: a word
 * and what it means.
 */

.model { margin: 3rem 0 1rem; }
.model h2 { text-align: center; margin-bottom: 1.4rem; }

.triple {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 0.9rem;
    overflow: hidden;
    margin: 0 0 1.2rem;
}

.triple > div {
    background: var(--card);
    padding: 1.4rem 1.2rem;
    text-align: center;
}

.triple dt {
    font-family: 'Archivo Black', 'Archivo', system-ui, sans-serif;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.2rem;
}

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

.model-note {
    text-align: center;
    color: var(--ink-soft);
    max-width: 38rem;
    margin: 0 auto;
}

/* The cards carry no icon now. Without one the heading is the entry point,
   so it needs the weight the icon used to take. */
.card h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }

/* The home page is not in a wrapper: each band spans the window and holds its
   own gutters, which is what lets the two warm ones reach the edges. */
/* The home page only, and the four cards sit on it. It carries the warm colour
   rather than the body's, so what shows around and between the white bands is
   the same #FDF8EF as the hero above them and the closing band below. */
.bare {
    display: block;
    background: var(--ground-warm);
}

/* =========================================================== the home page
 *
 * Addendum 13, followed rather than interpreted. One breakpoint at 45rem:
 * below it one column with 20px gutters, above it 100px gutters and the
 * second column appears. Nothing needs a state in between, which is why the
 * design has two drawings and not three.
 *
 * Two warm bands, the hero and the closing call, because that is where the
 * bear's browns sit. Everything between them is neutral so the one yellow
 * button on the page still means something.
 */

.hero {
    background: var(--ground-warm);
    border-bottom: 1px solid var(--rule);
    padding: 3rem 1.25rem 2.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    text-align: left;
    max-width: none;
    margin: 0;
}

.hero-words { display: flex; flex-direction: column; gap: 1.2rem; max-width: 34rem; }
.hero h1 { font-size: clamp(2.1rem, 7vw, 2.6rem); margin: 0; letter-spacing: -0.032em; }

.hero p.lede { font-size: 1.05rem; color: var(--ink-soft); margin: 0; max-width: 34rem; }

/* The promise, first and in the reader's own language. It carries the weight
   the h1 does not: the h1 is the joke the name makes, and this is what the app
   actually is. */
.hero p.lede-promise { color: var(--ink); font-weight: 600; }

/* The long one. Quieter and a size down, because somebody skimming should be
   able to stop after the paragraph above it. */
.hero p.lede-more { font-size: 0.97rem; }

/* The store badges are Google's and Apple's own artwork, so nothing here
   recolours or redraws them. All this does is make the two line up.

   Google's PNG carries 16.4% of its height as transparent padding on every
   side: the file is 646x250 and the mark inside it is 564x168. So the image is
   scaled to 250/168 of the target height and the padding is pulled back off
   with a negative margin, leaving a 40px mark like Apple's. Change the 40px
   and the other two numbers follow it. */
.hero .store, .close .store {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin: 0;
    align-items: flex-start;
}

.store-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    text-decoration: none;
}

.store-badge small {
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: -0.03em;
    color: var(--ink-faint);
}

.badge { display: block; width: auto; }

/* The bare badge: 119.66 x 40, drawn at its own height. */
.badge-ios { height: 40px; }

/* 40 / 0.672 = 59.5, and the padding it then carries is 9.76px on every side. */
.badge-play {
    height: 59.5px;
    margin: -9.76px;
}

.store-name { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }

/* The wait goes under the store's name rather than beside it. */
.store small {
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    letter-spacing: -0.03em;
    font-weight: 400;
    opacity: 0.72;
}

.store .i { flex: none; }

/* The tall shot beside the copy. Until there is a real one it is the design's
   own slot: a dashed frame at the right proportion, which says a screenshot
   belongs here without pretending to be one. */
.hero-shot {
    width: 16.6rem;
    max-width: 100%;
    height: auto;
    aspect-ratio: 266 / 544;
    border-radius: 1.4rem;
    border: 1px solid var(--rule);
    align-self: center;
}

.hero-slot, .shot-slot {
    border: 1px dashed #D9CFB8;
    background: repeating-linear-gradient(135deg, transparent 0 9px, #F1E9D8 9px 10px);
    border-radius: 1.25rem;
    display: block;
}

@media (min-width: 45rem) {
    /* `justify-content: flex-start` because the shot beside the words does not
       exist yet. Centring a row of one item floats the heading into the middle
       of the page, off the gutter every other band starts on. It goes back to
       center the day there is a second thing in this row. */
    .hero {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 4rem;
        padding: 4rem 6.25rem 3.6rem;
    }

    .hero-words { flex: 0 1 38rem; }
    .hero h1 { font-size: clamp(2.6rem, 4vw, 3.2rem); }
    .hero-shot { flex: none; align-self: auto; }
}

/* ------------------------------------------------------------ the bands */

/* The white bands are cards on the warm page rather than full-bleed stripes,
   so the page colour runs down both sides of them.

   The side margin and the padding are set together on purpose: they add up to
   the hero's own gutter, 20px on a phone and 100px above 45rem, so the text in
   a card still starts on the same line as the text in the hero above it. Move
   one and move the other. */
.band {
    background: var(--card);
    padding: 3rem 0.5rem;
    margin: 0.75rem;
    border: 1px solid var(--rule);
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    min-width: 0;
}

.band > * { min-width: 0; }

.band-head { display: flex; flex-direction: column; gap: 0.5rem; max-width: 32rem; }
.band-head h2 { margin: 0; font-size: 1.45rem; }
.band-head p { margin: 0; color: var(--ink-soft); }

/* The bar goes inline at 47rem and not at the 45rem everything else uses,
   because at 720 it does not fit: the links wrap inside their own group and
   the bar grows a row. 47rem is where brand, three links, the language switch
   and the account pill sit on one line with room to spare. Between the two
   the menu button is still there, which is right rather than a compromise. */
@media (min-width: 47rem) {
    .nav-inner { flex-wrap: nowrap; }

    /* Both selectors, and the `.js` one is not optional: it is what hides the
       panel on a phone, so it outranks a bare `.nav-links` here no matter that
       this rule is inside a media query. Media queries carry no specificity. */
    .nav-links,
    .js .nav-links {
        display: flex;
        order: 2;
        margin-left: auto;
        flex-direction: row;
        align-items: center;
        gap: 0.15rem 1.1rem;
        padding: 0;
        border-top: 0;
        margin-top: 0;
    }
    .js .nav-links > a { width: auto; padding: 0.35rem 0; font-size: 0.95rem; }
    .js .nav-links .langs { margin-top: 0; }
    .nav-actions { order: 3; margin-left: 1.1rem; }
    .js .nav-toggle { display: none; }
}

@media (min-width: 45rem) {
    .nav { position: sticky; top: 0; }

    /* 40 of margin plus 60 of padding is the hero's 100. */
    .band { padding: 3.5rem 3.75rem; margin: 1.25rem 2.5rem; gap: 1.8rem; }
    .band-head h2 { font-size: 1.7rem; }

}

/* Two of the bands put their heading in a column of its own beside the rows.
   The rows are what is being read; the heading is what they are an answer to,
   and it stops being a lid on a list.

   **It starts at 56rem and not at 45rem, which is where it used to start.**
   Added up, the wide form asks for about 850px: 200 of band padding, 300 of
   heading column, 72 of gap and 260 of row title. Turning it on at 720 meant
   every width from 720 to 824 scrolled sideways, which is iPad portrait and a
   half-width laptop window. `minmax(0, ...)` on the two fixed tracks is the
   belt to that braces: the columns may now shrink below their content instead
   of pushing the page wider, so no future breakpoint can reintroduce this. */
@media (min-width: 56rem) {
    .band-split {
        display: grid;
        grid-template-columns: minmax(0, 18.75rem) minmax(0, 1fr);
        gap: 4.5rem;
    }
    .band-split .band-head { align-self: start; }
}

/* -------------------------------------------------------- why you love it */

.features { display: grid; gap: 0; }

.feature {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    padding: 1.35rem 0;
    border-top: 1px solid var(--rule);
}

.feature-mark {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: var(--ground-warm);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
}

.feature h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.feature p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

@media (min-width: 45rem) {
    .features { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; }
    .feature { padding: 1.4rem 0; }
}

/* ------------------------------------------------------------- the shots */

/* `min-width: 0` is load-bearing: a scrolling grid inside a flex column keeps
   its min-content width by default, so the rail pushed the whole page wider
   than the phone and every band lost its right-hand edge. */
.shots {
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 10.4rem;
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.4rem;
    /* Bleeds to the card's inner edge, which is where .band's padding now puts
       it. Any more and the rail would cross the rounded corner. */
    margin: 0 -0.5rem;
    padding-inline: 0.5rem;
    scrollbar-width: none;
}

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

.shot { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; scroll-snap-align: center; }

.shot-img, .shot-slot {
    width: 100%;
    aspect-ratio: 9 / 19.5;
    object-fit: cover;
    border-radius: 1.1rem;
}

.shot-img { border: 1px solid var(--rule); }

.shot figcaption {
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: -0.03em;
    color: var(--ink-faint);
}

@media (min-width: 45rem) {
    .shots {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
        overflow: visible;
        margin: 0;
        padding-inline: 0;
    }
}

/* ---------------------------------------------------------- who is it for */

.audience { display: grid; gap: 0; }

.audience p {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    margin: 0;
    padding: 1.05rem 0;
    border-top: 1px solid var(--rule);
    color: var(--ink);
}

/* The check is the mark the app uses, in the green it uses for Done. It is
   the one place on this page colour appears without a beer under it, and it
   is a tick rather than a bullet. */
.audience .i { flex: none; color: var(--yes); margin-top: 0.15rem; }

/* Two by two above the break, like the features. Four one-line statements in
   a single column leave half the width empty and read as a list of demands. */
@media (min-width: 45rem) {
    .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}

/* --------------------------------------------------------------- more rows */

.more { display: flex; flex-direction: column; }

.more a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem 1.25rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--rule);
    color: var(--ink);
    text-decoration: none;
}

.more a:hover { color: var(--gold-deep); }
.more a:hover .more-note { color: var(--ink-soft); }
.more .i { grid-row: 1 / -1; grid-column: 2; color: var(--ink-faint); }
.more-title { font-weight: 600; }

.more-note {
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: -0.03em;
    color: var(--ink-faint);
}

/* Matches the band it sits in, for the same reason. */
@media (min-width: 56rem) {
    .more a { grid-template-columns: minmax(0, 16.25rem) minmax(0, 1fr) auto; }
    .more-title { grid-row: 1; }
    .more-note { grid-row: 1; }
    .more .i { grid-column: 3; }
}

/* ------------------------------------------------------------- the close */

.close {
    background: var(--ground-warm);
    border-top: 1px solid var(--rule);
    padding: 3.2rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.close h2 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 5vw, 2rem); }
.close p { margin: 0; color: var(--ink-soft); max-width: 32rem; }

/* Side by side at 56rem, for the same arithmetic as .band-split: the two store
   buttons are 379px that never shrink, the padding is 200 and the gap is 56, so
   a 720px window left about 85px for a heading. German needs more than that for
   the word Kuehlschrank alone, and the page scrolled sideways to find it. */
@media (min-width: 56rem) {
    .close {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 3.5rem;
        padding: 4rem 6.25rem;
    }

    .close .store { flex: none; }
}

/* ======================================================= the Wall of Fame
 *
 * Addendum 13's board: the top three get cards, four and below get rows, and
 * the explainer sits beside them as a sidebar rather than under them as a
 * footnote. A leaderboard where every line shouts has no top.
 *
 * The avatars are neutral at every rank. Yellow, pink and green mean Stock,
 * Wish and Done everywhere else in this product, and a rank is none of those -
 * so first place is an ink border and a bigger numeral instead.
 */

.wof-head {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 1rem;
}

.wof-head h1 { margin: 0 0 0.4rem; }
.wof-head .soft { margin: 0; color: var(--ink-soft); max-width: 34rem; }

/* The season chips, which are the app's rail at the page's scale. */
.switch { display: flex; gap: 0.5rem; }

.switch button {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.55rem 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid var(--rule);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
}

.switch button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.podium { display: grid; gap: 0.9rem; margin: 1.4rem 0 2rem; }

.podium-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.3rem 1.3rem 1.2rem;
    border-radius: 0.95rem;
    background: var(--card);
    border: 1px solid var(--rule);
}

/* First place, and the only difference it gets. */
.podium-first { border-color: var(--ink); }

.podium-top { display: flex; align-items: center; justify-content: space-between; }

.podium-rank {
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 1.6rem;
    letter-spacing: -0.05em;
    color: var(--ink);
}

.podium-first .podium-rank { font-size: 2.1rem; }

.avatar {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 999px;
    background: #EFEADD;
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
}

.avatar-small { width: 2rem; height: 2rem; font-size: 0.8rem; }

.podium-name { margin: 0; font-weight: 700; font-size: 1.05rem; }

.podium-score {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin: 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.podium-n {
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 1.35rem;
    letter-spacing: -0.05em;
    color: var(--ink);
}

.podium-acc, .wof-acc {
    margin-left: auto;
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: -0.03em;
    color: var(--ink-faint);
}

.wof-rest { display: flex; flex-direction: column; gap: 2rem; }
.wof-rows { min-width: 0; }

.wof-range {
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    margin: 0 0 0.4rem;
    text-transform: uppercase;
}

.wof-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 0;
    border-top: 1px solid var(--rule);
}

.wof-rank {
    flex: none;
    width: 1.6rem;
    text-align: right;
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 0.8rem;
    letter-spacing: -0.05em;
    color: var(--ink-faint);
}

.wof-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wof-n {
    flex: none;
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 0.95rem;
    letter-spacing: -0.05em;
}

/* The rules, beside the board rather than under it. Somebody reading a rank
   wants to know what it was measured on while they are looking at it. */
.wof-how {
    background: #F5F1E6;
    border-radius: 0.95rem;
    padding: 1.3rem 1.4rem;
}

.wof-how h2 {
    margin: 0 0 0.8rem;
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.wof-how ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.wof-how li { font-size: 0.9rem; color: var(--ink-soft); }
.wof-how li strong { color: var(--ink); }

.wof-note {
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rule);
    font-size: 0.85rem;
    color: var(--ink-faint);
}

.state, .built { color: var(--ink-faint); font-size: 0.9rem; }

@media (min-width: 45rem) {
    .wof-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 3rem; }
    .podium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
    .wof-rest { flex-direction: row; align-items: flex-start; gap: 4.5rem; }
    .wof-rows { flex: 1; }
    /* Two columns of ranks, which is what the addendum's desktop board does
       rather than running one column half the width of the page. */
    .wof-rows > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
    .wof-how { flex: none; width: 18.75rem; }
}