@font-face { font-family: 'Switzer'; src: url('/switzer-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/switzer-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
:root {
  --blue: #2C21FF; --paper: #FFFFFF; --soft: rgba(255,255,255,.78);
  --sans: 'Switzer', ui-sans-serif, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --margin: clamp(20px, 4.4vw, 72px);
  /* five sizes, far apart */
  --display: clamp(36px, 4.6vw, 68px); --title: clamp(21px, 1.9vw, 27px); --body: clamp(17px, 1.3vw, 19px); --small: 15px;
}
* { box-sizing: border-box; }
html { background: var(--blue); }
body { margin: 0; background: var(--blue); color: var(--paper); font: 400 var(--body)/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
p, h1, h2 { margin: 0; }
h1, h2 { font-weight: 400; text-wrap: balance; }
.hl { background: var(--paper); color: var(--blue); padding: 0 .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
::selection { background: var(--paper); color: var(--blue); }
.art { pointer-events: none; user-select: none; }

/* links are the way round the site: words in the sentences, underlined, never a menu bar */
a { color: var(--paper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.onward { color: var(--soft); max-width: 34em; }
.onward a { white-space: nowrap; }

header { padding: clamp(22px, 3vw, 44px) var(--margin) 0; position: relative; z-index: 3; }
.logo { display: inline-block; text-decoration: none; }
.logo img { width: clamp(132px, 11vw, 190px); height: auto; }

/* the asterisk row, the app's own divider: used once per page, not between everything */
.stars { font: 400 14px/1 var(--sans); letter-spacing: .35em; white-space: nowrap; overflow: hidden; color: var(--soft); user-select: none; }

/* every reading page shares one grid: a narrow left column and a wide right one */
.wrap { padding: clamp(64px, 10vw, 150px) var(--margin) 0; max-width: 1640px; }
.split { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 6vw, 120px); align-items: start; }
.split > *, .step > * { min-width: 0; }
.page-title { font-size: var(--display); line-height: 1.04; letter-spacing: -0.03em; }
.intro { font-size: var(--title); line-height: 1.45; max-width: 30em; }
.intro + .intro { margin-top: 1em; }

/* how it works: one row per step, heading left, words right */
.steps { margin-top: clamp(56px, 8vw, 120px); }
.step { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 6vw, 120px); padding: clamp(28px, 3.4vw, 48px) 0; }
.step h2 { font-size: var(--title); line-height: 1.3; }
.step p { max-width: 34em; color: var(--soft); }

/* stories, as the app sets them: the place and year, then the heading in the white block */
.where { display: inline-flex; font: 500 var(--small)/1 var(--sans); }
.where span { padding: 9px 12px; border: 1px solid var(--paper); }
.where span + span { background: var(--paper); color: var(--blue); }
.headblock { display: block; background: var(--paper); color: var(--blue); font: 400 var(--title)/1.38 var(--sans); padding: 18px 20px 20px; margin-top: 12px; text-decoration: none; }
a.headblock:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.story-list { list-style: none; padding: 0; margin: 0; }
.story-list li + li { margin-top: clamp(40px, 4.4vw, 64px); }
.story-head { position: sticky; top: 32px; }
.story-head .onward { margin-top: 28px; }
.cards .card { font-size: var(--title); line-height: 1.5; max-width: 30em; }
.cards .card + .card { margin-top: 1.3em; }
.cards .stars { margin-bottom: clamp(32px, 3vw, 44px); }
.cards .stars:last-child { margin: clamp(32px, 3vw, 44px) 0 0; }
.note { display: inline-block; font: italic 400 var(--body)/1.3 var(--sans); transform: rotate(-3deg); margin: 14px 0 0 30%; }
.note::before { content: "↑  "; font-style: normal; }

/* why: one statement, then the hill across the whole width */
.why .intro { max-width: 26em; }
.why .page-title { max-width: 12em; margin-bottom: clamp(32px, 4vw, 56px); }
.wide-art { width: 100%; height: auto; margin-top: clamp(48px, 7vw, 110px); }

/* the scene every page ends on: the scenic route, and the way to the one form */
.invite { padding: clamp(110px, 14vw, 220px) var(--margin) 0; max-width: 1640px; }
.invite .say { font-size: var(--display); line-height: 1.06; letter-spacing: -0.03em; max-width: 13em; }
.invite .go { display: inline-block; margin-top: 28px; font: 500 var(--title)/1.2 var(--sans); }

footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: clamp(64px, 8vw, 120px) var(--margin) 28px; font-size: var(--small); color: var(--soft); }
footer a { color: var(--soft); }

/* ---------- home and the email page: words above, the drawing as the ground ----------
   The words never sit on top of the drawing at a guessed position. They sit in the page flow
   and the drawing comes after them, full width, so nothing can collide at any window size.
   On a phone: the words, then just the London street (art-london.svg), then the footer.
   In between (tablets, near-square windows): the same, with the whole scene. */
body.scene { display: flex; flex-direction: column; min-height: 100svh; }
.scene-main { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 64px) var(--margin) clamp(48px, 7vw, 64px); }
.scene.join-page .lede { max-width: 19em; }
.scene-words { max-width: 40em; }
.scene h1 { font-size: var(--display); line-height: 1.04; letter-spacing: -0.03em; max-width: 13em; }
/* the white highlight needs room between lines, or each line's block clips the letters above it */
.scene h1:has(> .hl) { line-height: 1.24; }
.scene .lede { font-size: var(--title); line-height: 1.45; max-width: 26em; margin-top: clamp(20px, 2.4vw, 28px); text-wrap: pretty; }
.scene-art { display: block; flex: none; }
.scene footer { padding-top: 28px; }
.scene-art img { width: 100%; height: auto; }
.ways { list-style: none; padding: 0; margin: clamp(24px, 3vw, 36px) 0 0; font-size: var(--title); line-height: 1.3; }
.ways a { display: inline-block; padding: 8px 0; }
.ways .tag { margin-top: 16px; }
@media (pointer: fine) { .ways a { padding: 4px 0; } }
.ways .tag a { font-weight: 500; }
@media (max-width: 640px) {
  /* iPhone, one poster: the street is the ground, edge to edge at the foot of the screen, and the
     words sit centred in the sky above it, so there is no dead band anywhere (Kyra, 16 Oct: the gap
     before the houses was too big; then pushing it up left a hole underneath). */
  .scene-main { justify-content: center; padding-top: 24px; padding-bottom: 28px; }
  .scene h1 { font-size: clamp(36px, 10.6vw, 46px); }
  .scene-art { overflow: hidden; padding: 0 !important; }
  .scene-art img { width: 112%; max-width: none; margin-left: -6%; }
  .scene footer { padding-top: 12px; }
}
@media (min-width: 1000px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  /* big screens: the whole scene runs edge to edge along the bottom of the window. The headline
     sits in the open sky on the left, clear above the rooftops. The rest sits in the sky on the
     right, and may come down into the drawing's own box, but only as far as --sky: about a third
     of the drawing's height, which is still well above the hill and the people on it. Both are
     worked out from the window width, the same way the drawing is sized, so they hold at any size.
     On short wide windows the drawing would be taller than the room left for it, so its bottom
     runs off the window instead (lines leaving the edge, as they already do at the sides). It
     never loses more than the bottom fifth, which keeps the hill and its people whole. */
  .scene { --art-h: calc(100vw * 760 / 1930); --sky: calc(var(--art-h) * .36); position: relative; }
  .scene-main { flex: 1 1 auto; position: relative; z-index: 2; padding: 16px var(--margin) 0; }
  /* home: the two columns start level. The email page: the box steps down toward the people on the hill */
  .scene-words { max-width: none; display: grid; grid-template-columns: calc(58vw - var(--margin)) 1fr; align-items: start; }
  .join-page .scene-words { align-items: end; }
  /* after sign-up there is no box, so the thank-you reads as one block under the headline */
  .scene .thanks .scene-words { display: block; }
  .scene .thanks h1 { padding-bottom: 0; }
  .scene .thanks .aside { padding: clamp(20px, 2.4vw, 28px) 0 calc(var(--sky) + 36px); }
  .scene h1 { padding: 0 4vw calc(var(--sky) + 36px) 0; max-width: 11.5em; box-sizing: content-box; font-size: min(var(--display), 7.4svh); }
  .scene.home h1 { font-size: min(clamp(36px, 3.9vw, 60px), 6.2svh); max-width: 12em; }
  .scene .aside { max-width: 30em; }
  .scene .aside > .lede:first-child { margin-top: 0; }
  .scene-art { flex: 1000 1 0; min-height: calc(var(--art-h) * .78); max-height: var(--art-h); margin-top: calc(-1 * var(--sky)); position: relative; z-index: 1; overflow: hidden; }
  .scene-art img { height: 100%; object-fit: cover; object-position: 50% 0; }
  /* the footer sits in the empty ground under the hill, bottom right, where no line ever runs */
  .scene footer { position: absolute; right: var(--margin); bottom: 0; z-index: 2; padding: 0 0 18px; gap: 32px; }
}
.join { display: flex; max-width: 520px; margin-top: clamp(28px, 3vw, 40px); }
.join input[type=email] { flex: 1; min-width: 0; height: 52px; padding: 0 16px; font: 400 17px/1 var(--sans); color: var(--paper); background: transparent; border: 1px solid var(--paper); border-right: 0; border-radius: 0; -webkit-appearance: none; appearance: none; }
.join input[type=email]::placeholder { color: var(--soft); }
/* Kyra, 16 Oct: typing in the box must not highlight it or change its colour. Same box when focused,
   and the browser's autofill tint is painted over with the blue. */
.join input[type=email]:focus, .join input[type=email]:focus-visible { background: transparent; outline: none; }
.join input[type=email] { caret-color: var(--paper); }
.join input[type=email]:-webkit-autofill, .join input[type=email]:-webkit-autofill:hover, .join input[type=email]:-webkit-autofill:focus { -webkit-text-fill-color: var(--paper); -webkit-box-shadow: 0 0 0 1000px var(--blue) inset; box-shadow: 0 0 0 1000px var(--blue) inset; transition: background-color 9999s; }
.join input[type=email]::selection { background: var(--paper); color: var(--blue); }
.join button { flex: none; height: 52px; padding: 0 20px; cursor: pointer; background: var(--paper); color: var(--blue); border: 1px solid var(--paper); border-radius: 0; font: 500 17px/1 var(--sans); -webkit-appearance: none; appearance: none; }
.fine { font-size: var(--small); color: var(--soft); margin-top: 14px; }
.fine a { color: var(--soft); }
/* the privacy notice (Kyra, 16 Oct): official and dense, no highlighted headings, everything in
   the regular weight, headings told apart only by space */
.legal { padding: clamp(32px, 5vw, 64px) var(--margin) clamp(48px, 6vw, 80px); max-width: calc(48em + 2 * var(--margin)); font-size: 14px; line-height: 1.45; }
.legal h1 { font: 400 22px/1.3 var(--sans); letter-spacing: 0; }
.legal .dated { margin-top: 24px; color: var(--soft); }
.legal section { margin-top: 18px; }
.legal h2 { font: 400 14px/1.45 var(--sans); }
.legal p { margin-top: 2px; }
.legal section p + p { margin-top: 6px; }
.close { position: absolute; top: calc(clamp(22px, 3vw, 44px) + 2px); right: calc(var(--margin) - 10px); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; z-index: 4; }
.close svg { width: 24px; height: 24px; }
.close:hover svg path { stroke-width: 2.4; }
.legal-page { position: relative; }
/* Kyra's private list at /admin (served by waitlist_app.py, behind a password) */
.admin { padding: clamp(32px, 5vw, 64px) var(--margin) 80px; max-width: calc(52em + 2 * var(--margin)); }
.admin h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.24; letter-spacing: -0.02em; }
.admin .count { margin-top: 20px; font-size: var(--title); }
.admin .count .n { font-weight: 500; }
.admin .tools { margin-top: 8px; font-size: var(--small); }
.admin table { width: 100%; border-collapse: collapse; margin-top: 32px; font-size: 15px; }
.admin th { text-align: left; font-weight: 400; color: var(--soft); padding: 0 16px 10px 0; }
.admin td { padding: 9px 16px 9px 0; border-top: 1px solid rgba(255,255,255,.22); word-break: break-all; }
.admin td:last-child, .admin th:last-child { white-space: nowrap; word-break: normal; padding-right: 0; text-align: right; }
.admin .empty { color: var(--soft); text-align: left !important; }
.join button:hover { text-decoration: underline; text-underline-offset: .2em; }
.join button:disabled { opacity: .6; cursor: default; text-decoration: none; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.msg { font-size: var(--small); margin-top: 12px; }
.msg:empty { display: none; }
.thanks { display: none; }
.joined .signup { display: none; }
.joined .thanks { display: block; }

@media (max-width: 820px) {
  .split, .step { grid-template-columns: 1fr; }
  .split > * + * { margin-top: 48px; }
  .step h2 { margin-bottom: 10px; }
  .story-head { position: static; }
  .note { margin-left: 18%; }
}
@media (max-width: 400px) {
  .join { flex-direction: column; }
  .join input[type=email] { flex: none; border-right: 1px solid var(--paper); }
  .join button { margin-top: 8px; }
}