/* ==================================================================
   LEAF.CSS — the pages outside the book.

   Terms, privacy, refund, return, contact, pricing. The architecture
   note is blunt about what these are: "Footer pages are not sections."
   They are their own documents, reached by link — so none of the
   machinery that makes index.html a book applies to them. No sticky, no
   pin, no crossing, no margin furniture, no contents leaf.

   WHAT THEY DO SHARE IS THE STOCK. They are printed on the same paper
   the manifesto is set on — one flat ivory, its tooth carried by a
   250px tile baked through the real pipeline (js/leaf.js). That is the
   whole of the continuity, and it is enough: same sheet, same ink, same
   four faces, same measure. A reader who follows a link out of the
   colophon has not left the book, only reached its back matter.

   AND THE VINE DOES NOT COME WITH THEM. Aachman's call, and it is the
   right one for the same reason the vine exists at all: the ornament's
   job on the cover is to BE the join between two materials
   (palette.js). There is no join here — one sheet, one material — so a
   vine down the margin would be decorating a surface rather than doing
   structural work, which house style §9 forbids in as many words. The
   type area is centred in the page instead of beside a line, because
   with nothing at the quarter there is nothing to sit beside.

   COLOURS AND CLAMPS ARE COPIED FROM index.html AND js/paper.js RATHER
   THAN IMPORTED, because a CSS file cannot import them and because
   index.html carries a whole stylesheet of book machinery this must not
   inherit. Three numbers are load-bearing and are named at their source:
   --ink and --copper are palette.js's settled pair, and --paper is
   STOCKS.ivory.ground. If one of those moves, it moves in two places.
   ================================================================== */

:root {
  /* palette.js: settled from Prototype 17, not open for redesign */
  --ink: #453D33;
  --copper: #B4805E;
  /* paper.js STOCKS.ivory.ground — the flat albedo the tile is baked
     over, so a page whose tile never arrives is paper rather than a
     hole. See the note in js/leaf.js. */
  --paper: #F4EFE1;
  /* paper.js RULE.colour — the printed margin rule. A ruled blank on a
     form is the same line, so the form takes its colour from there
     rather than inventing a hairline. */
  --rule: #C9B79A;

  /* ONE TOKEN PER REGISTER, AND NOTHING DERIVED WITH `em`. House style
     §3 records this going wrong twice: `em` resolves against the
     INHERITED size, never against a clamp() the element is itself about
     to apply, so anything sized off a clamped parent drifts with the
     viewport. Everything below that needs a fraction of a register
     takes calc() of the property. */
  --body:  clamp(16px, 1.2vw, 18.5px);
  --head:  clamp(22px, 1.9vw, 28px);
  --sub:   clamp(17px, 1.35vw, 21px);
  --small: clamp(13.5px, 1.02vw, 15.5px);

  /* the measure, in rem so it is a real length and not an em trap */
  --measure: 40rem;
}

/* THE GROUND GOES ON THE ROOT AND ON NOTHING ELSE, and that is not
   tidiness — it is the whole reason the paper shows.

   The root element's background is propagated to the canvas, which is
   what paints behind the whole viewport including the overscroll. But
   the propagation only survives if BODY has no background of its own:
   body's box is painted over the top of it, so `html, body { background
   }` — which is what this file said first — draws the flat colour over
   the tile js/leaf.js has just laid on the root, and the page comes out
   perfectly, invisibly blank. It measured as a standard deviation of
   exactly zero against the landing page's 3.9.

   The colour here is the fallback as well as the ground: the paper's
   albedo is ONE flat ivory by decision (see the top of paper.js), so a
   page whose tile never arrives has lost the tooth and nothing else. */
html {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}
body {
  margin: 0;
  font: 400 var(--body)/1.72 "EB Garamond", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- THE LEAF ----
   One measure, centred, with a book's sinkage above the title and more
   below the last line than the browser would give. White space is this
   site's only ornament budget (index.html says so at `article`), and on
   a page carrying no ornament at all it is the entire design. */
.leaf {
  box-sizing: border-box;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(28px, 5vh, 56px) clamp(22px, 5vw, 40px) clamp(72px, 14vh, 150px);
  /* THE IMPRINT SITS AT THE FOOT OF THE LEAF, NOT UNDER THE LAST LINE.
     Contact is four lines long, and set as ordinary flow its rule and
     imprint landed halfway up the screen with four hundred pixels of
     blank paper below them — which reads as a page that failed to
     finish loading. A book's imprint is at the bottom of the leaf
     whether the leaf is full or not, so `main` takes whatever room is
     going and the foot is pushed down onto it.

     `dvh` because the unit has to survive a phone's toolbars sliding
     away; `vh` first for anything that has not got it. On a page
     longer than the screen there is no free room to take, so `main` is
     its natural height and none of this does anything. */
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}
/* a flex child stretches, and a stretched running head would carry its
   hover underline the whole width of the measure */
.leaf > .back { align-self: flex-start; }
.leaf > main { flex: 1 0 auto; }

/* the way back, set as furniture — a running head, not a button. It is
   the only navigation on the page and it does not need mass. */
.back {
  display: inline-block;
  font: italic 400 var(--small)/1.5 "EB Garamond", Georgia, serif;
  color: var(--ink); text-decoration: none; opacity: .6;
  border-bottom: 1px solid transparent;
  transition: opacity .2s ease, border-color .2s ease;
  margin-bottom: clamp(48px, 11vh, 118px);
}
.back:hover, .back:focus-visible { opacity: .95; border-bottom-color: rgba(69, 61, 51, .3); }

/* ---- THE TITLE ----
   THE SAME PLATE THE BOOK'S CHAPTERS USE — letterspaced caps, centred,
   at the same clamp. That is the single strongest signal that these
   pages belong to the same object; a leaf page titled in a different
   register would read as a different site with a matching palette.

   `text-indent` is half the tracking, for the reason index.html gives:
   letter-spacing adds a space after the LAST letter too, so the glyph
   run sits half a tracking left of centre, and correcting by the whole
   tracking overshoots. */
/* THE DROP UNDER THE TITLE BELONGS TO THE TITLE BLOCK, not to the
   title. Where a line of furniture follows — a date, a price — the
   title closes up to it and the furniture carries the sinkage; where
   nothing follows, the title carries it itself. Written the other way
   round the two margins would collapse into one and the date line
   would float a chapter opening below its own title. */
h1 {
  margin: 0 0 clamp(34px, 7vh, 70px);
  text-align: center;
  text-transform: uppercase;
  font: 400 var(--head)/1.3 "EB Garamond", Georgia, serif;
  letter-spacing: .18em;
  text-indent: .09em;
}

/* the date line, the price line — any single line of furniture
   standing under a title. Two names for one register because
   "updated" is a lie on the pricing page and "standfirst" is a lie
   on a policy, and the register is genuinely the same. */
h1:has(+ .updated), h1:has(+ .standfirst), h1:has(+ .pricing-lockup) { margin-bottom: .4em; }
.updated {
  margin: 0 0 clamp(38px, 8vh, 76px);
  text-align: center;
  font: italic 400 var(--small)/1.6 "EB Garamond", Georgia, serif;
  opacity: .52;
}

/* A STANDFIRST IS NOT A DATE LINE, AND SETTING THEM ALIKE WAS THE
   MISTAKE. The two shared one register on the reasoning that both are a
   single line of furniture under a title — true of "Last updated August
   17, 2026", which nobody came for, and false of "$30/month", which is
   the whole fact a pricing page exists to state. It came out at
   fifteen pixels, italic, at half opacity: the smallest, faintest thing
   on the page was its price. Aachman's note — "if anyone is subscribing,
   at least they should know what they are paying."

   So it takes index.html's `.copy` register, which is the line that
   carries a section on the landing page: roman, full ink, prose display
   size. Roman rather than italic because italic here is furniture, and
   a price is not furniture; and it stays under the caps title both
   numerically and by eye, so the head still reads as the head. */
.standfirst {
  --standfirst: clamp(19px, 1.6vw, 25px);
  margin: 0 0 clamp(38px, 8vh, 76px);
  text-align: center;
  font: 400 var(--standfirst)/1.4 "EB Garamond", Georgia, serif;
}

/* ---- PRICING LOCKUP ----
   The price and terms under the title. Set in full ink, with the price
   at display scale and the terms clear and reassuring underneath. */
.pricing-lockup {
  margin: 0 0 clamp(20px, 4vh, 36px);
  text-align: center;
}
.price-figure {
  margin: 0 0 .2em;
  font: 400 clamp(38px, 4.2vw, 56px)/1.05 "EB Garamond", Georgia, serif;
  color: var(--ink);
  letter-spacing: -.01em;
}
.price-figure .period {
  font: italic 400 var(--sub)/1 "EB Garamond", Georgia, serif;
  opacity: .55;
  letter-spacing: 0;
  margin-left: .15em;
}
.trial-terms {
  margin: 0;
  font: italic 400 clamp(15px, 1.15vw, 17.5px)/1.5 "EB Garamond", Georgia, serif;
  color: var(--ink);
  opacity: .8;
}

.lede {
  margin: 0 0 clamp(24px, 4.5vh, 38px);
  font-size: var(--body);
  line-height: 1.72;
  text-align: center;
  opacity: .88;
}

/* ---- THE HEADS ----
   FLUSH LEFT AND WITHOUT A RULE, and both halves of that are
   deliberate. A chapter title is centred; a numbered clause inside a
   document is not — twelve centred heads down a terms page turn a
   contract into a poster and give a scanning eye nothing to run down.

   The rules under them are gone. House style §9: hairlines are the
   ornament's own vocabulary, and a dozen of them is a page of ornament
   doing no structural work. The space above each head is the separator,
   which is what a book uses.

   TWO REGISTERS, AND THE SMALLER ONE IS THE CAPS. Furniture italic for
   a clause, tracked caps well below it for a sub-head — caps read
   optically larger than lowercase, so an h3 in the title's register at
   anything near the h2's size would outrank the head above it. That is
   the trap §3 records the contents leaf falling into. */
h2 {
  margin: clamp(38px, 7vh, 68px) 0 .55em;
  font: italic 400 var(--sub)/1.34 "EB Garamond", Georgia, serif;
  letter-spacing: .008em;
}
h3 {
  margin: 2.1em 0 .35em;
  font: 400 calc(var(--small) * .92)/1.5 "EB Garamond", Georgia, serif;
  text-transform: uppercase; letter-spacing: .14em; text-indent: .07em;
  opacity: .6;
}

/* ---- THE COPY ----
   A NOTCH BELOW THE MANIFESTO, on purpose. The manifesto is set at
   clamp(17px, 1.42vw, 21px) because it is the thing you came to read;
   the small print is read once and consulted after that. This is
   index.html's own `.anchor` register, so it is a size the site already
   has rather than a sixth one. */
p, li {
  margin: 0 0 1.15em;
  font-size: var(--body); line-height: 1.72;
}
ul, ol { margin: 0 0 1.5em; padding: 0; list-style: none; }
li { margin: 0 0 .9em; padding-left: 1.5em; position: relative; }
/* a printer's mark, not a bullet — the same em-dash the manifesto sets */
li::before {
  content: "—"; position: absolute; left: 0; top: 0;
  color: var(--copper); opacity: .8;
}
ol { counter-reset: n; }
ol li::before { content: counter(n) "."; counter-increment: n; color: var(--copper); }
strong { font-weight: 500; }
kbd {
  font-family: inherit;
  font-size: calc(var(--small) * .94);
  padding: .08em .36em;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: rgba(201, 183, 154, .16);
  color: var(--ink);
}

/* ---- LINKS ----
   QUIET, AND STILL LINKS. Ink at .72 with the underline held back until
   the pointer arrives, exactly as the colophon on the landing page sets
   them. A page of live blue would be the loudest thing on the site, and
   these are pages where almost every paragraph carries a cross-
   reference. */
a {
  color: var(--ink); text-decoration: none; opacity: .72;
  border-bottom: 1px solid rgba(69, 61, 51, .28);
  transition: opacity .2s ease, border-color .2s ease;
}
a:hover, a:focus-visible { opacity: 1; border-bottom-color: rgba(69, 61, 51, .55); }

/* PLACEHOLDER COPY MARKS ITSELF AS PLACEHOLDER — the same rule and the
   same setting index.html uses. Aachman writes the prose; a stand-in
   that looks finished is how stand-in prose gets treated as settled. */
.todo {
  font: italic 400 calc(var(--small) * .98)/1.62 "EB Garamond", Georgia, serif;
  opacity: .48;
}

/* THE TERMS UNDER THE ACTION. Small print belongs against the thing it
   qualifies, not in the footer: the only reader it is for is the one who
   has just read the price and reached for the button, and by the
   colophon they have stopped reading. So it sits tight under the button
   — closer than `.status` sits under it — and the error, when there is
   one, falls below the term rather than between them.

   The setting is `.status`'s own, which is `.updated`'s: the site's
   italic furniture line, a point above `.imprint` because a term of sale
   outranks a credit line. A new name rather than a reused one, for the
   reason the standfirst is not `.updated` either — the word would lie. */
.note {
  margin: .6em 0 0;
  font: italic 400 var(--small)/1.6 "EB Garamond", Georgia, serif;
  opacity: .52;
}

/* ==================================================================
   THE ACTION

   House style §9 settled one half of this and it cost ten variants:
   everything on this site is a thin pale mark on a pale ground, so
   anything new drawn that way joins the wallpaper. An outlined button
   does not read as a quiet call to action, it reads as decoration. The
   action is therefore ink actually laid down, and it is the only object
   on its page with any mass.

   THE OTHER HALF WAS OVERDRAWN AND AACHMAN CUT IT. The first pass took
   the landing page's stamp as the model and rebuilt it as a die: cut
   corners, a seeded turbulence roughening the silhouette, the ink held
   at .88 so the paper showed through the strike. It is in the history
   if it is ever wanted. His verdict: "we need to simplify it instead of
   beautifying it."

   He is right, and the reason is inside §9 rather than against it. The
   margin stamp is charming because it is an OBJECT struck onto a page
   that is otherwise all line — it has no job but to be pressed there.
   A submit button is not an object, it is a control: it belongs to the
   field above it, it is the last thing between a reader and a payment,
   and every gram of craft spent on its edge is asking to be looked at
   rather than used. Ornament earns its place doing structural work, and
   there is no structural work here. So the mass stays, because that is
   what tells an action from a decoration, and everything else goes.

   What is left is a filled rectangle: the page's own ink, the page's
   own face, sized to its words. One per page — everything else that can
   be clicked is a quiet link.
   ================================================================== */
.act {
  display: inline-block;
  padding: .78em 1.5em;
  border: 0; border-radius: 0;
  background: rgba(69, 61, 51, .9);
  font: 400 clamp(15px, 1.26vw, 18px)/1.25 "EB Garamond", Georgia, serif;
  letter-spacing: .045em;
  color: #F6F0E4;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background-color .2s ease;
  /* the quiet-link rule above fades every anchor to .72, which on the
     one object that is supposed to have mass is exactly backwards */
  opacity: 1;
}
/* the same gesture the landing page's plate makes — the ink comes up to
   full rather than the button changing colour */
.act:hover, .act:focus-visible { background: var(--ink); }
.act:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.act[disabled] { cursor: default; background: rgba(69, 61, 51, .42); }
.act-block {
  margin: 0 0 clamp(44px, 8vh, 76px);
  text-align: center;
}

/* ---- THE CLOSURE ----
   The parting sentence after the roadmap. Steps up a notch from body
   prose, centered with a gentle measure so it reads as a quiet coda
   rather than a bullet point. */
.closure {
  margin: clamp(52px, 9vh, 84px) auto 0;
  text-align: center;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  opacity: .88;
  max-width: 28rem;
}

/* ==================================================================
   THE FORM

   A RULED BLANK, NOT A BOX. Ask what a printer would do before asking
   what a web designer would do: a field on a printed form is a line to
   write on, and the line is the one already on this paper —
   paper.js's RULE colour, which is the margin rule of the book itself.
   Four borders round an input would put a second closed silhouette on a
   page that is allowed exactly one, and it would be an outlined one at
   that.
   ================================================================== */
label {
  display: block;
  font: italic 400 var(--small)/1.5 "EB Garamond", Georgia, serif;
  opacity: .58; margin-bottom: .15em;
}
input[type="email"], input[type="text"] {
  display: block; width: 100%; box-sizing: border-box;
  margin: 0 0 1.8em;
  padding: .4em .1em .45em;
  background: none; border: 0;
  border-bottom: 1.15px solid var(--rule);
  border-radius: 0;
  font: 400 var(--body)/1.6 "EB Garamond", Georgia, serif;
  color: var(--ink);
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input::placeholder { color: rgba(69, 61, 51, .3); font-style: italic; }
input:focus {
  outline: none;
  border-bottom-color: var(--copper);
  /* the rule thickens without the layout moving — a border that grows
     by a pixel shifts every line below it */
  box-shadow: 0 1.15px 0 var(--copper);
}

/* WHAT THE FORM SAYS BACK, AND IT SAYS IT IN INK. An error red would be
   a second warm colour on a page whose one warm thing is the copper,
   which house style §2 calls the rule most worth defending. The
   sentence carries the alarm; the colour does not have to. */
.status {
  margin: 1.1em 0 0; min-height: 1.4em;
  font: italic 400 var(--small)/1.6 "EB Garamond", Georgia, serif;
  opacity: 0; transition: opacity .2s ease;
}
.status.on, .status.error { opacity: .78; }

/* ==================================================================
   THE FOOT

   ONE RULE, AND IT IS THE ONLY ONE ON THE PAGE. Not decoration: it is
   the mark that the document has ended and what follows is the imprint.
   That is the structural job ornament is allowed to do here, and it is
   the same rule, at the same weight, that closes the colophon on the
   landing page.
   ================================================================== */
.foot {
  margin-top: clamp(56px, 12vh, 120px);
  padding-top: clamp(22px, 4vh, 40px);
  border-top: 1px solid rgba(69, 61, 51, .18);
}
.foot nav {
  font-size: calc(var(--small) * .98); line-height: 1.9;
  opacity: .82;
}
.foot nav a { border-bottom-color: transparent; }
.foot nav a:hover, .foot nav a:focus-visible { border-bottom-color: rgba(69, 61, 51, .32); }
.foot .sep { opacity: .3; padding: 0 .35em; }
.imprint {
  margin: .7em 0 0;
  font-size: calc(var(--small) * .94); line-height: 1.7;
  opacity: .42;
}

/* one page — contact — is a single address and a sentence. It is NOT
   centred in the screen: a leaf of a book with three lines on it has
   white space below them, and vertically centring the block is the one
   move that would make it read as a web page rather than a page. All
   the modifier does is deepen the sinkage, so the short leaf opens the
   way the long ones do. */
.leaf.short { padding-top: clamp(40px, 11vh, 120px); }
/* a short leaf's foot has been pushed to the bottom of the screen by
   the rule above, so it does not also need the long pages' gap */
.leaf.short .foot { margin-top: clamp(40px, 8vh, 84px); }
.address {
  display: inline-block; margin: 0;
  font-size: var(--sub); line-height: 1.5;
}