/* ───────────────────────────────────────────────────────────────
   The Paranoid Action Plan product page

   The one page on the site whose job is to sell something. It exists because
   every other surface that sold the pack opened a dialog, which says the
   same things but has no URL: nothing to pin, nothing to put in a bio,
   nothing for Google to index, nothing to point an advert at.

   One ground, one column, one ask. It was three grounds and two asks and a
   page of questions, which is a lot of page for a nine dollar download. The
   order is the order a reader needs it in: what it is, what it costs, what
   it looks like, and why to do it now.
   ─────────────────────────────────────────────────────────────── */

.pp { padding: 0 0 clamp(70px, 12vw, 150px); }

/* padding-top clears the fixed menu in the top right corner. The title is
   centred and set as large as it will go, so at some widths its last word ran
   straight through "ACTION PLAN" in the nav. Dropping the type would have
   fixed that too and cost the page its one loud thing.

   The floor was 150px, and the menu's last link ends at 162-170px however
   tall the window is, so on any window under about 900px tall "ABOUT" still
   ran into "PLAN". Measured on 26.09.2026 at 1280x800, 1024x768, 900x700.
   The floor now clears the menu with room to spare. */
.pp-hero { padding: clamp(190px, 21vh, 240px) 0 0; text-align: center; }

.pp-title { font-family: 'Anton', 'Arial Narrow', Impact, sans-serif; font-weight: 400; font-size: clamp(46px, 11vw, 132px); line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; margin: 0; }

/* Each block gets its own air rather than sitting in a stack of equal gaps.
   The page is short enough that spreading it out costs nothing and makes the
   four things on it read as four things. */
.pp-lede { max-width: 30ch; margin: clamp(34px, 6vh, 64px) auto 0; font-size: clamp(16px, 2.2vw, 21px); line-height: 1.5; opacity: 0.82; }

/* ── The ask, and the only one ──────────────────────────────────
   There used to be a second price and a second button at the foot. On a page
   this short that is the same offer twice, forty millimetres apart. */
/* flex-end, so the price sits ON the button's baseline rather than floating
   somewhere above it: two things offered together should share a bottom edge.
   Inside the price, $9 and the line beside it keep their own baseline, which
   is a different alignment answering a different question. */
.pp-buy { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(18px, 3vw, 30px); margin-top: clamp(40px, 7vh, 76px); }
.pp-price { display: flex; align-items: baseline; gap: 10px; }
.pp-figure { font-family: 'Anton', 'Arial Narrow', Impact, sans-serif; font-size: clamp(38px, 6vw, 62px); line-height: 1; }
.pp-once { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: 0.6; }
.pp-cta { font-size: 12px; padding: 18px 34px; }
.pp-fine { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.4px; opacity: 0.55; }

/* The fan itself is in css/fan.css, because the band at the foot of every
   checklist guide shows the same seven pages and the guides do not load this
   file. Only the size and the spacing are set here. */
.fan { margin: clamp(56px, 9vh, 104px) 0 0; }

/* ── The last word ──────────────────────────────────────────────
   One line, never two. It broke after "NEED" for no reason other than the
   container being narrower than the sentence, and a headline that wraps on
   the word before the last one reads like a mistake. nowrap plus a size tied
   to the viewport keeps it on one line at every width, down to a phone. */
.pp-h2 {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(19px, 5vw, 66px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  margin: clamp(60px, 10vh, 120px) 0 0;
}

/* ── What is inside ─────────────────────────────────────────────
   The page showed the pack and never said what was in it: a title, a price,
   seven blurred pages, and reasons to buy paper in general. This is the
   missing middle, a short paragraph and the six sheets by name, in pack
   order.

   Rows in the site's own list idiom, a red mono number and an Anton title
   over a hairline, the same shape as the gear categories on the homepage,
   so it reads as part of the site rather than as a feature table. Numbered
   down each column rather than across, because a numbered list is read
   top to bottom. */
/* More air around this section than the page's usual rhythm. It is the
   densest block on the page, a heading, a paragraph and six rows, and at
   the standard gaps it ran into the fan above and the heading below as one
   mass. The fan's outer pages also hang past its layout box, so the gap
   above has to be measured from their corners, not from the box. */
.pp-inside .pp-h2 { margin-top: clamp(100px, 15vh, 170px); }
.pp-inside + .pp-h2 { margin-top: clamp(100px, 15vh, 170px); }

.pp-inside-text {
  max-width: 46ch;
  margin: clamp(30px, 4.6vh, 46px) auto 0;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.6;
  opacity: 0.82;
}

.pp-sheets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: clamp(28px, 4vw, 56px);
  max-width: 820px;
  margin: clamp(48px, 7.5vh, 76px) auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.pp-sheets li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 21px 0;
  border-bottom: 1px solid rgba(var(--rgb-bone), 0.18);
}
.pp-sheets li:nth-child(1),
.pp-sheets li:nth-child(4) { border-top: 1px solid rgba(var(--rgb-bone), 0.18); }

.pp-sheet-n {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--signal);
}

.pp-sheet-t {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.pp-why-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  max-width: 1000px;
  margin: clamp(36px, 6vh, 60px) auto 0;
  padding: 0;
  list-style: none;
}

.pp-why-list li {
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.45;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--rgb-bone), 0.18);
  opacity: 0.82;
}

@media (max-width: 860px) {
  .pp-why-list { grid-template-columns: 1fr 1fr; }

  /* Every gap on this page is vh-based ("each block gets its own air", see
     the note at the top of the file), which is generous on a desktop window
     and does not shrink much on a tall, narrow phone. Stacked, the seven
     gaps between the title and the footer added up to roughly half the
     page's height being empty ground. Halved here, not zeroed: the rhythm
     of separate blocks is still the point, just at a phone's scale. */
  .pp { padding-bottom: clamp(40px, 8vw, 90px); }
  .pp-hero { padding-top: clamp(90px, 11vh, 140px); }
  .pp-lede { margin-top: clamp(20px, 3.4vh, 34px); }
  .pp-buy { margin-top: clamp(24px, 4vh, 40px); }
  .fan { margin-top: clamp(32px, 5vh, 56px); }
  .pp-h2 { margin-top: clamp(32px, 5.5vh, 60px); }
  .pp-why-list { margin-top: clamp(20px, 3.4vh, 34px); }

  /* One column: two Anton titles side by side at a phone's width wrap to
     three lines each and stop reading as a list. */
  .pp-sheets {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    margin-top: clamp(30px, 5vh, 44px);
  }
  .pp-sheets li { padding: 18px 0; }
  .pp-sheets li:nth-child(4) { border-top: 0; }
  .pp-inside-text { margin-top: clamp(20px, 3.2vh, 30px); }
  /* The same extra air, at a phone's scale. Restated here because the
     desktop rule above names .pp-inside and outranks the bare .pp-h2 one. */
  .pp-inside .pp-h2,
  .pp-inside + .pp-h2 { margin-top: clamp(56px, 9vh, 84px); }
}

@media (max-width: 520px) {
  /* align-items has to be restated, not just inherited from the base rule.
     There it is flex-end, which in a ROW means "sit the price and the
     button on the same baseline" and is right. Turned to a column here it
     means the cross axis instead, which is horizontal: both children went
     to the right edge of a block spanning the full content width, so the
     price started at the middle of the screen and the button ended at the
     margin, under a title and a lede that are both centred. Nothing was
     broken in either rule on its own, only in the pair. */
  .pp-buy { flex-direction: column; align-items: center; gap: 20px; }
  .pp-why-list { grid-template-columns: 1fr; gap: 12px; }
}

/* ── The fan closes up ──────────────────────────────────────────
   tools/plan-fan.js draws this same hand two ways and names them: `wide`
   at step 7 and overlap -0.44 over a pivot of 2.6, `tight` at step 9 and
   overlap -0.79 over 1.5. css/fan.css carries the wide one as its default,
   because the band at the foot of every guide wants a shape that reads
   across a full-width strip.

   The product page takes the tight one. Spread, seven pages each show most
   of themselves, which is a lot of a paid pack to hand over in a figure
   whose job is to say what the pack looks like rather than what is on it.
   Closed up they overlap by four fifths and what is left is an edge, a
   depth and a page count.

   Scoped to .pp so the guide band keeps the wide arc it was drawn for. The
   three values move together: step and overlap without the pivot puts the
   pages on a different arc than the one they are spaced for. */
.pp .fan {
  --step: 9deg;
  --overlap: -0.79;
}

.pp .fan img { transform-origin: 50% 150%; }