/* The landing page, and the head the shelf page needs now that it is no
   longer the front door. Everything else is home.css: the doors, the section
   heads, the steps and the foot are shared, so the two pages cannot drift
   apart; and the rail, the mark and the palette are style.css, shared with
   the reader, so a paper cannot either. */

/* ---------- the head of the shelf page ---------- */

/* The same opening as the landing page: the count first, as a chip, then the
   name of the page, then a line saying what is on it. The shelf is a working
   page and the sections start sooner, so it takes a little less air at the top
   and hands the gap below it to the first section's own margin.

   The title is not the site's name and is not set at the size of one - it steps
   down from the hero, which is what keeps the two heads reading as the same
   page shape rather than the same page. */
.shelf-head { padding: clamp(52px, 8vh, 88px) 0 4px; }
.shelf-head h1 {
  font: 700 clamp(30px, 4.2vw, 46px)/1.04 var(--display);
  letter-spacing: -0.012em;
  margin: 0 0 10px;
}
.shelf-lede {
  max-width: 34rem;
  font: 400 clamp(16px, 1.3vw, 18px)/1.55 var(--sans);
  color: var(--ink-soft);
  margin: 0 0 12px;
}
/* What the shelf adds up to, under the line that says what it is: the three
   numbers that are about the reading rather than about the papers. Small, and
   the last thing in the head, so the section below it starts on a fact about
   itself rather than on a total. */
.shelf-corpus { font: 500 13px var(--sans); color: var(--ink-faint); margin: 0; }

/* ---------- landing hero ---------- */

/* Centred: what the thing is, then what it is for, then the door, then the
   three things it does. One axis down the middle of the page, everything hung
   off it.

   The name is not in here. It is in the rail, where it is the mark of the site
   rather than the headline of the page - which leaves the top of the page to
   the one sentence that says what any of this is.

   The hero is its own block, and its spacing is its boundary: air above it,
   one even step between the things inside it, and a gap of its own below
   it, a touch over the page's ordinary one between sections. Nothing is
   drawn to mark its edge. */
.lp-hero {
  /* The two steps inside the block: from the text to the door, and from the
     door to the tiles. Set here, together, so they are tuned as a pair. */
  --hero-gap-door: 65px;
  --hero-gap-tiles: 75px;
  /* the air under the rail, plus fifty more so the block sits a little
     lower on the screen than the top edge of the page would put it */
  padding: calc(clamp(72px, 9vh, 104px) + 50px) 0 0;
  text-align: center;
}
.lp-hero + .shelf { margin-top: 100px; }

/* The count, at the head of the shelf and only there: it is a fact about what
   is on that page, and the landing page was repeating it two clicks early. A
   chip rather than a line of type, because it is a fact rather than part of
   what the head is saying. */
.shelf-head .tally {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 5.8px 15.8px 5.8px 13.3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: 500 15.62px var(--sans);
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.shelf-head .tally::before {
  content: "";
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  margin-right: 10px;
}
.shelf-head .tally:empty { display: none; }
/* the shelf is a working page and reads a quarter smaller; the chip goes with it */
.shelf-head .tally { font-size: 12.5px; padding: 4.6px 12.6px 4.6px 10.6px; }

/* What the thing is, in one sentence, and the heading of the page now that the
   name has gone up into the rail. It is the h1 of the page and set as one: the
   largest run of text here, a clear step above the two section heads below
   it, because it is the only sentence a reader has to finish before deciding
   whether to stay. Its size does that work on its own, so it is set at a
   medium weight rather than bold: it is a sentence to be read, not a title
   to be recognised, and four bold lines of it were a wall.

   Qualified by the body it sits on, and it has to be: the base heading rule in
   home.css is a class and two elements, so a bare .lp-claim loses the family
   and the tracking to it and the sentence comes out in the wrong face. */
body.library h1.lp-claim {
  max-width: 46rem;
  margin: 0 auto 20px;
  font: 500 clamp(28px, 3.2vw, 38px)/1.2 var(--display);
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
/* The line under the claim: what the thing is for, rather than what it does.
   Set at the page's one prose size, a step down in ink, so it reads as the
   end of the title and not as the start of the argument below. A paragraph,
   not a heading: the page's h2s are its two sections. */
body.library .lp-hero .lp-sub {
  max-width: 34rem;
  margin: 0 auto var(--hero-gap-door);
  font: 400 18px/1.55 var(--sans);
  letter-spacing: 0;
  color: var(--ink-faint);
}

.lp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* The door, matched to the page it sits on. This page tells one thing from
   another with a line and never with a wash, and the button was the only thing
   on it breaking that rule - a saturated pill under a cast light, on a page of
   hairlines and quiet type.

   So it is drawn the way everything else here is drawn: the page's own ground,
   the cards' own corner rather than a pill, and the accent carried by the type
   rather than behind it. No fill and no shadow.

   Two lines rather than one. A single line at the strength it needs to read as
   an edge you can press comes out brighter than anything else on the page; two
   light ones do the same work quietly, because it is the doubling that says
   "pressable" and not the ink. The border is the inner line, and the ring is
   the outer one - a shadow at 1px in the page's own colour opens the gap, and
   the second at 2px draws the line past it, so the pair follows the corner
   radius without a second element to keep in step.

   It stays unfilled on hover too. A tint under the label is the only kind of
   fill a page this quiet can take, and on white a tint is darker than the paper
   - so pointing at the button dimmed it, which is the wrong direction for the
   one thing on the page you are being invited to press.

   It lifts instead. The two lines hold exactly where they are and a shadow
   arrives underneath - the card lift the three boxes used to carry, moved to
   the one thing on the page that is actually a way somewhere, and taken up to
   the deeper of the two steps. Three casts, not one: a tight blue one close in
   under the button that does most of the reading, then the neutral lift and the
   wide accent glow behind it. The button rises off the paper rather than
   changing colour, which is the only kind of emphasis a page drawn in lines has
   left. The rings stay first in the list so they keep their edge over
   everything cast behind them. */
.lp .door-main {
  border-radius: var(--r-lg);
  background: none;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-text);
  box-shadow:
    0 0 0 1px var(--bg),
    0 0 0 2px color-mix(in srgb, var(--accent) 17%, transparent);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.lp .door-main:hover {
  background: none;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-text);
  box-shadow:
    0 0 0 1px var(--bg),
    0 0 0 2px color-mix(in srgb, var(--accent) 17%, transparent),
    0 8px 18px -8px color-mix(in srgb, var(--accent) 52%, transparent),
    var(--shadow-lift),
    var(--glow-lift);
}

/* ---------- the three things it does ---------- */

/* Under the claim rather than beside it: the sentence above says what this is,
   and these say what you get, so they are read after it and not against it.
   Three cards of the same card the shelf uses, so the landing page and the
   shelf are visibly one site. */
.lp-tiles {
  list-style: none;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: var(--hero-gap-tiles) 0 0;
  padding: 0;
}
/* These do not lift. They are three statements, not three things to click, and
   a card that answers the pointer is promising something it cannot do. The lift
   belongs to the one thing on the page that is a way somewhere. */
.lp-tile {
  margin: 0;
  padding: 22px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
/* The one accent on a card: a short bar over the heading, the same mark the
   rest of the site uses to point at something. */
.lp-tile-what {
  position: relative;
  margin: 0 0 10px;
  padding-top: 16px;
  font: 600 20px/1.3 var(--display);
  letter-spacing: -0.012em;
  color: var(--ink);
}
.lp-tile-what::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad-brand);
}
.lp-tile-body {
  margin: 0;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- prose blocks ---------- */

.lp .section-note { max-width: 62rem; font-size: 16px; }
/* the intro to the argument runs 150px narrower than the page's other intros */
.lp #not-the-pdf .section-note { max-width: calc(62rem - 150px); }
.lp .site-foot { font-size: 16px; }

/* The one thing on the page a reader must not miss. Given a ground and a
   border rather than colour alone, so it survives a monochrome print and a
   viewer who cannot separate the accent from the body text. */
.lp-warn {
  max-width: 52rem;
  margin: 22px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--accent-ring);
  border-radius: var(--r);
  background: var(--accent-soft);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.lp-warn strong { color: var(--ink); font-weight: 600; }

/* ---------- why not the PDF, or an LLM ---------- */

/* Three cards side by side, so the same hour spent three ways can be compared
   line for line. The third is the affirmative one and is the only card the
   accent touches. */
/* One of the three at a time, and the heading is how you choose it. Three
   columns asked a reader to compare five lines against five lines twice over;
   a reader who is deciding whether to stay reads one of them. */
.against-tabs { margin: 30px 0 0; }
.against-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  border-bottom: 1px solid var(--line);
}
.against-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 14px;
  font: 600 16px var(--sans);
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.against-tab:hover { color: var(--ink); }
.against-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.against-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
/* The affirmative one is the only tab the accent touches, selected or not. */
.against-tab.is-here { color: color-mix(in srgb, var(--accent-text) 62%, var(--ink-faint)); }
.against-tab.is-here:hover,
.against-tab.is-here[aria-selected="true"] { color: var(--accent-text); }
.against-tab.is-here[aria-selected="true"] { border-bottom-color: var(--accent); }

/* The three panels share one grid cell, so the section is as tall as the
   longest of them and nothing below it moves when the reader points at another
   heading. The one not being read is out of the way and out of the AT tree,
   without being out of the layout. */
.against-panels {
  display: grid;
  max-width: 46rem;
  padding-top: 24px;
}
.against-panels .against-list { grid-area: 1 / 1; }
.against-list.is-off {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.against-list { transition: opacity 0.15s ease; }

/* Bullets, not prose: a reader deciding whether to stay reads down the marks.
   Hollow where the approach falls short, filled and ticked where it does not. */
.against-list { list-style: none; margin: 0; padding: 0; }
.against-list li {
  position: relative;
  margin: 0 0 13px;
  padding-left: 33.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.against-list li:last-child { margin-bottom: 0; }
.against-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  box-sizing: border-box;
}
/* A dash where the approach falls short, a tick where it does not. The two
   marks sit in the same circle at the same size, so the three columns can be
   read straight down. */
.against-list li::after {
  content: "";
  position: absolute;
  left: 5.4px;
  top: calc(0.2em + 9.7px);
  width: 10px;
  height: 1.7px;
  border-radius: 1px;
  background: var(--ink-faint);
}
.against-list.is-here li::before {
  background: var(--grad-brand);
  border-color: transparent;
}
.against-list.is-here li::after {
  left: 6.25px;
  top: calc(0.2em + 6.25px);
  width: 8.75px;
  height: 4.4px;
  background: none;
  border-radius: 0;
  border-left: 2px solid var(--on-accent);
  border-bottom: 2px solid var(--on-accent);
  transform: rotate(-45deg);
}

/* The payoff, and deliberately not a fourth column. It stands off the row by a
   gap twice the one between the columns, and it is ruled rather than boxed: a
   hairline above and below, nothing at the sides and nothing behind it. A band
   closing the section reads as a conclusion drawn from the three columns
   rather than as another one of them.

   With no side borders the text is no longer inset by a card's padding, so it
   sets to the page column - level with the section head above it, which is the
   right measure for a statement about the page rather than about a card. */
.against-close {
  margin: 32px 0 0;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.against-close p {
  max-width: 54rem;
  margin: 0;
  line-height: 1.65;
  color: var(--ink-soft);
}
.against-close strong { font-weight: 600; color: var(--ink); }

/* ---------- the timeline ---------- */

/* One spine, one marker per step, everything to the right of it. Read top to
   bottom, which is what a sequence of phases wants. The steps are names only,
   so the spine carries a little more weight than a hairline would - with no
   prose hanging off it, the line and the markers are the whole shape. */
.timeline {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  max-width: 46rem;
}

/* The spine is the step's own left border, so it starts and stops with the
   content instead of being a separate line to keep aligned with it. */
.tl-step {
  position: relative;
  margin: 0;
  padding: 0 0 26px 32px;
  border-left: 2px solid var(--line);
}
/* The spine is one line down the whole list, so the accent is stepped along it
   from step to step rather than run inside each one: a gradient restarted per
   step reads as six segments, not as one spine. The fade is the point - the
   near end of the plan is solid, and the far end of it is nearly the page. */
.tl-step:nth-child(1) { border-left-color: color-mix(in srgb, var(--accent) 72%, var(--line)); }
.tl-step:nth-child(2) { border-left-color: color-mix(in srgb, var(--accent) 52%, var(--line)); }
.tl-step:nth-child(3) { border-left-color: color-mix(in srgb, var(--accent-2) 40%, var(--line)); }
.tl-step:nth-child(4) { border-left-color: color-mix(in srgb, var(--accent-3) 30%, var(--line)); }
.tl-step:nth-child(5) { border-left-color: color-mix(in srgb, var(--accent-3) 16%, var(--line)); }
/* The last step ends the line rather than trailing it off into nothing. The
   border stays, transparent, so the text does not shift by a pixel. */
.tl-step:last-child { border-left-color: transparent; padding-bottom: 0; }

/* The marker sits on the spine, not beside it. left:0 is the padding edge,
   which is inside the 2px border, so it is pulled back by its own radius plus
   half the border it straddles. */
.tl-step::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  box-sizing: border-box;
}
/* Where the project actually is: filled rather than hollow, ringed, larger,
   and the only accent in the list, so the eye lands on it first. */
.tl-step.is-now::before {
  left: -9.5px;
  top: 1.5px;
  width: 17px;
  height: 17px;
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 0 0 4px var(--accent-soft), var(--glow);
}

/* No pill: at this size a bordered chip is more furniture than the word needs.
   The label is just small type, and the marker on the spine is what says which
   step the project is actually on. */
.tl-when {
  display: block;
  margin: 0 0 4px;
  font: 600 12px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tl-step.is-now .tl-when { color: var(--accent-text); }

/* Plain: the step is a name and nothing else now, so it is set at the page's
   own size and weight rather than as a heading over a paragraph that is no
   longer there. Only the step the project is on is picked out, and by ink
   rather than by size, so the list still reads as one list. */
.tl-what {
  font: 400 16px/1.35 var(--sans);
  letter-spacing: 0;
  color: var(--ink-soft);
  margin: 0;
}
.tl-step.is-now .tl-what { color: var(--ink); font-weight: 500; }

/* ---------- the way out ---------- */

/* One button and nothing else. It used to sit in a card, and a card around a
   single control reads as an empty card - so it stands on the page on its own,
   and is the largest door on the site because it is the last thing the page
   asks for. */
.lp-close {
  margin: 112px 0 0;
  text-align: center;
}
.lp-close .door-main {
  height: 67.5px;
  padding: 0 40px;
  gap: 11.25px;
  font-size: 20.62px;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .lp-hero { padding-top: 64px; }
  .lp-tiles { grid-template-columns: 1fr 1fr; }
  .lp-tiles .lp-tile:last-child { grid-column: 1 / -1; }
  .against-tablist { gap: 24px; }
}

@media (max-width: 760px) {
  .shelf-head { padding-top: 40px; }
  .lp-tiles { grid-template-columns: 1fr; }
  .lp-tiles .lp-tile:last-child { grid-column: auto; }
  .lp-close { margin-top: 88px; }
  .against-close { padding: 22px 0; }
}