/* ==========================================================================
Indore — base.css
The shared foundation for every page on the static site.
HOW TO USE THIS FILE
-------------------------------------------------------------------------
Load it FIRST, before the page's own sheet:
Never edit this file to make one page look right. Everything here is
shared; a page that needs something different overrides it in its own
sheet, which always wins because it loads second. If two pages need the
same new thing, that is the moment to add it here — and to say so in
css/README.md.
THE VOCABULARY
-------------------------------------------------------------------------
Layout
.wrap The content column. max-width 1560px, centred, with the
page's side padding already on it. Put it inside a
full-bleed section, not around one:
…
--pad The side padding scale: 24px, 40px from 900px up. Use
var(--pad) anywhere you need to line up with .wrap.
Type
.d1 .d3 .d4 Display headings, Clash Display. d1 is the poster size
(set your own font-size), d3 is a section head, d4 a
sub-head. They carry face, weight and leading only.
.kicker Clash Display at regular weight, for a line that sits
above a display heading.
.cap Small uppercase label, Clash Display, wide tracking.
The site's only all-caps register.
body copy Plain
. Familjen Grotesk 18px. Colour it --plum70.
mono detail font-family:var(--mono) — numbers, units, readings.
Never for running prose.
.wordmark A heading set as SVG text so the glyphs never distort.
.vh Visually hidden: present for a screen reader, not drawn.
Controls
.btn The primary pill. .btn--light for white-on-dark.
.capsule The white CTA capsule: a .cap label plus a .btn.
.opill Outlined pill label. .opill--white on a light ground,
.opill--ondark over a photograph.
Furniture
.nav Transparent nav that sits over a photograph.
.snav The sticky nav that slides in after the hero.
.footer The full site footer.
Blocks
.panel White information card: title, note, label/value rows.
.mc Metric card: mono label over a large mono value.
Document pages
.doc The skeleton for text-heavy pages — Help, Privacy,
Terms, Refunds. See the DOCUMENT PAGE region below.
BREAKPOINTS
-------------------------------------------------------------------------
399 / 400 phone, tightest case
599 / 600 large phone
899 / 900 the main one: phone-and-tablet below, desktop above
999 / 1000 side-by-side layouts become possible
1199 / 1200 wide desktop
1440 the design's reference frame
========================================================================== */
/* ==========================================================================
FACES
All self-hosted from ../assets/fonts. No third-party font CDN is ever
contacted: every page must render correctly with the network off.
Clash Display — ITF Free Font Licence, see assets/fonts/LICENSE-clash-display.txt
Familjen Grotesk — SIL OFL 1.1, see assets/fonts/LICENSE-familjen-grotesk.txt
========================================================================== */
@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url("../assets/fonts/FamiljenGrotesk-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url("../assets/fonts/FamiljenGrotesk-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url("../assets/fonts/FamiljenGrotesk-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url("../assets/fonts/FamiljenGrotesk-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Atelier";src:url("../assets/fonts/Atelier.ttf") format("truetype");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"TBJ Interval";src:url("../assets/fonts/TBJInterval-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"TBJ Interval";src:url("../assets/fonts/TBJInterval-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"TBJ Interval";src:url("../assets/fonts/TBJInterval-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* ==========================================================================
TOKENS
========================================================================== */
:root{
/* --- ink and ground --- */
--plum:#254471; /* the house colour: headings, links, UI text */
--primary:#2667C8; /* the action colour: buttons, live links */
--accent:#B83100;
--orange:#F66206; /* zone/z4 — routes category tag */
--white:#FFFFFF;
--surface:#F4F3F8; /* the off-white section ground */
--ink:#0E0F12; /* behind a photograph */
--card-ink:#25252F; /* metric card text */
/* --- tints, all of --plum unless named otherwise --- */
--border:rgba(37,68,113,.13); /* the hairline */
--plum70:rgba(37,68,113,.7); /* body copy on a light ground */
--plum60:rgba(37,68,113,.6);
--plum50:rgba(37,68,113,.5); /* small print, labels */
--white70:rgba(255,255,255,.7); /* body copy on a dark ground */
--hair-light:rgba(255,255,255,.1); /* the hairline on a dark ground */
/* --- measure and metrics --- */
--pad:24px; /* .wrap side padding; 40px from 900px up */
--maxw:1560px; /* .wrap max width */
--r:3px; /* the small radius (metric cards, tags) */
--measure:68ch; /* readable line length for long-form prose */
/* --- faces --- */
--body:"Familjen Grotesk",system-ui,-apple-system,Helvetica,Arial,sans-serif;
--mono:"TBJ Interval",ui-monospace,SFMono-Regular,Menlo,monospace;
--disp:"Clash Display","Familjen Grotesk",system-ui,-apple-system,Helvetica,Arial,sans-serif;
--atelier:"Atelier","Clash Display","Familjen Grotesk",system-ui,sans-serif;
/* --- shadows: one soft stack at four sizes --- */
--lift:0 92px 26px rgba(0,0,0,0),0 59px 23px rgba(0,0,0,.01),0 33px 20px rgba(0,0,0,.05),0 15px 15px rgba(0,0,0,.08),0 4px 8px rgba(0,0,0,.09);
--lift-sm:0 47px 6.5px rgba(0,0,0,0),0 30px 6px rgba(0,0,0,.01),0 17px 5px rgba(0,0,0,.05),0 8px 4px rgba(0,0,0,.08),0 2px 2px rgba(0,0,0,.09);
--lift-card:0 330px 92px rgba(0,0,0,0),0 211px 84px rgba(0,0,0,.01),0 119px 71px rgba(0,0,0,.05),0 53px 53px rgba(0,0,0,.09),0 13px 29px rgba(0,0,0,.1);
--lift-photo:0 550px 154px rgba(0,0,0,0),0 352px 141px rgba(0,0,0,.01),0 198px 119px rgba(0,0,0,.05),0 88px 88px rgba(0,0,0,.09),0 22px 48px rgba(0,0,0,.1);
}
@media (min-width:900px){:root{--pad:40px}}
/* ==========================================================================
RESET AND BASE ELEMENTS
========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;background:var(--white);color:var(--plum);
font-family:var(--body);font-weight:400;font-size:18px;line-height:1.45;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
/* is only a wrapper for the WebP/fallback pair — take its
box out of the layout so every wrapped keeps the exact positioning and
flex behaviour it had before it was wrapped */
picture{display:contents}
p{margin:0}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:400}
ul{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
a{color:inherit;text-decoration:none;transition:color 150ms linear,background-color 150ms linear}
/* ==========================================================================
LAYOUT AND HELPERS
========================================================================== */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
/* present for a screen reader, not drawn */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Focus: a white ring, set off by its own offset, so it reads over a
photograph as well as on a flat ground. Inside a white .panel it turns
--primary, where white would disappear. */
:focus-visible{outline:3px solid var(--white);outline-offset:3px;border-radius:4px}
.panel :focus-visible{outline-color:var(--primary)}
/* ==========================================================================
DISPLAY TYPE
Every heading on the site is Clash Display; the hero wordmark alone is
Atelier. These classes carry face, weight and leading. Set the size at the
place of use — sizes that scale with the frame are written in vw so they
land on the design value at 1440 and stop growing once .wrap hits 1560.
========================================================================== */
.d1{font-family:var(--disp);font-weight:600;line-height:.8;letter-spacing:-.01em}
.d3{font-family:var(--disp);font-weight:600;line-height:1.15}
.d4{font-family:var(--disp);font-weight:500;line-height:1.15}
.kicker{font-family:var(--disp);font-weight:400;line-height:1;letter-spacing:-.01em}
/* full-width display type set as SVG so the glyphs never distort */
.wordmark{width:100%;height:auto}
.wordmark text{font-size:1000px;font-kerning:none;letter-spacing:0}
.wordmark--atelier text{font-family:var(--atelier);font-weight:400}
.wordmark--clash text{font-family:var(--disp);font-weight:600}
/* ==========================================================================
CAPSULE, BUTTONS, PILLS
========================================================================== */
.capsule{display:inline-flex;align-items:center;gap:16px;background:var(--white);
border-radius:999px;padding:8px 8px 8px 24px;box-shadow:var(--lift)}
.capsule .cap{color:var(--plum);white-space:nowrap}
.cap{font-family:var(--disp);font-weight:500;font-size:14px;line-height:1;letter-spacing:.15em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;height:49px;padding:0 32px;
background:var(--primary);color:var(--white);border-radius:999px;
font-family:var(--disp);font-weight:700;font-size:20px;line-height:1;white-space:nowrap}
.btn:hover{background:#1d55ab}
.btn--light{background:var(--white);color:var(--primary);box-shadow:var(--lift-sm)}
.btn--light:hover{background:rgba(255,255,255,.85)}
@media (max-width:899px){
.capsule{padding-left:20px;gap:12px}
.cap{font-size:12px;letter-spacing:.13em}
.btn{height:46px;padding:0 24px;font-size:17px}
}
@media (max-width:399px){
.capsule{gap:10px;padding-left:16px}
.btn{padding:0 16px;font-size:15px}
}
/* Outlined pill label.
--white a white outline on a light ground, plum text (homepage)
--ondark a softened outline over a photograph, white text (sign in) */
.opill{display:inline-flex;align-items:center;justify-content:center;line-height:9px;
padding:12px 16px;border:2px solid var(--surface);border-radius:999px;color:var(--plum)}
.opill--white{border-color:var(--white)}
.opill--ondark{border-color:rgba(255,255,255,.55);color:var(--white)}
/* ==========================================================================
NAV
Transparent, absolutely positioned, sits over the top of a photograph.
========================================================================== */
.nav{position:absolute;top:0;left:0;right:0;z-index:5}
.nav__in{max-width:var(--maxw);margin-inline:auto;padding:24px var(--pad);
display:flex;align-items:center;justify-content:space-between;gap:24px}
.mark{height:13px;width:25px;display:block}
.nav .mark path{fill:var(--white)}
.nav ul{display:flex;align-items:center;gap:28px}
.nav a{font-family:var(--disp);font-weight:600;font-size:16px;line-height:1;color:var(--white);
display:inline-flex;align-items:center;min-height:44px}
.nav a:hover{color:rgba(255,255,255,.65)}
.nav__home{display:inline-flex;align-items:center;min-height:44px}
/* ==========================================================================
STICKY NAV
Hidden until a script adds .is-visible — on the homepage that happens once
the hero has scrolled away. A page without a hero can add .is-visible in
the markup and leave it there.
The bar is frosted glass. The rule below is the fallback a browser without
backdrop-filter gets: a near-solid white bar, which is what this used to be.
The glass itself lives in the @supports block after it.
========================================================================== */
.snav{position:fixed;top:0;left:0;right:0;z-index:40;height:56px;
background:rgba(255,255,255,.96);
border-bottom:1px solid var(--border);
transform:translateY(-100%);transition:transform .35s ease;will-change:transform}
.snav.is-visible{transform:translateY(0)}
/* Frosted glass, only where the backdrop can actually be blurred.
The tint is 55% white, so nearly half of whatever scrolls underneath comes
through — the bar passes over near-black photography on the homepage and on
why.html, and you are meant to see it. contrast()/brightness() are what make
that survivable: they pull the backdrop toward mid-tone, which lifts a black
photograph far enough to hold plum text at 4.56:1 over the worst pixel on
the site (the black band in why.html) without painting more white over it.
saturate() runs last, to put the colour back after the flatten, so the glass
reads as glass rather than as grey fog. */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
.snav{background:rgba(255,255,255,.55);
-webkit-backdrop-filter:blur(30px) contrast(.5) brightness(1.25) saturate(2);
backdrop-filter:blur(30px) contrast(.5) brightness(1.25) saturate(2);
border-bottom-color:rgba(37,68,113,.07);
box-shadow:0 1px 20px rgba(37,68,113,.05)}
}
.snav__in{height:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
display:flex;align-items:center;justify-content:space-between;gap:24px}
.snav .mark path{fill:var(--plum)}
.snav ul{display:flex;align-items:center;gap:28px}
.snav a{font-family:var(--disp);font-weight:600;font-size:15px;line-height:1;color:var(--plum);
display:inline-flex;align-items:center;min-height:44px}
.snav a:hover{color:var(--plum50)}
.snav__home{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:900px){.snav{height:64px}}
/* ==========================================================================
PANEL — the white information card
A title, an optional note, then label/value rows. The value side is set in
the mono face, which is the site's register for a reading or a figure.
10 ride pack
Still there, still the same price.
Ride credits
10
========================================================================== */
.panel{width:100%;max-width:440px;background:var(--white);border:1px solid var(--border);
border-radius:20px;padding:20px 20px 6px;box-shadow:var(--lift-sm);color:var(--card-ink)}
.panel__title{font-family:var(--body);font-weight:700;font-size:20px;line-height:1.2;color:var(--plum)}
.panel__note{margin-top:10px;font-size:16px;line-height:1.3;color:var(--plum70)}
.panel__rows{margin-top:14px}
.panel__row{display:flex;align-items:center;justify-content:space-between;gap:16px;
min-height:46px;border-top:1px solid var(--border)}
.panel__row dt{font-size:16px;line-height:1.2;color:var(--plum)}
.panel__row dd{font-family:var(--mono);font-weight:400;font-size:16px;line-height:1.2;
color:var(--plum70);text-align:right}
@media (min-width:600px){
.panel{padding:24px 24px 8px}
.panel__title{font-size:22px}
}
/* ==========================================================================
METRIC CARD — mono label over a large mono value
The reading as it appears in the app: a quiet uppercase label, the number,
then its unit.
Gradient8.9%
========================================================================== */
.mc{background:var(--white);border-radius:var(--r);padding:10px 18px 9px;
color:var(--card-ink);box-shadow:var(--lift-sm);text-align:left}
.mc .l{font-family:var(--mono);font-weight:300;font-size:12px;line-height:9px;letter-spacing:.05em;
text-transform:uppercase;opacity:.66;display:block}
.mc .v{display:flex;align-items:baseline;gap:4px;margin-top:12px}
.mc .v b{font-family:var(--mono);font-weight:400;font-size:32px;line-height:23px;letter-spacing:0}
.mc .v span{font-family:var(--mono);font-weight:300;font-size:12px;line-height:9px;letter-spacing:.05em;
text-transform:uppercase;opacity:.66}
/* ==========================================================================
FOOTER
The full four-column site footer. Every page that is not a door gets it.
========================================================================== */
.footer{background:var(--white);padding:72px 0 80px}
.footer__top{display:flex;flex-direction:column;gap:24px;padding-bottom:40px;border-bottom:1px solid var(--border)}
.footer__top img{height:22px;width:auto;flex:0 0 auto;align-self:flex-start}
.footer__tag{font-family:var(--disp);font-weight:500;font-size:20px;line-height:1.23;color:var(--plum)}
.footer__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin-top:32px}
.footer__cols h2{font-family:var(--disp);font-weight:600;font-size:12px;line-height:1;color:var(--plum50);margin-bottom:8px}
.footer__cols ul{display:flex;flex-direction:column}
.footer__cols a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:var(--plum)}
.footer__cols a:hover{color:var(--plum50)}
/* A social link is a glyph, not a word. The mark is 20px and takes the link's
own colour through currentColor; the link itself keeps a 44px target at
every width, including desktop where the text links drop to 27px. Two
classes beat `.footer__cols a`, so the desktop rule below cannot shrink it.
Every glyph is drawn inline — nothing is fetched. */
.footer__cols .sicon{min-height:44px;min-width:44px;justify-content:flex-start}
.footer__cols .sicon svg{width:20px;height:20px}
@media (min-width:900px){
.footer{padding:96px 0 112px}
.footer__top{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:48px;padding-bottom:64px}
.footer__tag{font-size:26px;white-space:nowrap}
.footer__cols{grid-template-columns:200px 200px 200px 1fr;gap:48px;margin-top:48px}
.footer__cols>div:last-child{justify-self:end;width:200px}
.footer__cols a{min-height:27px;font-size:12px}
}
/* ==========================================================================
DOCUMENT PAGE
The skeleton for the text-heavy pages: Help, Privacy, Terms, Refunds.
It is the homepage's own furniture, quietened: the .wrap column and the
same side padding, the title in Clash Display at the size a section head
takes, hairlines in --border, prose in --plum70 at the site's 18px, and
mono only where there is a figure or an index number. Nothing here is a
new treatment; it is the homepage's vocabulary arranged for reading.
Skeleton:
Privacy
What we keep, and what we do not.
Last updated 14 September 2026
What we keep
…
Then the site .footer below it, as on the homepage.
========================================================================== */
/* Top padding clears the sticky nav (56px, 64px from 900px up) and leaves a
gap under it, so a document page can show .snav permanently. */
.doc{background:var(--white);padding:88px 0 72px}
@media (min-width:900px){.doc{padding:128px 0 128px}}
/* --- the page header --- */
.doc__head{padding-bottom:28px;border-bottom:1px solid var(--border)}
.doc__title{font-family:var(--disp);font-weight:600;letter-spacing:-.01em;line-height:1.02;
color:var(--plum);font-size:clamp(40px,7.5vw,96px)}
.doc__standfirst{margin-top:18px;font-family:var(--disp);font-weight:500;
font-size:clamp(20px,2vw,26px);line-height:1.25;color:var(--plum70);max-width:var(--measure)}
.doc__meta{margin-top:20px;font-family:var(--mono);font-weight:300;font-size:12px;line-height:1;
letter-spacing:.05em;text-transform:uppercase;color:var(--plum50)}
@media (min-width:900px){
.doc__head{padding-bottom:40px}
.doc__standfirst{margin-top:24px}
.doc__meta{margin-top:28px}
}
/* --- the measure ---
~70 characters at the site's 18px body size. Everything that is read in
sequence lives inside .doc__body and inherits it. A table, a figure or a
full-width callout can opt out with .doc__wide. */
.doc__body{max-width:var(--measure);margin-top:40px;color:var(--plum70);
font-size:18px;line-height:1.6}
@media (min-width:900px){.doc__body{margin-top:64px}}
.doc__wide{max-width:none}
/* anchors clear the sticky nav when a table of contents link is followed */
.doc__body [id]{scroll-margin-top:80px}
@media (min-width:900px){.doc__body [id]{scroll-margin-top:96px}}
/* --- headings inside the document ---
Two working levels plus a run-in third. h2 opens a section, h3 divides it,
h4 is a labelled paragraph rather than a heading in its own right. */
.doc__body h2{font-family:var(--disp);font-weight:600;line-height:1.15;color:var(--plum);
font-size:clamp(26px,2.2vw,34px);margin-top:1.9em;margin-bottom:.5em}
.doc__body h3{font-family:var(--disp);font-weight:500;line-height:1.2;color:var(--plum);
font-size:22px;margin-top:2em;margin-bottom:.45em}
.doc__body h4{font-family:var(--body);font-weight:600;font-size:18px;line-height:1.3;
color:var(--plum);margin-top:1.8em;margin-bottom:.3em}
/* a section's own first heading should not push off the top of its section */
.doc__body>:first-child,
.doc__body section>:first-child{margin-top:0}
.doc__body section+section{margin-top:3.2em}
/* --- prose --- */
.doc__body p{margin-top:1.1em}
.doc__body p:first-child{margin-top:0}
.doc__body strong{font-weight:600;color:var(--plum)}
.doc__body em{font-style:italic}
/* --- links in running text ---
Underlined, because in a paragraph colour alone is not enough. */
.doc__body a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:1px;text-decoration-color:rgba(38,103,200,.4)}
.doc__body a:hover{color:#1d55ab;text-decoration-color:currentColor}
/* --- lists ---
The reset strips markers site-wide, so a document list puts them back. */
.doc__body ul,
.doc__body ol{margin-top:1.1em;padding-left:1.3em}
.doc__body ul{list-style:disc}
.doc__body ol{list-style:decimal}
.doc__body li{margin-top:.5em;padding-left:.25em}
.doc__body li::marker{color:var(--plum50)}
.doc__body li>ul,
.doc__body li>ol{margin-top:.5em}
/* --- a definition list, for a glossary or a set of terms --- */
.doc__body dl{margin-top:1.4em}
.doc__body dt{font-weight:600;color:var(--plum);margin-top:1.1em}
.doc__body dd{margin-top:.3em}
/* --- a quiet aside, set off by a rule rather than a box --- */
.doc__body blockquote{margin:1.6em 0 0;padding-left:20px;border-left:2px solid var(--border);
color:var(--plum60)}
/* --- a hard division between two parts of a long page --- */
.doc__body hr{height:0;margin:2.6em 0 0;border:0;border-top:1px solid var(--border)}
/* --- a figure or a set of readings, allowed to break the measure --- */
.doc__body table{margin-top:1.4em;width:100%;border-collapse:collapse;text-align:left}
.doc__body th{font-family:var(--disp);font-weight:600;font-size:12px;line-height:1;
letter-spacing:.1em;text-transform:uppercase;color:var(--plum50);
padding:0 16px 10px 0;border-bottom:1px solid var(--border)}
.doc__body td{padding:12px 16px 12px 0;border-bottom:1px solid var(--border);font-size:16px;
vertical-align:top}
.doc__body td:last-child,
.doc__body th:last-child{padding-right:0}
/* a figure keeps the mono face — on the cell itself or on a span inside it */
.doc__body .num{font-family:var(--mono);font-weight:400}
/* --- the small-print register ---
16px, half-strength plum. Use it for a caveat, a date, a legal aside — any
line that is there to be found rather than read. */
.small{font-size:16px;line-height:1.4;color:var(--plum50)}
.doc__body .small{margin-top:1.1em}
/* --- the foot of the document --- */
.doc__foot{max-width:var(--measure);margin-top:56px;padding-top:24px;
border-top:1px solid var(--border)}
@media (min-width:900px){.doc__foot{margin-top:80px}}
/* ==========================================================================
TABLE OF CONTENTS
For a long document — Help runs to nineteen sections. A bordered block on
the off-white ground, numbered in the mono face so the index reads as a
list of positions rather than a menu. One column on a phone, two from
700px, and it never grows past the reading measure on its own.
========================================================================== */
.toc{margin-top:40px;padding:20px 20px 4px;background:var(--surface);
border:1px solid var(--border);border-radius:16px;max-width:var(--measure)}
@media (min-width:900px){.toc{margin-top:64px;padding:28px 28px 8px}}
.toc__title{color:var(--plum50);display:block}
.toc__list{margin-top:6px;display:grid;grid-template-columns:1fr;
column-gap:32px;list-style:none;padding:0}
.toc__list li{border-top:1px solid var(--border)}
/* with one column the first row needs no rule above it; with two, the second
column's first row is still the top of its own run and needs none either */
.toc__list li:first-child{border-top:0}
.toc__list a{display:flex;align-items:baseline;gap:12px;min-height:44px;padding:11px 0;
font-size:16px;line-height:1.3;color:var(--plum)}
.toc__list a:hover{color:var(--primary)}
.toc__num{font-family:var(--mono);font-weight:300;font-size:12px;letter-spacing:.05em;
color:var(--plum50);flex:0 0 auto;min-width:18px}
@media (min-width:700px){
.toc__list{grid-template-columns:repeat(2,minmax(0,1fr))}
/* two columns: only the very first row of each column loses its rule, and
grid fills by row, so put the rule back on everything and take it off the
first two items */
.toc__list li:nth-child(2){border-top:0}
}
/* A page that wants the index beside the prose rather than above it, once
there is room for a second column. Opt in by adding .doc--toc-aside to
.doc; the block is otherwise identical. */
@media (min-width:1100px){
.doc--toc-aside .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;
column-gap:64px;align-items:start}
.doc--toc-aside .doc__head,
.doc--toc-aside .doc__foot{grid-column:1 / -1}
.doc--toc-aside .doc__body{grid-column:1;grid-row:2}
.doc--toc-aside .toc{grid-column:2;grid-row:2;position:sticky;top:96px;max-width:none}
.doc--toc-aside .toc__list{grid-template-columns:1fr}
.doc--toc-aside .toc__list li:nth-child(2){border-top:1px solid var(--border)}
}
/* ==========================================================================
MOTION
========================================================================== */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}