@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Archivo:wght@400;500;700&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400;1,6..72,500&family=Space+Mono:wght@400;700&display=swap");
/* The Verge token block the site's own pages are built on.
   Extracted 2026-09-17 from the first page, which until then was the only
   place it existed ... the generator scraped it out of that file with a
   regex, which meant deleting or reformatting one page broke the whole
   site build. It is a file now.

   This is the SITE FRAME's copy, for the home, library, systems and
   work-with-me pages. It is not the source of a page's own styling: a page
   loads its design system live from Claude Design at build time. See
   _config/editions/nick.md. */

/* Verge tokens, from the spec. Light is the default per Nick's 2026-09-08 ruling; the page never consults the reader's operating system. */
  :root {
    color-scheme: light;
    --page: #f7f6f3;
    --ink: #141414;
    --bar: #000000;
    --bar-ink: #ffffff;
    --accent: #ff6600;
    --accent-hover: #e55c00;
    --grey-1: #7a7873;
    --grey-2: #bdbab3;
    --grey-3: #e6e4de;
    --invert-bg: #141414;
    --invert-ink: #f7f6f3;
    --card-bg: #141414;
    --card-ink: #f7f6f3;
    --rule: 2px;
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
    --t13: 13px; --t16: 16px; --t20: 20px; --t28: 28px; --t44: 44px; --t68: 68px; --t108: 108px; --t168: 168px;
    --display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --mono: "Space Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    --track: 0.08em;
  }

/* Dark theme, the only override, reached by the toggle in the bar. */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --page: #141414;
    --ink: #ffffff;
    --grey-1: #8a8a8a;
    --grey-2: #4a4a4a;
    --grey-3: #2a2a2a;
    --invert-bg: #ffffff;
    --invert-ink: #000000;
    --card-bg: #000000;
    --card-ink: #ffffff;
  }

/* Two corrections from the 2026-09-09 read of the live draft, both measured
   rather than eyeballed.

   The grey was 4.08:1 on the near-white ground, one step under the 4.5:1 floor
   text has to clear. It is darkened here and not in page 001, which owns the
   token block above and belongs to another piece of work. Measured 5.08:1.

   And the orange was being used as lettering on that same ground, at 2.7:1.
   The Verge system already says what orange is for: a fill with black text on
   it. So `.tag` is a fill now. Orange stays lettering only on the black bar,
   where it clears 7:1. */
:root { --grey-1: #6b6963; }

* { box-sizing: border-box; border-radius: 0; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--body); font-size: var(--t16); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: var(--accent); color: #000; }
/* One focus ring for the whole site, in the colour of the text it belongs to,
   so it is visible on the near-white page and on the black bar alike. */
:focus-visible { outline: var(--rule) solid currentColor; outline-offset: 2px; }
.label { font-family: var(--mono); font-size: var(--t13); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track); line-height: 1.3; }
.tag { background: var(--accent); color: #000; padding: 1px 6px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--s5); }

.bar { background: var(--bar); color: var(--bar-ink); border-bottom: var(--rule) solid var(--ink); padding: var(--s4) var(--s5); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: var(--t20); letter-spacing: -0.02em; text-transform: uppercase; }
.wordmark b { color: var(--accent); font-weight: 700; }
a.wordmark, .secline a, .lead, .frow .fl a { text-decoration: none; }
.bar .left, .bar .right { display: flex; gap: var(--s5); align-items: baseline; }
.bar .nav { display: flex; gap: var(--s5); align-items: baseline; }
.bar a, .bar .label { color: var(--bar-ink); text-decoration: none; }
.bar a:hover { color: var(--accent); }
.bar .navlink[aria-current="page"] { color: var(--accent); }
.theme { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--mono); font-size: var(--t13); font-weight: 700; letter-spacing: var(--track); text-transform: uppercase; color: var(--bar-ink); }
.theme:hover { color: var(--accent); }

.open { padding: var(--s7) 0 var(--s6); border-bottom: var(--rule) solid var(--ink); }
.open h1 { font-family: var(--display); font-weight: 700; font-size: var(--t68); line-height: 0.98; letter-spacing: -0.02em; margin: var(--s5) 0 0; max-width: 22ch; text-wrap: balance; }
.open h1 i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.open p { font-size: var(--t20); line-height: 1.4; max-width: 56ch; margin: var(--s5) 0 0; }

h2.sec { font-family: var(--display); font-weight: 700; font-size: var(--t28); letter-spacing: -0.02em; margin: 0; }
.secline { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s5); flex-wrap: wrap; padding: var(--s6) 0 var(--s4); border-bottom: var(--rule) solid var(--ink); }

/* the link previews: a loop of the page's picture being used */
.preview { display: block; border: var(--rule) solid var(--ink); background: var(--grey-3); line-height: 0; }
.preview img { width: 100%; height: auto; display: block; }
.kit .seeit { display: grid; grid-template-columns: 420px max-content; justify-content: start; gap: var(--s5); align-items: end; margin-top: var(--s5); text-decoration: none; }
.kit .seeit .label { align-self: end; }
a:hover .preview, a:focus-visible .preview { border-color: var(--accent); }

/* THE FIRST SCREEN. Nick, 2026-09-09: "one screen, this week's page is the
   click." One sentence, one line, one button, and a picture that moves before
   anybody clicks anything. Nothing else is allowed in here.
   The button comes before the video in the source, so it is the first thing a
   phone shows under the sentence and the first thing the keyboard reaches. */
.first { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--s5); align-items: start; padding: var(--s6) 0 var(--s7); border-bottom: var(--rule) solid var(--ink); }
.first .say { grid-column: 1 / span 6; }
.first h1 { font-family: var(--display); font-weight: 700; font-size: var(--t68); line-height: 0.98; letter-spacing: -0.02em; margin: 0; max-width: 16ch; text-wrap: balance; }
.first h1 i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.first .one { font-size: var(--t20); line-height: 1.4; max-width: 44ch; margin: var(--s5) 0 0; }
.first .go { margin: var(--s5) 0 0; }
.first .friction { margin: var(--s3) 0 0; max-width: 46ch; color: var(--grey-1); }

/* the video, or the frame waiting for one. HOME_VIDEO at the top of the
   generator is the only thing that changes what is in here. */
.vid { grid-column: 7 / -1; }
.vid .frame { position: relative; aspect-ratio: 16 / 9; background: #000; color: #fff; border: var(--rule) solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); overflow: hidden; }
.vid .frame iframe, .vid .frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.vid .play { font-size: 44px; line-height: 1; }
.vid .sound { margin: var(--s3) 0 0; }

/* THE PAGES. Every page as its moving picture, this week's first and largest,
   each with its number and its one line. Three fit across at desktop width;
   from the sixth page on the row starts scrolling sideways instead of shrinking
   the pictures. */
.pages { display: flex; gap: var(--s5); overflow-x: auto; padding: var(--s5) 0 var(--s6); border-bottom: var(--rule) solid var(--ink); }
.pages a { flex: 0 0 auto; width: min(340px, 82vw); text-decoration: none; }
.pages a.big { width: min(520px, 88vw); }
.pages .pn { font-family: var(--display); font-weight: 700; font-size: var(--t28); line-height: 1; font-variant-numeric: tabular-nums; margin: var(--s3) 0 0; }
.pages a.big .pn { font-size: var(--t44); }
.pages .pf { margin: var(--s2) 0 0; font-family: var(--display); font-weight: 700; font-size: var(--t16); line-height: 1.2; letter-spacing: -0.01em; }
.pages a.big .pf { font-size: var(--t20); }
.pages a:hover .pf, .pages a:focus-visible .pf { text-decoration: underline; text-underline-offset: 3px; }

/* HOW THIS WORKS. Four cards, one frame. Clicking a card swaps the picture and
   nothing moves on the way: no fade, no slide, no animation anywhere. */
.how { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); padding: var(--s5) 0 var(--s7); border-bottom: var(--rule) solid var(--ink); align-items: start; }
.how .steps { grid-column: 1 / span 5; }
.how .step { display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: var(--s4); align-items: baseline; width: 100%; text-align: left; appearance: none; background: none; color: inherit; font: inherit; border: 0; border-top: var(--rule) solid var(--ink); padding: var(--s4) var(--s3); cursor: pointer; }
.how .step:last-child { border-bottom: var(--rule) solid var(--ink); }
.how .step .sn { font-family: var(--mono); font-size: var(--t13); font-weight: 700; }
.how .step .st { font-family: var(--display); font-weight: 700; font-size: var(--t20); line-height: 1.1; letter-spacing: -0.02em; }
.how .step[aria-pressed="true"] { background: var(--ink); color: var(--page); }
/* the pressed card is black, so its own text colour would draw a near-white
   focus ring onto the near-white page, where nobody could see it */
.how .step:focus-visible { outline-color: var(--ink); }
.how .frame { grid-column: 6 / -1; border: var(--rule) solid var(--ink); background: var(--grey-3); line-height: 0; }
.how .frame img { width: 100%; height: auto; display: block; }
.how .frame [hidden] { display: none; }
/* the plain frame a step falls back to when there is no real picture of it yet */
.how .flat { aspect-ratio: 16 / 9; display: flex; align-items: center; padding: var(--s6); background: var(--ink); color: var(--page); line-height: 1.15; }
.how .flat span { font-family: var(--display); font-weight: 700; font-size: var(--t28); letter-spacing: -0.02em; max-width: 18ch; }


/* the systems this business runs on, drawn from the register at build time:
   the name in the left column, what it is for in the right, one rule between
   rows and nothing else. */
.reg { margin: 0; padding: var(--s6) 0 var(--s7); border-bottom: var(--rule) solid var(--ink); }
.reg .whatis { margin: 0 0 var(--s5); max-width: 62ch; }
.reg .rrow { display: grid; grid-template-columns: 22ch minmax(0, 1fr); gap: var(--s2) var(--s5); border-top: 1px solid var(--grey-3); padding: var(--s3) 0; }
.reg .rn { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.reg .rp { margin: 0; min-width: 0; max-width: 62ch; }
.reg .read { margin: var(--s5) 0 0; max-width: 68ch; color: var(--grey-1); }

/* THE WORK-WITH-ME PAGE. Three offers stacked, each with its number as an
   oversized numeral, and the same four fields in the same order on every one,
   so a reader can compare them straight down the page. Rules between them, no
   cards, nothing rounded, one button for the whole page at the bottom.
   Every word on it comes from site/offers.md. */
.offer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--s5); border-bottom: var(--rule) solid var(--ink); padding: var(--s6) 0; }
.offer .on { grid-column: 1 / span 3; font-family: var(--display); font-weight: 700; font-size: var(--t108); line-height: 0.85; font-variant-numeric: tabular-nums; margin: 0; }
.offer .ob { grid-column: 4 / -1; }
.offer h2 { font-family: var(--display); font-weight: 700; font-size: var(--t44); letter-spacing: -0.02em; margin: 0; }
.offer .op { margin: var(--s4) 0 0; max-width: 60ch; font-size: var(--t20); line-height: 1.4; }
.offer .fields { margin-top: var(--s5); }
.orow { display: grid; grid-template-columns: 22ch minmax(0, 1fr); gap: var(--s2) var(--s5); border-top: var(--rule) solid var(--ink); padding: var(--s4) 0; }
.orow.one { grid-template-columns: minmax(0, 1fr); }
.orow .ol { margin: 0; }
.orow .ov { min-width: 0; max-width: 62ch; }
.orow .ov p { margin: 0; }
.orow .olist { list-style: none; margin: 0; padding: 0; }
.orow .olist li { padding: var(--s2) 0; border-bottom: 1px solid var(--grey-3); }
.orow .olist li:last-child { border-bottom: 0; padding-bottom: 0; }

/* An empty field in offers.md draws this and nothing else: a dashed box
   carrying only that field's name. So the layout can be looked at today with
   nothing invented standing in for words Nick has not written yet. */
.slot { border: var(--rule) dashed var(--grey-1); color: var(--grey-1); padding: var(--s4); font-family: var(--mono); font-size: var(--t13); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track); line-height: 1.3; }
.open .slot { margin: var(--s5) 0 0; }
.offer .ob > .slot { margin-bottom: var(--s4); }

/* the one action for the whole page, on the pale ground */
.close { padding: var(--s6) 0 var(--s7); }
.close .friction { margin: var(--s3) 0 0; max-width: 46ch; color: var(--grey-1); }
.close .slot { margin: var(--s4) 0 0; }

/* the private door: one line, once, at the very bottom */
.door { margin: 0; padding: var(--s6) 0 var(--s7); max-width: 60ch; font-family: var(--serif); font-size: var(--t20); font-style: italic; }
.door a { text-decoration: underline; text-underline-offset: 3px; }
.door a:hover { background: var(--accent); color: #000; }

/* the library */
.kit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--s5); border-bottom: var(--rule) solid var(--ink); padding: var(--s6) 0; }
.kit .kn { grid-column: 1 / span 3; font-family: var(--display); font-weight: 700; font-size: var(--t108); line-height: 0.85; font-variant-numeric: tabular-nums; margin: 0; }
.kit .kb { grid-column: 4 / -1; }
.kit h3 { font-family: var(--display); font-weight: 700; font-size: var(--t28); letter-spacing: -0.02em; margin: 0; }
.kit h3 i { font-family: var(--serif); font-style: italic; font-weight: 400; }
.kit p { margin: var(--s4) 0 0; max-width: 60ch; }
.kit .parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s5); margin-top: var(--s5); }
.kit .part { border-top: var(--rule) solid var(--ink); padding-top: var(--s3); }
.kit .pd { margin: var(--s3) 0 0; }
.kit .cols { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.kit .cols li { font-family: var(--mono); font-size: var(--t13); padding: var(--s1) 0; border-bottom: 1px solid var(--grey-3); }
.kit .label a, .kit a.tag { text-decoration: none; }

/* the one ask, inverted */
.ask { background: var(--invert-bg); color: var(--invert-ink); margin-top: var(--s7); padding: var(--s8) 0; }
.ask h2 { font-family: var(--display); font-weight: 700; font-size: var(--t44); letter-spacing: -0.02em; margin: var(--s4) 0 0; max-width: 20ch; }
.ask h2 i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.ask p { max-width: 56ch; font-size: var(--t20); }
form { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
input[type=email] { font-family: var(--body); font-size: var(--t16); padding: 12px var(--s4); border: var(--rule) solid var(--invert-ink); background: transparent; color: inherit; min-width: 280px; }
input[type=email]::placeholder { color: var(--grey-1); }
.kitpick { padding: 12px var(--s4); border: var(--rule) solid var(--invert-ink); background: transparent; color: inherit; font-family: var(--mono); }
/* the open dropdown is drawn by the operating system on its own white, so it
   is told both colours rather than inheriting the dark panel's */
.kitpick option { color: #141414; background: #ffffff; }
.btn { appearance: none; border: var(--rule) solid var(--accent); background: var(--accent); color: #000; font-family: var(--display); font-weight: 700; font-size: var(--t13); letter-spacing: var(--track); text-transform: uppercase; padding: 14px 24px; cursor: pointer; line-height: 1; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--invert-ink); color: var(--invert-bg); border-color: var(--invert-ink); }
/* the one button on the first screen sits on the pale ground, not on the black
   panel, so its hover snaps the other way */
.first .btn:hover, .close .btn:hover { background: var(--ink); color: var(--page); border-color: var(--ink); }
.note { margin-top: var(--s4); min-height: 1.4em; }
/* orange as a fill with black on it, never orange lettering */
.note.bad { background: var(--accent); color: #000; display: inline-block; padding: 2px 8px; }

.hand { padding: var(--s6) 0; border-bottom: var(--rule) solid var(--ink); }
.hand p { margin: 0; max-width: 60ch; font-family: var(--serif); font-size: var(--t20); font-style: italic; }
footer.colophon { padding: var(--s6) var(--s5) var(--s8); max-width: 1280px; margin: 0 auto; color: var(--grey-1); }

@media (max-width: 860px) {
  .open h1 { font-size: var(--t44); }
  .first { padding: var(--s5) 0 var(--s6); }
  .first .say, .vid, .how .steps, .how .frame { grid-column: 1 / -1; }
  .first h1 { font-size: var(--t44); max-width: none; }
  .first .one { font-size: var(--t16); margin-top: var(--s4); }
  .vid { margin-top: var(--s5); }
  .reg .rrow { grid-template-columns: 1fr; gap: var(--s2); }
  .offer .on, .offer .ob { grid-column: 1 / -1; }
  .offer .on { font-size: var(--t68); }
  .offer h2 { font-size: var(--t28); }
  .offer .op { font-size: var(--t16); }
  .orow { grid-template-columns: 1fr; }
  .kit .seeit { grid-template-columns: 1fr; gap: var(--s3); }
  .kit .kn, .kit .kb { grid-column: 1 / -1; }
  .kit .parts { grid-template-columns: 1fr; gap: var(--s5); }
  .ask h2 { font-size: var(--t28); }
}

/* The bar at phone width. It was wrapping to three rows, with the theme switch
   stranded alone on the third. Two rows at most now: the name and the switch on
   the first, the three links on the second. */
@media (max-width: 700px) {
  .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3) var(--s4); padding: var(--s3) var(--s5); }
  .bar .left { display: contents; }
  .bar .wordmark { grid-column: 1; grid-row: 1; font-size: var(--t16); }
  .bar .right { grid-column: 2; grid-row: 1; justify-self: end; }
  .bar .nav { grid-column: 1 / -1; grid-row: 2; gap: var(--s2); flex-wrap: wrap; }
}