/* index.css — the bundle front page, served at /.

   Moved up from /about on 12 August 2026. It was the only page that said what
   bundle is and nothing linked to it, so it became the front door and /about
   now redirects here. Every path in this file is from the domain root, so it
   does not care what folder the page is served from.

   Built the way the app is built, not the way a marketing page usually is:

     Four screens, each filling the viewport, each snapping. One scroll moves
     one screen. Content sits in the middle of every one.

     Centred on both axes. The app is one step in the middle of a frame with
     air all round it, and that is the most recognisable thing about it.

     Small type, lots of space. The app's heading is around 32px, not 80px.
     Hierarchy comes from size and from the emptiness around a thing.

     Pure black and pure white, nothing in between, swapping with the device.
     Black by default and white on a light device, which is the opposite way
     round to most sites and easy to get backwards.

     No grey. Body is the same ink as a heading. The greys that survive are
     line work and are the ink at reduced alpha, never a separate colour.

     Delight for headings, Basis Grotesque Mono for everything else.
     Corners are 3px. No cards, no dividers: space separates.

     No accent anywhere. Decided 10 August 2026: this page is black, white and
     the ink at reduced alpha, and nothing else. The app was stripped the same
     way on the same day, so the two match. Do not reintroduce the orange in
     either place.
*/

@font-face {
  font-family: 'Delight';
  src: url('/fonts/Delight-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Basis Grotesque Mono';
  src: url('/fonts/BasisGrotesqueMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #000000;
  --ink: #ffffff;
  --line: rgba(255, 255, 255, 0.24);
  /* 0.55, not 0.42. The kicker, the fine print, the tree and the footer are all
     11 or 12px, and at that size 42 percent is about 3.3 to 1 against the
     background where 4.5 is the readable minimum. Still the ink at reduced
     alpha, still no second colour, just enough of it to read. */
  --dim: rgba(255, 255, 255, 0.55);

  --r: 3px;
  --sans: 'Delight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Basis Grotesque Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: clamp(22px, 5vw, 44px);
  /* Breathing room at the top and bottom of every screen. Equal on both, so a
     centred block reads as centred rather than as sitting slightly high. */
  --top: clamp(52px, 8vh, 88px);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --ink: #000000;
    --line: rgba(0, 0, 0, 0.2);
    --dim: rgba(0, 0, 0, 0.55);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* ---------- the snap ----------
   mandatory, so a scroll always lands on a screen and never between two.
   scroll-snap-stop: always is the part that makes one flick move exactly one
   screen rather than skipping two on a fast trackpad. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
::selection { background: var(--ink); color: var(--bg); }

/* ---------- a screen ----------
   Fills the viewport, centres its content, and is a snap point. min-height
   rather than height so a screen that outgrows the viewport can still grow
   instead of clipping. */
.screen {
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--top) var(--pad);
}

/* ---------- type ----------
   Two heading sizes and two body sizes. That is the whole scale. */
.big {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(27px, 3.6vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 22ch;
}
.line {
  margin: 26px 0 0;
  max-width: 54ch;
  color: var(--ink);
}
.kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 30px;
}
.fine { font-size: 12px; color: var(--dim); margin: 20px 0 0; }

/* ---------- the button ----------
   Inverted against the page rather than coloured: ink block, background-colour
   text. With the accent gone this is the only way left to make one thing on a
   screen louder than everything around it, and it is the same inversion the
   page already uses for selected text. */
.go { margin: 40px 0 0; }
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  padding: 15px 26px;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  background: var(--ink);
  color: var(--bg);
}
/* Hollows out on hover instead of dimming, so it stays pure black and white. */
.btn:hover { background: transparent; color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- the folder ----------
   A two column grid, not a <pre> padded out with spaces. The notes column then
   lines up exactly whatever the longest path is, and stays lined up when a row
   is edited. Indentation is padding in em, so it tracks the type size.

   Left aligned inside a centred box, because a centred tree is not a tree. */
.tree {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: clamp(20px, 4vw, 52px);
  row-gap: 7px;
  align-items: baseline;
  width: 100%;
  max-width: 540px;
  margin: 42px auto 0;
  padding: 30px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
  /* Belt and braces. The grid is sized to fit, but a note edited longer than
     the box should scroll inside it rather than push the page sideways. */
  overflow-x: auto;
}
.tree .p { color: var(--dim); white-space: nowrap; }
.tree .dir { color: var(--ink); }
.tree .n { color: var(--dim); white-space: nowrap; }
.l1 { padding-left: 1.7em; }
.l2 { padding-left: 3.4em; }

/* ---------- the last screen ----------
   The footer sits inside it. With mandatory snapping, anything outside a snap
   point can become impossible to scroll to. */
.screen-last { justify-content: space-between; }
.last-mid {
  margin: auto;          /* auto both sides centres it, and collapses to zero
                            rather than pushing the footer off a short screen */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.foot {
  display: flex;
  justify-content: center;
  gap: 26px;
  font-size: 11px;
  color: var(--dim);
}
.foot a { text-decoration: underline; text-underline-offset: 2px; }
.foot a:hover { color: var(--ink); }

/* On a phone there is no room for a second column, and a two column grid there
   pushes the notes past the edge of the box where nobody can reach them. So the
   note drops under its own path instead. Empty notes are removed rather than
   left as blank rows, and long ones wrap rather than overflow. */
@media (max-width: 620px) {
  .tree {
    grid-template-columns: 1fr;
    row-gap: 0;
    font-size: 11px;
    padding: 24px 20px;
  }
  .tree .p { padding-top: 11px; }
  .tree .p.l0 { padding-top: 0; }
  .tree .n { padding-left: 1.4em; white-space: normal; line-height: 1.45; }
  .tree .n:empty { display: none; }
  .l1 { padding-left: 1.3em; }
  .l2 { padding-left: 2.6em; }
}

/* A short window cannot hold a whole screen, and mandatory snapping there hides
   whatever overflows. Landscape on a phone is the usual case. */
@media (max-height: 620px) {
  html { scroll-snap-type: none; }
  .screen { min-height: auto; padding-top: 64px; padding-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}